@charset "UTF-8";

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
基本レイアウトデザイン用CSS
1. 基本構造 : body + #container
2. パンくず : #topicpath
3. mainWrap : #l_sidebar + #contents
4. #contents : メインコンテンツ領域
5. Anchor : テキストリンク
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/*---------------------------------------------
1. 基本構造 : body + #container
---------------------------------------------*/
body.xpacmskit{
margin:0;
padding:0;
/*
font-family: "ＭＳ Ｐゴシック", "MS PGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
*/
font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, Arial, sans-serif;
line-height:1.5;
color:#333333;
border-top:5px solid #406dac;
/*
background:#dad9b9 url(/common/img/bg/bg_body.gif) repeat-x top left;
text-align:center;
*/
}

div#container{
/*
width:956px;
margin:0 auto;
text-align:left;
*/
background-color:#fff;
}

/* Media Queries */
/* less than 360: スマホ用 */
@media screen and (max-width: 360px) {
  div#container{
  width:100%; /* Webサイトの横幅 */
  }
}



/*---------------------------------------------フォントサイズ変更*/
/* 標準 : 13px相当 */
body.swFontM {font-size: 81.25%;}
* html body.swFontM {font-size:small;}
*:first-child+html body.swFontM {font-size:small;}

/* 拡大 : 16px相当 */
body.swFontL {font-size: 100%;}
* html body.swFontL {font-size:medium;}
*:first-child+html body.swFontL {font-size:medium;}

/* Media Queries */
/* less than 360: スマホ用 */
@media screen and (max-width: 360px) {
  body.swFontM,
  body.swFontL{
  font-size:81.25%;
  }
}



/*---------------------------------------------
2. パンくず : #topicpath
---------------------------------------------*/
div#topicpath{
}

div#topicpath p{
margin:0 auto;
/* width:980px; */
width:944px;
padding:12px 18px 8px 18px;
font-size:86%;
}

/* Media Queries */
/* less than 360: スマホ用 */
@media screen and (max-width: 360px) {
  div#topicpath p{
  display:none;
  padding:0;
  width:100%;
  }
}



/*-----------------------------------------------
 ソーシャルコネクトボタン
-----------------------------------------------*/
div#socialConnect{
height:30px;
max-height:30px;
overflow:hidden;
}

/* Media Queries */
/* less than 360: スマホ用 */
@media screen and (max-width: 360px) {
  div#socialConnect{
  margin-top:16px;
  }
}

div#btn_fbLike,
div#btn_googlePlus,
div#btn_twitter{
float:right;
margin-top:0px;
}

div#btn_fbLike{
margin-right:5px;
}

/* つぶやくボタン横幅 */
iframe.twitter-share-button{
width:80px!important;
width:100px!important;
}

/* Google+ボタン横幅 */
div#___plusone_0{
width:65px!important;
}


/*---------------------------------------------
3. mainWrap : #l_sidebar + #contents
---------------------------------------------*/
/* サイドバー有り */
div#mainWrap{
/*
margin:0 auto;
width:980px;
padding:0px 0px 0px 0px;
border-right:1px solid #9d9d85;
border-left:1px solid #9d9d85;
background:url(/common/img/bg/bg_mainwrap.gif) repeat-y right top;
*/
}

/* Media Queries */
/* less than 360: スマホ用 */
@media screen and (max-width: 360px) {
  div#mainWrap{
  width:100%;
  }
}



/* ie8の印刷(プレビュー)バグ対応：
   印刷が複数ページまたがるとclearfixが理解されない
   モダンブラウザハック＋\9 */
html>/**/body div#mainWrap{
overflow:auto\9;
}


/* サイドバー無し */
div#mainWrap1Column{
margin:0 auto;
width:980px;
padding:0px 0px 0px 0px;
/*
border-right:1px solid #9d9d85;
border-left:1px solid #9d9d85;
*/
}

@media screen and (max-width: 360px) {
  div#mainWrap1Column{
  width:100%;
  border:0px;
  }
}



/*---------------------------------------------
3.5. Upper Side
---------------------------------------------*/
/* ページ上部部品 */
#upperSide_wrapper{
margin-bottom:50px;
}

#upperSide{}

@media screen and (max-width: 360px) {
  #upperSide_wrapper{
  margin-bottom:30px;
  }

  #upperSide{}
}

/* H1: ページタイトル: ローカルナビ付き */
#pagettlbox_ex_wrapper{
background-color:#e8edf3;
}

#pagettlbox_ex{
display:table;
margin:0 auto!important;
width:980px;
}

@media screen and (max-width: 360px) {
  #pagettlbox_ex{
  display:block;
  width:100%;
  }
}

/* ローカルナビ */
#localnavibox{
display:table-cell;
vertical-align:middle;
padding:20px 0!important;
width:348px;
background-color:#5586cc;
}

@media screen and (max-width: 360px) {
  #localnavibox{
  display:block;
  display:none;
  }
}

#localnavibox dl{
color:#ffffff;
}

#localnavibox dl dt{
padding:0 10px 0 30px;
}

#localnavibox dl dd{
padding:0 10px 0 50px;
}

#localnavibox dl dd a{
color:#ffffff;
}

#localnavibox dl dd a::before{
margin-right:3px;
font-family:FontAwesome;
content: "\f04b";

display: inline-block;

font-size:86%;
height:13px;
overflow:hidden;
}

#localnavibox dl dd a:hover::before{
text-decoration:none;
}


@media screen and (max-width: 360px) {
  #localnaviboxsp{
  margin-bottom:10px;
  margin-bottom:0px;
  }

  #localnaviboxsp dl{
  color:#ffffff;
  }

  #localnaviboxsp dl dt{
  padding:10px 0 10px 20px;
  
  background-color:#5586cc;
  }

  #localnaviboxsp dl dt::after{
  position:absolute;
  top:middle;
  right:20px;
  font-family:FontAwesome;
  content: "\f078";
  }

  #localnaviboxsp dl dt.lnav_dispon::after{
  content: "\f077";
  }

  #localnaviboxsp dl dd{
  padding:10px 0 10px 30px;

  background-color:#6a9ade;
  border-bottom:1px solid #5586cc;
  }

  #localnaviboxsp dl dd a{
  display:block;
  color:#ffffff;
  }

  #localnaviboxsp dl dd a::after{
  position:absolute;
  top:middle;
  right:20px;
  font-family:FontAwesome;
  content: "\f054";
  }

  #localnaviboxsp dl dd a:hover::after{
  
  }
}


/* ページタイトル */
#pagettl_box{
display:table-cell;
vertical-align:middle;
padding:20px 0!important;
}

@media screen and (max-width: 360px) {
  #pagettl_box{
  display:block;
  padding:10px!important;
  }
}

#pagettl_box_inner{
padding:0 10px 0 20px!important;
border-left:6px solid #999999;
}

p#pagesubttl{
display:table;
margin-bottom:10px;
padding:6px 10px 4px;
color:#ffffff;
background-color:#999999;
}

#pagettl_box h1{
font-size:150%;
line-height:1.4;
}

/* コーナー別スタイル */
#ctg01 #pagettl_box_inner{
border-left:6px solid #35a000;
}
#ctg01 p#pagesubttl{
background-color:#35a000;
}

#ctg02 #pagettl_box_inner{
border-left:6px solid #16a1ff;
}
#ctg02 p#pagesubttl{
background-color:#16a1ff;
}

#ctg03 #pagettl_box_inner{
border-left:6px solid #8e8e8e;
}
#ctg03 p#pagesubttl{
background-color:#8e8e8e;
}

#ctg03.initiative #pagettl_box_inner{
border-left:6px solid #fe6da3;
}
#ctg03.initiative p#pagesubttl{
background-color:#fe6da3;
}

#ctg03.society #pagettl_box_inner{
border-left:6px solid #9381ea;
}
#ctg03.society p#pagesubttl{
background-color:#9381ea;
}

#ctg04 #pagettl_box_inner{
border-left:6px solid #5286cc;
}
#ctg04 p#pagesubttl{
background-color:#5286cc;
}

#ctg05 #pagettl_box_inner{
border-left:6px solid #d74c33;
}
#ctg05 p#pagesubttl{
background-color:#d74c33;
}

/* その他 */
#ctgMisc #pagettl_box_inner,
#ctgTopics #pagettl_box_inner{
border-left:6px solid #5286cc;
}
#ctgMisc p#pagesubttl,
#ctgTopics p#pagesubttl{
background-color:#5286cc;
}









/*---------------------------------------------
4. #contents : メインコンテンツ領域
---------------------------------------------*/
/* サイドバー有り */
div#contents{
margin:0 auto;
padding:0 50px 50px;
width:980px;
width:880px;

/*
float:left;
width:660px;
padding:20px 30px 60px 30px;
background-color:#fff;
outline:1px solid #f00000;
*/
}

/* Media Queries */
/* less than 360: スマホ用 */
@media screen and (max-width: 360px) {
  div#contents{
  float:none;
  padding:0 0 30px;
  width:100%;
  }
}



/* サイドバー無し */
div#contents1Column{
padding:20px 30px 60px 30px; /* コンテンツ領域横幅：956-60=896px */
background-color:#fff;
}

/* Media Queries */
/* less than 360: スマホ用 */
@media screen and (max-width: 360px) {
  div#contents1Column{
  float:none;
  padding:0;
  width:100%;
  }
}



div#tagline{
}



/*---------------------------------------------
5. Anchor : テキストリンク
---------------------------------------------*/
.xpacmskit a{color:#1111cc; text-decoration:none; outline:none;}
.xpacmskit a:link{color:#1111cc;}
.xpacmskit a:hover{color:#1111cc; text-decoration:underline;}
/*.xpacmskit a:visited{color:#551a8b;}*/
.xpacmskit a:visited{color:#1111cc;}
.xpacmskit a:active{}



/*---------------------------------------------
6. 汎用トピックスリスト
---------------------------------------------*/
.lst_infobox_gen{
margin-bottom:30px;
}

.lst_infobox_gen dl{
border-top:1px solid #cccccc;
}

.lst_infobox_gen dl dt{
clear:both;
float:left;
padding:5px 0;
width:170px;
}

.lst_infobox_gen dl dd{
padding:5px 0 5px 170px;
border-bottom:1px solid #cccccc;
}

@media screen and (max-width: 360px) {
  .lst_infobox_gen dl{
  margin:0 15px;
  }

  .lst_infobox_gen dl dt{
  float:none;
  padding:5px 0 0;
  width:100%;
  }

  .lst_infobox_gen dl dd{
  padding:0 0 5px 0;
  }
}


/* CMSKIT NEWアイコン */
.lst_infobox_gen dl dt > span{
position:relative;
top:-2px;
margin-left:0.5em;
}



/*---------------------------------------------
7. 汎用インフォメーション
---------------------------------------------*/
/* 一覧 ----------*/*/
.infogen_wrapper{}

/* トップページ以外での横幅調整 */
.infogen_wrapper.infogen_each{
margin:0 -50px 50px;
}

@media screen and (max-width: 360px) {
  .infogen_wrapper.infogen_each{
  margin:0 0 30px;
  }
}

.infogen{
padding:20px 20px 10px!important;
background-color:#e8edf3;
}

@media screen and (max-width: 360px) {
  .infogen{
  padding:10px 10px 0!important;
  background-color:#e8edf3;
  }
}

.infogen ul{
margin-right:-10px!important;
}

.infogen .info_gen_unit{
float:left;
margin-right:10px;
margin-bottom:10px;
width:465px;
min-height:150px;
background-color:#ffffff;
}

.infogen .info_gen_unit_inner{
padding:10px;
}

@media screen and (max-width: 360px) {
  .infogen ul{
  margin-right:0px!important;
  }

  .infogen .info_gen_unit{
  float:none;
  margin-right:0px;
  margin-bottom:10px;
  width:100%;
  min-height:initial;
  min-height:auto;
  }

  .infogen .info_gen_unit_inner{
  padding:10px;
  }
}


.infogen .tig_fig{
float:left;
width:128px;
/*
height:128px;
overflow:hidden;
*/
}

.infogen .tig_fig img{
width:100%;
height:auto;
}

@media screen and (max-width: 360px) {
  .infogen .tig_fig{
  width:86px;
  width:26%;
  }
}


.detail_box_gen{
float:right;
width:305px;
}

@media screen and (max-width: 360px) {
  .detail_box_gen{
  width:226px;
  width:72%;
  }
}


.ctg_name_gen{
display:table!important;
margin-bottom:12px!important;
width:100%;
}

.ctg_name_gen h3{
display:table-cell;
width:125px;
height:32px;
text-align:center;
color:#ffffff;
background-color:#999999;
vertical-align:middle;
}

@media screen and (max-width: 360px) {
  .ctg_name_gen h3{
  display:table-cell;
  width:125px;
  width:100px;
  height:32px;
  text-align:center;
  color:#ffffff;
  background-color:#999999;
  vertical-align:middle;
  }
}

/* コーナー別カラー */

#ctg01 .ctg_name_gen h3{
background-color:#35a000;
}
#ctg02 .ctg_name_gen h3{
background-color:#16a1ff;
}
#ctg03 .ctg_name_gen h3{
background-color:#9381ea;
}
#ctg04 .ctg_name_gen h3{
background-color:#fe6da3;
}
#ctg05 .ctg_name_gen h3{
background-color:#fa583c;
}

.ctg_name_gen p{
display:table-cell;
padding-left:10px;
font-size:86%;
color:#ffffff;
background-color:#bebebe;
vertical-align:middle;
}

.infogen dl{
padding:0 10px;
}

@media screen and (max-width: 360px) {
  .infogen dl{
  padding:0;
  }
}

.infogen dt{
margin-bottom:2px;
font-size:86%;
}

.infogen dt img{
vertical-align:middle!important;
}

.infogen dd{}

/* CMSKIT NEWアイコン */
.infogen .info_gen_unit dl dt > span{
position:relative;
top:-2px;
margin-left:0.5em;
}