@charset "utf-8";
/* CSS Document */

* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	scroll-behavior: smooth;
}

img {
	display: block;
	line-height: 1;
	max-width: 100%;
}

li {
	list-style: none;
}

.inner {
	max-width: 1270px;
	margin-inline: auto; 
	padding-inline: 35px;
}

.m_plus,
.m_plus * {
	font-family: "M PLUS Rounded 1c", sans-serif;
	font-style: normal;
}

a {
	color: #007FFF;
	text-decoration: none;
}

.button {
	display: flex;
	flex-wrap: wrap;
	gap: 40px 50px;
	max-width: 945px;
	margin-inline: auto;
}

.button > li {
	width: calc((100% - 50px)/2);	
	border: 6px solid #fff;
	border-radius: 25px;
	background: #1CAD38;
	overflow: hidden;
	box-shadow: 7.5px 7.5px 0 rgba(0, 0, 0, 0.5);
}

.prize {
	margin: 30px auto 60px;
	gap: 30px 25px;
	max-width: 1200px;
}

.prize > li {
	display: flex;
	justify-content: flex-start;
	align-items: center;
    padding: 9.5px 15px;
	gap: 6px;
	box-shadow: 7.5px 7.5px 0 rgba(0, 0, 0, 0.3);
}

.asterisk {
	padding-left: 28px;
}

.asterisk {
	font-size: 22px;
}

.asterisk li:before {
	content: "※";
    display: inline-block;
    margin-left: -28px;
    margin-right: 6px;
}

br.sp {
	display: none;
}

@media screen and (max-width: 1480px) {
	.button {
		max-width: calc((945 / 1480) * 100vw);
		gap: calc((40 / 1480) * 100vw) calc((50 / 1480) * 100vw);
	}
	
	.button > li {
		width: calc((100% - ((51 / 1480) * 100vw))/2);	
		border: max(4px, calc((6 / 1480) * 100vw)) solid #fff;
		border-radius: max(20px, calc((25 / 1480) * 100vw));
		box-shadow: max(4px, calc((7.5 / 1480) * 100vw)) max(4px, calc((7.5 / 1480) * 100vw)) 0 rgba(0, 0, 0, 0.3);
	}
	
	.prize {
		margin: calc((30 / 1480) * 100vw) auto calc((60 / 1480) * 100vw);
		gap: calc((30 / 1480) * 100vw) calc((25 / 1480) * 100vw);
		max-width: calc((1200 / 1480) * 100vw);
	}

	.prize > li {
    	padding: max(8px, calc((9.5 / 1480) * 100vw)) max(12px, calc((15 / 1480) * 100vw));
		gap: calc((6 / 1480) * 100vw);
		box-shadow: calc((7.5 / 1480) * 100vw) calc((7.5 / 1480) * 100vw) 0 rgba(0, 0, 0, 0.3);
	}
	
	.asterisk {
		padding-left: 1em;
		font-size: max(18px, calc((18 / 1480) * 100vw));
	}

	.asterisk li:before {
		margin-left: -1.15em;
		margin-right: 0.15em;
	}
}

@media screen and (max-width: 640px) {
	.inner {
		max-width: 100%;
		padding-inline: calc((35 / 640) * 100vw);
	}
	
	.button {
		max-width: 100%;
		padding: calc((35 / 640) * 100vw);
	}
	
	.button > li {
		width: 100%;
	}
	
	.prize {
		background: transparent;
		padding: 0;
	}
	
	br.sp {
		display: block;	
	}
	
	.asterisk {
		font-size: max(14px, calc((18 / 640) * 100vw));
	}
}



/******************** .mv ********************/
.mv {
	background: url("../images202506/mv_bg.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	padding: 90px 0 120px;
}

.mv h1 {
	margin: 0 auto 50px;
	animation: zoomIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
	opacity: 0;
}

@keyframes zoomIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.mv ul.button {
    transform: translateY(50px);
    opacity: 0;
    transition: all 0.6s ease 0.3s;
}

.mv ul.button.is-active {
    transform: translateY(0);
    opacity: 1;
}

.mv ul li:nth-child(1) {
	background: #DE0020;
	border-color: #000;
}

.mv ul li:nth-child(2) {
	background: #389EE8;
	border-color: #000;
}

.mv ul li a {
	display: flex;
	width: 100%;
	height: 100%;
	justify-content: center;
	align-items: center;
	text-align: center;
	color: #fff;
	font-weight: 800;
	font-size: 33px;
	line-height: 1.2;
	position: relative;
	padding-block: 15.5px;
}

.mv ul li:nth-child(3) a,
.mv ul li:nth-child(4) a {
	padding: 25.5px 46px 25.5px 92px;
}

.mv ul li:nth-child(3) a:before {
	content: "";
	background: url("../images202506/img_chara01.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	width: 92px;
	height: 115px;
	position: absolute;
	left: 3px;
}

.mv ul li:nth-child(4) a:before {
	content: "";
	background: url("../images202506/img_chara.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	width: 96px;
	height: 109px;
	position: absolute;
	left: 3px;	
}

.mv ul li a:after {
	position: absolute;
	content: "";
	display: inline-block;
	height: 43px;
	width: 24px;
	clip-path: polygon(0% 0, 100% 50%, 0 100%);
	background: #FFF100;
	right: 15px;
}

@media screen and (max-width: 1480px) {
	.mv {
		padding: calc((90 / 1480)*100vw) 0 calc((120 / 1480)*100vw);
	}
	
	.mv .inner {
		max-width: 1200px;
		padding-inline: 0;
		padding-bottom: 0;
	}
	
	.mv h1 {
		margin: 0 auto calc((90 / 1480)*100vw);
	}
	
	.mv h1 img {
		width: calc((1200 / 1480)*100vw);
		min-width: 640px;
		margin-inline: auto; 
	}
	
	.mv ul {
		max-width: min(945px, calc(100% - 70px));
	}
	
	.mv ul li a {
		font-size: max(20px, calc((33 / 1480)*100vw));
		padding-block: max(14px, calc((15.5 / 1480)*100vw));
	}
	
	.mv ul li:nth-child(3) a,
	.mv ul li:nth-child(4) a {
		padding: max(20px, calc((25.5 / 1480)*100vw)) max(40px, calc((46 / 1480)*100vw)) max(20px, calc((25.5 / 1480)*100vw)) max(66px, calc((92 / 1480)*100vw));
	}

	.mv ul li:nth-child(3) a:before {
		width: max(62px, calc((92 / 1480)*100vw));
		height: max(98px, calc((115 / 1480)*100vw));
		left: calc((3 / 1480)*100vw);
	}

	.mv ul li:nth-child(4) a:before {
		width: max(62px, calc((96 / 1480)*100vw));
		height: max(94px, calc((109 / 1480)*100vw));
		left: calc((3 / 1480)*100vw);
	}


	.mv ul li a:after {
		height: max(36px, calc((43 / 1480)*100vw));
		width: max(20px, calc((24 / 1480)*100vw));
		right: calc((15 / 1480)*100vw);
	}

}

@media screen and (max-width: 640px) {
	.mv {
		padding: 30px 0 0;
	}
	
	.mv .inner {
		padding-top: 0px;
	}
	
	.mv h1 {
		margin: 0 auto 0px;
	}

	.mv h1 img {
		width: 100%;
		min-width: inherit;
	}
	
	.mv ul {
		max-width: 100%;
		padding: max(30px, ((35 / 640)*100vw)) max(25px, ((35 / 640)*100vw));
	}

	.mv ul li a {
		font-size: max(19px, calc((28 / 640)*100vw));
	}

	.mv ul li:nth-child(3) a:before {
		height: max(83px, calc((98 / 640)*100vw));
		left: calc((3 / 320)*100vw);
	}

	.mv ul li:nth-child(4) a:before {
		height: max(79px, calc((94 / 640)*100vw));
		left: calc((3 / 320)*100vw);
	}
}



/******************** #current_campaign ********************/

#current_campaign {
	background: url("../images202506/dot_pattern01.png");
	background-size: auto;
	background-position-x: -160px;
	padding: 65px 0 70px;
}

#current_campaign h2 {
	color: #fff;
	border-radius: 13px;
	background: #FF3300;
	text-align: center;
	font-size: 30px;
	padding-block: 6px 2px;
	margin-bottom: 40px;
}

.slick-dotted.slick-slider {
	margin-bottom: 100px;
}

.slick-dots {
	bottom: -83px;
}

#current_campaign #camp-box h2 {
	border-top-left-radius: 30px;
	border-top-right-radius: 30px;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	margin-bottom: 0;
	padding-block: 13px 5px;
}

#current_campaign #camp-box #campaign {
	background: #fff;
	border: 3px solid #FF3300;
	padding: 40px 60px 60px;
	border-bottom-left-radius: 30px;
	border-bottom-right-radius: 30px;
}

#current_campaign #camp-box #campaign p {
	font-size: 20px;
	margin-bottom: 30px;
}

#current_campaign #camp-box #campaign a {
	text-decoration: underline;
	text-underline-offset: 0.25em;
	word-break: break-all;
}

@media screen and (max-width: 1480px) {
	#current_campaign {
		background-size: calc((600 / 1480)*100vw);
		background-position-x: calc((-160 / 1480)*100vw);
		padding: calc((100 / 1480)*100vw) 0 calc((105 / 1480)*100vw);
	}
	
	#current_campaign h2 {
		border-radius: max(12px, calc((13 / 1480)*100vw));
		font-size: max(28px, calc((30 / 1480)*100vw));
		padding-block: calc((6 / 1480)*100vw) calc((2 / 1480)*100vw);
		margin-bottom: calc((40 / 1480)*100vw);
	}
	
	#current_campaign #camp-box h2 {
		border-top-left-radius: max(24px, calc((30 / 1480)*100vw));
		border-top-right-radius: max(24px, calc((30 / 1480)*100vw));
		padding-block: calc((13 / 1480)*100vw) calc((5 / 1480)*100vw);
	}
	
	#current_campaign #camp-box #campaign {
		padding: calc((40 / 1480)*100vw) calc((60 / 1480)*100vw) calc((60 / 1480)*100vw);
		border-bottom-left-radius: calc((30 / 1480)*100vw);
		border-bottom-right-radius: calc((30 / 1480)*100vw);	
	}
	
	#current_campaign #camp-box #campaign p {
		font-size: 20px;
		margin-bottom: calc((30 / 1480)*100vw);
	}
}

@media screen and (max-width: 640px) {	
	#current_campaign h2 {
		font-size: max(24px, calc((28 / 640)*100vw));
	}
	
	#current_campaign #camp-box h2 {
		padding-block: max(5px, calc((13 / 640)*100vw)) max(2px, calc((5 / 640)*100vw));
		padding-inline: 5px;
	}

	#current_campaign #camp-box #campaign {
		padding: calc((40 / 1480)*100vw) calc((60 / 1480)*100vw) calc((60 / 1480)*100vw);
		border-bottom-left-radius: calc((30 / 1480)*100vw);
		border-bottom-right-radius: calc((30 / 1480)*100vw);	
	}
	
	#current_campaign #camp-box #campaign p {
		font-size: 20px;
		margin-bottom: calc((30 / 1480)*100vw);
	}
}

/******************** #campaign-1 ********************/

#campaign-1 {
	background-color: #FEFDDA;
    background-image: repeating-linear-gradient(-32.5deg, #CEF7D7, #CEF7D7 20px,  transparent 0, transparent 50px);
	background-size: auto;
	background-repeat: no-repeat;
	padding: 65px 0 50px;
}

#campaign-1 h2 {
	text-align: center;
	max-width: 1175px;
	margin-inline: auto;
	margin-bottom: 28px;
}

#campaign-1 h2:before {
	content: "";
	display: block;
	background: url("../images202506/campaign-1_h2_bfr.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	width: 468px;
	height: 186px;
	margin-inline: auto;
    transform: translateY(50px);
    opacity: 0;
    transition: all 0.6s ease 0.3s;
}

#campaign-1 h2.is-active:before {
    transform: translateY(0);
    opacity: 1;
}

#campaign-1 p {
	font-size: 28px;
	font-weight: 600;
	margin-bottom: 30px;
}

#campaign-1 p span {
	font-size: 28px;
	color: #FF0000;
	font-weight: 800;
}

#campaign-1 .accordion summary {
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background-color: #178E2F;
    color: #fff;
    cursor: pointer;
    font-size: 26px;
	font-weight: 700;
    margin-bottom: 20px;
	padding: 11px 120px 7px 0px;
}

#campaign-1 .accordion summary::before {
    content: "詳細はこちら";
    font-size: 18px;
	font-weight: 700;
    border-radius: 7.5px;
    background: #fff;
    color: #FE8C0C;
    padding: 3.5px 36px 2.5px 8px;
	position: absolute;
	right: 140px;
    top: 50%;
    transform: translateY(-50%);
}

#campaign-1 .accordion summary::after {
    content: "";
    display: inline-block;
	height: 13px;
	width: 23px;
	clip-path: polygon(0% 0, 100% 0%, 50% 100%);
	background: #178E2F;
	position: absolute;
	right: 150px;
}

#campaign-1 .accordion table {
	width: 1000px;
	margin: 0 auto 70px;
	border: #178E2F solid 1px;
    font-size: 13px;
    text-align: center;
	background: #fff;
	border-collapse: collapse;
}

#campaign-1 .accordion table tr {
	border-bottom: #178E2F solid 1px;
}

#campaign-1 .accordion table tr th,
#campaign-1 .accordion table tr td {
	border-right: #178E2F solid 1px;
	padding: 10px 7px 7px;
	font-size: 18px;
}

#campaign-1 .accordion table tr td a {
	color: #000;
	text-decoration: underline;
	text-underline-offset: 2.5px;
}

#campaign-1 .prize {
	margin: 30px auto 60px;
	gap: 30px 25px;
	max-width: 1200px;
}

#campaign-1 .prize > li {
	width: calc((100% - 25px) / 2);
	display: flex;
	justify-content: flex-start;
	align-items: center;
    padding: 9.5px 15px;
	gap: 6px;
	box-shadow: 7.5px 7.5px 0 rgba(0, 0, 0, 0.3);
	border-color: #000;
}

#campaign-1 .prize > li:nth-child(2) {
	background: #3A40CF;
}

#campaign-1 .prize > li:nth-child(3) {
	background: #EC7600;
}

#campaign-1 .prize > li:nth-child(4) {
	background: #E3007E;	
}

#campaign-1 .prize > li:before {
	content: "";
	width: 88px;
	height: 88px;
	flex-shrink: 0;
}

#campaign-1 .prize > li:nth-child(1):before {
	background: url("../images202506/campaign-1_prize-01.png");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

#campaign-1 .prize > li:nth-child(2):before {
	background: url("../images202506/campaign-1_prize-02.png");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

#campaign-1 .prize > li:nth-child(3):before {
	background: url("../images202506/campaign-1_prize-03.png");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

#campaign-1 .prize > li:nth-child(4):before {
	background: url("../images202506/campaign-1_prize-04.png");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

#campaign-1 .prize > li dl {
	width: calc(100% - 88px);
	min-width: 0;
}

#campaign-1 .prize > li dt {
	color: #fff;
	font-size: 44px;
	line-height: 1;
	font-weight: 700;
}

#campaign-1 .prize > li dt h3 {
	display: block;
	word-break: break-word;
	white-space: normal;
}

#campaign-1 .prize > li dt span.subtitle {
	display: block;
	word-break: break-word;
	white-space: normal;
}

#campaign-1 .prize > li dt span {
	font-size: 25px;
	line-height: 1;
	font-weight: 700;
    display: block;
	margin-top: 5px;
 }

#campaign-1 .prize > li:nth-child(3) span {
	font-size: 22px;
}

#campaign-1 .prize > li dd {
	color: #FFF100;
	font-size: 35px;
	font-weight: 800;
	line-height: 1;
	margin-top: 10px;
	text-align: right;
	text-shadow: 3px 3px rgba(0, 0, 0, 0.8);
}

@media screen and (max-width: 1480px) {
	#campaign-1 {
		background-image: repeating-linear-gradient(-32.5deg, #CEF7D7, #CEF7D7 calc((20 / 1480)*100vw), transparent 0, transparent calc((50 / 1480)*100vw));
		padding: calc((100 / 1480)*100vw) 0 calc((85 / 1480)*100vw);
	}
	
	#campaign-1 h2:before {
		width: max(250px, calc((468 / 1480)*100vw));
		height: max(114px, calc((186 / 1480)*100vw));
	}
	
	#campaign-1 p {
		font-size: max(20px, calc((28 / 1480)*100vw));
		margin-bottom: 30px;
	}
	
	#campaign-1 p span {
		font-size: max(20px, calc((28 / 1480)*100vw));
	}
	
	#campaign-1 .accordion summary {
		border-radius: max(8px, calc((10 / 1480)*100vw));
		font-size: max(18px, calc((26 / 1480)*100vw));
		margin-bottom: calc((20 / 1480)*100vw);
		padding: calc((11 / 1480)*100vw) 0 40px 0px;
	}
	
	#campaign-1 .accordion summary::before {
		font-size: 18px;
		border-radius: max(6px, calc((7.5 / 1480)*100vw));
		padding: calc((3.5 / 1480)*100vw) 36px calc((2.5 / 1480)*100vw) 8px;
		right: inherit;
		top: max(35px, calc((50 / 1480)*100vw));
		left: 50%;
		transform: translateX(-50%);
	}
	
	#campaign-1 .accordion summary::after {
		height: max(10px, calc((13 / 1480)*100vw));
		width:  max(20px, calc((23 / 1480)*100vw));
		right: inherit;
		top: max(45px, calc((60 / 1480)*100vw));
		left: calc(50% + 60px);
		transform: translateX(-50%);
	}
	
	#campaign-1 .accordion table {
		width: max(265px, calc((1000 / 1480)*100vw));
		margin: 0 auto calc((70 / 1480)*100vw);
		font-size: 13px;
	}
	
	#campaign-1 .accordion table tr th,
	#campaign-1 .accordion table tr td {
		padding: max(8px, calc((10 / 1480)*100vw)) max(6px, calc((7 / 1480)*100vw)) max(6px, calc((7 / 1480)*100vw));
		font-size: 18px;
	}
	
	#campaign-1 .accordion table tr th,
	#campaign-1 .accordion table tr td:nth-of-type(2) {
		white-space: nowrap;
	}
	
	#campaign-1 .prize {
		margin: calc((30 / 1480)*100vw) auto calc((60 / 1480)*100vw);
		gap: calc((30 / 1480)*100vw) calc((25 / 1480)*100vw);
		max-width: calc((1200 / 1480)*100vw);
	}

	#campaign-1 .prize > li {
		width: calc((100% - ((26 / 1480)*100vw)) / 2);
		padding: max(8px, calc((9.5 / 1480)*100vw)) max(12px, calc((15 / 1480)*100vw));
		gap: calc((6 / 1480)*100vw);
		box-shadow: calc((7.5 / 1480)*100vw) calc((7.5 / 1480)*100vw) 0 rgba(0, 0, 0, 0.3);
	}

	#campaign-1 .prize > li:before {
		width: max(76px, calc((88 / 1480)*100vw));
		height: max(76px, calc((88 / 1480)*100vw));
	}

	#campaign-1 .prize > li dl {
		width: calc(100% - ((88 / 1480)*100vw));
	}

	#campaign-1 .prize > li dt {
		font-size:  max(38px, calc((44 / 1480)*100vw));
	}

	#campaign-1 .prize > li dt span {
		font-size: max(24px, calc((25 / 1480)*100vw));
		margin-top: calc((5 / 1480)*100vw);
	 }

	#campaign-1 .prize > li:nth-child(3) span {
		font-size: max(19.5px, calc((22 / 1480)*100vw));
	}

	#campaign-1 .prize > li dd {
		font-size:  max(30px, calc((35 / 1480)*100vw));
		margin-top: max(8px, calc((10 / 1480)*100vw));
		text-shadow: calc((3 / 1480)*100vw) calc((3 / 1480)*100vw) rgba(0, 0, 0, 0.8);
		margin-left: auto;
	}
}
	
@media screen and (max-width: 640px) {
	#campaign-1 .accordion summary {
		padding: 4px 0px 40px;	
	}
	
	#campaign-1 .accordion summary::before {
		top: 87px;
		min-width: 120px;
    	text-align: center;
	}
	
	#campaign-1 .accordion summary::after {
		top: 97px;
	}
	
	#campaign-1 .accordion summary span {
		text-align: center;
	}
	
	#campaign-1 .prize {
		background: transparent;
		max-width: 100%;
	    padding: 0;
	}
	
	#campaign-1 .prize > li {
		width: 100%;
	}
	
	#campaign-1 .prize > li dl {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
    	align-items: center;
	}
	
	#campaign-1 .prize > li dt {
		font-size:  max(25px, calc((38 / 640)*100vw));
	}
	
	#campaign-1 .prize > li dt span {
		 font-size: 24px;
	}
	
	#campaign-1 .prize > li dd {
    	font-size: max(18px, calc((30 / 640)*100vw));
	}
}



/******************** .requirement ********************/

.requirement {
	background: repeating-conic-gradient(#FBF30E 0% 2.5%, #FFDA28 2.5% 4%);
	padding: 90px 0 80px;
}

.requirement h2 {
	font-size: 40px;
	text-align: center;
	font-weight: 800;
}

.requirement h2:after {
	content: "";
	display: block;
	background: #0050A6;
	height: 5px;
	width: 205px;
	margin: 5px auto 30px;
}

.requirement p {
	font-size: 30px;
	font-weight: 700;
	text-align: center;
	margin-bottom: 35px;
}

.requirement .inner > div {
	display: flex;
	justify-content: center;
	align-items: center;
}

.requirement img {
	margin: 0 auto 20px;
	height: 100%;
}

.requirement a,
#flow .inner > a {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	background: #E90000;
	color: #fff;
	font-size: 35px;
	font-weight: 800;
	border: 6px solid #fff;
	border-radius: 20px;
	padding: 10px 0 6px;
	max-width: 815px;
	margin: 0 auto;
	box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.5);
	position: relative;
    transform: scale(0.8);
    opacity: 0;
    transition: all 0.6s ease 0.3s;
}

.requirement a:after,
#flow .inner a:after {
    position: absolute;
    content: "";
    display: inline-block;
    height: 46px;
    width: 25px;
    clip-path: polygon(0% 0, 100% 50%, 0 100%);
    background: #FFF100;
    right: 20px;
}

.requirement a.is-active,
#flow .inner > a.is-active {
    transform: scale(1);
    opacity: 1;
}

@media screen and (max-width: 1480px) {
	.requirement {
		padding: calc((90 / 1480) * 100vw) 0 calc((80 / 1480) * 100vw);
	}

	.requirement h2 {
		font-size: 40px;
	}

	.requirement h2:after {
		height: max(4px, calc((5 / 1480) * 100vw));
		width: calc((205 / 1480) * 100vw);
		margin: calc((5 / 1480) * 100vw) auto max(15px, calc((30 / 1480) * 100vw));
	}

	.requirement p {
		font-size: max(28px, calc((30 / 1480) * 100vw));
		margin-bottom: calc((35 / 1480) * 100vw);
	}
	
	.requirement .inner > div {
		gap: 0 calc((50 / 1480) * 100vw);
	}

	.requirement img {
		margin: 0 auto calc((20 / 1480) * 100vw);
		width: 100%;
	}
	
	.requirement img:nth-of-type(2) {
		width: calc((87 / 1470)*100vw);
		height: calc((86 / 1470)*100vw);
	}

	.requirement a,
	#flow .inner > a {
		font-size: max(30px, calc((35 / 1480) * 100vw));
		border: max(4px, calc((6 / 1480) * 100vw)) solid #fff;
		border-radius: max(8px, calc((20 / 1480) * 100vw));
		padding: calc((10 / 1480) * 100vw) 0 calc((6 / 1480) * 100vw);
		box-shadow: max(4px, calc((6 / 1480) * 100vw)) max(4px, calc((6 / 1480) * 100vw)) 0 rgba(0, 0, 0, 0.5);
	}

	.requirement a:after,
	#flow .inner a:after {
		height: max(38px, calc((46 / 1480) * 100vw));
		width: max(20px, calc((25 / 1480) * 100vw));
		right: calc((20 / 1480) * 100vw);
	}
}

@media screen and (max-width: 640px) {	
	.requirement .inner > div {
		flex-direction: column;
	}
	
	.requirement img:nth-of-type(2) {
		width: 38px;
		height: 38px;
	}
	
	.requirement a,
	#flow .inner > a {
		font-size: calc((30 / 640) * 100vw);
	}
	
	.requirement a::after, #flow .inner a::after {
		height: calc((38 / 640) * 100vw);
		width: calc((20 / 640) * 100vw);
		right: calc((8.6 / 640) * 100vw);
}
}



/******************** #campaign-2 ********************/

#campaign-2 {
	background-color: #FEFDDA;
    background-image: repeating-linear-gradient(-32.5deg, #E3E4F9, #E3E4F9 20px,  transparent 0, transparent 50px);
	background-size: auto;
	background-repeat: no-repeat;
	padding: 65px 0 50px;
}

#campaign-2 h2 {
	text-align: center;
	max-width: 1175px;
	margin-inline: auto;
	margin-bottom: 28px;
}

#campaign-2 h2:before {
	content: "";
	display: block;
	background: url("../images202506/campaign-2_h2_bfr.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	width: 468px;
	height: 186px;
	margin-inline: auto;
    transform: translateY(50px);
    opacity: 0;
    transition: all 0.6s ease 0.3s;
}

#campaign-2 h2.is-active:before {
    transform: translateY(0);
    opacity: 1;
}

#campaign-2 p {
	font-size: 28px;
	font-weight: 600;
	margin-bottom: 30px;
}

#campaign-2 p span {
	font-size: 28px;
	color: #FF0000;
	font-weight: 800;
}

#campaign-2 .prize > li {
	width: calc((100% - 25px) / 2);
	color: #fff;
	font-size: 42px;
	font-weight: 700;
	border-color: #000;
    align-items: flex-start;
}

#campaign-2 .prize > li:nth-child(1),
#campaign-2 .prize > li:nth-child(2),
#campaign-2 .prize > li:nth-child(3),
#campaign-2 .prize > li:nth-child(4) {
	width: 100%;
}

#campaign-2 .prize > li:nth-child(2) {
	background: #EC7600;
}

#campaign-2 .prize > li:nth-child(3) {
	background: #3A40CF
}

#campaign-2 .prize > li:nth-child(4) {
	background: #E3007E;
}

#campaign-2 .prize > li:nth-child(5) {
	background: #00A0E9;
}

#campaign-2 .prize > li:nth-child(6) {
	background: #1CAE5A;
}

#campaign-2 .prize > li:nth-child(7) {
	background: #FF5381;
}

#campaign-2 .prize > li dl {
	width: 100%;
}

#campaign-2 .prize > li dl dt,
#campaign-2 .prize > li dl dd {
	justify-content: space-between;
	color: #FFF100;
	font-weight: 800;
	text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.8);
}

#campaign-2 .prize > li dl dt {
	font-size: 34px;
}

#campaign-2 .prize > li dl dt h3 {
	display: flex;
	justify-content: space-between;
	font-size: 42px;
	font-weight: 700;
	color: #fff;
	text-shadow: none;
}

#campaign-2 .prize > li dl dt h3 em {
	background: #fff;
	color: #E50303;
	font-size: 22px;
	width: 180px;
	height: 42px;
	margin: auto 0 auto auto;
	display: flex;
	justify-content: center;
	align-items: center;
}

#campaign-2 .prize > li dl dd {
	display: flex;
}

#campaign-2 .prize > li dl dd div,
#campaign-2 .prize > li dl dd div ul.asterisk {
	font-size: 22px;
	font-weight: 700;
	color: #fff;
	text-shadow: none;
	line-height: 1.3;
}

#campaign-2 .prize > li:nth-child(1) dl dd div,
#campaign-2 .prize > li:nth-child(1) dl dd div ul.asterisk {
	font-size: 25px;
}

#campaign-2 .prize > li dl dd div ul li {
	color: #FFFF00;
	font-size: 28px;
}

#campaign-2 .prize > li dl dd ul.prize-list {
	margin-top: 10px;
	min-height: 317px;
}

#campaign-2 .prize > li dl dd ul.prize-list li {
	font-size: 22px;
	color: #fff;
	text-shadow: none;
	margin-bottom: 1.1em;
	line-height: 1.3;
}

#campaign-2 .prize > li dl dd ul.prize-list li span {
	display: block;
	text-indent: 0.5em;
}

#campaign-2 .prize .asterisk li {
	color: #fff;
}

@media screen and (max-width: 1480px) {
	#campaign-2 {
		background-image: repeating-linear-gradient(-32.5deg, #E3E4F9, #E3E4F9 calc((20 / 1480) * 100vw),  transparent 0, transparent calc((50 / 1480) * 100vw));
		padding: calc((65 / 1480) * 100vw) 0 calc((50 / 1480) * 100vw);
	}

	#campaign-2 h2 {
		max-width: calc((1175 / 1480) * 100vw);
	}

	#campaign-2 h2:before {
		width: max(250px, calc((468 / 1480) * 100vw));
		height: max(114px, calc((186 / 1480) * 100vw));
	}

	#campaign-2 p {
		font-size: max(20px, calc((28 / 1480) * 100vw));
		margin-bottom: 30px;
	}

	#campaign-2 p span {
		font-size: 28px;
	}

	#campaign-2 .prize > li {
		width: calc((100% - ((26 / 1480) * 100vw)) / 2);
		font-size: 34px;
	}

	#campaign-2 .prize > li dl dt,
	#campaign-2 .prize > li dl dd {
		text-shadow: calc((5 / 1480) * 100vw) calc((5 / 1480) * 100vw) 0 rgba(0, 0, 0, 0.8);
	}

	#campaign-2 .prize > li dl dt {
		font-size: max(28px, calc((34 / 1480) * 100vw));
	}

	#campaign-2 .prize > li dl dt h3 {
		font-size: max(27px, calc((42 / 1480) * 100vw));
		line-height: 1.2;
	}

	#campaign-2 .prize > li dl dt h3 em {
		font-size: 22px;
		width: max(184px, calc((200 / 1480) * 100vw));
		height: max(38px, calc((42 / 1480) * 100vw));
		flex-shrink: 0;
	}

	#campaign-2 .prize > li dl dd div,
	#campaign-2 .prize > li dl dd div ul.asterisk {
		font-size: 22px;
	}
	
	#campaign-2 .prize > li dl dd span {
		text-align: right;
		word-break: keep-all;
	}

	#campaign-2 .prize > li:nth-child(1) dl dd div,
	#campaign-2 .prize > li:nth-child(1) dl dd div ul.asterisk {
		font-size: max(24px, calc((25 / 1480) * 100vw));
	}

	#campaign-2 .prize > li dl dd div ul li {
		font-size: 28px;
	}

	#campaign-2 .prize > li dl dd ul.prize-list {
		margin-top: calc((10 / 1480) * 100vw);
		min-height: calc((317 / 1480) * 100vw);
	}

	#campaign-2 .prize > li dl dd ul.prize-list li {
		font-size: 22px;
	}
	
	#campaign-2 .prize > li dl dd ul.prize-list li span {
		text-align: left;
	}
	
	#campaign-2 .prize .asterisk li {
		font-size: max(24px, calc((25 / 1480) * 100vw));
	}
}

@media screen and (max-width: 640px) {
	#campaign-2 .prize > li:nth-child(5),
	#campaign-2 .prize > li:nth-child(6),
	#campaign-2 .prize > li:nth-child(7) {
		width: 100%;
	}

	#campaign-2 .prize > li dl dt h3 {
		flex-direction: column-reverse;
	}
	
	#campaign-2 .prize > li dl dd {
		flex-wrap: wrap;
	}
	
	#campaign-2 .prize > li dl dd div,
	#campaign-2 .prize > li dl dd span {
		width: 100%;
	}

	#campaign-2 .prize > li dl dd span {
		text-align: right;
	}
	
	#campaign-2 .prize > li dl dd ul.prize-list {
		width: 100%;
	}
	
	#campaign-2 .prize > li dl dd ul.prize-list li {
		width: 100%;
		display: flex;
		align-items: end;
		flex-wrap: wrap;
	}
	
	#campaign-2 .prize > li dl dd ul.prize-list li span {
		width: auto;
	}
}


/******************** #flow ********************/

#flow {
	background: url("../images202506/da0618.png"), #002244;
	padding: 55px 0 130px;
	color: #fff;
}

#flow h2 {
	text-align: center;
	font-size: 40px;
	font-weight: 800;
	line-height: 1.3;
}

#flow h2:after {
	content: "";
	display: block;
	background: #FBF30E;
	height: 5px;
	width: 295px;
	margin: 5px auto 30px;
}

#flow .inner h2 + p {
	font-size: 25px;
	font-weight: 700;
	text-align: center;
}

#flow .steps {
	display: flex;
	gap: 0px 60px;
	margin: 55px auto 65px;
}

#flow .steps div dl {
	position: relative;
	padding-bottom: 60px;
}

#flow .steps div dl:after {
	content: "";
    display: inline-block;
    height: 28px;
    width: 52px;
    clip-path: polygon(0% 0, 100% 0%, 50% 100%);
    background: #FFF100;
    position: absolute;
    left: 50%;
	transform: translateX(-50%);
}

#flow .steps div dl dt {
	background: #FFF100;
	width: 130px;
	color: #000;
	text-align: center;
	font-size: 24px;
	font-weight: 700;
	border-radius: 5px;
	padding: 7px 0 2px;
	margin-bottom: 30px;
}

#flow .steps div dl dd {
	font-size: 24px;
	font-weight: 600;
	margin-bottom: 40px;
}

#flow .steps div p {
	background: #FF3300;
	color: #FFF100;
	font-size: 50px;
	font-weight: 700;
	border: 6px solid #fff;
	border-radius: 30px;
	padding: 11px 0 2px 15px;
	max-width: 300px;
	margin: 0 auto;
	text-align: center;
}

#flow .inner > h3 {
	background: #FFF100;
	color: #000;
	font-weight: 600;
	font-size: 24px;
	border-radius: 6px;
	padding: 9px 10px 5px;
	margin-block: 65px;
}

#flow .inner > p {
	font-size: 20px;
	font-weight: 600;
	text-align: left;
	margin-bottom: 1em;
	line-height: 1.7;
}

#flow .inner > a {
	margin-top: 110px;
}

@media screen and (max-width: 1480px) {
	#flow {
		padding: calc((55 / 1480)*100vw) 0 calc((130 / 1480)*100vw);
	}

	#flow h2 {
		font-size: 40px;
	}

	#flow h2:after {
		height: max(4px, calc((5 / 1480)*100vw));
		width: calc((295 / 1480)*100vw);
		margin: calc((5 / 1480)*100vw) auto 30px;
	}

	#flow .inner h2 + p {
		font-size: 25px;
	}

	#flow .steps {
		gap: 0px calc((60 / 1480)*100vw);
		margin: calc((55 / 1480)*100vw) auto 65px;
	}

	#flow .steps img {
		width: calc((540 / 1480)*100vw);
	}

	#flow .steps div dl {
		padding-bottom: max(50px, calc((60 / 1480)*100vw));
	}

	#flow .steps div dl:after {
		height: max(24px, calc((28 / 1480)*100vw));
		width: max(44px, calc((52 / 1480)*100vw));
	}

	#flow .steps div dl dt {
		width: max(102px, calc((130 / 1480)*100vw));
		font-size: 24px;
		border-radius: calc((5 / 1480)*100vw);
		padding: calc((7 / 1480)*100vw) 0 calc((2 / 1480)*100vw);
		margin-bottom: calc((30 / 1480)*100vw);
	}

	#flow .steps div dl dd {
		font-size: 24px;
		margin-bottom: calc((40 / 1480)*100vw);
	}

	#flow .steps div p {
		font-size: max(42px, calc((50 / 1480)*100vw));
		border: max(4px, calc((6 / 1480)*100vw)) solid #fff;
		border-radius: max(8px, calc((30 / 1480)*100vw));
		padding: max(8px, calc((11 / 1480)*100vw)) 0 2px max(12px, calc((15 / 1480)*100vw));
		max-width: max(260px, calc((300 / 1480)*100vw));
	}

	#flow .inner > h3 {
		font-size: 24px;
		border-radius: calc((6 / 1480)*100vw);
		padding: calc((9 / 1480)*100vw) calc((10 / 1480)*100vw) calc((5 / 1480)*100vw);
		margin-block: calc((65 / 1480)*100vw);
	}

	#flow .inner > p {
		font-size: 20px;
	}

	#flow .inner > a {
		margin-top: calc((110 / 1480)*100vw);
	}
}

@media screen and (max-width: 640px) {	
	#flow {
    	padding: 24px 0 150px;
 	}
	
	#flow .steps {
		flex-wrap: wrap;
		justify-content: center;
	}
	
	#flow h2::after {
		width: 127px;
		margin: 2px auto 30px;
	}
	
	#flow .inner h2 + p {
		font-size: 21px;
	}
	
	#flow .steps img {
		margin-bottom: calc((55 / 1480)*100vw);
		min-width: 285px;
	}
}



/******************** #btn_top ********************/

#btn_top {
	position: sticky;
	bottom: 100px;
	z-index: 100000;
	width: 90px;
	height: 90px;
	left: calc(100% - 110px);
	margin-top: -110px;
}

@media screen and (max-width: 1480px) {
	#btn_top {
		bottom: 100px;
		width: max(76px, calc((90 / 1480)*100vw));
		height: max(76px, calc((90 / 1480)*100vw));
		left: calc(100% - max(90px, ((110 / 1480)*100vw)));
		margin-top: 50px;
	}
}

@media screen and (max-width: 640px) {
	#btn_top {
		width: 45px;
		height: 45px;
		margin-top: 0;
		bottom: 117px;
    	left: calc(100% - 45px - ((10 / 640) * 100vw));
	}
}



/******************** footer ********************/

footer {
    background: #fff;
    width: 100%;
	padding-bottom: 15px;
	position: relative;
}

footer .inner {
	max-width: 100%;
	padding: 0;
}

footer h2 {
	font-size: 26px;
	text-align: center;
	font-weight: 800;
	line-height: 1.5;
	margin: 30px auto 65px;
}

footer h2 span {
	color: #DE001F;
}

footer div div {
	position: fixed;
	bottom: 0;
	background: #fff;
	width: 100%;
	padding: 10px 0 14px;
}

footer ul.button {
	max-width: 725px;
	column-gap: 25px;
	justify-content: center;
}

footer ul.button li {
	border: 4px solid #000;
	color: #fff;
	width: calc((100% - 25px)/2);
	font-size: 19px;
	font-weight: 800;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 20px;
	box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5);
}

footer ul.button li:nth-child(1) {
	background: #DE0020;
}

footer ul.button li:nth-child(2) {
	background: #389EE8;
}

footer ul.button li a {
	color: #fff;
	width: 100%;
	height: 100%;
	text-align: center;
	padding: 10.5px 20px 9.5px 0;
	position: relative;
}

footer ul.button li a:after {
    position: absolute;
    content: "";
    display: inline-block;
    height: 26px;
    width: 14px;
    clip-path: polygon(0% 0, 100% 50%, 0 100%);
    background: #FFF100;
    right: 14px;
}

@media screen and (max-width: 1480px) {
	footer .inner {
		position: relative;
		top: -20px;
	}
	
	footer h2 {
		max-width: 15em;
		margin-bottom: 65px;
		margin-top: -90px;
		padding: 0px 0 0;
	}
	
	footer ul.button li {
		width: max(300px, calc((350 / 1480)*100vw));
		font-size: max(16px, calc((19 / 1480)*100vw));
	}
}

@media screen and (max-width: 640px) {
	footer {
		padding-bottom: 0px;
		top: -120px;
		padding-top: 10px;
	}
	
	footer .inner {
		top: 0;
	}

	footer h2 {
		font-size: 13px;
		margin: 0 auto;
	}
		
	footer div div {
		padding: 10px 0;
	}
	
	footer ul.button {
		max-width: 100%;
		width: 100%;
		padding: 6px calc((35 / 640)*100vw) 9px;
		gap: 15px;
	}
	
	footer ul.button li {
		width: 100%;
		font-size: 14px;
		border: 2px solid #000;
		max-width: 285px;
	}
	
	footer ul.button li a {
		padding: 4.5px 20px 5.5px 0;
	}
	
	footer ul.button li a:after {
		height: 18px;
		width: 9px;
		right: calc((5 / 320)*100vw);
		top: 50%;
		transform: translateY(-50%);
	}
}