@charset "utf-8";

/* =======================================================
	what.css
	*This document validates as CSS level 3

	Author: Mamico Tosa
	Last modified: [ 2017/05/25 ]	
	CSS構成: お知らせ・イベント
	
	※ベースデザインを元にコーディングしました。
	※使える部分だけ、コピーして使って下さい。
======================================================= */


/* イベント一覧 ------------------------------- */

a {text-decoration:none; color:#FF4626;}

#wi870 { border-right:1px solid #CCC; float:left;padding-right:50px; }

#event_contents { width:1200px; margin: 55px auto 0 ; }

.main_area { overflow:hidden; border-bottom:1px #CCC dotted; padding-bottom:50px; }

.event_list { overflow:hidden; margin-bottom:50px; }
.event_list:last-child { margin-bottom:0; }

.event_list img { border-radius: 10px;   /* CSS草案 */
	-webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */   }
	
.event_list .event_img { float:left;margin-right:20px; position:relative; }

.event_list .event_img .event-finish { position:absolute; width:60%; top:42%;left:25%; }

.event_list .event_img .event-finish img { border-radius:0; }

.event_list .event_title .day { color:#999; background:URL("../img/news_day.gif") no-repeat 1px center;background-position:  18px bottom 18px; padding:2px 20px 0; }

.event_list .event_title .cat { color:#FFF ; padding:2px 6px 0; font-size:12px;
	border-radius: 5px;   /* CSS草案 */
	-webkit-border-radius: 5px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 5px;   /* Firefox用 */ }

.event_list .event_title .title { font-size:15px; margin-top:10px; }

.event_list a .event_title .title { color:#FF4626; }

.event_list a:hover .event_title .title { text-decoration:underline;}




/* イベント一覧 - サイドカラム ------------------------------- */
#event_contents #side { float:right; width:290px; }

#side .cat { border-bottom:3px solid #FF7460; margin-bottom:10px; padding-bottom:10px; font-size:16px; }

#side ul.cat_list { margin-bottom:60px; }

#side ul.cat_list li { margin-bottom:8px; }

#side ul.cat_list li a { color:#FF4626;font-size:15px; }

#side ul.cat_list li.active { background:#FF7460;color:#FFF; padding:6px 0 5px 5px;
	border-radius: 5px;   /* CSS草案 */
	-webkit-border-radius: 5px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 5px;   /* Firefox用 */  }
	
#side ul.cat_list li.active a { color:#FFF;  }

#side ul.cat_list li a:hover { text-decoration:underline; }



/* イベント一覧 - ページ移動 ------------------------------- */
.page_move { margin:50px auto 100px ; clear:both; overflow:hidden; text-align:center; padding-top:15px; height:60px;}

.page_move a { text-decoration:none ; color:#333 ; padding:12px 16px ; border:1px solid #CCC; margin-left:5px;
	border-radius: 5px;   /* CSS草案 */
	-webkit-border-radius: 5px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 5px;   /* Firefox用 */ }
	
.page_move a.active { color:#FFF ; background:#FF745C ; border-color:#FF745C ; padding:12px 16px;  }

.page_move .active a { background:#FF7460;color:#FFF;border:1px solid #FF7460; }

.page_move .prev {background:URL("../img/news_arrow_l.gif") no-repeat 14px center;}

.page_move .back {background:URL("../img/news_arrow_r.gif") no-repeat 14px center;}




/* イベント - 詳細 ------------------------------- */
.event_detail h1 {  }
.event_detail h2 { color:#FF4626 ; font-size:17px; margin:10px 0 20px 0; }
.event_detail h3 { color:#66BAC6;font-size:18px; margin:30px 0 20px; border-bottom:1px solid #66BAC6; width:200px;padding-left:20px;  }

.event-info { padding-left:20px; }

.event_detail { overflow:hidden; margin-bottom:30px; }

.event_detail .event-finish { margin-top:10px;  }

.event_detail img { max-width:796px; }

.event_detail .event_title .day { color:#999; background:URL("../img/news_day.gif") no-repeat top 2px left; padding:0 20px; }

.event_detail .event_title .cat {  color:#FFF ; padding:0 4px; font-size:12px;
	border-radius: 5px;   /* CSS草案 */
	-webkit-border-radius: 5px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 5px;   /* Firefox用 */ }

.link { text-align:center ; margin:50px 0 50px; }

#event-link a { color:#67BCC8; border:#67BCC8 solid 3px; }

#event-link a span { background:url(/common/img/icon-link-event.png) left center no-repeat;background-size: auto 16px;padding-left: 22px; }


/* イベント - 詳細 - 資料リンク ------------------------------- */
.document { border-top:1px dotted #CCC;border-bottom:1px dotted #CCC; padding:30px 0; margin:30px 0; }
.document ul li { margin-bottom:5px; padding:5px 10px; }
.document ul li.d-doc a { background:url(../img/doc.png) no-repeat right center; padding-right:35px; }
.document ul li.d-exl a { background:url(../img/exl.png) no-repeat right center; padding-right:35px; }
.document ul li.d-pdf a { background:url(../img/pdf.png) no-repeat right center; padding-right:35px; }
.document ul li a:hover { text-decoration:underline; }


.sns-button { margin-top:20px; }


@media only screen and (max-width: 959px) {
	
/* イベント一覧 ------------------------------- */
#event_contents { width:100%; }
#wi870 { width:100%;border-right:none ; padding:0; }
.main_area { margin:0 10px ; padding:0; }
.event_list { width:48%; float:left; margin-right:4%; }
.event_list:nth-child(2n) { margin:0 0 50px 0; }
.event_list .event_img { float:none;margin:0;}
.event_list .event_img img { width:100%; }
.event_list .event_title { margin-top:10px; }
.event_list .event_img .event-finish { position:absolute; top:40%;left:20%; width:60%; }



/* イベント一覧 - サイドカラム ------------------------------- */

#event_contents #side { float:none; width:100%;}



/* イベント - 詳細 ------------------------------- */

.event_detail img { width:100%; height:auto; }

.event_detail .event-finish img { width:25%;  }

.link { text-align:center ; margin:50px 0 100px; }

#event-link { margin:50px 0 20px; }


/* イベント一覧 - ページ移動 ------------------------------- */

.page_move a { padding:12px 10px;  }
	
.page_move a.active { padding:12px 10px;  }

.page_move .prev {background:URL("../img/news_arrow_l.gif") no-repeat 8px center;}

.page_move .back {background:URL("../img/news_arrow_r.gif") no-repeat 10px center;}

}