/*------------------------------
TOP用CSS
------------------------------- */
@import url("reset.css");
@import url("share.css");


/* トッ背景
------------------------------- */
body{

}
body:before{
background:url(../gazou/top/bg_top.jpg) repeat-x center bottom;
-webkit-background-size:100% auto;
background-size:100% auto;
content:"";
display:block;
width:100%;
height:650px;
z-index:-1;
position:absolute;
top:0;
left:0;
}

/* トップイメージ
------------------------------- */
#top_group{
padding:0 0 56px 20px;
}
#top_group:after{
content:"";
display:block;
clear:both;
}
#top_group li{
background:#fff;
width:300px;
float:left;
margin:0 30px 0 0;
box-shadow:0px 0px 5px rgba(0,0,0,0.1);
behavior: url("/js/PIE.htc");
position:relative;
}
#top_group li:last-child{
margin:0;
}
#top_group li a{
background-repeat:no-repeat;
background-position:center top;
-webkit-background-size:100% auto;
background-size:100% auto;
border:5px solid #fff;
display:block;
height:250px;
text-align:center;
position:relative;
transition:.3s ease-in;
}
#top_group li a span{
background:#fff url(../gazou/share/arrow1.png) no-repeat 90% center;
position:absolute;
display:block;
padding:11px 0;
position:absolute;
bottom:0;
left:0;
width:100%;
}
#top_group li a:hover{
-webkit-background-size:120% auto;
background-size:120% auto;
background-position:center -20px;
}
#top_group1 a{background-image:url(../gazou/top/img_top_group1.jpg);}
#top_group2 a{background-image:url(../gazou/top/img_top_group2.jpg);}
#top_group3 a{background-image:url(../gazou/top/img_top_group3.jpg);}

/* concept
------------------------------- */
#concept h2{
margin:0 0 24px;
text-align:center;
}
#concept .txt{
font-size:16px;
line-height:1.6;
text-align:center;
margin:0 0 192px;
}

/* 今日の給食
------------------------------- */
#kyushoku{
background:url(../gazou/share/bg_cork1.jpg);
position:relative;
padding:0 0 40px;
margin:0 0 90px;
-webkit-border-radius: 12px;
border-radius: 12px;
behavior: url("/js/PIE.htc");
position:relative;
}
#kyushoku h2{
position:absolute;
top:-168px;
left:0;
width:100%;
}
#kyushoku #jien{
padding:0 0 24px 64px;
}
#kyushoku #jien:after{
content:"";
display:block;
clear:both;
}
#kyushoku #jien dt{
width:116px;
float:left;
}
#kyushoku #jien dd{
padding:10px 0 0;
font-size:16px;
line-height:1;
}
#kyushoku #today_kyushoku{
background:#fff;
padding:24px 0 44px 36px;
margin:0 25px;
position:relative;
}
#kyushoku #today_kyushoku:before{
content:url(../gazou/share/i_pin.png);
position:absolute;
left:12px;
top:-8px;
}
#kyushoku #today_kyushoku:after{
content:url(../gazou/share/i_pin.png);
position:absolute;
right:12px;
top:-8px;
}
#kyushoku #today_kyushoku h3{
background:url(../gazou/top/tit_date.png) no-repeat center top;
font-size:20px;
font-weight:bold;
text-align:center;
height:56px;
line-height:44px;
}
#kyushoku #today_kyushoku ul:after{
content:"";
display:block;
clear:both;
}
#kyushoku #today_kyushoku li{
float:left;
width:400px;
margin:0 80px 50px 0;
}
#kyushoku #today_kyushoku li img{
width:400px;
}
#kyushoku #today_kyushoku li:nth-child(2){
margin:0;
}
#kyushoku #today_kyushoku .btn{
text-align:center;
line-height:1;
}
#kyushoku #today_kyushoku .btn a{
padding:18px 40px 18px 80px;
}
#kyushoku #today_kyushoku .btn a span{
font-weight:bold;
}
#kyushoku #today_kyushoku .btn a:before{
content:url(../gazou/top/i_kyushoku.png);
position:absolute;
left:22px;
top:50%;
margin:-20px 0 0;
}

/* 給食室だより
------------------------------- */
#kyushokudayori{
position:relative;
width:700px;
margin:0 auto 86px;
min-height:300px;
}
#kyushokudayori:before{
content:url(../gazou/top/img_kyushokudayori1.png);
position:absolute;
left:-200px;
top:10px;
}
#kyushokudayori:after{
content:url(../gazou/top/img_kyushokudayori2.png);
position:absolute;
left:745px;
top:168px;
}
#kyushokudayori h2{
text-align:center;
background:url(../gazou/share/line_pink1.png) repeat-x bottom;
padding:0 0 12px;
}
#kyushokudayori .btn{
text-align:center;
padding:24px 0 0;
}
#kyushokudayori li{
border-bottom:1px dotted #000;
}
#kyushokudayori li a{
display:block;
color:#000;
padding:18px 0px;
font-size:16px;
overflow:hidden;
white-space:nowrap;
text-overflow: ellipsis;
transition:0.3s;
text-decoration:none;
}
#kyushokudayori li a:hover{
color:#FF6633;
}
#kyushokudayori li a .date{
display:inline-block;
text-decoration:none;
width:156px;
vertical-align:middle;
}
#kyushokudayori li a .ctgname{
display:inline-block;
width:120px;
margin:0 4px 4px 0;
text-align:center;
color:#fff;
background:#FF6633;
padding:3px;
}
/* 新着情報
------------------------------- */
#news{
position:relative;
width:700px;
margin:0 auto 86px;
min-height:300px;
}
#news:before{
content:url(../gazou/top/img_news1.png);
position:absolute;
left:-164px;
top:46px;
}
#news:after{
content:url(../gazou/top/img_news2.png);
position:absolute;
left:743px;
top:60px;
}
#news h2{
text-align:center;
background:url(../gazou/share/line_blue1.png) repeat-x bottom;
padding:0 0 12px;
line-height:1;
}
#news h2 span{
display:block;
font-size:14px;
padding:8px 0 0;
}
#news .btn{
text-align:center;
padding:24px 0 0;
}
#news li{
border-bottom:1px dotted #000;
}
#news li a{
display:block;
color:#000;
padding:18px 0px;
font-size:16px;
overflow:hidden;
white-space:nowrap;
text-overflow: ellipsis;
transition:0.3s;
text-decoration:none;
}
#news li a:hover{
color:#FF6633;
}
#news li a .date{
display:inline-block;
text-decoration:none;
width:156px;
vertical-align:middle;
}
#news li a .ctgname{
display:inline-block;
width:120px;
margin:0 4px 4px 0;
text-align:center;
color:#fff;
background:#339966;
padding:3px;
}