@charset "utf-8";

/* top */

#box{
margin:20px 0 0 0;
padding:20px;
width:calc(100% - 50px);
color:#FFF;
border:5px solid #FF0;
background-image:url(../img/top_box_bg.jpg);
background-size:cover;
background-position:center;
border-radius:10px;        /* CSS3草案 */
-webkit-border-radius:10px;    /* Safari,Google Chrome用 */
-moz-border-radius:10px;   /* Firefox用 */
}

#box span{
background:linear-gradient(transparent 40%, #ff99ff 40%);
}

#box h2{
margin:0;
padding:0;
font-size:14px;
background:transparent;
}

#box ul{
margin:10px 0 10px 1em;
}

#box a{
display:block;
margin:20px auto 0;
padding:10px;
width:250px;
text-align:center;
color:#FFF;
background-color:#F09;
border-radius:5px;        /* CSS3草案 */
-webkit-border-radius:5px;    /* Safari,Google Chrome用 */
-moz-border-radius:5px;   /* Firefox用 */
}

#box a .fa{
margin:0 10px 0 0;
}

#contents ul{
margin:0 0 0 20px;
}

#contents li{
float:left;
margin:0 20px 20px 0;
padding:0;
width:calc(33% - 20px);
text-align:center;
}

#contents li p{
margin:0;
padding:5px 0;
background-color:#F6F;
}

@media screen and (min-width: 769px){

#box{
font-size:24px;
}

#box h2{
font-size:24px;
}

#box a{
margin:20px 0 0 0;
}

}