@charset "UTF-8";

/*--------------------------------------------------------------------
トップページ
--------------------------------------------------------------------*/
/* ビルボード
--------------------------------------------------------------------*/
#top_billboard_wrapper{
margin-bottom:10px;
}

#top_billboard{
position:relative;
margin:0 auto;
width:960px;
}

@media screen and (max-width:480px) {
  #top_billboard{
  margin:0 auto;
  width:100%;
  }
}


/* メインビジュアル
--------------------------------------------------------------------*/
#topmainvisual{
margin-bottom:30px;
}

@media screen and (max-width:480px) {
  #topmainvisual{
  margin-bottom:80px;
  }
}

#topmainvisual h1{}

#topmainvisual h1 img{
width:100%;
height:auto;
}



/* お知らせ
--------------------------------------------------------------------*/
#topmc_infomation{
margin:0 auto 50px;
width:920px;
height:166px;
}

@media screen and (max-width:480px) {
  #topmc_infomation{
  margin:0 auto;
  width:100%;
  height:auto;
  }
}


#ttl_topinfomation{
padding-top:13px;
height:32px;
background-color:#ffffff;
}

#ttl_topinfomation h2{
padding-left:10px;
font-size:129%;
border-left:20px solid #ca1820;
}

@media screen and (max-width:480px) {
  #ttl_topinfomation{
  padding-top:30px;
  height:25px;
  background-color:#ffffff;
  }

  #ttl_topinfomation h2{
  }
}


#lst_topinfomation{
height:121px;
background-color:#ffffff;
filter: alpha(opacity=90);
-moz-opacity:0.90;
opacity:0.90;
overflow:auto;
}

@media screen and (max-width:480px) {
  #lst_topinfomation{
  height:auto;
  background-color:#ffffff;
  filter: alpha(opacity=100);
  -moz-opacity:1.0;
  opacity:1.0;
  overflow:auto;
  }
}


#topmc_infomation dl{
padding:15px 30px;
}

#topmc_infomation dt{
clear:both;
float:left;
margin-bottom:10px;
width:115px;
}

#topmc_infomation dd{
margin-bottom:10px;
margin-left:115px;
}

@media screen and (max-width:480px) {
  #topmc_infomation dl{
  padding:15px 30px;
  padding:15px 30px 30px;
  }

  #topmc_infomation dt{
  clear:both;
  float:left;
  margin-bottom:10px;
  width:115px;
  }

  #topmc_infomation dd{
  margin-bottom:10px;
  margin-left:115px;
  }
}


/* 国際交流ブログボタン
--------------------------------------------------------------------*/
#topbtnblog_box{}

#topbtnblog_box ul{}

#topbtnblog_box ul li#btn_kokusaikoryublog{}

#topbtnblog_box ul li#btn_kokusaikoryublog a{
display:block;
width:385px;
height:65px;
text-indent:100%;
white-space:nowrap;
overflow:hidden;
background-image:url(../common/img/bg/bg_blog.png);
background-repeat:no-repeat;
background-position:left top;
}

#topbtnblog_box ul li#btn_kokusaikoryublog a:hover{
filter: alpha(opacity=80);
-moz-opacity:0.80;
opacity:0.80;
}

@media screen and (max-width:480px) {
  #topbtnblog_box ul li#btn_kokusaikoryublog a{
  margin:0 auto;
  width:460;
  height:auto;
  text-indent:0;
  background-image:none;
  }
}


/* トップSNSボタン
--------------------------------------------------------------------*/
#topsns_box{
position:absolute;
bottom:0;
right:0;
}

@media screen and (max-width:480px) {
  #topsns_box{
  top:192px;
  left:0;
  }
}


#topsns_box ul{} 

#topsns_box li{
float:left;
margin-left:5px;
}

#topsns_box li a{
display:block;
width:142px;
height:65px;
text-indent:100%;
white-space:nowrap;
overflow:hidden;
background-repeat:no-repeat;
background-position:left top;
}

#topsns_box li a:hover{
filter: alpha(opacity=80);
-moz-opacity:0.80;
opacity:0.80;
}

/* 個別 */
#btn_fb_topsns a{
background-image:url(../common/img/bg/bg_fb.png);
}

#btn_tw_topsns a{
background-image:url(../common/img/bg/bg_tw.png);
}

#btn_mm_topsns a{
background-image:url(../common/img/bg/bg_mailmag.png);
}


@media screen and (max-width:480px) {
  #topsns_box li{
  display:table;
  float:left;
  margin-left:0;
  width:160px;
  height:80px;
  }

  #topsns_box li a{
  display:table-cell;
  text-align:center;
  vertical-align:middle;
  text-indent:0;
  background-image:none;
  }

  #btn_fb_topsns{
  background-color:#4b5a9b;
  }

  #btn_tw_topsns{
  background-color:#629df2;
  }

  #btn_mm_topsns{
  background-color:#db3d01;
  }

}







/* メインコンテンツ
--------------------------------------------------------------------*/
#topmc_wrapper{
background-color:#eaeadb;
}

#topmc{
margin:0 auto;
width:960px;
}

#topmc_inner{
padding:30px 0;
}

@media screen and (max-width:480px) {
  #topmc_wrapper{
  }

  #topmc{
  width:100%;
  }

  #topmc_inner{
  padding:30px 10px;
  }
}


/* スペシャルインフォ
--------------------------------------------------------------------*/
#top_infoex_wrapper{
margin-bottom:50px;
}

@media screen and (max-width:480px) {
  #top_infoex_wrapper{
  margin-bottom:25px;
  }
}


.top_infoex_box{}

#top_infoex_ch{
float:left;
}

#top_infoex_jp{
float:right;
}

@media screen and (max-width:480px) {
  #top_infoex_ch{
  margin-bottom:10px;
  float:none;
  }

  #top_infoex_jp{
  float:none;
  }
}


.top_infoex_box h2{}

.top_infoex_box ul{
padding:0 20px;
background-color:#ffffff;
border-radius:0 0 8px 8px;
}

#top_infoex_wrapper .top_infoex_box ul li{
border-top:1px solid #eaeadb;
}

#top_infoex_wrapper .top_infoex_box ul li a{
display:block;
padding:15px 0 15px 36px;
line-height:1.2;
background-image:url(./img/mkr_infoex.png);
background-repeat:no-repeat;
background-position:3px 50%;

}




/* 抽出ボタン: Filter
-----------------------------------------------------------*/
#filter_wrapper{
margin-bottom:15px;
}

#filter_wrapper p{
margin-bottom:20px;
font-size:129%;
}

@media screen and (max-width:480px) {
  #filter_wrapper p{
  font-size:115%;
  font-size:100%;
  text-align:center;
  }
}


#filters{
margin-right:-5px;
}

#filters li{
float:left;
margin-right:5px;
}

@media screen and (max-width:480px) {
  #filters{
  margin-right:-2px;
  }

  #filters li{
  margin-right:2px;
  }
}


#filters li a{
display:block;
text-align:center;
color:#ffffff;
background-color:#b9b9ad;
overflow:hidden;
transition: background-color 0.2s ease-in;
}
#filters li a.selected,
#filters li a:hover{
text-decoration:none;
background-color:#7c7c74;
}

/* すべて表示 */
#filters li#filter_all{
float:left;
width:140px;
}

#filters li#filter_all a{
height:50px;
line-height:50px;
}

@media screen and (max-width:480px) {
  #filters li#filter_all{
  width:152px;
  }

  #filters li#filter_all a{
  height:102px;
  line-height:102px;
  }
}


/* 抽出メニュー */
#filters li.filter_each{
margin-bottom:5px;
width:200px;
}
#filters li.filter_each a{
height:50px;
line-height:50px;
}

@media screen and (max-width:480px) {
  #filters li.filter_each{
  margin-bottom:2px;
  width:152px;
  }
  #filters li.filter_each a{
  height:50px;
  line-height:50px;
  }
}


#filters li.filter_each .inner_2l a{}

#filters li.filter_each .inner_1l a{}

/* トピックリスト
-----------------------------------------------------------*/
#archives_wrapper{
margin-bottom:15px;
}

ul#archives{
margin-right:-15px;
}

@media screen and (max-width:480px) {
  ul#archives{
  margin-right:-10px;
  }
}

/* トピックアイテム */
li.tpcitem{
position:relative;
float:left;
margin-right:15px;
margin-bottom:15px;
width:310px;
overflow:hidden;
}

@media screen and (max-width:480px) {
  li.tpcitem{
  margin-right:10px;
  margin-bottom:10px;
  width:225px;
  overflow:hidden;
  }
}

.tpcitem_inner{
background-color:#ffffff;
border:10px solid #ffffff;
overflow:hidden;
}

@media screen and (max-width:480px) {
  .tpcitem_inner{
  border:7px solid #ffffff;
  }
}

.tpcitem_inner a{
display:block;
margin-bottom:10px;
height:180px;
overflow:hidden;
}

@media screen and (max-width:480px) {
  .tpcitem_inner a{
  height:130px;
  }
}

.tpcitem_inner a img{
width:100%;
height:auto;
}

.tpcitem_inner h3{
margin-bottom:5px;
padding:0 5px;
height:38px;
font-size:115%;
line-height:1.2;
overflow:hidden;
}

.tpcitem_inner p{
padding:0 5px;
height:32px;
line-height:1.2;
overflow:hidden;
}

/* NEWアイコン */
.icn_newtpc{
position:absolute;
top:0;
left:0;
}

@media screen and (max-width:480px) {
  .icn_newtpc{
  width:32px;
  height:32px;
  }
}











/* 画像フレーム */
li.frame_ph{
position:relative;
float:left;
margin-right:15px;
margin-bottom:15px;
width:310px;
overflow:hidden;
}

@media screen and (max-width:480px) {
  li.frame_ph{
  margin-right:10px;
  margin-bottom:10px;
  width:225px;
  overflow:hidden;
  }
}


.frame_ph_inner{
border:10px solid #ffffff;
overflow:hidden;
}

@media screen and (max-width:480px) {
  .frame_ph_inner{
  border:7px solid #ffffff;
  }
}


.frame_ph_inner a{
display:block;
height:180px;
height:260px;
overflow:hidden;
background-color:#ffffff;
}

@media screen and (max-width:480px) {
  .frame_ph_inner a{
  display:block;
  height:130px;
  height:187px;
  overflow:hidden;
  background-color:#ffffff;
  }
}


.frame_ph_inner a img{
width:100%;
height:auto;
}

/* NEWアイコン */
.icn_new{
position:absolute;
top:0;
left:0;
}

@media screen and (max-width:480px) {
  .icn_new{
  width:32px;
  height:32px;
  }
}



/* SNS系情報
--------------------------------------------------------------------*/
#snsboard_wrapper{
margin-bottom:20px;
}

#snsboard{}

#snsboard > ul{
margin-right:-15px;
}

@media screen and (max-width:480px) {
  #snsboard > ul{
  margin-right:-10px;
  margin-right:0;
  }
}

#snsboard > ul > li{
float:left;
margin-right:15px;
margin-bottom:15px;
width:310px;
}

@media screen and (max-width:480px) {
  #snsboard > ul > li{
  float:none;
  margin-right:10px;
  margin-right:0;
  margin-bottom:10px;
  width:225px;
  width:100%;
  }
}

/* Facebook */
#fbpageplugin_wrapper{}

#fbpageplugin_wrapper .fb-page{}

/* Twitter */
#twtimeline_wrapper{}

#twtimeline_wrapper .twitter-timeline{}

/* ブログフィード */
#jssblogfeed_wrapper{}

#jssblogfeed{
height:400px;
background-color:#ffffff;
}

#jssblogfeed h2{
height:60px;
line-height:60px;
text-align:center;
background-color:#833438;
}

#jssblogfeed h2 img{
vertical-align:middle;
}

#jssblogfeed > ul{
height:340px;
height:320px;
padding:10px;
overflow:auto;
background-color:#ffffff;
}

#jssblogfeed > ul li{
margin-bottom:10px;
border-bottom:1px dotted #999999;
}

#jssblogfeed > ul li:last-child{
margin-bottom:0;
border-bottom:0px;
}

.jssfeed_date{
padding-bottom:5px;
font-size:88%;
font-weight:bold;
color:#999999;
}

.jssfeed_ttl{
padding-bottom:5px;
line-height:1.2;
}

.jssfeed_body{
padding-bottom:5px;
font-size:88%;
line-height:1.4;
}