@charset "utf-8";
/* CSS Document */
/* @font-face {
font-family: "Yu Gothic";src: local("Yu Gothic Medium");
font-weight: 100;
}
@font-face {
font-family: "Yu Gothic";src: local("Yu Gothic Medium");
font-weight: 200;
}
@font-face {
font-family: "Yu Gothic";src: local("Yu Gothic Medium");
font-weight: 300;
}
@font-face {
font-family: "Yu Gothic";src: local("Yu Gothic Medium");
font-weight: 400;
}
@font-face {
font-family: "Yu Gothic";src: local("Yu Gothic Medium");
font-weight: 500;
}
@font-face {
font-family: "Yu Gothic";src: local("Yu Gothic Bold");
font-weight: bold;
} */
.pink{color:#f44779;}
.blue{color:#5480ff;}
.orange{color:#ff6522;}
.purple{color:#b86ad7;}
.green{color:#00b457;}
a{border-bottom:1px dotted #f44779;}
a:hover{color:#f44779;}
body{
position:relative;
font-family: 'Open Sans','Zen Maru Gothic', "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック",sans-serifsans-serif,Verdana, Roboto, "Droid Sans";
font-weight:500;
color:#555;
background:url(../img/k1.jpg) repeat;
}
header{
position:relative;
z-index:999;
}
#main-visual{
background: #b1e4ff;
background: -webkit-linear-gradient(#b1e4ff, #f8fdff);
background:    -moz-linear-gradient(#b1e4ff, #f8fdff);
background:     -ms-linear-gradient(#b1e4ff, #f8fdff);
background:      -o-linear-gradient(#b1e4ff, #f8fdff);
background:         linear-gradient(#b1e4ff, #f8fdff);
width:100%;
overflow:hidden;
position:relative;
}
#main-visual span img{
width:1980px;
display:inline-block;
height:auto;
position: relative;
left: 50%;
margin-left: -990px; 
z-index:99;
}
#sp_logo2{display:none;}
#cloud1{
position:absolute;
z-index:1;
top:150px;
left:80px;
animation:translate 50s; 
animation-iteration-count:infinite; 
-webkit-animation:translate 50s; /* Safari & Chrome */
-webkit-animation-iteration-count:infinite; 
}
@keyframes translate { 
0%  { transform:  translate(0px, 15px); } 
15% { transform:  translate(80px, 0px);}
30% { transform:  translate(100px, 15px);}
45% { transform:  translate(50px, 25px);} 
60% { transform:  translate(-50px, 15px);}
75% { transform:  translate(-10px, 8px);} 
85% { transform:  translate(-50px, 0px);} 
100%{ transform:  translate(0px, 15px);} 
} 
@-webkit-keyframes translate { 
0%  { transform:  translate(0px, 15px); } 
15% { transform:  translate(80px, 0px);}
30% { transform:  translate(100px, 15px);}
45% { transform:  translate(50px, 25px);} 
60% { transform:  translate(-50px, 15px);}
75% { transform:  translate(-10px, 8px);} 
85% { transform:  translate(-50px, 0px);} 
100%{ transform:  translate(0px, 15px);} 
} 
#cloud2{
position:absolute;
z-index:1;
top:370px;
right:50px;
animation:translate2 60s; 
animation-iteration-count:infinite; 
-webkit-animation:translate2 60s; /* Safari & Chrome */
-webkit-animation-iteration-count:infinite; 
}
@keyframes translate2 { 
0%  { transform:  translate(0px, 15px); } 
15% { transform:  translate(-50px, 0px);}
30% { transform:  translate(50px, 25px);}
45% { transform:  translate(-100px, 5px);} 
60% { transform:  translate(-50px, 8px);} 
75% { transform:  translate(-100px, 20px);} 
85% { transform:  translate(-50px, 30px);} 
100%{ transform:  translate(0px, 15px);} 
} 
@-webkit-keyframes translate2 { 
0%  { transform:  translate(0px, 15px); } 
15% { transform:  translate(-50px, 0px);}
30% { transform:  translate(50px, 25px);}
45% { transform:  translate(-100px, 5px);} 
60% { transform:  translate(-50px, 8px);} 
75% { transform:  translate(-100px, 20px);} 
85% { transform:  translate(-50px, 30px);} 
100%{ transform:  translate(0px, 15px);}  
}

@media screen and (max-width: 900px) {
#cloud1{
top:100px;
left:80px;
}
#cloud2{
top:300px;
right:50px;
}
}
@media screen and (max-width: 640px) {
#cloud1 img{
width:100px;
height:auto;
}
@keyframes translate { 
0%  { transform:  translate(0px, 10px); } 
15% { transform:  translate(40px, 0px);}
30% { transform:  translate(80px, 15px);}
45% { transform:  translate(40px, 25px);} 
60% { transform:  translate(-40px, 15px);}
75% { transform:  translate(-10px, 8px);} 
85% { transform:  translate(-40px, 0px);} 
100%{ transform:  translate(0px, 15px);} 
} 
}


/* contents */
#contents{
max-width:1020px;
margin:0 auto;
padding:0 30px;
}
@media screen and (max-width: 640px) {
#contents{
width:90%;
margin:1em auto 0;
padding:0;
}
}
/* footer */
footer{
text-align:center;
clear:both;
}
footer p{
height:3em;
color:#fff;
background:#5480ff;
line-height:3em;
font-size:70%;
}
footer dl{padding:3em 0 2em;}
footer dt{font-size:170%;font-weight:500;}
footer dt img{
width:250px;
height:auto;
padding:1em 0;
}
footer dd{font-size:80%;}
footer ul{padding-bottom:3em;font-size:80%;}
footer li{
display:inline-block;
line-height:3em;
}
#go_top{
position:fixed;
right:50px;
bottom:50px;
z-index:99;
}
#go_top a{border:none;}
#go_top img{
width:72px;
height:auto;
}
@media screen and (max-width: 640px) {
footer dl{padding:1em 0 2em;}
footer dt{font-size:140%;}
footer dd{font-size:70%;}
footer ul{padding-bottom:2em;}
footer li{display:block;line-height:1.7em;}
footer li a{border:none;}
#go_top a{display:none;}
}