@charset "shift_jis";
/* CSS Document */

/*==========QUERY==========
@media screen and (max-width:1200px) {
	QUERY
}
==========QUERY==========*/

/*----------topArea----------*/
#topArea{ background:url(../images/bg_top.jpg) top center no-repeat #eeeeee; padding:60px 0 50px;}
#topArea h1{ margin-bottom:70px;}

#boxArea{ width:1190px; margin:0 auto; text-align:left;}
#menuBox{ width:960px; float:left; overflow:visible !important; position:relative;}
#menuSide{ width:230px; float:right;}
#menuSide .prBox{ line-height:0.1; margin-bottom:10px;}
#menuSide .prBox h2{ margin:0;}
#menuSide .prBox a{ display:inline-block; border:1px solid #a0a0a0; padding:9px; background:#ffffff;}
#menuSide .wbBox{ background:#ffffff; border:1px solid #a0a0a0; margin-bottom:10px; line-height:0.1; height:468px;}
#menuSide .fb-like-box{ background:#ffffff; height:470px;}
@media screen and (max-width:1250px) {
	#boxArea{ width:950px;}
	#menuBox{ width:720px;}
}

.element{ background:#ffffff; float:left; margin:0 0 10px 0; z-index:auto;}
.element a{ text-decoration:none; position:relative; display:block;}
.elmL{ width:470px; height:470px;}
.elmM{ width:470px; height:230px;}
.elmS{ width:230px; height:230px;}

.element a.news{ border:3px solid #ffffff; text-align:right; padding:7px 17px 17px; height:200px;}
.elmL a.news{ display:block; height:440px;}
.element a.news .label{ display:inline-block; background:#f49800; color:#ffffff; margin-right:-20px; padding:7px 20px;}
.element a.news .date{ display:block; text-align:left; margin:10px 0;}
.element a.news .date img{ float:left; margin-right:10px;}
.element a.news .text{ display:block; text-align:left; margin-bottom:10px;}
.element a.news .mark{ display:block; text-align:left; margin:5px 0 10px;}
.element a.news .mark span{ display:inline-block; background:#ec6877; color:#ffffff; margin:2px 3px 2px 0; padding:2px 4px; font-size:86%;}
.element a.news .more{ display:inline-block; font-weight:bold; background:url(../images/icon_more.gif) right no-repeat; padding-right:17px;}
.element a.news:hover{ border:3px solid #f49800;}
.element a.news:hover .more{ background:url(../images/icon_more_on.gif) right no-repeat; color:#f49800;}

a.icon{ height:230px;}
.elmL a.icon{ display:block; height:470px;}
.element a .icoLabel{ display:block; position:absolute; bottom:0px; left:0px; right:0px; background:#f49800; color:#ffffff; text-align:center; font-weight:bold; padding:15px;}
.element a .icoText{ display:none; position:absolute; bottom:0px; left:0px; right:0px; padding:0 15px 15px;}
.element a:hover .icoLabel{ top:0px; bottom:auto; background:none; color:#f49800; padding:15px 15px 0;}
.element a:hover .icoText{ display:block;}

.element a .grLabel{ display:block; position:absolute; bottom:0px; left:0px; right:0px; background:#000000; color:#ffffff; text-align:center; font-weight:bold; padding:15px; opacity:0.75;}
.elmL a .grLabel{ font-size:170%;}
.element a .grText{ display:none; position:absolute; bottom:0px; left:0px; right:0px; background:#000000; color:#ffffff; padding:17px 20px; opacity:0.75; text-align:center;}
.elmL a .grText{ padding:35px 20px;}
.elmM a .grText{ font-size:86%;}
.element a:hover .grLabel{ top:0px; bottom:auto;}
.element a:hover .grText{ display:block;}

.element a .efct{ position:absolute; display:none; z-index:1000;}
.element a:hover .efct{ display:inline;}