@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2&family=Noto+Serif+JP:wght@200..900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');



.breadcrumb{
display: none;
}



/* ==============================================
setting
============================================== */

#challenge *{
font-family: 'Noto Serif JP',Meiryo,sans-serif;
font-weight:400;
font-size: 16px;
line-height: 32px;
letter-spacing: 1px;
color:#222;
margin:0;
padding:0;
box-sizing: border-box;
transition: 0.4s ease-out;
}
@media screen and (max-width:767px) {
#challenge *{
font-size: 14px;
line-height: 24px;
letter-spacing: 0.5px;
}
}
#challenge img{
width: 100%;
height: auto;
border:none;
vertical-align:top;
}
#challenge ul{
list-style:none;
}
#challenge a{
text-decoration:none;
transition: 0.4s ease-out;
}
a:hover{
opacity: 0.5;
}



#challenge .sp{
display:none!important;
}
#challenge .pc{
display:block;
}
@media screen and (max-width:767px) {
#challenge .sp{
display:block!important;
}
#challenge .pc{
display:none;
}
}



/* ==============================================
#challenge
============================================== */

#challenge{
background: #000;
min-width: 1400px;
}
@media screen and (max-width:767px) {
#challenge{
min-width: 100%;
}
}



/* ==============================================
#challenge #counter
============================================== */

#challenge #counter{
position: relative;
height: 600px;
overflow: hidden;
z-index: 1;
}
#challenge #counter::after{
content: "";
position: absolute;
top: 0;
left: 0;
background: url("../img/lp/challenge/clg_cnt_ln.png") left top repeat-y;
background-size: 10px 11px;
width: 10px;
height: 600px;
opacity: 0.5;
}
@media screen and (max-width:767px) {
#challenge #counter::after{
background: url("../img/lp/challenge/clg_cnt_ln.png") left top repeat-y;
background-size: 5px 11px;
width: 5px;
}
}
#challenge #counter .inner h1{
position: relative;
text-align: right;
padding: 20px 20px 0 0;
filter: drop-shadow(0 2px 4px rgba(0,40,120,0.8));
}
@media screen and (max-width:767px) {
#challenge #counter .inner h1{
padding: 10px 10px 0 0;
max-width: 375px;
margin: auto;
}
}
@media screen and (max-width:374px) {
#challenge #counter .inner h1{
max-width: 320px;
}
}
#challenge #counter .inner h1:after {
content:".";
clear:both;
height:0;
display:block;
visibility:hidden;
}
#challenge #counter .inner h1 img{
max-width: 1196px;
float: right;
}
@media screen and (max-width:767px) {
#challenge #counter .inner h1 img{
max-width: 270px;
}
}
@media screen and (max-width:374px) {
#challenge #counter .inner h1 img{
max-width: 224px;
}
}
#challenge #counter .inner h1 a{
display: block;
position: absolute;
top: 20px;
left: 20px;
width: 140px;
height: 140px;
border-radius: 70px;
background: #fff;
text-align: center;
padding: 14px 0 0 0;
}
@media screen and (max-width:767px) {
#challenge #counter .inner h1 a{
top: 10px;
left: 10px;
width: 80px;
height: 80px;
border-radius: 40px;
padding: 7px 0 0 0;
}
}
@media screen and (max-width:374px) {
#challenge #counter .inner h1 a{
width: 68px;
height: 68px;
border-radius: 34px;
}
}
#challenge #counter .inner h1 a img{
max-width: 100px;
border-radius: 50px;
float: none;
}
@media screen and (max-width:767px) {
#challenge #counter .inner h1 a img{
max-width: 60px;
border-radius: 30px;
}
}
@media screen and (max-width:374px) {
#challenge #counter .inner h1 a img{
max-width: 50px;
border-radius: 25px;
}
}
#challenge #counter .inner .date{
position: absolute;
top:128px;
right: 795px;
border: solid 1px #002878;
height: 30px;
border-radius: 15px;
color: #002878;
font-size: 14px;
line-height: 26px;
font-weight: 500;
padding: 0 15px 0 20px;
}
#challenge.clear-250000 #counter .inner .date,
#challenge.clear-590000 #counter .inner .date,
#challenge.clear-670000 #counter .inner .date,
#challenge.clear-1000000 #counter .inner .date,
#challenge.clear-1500000 #counter .inner .date,
#challenge.clear-2000000 #counter .inner .date,
#challenge.clear-2500000 #counter .inner .date{
border: solid 1px #fff;
color: #fff;
}
@media screen and (max-width:767px) {
#challenge #counter .inner .date{
position: inherit;
top:inherit;
right: inherit;
max-width: 355px;
height: 21px;
font-size: 12px;
line-height: 18px;
text-align: center;
margin: 10px auto 0 auto;
}
}
@media screen and (max-width:374px) {
#challenge #counter .inner .date{
max-width: 300px;
font-size: 11px;
letter-spacing: 0;
padding: 0;
}
}
#challenge #counter .inner h2{
font-size: 40px;
line-height: 50px;
letter-spacing: 2px;
font-weight: 900;
color: #fff;
text-align: right;
margin: 10px 20px 0 0;
filter: drop-shadow(0 2px 4px rgba(0,40,120,0.8));
}
@media screen and (max-width:767px) {
#challenge #counter .inner h2{
font-size: 20px;
line-height: 30px;
margin: 12px 10px 0 0;
}
}
#challenge #counter .inner #count{
display: block;
text-align: right;
filter: drop-shadow(0 2px 4px rgba(0,40,120,0.8));
margin: 28px 20px 0 0;
}
@media screen and (max-width:767px) {
#challenge #counter .inner #count{
margin: 12px 10px 0 0;
}
}
#challenge #counter .inner #count span{
font-family: 'Roboto Condensed';
font-size: 160px;
line-height: 160px;
letter-spacing: -6px;
color: #fff;
font-weight: 700;
display: inline-block;
vertical-align: middle;
margin: -34px 5px 0 0;
}
@media screen and (max-width:767px) {
#challenge #counter .inner #count span{
font-size: 70px;
line-height: 70px;
letter-spacing: -2px;
margin: -18px 2px 0 0;
}
}
@media screen and (max-width:374px) {
#challenge #counter .inner #count span{
font-size: 68px;
line-height: 68px;
margin: -12px 2px 0 0;
}
}
#challenge #counter .inner #count img.text{
max-width: 80px;
display: inline-block;
vertical-align: middle;
}
@media screen and (max-width:767px) {
#challenge #counter .inner #count img.text{
max-width: 35px;
}
}
#challenge #counter .inner h3{
font-size: 20px;
line-height: 30px;
letter-spacing: 2px;
font-weight: 700;
color: #fff;
margin: 0 20px 0 0;
text-align: right;
filter: drop-shadow(0 2px 4px rgba(0,40,120,0.8));
}
@media screen and (max-width:767px) {
#challenge #counter .inner h3{
font-size: 16px;
line-height: 20px;
margin: 10px 10px 0 0;
}
}
#challenge #counter .inner #height{
font-family: 'Roboto Condensed';
font-size: 40px;
line-height: 40px;
font-weight: 700;
color: #fff;
text-align: right;
margin: 5px 20px 0 0;
filter: drop-shadow(0 2px 4px rgba(0,40,120,0.8));
}
#challenge #counter .inner #height span{
font-family: 'Roboto Condensed';
font-size: 40px;
line-height: 40px;
font-weight: 700;
color: #fff;
}
@media screen and (max-width:767px) {
#challenge #counter .inner #height{
font-size: 30px;
line-height: 30px;
margin: 5px 10px 0 0;
}
#challenge #counter .inner #height span{
font-size: 30px;
line-height: 30px;
}
}
#challenge #counter .inner #level{
}
#challenge #counter .inner #level div{
display: none;
}
@media screen and (max-width:767px) {
#challenge #counter .inner #level div{
position: absolute;
bottom: 10px;
right: 100px;
}
}
#challenge.clear-1000 #counter .inner #level #level-01{display: block;}
#challenge.clear-25000 #counter .inner #level #level-02{display: block;}
#challenge.clear-43000 #counter .inner #level #level-03{display: block;}
#challenge.clear-250000 #counter .inner #level #level-04{display: block;}
#challenge.clear-590000 #counter .inner #level #level-05{display: block;}
#challenge.clear-670000 #counter .inner #level #level-06{display: block;}
#challenge.clear-1000000 #counter .inner #level #level-07{display: block;}
#challenge.clear-1500000 #counter .inner #level #level-08{display: block;}
#challenge.clear-2000000 #counter .inner #level #level-09{display: block;}
#challenge.clear-2500000 #counter .inner #level #level-10{display: block;}

#challenge #counter .inner #level div p{
font-size: 100px;
line-height: 120px;
font-weight: 900;
color: #fff;
padding: 0 0 0 710px;
filter: drop-shadow(0 2px 4px rgba(0,40,120,0.8));
}
#challenge.clear-43000 #counter .inner #level div p{
font-size: 80px;
}
#challenge.clear-2000000 #counter .inner #level div p{
font-size: 70px;
}
@media screen and (max-width:767px) {
#challenge #counter .inner #level div p{
font-size: 40px;
line-height: 60px;
letter-spacing: 2px;
text-align: right;
padding: 0;
}
#challenge.clear-43000 #counter .inner #level div p{
font-size: 36px;
line-height: 52px;
letter-spacing: 0;
}
#challenge.clear-2000000 #counter .inner #level div p{
font-size: 32px;
line-height: 48px;
letter-spacing: 0;
}
}
@media screen and (max-width:374px) {
#challenge #counter .inner #level div p{
font-size: 30px;
line-height: 45px;
letter-spacing: 1px;
}
#challenge.clear-43000 #counter .inner #level div p{
font-size: 30px;
line-height: 45px;
letter-spacing: 0;
}
#challenge.clear-2000000 #counter .inner #level div p{
font-size: 24px;
line-height: 36px;
letter-spacing: 0;
}
}
#challenge #counter .inner #level div p a{
display: table;
padding: 4px;
border-radius: 100px;
margin: 5px 0 0 0;
background: linear-gradient(90deg, #c8a55a 0%, #dfcb7d 30%, #ad792f 70%, #d1a13f 100%);
}
@media screen and (max-width:767px) {
#challenge #counter .inner #level div p a{
display: table;
float: right;
padding: 2px;
margin: 2px 2px 5px 0;
}
}
#challenge #counter .inner #level div p a span{
font-size: 20px;
line-height: 30px;
font-weight: 900;
color: #fff;
border: solid 1px #fff;
border-radius: 100px;
display: block;
padding: 0px 12px 1px 12px;
}
@media screen and (max-width:767px) {
#challenge #counter .inner #level div p a span{
font-size: 14px;
line-height: 20px;
letter-spacing: 1px;
border: solid 1px #fff;
padding: 0px 10px 1px 10px;
}
}
@media screen and (max-width:374px) {
#challenge #counter .inner #level div p a span{
font-size: 13px;
letter-spacing: 1px;
padding: 0px 10px;
}
}



#challenge #counter .inner #bowl{
position: absolute;
bottom: 0;
left: 0;
width: 690px;
height: 415px;
padding: 41px 0 0 550px;
}
@media screen and (max-width:767px) {
#challenge #counter .inner #bowl{
left: inherit;
right: 0;
width: 90px;
height: 290px;
padding: 25px 0 0 0;
}
}
#challenge #counter .inner #bowl::before{
content: "";
position: absolute;
left: 0;
top: 0;
background: url("../img/lp/challenge/clg_cnt_dln.png") top left repeat-x;
background-size: 6px 1px;
width: 690px;
height: 1px;
}
#challenge #counter .inner #bowl::after{
content: "";
position: absolute;
right: -5px;
top: -2px;
width: 5px;
height: 5px;
border-radius: 2.5px;
background: #fff;
}
@media screen and (max-width:767px) {
#challenge #counter .inner #bowl::before{
left: inherit;
right: 100px;
background: url("../img/lp/challenge/clg_cnt_dln.png") top right repeat-x;
background-size: 6px 1px;
}
#challenge #counter .inner #bowl::after{
right: 95px;
}
}
#challenge #counter .inner #bowl ul{
position: relative;
z-index: 1;
}
#challenge #counter .inner #bowl ul::before{
content: "";
background: url("../img/lp/challenge/clg_cnt_bwl.png");
background-size: 120px 240px;
width: 120px;
height: 240px;
position: absolute;
top: 200px;
left: 0;
z-index: 1;
}
@media screen and (max-width:767px) {
#challenge #counter .inner #bowl ul::before{
background: url("../img/lp/challenge/clg_cnt_bwl.png");
background-size: 80px 160px;
width: 80px;
height: 160px;
top: 140px;
}
}
#challenge #counter .inner #bowl ul li{
position: relative;
width: 120px;
height: 60px;
margin: -40px 0 0 0;
display: none;
}
@media screen and (max-width:767px) {
#challenge #counter .inner #bowl ul li{
width: 80px;
height: 40px;
margin: -26px 0 0 0;
}
}
#challenge.clear-1000 #counter .inner #bowl ul li,
#challenge.clear-25000 #counter .inner #bowl ul li,
#challenge.clear-43000 #counter .inner #bowl ul li,
#challenge.clear-250000 #counter .inner #bowl ul li,
#challenge.clear-590000 #counter .inner #bowl ul li,
#challenge.clear-670000 #counter .inner #bowl ul li,
#challenge.clear-1000000 #counter .inner #bowl ul li,
#challenge.clear-1500000 #counter .inner #bowl ul li,
#challenge.clear-2000000 #counter .inner #bowl ul li,
#challenge.clear-2500000 #counter .inner #bowl ul li{
display: block;
}
#challenge #counter .inner #bowl ul li img{
width: 120px;
}
@media screen and (max-width:767px) {
#challenge #counter .inner #bowl ul li img{
width: 80px;
}
}
#challenge #counter .inner #bowl ul li span{
display: block;
position: absolute;
top: 0;
left: 0;
}
#challenge #counter .inner #bowl ul li.bowl-01 .bowl-bottom{z-index:-1; animation:bowl-01-bottom 0.4s ease-out 0.00s 1 normal both;}
@keyframes bowl-01-bottom{0%{opacity:0;top:-200px;}100%{opacity:1;top:0;}}
#challenge #counter .inner #bowl ul li.bowl-01 .bowl-top{z-index:3; animation:bowl-01-top 0.4s ease-out 0.00s 1 normal both;}
@keyframes bowl-01-top{0%{opacity:0;top:-200px;}100%{opacity:1;top:0;}}
#challenge #counter .inner #bowl ul li.bowl-02 .bowl-bottom{z-index:2; animation:bowl-02-bottom 0.4s ease-out 0.02s 1 normal both;}
@keyframes bowl-02-bottom{0%{opacity:0;top:-200px;}100%{opacity:1;top:0;}}
#challenge #counter .inner #bowl ul li.bowl-02 .bowl-top{z-index:5; animation:bowl-02-top 0.4s ease-out 0.02s 1 normal both;}
@keyframes bowl-02-top{0%{opacity:0;top:-200px;}100%{opacity:1;top:0;}}
#challenge #counter .inner #bowl ul li.bowl-03 .bowl-bottom{z-index:4; animation:bowl-03-bottom 0.4s ease-out 0.06s 1 normal both;}
@keyframes bowl-03-bottom{0%{opacity:0;top:-200px;}100%{opacity:1;top:0;}}
#challenge #counter .inner #bowl ul li.bowl-03 .bowl-top{z-index:7; animation:bowl-03-top 0.4s ease-out 0.06s 1 normal both;}
@keyframes bowl-03-top{0%{opacity:0;top:-200px;}100%{opacity:1;top:0;}}
#challenge #counter .inner #bowl ul li.bowl-04 .bowl-bottom{z-index:6; animation:bowl-04-bottom 0.4s ease-out 0.12s 1 normal both;}
@keyframes bowl-04-bottom{0%{opacity:0;top:-200px;}100%{opacity:1;top:0;}}
#challenge #counter .inner #bowl ul li.bowl-04 .bowl-top{z-index:9; animation:bowl-04-top 0.4s ease-out 0.12s 1 normal both;}
@keyframes bowl-04-top{0%{opacity:0;top:-200px;}100%{opacity:1;top:0;}}
#challenge #counter .inner #bowl ul li.bowl-05 .bowl-bottom{z-index:8; animation:bowl-05-bottom 0.4s ease-out 0.20s 1 normal both;}
@keyframes bowl-05-bottom{0%{opacity:0;top:-200px;}100%{opacity:1;top:0;}}
#challenge #counter .inner #bowl ul li.bowl-05 .bowl-top{z-index:11; animation:bowl-05-top 0.4s ease-out 0.20s 1 normal both;}
@keyframes bowl-05-top{0%{opacity:0;top:-200px;}100%{opacity:1;top:0;}}
#challenge #counter .inner #bowl ul li.bowl-06 .bowl-bottom{z-index:10; animation:bowl-06-bottom 0.4s ease-out 0.30s 1 normal both;}
@keyframes bowl-06-bottom{0%{opacity:0;top:-200px;}100%{opacity:1;top:0;}}
#challenge #counter .inner #bowl ul li.bowl-06 .bowl-top{z-index:13; animation:bowl-06-top 0.4s ease-out 0.30s 1 normal both;}
@keyframes bowl-06-top{0%{opacity:0;top:-200px;}100%{opacity:1;top:0;}}
#challenge #counter .inner #bowl ul li.bowl-07 .bowl-bottom{z-index:12; animation:bowl-07-bottom 0.4s ease-out 0.42s 1 normal both;}
@keyframes bowl-07-bottom{0%{opacity:0;top:-200px;}100%{opacity:1;top:0;}}
#challenge #counter .inner #bowl ul li.bowl-07 .bowl-top{z-index:15; animation:bowl-07-top 0.4s ease-out 0.42s 1 normal both;}
@keyframes bowl-07-top{0%{opacity:0;top:-200px;}100%{opacity:1;top:0;}}
#challenge #counter .inner #bowl ul li.bowl-08 .bowl-bottom{z-index:14; animation:bowl-08-bottom 0.4s ease-out 0.56s 1 normal both;}
@keyframes bowl-08-bottom{0%{opacity:0;top:-200px;}100%{opacity:1;top:0;}}
#challenge #counter .inner #bowl ul li.bowl-08 .bowl-top{z-index:17; animation:bowl-08-top 0.4s ease-out 0.56s 1 normal both;}
@keyframes bowl-08-top{0%{opacity:0;top:-200px;}100%{opacity:1;top:0;}}
#challenge #counter .inner #bowl ul li.bowl-09 .bowl-bottom{z-index:16; animation:bowl-09-bottom 0.4s ease-out 0.72s 1 normal both;}
@keyframes bowl-09-bottom{0%{opacity:0;top:-200px;}100%{opacity:1;top:0;}}
#challenge #counter .inner #bowl ul li.bowl-09 .bowl-top{z-index:19; animation:bowl-09-top 0.4s ease-out 0.72s 1 normal both;}
@keyframes bowl-09-top{0%{opacity:0;top:-200px;}100%{opacity:1;top:0;}}
#challenge #counter .inner #bowl ul li.bowl-10 .bowl-bottom{z-index:18; animation:bowl-10-bottom 0.4s ease-out 0.90s 1 normal both;}
@keyframes bowl-10-bottom{0%{opacity:0;top:-200px;}100%{opacity:1;top:0;}}
#challenge #counter .inner #bowl ul li.bowl-10 .bowl-top{z-index:20; animation:bowl-10-top 0.4s ease-out 0.90s 1 normal both;}
@keyframes bowl-10-top{0%{opacity:0;top:-200px;}100%{opacity:1;top:0;}}

#challenge #counter .inner #bowl ul li span img{
width: 120px;
}
@media screen and (max-width:767px) {
#challenge #counter .inner #bowl ul li span img{
width: 80px;
}
}



#challenge #counter .inner .note{
font-size: 10px;
line-height: 15px;
letter-spacing: 0;
text-align: right;
position: absolute;
bottom: 0;
right: 0;
color: #002878;
margin: 0 10px 12px 0;
}
#challenge.clear-250000 #counter .inner .note,
#challenge.clear-590000 #counter .inner .note,
#challenge.clear-670000 #counter .inner .note,
#challenge.clear-1000000 #counter .inner .note,
#challenge.clear-1500000 #counter .inner .note,
#challenge.clear-2000000 #counter .inner .note,
#challenge.clear-2500000 #counter .inner .note{
color: #fff;
}
#challenge #counter .inner figure{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 600px;
overflow: hidden;
z-index: -1;
}
#challenge #counter .inner figure img{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 6000px;
object-fit: cover;
object-position: left;
}
@media screen and (max-width:767px) {
#challenge #counter .inner figure img{
height: 6000px;
}
}
#challenge.clear-1000 #counter .inner figure img{
animation: bg-1000 2.0s ease-out 0s 1 normal both;
}
@keyframes bg-1000 {
0% {bottom: 0;}
100% {bottom: 0;}
}
#challenge.clear-25000 #counter .inner figure img{
animation: bg-25000 2.0s ease-out 0s 1 normal both;
}
@keyframes bg-25000 {
0% {bottom: 0;}
100% {bottom: -600px;}
}
#challenge.clear-43000 #counter .inner figure img{
animation: bg-43000 2.0s ease-out 0s 1 normal both;
}
@keyframes bg-43000 {
0% {bottom: 0;}
100% {bottom: -1200px;}
}
#challenge.clear-250000 #counter .inner figure img{
animation: bg-250000 2.0s ease-out 0s 1 normal both;
}
@keyframes bg-250000 {
0% {bottom: 0;}
100% {bottom: -1800px;}
}
#challenge.clear-590000 #counter .inner figure img{
animation: bg-590000 2.0s ease-out 0s 1 normal both;
}
@keyframes bg-590000 {
0% {bottom: 0;}
100% {bottom: -2400px;}
}
#challenge.clear-670000 #counter .inner figure img{
animation: bg-670000 2.0s ease-out 0s 1 normal both;
}
@keyframes bg-670000 {
0% {bottom: 0;}
100% {bottom: -3000px;}
}
#challenge.clear-1000000 #counter .inner figure img{
animation: bg-1000000 2.0s ease-out 0s 1 normal both;
}
@keyframes bg-1000000 {
0% {bottom: 0;}
100% {bottom: -3600px;}
}
#challenge.clear-1500000 #counter .inner figure img{
animation: bg-1500000 2.0s ease-out 0s 1 normal both;
}
@keyframes bg-1500000 {
0% {bottom: 0;}
100% {bottom: -4200px;}
}
#challenge.clear-2000000 #counter .inner figure img{
animation: bg-2000000 2.0s ease-out 0s 1 normal both;
}
@keyframes bg-2000000 {
0% {bottom: 0;}
100% {bottom: -4800px;}
}
#challenge.clear-2500000 #counter .inner figure img{
animation: bg-2500000 2.0s ease-out 0s 1 normal both;
}
@keyframes bg-2500000 {
0% {bottom: 0;}
100% {bottom: -5400px;}
}



/* ==============================================
#challenge #present
============================================== */

#challenge #present{
position: relative;
background: url("../img/lp/challenge/clg_prs_bg.png") center top;
}
@media screen and (max-width:767px) {
#challenge #present{
background: url("../img/lp/challenge/clg_prs_bg_sp.png") center top;
background-size: 100% auto;
}
}
#challenge #present::before{
content: "";
background: url("../img/lp/challenge/clg_prs_frm_icn-l.png") no-repeat;
background-size: 25px 25px;
position: absolute;
width: 25px;
height: 25px;
top:10px;
left: 10px;
z-index: 4;
transition: 0.4s ease-out;
}
@media screen and (max-width:767px) {
#challenge #present::before{
top:5px;
left: 5px;
}
}
#challenge #present::after{
content: "";
background: url("../img/lp/challenge/clg_prs_frm_icn-r.png") no-repeat;
background-size: 25px 25px;
position: absolute;
width: 25px;
height: 25px;
top:10px;
right: 10px;
z-index: 4;
transition: 0.4s ease-out;
}
@media screen and (max-width:767px) {
#challenge #present::after{
top:5px;
right: 5px;
}
}
#challenge #present .frame-x{
}
#challenge #present .frame-x::before{
content: "";
background: url("../img/lp/challenge/clg_prs_frm_x.png") no-repeat;
background-size: 100% 4px;
position: absolute;
width: calc(100% - 70px);
height: 4px;
top:10px;
left: 35px;
z-index: 4;
transition: 0.4s ease-out;
}
@media screen and (max-width:767px) {
#challenge #present .frame-x::before{
width: calc(100% - 60px);
top:5px;
left: 30px;
}
}
#challenge #present .frame-x::after{
content: "";
background: url("../img/lp/challenge/clg_prs_frm_x.png") no-repeat;
background-size: 100% 4px;
position: absolute;
width: calc(100% - 70px);
height: 4px;
bottom:10px;
left: 35px;
z-index: 4;
transition: 0.4s ease-out;
}
@media screen and (max-width:767px) {
#challenge #present .frame-x::after{
width: calc(100% - 60px);
bottom:5px;
left: 30px;
}
}
#challenge #present .frame-y{
}
#challenge #present .frame-y::before{
content: "";
background: url("../img/lp/challenge/clg_prs_frm_y-l.png") repeat-y;
background-size: 4px 4px;
position: absolute;
width: 4px;
height: calc(100% - 70px);
top:35px;
left: 10px;
z-index: 4;
transition: 0.4s ease-out;
}
@media screen and (max-width:767px) {
#challenge #present .frame-y::before{
height: calc(100% - 60px);
top:30px;
left: 5px;
}
}
#challenge #present .frame-y::after{
content: "";
background: url("../img/lp/challenge/clg_prs_frm_y-r.png") repeat-y;
background-size: 4px 4px;
position: absolute;
width: 4px;
height: calc(100% - 70px);
top:35px;
right: 10px;
z-index: 4;
transition: 0.4s ease-out;
}
@media screen and (max-width:767px) {
#challenge #present .frame-y::after{
height: calc(100% - 60px);
top:30px;
right: 5px;
}
}
#challenge #present .frame-z{
}
#challenge #present .frame-z::before{
content: "";
background: url("../img/lp/challenge/clg_prs_frm_icn-l.png") no-repeat;
background-size: 25px 25px;
position: absolute;
width: 25px;
height: 25px;
bottom:10px;
left: 10px;
z-index: 4;
transform: scale(1, -1);
transition: 0.4s ease-out;
}
@media screen and (max-width:767px) {
#challenge #present .frame-z::before{
bottom:5px;
left: 5px;
}
}
#challenge #present .frame-z::after{
content: "";
background: url("../img/lp/challenge/clg_prs_frm_icn-r.png") no-repeat;
background-size: 25px 25px;
position: absolute;
width: 25px;
height: 25px;
bottom:10px;
right: 10px;
z-index: 4;
transform: scale(1, -1);
transition: 0.4s ease-out;
}
@media screen and (max-width:767px) {
#challenge #present .frame-z::after{
bottom:5px;
right: 5px;
}
}



#challenge #present .inner{
position: relative;
z-index: 5;
padding: 0 0 40px 0;
}
@media screen and (max-width:767px) {
#challenge #present .inner{
padding: 0;
}
}
#challenge #present .inner h2{
font-size: 20px;
line-height: 30px;
font-weight: 900;
color: #222;
padding: 85px 0 0 55px;
position: relative;
}
@media screen and (max-width:767px) {
#challenge #present .inner h2{
font-size: 14px;
line-height: 24px;
padding: 75px 0 0 30px;
}
}
@media screen and (max-width:374px) {
#challenge #present .inner h2{
font-size: 12px;
line-height: 20px;
padding: 70px 0 0 20px;
}
}
#challenge #present .inner h2 span{
font-size: 24px;
line-height: 32px;
letter-spacing: 0;
font-weight: 900;
color: #e50012;
display: block;
width: 200px;
height: 40px;
background: #fff;
border-radius: 0 20px 20px 0;
text-align: center;
padding: 3px 0 0 0;
position: absolute;
top:30px;
left: 0;
}
@media screen and (max-width:767px) {
#challenge #present .inner h2 span{
top:20px;
}
}
#challenge #present .inner h2 span::before{
content: "";
background: url("../img/lp/challenge/clg_prs_ttl_icn.png");
background-size: 48px 60px;
width: 48px;
height: 60px;
position: absolute;
top: -60px;
left: 0;
}
@media screen and (max-width:767px) {
#challenge #present .inner h2 span::before{
background: url("../img/lp/challenge/clg_prs_ttl_icn.png");
background-size: 24px 30px;
width: 24px;
height: 30px;
top: -30px;
}
}
#challenge #present .inner p{
font-size: 14px;
line-height: 24px;
font-weight: 500;
padding: 10px 0 0 55px;
}
@media screen and (max-width:767px) {
#challenge #present .inner p{
font-size: 13px;
line-height: 20px;
padding: 10px 30px 0 30px;
}
}
@media screen and (max-width:374px) {
#challenge #present .inner p{
font-size: 12px;
line-height: 20px;
padding: 10px 20px 0 20px;
}
}
#challenge #present .inner .step{
position: absolute;
bottom: 0;
right: 0;
width: calc(100% - 520px);
overflow: hidden;
}
@media screen and (max-width:767px) {
#challenge #present .inner .step{
position: inherit;
bottom: inherit;
right: inherit;
width: 100%;
margin: 15px 0 0 0;
}
}
#challenge #present .inner .step::after{
content: "";
background: url("../img/lp/challenge/clg_prs_icn.png");
background-size: 78px 34px;
width: 78px;
height: 34px;
position: absolute;
bottom:184px;
left: 0;
margin-left: calc(25% - 39px);
display: none;
}
@media screen and (max-width:767px) {
#challenge #present .inner .step::after{
display: none!important;
}
}
#challenge #present .inner .step ul{
}
@media screen and (max-width:767px) {
#challenge #present .inner .step ul{
padding: 0 20px;
}
}
#challenge #present .inner .step ul:after {
content:".";
clear:both;
height:0;
display:block;
visibility:hidden;
}
#challenge #present .inner .step ul li{
font-size: 20px;
line-height: 30px;
font-weight: 700;
color: rgba(255,255,255,0.2);
float: left;
width: 25%;
text-align: center;
position: relative;
padding: 0 0 20px 0;
background: url("../img/lp/challenge/clg_prs_img_02.png") center bottom no-repeat;
background-size: 120px auto;
}
@media screen and (max-width:767px) {
#challenge #present .inner .step ul li{
font-size: 15px;
line-height: 20px;
padding: 0 0 8px 0;
background: url("../img/lp/challenge/clg_prs_img_02.png") center bottom no-repeat;
background-size: 60px auto;
}
}
#challenge #present .inner .step ul li::before{
content: "";
position: absolute;
bottom: 198px;
left: 0;
width: calc(50% - 32px);
height: 4px;
background: #fff;
display: none;
}
@media screen and (max-width:767px) {
#challenge #present .inner .step ul li::before{
bottom: 118px;
width: calc(50% - 24px);
height: 3px;
}
}
#challenge #present .inner .step ul li:nth-child(1)::before{
display: none;
}
#challenge #present .inner .step ul li::after{
content: "";
position: absolute;
bottom: 198px;
right: 0;
width: calc(50% - 32px);
height: 4px;
background: #fff;
display: none;
}
@media screen and (max-width:767px) {
#challenge #present .inner .step ul li::after{
bottom: 118px;
width: calc(50% - 24px);
height: 3px;
}
}
#challenge #present .inner .step ul li:nth-child(4)::after{
display: none;
}
#challenge #present .inner .step ul li img.text{
max-width: 64px;<div class="u-legacyPageTopPadding">
<div class="lp_close f-bold">キャンペーンは終了しました</div>
<div id="challenge" class="clear- 1000 clear- 25000 clear- 43000 clear- 250000 clear- 590000 clear- 670000 clear- 1000000 clear- 1500000 clear- 2000000 clear- 2500000">



<div id="counter">
<div class="inner">
<h1>
<a class="zoomIn wow" data-wow-duration="1.0s" href="/lp/nikusoba20th/"><img src="/wp-content/themes/official2026/legacy/img/lp/challenge/clg_cnt_lg.png" alt="発売から20周年 熟成醤油肉そば 20 YEARS ANNIVERSARY 丸源ラーメン"/></a>
<img class="pc zoomIn wow" data-wow-duration="1.0s" src="/wp-content/themes/official2026/legacy/img/lp/challenge/clg_cnt_ttl.png" alt="みんなで食べよう！肉そばチャレンジ"/>
<img class="sp zoomIn wow" data-wow-duration="1.0s" src="/wp-content/themes/official2026/legacy/img/lp/challenge/clg_cnt_ttl_sp.png" alt="みんなで食べよう！肉そばチャレンジ"/>
</h1>
<p class="date fadeInUp wow" data-wow-duration="1.0s" data-wow-delay="0.0s">開催期間：2024年7月16日（火）～2024年9月1日（日）</p>

<h2 class="fadeInLeft wow" data-wow-duration="0.5s" data-wow-delay="1.5s">現在までの肉そば累計実食数</h2>
<p id="count" class="fadeInLeft wow" data-wow-duration="0.5s" data-wow-delay="1.6s"><span></span><img class="text" src="/wp-content/themes/official2026/legacy/img/lp/challenge/clg_cnt_txt.png" alt="食"/></p>
<h3 class="fadeInLeft wow" data-wow-duration="0.5s" data-wow-delay="1.7s">みんなが食べたどんぶりの高さ</h3>
<p id="height" class="fadeInLeft wow" data-wow-duration="0.5s" data-wow-delay="1.8s"><span></span>m</p>

<div id="level">
<div id="level-01" class="fadeInRight wow" data-wow-duration="0.5s" data-wow-delay="1.8s"><p>丸源店舗級</p><!-- /#level-01 --></div>
<div id="level-02" class="fadeInRight wow" data-wow-duration="0.5s" data-wow-delay="1.8s"><p>東京タワー級</p><!-- /#level-02 --></div>
<div id="level-03" class="fadeInRight wow" data-wow-duration="0.5s" data-wow-delay="1.8s"><p>スカイツリー級</p><!-- /#level-03 --></div>
<div id="level-04" class="fadeInRight wow" data-wow-duration="0.5s" data-wow-delay="1.8s"><p>富士山級</p><!-- /#level-04 --></div>
<div id="level-05" class="fadeInRight wow" data-wow-duration="0.5s" data-wow-delay="1.8s"><p>エベレスト級</p><!-- /#level-05 --></div>
<div id="level-06" class="fadeInRight wow" data-wow-duration="0.5s" data-wow-delay="1.8s"><p>航空機級</p><!-- /#level-06 --></div>
<div id="level-07" class="fadeInRight wow" data-wow-duration="0.5s" data-wow-delay="1.8s"><p>100万食達成!<a href="#coupon" class="zoomIn wow" data-wow-duration="0.5s" data-wow-delay="2.0s"><span>クーポン確定!</span></a></p><!-- /#level-07 --></div>
<div id="level-08" class="fadeInRight wow" data-wow-duration="0.5s" data-wow-delay="1.8s"><p>成層圏級<a href="#coupon" class="zoomIn wow" data-wow-duration="0.5s" data-wow-delay="2.0s"><span>クーポン割引率UP!</span></a></p><!-- /#level-08 --></div>
<div id="level-09" class="fadeInRight wow" data-wow-duration="0.5s" data-wow-delay="1.8s"><p>気象観測用気球級<a href="#coupon" class="zoomIn wow" data-wow-duration="0.5s" data-wow-delay="2.0s"><span>さらにクーポン割引率UP!</span></a></p><!-- /#level-09 --></div>
<div id="level-10" class="fadeInRight wow" data-wow-duration="0.5s" data-wow-delay="1.8s"><p>限界突破!!!<a href="#coupon" class="zoomIn wow" data-wow-duration="0.5s" data-wow-delay="2.0s"><span>祝25%OFFクーポンGET!!!</span></a></p><!-- /#level-10 --></div>
<!-- /#level --></div>

<div id="bowl">
<ul>
<li class="bowl-10 wow"><span class="bowl-bottom"><img src="/wp-content/themes/official2026/legacy/img/lp/challenge/clg_cnt_bwl-01.png" alt=""/></span><span class="bowl-top"><img src="/wp-content/themes/official2026/legacy/img/lp/challenge/clg_cnt_bwl-02.png" alt=""/></span></li>
<li class="bowl-09 wow"><span class="bowl-bottom"><img src="/wp-content/themes/official2026/legacy/img/lp/challenge/clg_cnt_bwl-01.png" alt=""/></span><span class="bowl-top"><img src="/wp-content/themes/official2026/legacy/img/lp/challenge/clg_cnt_bwl-02.png" alt=""/></span></li>
<li class="bowl-08 wow"><span class="bowl-bottom"><img src="/wp-content/themes/official2026/legacy/img/lp/challenge/clg_cnt_bwl-01.png" alt=""/></span><span class="bowl-top"><img src="/wp-content/themes/official2026/legacy/img/lp/challenge/clg_cnt_bwl-02.png" alt=""/></span></li>
<li class="bowl-07 wow"><span class="bowl-bottom"><img src="/wp-content/themes/official2026/legacy/img/lp/challenge/clg_cnt_bwl-01.png" alt=""/></span><span class="bowl-top"><img src="/wp-content/themes/official2026/legacy/img/lp/challenge/clg_cnt_bwl-02.png" alt=""/></span></li>
<li class="bowl-06 wow"><span class="bowl-bottom"><img src="/wp-content/themes/official2026/legacy/img/lp/challenge/clg_cnt_bwl-01.png" alt=""/></span><span class="bowl-top"><img src="/wp-content/themes/official2026/legacy/img/lp/challenge/clg_cnt_bwl-02.png" alt=""/></span></li>
<li class="bowl-05 wow"><span class="bowl-bottom"><img src="/wp-content/themes/official2026/legacy/img/lp/challenge/clg_cnt_bwl-01.png" alt=""/></span><span class="bowl-top"><img src="/wp-content/themes/official2026/legacy/img/lp/challenge/clg_cnt_bwl-02.png" alt=""/></span></li>
<li class="bowl-04 wow"><span class="bowl-bottom"><img src="/wp-content/themes/official2026/legacy/img/lp/challenge/clg_cnt_bwl-01.png" alt=""/></span><span class="bowl-top"><img src="/wp-content/themes/official2026/legacy/img/lp/challenge/clg_cnt_bwl-02.png" alt=""/></span></li>
<li class="bowl-03 wow"><span class="bowl-bottom"><img src="/wp-content/themes/official2026/legacy/img/lp/challenge/clg_cnt_bwl-01.png" alt=""/></span><span class="bowl-top"><img src="/wp-content/themes/official2026/legacy/img/lp/challenge/clg_cnt_bwl-02.png" alt=""/></span></li>
<li class="bowl-02 wow"><span class="bowl-bottom"><img src="/wp-content/themes/official2026/legacy/img/lp/challenge/clg_cnt_bwl-01.png" alt=""/></span><span class="bowl-top"><img src="/wp-content/themes/official2026/legacy/img/lp/challenge/clg_cnt_bwl-02.png" alt=""/></span></li>
<li class="bowl-01 wow"><span class="bowl-bottom"><img src="/wp-content/themes/official2026/legacy/img/lp/challenge/clg_cnt_bwl-01.png" alt=""/></span><span class="bowl-top"><img src="/wp-content/themes/official2026/legacy/img/lp/challenge/clg_cnt_bwl-02.png" alt=""/></span></li>
</ul>
<!-- /#bowl --></div>

<p class="note pc fadeIn wow" data-wow-duration="1.0s">※累計実食数は1日1回更新されます　※累計実食数は前日までの合計数になります<br>※肉そばのどんぶりの高さを7cm、積み重ねた一杯あたりの高さを1.5cmとして算出しています</p>
<figure><img class="pc" src="/wp-content/themes/official2026/legacy/img/lp/challenge/clg_cnt_bg.jpg" alt=""/><img class="sp" src="/wp-content/themes/official2026/legacy/img/lp/challenge/clg_cnt_bg_sp.jpg" alt=""/></figure>
<!-- /.inner --></div>
<!-- /#counter --></div>



<div id="present">
<div class="inner">
<a id="coupon"></a>
<h2 class="fadeInUp wow" data-wow-duration="0.5s"><span class="fadeInLeft wow" data-wow-duration="0.5s">アプリで参加！</span>①丸源ラーメン公式アプリをダウンロード<br>②お店で肉そばカテゴリーの商品を注文<br>③お会計時にレジでアプリ会員バーコードを提示</h2>
<p class="fadeInUp wow" data-wow-duration="0.5s">みんなが食べた肉そばの数がカウントされるぞ！<br>
食べれば食べるほど、貰えるアプリクーポンの割引率がUP！<br>
250万食達成で最大25%OFF！<br>
※配布クーポンの値引き上限は1,000円（税込）</p>

<div class="step">
<ul>
<li class="fadeInUp wow" data-wow-duration="0.5s" data-wow-delay="0.0s"><img class="text" src="/wp-content/themes/official2026/legacy/img/lp/challenge/clg_prs_sttl-100m.png" alt="レベル壱"/>100万食<img class="image" src="/wp-content/themes/official2026/legacy/img/lp/challenge/clg_prs_img-10.png" alt="10%OFF"/><span><img class="zoomIn wow" data-wow-duration="0.5s" data-wow-delay="0.5s" src="/wp-content/themes/official2026/legacy/img/lp/challenge/clg_prs_txt.png" alt="達成"/></span></li>
<li class="fadeInUp wow" data-wow-duration="0.5s" data-wow-delay="0.1s"><img class="text" src="/wp-content/themes/official2026/legacy/img/lp/challenge/clg_prs_sttl-150m.png" alt="レベル弐"/>150万食<img class="image" src="/wp-content/themes/official2026/legacy/img/lp/challenge/clg_prs_img-15.png" alt="15%OFF"/><span><img class="zoomIn wow" data-wow-duration="0.5s" data-wow-delay="0.5s" src="/wp-content/themes/official2026/legacy/img/lp/challenge/clg_prs_txt.png" alt="達成"/></span></li>
<li class="fadeInUp wow" data-wow-duration="0.5s" data-wow-delay="0.2s"><img class="text" src="/wp-content/themes/official2026/legacy/img/lp/challenge/clg_prs_sttl-200m.png" alt="レベル参"/>200万食<img class="image" src="/wp-content/themes/official2026/legacy/img/lp/challenge/clg_prs_img-20.png" alt="20%OFF"/><span><img class="zoomIn wow" data-wow-duration="0.5s" data-wow-delay="0.5s" src="/wp-content/themes/official2026/legacy/img/lp/challenge/clg_prs_txt.png" alt="達成"/></span></li>
<li class="fadeInUp wow" data-wow-duration="0.5s" data-wow-delay="0.3s"><img class="text" src="/wp-content/themes/official2026/legacy/img/lp/challenge/clg_prs_sttl-250m.png" alt="レベル四"/>250万食<img class="image" src="/wp-content/themes/official2026/legacy/img/lp/challenge/clg_prs_img-25.png" alt="25%OFF"/><span><img class="zoomIn wow" data-wow-duration="0.5s" data-wow-delay="0.5s" src="/wp-content/themes/official2026/legacy/img/lp/challenge/clg_prs_txt.png" alt="達成"/></span></li>
</ul>
<!-- /.step --></div>

<!-- /.inner --></div>
<div class="frame-x"></div>
<div class="frame-y"></div>
<div class="frame-z"></div>
<!-- /#present --></div>





<div id="outline">
<div class="inner">

<div id="apps" class="fadeInUp wow" data-wow-duration="0.5s" data-wow-delay="0.2s" data-wow-offset="100">
<h2>丸源ラーメン公式アプリの<br>ダウンロードはこちら</h2>
<figure><a href="https://app-link.syodai-marugen.jp/nikusoba20th" target="_blank" rel="noopener"><img src="/wp-content/themes/official2026/legacy/img/siteLogo.svg" alt=""/></a></figure>
<!-- /#apps --></div>

<h2 class="fadeInUp wow" data-wow-duration="0.5s" data-wow-offset="100">キャンペーン概要</h2>
<table class="fadeInUp wow" data-wow-duration="0.5s" data-wow-offset="100">
<tbody>
<tr>
<th>開催期間</th>
<td>2024年7月16日(火)～2024年9月1日(日)</td>
</tr>
<tr>
<th>クーポン有効期間</th>
<td>2024年9月2日(月)～2024年10月31日(木)</td>
</tr>
<tr>
<th>開催店舗</th>
<td>丸源ラーメン全店</td>
</tr>
<tr>
<th>賞品</th>
<td>
期間中に目標食数達成で、参加者全員に達成基準に応じたアプリクーポンを1つプレゼント
<ul>
<li>・100万食達成：10%割引クーポン</li>
<li>・150万食達成：15%割引クーポン</li>
<li>・200万食達成：20%割引クーポン</li>
<li>・250万食達成：25%割引クーポン</li>
</ul>
<ul style="padding-top: 15px;">
<li>※配布クーポンの値引き上限は1,000円（税込）</li>
<li>※その他ご利用条件は配布クーポンに記載</li>
</ul>
</td>
</tr>
<tr>
<th>参加方法</th>
<td>
<ul>
<li>①丸源ラーメン公式アプリをダウンロード</li>
<li>②お店で肉そばカテゴリーの商品を注文</li>
<li>③お会計時にレジでアプリ会員バーコードを提示</li>
</ul>
</td>
</tr>
<tr>
<th>参加条件</th>
<td>
下記の肉そばカテゴリーのいずれかの商品をご注文ください
<ul>
<li>・肉そば</li>
<li>・味玉肉そば</li>
<li>・野菜肉そば</li>
<li>・ねぎ肉そば</li>
<li>・辛肉そば</li>
<li>・肉そばつけ麺</li>
<li>・肉そばデビューセット</li>
</ul>
</td>
</tr>
<tr>
<th>注意事項</th>
<td>
<ul>
<li>・本キャンペーン内容や賞品は予告なく変更となる場合がございます</li>
<li>・累計実食数は、キャンペーン開始から前日までの累計数で13時を目安に1日1回更新されます</li>
<li>・どんぶりを積み重ねた高さは、どんぶりの高さを7cm、積み重ねた一杯あたりの高さを1.5cmとして算出しています</li>
<li>・開催期間終了後、キャンペーン事務局にて累計実食数を集計しクーポン割引率を決定させていただきます</li>
<li>・参加者へのアプリクーポン配信は、参加時に使用されたアプリアカウントへのプッシュ通知でご連絡します</li>
<li>・アプリクーポンの配信は、開催期間終了後の翌日より順次配信いたします</li>
<li>・賞品の転売・譲渡・その他処分行為等はご遠慮ください。またオークション等への出品もご遠慮ください</li>
<li>・賞品を受け取る権利は他者に譲渡することができません</li>
<li>・キャンペーンの参加者数等の内容についてはお問い合わせいただいても、お答えいたしかねます</li>
<li>・次の場合には受け取りの権利が無効となります。あらかじめご了承ください
<ul>
<li>– アプリクーポン配信時までに丸源アプリを削除された場合</li>
<li>– アプリクーポン配信時までに丸源アプリ会員を退会された場合</li>
<li>– その他運営が不適切と判断した場合</li>
</ul>
</li>
<li>・本キャンペーンは株式会社物語コーポレーションが主催するもので、Apple Inc.およびアップル関連会社は一切関係ありません</li>
</ul>
</td>
</tr>
<tr>
<th>個人情報について</th>
<td>
<ul>
<li>・参加者の個人情報は、株式会社物語コーポレーションが取得し、お問い合わせ対応、本人確認、賞品配信のためだけに利用いたします</li>
<li>・個人情報を参加者の承諾なく第三者に提供することはございません（法令等により開示を求められた場合を除きます）</li>
</ul>
</td>
</tr>
</tbody>
</table>
<!-- /.inner --></div>
<!-- /#outline --></div>



<div id="thanks">
<div class="inner">
<h2 class="fadeInUp wow" data-wow-duration="1.0s" data-wow-offset="100">これからも<br>肉そばを<br>丸源を<br>よろしく<br>お願いします！</h2>
<figure class="fadeInUp wow" data-wow-duration="2.0s" data-wow-offset="100"><img src="/wp-content/themes/official2026/legacy/img/lp/challenge/clg_tks_img.jpg" alt=""/></figure>
<!-- /.inner --></div>
<!-- /#thanks --></div>



<!-- /#challenge --></div>
</div>
<script type="text/javascript" src="/wp-content/themes/official2026/legacy/js/lp/challenge/script.js"></script>
<script type="text/javascript" src="/wp-content/themes/official2026/legacy/js/lp/challenge/anime.js"></script>
<script type="text/javascript" src="/wp-content/themes/official2026/legacy/js/lp/challenge/apiconfig.js"></script>
<script type="text/javascript" src="/wp-content/themes/official2026/legacy/js/lp/challenge/apiscript.js"></script>
display: block;
margin: 0 auto 3px auto;
opacity: 0.2;
}
@media screen and (max-width:767px) {
#challenge #present .inner .step ul li img.text{
max-width: 48px;
}
}
#challenge #present .inner .step ul li img.image{
max-width: 80px;
display: block;
margin: 35px auto 0 auto;
opacity: 0.2;
}
@media screen and (max-width:767px) {
#challenge #present .inner .step ul li img.image{
max-width: 40px;
margin: 25px auto 0 auto;
}
}
#challenge #present .inner .step ul li span{
display: none;
position: absolute;
bottom: 50px;
left: 120px;
right: 0;
margin: auto;
}
@media screen and (max-width:767px) {
#challenge #present .inner .step ul li span{
bottom: 25px;
left: inherit;
right: -2px;
}
}
#challenge #present .inner .step ul li span img{
width: 61px;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}
@media screen and (max-width:767px) {
#challenge #present .inner .step ul li span img{
width: 30px;
}
}



#challenge.clear-1000000 #present .inner .step::after{
display: block;
}
#challenge.clear-1000000 #present .inner .step ul li:nth-child(1){
color: rgba(255,255,255,1.0);
background: url("../img/lp/challenge/clg_prs_img_01.png") center bottom no-repeat;
background-size: 120px auto;
}
@media screen and (max-width:767px) {
#challenge.clear-1000000 #present .inner .step ul li:nth-child(1){
background: url("../img/lp/challenge/clg_prs_img_01.png") center bottom no-repeat;
background-size: 60px auto;
}
}
#challenge.clear-1000000 #present .inner .step ul li:nth-child(1) img{
opacity: 1;
}
#challenge.clear-1000000 #present .inner .step ul li:nth-child(1) span{
display: block;
}
#challenge.clear-1000000 #present .inner .step ul li:nth-child(1)::after{
display: block;
}
#challenge.clear-1500000 #present .inner .step::after{
display: block;
margin-left: calc(50% - 39px);
}
#challenge.clear-1500000 #present .inner .step ul li:nth-child(1),
#challenge.clear-1500000 #present .inner .step ul li:nth-child(2){
color: rgba(255,255,255,1.0);
background: url("../img/lp/challenge/clg_prs_img_01.png") center bottom no-repeat;
background-size: 120px auto;
}
@media screen and (max-width:767px) {
#challenge.clear-1500000 #present .inner .step ul li:nth-child(1),
#challenge.clear-1500000 #present .inner .step ul li:nth-child(2){
background: url("../img/lp/challenge/clg_prs_img_01.png") center bottom no-repeat;
background-size: 60px auto;
}
}
#challenge.clear-1500000 #present .inner .step ul li:nth-child(1) img,
#challenge.clear-1500000 #present .inner .step ul li:nth-child(2) img{
opacity: 1;
}
#challenge.clear-1500000 #present .inner .step ul li:nth-child(1) span,
#challenge.clear-1500000 #present .inner .step ul li:nth-child(2) span{
display: block;
}
#challenge.clear-1500000 #present .inner .step ul li:nth-child(1)::after,
#challenge.clear-1500000 #present .inner .step ul li:nth-child(2)::before,
#challenge.clear-1500000 #present .inner .step ul li:nth-child(2)::after{
display: block;
}
#challenge.clear-2000000 #present .inner .step::after{
display: block;
margin-left: calc(75% - 39px);
}
#challenge.clear-2000000 #present .inner .step ul li:nth-child(1),
#challenge.clear-2000000 #present .inner .step ul li:nth-child(2),
#challenge.clear-2000000 #present .inner .step ul li:nth-child(3){
color: rgba(255,255,255,1.0);
background: url("../img/lp/challenge/clg_prs_img_01.png") center bottom no-repeat;
background-size: 120px auto;
}
@media screen and (max-width:767px) {
#challenge.clear-2000000 #present .inner .step ul li:nth-child(1),
#challenge.clear-2000000 #present .inner .step ul li:nth-child(2),
#challenge.clear-2000000 #present .inner .step ul li:nth-child(3){
background: url("../img/lp/challenge/clg_prs_img_01.png") center bottom no-repeat;
background-size: 60px auto;
}
}
#challenge.clear-2000000 #present .inner .step ul li:nth-child(1) img,
#challenge.clear-2000000 #present .inner .step ul li:nth-child(2) img,
#challenge.clear-2000000 #present .inner .step ul li:nth-child(3) img{
opacity: 1;
}
#challenge.clear-2000000 #present .inner .step ul li:nth-child(1) span,
#challenge.clear-2000000 #present .inner .step ul li:nth-child(2) span,
#challenge.clear-2000000 #present .inner .step ul li:nth-child(3) span{
display: block;
}
#challenge.clear-2000000 #present .inner .step ul li:nth-child(1)::after,
#challenge.clear-2000000 #present .inner .step ul li:nth-child(2)::before,
#challenge.clear-2000000 #present .inner .step ul li:nth-child(2)::after,
#challenge.clear-2000000 #present .inner .step ul li:nth-child(3)::before,
#challenge.clear-2000000 #present .inner .step ul li:nth-child(3)::after{
display: block;
}
#challenge.clear-2500000 #present .inner .step ul li:nth-child(1),
#challenge.clear-2500000 #present .inner .step ul li:nth-child(2),
#challenge.clear-2500000 #present .inner .step ul li:nth-child(3),
#challenge.clear-2500000 #present .inner .step ul li:nth-child(4){
color: rgba(255,255,255,1.0);
background: url("../img/lp/challenge/clg_prs_img_01.png") center bottom no-repeat;
background-size: 120px auto;
}
@media screen and (max-width:767px) {
#challenge.clear-2500000 #present .inner .step ul li:nth-child(1),
#challenge.clear-2500000 #present .inner .step ul li:nth-child(2),
#challenge.clear-2500000 #present .inner .step ul li:nth-child(3),
#challenge.clear-2500000 #present .inner .step ul li:nth-child(4){
background: url("../img/lp/challenge/clg_prs_img_01.png") center bottom no-repeat;
background-size: 60px auto;
}
}
#challenge.clear-2500000 #present .inner .step ul li:nth-child(1) img,
#challenge.clear-2500000 #present .inner .step ul li:nth-child(2) img,
#challenge.clear-2500000 #present .inner .step ul li:nth-child(3) img,
#challenge.clear-2500000 #present .inner .step ul li:nth-child(4) img{
opacity: 1;
}
#challenge.clear-2500000 #present .inner .step ul li:nth-child(1) span,
#challenge.clear-2500000 #present .inner .step ul li:nth-child(2) span,
#challenge.clear-2500000 #present .inner .step ul li:nth-child(3) span,
#challenge.clear-2500000 #present .inner .step ul li:nth-child(4) span{
display: block;
}
#challenge.clear-2500000 #present .inner .step ul li:nth-child(1)::after,
#challenge.clear-2500000 #present .inner .step ul li:nth-child(2)::before,
#challenge.clear-2500000 #present .inner .step ul li:nth-child(2)::after,
#challenge.clear-2500000 #present .inner .step ul li:nth-child(3)::before,
#challenge.clear-2500000 #present .inner .step ul li:nth-child(3)::after,
#challenge.clear-2500000 #present .inner .step ul li:nth-child(4)::before{
display: block;
}



/* ==============================================
#challenge #outline
============================================== */

#challenge #outline{
position: relative;
background: url("../img/lp/challenge/clg_oln_bg.png") center top;
padding: 0 0 160px 0;
}
@media screen and (max-width:767px) {
#challenge #outline{
background: url("../img/lp/challenge/clg_oln_bg.png") center top;
background-size: 40px auto;
padding: 0 30px 120px 30px;
}
}
@media screen and (max-width:374px) {
#challenge #outline{
padding: 0 16px 120px 16px;
}
}
#challenge #outline::after{
content: "";
width: 100%;
height: 400px;
position: absolute;
bottom: 0;
left: 0;
background: linear-gradient(0deg, rgba(255,255,255,1.0) 0%, rgba(255,255,255,0.0) 100%);
}
#challenge #outline .inner{
max-width: 960px;
margin: auto;
transition: 0.4s ease-out;
position: relative;
z-index: 1;
}



#challenge #outline .inner #apps h2{
text-align: center;
font-size: 30px;
line-height: 40px;
letter-spacing: 4px;
font-weight: 700;
padding: 75px 0 0 0;
transition: 0.4s ease-out;
}
@media screen and (max-width:767px) {
#challenge #outline .inner #apps h2{
font-size: 20px;
line-height: 30px;
padding: 50px 0 0 0;
}
}
#challenge #outline .inner #apps figure{
}
#challenge #outline .inner #apps figure a{
display: block;
width: 120px;
height: 120px;
background: #fff;
border-radius: 24px;
margin: 25px auto 0 auto;
padding: 34px 8px 0 8px;
filter: drop-shadow(0 0 8px rgba(0,0,0,0.4));
}
#challenge #apps .inner figure a img{
}



#challenge #outline .inner h2{
font-size: 30px;
line-height: 40px;
letter-spacing: 4px;
font-weight: 900;
text-align: center;
padding: 70px 0 0 0;
transition: 0.4s ease-out;
}
@media screen and (max-width:767px) {
#challenge #outline .inner h2{
font-size: 20px;
line-height: 30px;
padding: 50px 0 0 0;
}
}
#challenge #outline .inner table{
border-collapse:collapse;
border-spacing:0;
border-bottom: 1px solid #ccc;
margin: 55px 0 0 0;
}
@media screen and (max-width:767px) {
#challenge #outline .inner table{
margin: 35px 0 0 0;
}
}
#challenge #outline .inner table th{
font-size: 16px;
line-height: 24px;
font-weight: 700;
border-top: 1px solid #ccc;
width: 170px;
text-align: left;
vertical-align: top;
padding: 25px 0 30px 0;
}
@media screen and (max-width:767px) {
#challenge #outline .inner table th{
display: block;
line-height: 24px;
width: 100%;
padding: 25px 0 0 0;
}
}
#challenge #outline .inner table td{
font-size: 16px;
line-height: 24px;
border-top: 1px solid #ccc;
text-align: left;
vertical-align: top;
padding: 25px 0 28px 0;
}
@media screen and (max-width:767px) {
#challenge #outline .inner table td{
display: block;
font-size: 14px;
line-height: 24px;
border-top: none;
padding: 10px 0 25px 0;
}
}
#challenge #outline .inner table td ul li{
font-size: 16px;
line-height: 24px;
text-indent: -16px;
margin: 0 0 0 16px;
}
@media screen and (max-width:767px) {
#challenge #outline .inner table td ul li{
font-size: 14px;
line-height: 24px;
text-indent: -14px;
margin: 0 0 0 14px;
}
}



/* ==============================================
#challenge #thanks
============================================== */

#challenge #thanks{
transition: 0.4s ease-out;
overflow: hidden;
}
#challenge #thanks .inner{
position: relative;
z-index: 1;
background: #0164a5;
}
@media screen and (max-width:767px) {
#challenge #thanks .inner{
padding: 160px 0 0 0;
}
}
#challenge #thanks .inner::before{
content: "";
position: absolute;
top:0;
left: 0;
width: 100%;
padding: 36% 0 0 0;
background: linear-gradient(180deg, rgba(255,255,255,1.0) 0%, rgba(255,255,255,0.82) 40%, rgba(255,255,255,0.52) 70%, rgba(255,255,255,0.0) 100%);
z-index: 1;
}
@media screen and (max-width:767px) {
#challenge #thanks .inner::before{
padding: 320px 0 0 0;
}
}
#challenge #thanks .inner h2{
font-size: 40px;
line-height: 70px;
letter-spacing: 8px;
font-weight: 900;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
width: 350px;
z-index: 1;
}
#challenge #thanks .inner h2 strong{
font-size: 40px;
line-height: 70px;
letter-spacing: 8px;
font-weight: 900;
color: #e40012;
}
@media screen and (max-width:767px) {
#challenge #thanks .inner h2{
font-size: 24px;
line-height: 36px;
letter-spacing: 4px;
width: 180px;
}
#challenge #thanks .inner h2 strong{
font-size: 24px;
line-height: 36px;
letter-spacing: 4px;
}
}
#challenge #thanks .inner figure{
}
#challenge #thanks .inner figure img{
}



/* ==============================================
anime
============================================== */

.animated {
animation-duration: 1s;
animation-fill-mode: both;
}
.animated.hinge {
animation-duration: 2s;
}



.fadeIn {
animation-name: fadeIn;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}



.fadeInUp {
animation-name: fadeInUp;
}
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(40px);
}

100% {
opacity: 1;
transform: translateY(0);
}
}



.fadeInDown {
animation-name: fadeInDown;
}
@keyframes fadeInDown {
0% {
opacity: 0;
transform: translateY(-40px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}



.fadeInLeft {
animation-name: fadeInLeft;
}
@keyframes fadeInLeft {
0% {
opacity: 0;
transform: translateX(-40px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}



.fadeInRight {
animation-name: fadeInRight;
}
@keyframes fadeInRight {
0% {
opacity: 0;
transform: translateX(40px);
}

100% {
opacity: 1;
transform: translateX(0);
}
}



.zoomIn {
animation-name: zoomIn;
animation-timing-function: ease-out;
}
@keyframes zoomIn {
0% {
opacity: 0.0;
transform: scale(0.5,0.5);
}
20% {
transform: scale(1.20,1.20);
}
40% {
transform: scale(0.85,0.85);
}
60% {
opacity: 1.0;
transform: scale(1.10,1.10);
}
80% {
transform: scale(0.95,0.95);
}
100% {
transform: scale(1.0,1.0);
}
}