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

/* 全体
-------------------------------------------*/
body{
	color: #333;
	font-size: 0.9em;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	line-height: 200%;
	margin:0;
	padding:0;
	width:100%;
}

ul,ol,li,dd,dt,dl{list-style:none; padding:0; margin:0;}

img{
	border:0;
	vertical-align:bottom;
}

a{color:#06F;}
a:hover{
	color:#C00;
	opacity:0.8;
}

.cf:after{
    content: "."; 
    display: block; 
    height: 0; 
    font-size:0;    
    clear: both; 
    visibility:hidden;
}
.cf{
    display: inline-block;
} 
/* Hides from IE Mac */
* html .cf{
    height: 1%;
}
.cf{
    display:block;
}


/* コンテンツ
-------------------------------------------*/
header{
	background:url(../images/bg_main.jpg) no-repeat 5%;
	background-size:100%;
	height:350px;
	text-align:center;
	width:100%;
}

header h1{
	margin:0 auto;
	padding-top:65px;
}

.inner_box{
	margin:0 auto;
	width:1024px;
}

section{padding:70px 0; text-align:center;}

h2{margin:0 0 10px 0;}

#new li{
	border-bottom:1px dotted #CCC;
	padding:10px 0;
}

#new li:last-child{
	border-bottom:none;
}

#wiffle{
	border-top:1px solid #CCC;
}

#wiffle p{
	margin:20px auto;
}

#ground {
	padding:0;
}

#ground .images{
	float:left;
	margin-top:20px;
	width:220px;
}

#ground .text{
	float:right;
	margin-top:20px;
	width:800px;
}

#rule h2{
	background:url(../images/bg_rule.jpg) 50% #000;
	background-size:100%;
	height:125px;
	padding-top:75px;
	text-align:center;
	width:100%;
}

#rule div{
	margin:30px 0 10px 0;
}

#rule div span{
	background:#38721D;
	color:#FFF;
	font-size:1.2em;
	font-weight:bold;
	padding:5px 10px;
}

#rule p{
	margin:0;
}

#item{
	border-top:1px solid #CCC;
}

#item a{
	color:#333;
	text-decoration:none;
}

#item a:hover{
	text-decoration:underline;
}

#item ul{
	margin:10px auto 40px auto;
	width:1000px;
}

#item li:nth-child(3n){
	margin:2% 0 0 0;
}

#item li{
	border:1px solid #CCC;
	float:left;
	line-height:160%;
	margin:2% 2% 0 0;
	width:calc(32% - 2px);
}

#item li:last-child{
	border:none;
	float:left;
	margin:2% 0 0 0;
	width:32%;
}

#item li:last-child img{
	margin:0;
}

#item li img{
	margin:9px;
	max-width:100%;
}

#item li p{
	background:#F8F8F8;
	padding:8px 0 7px 0;
	margin:0;
}

#item .link_btn{
	margin:0 auto;
	text-align:center;
	width:70%;
}

#item .link_btn a{
	background:#111;
	border-radius: 30px;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	color:#FFF;
	display:block;
	font-size:2.0em;
	padding:15px 0;
	text-decoration:none;
}

footer{
	text-align:center;
}

footer .copy{margin:20px 0;}


/* コンテンツ幅 768px～1024px
-------------------------------------------*/
@media screen and (min-width: 768px) and (max-width:1024px) {
header{height:250px; background-size:cover;}
header h1{padding-top:50px;}
header img{height:150px;}
.inner_box{width:100%;}
#wiffle img{max-width:100%;}
#ground .images{width:30%;}
#ground .images img{max-width:100%;}
#ground .text{width:68%;}
#item ul{
	margin:40px auto;
	width:100%;
}
#item li img{margin:9px 0;}
}


/* コンテンツ幅 768px以下
-------------------------------------------*/
@media only screen and (max-width: 768px) {
body{
	font-size: 0.8em;
	line-height: 180%;
}
img{max-width:100%;}
header{height:150px; background-size:cover;}
header h1{padding-top:35px;}
header img{height:80px;}
.inner_box{width:96%;}
h2 img{height:25px;}
section{padding:30px 0;}
#ground .images{width:100%;}
#ground .images img{max-width:60%;}
#ground .text{width:100%;}
#rule h2{
	background-size:cover;
	height:55px;
	padding-top:30px;
}
#rule p{margin:0 2%;}


#item ul{
	margin:10px auto 20px auto;
	width:100%;
}
#item li{
	line-height:120%;
	margin:2% 0.5% 0 0.5%;
	width:calc(32% - 2px);
}

#item li:nth-child(3n){
	margin:2% 0.5% 0 0.5%;
}

#item li img{margin:9px 0;}

#item .link_btn{
	width:90%;
}

#item .link_btn a{
	font-size:1.5em;
	padding:15px 0;
}

}