@charset "euc-jp";
body{
	font-size: 16px;
    line-height: 1.5em;
    font-family: "M PLUS Rounded 2c";
	font-weight:0;
    overflow-wrap: break-word;
	word-break: normal;
color: #666;}

/*char*/
.penguin{width:580px;
height:500px;
position: relative;
right:0;
/*background:#ddd;*/
animation: aaa 2.5s infinite;
transform-origin:center bottom;}
.penguin img{position:absolute;}
.p-1{z-index: 1;}
.p-2,.p-3{z-index: 2;}
.p-4{z-index: 2;}
.h-l,.h-r{z-index:3;
animation: p-5 0.8s infinite alternate;}
.h-l{animation: h-l 0.8s infinite alternate;
transform-origin:right bottom;}
.h-r{animation: h-r 0.8s infinite alternate;
transform-origin:left bottom;}
.p-5{z-index:4;
animation: p-5 0.8s infinite alternate;}
.p-6{z-index:5;}
.p-3{left:0px;
bottom:40px;
animation: p-3 0.4s infinite alternate;
transform-origin:right bottom;}
.p-2{right:0px;
bottom:40px;
animation: p-2 0.4s infinite alternate;
transform-origin:left bottom;}
.h-l{left:156px;
top:242px;}
.h-r{right:156px;
top:242px;}

header{
min-width: 1240px;
	text-align: center;
}
header img{
	margin: 0 auto;
}

header h1{font-size:0;
position: absolute;
	top:55px;
	left:30px;
z-index: 98;
animation: prize03 0.8s alternate;}

header .button{position: absolute;
bottom:50px;
left:75px;
animation: prize03 1.2s alternate;}

.chara-box{position:absolute;
right: -80px;
bottom: 20px;
animation: prize01 1s alternate;}

header ul li{position: absolute;}

header ul li.prize-01{left:575px;top:124px;
animation: prize01 0.5s alternate;}

header ul li.prize-02{left:530px;bottom: 56px;
animation: prize02 0.8s alternate;}

header ul li.prize-03{right:140px;top: 55px;
animation: prize03 1s alternate;}



/*page*/
main{min-width:1240px;
overflow-x: hidden;}
.text-hide{font-size:0;}
article{min-width:1240px;}
.block{width:1240px;
margin:0 auto;}
p{margin-bottom:1.3em;}

h2{text-align:center;}

.text{font-size:16.66px;
text-align: center;
line-height: 1.6em;
}

.center{text-align:center;}
.gold{color:#ffe03c;}
.bold{font-weight:900;
text-decoration: underline;}

/*about*/
article.about{
background:url(../img/bg/bg-flag.png) top center no-repeat;
	background-size:contain;
padding:2% 0 4% 0;
}
article.about .block{padding-top:90px;}

.about .text{padding:50px 0;}

.about ul.flow{width:100%;
font-size:0;}

.about ul.flow li{
	text-align:center;
	width:50%;
	display:inline-block;
}

.in01{transform:translateX(-300px);
opacity: 0;}
.in02{transform:translateX(300px);
opacity: 0;}

.fade-l{
animation: fade-l 0.6s forwards;
}
.fade-r{
animation: fade-r 0.6s forwards;
}
@keyframes fade-l{
    0%    { transform:translateX(-300px); }
    100%  { transform:translateX(0px);opacity: 1; }
}

@keyframes fade-r{
    0%    { transform:translateX(300px); }
    100%  { transform:translateX(0px);opacity: 1; }
}

/*merit*/
article.merit{
	background:url(../img/bg/bg-line_01.png);
	padding:2% 0 4% 0;
}
.bord_pc{position:relative;
height:930px;}
.bord_pc img{position:absolute;
z-index: 1;}

.bord_pc img.in03{z-index:99;
bottom:0;
right:0;
transform:translateX(400px);
opacity: 0;}

.bord_sp{display:none;}

.chara-fade{animation: chara-fade 0.7s forwards;}

@keyframes chara-fade{
    0%    { transform:translateX(400px); }
    100%  { transform:translateX(0px);opacity: 1; }
}


/*prize*/
article.prize{
	background:url(../img/bg/bg-winter_bottom.png)bottom center no-repeat,url(../img/bg/bg-winter.png);
	background-size:contain,auto;
	padding:5% 0;
	animation: moveBg 40s infinite linear;
	text-align:center;
}
.prize .text{font-size:23px;
	color:#FFF;
	font-weight: bold;
padding:1% 0;}

/*gaiyo*/
article.gaiyo{
background:url(../img/bg/bg-flag.png) top center no-repeat;
background-size:contain;
padding:2% 0 4% 0;
	text-align: center;
}
article.gaiyo .block{padding-top:90px;}

.gaiyo .text{padding-top:15px;}

.gaiyo .button{margin:25px 0;}
.gaiyo .alert-text{width:640px;
margin:0 auto;
text-align: left;
font-size:17px;
	font-weight: bold;
line-height:1.5em;}

/*afiliate*/
article.afiliate{
	background-color:#ffd900;
	background:url(../img/bg/bg-line_02.png),url(../img/bg/bg-bottom.png) bottom repeat-x,url(../img/bg/bg-top.png) top repeat-x,#ffd900;
	color:#1a1a1a;
	padding:5% 0;
	margin-top:10%;
}

.afiliate img.icon{
	margin:-17% auto 0 auto;
	display: block;
	transform: scale(0);
}

.chara-fade02{animation: chara-fade02 0.7s forwards;}

@keyframes chara-fade02{
    0%    { transform:scale(0); }
	90%{transform:scale(1.1);}
    100%  { transform:scale(1); }
}

.afiliate h2{padding-top:3%;}

.afiliate .text{
padding:2% 0;}

.afiliate ul.list li{width:1140px;
margin:0 auto 5% auto;
background:#FFF;
border:2px solid #b2b2b2;
box-sizing: border-box;
padding:20px;
display: -webkit-flex;
display: flex;}


ul.list li div.box-img{width:400px;
  display: flex;
  align-items: center;
  justify-content: center;
}
ul.list li div.box-img img{ display:block;}
ul.list li div.data{
	order:-1;
float: left;
-webkit-flex: 1;
flex: 1;
	padding-right:20px;
box-sizing: border-box;}

.afiliate h3{font-size:23px;
font-weight: bold;
margin-bottom: 5px;}

.afiliate ul li div.data dl{padding:2% 0;}

.afiliate ul li div.data dt{width:12%;
	font-weight: bold;
	display: inline-block;
	margin-bottom: 5px;
	vertical-align: top;
}
.afiliate ul li div.data dt:last-of-type{margin-bottom:0;}

.afiliate ul li div.data dd{
	width:86%;
	display: inline-block;
}
.afiliate ul li div.data p{font-size:20px;
color:#f41100;
font-weight: bold;
line-height: 1em;}

/*howto*/
article.howto{
background:url(../img/bg/bg-line_02.png),url(../img/bg/bg-top.png) top repeat-x,#00bb0d;
	padding:7% 0 5% 0;
}

.howto ol{font-size:0;line-height: 0;}
.howto ol li{display: inline-block;
padding-bottom:30px;}

.howto ol li:last-child{position: relative;}
.howto .button{width:612px;
text-align: center;
position: relative;
margin-top:-146px;
margin-left:599px;}

.howto .button img{margin-bottom:15px;}

.backbutton {
	margin-top: 30px;
}

/*info*/
article.info{background:url(../img/bg/bg-flag.png) top center no-repeat;
	background-size:contain;
padding:13% 0 4% 0;
}

.info h2{margin-bottom:60px;}

.info dl{width:1000px;
margin:0 auto;}

.info dl dt{background:#29a4ff;
font-size:21px;
color:#fff;
letter-spacing: 1px;
padding:1%;
box-sizing: border-box;}

.info dl dd{padding:1% 1% 2% 1%;
box-sizing: border-box;}

@keyframes moveBg{
    0%    { background-position: bottom center,0 0; }
    100%  { background-position: bottom center,0 914px; }
}


footer{width:100%;
font-size:0.8em;
text-align: center;
padding:5% 0;}

@media screen and (max-width: 768px) {
 


}/*///media*/

@media screen and (max-width: 700px) {
.pc{display:none;}

	img{width:auto;
	height: auto;
	max-width: 100%;}
	
header{
min-width: auto;
width:100%;
text-align: center
}

header img{
	margin: 0 auto;
}

header h1{font-size:0;
position:relative;
	top:0;
	left:0;
animation: none;}
	
	header .button{z-index: 99;
	bottom:2%;
	left:0;
	box-sizing: border-box;
	padding:0 5%;}
	

/*page*/
main{min-width:auto;
overflow-x: hidden;}
.text-hide{font-size:0;}
article{min-width:auto;}
.block{width:100%;
margin:0 auto;}
.text{text-align:left;}
	
	.button{padding-left:4%;
	padding-right: 4%;
	box-sizing: border-box;}

/*about*/
article.about{
background:url(../img/bg/bg-flag_sp.png) top center no-repeat;
background-size:contain;
padding:2% 0 4% 0;
}
article.about .block{padding-top:20%;}

.about .text{padding:2% 5%;}

.about ul.flow{width:100%;
font-size:0;}

.about ul.flow li{
	text-align:center;
	width:100%;
	display:block;
}
	
/*merit*/
	.bord_pc{display:none;}
	.bord_sp{display:block;}
	
/*prize*/
article.prize{}
.prize .text{font-size:3.4vmin;
	color:#FFF;
	font-weight: bold;
	text-align: center;
padding:1% 0;}
	
	.prize p.gold{text-align: left;
	box-sizing: border-box;
	padding:0 4%;}

/*gaiyo*/
article.gaiyo{
background:url(../img/bg/bg-flag_sp.png) top center no-repeat;
background-size:contain;
padding:2% 0 4% 0;
	text-align: center;
}
article.gaiyo .block{padding-top:15%;}

.gaiyo .text{padding:2% 5%;}

.gaiyo .button{margin:25px 0;}
.gaiyo .alert-text{width:100%;
margin:0 auto;
	box-sizing: border-box;
	padding:0 4%;}
	
/*afiliate*/
article.afiliate{
	margin-top:17%;
}

.afiliate img.icon{
	width:70%;
	height: auto;
	margin:-27% auto 0 auto;
	display: block;
	transform: scale(0);
}

.afiliate .text{padding:2% 5%;}
	
.afiliate ul.list li{width:96%;
margin:0 auto 5% auto;
background:#FFF;
border:2px solid #b2b2b2;
box-sizing: border-box;
padding:3%;
display: -webkit-flex;
display:block;}


ul.list li div.box-img{width:100%;
display: block;
	margin-bottom:2%;}
ul.list li div.box-img img{width:100%;}
ul.list li div.data{
float:none;
padding-right:0;
box-sizing: border-box;
display: block;
width: 100%;
}

.afiliate h3{font-size:23px;
font-weight: bold;
margin-bottom: 5px;}

.afiliate ul li div.data dl{padding:2% 0;}

.afiliate ul li div.data dt{width:17%;
	font-weight: bold;
	display: inline-block;
	margin-bottom: 5px;
}
.afiliate ul li div.data dt:last-of-type{margin-bottom:0;}

.afiliate ul li div.data dd{
	width:81%;
	display: inline-block;
}
.afiliate ul li div.data p{font-size:20px;
color:#f41100;
font-weight: bold;
line-height: 1em;}
	
	.afiliate ul li div.data .button{padding:0;}
	

/*howto*/
article.howto{
background:url(../img/bg/bg-line_02.png),url(../img/bg/bg-top.png) top repeat-x,#00bb0d;
	padding:15% 0 5% 0;
}

.howto ol{font-size:0;line-height: 0;}
.howto ol li{display: inline-block;
padding-bottom:30px;}

.howto ol li:last-child{position: relative;}
.howto .button{width:100%;
text-align: center;
position: relative;
margin:0;
padding-top:6%;}

.howto .button img{margin-bottom:15px;}
	
mb
	
	/*info*/
article.info{background:url(../img/bg/bg-flag_sp.png) top center no-repeat;
background-size:contain;
padding:18% 0 4% 0;
}

.info h2{margin-bottom:10%;}

.info dl{width:94%;
margin:0 auto;}

.info dl dt{background:#29a4ff;
font-size:21px;
color:#fff;
letter-spacing: 1px;
padding:1% 1% 1% 2%;
box-sizing: border-box;}

.info dl dd{padding:1% 1% 2% 2%;
box-sizing: border-box;}
	
}/*///media*/

/*anime*/
@keyframes p-2 {
0% {transform:rotate(4deg);}
100% {transform: rotate(0deg);}
}
@keyframes p-3 {
0% {transform:rotate(-4deg);}
100% {transform: rotate(0deg);}
}
@keyframes p-5 {
0% {transform:translateY(20px);}
100% {transform:translateY(0px);}
}

@keyframes h-l {
0% {transform:rotate(-10deg);}
100% {transform: rotate(10deg);}
}
@keyframes h-r {
0% {transform:rotate(10deg);}
100% {transform: rotate(-10deg);}
}

@keyframes aaa {
0% {transform:rotate(-5deg);}
50% {transform: rotate(5deg);}
100% {transform:rotate(-5deg);}
}
@keyframes prize01 {
0% {transform:scale(0);}
90% {transform: scale(1.1);}
100% {transform:scale(1);}
}
@keyframes prize02 {
0% {transform:scale(0);}
20% {transform:scale(0);}
90% {transform: scale(1.1);}
100% {transform:scale(1);}
}

@keyframes prize03 {
0% {transform:scale(0);}
30% {transform:scale(0);}
90% {transform: scale(1.1);}
100% {transform:scale(1);}
}

a img:hover {
   opacity: 0.5;
}