@charset "UTF-8";
/* CSS Document */

/*==================================================================
pc_topbox_setting
==================================================================*/
.ex_sp{
  display: none;
}

video{
  position: fixed;
  z-index: 1;
  min-width: 100%; min-height: 100%; width: auto; height: auto;
  top: 0px; bottom: 0px; right: 0px; left: 0px;
}

div,
header,
#wrapper.ex_top .ex_top_category,
#wrapper.ex_top > .content > article .siteLogo,
#wrapper.ex_top > .content > article .ex_siteLogo_text,
h2{
  z-index: 10;
  position: relative;
}
.ranking,
.ex_w33,
#wrapper.ex_top > .content > article > .articleBody .ex_btn_box ul li,
.ex_data{
  position: relative;
  z-index: 11;
}

/*==============================================
社会デザイン研究
==============================================*/
/* カテゴリーTOP */
.ex_category_design{
  background-repeat: repeat;
  background-position: center 0;
  background-attachment: fixed;
  }


/*==============================================
都心の未来
==============================================*/
/* カテゴリーTOP */
.ex_category_city{
  background-repeat: repeat;
  background-position: center 0;
  background-attachment: fixed;
  }


/*==============================================
ウエルネス社会
==============================================*/
/* カテゴリーTOP */
.ex_category_wellness{
  background-repeat: repeat;
  background-position: center 0;
  background-attachment: fixed;
  }


/*==============================================
ロボティクス社会
==============================================*/
/* カテゴリーTOP */
.ex_category_robotics{
  background-repeat: repeat;
  background-position: center 0;
  background-attachment: fixed;
  }


/*==============================================
未来への階段
==============================================*/
/* カテゴリーTOP */
.ex_category_mirai{
  background-repeat: repeat;
  background-position: center 0;
  background-attachment: fixed;
  }


/*==============================================
Buzzword
==============================================*/
/* カテゴリーTOP */
.ex_category_buzzword{
  background-repeat: repeat;
  background-position: center 0;
  background-attachment: fixed;
  }


/*==============================================
食の未来
==============================================*/
/* カテゴリーTOP */
.ex_category_food{
  background-repeat: repeat;
  background-position: center 0;
  background-attachment: fixed;
  }


/*==============================================
未来コトハジメTV
==============================================*/
/* カテゴリーTOP */
.ex_category_tv{
  background-repeat: repeat;
  background-position: center 0;
  background-attachment: fixed;
  }

/*==============================================
スポーツの未来
==============================================*/
/* カテゴリーTOP */
.ex_category_sports{
  background-repeat: repeat;
  background-position: center 0;
  background-attachment: fixed;
  }

/*==================================================================
pc_layout
==================================================================*/
/*==============================================
body commmon setting
==============================================*/
body{
  font-size: 12px;
  margin: 0px;
  padding: 0px;
  text-align: center;
  background: #ffffff;
  line-height: 1.0em;
  color: #333333;
  }
span.ex_text_break{
  display: block;
  }
.ex_SP{
  display: none !important;
  }

/*==============================================
Layoput setting
==============================================*/
#wrapper {
  padding: 0px;
  margin: 0;
  }

/*==============================================
 header setting
==============================================*/
#wrapper > header {
  background: #000000;
  text-align: center
  }
#wrapper > header > div{
  max-width: 1030px;
  width: auto;
  margin: 0 auto;
  padding: 10px 0;
  }

/* logo */
#wrapper > header > div > .siteLogo{
  float: left;
  }
#wrapper > header > div > .siteLogo img{
  width: 260px;
  height: auto;
  }

/* right data */
#wrapper > header > div > .ex_r_data{
  float: right;
  width: 630px;
  padding: 3px 0 0 0;
  }
#wrapper > header > div > .ex_r_data > .searchBox{
  float: left;
  padding: 0px 10px;
  margin: 0 10px;
  border-left: 1px dotted #ffffff;
  border-right: 1px dotted #ffffff;
  }
#wrapper > header > div > .ex_r_data > .searchBox > form > .ex_text{
  float: left;
  font-size: 14px;
  line-height: 1em;
  height: 30px;
  padding: 3px 0 0 10px;
  width: 120px;
  background: #ffffff;
  border: 1px solid #cccccc;
  }
#wrapper > header > div > .ex_r_data > .searchBox > form > .ex_btn{
  float: right;
  font-size: 0px;
  line-height: 0%;
  border: 0px;
    width: 60px;
    height: 30px;
    background: #FF7F00 url(/images/mirakoto/2017/common_search_btn.png) no-repeat center 4px;
  }
#wrapper > header > div > .ex_r_data > .ex_about_link{
  float: left;
  padding: 0px 0 0 10px;
  border-left: 1px dotted #ffffff;
  }
#wrapper > header > div > .ex_r_data > .ex_about_link a{
  background: url(/images/mirakoto/2017/common_white_arrow.png) no-repeat left 9px;
  font-size: 13px;
  line-height: 1em;
  height: 30px;
  padding: 10px 0 0 15px;
  color: #ffffff;
  display: block;
  text-decoration: none;
  }
#wrapper > header > div > .ex_r_data > .ex_about_link a:hover{
  text-decoration: underline
  }
#wrapper > header > div > .ex_r_data > .ex_facebook{
  float: left;
  }
#wrapper > header > div > .ex_r_data > .ex_facebook img{
  width: 30px;
  height: 30px;
  }
@media screen and (max-width: 850px) {
  #wrapper > header > div > .ex_r_data{
    float: right;
    width: 310px;
    padding: 3px 0 0 0;
    }
  #wrapper > header > div > .ex_r_data > .searchBox{
    float: left;
    padding: 0px 0;
    margin: 0 0;
    border-left: none;
    border-right: none;
    }
  #wrapper > header > div > .ex_r_data > .searchBox > form > .ex_text{
    float: left;
    font-size: 14px;
    line-height: 1em;
    height: 30px;
    padding: 3px 0 0 10px;
    width: 120px;
    background: #ffffff;
    border: none;
    }
  #wrapper > header > div > .ex_r_data > .searchBox > form > .ex_btn{
    float: right;
    font-size: 0px;
    line-height: 0%;
    border: 0px;
    width: 60px;
    height: 30px;
    background: #FF7F00 url(/images/mirakoto/2017/common_search_btn.png) no-repeat center 4px;
    }
  #wrapper > header > div > .ex_r_data > .ex_about_link{
    display: none;
    }
  #wrapper > header > div > .ex_r_data > .ex_facebook{
    display: none;
    }
}

/*==============================================
footer setting
==============================================*/
/*======= [04-1] navigation =======*/
#wrapper > .links{}
#wrapper > .links > h2{
  background: #000000;
  text-align: center;
  padding: 10px 0;
  font-size: 0px;
  line-height: 0%;
  }
#wrapper > .links > h2 > img{
  width: auto;
  height: 10px;
  }
#wrapper > .links > nav li{
  float: left;
  width: 20%;
  }
#wrapper > .links > nav a{
  display: block;
  float: left;
  overflow: hidden;
  width: 100%;
  line-height: 105%
}
#wrapper > .links > nav img{
  height: auto;
  -webkit-transition:all 0.25s ease-in-out;
            transition:all 0.25s ease-in-out;
  width: 100%;
  vertical-align: bottom;
}
#wrapper > .links > nav div{
  margin: 0;
  overflow: hidden;
  position: relative;
  text-align: center;
}
#wrapper > .links > nav p{
  background-color: rgba(0,0,0,0.6);
  color: #FFF;
  opacity: 1;
  font-size: 13px;
  position: absolute;
  text-align: center;
  -webkit-transition:all 0.25s ease-in-out;
        transition:all 0.25s ease-in-out;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  padding-top: 22%;
}
#wrapper > .links > nav  a:hover div img {
       transform: scale(1.15,1.15);
       -webkit-transform:scale(1.15,1.15);
       -moz-transform:scale(1.15,1.15);
       -ms-transform:scale(1.15,1.15);
       -o-transform:scale(1.15,1.15);
}
#wrapper > .links > nav  a:hover div p {
  opacity: 0.0;
}

/*======= [04-2] copylight-top =======*/
#wrapper > footer{
  color: #333333;
  line-height: 140%;
  font-size: 12px;
  border-top: 3px solid #000000;
  background: #ffffff;
  }
#wrapper > footer a{
  color: #333333;
  text-decoration: underline;
  }
#wrapper > footer a:hover{
  color: #999999;
  text-decoration: none;
  }
#wrapper > footer > .localFooter{
  padding: 25px 0 0 0;
  text-align: center;
  }
#wrapper > footer > .localFooter p{
  text-align: center
  }
#wrapper > footer > .ex_box{
  text-align: center;
  background: #ffffff;
  }
#wrapper > footer > .ex_box > .siteLogo{
  padding: 30px 0;
  text-align: center
  }
#wrapper > footer > .ex_box > .siteLogo img{
  width: 270px;
  height: auto;
  margin: 0 auto;
  }
#wrapper > footer > .ex_box > .ex_top_copyright_top{
  text-align: center;
  line-height: 1.4em;
  }

/*======= [04-2] copyright-under =======*/
#wrapper > footer > .copyright{
  margin: 25px 0 0 0;
  background: #000000;
  text-align: center;
  color: #ffffff;
  padding: 15px 0 30px;
  }


/*==============================================
parts setting
==============================================*/
/*======= [05-1] RELATED LINKS =======*/
.asideBottom{
  background: #ffffff;
  }
.asideBottom > h2{
  background: #000000;
  text-align: center;
  padding: 10px 0;
  font-size: 0px;
  line-height: 0%;
  }
.asideBottom > h2 > img{
  margin: 0 auto;
  width: auto;
  height: 10px;
  font-size: 0px;
  line-height: 0%;
  }
.asideBottom > div > ul > li{
  width: 33.33333333%;
  float: left;
  }
.asideBottom > div > ul > li:nth-child(2) .ex_data{
  border-left: 1px solid #cccccc;
  border-right: 1px solid #cccccc;
}
.asideBottom > div > ul > li a.thumnail {
  display: block;
  float: left;
  overflow: hidden;
  width: 100%;
  text-decoration: none;
}
.asideBottom > div > ul > li img {
  height: auto;
  -webkit-transition:all 0.25s ease-in-out;
            transition:all 0.25s ease-in-out;
  width: 100%;
  vertical-align: bottom;
}
.asideBottom > div > ul > li .ex_box {
  margin: 0;
  overflow: hidden;
  position: relative;
  text-align: center;
}
.asideBottom > div > ul > li .ex_box .ex_cap {
  background-color: rgba(0,0,0,0.6);
  color: #FFF;
  opacity: 0;
  font-size: 14px;
  position: absolute;
  text-align: center;
  -webkit-transition:all 0.25s ease-in-out;
        transition:all 0.25s ease-in-out;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  padding-top: 25%;
}
.asideBottom > div > ul > li a:hover .ex_box .ex_cap {
  opacity: 1.0;
}
.asideBottom > div > ul > li a:hover .ex_box img {
   transform: scale(1.15,1.15);
   -webkit-transform:scale(1.15,1.15);
   -moz-transform:scale(1.15,1.15);
   -ms-transform:scale(1.15,1.15);
   -o-transform:scale(1.15,1.15);
}
.asideBottom > div > ul > li .ex_box p{
  position: absolute;
  width: 100%;
  left: 0px;
  bottom: 0px;
  z-index: 1000000000;
  background: #000000;
  font-size: 11px;
  line-height: 150%;
  color: #ffffff;
  padding: 7px 20px 5px;
  font-weight: normal;
  }
.asideBottom > div > ul > li .ex_data{
  color: #000000;
  font-size: 12px;
  line-height: 150%;
  padding: 20px;
  background: #ffffff;
  height: 210px;
  overflow: hidden;
  }
.asideBottom > div > ul > li .ex_data h3{
  font-size: 16px;
  line-height: 150%;
  padding: 0 0 15px 0;
  font-weight: normal;
  }
.asideBottom > div > ul > li a:hover .ex_data h3{
  text-decoration: underline !important;
  }
.asideBottom > div > ul > li .ex_data div{
  color: #666666;
  font-size: 11px;
  }
.asideBottom > div > ul > li .ex_data div p{
  float: left;
  width: 70%;
  line-height: 140%;
  }
.asideBottom > div > ul > li .ex_data div time{
  float: right;
  width: 30%;
  line-height: 140%;
  text-align: right;
  }


/*==============================================
index setting
==============================================*/
/* Video box */
/* .ex_vd_box{
  background: url(/images/mirakoto/2017/top_ami.png) repeat 0 0;
  }
#wrapper.ex_top{
  background: url(/images/mirakoto/2017/top_ami.png) repeat 0 0;
  } */

/* ex_top_category  */
#wrapper.ex_top .ex_top_category{
  width: 100%;
  background-color: rgba(0,0,0,0.4);
  border-top: 1px solid #ffffff;
}
#wrapper.ex_top .ex_top_category .ex_wrapper{
  width: calc(1200px - (20px + 30px));
  margin: auto;
  padding: 15px 20px 15px 50px;
}

#wrapper.ex_top .ex_top_category a{
  background: url(../../../../images/mirakoto/2017/common_white_arrow2.png)no-repeat 1px 1px;
  background-size: 8px 14px;
  color: #ffffff;
  font-size: 12px;
  text-decoration: none;
  padding-left: 15px;
  margin-right: 15px;
}
#wrapper.ex_top .ex_top_category a:hover{
  opacity: 0.5;
}

/* main ttl */
#wrapper.ex_top > .content > article .siteLogo{
  padding: 65px 0 20px 0;
  text-align: center;
}
#wrapper.ex_top > .content > article .ex_siteLogo_text{
  font-size: 14px;
  text-align: center;
  line-height: 1.6em;
  color: #ffffff;
  padding-bottom: 65px;
  text-shadow: 1px 0 0 #000, 1px 1px 0 #000, 0 1px 0 #000, -1px 1px 0 #000, -1px 0 0 #000, -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000;
  font-weight: bold;

}

#wrapper.ex_top > .content > article .siteLogo img{
  margin: 0 auto;
  width: 374px;
  height: auto;
  }
  .ex_top .ex_top_keyword_box{
  margin: 0 auto;
  }
  .ex_top .ex_content_box{
  width: 900px;
  margin: 0 auto;
  margin-bottom: 20px;
  }
  .ex_top .articleBody .ex_btn_box ul li{
  width: 33.33333333%;
  float: left;
  }

/* panel list */
#wrapper.ex_top > .content > article > .articleBody{
  margin: 0 auto;
  margin-bottom: 20px;
  }
#wrapper.ex_top > .content > article > .articleBody .ex_btn_box ul li{
  float: left;
  }

  @media screen and (max-width: 1199px) {
  #wrapper.ex_top > .content > article .articleBody,
  #wrapper.ex_top > .content > article .articleBody .ex_content_box{
    width: 900px;
    }

  #wrapper.ex_top > .content > article .articleBody .ex_btn_box ul li{
    width: 33.33333333%;
    }
  }
  @media screen and (min-width: 1200px) {
  #wrapper.ex_top > .content > article .articleBody,
  #wrapper.ex_top > .content > article .articleBody .ex_content_box{
    width: 1200px;
    }
  #wrapper.ex_top > .content > article .articleBody .ex_btn_box ul li{
    width: 25%;
    }
  #wrapper.ex_top > .content > article > .articleBody .ex_btn_box ul li:last-child{

    }
  }
#wrapper.ex_top > .content > article > .articleBody .ex_new_icon_box{
  position: relative;
  height: 0px;
  width: 0px;
  }
#wrapper.ex_top > .content > article > .articleBody .ex_new_icon_box img{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 38px !important;
  height: 38px !important;
  z-index: 100000!important;
  }
#wrapper.ex_top > .content > article .articleBody h2{
  background: #000000;
  text-align: center;
  padding: 10px 0;
  font-size: 0px;
  line-height: 0%;
  }
#wrapper.ex_top > .content > article > .articleBody h2 img{
  margin: 0 auto;
  height: 10px;
  width: auto;
  }

/* AD banner */
#wrapper.ex_top > .content > article > .articleBody .dag_box{
  position: relative;
  width: 100%;
  }
#wrapper.ex_top > .content > article > .articleBody .dag_banner{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 300px;
  z-index: 1000000000000000;
  }
#wrapper.ex_top > .content > article > .articleBody .dag_banner_text{
  text-decoration: none;
  color: #000000;
  font-size: 13px !important;
  line-height: 150% !important;
  }

/* top panel setting */
#wrapper.ex_top > .content > article > .articleBody .ex_btn_box ul li{
  height: 445px;
  overflow: hidden
  }
#wrapper.ex_top > .content > article > .articleBody .ex_btn_box .ex_w66{
  width: 600px !important;
  }
#wrapper.ex_top > .content > article > .articleBody .ex_btn_box .ex_w33{
  width: 300px !important;
  }
#wrapper.ex_top > .content > article > .articleBody .ex_btn_box .ex_w33 .ex_data{
  border-right: 1px solid #cccccc;
}
#wrapper.ex_top > .content > article > .articleBody .ex_content_box li .ex_data{
  box-sizing: border-box;
  height: 195px;
  position: relative;
  border-left: 1px solid #cccccc;
  }
@media screen and (min-width: 1200px) {
  #wrapper.ex_top > .content > article > .articleBody .ex_content_box li:nth-child(1) .ex_data,
  #wrapper.ex_top > .content > article > .articleBody .ex_content_box li:nth-child(4) .ex_data,
  #wrapper.ex_top > .content > article > .articleBody .ex_content_box li:nth-child(8) .ex_data,
  #wrapper.ex_top > .content > article > .articleBody .ex_content_box li:nth-child(12) .ex_data{
    border:none;
  }
  .ex_sp_wrapper li:last-child{
    display: none;
  }
}
@media screen and (max-width: 1199px) {
  #wrapper.ex_top > .content > article > .articleBody .ex_content_box li:nth-child(1) .ex_data,
  #wrapper.ex_top > .content > article > .articleBody .ex_content_box li:nth-child(2) .ex_data,
  #wrapper.ex_top > .content > article > .articleBody .ex_content_box li:nth-child(8) .ex_data,
  #wrapper.ex_top > .content > article > .articleBody .ex_content_box li:nth-child(12) .ex_data{
    /*border:none;*/
  }
}

#wrapper.ex_top > .content > article > .articleBody .ex_btn_box a.ex_thumnail {
  display: block;
  float: left;
  overflow: hidden;
  width: 100%;
  text-decoration: none;
}
#wrapper.ex_top > .content > article > .articleBody .ex_btn_box a:hover.ex_thumnail h3{
  text-decoration: underline;
}
.ex_top_keyword_box .ex_wrapper{
  background-color: rgba(255,255,255,0.5);
  padding: 15px 50px 5px 50px;
}
.ex_top_keyword_box .ex_wrapper ul{
  display: flex;
  flex-wrap: wrap;
}
@media screen and (max-width: 1199px) {
  .ex_top_keyword_box .ex_wrapper ul{
    justify-content: center;
  }
}

.ex_top_keyword_box .ex_wrapper li a{
  display: inline-block;
  border: 1px solid #000000;
  background-color: #ffffff;
  border-radius: 5px;
  padding: 10px 12px 8px 12px;
  color: #000000;
  text-decoration: none;
  font-size: 14px;
  margin-left: 10px;
  margin-bottom: 10px;
}
.ex_top_keyword_box .ex_wrapper li a:hover{
  background-color: #000000;
  color: #ffffff;
}
.ex_sp_keyword_box_text{
  display: none;
}
.ex_content_box .ex_btn_box img {
  height: auto;
  -webkit-transition:all 0.25s ease-in-out;
            transition:all 0.25s ease-in-out;
  width: 100%;
  vertical-align: bottom;
}
.ex_content_box .ex_btn_box .ex_box {
  margin: 0;
  overflow: hidden;
  position: relative;
  text-align: center;
  z-index: 1;
}
.ex_content_box .ex_btn_box .ex_box:nth-child(1) {
  height: 250px;
}
.ex_w66 .ex_data2{
  width: 560px!important;
}

.ex_content_box .ex_btn_box .ex_cap {
  background-color: rgba(0,0,0,0.6);
  color: #FFF;
  opacity: 0;
  font-size: 14px;
  position: absolute;
  text-align: center;
  -webkit-transition:all 0.25s ease-in-out;
        transition:all 0.25s ease-in-out;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  padding-top: 25%;
}
.ex_content_box  a:hover > .ex_box img {
       transform: scale(1.15,1.15);
       -webkit-transform:scale(1.15,1.15);
       -moz-transform:scale(1.15,1.15);
       -ms-transform:scale(1.15,1.15);
       -o-transform:scale(1.15,1.15);
}
.ex_content_box  a:hover > .ex_box .ex_cap {
  opacity: 1.0;
}
.ex_content_box .ex_data{
  color: #000000;
  font-size: 12px;
  line-height: 150%;
  padding: 15px 20px 20px 20px;
  background: #ffffff;
  height: 100px;
  }
  @media screen and (max-width: 1199px) {
  .ex_top .articleBody .ex_content_box li:nth-child(3) .ex_data{

  }
  .ex_top .articleBody .ex_content_box li:nth-child(5) .ex_data{

  }
  .ex_top .articleBody .ex_content_box li:nth-child(8) .ex_data,
  .ex_top .articleBody .ex_content_box li:nth-child(11) .ex_data,
  .ex_top .articleBody .ex_content_box li:nth-child(17) .ex_data,
  .ex_top .articleBody .ex_content_box li:nth-child(20) .ex_data{

    box-sizing: border-box;
    height: 21px;
    }
  }
  @media screen and (min-width: 1200px) {

  }
  .ex_top .articleBody .ex_content_box li:nth-child(6) .ex_data,
  .ex_top .articleBody .ex_content_box li:nth-child(7) .ex_data,
  .ex_top .articleBody .ex_content_box li:nth-child(8) .ex_data,
  .ex_top .articleBody .ex_content_box li:nth-child(10) .ex_data,
  .ex_top .articleBody .ex_content_box li:nth-child(11) .ex_data,
  .ex_top .articleBody .ex_content_box li:nth-child(12) .ex_data,
  .ex_top .articleBody .ex_content_box li:nth-child(16) .ex_data,
  .ex_top .articleBody .ex_content_box li:nth-child(18) .ex_data,
  .ex_top .articleBody .ex_content_box li:nth-child(19) .ex_data,
  .ex_top .articleBody .ex_content_box li:nth-child(20) .ex_data{
    border-left: 1px solid #cccccc;
    height: 210px;
    }

.ex_content_box .ex_category{
  position: absolute;
  width: 100%;
  left: 0px;
  bottom: 0px;
  z-index: 10000;
  background: #000000;
  font-size: 11px;
  line-height: 150%;
  color: #ffffff;
  padding: 7px 20px 5px;
  font-weight: normal;
  }
.ex_content_box .ex_data h3{
  font-size: 16px;
  line-height: 150%;
  padding: 0 0 12px 0;
  font-weight: normal;
  }
.ex_content_box .ex_data a:hover h3{
  text-decoration: underline !important;
}
.ex_content_box .ex_data h3:hover{
  color: #333333;
  text-decoration: underline;
  }
.ex_content_box .ex_data .ex_data2{
  font-size: 11px;
  line-height: 105%;
  width: 260px;
  }
.ex_content_box .ex_data .ex_data2 .ex_keyword_name{
  color: #666666;
  line-height: 1.4em;
  width: 260px;
  margin-bottom: 3px;
  }
.ex_content_box .ex_data .ex_data2 .ex_keyword_name a{
  text-decoration: none;
  color: #000000;
}
.ex_content_box .ex_data .ex_data2 .ex_keyword_name a:hover{
  background-color: #000000;
  color: #ffffff;
}
.ex_content_box .ex_data .ex_data2 .ex_keyword_name .ex_boxcategory{
  border: 1px solid #000000;
  border-radius: 5px;
  background-color: #ffffff;
  font-size: 11px;
  display:inline-block;
  padding: 5px 10px 5px 10px;
  float: left;
  margin-right: 5px;
  margin-bottom: 5px;
}
.ex_content_box .ex_data .ex_data2 .ex_supported{
  font-size: 11px;
  line-height: 105%;
  margin-bottom:7px;
  float: left;
}

.ex_content_box .ex_data .ex_data2 time{
  float: right;
  text-align: right;
  line-height: 1.4em;
  color: #666666;
  margin-top: -2px;
  }

/* Facebook common */
#wrapper.ex_top > .content > article > .articleBody .ex_facebook_box{
  box-sizing: border-box;
  border: 2px solid #ffffff;
  padding: 20px 0;
  text-align: center;
  font-size: 16px;
  line-height: 1em;
  color: #333333;
  margin: 0 auto 20px auto;
  background-color:rgba(255,255,255,0.9);
  }
#wrapper.ex_top > .content > article > .articleBody .ex_facebook_box a{
  color: #39579A;
  text-decoration: underline;
  background: url(/images/mirakoto/2017/common_facebook_arrow.png) no-repeat 0 1px;
  padding: 0 0 0 20px;
  font-weight: bold;
  }
#wrapper.ex_top > .content > article > .articleBody .ex_facebook_box a:hover{
  color: #333333;
  }
  @media screen and (max-width: 1199px) {
  #wrapper.ex_top > .content > article > .articleBody .ex_facebook_box{
    width: 900px;
    }
  }
  @media screen and (min-width: 1200px) {
  #wrapper.ex_top > .content > article > .articleBody .ex_facebook_box{
    width: 1200px;
    }
  #wrapper.ex_top > .content > article > .articleBody .ex_facebook_box a:hover{
    color: #333333;
    }
  }

/* ranking & KEYWORD common*/
#wrapper.ex_top > .content > article > .articleBody .ex_ranking_box,
#wrapper.ex_top > .content > article > .articleBody .ex_keyword_box{
  background: #EEE7DD;
  height: 400px;
  }

#wrapper.ex_top > .content > article > .articleBody .ex_ranking_box .ex_category_icon,
.ex_spttl_archivecontent,
.drawer-nav,
.drawer-toggle{
  display:  none!important;
}
#wrapper.ex_top > .content > article > .articleBody .ex_ranking_box .ex_title{
  font-size: 13px;
  line-height: 1.5em;
}
#wrapper.ex_top > .content > article > .articleBody .ex_ranking_box > h3,
#wrapper.ex_top > .content > article > .articleBody .ex_keyword_box > h3{
  background: #000000;
  padding: 10px 0 10px 20px;
  color: #ffffff;
  font-size: 11px;
  line-height: 1em;
  font-weight: normal;
  }
#wrapper.ex_top > .content > article > .articleBody .ex_ranking_box .ranking,
#wrapper.ex_top > .content > article > .articleBody .ex_keyword_box .ex_keyword{
  padding: 15px 20px 0 20px;
  }

/* ranking */
#wrapper.ex_top > .content > article > .articleBody .ex_ranking_box{
  }
#wrapper.ex_top > .content > article > .articleBody .ex_ranking_box img{
  width: 80px;
  float: left;
  margin-right: 10px;
  margin-left: 0px;
  z-index: 1;
  position: relative;
  margin-bottom: 10px;
}
#wrapper.ex_top > .content > article > .articleBody .ex_ranking_box .ex_category_color1{
  font-size: 11px;
  color: #FF7300;
  font-weight: bold;
  margin-top: 0px;
  margin-bottom: 4px;
}
#wrapper.ex_top > .content > article > .articleBody .ex_ranking_box .ex_category_color2{
  font-size: 11px;
  color: #473561;
  font-weight: bold;
  margin-top: 0px;
  margin-bottom: 4px;
}
#wrapper.ex_top > .content > article > .articleBody .ex_ranking_box .ex_category_color3{
  font-size: 11px;
  color:#0095D0;
  font-weight: bold;
  margin-top: 0px;
  margin-bottom: 4px;
}

#wrapper.ex_top > .content > article > .articleBody .ex_ranking_box .ex_category_color4{
  font-size: 11px;
  color:#0A4D7D;
  font-weight: bold;
  margin-top: 0px;
  margin-bottom: 4px;
}
#wrapper.ex_top > .content > article > .articleBody .ex_ranking_box .ex_category_color5{
  font-size: 11px;
  color:#82CA00;
  font-weight: bold;
  margin-top: 0px;
  margin-bottom: 4px;
}
#wrapper.ex_top > .content > article > .articleBody .ex_ranking_box .ex_category_color6{
  font-size: 11px;
  color:#00C7A5;
  font-weight: bold;
  margin-top: 0px;
  margin-bottom: 4px;
}
#wrapper.ex_top > .content > article > .articleBody .ex_ranking_box .ex_category_color7{
  font-size: 11px;
  color:#EA302C;
  font-weight: bold;
  margin-bottom: 5px;
  margin-top: 0px;
  margin-bottom: 4px;
}
#wrapper.ex_top > .content > article > .articleBody .ex_ranking_box .ex_category_color8{
  font-size: 11px;
  color:#D90035;
  font-weight: bold;
  margin-top: 0px;
  margin-bottom: 4px;
}
#wrapper.ex_top > .content > article > .articleBody .ex_ranking_box .ex_category_color9{
  font-size: 11px;
  color:#4fadc6;
  font-weight: bold;
  margin-top: 0px;
  margin-bottom: 4px;
}
#wrapper.ex_top > .content > article > .articleBody .ex_ranking_box .ex_title{
  font-size: 12px;
  line-height: 18px;
  margin-right: 0px;
  margin-bottom: 5px;
}
#wrapper.ex_top > .content > article > .articleBody .ex_ranking_box .ex_category_icon{
  display: inline-block!important;
  padding: 2px 7px 2px 7px!important;
  border: 1px solid #000000;
  border-radius: 5px;
  font-size: 11px;
  margin-bottom: 15px;
  height: auto!important;
}
#wrapper.ex_top > .content > article > .articleBody .ex_ranking_box .ex_category_icon:hover{
  background-color: #000000;
  color: #ffffff!important;
}
#wrapper.ex_top > .content > article > .articleBody .ex_ranking_box .ranking ol li{
  width: 100%  !important;
  float: none !important;
  padding: 0 0 0 0px;
  font-size: 16px;
  line-height: 150%;
  height: auto;
  }

#wrapper.ex_top > .content > article > .articleBody .ex_ranking_box .ex_category_icon{
  display: none!important;
}
#wrapper.ex_top > .content > article > .articleBody .ex_ranking_box .ranking li{
  position: relative;
  z-index: 1;
}
#wrapper.ex_top > .content > article > .articleBody .ex_ranking_box .ranking .ex_ranking_number1{
  display: block;
  width: 26px;
  height: 26px;
  background: url(../../../../images/mirakoto/2017/ranking_01.png)no-repeat;
  background-size: 26px 26px;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 10;
}
#wrapper.ex_top > .content > article > .articleBody .ex_ranking_box .ranking .ex_ranking_number2{
  display: block;
  width: 26px;
  height: 26px;
  background: url(../../../../images/mirakoto/2017/ranking_02.png)no-repeat;
  background-size: 26px 26px;
  position: absolute;
  top: 0;
  left: 0px;
  z-index: 10;
}
#wrapper.ex_top > .content > article > .articleBody .ex_ranking_box .ranking .ex_ranking_number3{
  display: block;
  width: 26px;
  height: 26px;
  background: url(../../../../images/mirakoto/2017/ranking_03.png)no-repeat;
  background-size: 26px 26px;
  position: absolute;
  top: 0;
  left: 0px;
  z-index: 10;
}
#wrapper.ex_top > .content > article > .articleBody .ex_ranking_box .ranking .ex_ranking_number4{
  display: block;
  width: 26px;
  height: 26px;
  background: url(../../../../images/mirakoto/2017/ranking_04.png)no-repeat;
  background-size: 26px 26px;
  position: absolute;
  top: 0;
  left: 0px;
  z-index: 10;
}
#wrapper.ex_top > .content > article > .articleBody .ex_ranking_box .ranking .ex_ranking_number5{
  display: block;
  width: 26px;
  height: 26px;
  background: url(../../../../images/mirakoto/2017/ranking_05.png)no-repeat;
  background-size: 26px 26px;
  position: absolute;
  top: 0;
  left: 0px;
  z-index: 10;
}


#wrapper.ex_top > .content > article > .articleBody .ex_ranking_box .ranking .ex_color1{
  background-color: #FF7300;
}
#wrapper.ex_top > .content > article > .articleBody .ex_ranking_box .ranking .ex_color2{
  background-color: #473561;
}
#wrapper.ex_top > .content > article > .articleBody .ex_ranking_box .ranking .ex_color3{
  background-color: #0095D0;
}
#wrapper.ex_top > .content > article > .articleBody .ex_ranking_box .ranking .ex_color4{
  background-color: #0A4D7D;
}
#wrapper.ex_top > .content > article > .articleBody .ex_ranking_box .ranking .ex_color5{
  background-color: #82CA00;
}
#wrapper.ex_top > .content > article > .articleBody .ex_ranking_box .ranking .ex_color6{
  background-color: #00C7A5;
}
#wrapper.ex_top > .content > article > .articleBody .ex_ranking_box .ranking .ex_color7{
  background-color: #EA302C;
}
#wrapper.ex_top > .content > article > .articleBody .ex_ranking_box .ranking .ex_color8{
  background-color: #D90035;
}
#wrapper.ex_top > .content > article > .articleBody .ex_ranking_box .ranking .ex_color9{
  background-color: #4fadc6;
}

#wrapper.ex_top > .content > article > .articleBody .ex_ranking_box .ranking a{
  display: block;
  color: #333333;
  text-decoration: none;
  position: relative;
  z-index: 10;
  }
#wrapper.ex_top > .content > article > .articleBody .ex_ranking_box li{
  padding: 10px 0 10px 0;
}

#wrapper.ex_top > .content > article > .articleBody .ex_ranking_box .ranking a:hover{
  color: #000000;
  text-decoration: underline;
  }

/* KEYWORD */
#wrapper.ex_top > .content > article > .articleBody .ex_keyword_box .ex_keyword li{
  display: inline !important;
  width: auto !important;
  float: none !important;
  font-size: 14px;
  line-height: 210%;
  }
#wrapper.ex_top > .content > article > .articleBody .ex_keyword_box .ex_keyword li:after{
  content:" 、 ";
  }

#wrapper.ex_top > .content > article > .articleBody .ex_keyword_box .ex_keyword li:last-child:after{
  content:"";
  }


#wrapper.ex_top > .content > article > .articleBody .ex_keyword_box .ex_keyword a{
  display: inline;
  color: #333333;
  text-decoration: none;
  padding: 0;
  }
#wrapper.ex_top > .content > article > .articleBody .ex_keyword_box .ex_keyword a:hover{
  color: #000000;
  text-decoration: underline;
  }


/*==============================================
about Mirakoto & 404
==============================================*/
#wrapper.ex_about{
  background: url(/images/mirakoto/2017/top_img.jpg) repeat center -150px;
  background-attachment: fixed;
  }
#wrapper.ex_about > .content{
  height: auto;
  padding: 0;
  }
#wrapper.ex_about > .content > article > header > h1{
  text-align: center;
  padding: 100px 0 50px 0;
  }
#wrapper.ex_about > .content > article > header > h2{
  text-align: center;
  padding: 0 0 50px 0;
  font-size: 36px;
  color: #ffffff;
  line-height: 1.0em;
  text-shadow: 0px -1px #000, 1px 0px #000, 0px 1px #000, -1px 1px #000;
  }
#wrapper.ex_about > .content > article > header > h1 > img{
  width: 350px;
  height: auto;
  margin: 0 auto;
  }
#wrapper.ex_about > .content > article > .articleBody{
  padding: 0 0 50px 0;
  }
#wrapper.ex_about > .content > article > .articleBody > p{
  padding: 0 0 30px 0;
  color: #ffffff;
  font-size: 16px;
  line-height: 180%;
  text-shadow: 0px -1px #000, 1px 0px #000, 0px 1px #000, -1px 1px #000;
  }
#wrapper.ex_about > .content > article > .articleBody > p > span{
  display: block;
  margin: 0 auto;
  text-align: center;
  }
#wrapper.ex_about > .content > article > .articleBody > p > span > a{
  color: #ff6600;
  text-decoration:  underline;
  }
#wrapper.ex_about > .content > article > .articleBody > p > span > a:hover{
  text-decoration:  none;
  }



/*==============================================
category setting
==============================================*/
.ex_category{}
#wrapper.ex_category > .content > article > header{
  height: 300px;
  text-align: center;
  background-position: center -55px;
  }
#wrapper.ex_category > .content > article > header h1{
  text-align: center;
  font-size: 42px;
  line-height: 105%;
  padding: 80px 0 20px;
  text-shadow:
    0px -1px #fff,
    1px 0px #fff,
    0px 1px #fff,
    -1px 1px #fff;
  }
#wrapper.ex_category > .content > article > header > p{
  font-size: 18px;
  line-height: 160%;
  text-align: center;
  font-weight: bold;
  }
#wrapper.ex_category > .content > article > header > p > span{
  display: block;
  }
#wrapper.ex_category > .content > article > header .ex_lead2{
  font-size: 18px;
  line-height: 160%;
  text-align: center;
  font-weight: bolder;
  color: #000000;
  text-shadow: 1px 1px 1px #fff, 1px -1px 1px #fff, -1px 1px 1px #fff,  -1px -1px 1px #fff;
  }

/* banner list */
#wrapper.ex_category > .content > article > .articleBody{
  background: #ffffff;
  }
#wrapper.ex_category > .content > article > .articleBody > h2{
  background: #000000;
  text-align: center;
  padding: 10px 0;
  font-size: 0px;
  line-height: 0%;
  }
#wrapper.ex_category > .content > article > .articleBody > h2 > img{
  margin: 0 auto;
  width: auto;
  height: 10px;
  font-size: 0px;
  line-height: 0%;
  }
#wrapper.ex_category > .content > article > .articleBody > div > ul > li{
  width: 33.33333333%;
  float: left;
  }
#wrapper.ex_category > .content > article > .articleBody > div > ul > li > .ex_new_icon_box{
  position: relative;
  height: 0px;
  width: 0px;
  }
#wrapper.ex_category > .content > article > .articleBody > div > ul > li > .ex_new_icon_box img{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 38px !important;
  height: 38px !important;
  z-index: 100000;
  }
#wrapper.ex_category > .content > article > .articleBody > div > ul > li:nth-child(3n-1) .ex_data{

}
#wrapper.ex_category > .content > article > .articleBody > div > ul > li a.thumnail {
  display: block;
  float: left;
  overflow: hidden;
  width: 100%;
  text-decoration: none;
}
#wrapper.ex_category > .content > article > .articleBody > div > ul > li img {
  height: auto;
  -webkit-transition:all 0.25s ease-in-out;
            transition:all 0.25s ease-in-out;
  width: 100%;
  vertical-align: bottom;
}
#wrapper.ex_category > .content > article > .articleBody > div > ul > li .ex_box {
  margin: 0;
  overflow: hidden;
  position: relative;
  text-align: center;
}
#wrapper.ex_category > .content > article > .articleBody > div > ul > li .ex_box .ex_cap {
  background-color: rgba(0,0,0,0.6);
  color: #FFF;
  opacity: 0;
  font-size: 14px;
  position: absolute;
  text-align: center;
  -webkit-transition:all 0.25s ease-in-out;
        transition:all 0.25s ease-in-out;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  padding-top: 25%;
}
#wrapper.ex_category > .content > article > .articleBody > div > ul > li a:hover .ex_box .ex_cap {
  opacity: 1.0;
}
#wrapper.ex_category > .content > article > .articleBody > div > ul > li a:hover .ex_box img {
   transform: scale(1.15,1.15);
   -webkit-transform:scale(1.15,1.15);
   -moz-transform:scale(1.15,1.15);
   -ms-transform:scale(1.15,1.15);
   -o-transform:scale(1.15,1.15);
}
#wrapper.ex_category > .content > article > .articleBody > div > ul > li .ex_box p{
  position: absolute;
  width: 100%;
  left: 0px;
  bottom: 0px;
  z-index: 1000000000;
  font-size: 11px;
  line-height: 150%;
  color: #ffffff;
  padding: 7px 20px 5px;
  font-weight: normal;
  }
#wrapper.ex_category > .content > article > .articleBody > div > ul > li .ex_data{
  color: #000000;
  font-size: 12px;
  line-height: 150%;
  padding: 20px;
  background: #ffffff;
  height: 210px;
  overflow: hidden;
  }
#wrapper.ex_category > .content > article > .articleBody > div > ul > li .ex_data h3{
  font-size: 16px;
  line-height: 150%;
  padding: 0 0 15px 0;
  font-weight: normal;
  }
#wrapper.ex_category > .content > article > .articleBody > div > ul > li a:hover .ex_data h3{
  text-decoration: underline !important;
  }
#wrapper.ex_category > .content > article > .articleBody > div > ul > li .ex_data div{
  color: #666666;
  font-size: 11px;
  }
#wrapper.ex_category > .content > article > .articleBody > div > ul > li .ex_data div p{
  float: left;
  width: 70%;
  line-height: 140%;
  }
#wrapper.ex_category > .content > article > .articleBody > div > ul > li .ex_data div time{
  float: right;
  width: 30%;
  line-height: 140%;
  text-align: right;
  }





/*==================================================================
clumn2 Setting
==================================================================*/
/*======= topicpass =======*/
.ex_breadcrumb_box{
  border-top: 5px solid #000000;
  background: #eeeeee;
  text-align: center
  }
.ex_breadcrumb_box > .breadcrumb{
  max-width: 1000px;
  width: auto;
  margin: 0 auto;
  padding: 7px 2px 7px 2px;
  }
.ex_breadcrumb_box > .breadcrumb > li{
  display: inline;
  font-size: 11px;
  line-height: 105%;
  padding: 0 0 5px 0;
  }
.ex_breadcrumb_box > .breadcrumb > li a{
  padding: 0 14px 0 0;
  margin: 0 5px 0 0 ;
  background: url(/images/mirakoto/2017/common_topic_arrow.png) no-repeat right 3px;
  }
.ex_breadcrumb_box > .breadcrumb > li a{
  color: #333333 !important;
  }
.ex_breadcrumb_box > .breadcrumb > li a:hover{
  color: #999999 !important;
  }

/*======= common layout =======*/
#wrapper.ex_clumn2 > .content{
  background: url(/images/mirakoto/2017/common_leaf_content_bg.jpg) repeat-y center 0;
  text-align: center;
  margin: 0 auto;
  }
#wrapper.ex_clumn2 > .content > .ex_clumn2_wrap{
  width: 1000px;
  padding: 0 35px;
  margin: 0 auto;
  background: #ffffff;
  }
#wrapper.ex_clumn2 > .content > .ex_clumn2_wrap > article{
  float: left;
  width: 600px;
  margin: 0 auto;
  padding: 50px 0;
  }
#wrapper.ex_clumn2 > .content > .ex_clumn2_wrap > .asideRight{
  width: 300px;
  float: right;
  padding: 50px 0 0 0;
  }

/*======= Rght Clumn =======*/
#wrapper.ex_clumn2 > .content > .ex_clumn2_wrap > .asideRight{
  padding-bottom: 50px;
  }
#wrapper.ex_clumn2 > .content > .ex_clumn2_wrap > .asideRight h2{
  font-size: 12px;
  line-height: 105%;
  color: #000000;
  border-bottom: 1px solid #000000;
  padding: 0 0 5px 0;
  margin: 0 0 0 0;
  font-weight: normal;
  }

/* AD banner */
#wrapper.ex_clumn2 > .content > .ex_clumn2_wrap > .asideRight .dag_bunner{
  padding: 0 0 30px 0;
  }

/* Ranking */
#wrapper.ex_clumn2 > .content > .ex_clumn2_wrap > .asideRight .ranking{}
#wrapper.ex_clumn2 > .content > .ex_clumn2_wrap > .asideRight .ranking li{
  padding: 11px 0 8px 30px;
  font-size: 12px;
  line-height: 150%;
  border-bottom: 1px dotted #999999;
  }
#wrapper.ex_clumn2 > .content > .ex_clumn2_wrap > .asideRight .ranking li:nth-child(1){
  background: url(/images/mirakoto/2017/ranking01.gif) no-repeat 0 9px;
  background-size: 20px 20px;
  }
#wrapper.ex_clumn2 > .content > .ex_clumn2_wrap > .asideRight .ranking li:nth-child(2){
  background: url(/images/mirakoto/2017/ranking02.gif) no-repeat 0 9px;
  background-size: 20px 20px;
  }
#wrapper.ex_clumn2 > .content > .ex_clumn2_wrap > .asideRight .ranking li:nth-child(3){
  background: url(/images/mirakoto/2017/ranking03.gif) no-repeat 0 9px;
  background-size: 20px 20px;
  }
#wrapper.ex_clumn2 > .content > .ex_clumn2_wrap > .asideRight .ranking li:nth-child(4){
  background: url(/images/mirakoto/2017/ranking04.gif) no-repeat 0 9px;
  background-size: 20px 20px;
  }
#wrapper.ex_clumn2 > .content > .ex_clumn2_wrap > .asideRight .ranking li:nth-child(5){
  background: url(/images/mirakoto/2017/ranking05.gif) no-repeat 0 9px;
  background-size: 20px 20px;
  }
#wrapper.ex_clumn2 > .content > .ex_clumn2_wrap > .asideRight .ranking li:nth-child(6){
  background: url(/images/mirakoto/2017/ranking06.gif) no-repeat 0 9px;
  background-size: 20px 20px;
  }
#wrapper.ex_clumn2 > .content > .ex_clumn2_wrap > .asideRight .ranking li:nth-child(7){
  background: url(/images/mirakoto/2017/ranking07.gif) no-repeat 0 9px;
  background-size: 20px 20px;
  }
#wrapper.ex_clumn2 > .content > .ex_clumn2_wrap > .asideRight .ranking li:nth-child(8){
  background: url(/images/mirakoto/2017/ranking08.gif) no-repeat 0 9px;
  background-size: 20px 20px;
  }
#wrapper.ex_clumn2 > .content > .ex_clumn2_wrap > .asideRight .ranking li:nth-child(9){
  background: url(/images/mirakoto/2017/ranking09.gif) no-repeat 0 9px;
  background-size: 20px 20px;
  }
#wrapper.ex_clumn2 > .content > .ex_clumn2_wrap > .asideRight .ranking li:nth-child(10){
  background: url(/images/mirakoto/2017/ranking10.gif) no-repeat 0 9px;
  background-size: 20px 20px;
  border-bottom: 1px dotted #999999;
  }
#wrapper.ex_clumn2 > .content > .ex_clumn2_wrap > .asideRight .ranking a{
  color: #333333;
  text-decoration: none;
  }
#wrapper.ex_clumn2 > .content > .ex_clumn2_wrap > .asideRight .ranking a:hover{
  color: #999999;
  text-decoration: underline;
  }

/* Facebook */
#wrapper.ex_clumn2 > .content > .ex_clumn2_wrap > .asideRight .links{
  box-sizing: border-box;
  border: 2px solid #cccccc;
  padding: 13px 15px 10px 15px;
  text-align: left;
  font-size: 14px;
  line-height: 1.5em;
  color: #333333;
  margin: 25px 0 40px 0;
  background: #fdfdfd;
  }
#wrapper.ex_clumn2 > .content > .ex_clumn2_wrap > .asideRight .links a{
  color: #39579A;
  text-decoration: underline;
  background: url(/images/mirakoto/2017/common_facebook_arrow.png) no-repeat 3px 4px;
  background-size: 8px auto;
  padding: 0 0 0 20px;
  font-weight: bold;
  }
#wrapper.ex_clumn2 > .content > .ex_clumn2_wrap > .asideRight .links a:hover{
  color: #333333;
  }

/* KEYWORD */
#wrapper.ex_clumn2 > .content > .ex_clumn2_wrap > .asideRight .ex_keyword ol{
  padding: 5px 0 0 0;
  }
#wrapper.ex_clumn2 > .content > .ex_clumn2_wrap > .asideRight .ex_keyword li{
  display: inline !important;
  width: auto !important;
  float: none !important;
  font-size: 14px;
  line-height: 210%;
  }
#wrapper.ex_clumn2 > .content > .ex_clumn2_wrap > .asideRight .ex_keyword li:after{
  content:" 、 ";
  }
#wrapper.ex_clumn2 > .content > .ex_clumn2_wrap > .asideRight .ex_keyword a{
  display: inline;
  color: #333333;
  text-decoration: none;
  padding: 0;
  }
#wrapper.ex_clumn2 > .content > .ex_clumn2_wrap > .asideRight .ex_keyword a:hover{
  color: #000000;
  text-decoration: underline;
  }

/* pager */
.pagenation{
  position: relative;
  overflow: hidden;
  padding: 25px 0 0 0;
  }
.pagenation > ul{
  position: relative;
  left: 50%;
  float: left;
  padding: 2px 0 0 0;
}
.pagenation ul li{
  position: relative;
  left: -50%;
  float: left;
  line-height: 1.0em
}
.pagenation ul li a{
  display: block
  }
.pagenation ul li{
  padding: 0 5px;
  }
.pagenation ul li a{
  display: block;
  width: 30px;
  height: 30px;
  padding: 6px 0 0 0;
  font-size: 16px;
  line-height: 1em;
  text-align: center;
  text-decoration: none;
  color: #000000;
  border: 1px solid #000000;
  background: #ffffff;
  }
.pagenation ul li a:hover{
  background: #000;
  color: #fff;
  }
.pagenation ul li.none{
  filter: alpha(opacity=20);
  -moz-opacity:0.2;
  opacity:0.2;
  }
.pagenation li.current a{
  color: #ffffff;
  border: 1px solid #000000;
  background: #000000;
  }

/*==================================================================
article Setting
==================================================================*/
#wrapper.ex_article > .content > .ex_top_Wrap{
  text-align: center;
  background-attachment: fixed;
  background-position: center -50%;
/*  background-repeat: repeat;*/
  }
#wrapper.ex_article > .content > .ex_top_Wrap > div{
  height: 155px;
  }
#wrapper.ex_article > .content > .ex_top_Wrap .parentTitle{
  font-size: 16px;
  line-height: 105%;
  text-align: center;
  font-weight: bold;
  padding: 20px 0 0 0;
  }
#wrapper.ex_article > .content > .ex_top_Wrap h1{
  font-size: 28px;
  line-height: 140%;
  text-align: center;
  font-weight: bold;
  padding: 10px 0 5px 0;
  }
#wrapper.ex_article > .content > .ex_top_Wrap h1 span{
  display: block;
  }
#wrapper.ex_article > .content > .ex_top_Wrap h1 span.s_text{
  font-size: 16px;
  }
#wrapper.ex_article > .content > .ex_top_Wrap > div > p{
  font-size: 12px;
  line-height: 1em;
  text-align: center;
  }


/* 隠しキーワードで色変更する */

#wrapper.ex_article > .content > .ex_top_Wrap > div.bgColorWhite{
  background-color:rgba(255, 255, 255, 0.5);
  }
#wrapper.ex_article > .content > .ex_top_Wrap > div.bgColorBlack{
  background-color:rgba(0, 0, 0, 0.5);
  }
#wrapper.ex_article > .content > .ex_top_Wrap > div.bgColorWhite h1{
  color: #000000;
  text-shadow: 1px 1px 1px #fff, 1px -1px 1px #fff, -1px 1px 1px #fff, 1px -1px 1px #fff;
  font-family: 'メイリオ',Meiryo,'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','ＭＳ Ｐゴシック',Helvetica,Arial,sans-serif;
  }
#wrapper.ex_article > .content > .ex_top_Wrap > div.bgColorBlack h1{
  color: #ffffff;
  text-shadow: 1px 1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000;
  }
#wrapper.ex_article > .content > .ex_top_Wrap > div.bgColorWhite p.ad_typ{
  color:#000000;
  font-weight:bold;
  text-shadow: 1px 1px 1px #fff, 1px -1px 1px #fff, -1px 1px 1px #fff, 1px -1px 1px #fff;
  }
#wrapper.ex_article > .content > .ex_top_Wrap > div.bgColorBlack p.ad_typ{
  color:#ffffff;
  font-weight:bold;
  text-shadow: 1px 1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000;
  }


/* header */
#wrapper.ex_article > .content main > .ex_clumn2_wrap > article > header{
  padding: 0 0 25px 0;
  }

/* info */
#wrapper.ex_article > .content main > .ex_clumn2_wrap > article > header > time{
  font-size: 12px;
  line-height: 105%;
  text-align: left;
  float: left;
  color: #666666;
  width: 100px;
  padding: 0 0 5px 0;
  }
#wrapper.ex_article > .content main > .ex_clumn2_wrap > article > header > address{
  font-size: 12px;
  line-height: 105%;
  float: right;
  text-align: right;
  color: #666666;
  font-style: normal;
  width: 400px;
  padding: 0 0 5px 0;
  }

/* SNS & Key word common*/
#wrapper.ex_article > .content main > .ex_clumn2_wrap > article > header > .socialButtons > p,
#wrapper.ex_article > .content main > .ex_clumn2_wrap > article > header > .ex_Keyword > p{
  float: left;
  display: block;
  width: 80px;
  text-align: center;
  padding: 5px 0 4px;
  background: #eeeeee;
  margin: 0 10px 0 0;
  font-size: 11px;
  line-height: 1.0em;
  }

/* SNS */
#wrapper.ex_article > .content main > .ex_clumn2_wrap > article > header > .socialButtons{
  clear: both;
  border-top: 1px solid #cccccc;
  border-bottom: 1px dotted #cccccc;
  padding: 5px 0;
  }

#wrapper.ex_article > .content main > .ex_clumn2_wrap > article > header > .socialButtons > div{
  float: right;
  width: 500px;
  padding: 0 0;
  margin: 0px 0 0 0;
  padding: 0px 0 0 0;
  font-size: 0px;
  line-height: 0%
  }
#wrapper.ex_article > .content main > .ex_clumn2_wrap > article > header > .socialButtons > div > ul > li{
  float: left;
  padding: 0 10px 0 0;
  }

/* Key word */
#wrapper.ex_article > .content main > .ex_clumn2_wrap > article > header > .ex_Keyword{
  clear: both;
  border-bottom: 1px solid #cccccc;
  padding: 5px 0;
  }
#wrapper.ex_article > .content main > .ex_clumn2_wrap > article > header > .ex_Keyword > ul{
  float: right;
  width: 500px;
  padding: 5px 0 0 0;
  margin: 0px 0 0 0;
  }
#wrapper.ex_article > .content main > .ex_clumn2_wrap > article > header > .ex_Keyword > ul > li{
  display: inline;
  margin: 0 10px 0 0;
  }
#wrapper.ex_article > .content main > .ex_clumn2_wrap > article > header > .ex_Keyword > ul > li > a{
  color: #666666;
  text-decoration: underline;
  }
#wrapper.ex_article > .content main > .ex_clumn2_wrap > article > header > .ex_Keyword > ul > li > a:hover{
  color: #666666;
  text-decoration: none;
  }

/* Next banner */
#wrapper.ex_article > .content main > .ex_clumn2_wrap > article > .articleBody > .ex_next_banner{
  text-align: center;
  padding: 25px 0 0 0;
  clear: both;
  }
#wrapper.ex_article > .content main > .ex_clumn2_wrap > article > .articleBody > .ex_next_banner a{
  display: block;
  font-weight: bold;
  font-size: 14px;
  color: #ffffff;
  padding: 15px 15px 13px 40px;
  width: 600px;
  margin: 0 auto;
  background-image: url(/images/mirakoto/2017/common_next_banner_arrow.png) ;
  background-repeat: no-repeat;
  background-position: 15px 15px;
  line-height: 1.4em;
  text-align: center;
  text-decoration: none;
  }
#wrapper.ex_article > .content main > .ex_clumn2_wrap > article > .articleBody > .ex_next_banner a:hover{
  color: #ffffff;
  background-image: url(/images/mirakoto/2017/common_next_banner_arrow.png) ;
  background-repeat: no-repeat;
  background-position: 15px 15px;
  text-decoration: none;
  }

/* footer */
#wrapper.ex_article > .content main > .ex_clumn2_wrap > article > .articleBody > .backnumber{
  margin: 30px 0 0 0;
  border-top: 1px dotted #333333;
  border-bottom: 1px dotted #333333;
  padding: 20px 0;
  font-size: 14px;
  line-height: 150%;
  }
#wrapper.ex_article > .content main > .ex_clumn2_wrap > article > .articleBody > .backnumber > p{
  padding: 5px 0 5px 20px;
  font-weight: bold;
  font-size: 14px;
  line-height: 1.8em;
  color: #333333;
  }
#wrapper.ex_article > .content main > .ex_clumn2_wrap > article > .articleBody > .backnumber > ul > li{
  }
#wrapper.ex_article > .content main > .ex_clumn2_wrap > article > .articleBody > .backnumber > ul > li > a{
  display: block;
  text-align: left;
  padding: 5px 0 5px 40px;
  word-wrap: break-word;
  }

/* BP CSS */

/* ------------------------------ *
  リード
 * ------------------------------ */
.ex_article .articleBody .bplead {
  border: 1px dotted #333333;
  padding: 20px;
  font-size: 16px;
  margin: 0 0 25px 0;
}
.ex_article .articleBody .bplead p{
  line-height: 1.8em;
  font-weight: bold;
  font-size: 14px
  }

/* ------------------------------ *
  中見出し
 * ------------------------------ */
.ex_article .articleBody > h3 {
  font-size: 21px;
  line-height: 140%;
  padding: 50px 0 15px 0;
  margin: 0 0 15px 0;
  border-bottom: 1px dotted #333333;
  clear: both;
  font-weight: bold;
}

/* ------------------------------ *
  小見出し
 * ------------------------------ */
.ex_article .articleBody > h4 {
  font-size: 16px;
  line-height: 140%;
  padding: 0 0 15px 0;
  margin: 0px 0 15px 0;
  border-bottom: 1px solid #eeeeee;
  clear: both;
  color: #000000;
  font-weight: bold;
}
/* ------------------------------ *
  地の文
 * ------------------------------ */
.ex_article .articleBody > p {
  font-size: 14px;
  line-height: 1.8em;
  padding: 0 0 25px 0;
  text-indent: 1em !important;
  color: #333333;
}

/* ------------------------------ *
  画像
 * ------------------------------ */
.ex_article .articleBody .bpimage_image {
margin-bottom:10px;
}
.ex_article .articleBody .bpimage_title + .bpimage_image {
margin-top:5px;
}

/* ------------------------------ *
  画像のキャプション
 * ------------------------------ */
.ex_article .articleBody .bpimage_title {
  font-weight: bold;
  padding: 0 0 0 0;
  text-align: left;
  margin: 0 auto;
  font-size: 12px;
  line-height: 150%;
  color: #666666;
}
.ex_article .articleBody .bpimage_caption {
  font-weight: bold;
  padding: 0 0 0 0;
  text-align: left;
  margin: 0 auto;
  font-size: 12px;
  line-height: 150%;
  color: #666666;
}
.ex_article .articleBody .bpimage_click {
  font-size: 12px;
  line-height: 1.5em;
  padding: 0px 0 0 0;
}
.ex_article .articleBody .bpimage_click a{
  text-decoration: underline;
  }
.ex_article .articleBody .bpimage_click a:hover{
  text-decoration: none;
  }
/* ------------------------------ *
  図（回り込み：左）右配置
 * ------------------------------ */
.ex_article .articleBody .bpimage_right {
  float: right;
/*  padding: 5px 0 20px 25px;*/
  margin: 5px 0 20px 25px;
  width: 320px;
}
.ex_article .articleBody .bpimage_right img,
.ex_article .articleBody .bpimage_left img{
/*  width: 294px;*/
  height: auto;
  padding: 2px;
  border: 1px solid #cccccc;
  }
.ex_article .articleBody .bpimage_right .bpimage_title,
.ex_article .articleBody .bpimage_left .bpimage_title {
  font-weight: normal;
  padding: 0 0 0 0;
  text-align: left;
  margin: 0 auto;
  font-size: 12px;
  line-height: 150%;
  color: #666666;
}
.ex_article .articleBody .bpimage_right .bpimage_caption,
.ex_article .articleBody .bpimage_left .bpimage_caption {
  font-weight: normal;
  padding: 0 0 0 0;
  text-align: left;
  margin: 0 auto;
  font-size: 12px;
  line-height: 150%;
  color: #666666;
}
/* ------------------------------ *
  図（回り込み：右）左配置
 * ------------------------------ */
.ex_article .articleBody .bpimage_left {
  float: left;
/*  padding: 5px 25px 20px 0px;*/
  margin: 5px 25px 20px 0px;
/*  width: 320px;*/
}


/* ------------------------------ *
  図（スタンダード）中央配置
 * ------------------------------ */
/*.articleBody .bpbox_center{ text-align:center; }*/
.ex_article .articleBody .bpimage_center {
/*  width: 550px;*/
  margin: 5px auto 30px;
  text-align: center
}
.ex_article .articleBody .bpimage_center .bpimage_image{
  text-align: center
  }
.ex_article .articleBody .bpimage_center .bpimage_image img {
  margin: 0 auto;
}

/* ------------------------------ *
  用語解説
 * ------------------------------ */
.ex_article .articleBody div.bpword {
  font-size: 14px;
  line-height: 1.8em;
  color: #666666;
  text-indent: 0em;
  padding: 0 0 25px 0;
  }

/* ------------------------------ *
  注釈
 * ------------------------------ */
.ex_article .articleBody div.bpannotation {
  font-size: 14px;
  line-height: 1.8em;
  color: #666666;
  text-indent: 0em;
  padding: 0 0 25px 0;
  }

/* ------------------------------ *
  参考文献
 * ------------------------------ */
.ex_article .articleBody div.bpreference {
  font-size: 14px;
  line-height: 1.8em;
  color: #666666;
  text-indent: 0em;
  padding: 0 0 25px 0;
  }



/* ------------------------------ *
  テーブル基本
 * ------------------------------ */
.ex_article .articleBody .bptable{
  width:600px;
  margin:10px auto 30px;
  overflow-x:auto;
}
.ex_article .articleBody .bptable table{
  width: 100%;
  background: #cccccc;
  border-collapse: separate;
  border-spacing: 1px;
  margin: 0 0 5px 0;
}

.ex_article .articleBody .bptable th,
.ex_article .articleBody .bptable td{
  padding: 10px 10px 8px;
  font-size: 12px;
  line-height: 150%;
  background: #ffffff;
}
.ex_article .articleBody .bptable th{
  text-align: center;
  background: #efefef;
}

.ex_article .articleBody .bptable_title {
  font-weight: bold;
  padding: 0 0 0 0;
  text-align: left;
  margin: 0 auto;
  font-size: 12px;
  line-height: 150%;
  color: #666666;
}
.ex_article .articleBody .bptable_caption {
  font-weight: bold;
  padding: 0 0 0 0;
  text-align: left;
  margin: 0 auto;
  font-size: 12px;
  line-height: 150%;
  color: #666666;
}
.ex_article .articleBody .bptable_title + table,
.ex_article .articleBody .bptable_caption + table{
margin-top:10px;
}

/* ------------------------------ *
  テーブル（イ）表左寄せ
 * ------------------------------ */
.ex_article .articleBody .bptable_left{
float:left;
clear:both;
margin:0 30px 10px 0;
}
/* ------------------------------ *
  テーブル（ウ）表右寄せ
 * ------------------------------ */
.ex_article .articleBody .bptable_right{
float:right;
clear:both;
margin:0 0 10px 30px;
}
/* ------------------------------ *
  テーブル（エ）表中央
 * ------------------------------ */
.ex_article .articleBody .bptable_center{
clear:both;
}

/* 20170531追記 */
/* ------------------------------ *
  囲み共通
 * ------------------------------ */
.ex_article .articleBody .bpbox{
width: auto;
clear: both;
margin: 30px 0;
}
.ex_article .articleBody .bpbox_title {
font-size: 16px;
line-height: 140%;
color: #ffffff;
padding: 10px 25px;
margin: 0 0 25px 0;
font-weight: normal;
}
.ex_article .articleBody .bpbox_text,
.ex_article .articleBody .bpbox_text p{
font-size: 14px;
line-height: 1.8em;
padding: 0 25px 25px 25px;
color: #333333;
}
.ex_article .articleBody .bpimage_left{
padding-left:  25px;
width: 200px;
}
.ex_article .articleBody .bpimage_right{
padding-right:  25px;
width: 200px;
}
.ex_article .articleBody .bpimage_left img,
.ex_article .articleBody .bpimage_right img{
  width: 100%;
  height: auto;
  margin: 0 auto;
}

/* ------------------------------ *
   囲み中見出し
 * ------------------------------ */
.ex_article .articleBody .bpbox_text h3{
font-size: 15px;
line-height: 140%;
color: #333333;
padding-bottom: 4px;
margin: 5px 25px 20px;
border-bottom: 1px dotted #333333;
font-weight: bold;
}

/* ------------------------------ *
   囲み小見出し
 * ------------------------------ */
.ex_article .articleBody .bpbox_text h4{
font-size: 14px;
line-height: 140%;
color: #333333;
margin: 5px 25px 20px;
font-weight: bold;
}

/*==================================================================
Search Setting
==================================================================*/
#wrapper.ex_search {
  background: url(/images/mirakoto/2017/top_img.jpg) repeat center -150px;
  background-attachment: fixed;
  }
#wrapper.ex_search  > .content main > .ex_clumn2_wrap > article > header > h1{
  font-size: 21px;
  line-height: 1.5em;
  color: #000000;
  border-bottom: 1px solid #000000;
  padding: 0 0 10px 0 ;
  margin: 0 0 1px 0;
  }
#wrapper.ex_search  > .content main > .ex_clumn2_wrap > article > .articleBody{
  border-top: 1px solid #000000;
  padding: 10px 0 0 0;
  }
#wrapper.ex_search  > .content main > .ex_clumn2_wrap > article > .articleBody > ul > li{
  padding: 15px 0 10px;
  border-bottom: 1px solid #000000;
  overflow: hidden;
  }
#wrapper.ex_search  > .content main > .ex_clumn2_wrap > article > .articleBody > ul > li > .ex_pic{
  float: left;
  width: 150px;
  }
#wrapper.ex_search  > .content main > .ex_clumn2_wrap > article > .articleBody > ul > li > .ex_pic img{
  width: 100%;
  height: auto;
  }
#wrapper.ex_search  > .content main > .ex_clumn2_wrap > article > .articleBody > ul > li > .ex_box{
  float: right;
  width: 430px;
  padding: 0 0 10px 0;
  }
#wrapper.ex_search  > .content main > .ex_clumn2_wrap > article > .articleBody > ul > li > .ex_box > h2{
  font-size: 12px;
  line-height: 1.0em;
  padding: 0 0 0 0;
  }
#wrapper.ex_search  > .content main > .ex_clumn2_wrap > article > .articleBody > ul > li > .ex_box > h3{
  font-size: 16px;
  line-height: 1.5em;
  padding: 8px 0;
  }
#wrapper.ex_search  > .content main > .ex_clumn2_wrap > article > .articleBody > ul > li > .ex_box > h3 a{
  text-decoration: underline;
  color: #333333;
  }
#wrapper.ex_search  > .content main > .ex_clumn2_wrap > article > .articleBody > ul > li > .ex_box > h3 a:hover{
  color: #999999;
  text-decoration: none;
  }
#wrapper.ex_search  > .content main > .ex_clumn2_wrap > article > .articleBody > ul > li > .ex_box > p{
  font-size: 12px;
  line-height: 1.5em;
  color: #666666;
  }
#wrapper.ex_search  > .content main > .ex_clumn2_wrap > article > .articleBody > ul > li > .ex_data{
  clear: both;
  border-top: 1px dotted #777777;
  padding: 10px 0 0 0;
  }
#wrapper.ex_search  > .content main > .ex_clumn2_wrap > article > .articleBody > ul > li > .ex_data > h4{
  float: left;
  display: block;
  width: 80px;
  text-align: center;
  padding: 5px 0 4px;
  background: #eeeeee;
  margin: 0 10px 0 0;
  font-size: 11px;
  line-height: 1.0em;
  font-weight: normal;
  }
#wrapper.ex_search  > .content main > .ex_clumn2_wrap > article > .articleBody > ul > li > .ex_data > p,
#wrapper.ex_search  > .content main > .ex_clumn2_wrap > article > .articleBody > ul > li > .ex_data > time{
  float: left;
  display: block;
  font-size: 13px;
  line-height: 1.0em;
  padding: 5px 20px 0 0;
  color: #333333;
  }
#wrapper.ex_search  > .content main > .ex_clumn2_wrap > article > .articleBody > ul > li > .ex_data > p a{
  text-decoration: underline;
  color: #333333;
  }
#wrapper.ex_search  > .content main > .ex_clumn2_wrap > article > .articleBody > ul > li > .ex_data > p a:hover{
  text-decoration: none;
  color: #999999;
  }
#wrapper.ex_search  > .content main > .ex_clumn2_wrap > article > .articleBody > .ex_ng_text{
  font-size: 16px;
  line-height: 180%;
  padding: 25px 0;
  }
#wrapper.ex_search  > .content main > .ex_clumn2_wrap > article > .articleBody > .ex_ng_text > a{
  color: #ff6600;
  text-decoration:  underline;
  }
#wrapper.ex_search  > .content main > .ex_clumn2_wrap > article > .articleBody > .ex_ng_text > a:hover{
  text-decoration:  none;
  }





/*==================================================================
拡大画像表示
==================================================================*/
.expand_content{
margin:15px auto;
display:block;
}
.expand_content .imgBox{
margin:0 auto;
}
.expand_content .imgBox .imgTitle{
margin:10px 10px 0;
font-size:14px;
font-weight:bold;
}
.expand_content .imgBox .imgCaption{
margin:10px 10px 0;
font-size:14px;
}
.expand_content .close{
margin:10px 0 0;
font-size:14px;
text-align:center;
}


/*==================================================================
20190325 / CSS追加
==================================================================*/
.ex_application_box{
  width: 1200px;
  border: 4px solid #fcee21;
  background-color: #ffffff;
  padding: 15px 230px 15px 230px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}
.ex_application_box .ex_text{
  font-size: 18px;
  font-weight:  bold;
  color: #333333;
}
.ex_application_box .ex_text span{
  font-size: 15px;
  display: block;
  margin-top: 5px;
}
.ex_application_box a{
  display: block;
    background: url(/images/mirakoto/2017/common_white_arrow2.png)no-repeat 60px 22px;
    background-size: 8px 14px;
  background-color: #38579a;
  width: 290px;
  font-size: 17px;
  color: #ffffff;
  padding: 17px 5px 9px 5px;
  border-radius: 4px;
  text-align: center;
  box-sizing: border-box;
  padding-left: 35px;
  line-height: 1.4em;
}
.ex_application_box a:hover{
    background: url(/images/mirakoto/2017/common_white_arrow2.png)no-repeat 60px 12px;
    background-size: 8px 14px;
  background-color: #000000;
}


.ex_application_box{
    width: 1200px;
    border: 4px solid #fcee21;
    background-color: #ffffff;
    padding: 15px 230px 15px 230px;
    display: flex;
    justify-content: space-between;
    margin: auto;
    margin-bottom: 15px;
}
@media screen and (max-width: 1200px) {
  .ex_application_box{
  width: 900px;
  padding: 15px 60px 15px 60px;
  }
}


.ex_article .ex_application_box{
  margin-top: 20px;
}

.ex_article .asideBottom > div > ul{
  border-bottom: 1px solid #999999;
}

.ex_application_box .ex_text{
  font-size: 18px;
  font-weight:  bold;
  color: #333333;
}
.ex_application_box .ex_text span{
  font-size: 15px;
  display: block;
  margin-top: 5px;
}
.ex_application_box a{
  display: block;
    background: url(/images/mirakoto/2017/common_white_arrow2.png)no-repeat 60px 22px;
    background-size: 8px 14px;
  background-color: #38579a;
  width: 290px;
  font-size: 17px;
  color: #ffffff;
  padding: 17px 5px 9px 5px;
  border-radius: 4px;
  text-align: center;
  box-sizing: border-box;
  padding-left: 35px;
  line-height: 1.4em;
}
.ex_application_box a:hover{
    background: url(/images/mirakoto/2017/common_white_arrow2.png)no-repeat 60px 22px;
    background-size: 8px 14px;
  background-color: #000000;
}
.ex_top .ex_content_box {
  margin-bottom: 40px;
}
.ex_banner_area{
  width: 300px;
}
.ex_banner_area a:hover{
  opacity: 0.5;
}
.ex_banner_area{
  margin-top: 30px;
}

.ex_about h1{
  font-size: 30px;
  color: #ffffff;
  line-height: 1.6em;
}
#wrapper.ex_about > .content > article > .articleBody > p{
  text-align: center;
}
#wrapper.ex_about > .content > article > .articleBody > p strong{
  font-size: 21px;
  color: #fcee21;
}
#wrapper.ex_about > .content > article > .articleBody > a{
  display: block;
  background: url(/images/mirakoto/2017/common_black_arrow.png) no-repeat 153px 34px;
  background-color: #ff7f00;
  color: #ffffff;
  font-size: 21px;
  font-weight: bold;
  text-align: center;
  padding: 35px 0 10px 30px;
  width: 510px;
  height: 80px;
  margin: auto;
  box-sizing: border-box;
  border-radius: 4px;
}
#wrapper.ex_about > .content > article > .articleBody > a:hover{
  background: url(/images/mirakoto/2017/common_black_arrow.png) no-repeat 153px 34px;
  background-color: #000000;
}
#wrapper.ex_top .ex_top_category a{
  margin-right: 10px;
}

.ex_article .ex_application_box{
  background-color: #000000;
}
.ex_article .ex_application_box .ex_text{
  color: #ffffff;
}
.ex_article .ex_application_box a{
  background: url(/images/mirakoto/2017/common_black_arrow.png) no-repeat 45px 22px!important;
  background-color: #ffffff!important;
  font-weight: bold;
  color: #000000;
}



/*==================================================================
20190405 / CSS追加
==================================================================*/
.ex_article .articleBody .ex_login_box .cover{
  position: absolute;
  top:-180px;
  left: 0px;
}

.ex_article .articleBody .ex_login_box{
  width: 600px;
  border-top: 3px solid #b3b3b3;
  position: relative;
}
.ex_article .articleBody .ex_login_box .ex_ty1{
  color: #000000;
  font-size: 18px;
  text-align: center;
  margin: 20px 0 20px 0;
  font-weight: bold;
  line-height: 1.6em;
}
.ex_article .articleBody .ex_login_box .ex_flex{
  display: flex;
  justify-content: space-between;
}
.ex_article .articleBody .ex_login_box .ex_flex .ex_box{
  width: 290px;
}

.ex_article .articleBody .ex_login_box .ex_flex .ex_box .ex_box_ty1{
  font-size: 14px;
  text-align: center;
  display: block;
  background: url(/images/mirakoto/2017/reg_icon.png)bottom center no-repeat;
  background-size: 20px 10px;
  padding-bottom: 10px;
  margin-bottom: 3px;
}
.ex_article .articleBody .ex_login_box .ex_flex .ex_box .ex_box_ty1 span{
  background-color: #f2f2f2;
  display: block;
  padding: 8px 0 7px 0;
}
.ex_article .articleBody .ex_login_box .ex_flex .ex_box a{
  padding: 23px 0 20px 0;
  color: #ffffff;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  border-radius: 3px;
  line-height: 1em;
  text-decoration: none;
  display: block;
  width: 100%;
  background: url(/images/mirakoto/2017/reg_arrow.png)no-repeat 90px 18px;
  background-size: 22px 22px;
  border-bottom: #f15a24 3px solid;
  background-color: #ff931e;
  padding-left: 40px;
}
.ex_article .articleBody .ex_login_box .ex_flex .ex_box:nth-child(1) a{
  background: url(/images/mirakoto/2017/reg_arrow.png)no-repeat 90px 18px;
  background-size: 22px 22px;
  border-bottom: #f15a24 3px solid;
  background-color: #ff931e;
}
.ex_article .articleBody .ex_login_box .ex_flex .ex_box:nth-child(2) a{
  background: url(/images/mirakoto/2017/reg_arrow.png)no-repeat 65px 18px;
  background-size: 22px 22px;
  border-bottom: #1b3a70 3px solid;
  background-color: #37579a;
}
.ex_article .articleBody .ex_login_box .ex_flex .ex_box a:hover{
  opacity: 0.5;
}
#wrapper.ex_top > .content > article > .articleBody .ex_key_icon{
  position: absolute;
  top: 12px;
  right: 12px;
}
#wrapper.ex_top > .content > article > .articleBody .ex_key_icon img{
  width: 20px;
  height: 30px;
}
#wrapper.ex_top > .content > article > .articleBody .ex_ranking_box .ranking ol li .ex_key_icon{
  position: absolute;
  top: 7px;
  left: 50px;
}
#wrapper.ex_top > .content > article > .articleBody .ex_ranking_box .ranking ol li .ex_key_icon img{
  width: 20px;
  height: 30px;
}


/*==================================================================
20190412 / CSS追加
==================================================================*/

#wrapper > header > div > .ex_r_data > .ex_top_login_box{
  float: left;
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px dotted #ffffff;
}
#wrapper > header > div > .ex_r_data > .ex_top_login_box a{
  width: 90px;
  padding: 10px 0 8px 0;
  display: block;
  border-radius: 3px;
  font-size: 13px;
  color: #ffffff;
  text-align: center;
  line-height: 1em;
  text-decoration: none;
  float: left;
  box-sizing: border-box;
  padding-left: 20px;
}
#wrapper > header > div > .ex_r_data > .ex_top_login_box a:nth-child(1){
  background: url(/images/mirakoto/2017/login_icon.png)no-repeat 8px 6px;
  background-size: 16px 18px;
  background-color: #ff931e;
  margin-right: 5px;

}
#wrapper > header > div > .ex_r_data > .ex_top_login_box a:nth-child(2){
  background: url(/images/mirakoto/2017/registration_icon.png)no-repeat 8px 6px;
  background-size: 18px 18px;
  background-color: #37579a;
}
#wrapper > header > div > .ex_r_data > .ex_top_login_box a:hover,
#wrapper > header > div > .ex_r_data > .ex_top_logout_box a:hover{
  opacity: 0.5;
}

#wrapper > header > div > .ex_r_data > .ex_top_logout_box{
  float: left;
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px dotted #ffffff;
}
#wrapper > header > div > .ex_r_data > .ex_top_logout_box a{
  width: 185px;
  padding: 10px 0 8px 0;
  display: block;
  border-radius: 3px;
  font-size: 13px;
  color: #ffffff;
  text-align: center;
  line-height: 1em;
  text-decoration: none;
  float: left;
  box-sizing: border-box;
  padding-left: 15px;
  background: url(/images/mirakoto/2017/logout_icon.png)no-repeat 45px 6px;
    background-size: 18px 18px;
    background-color: #b3b3b3;

}
.ex_content_box .ex_data h3.ex_keyon::after{
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 25px;
    background: url(/images/mirakoto/2017/icon_key.svg) no-repeat;
    background-size: 20px 20px;
}

#wrapper.ex_top > .content > article > .articleBody .ex_ranking_box .ex_keyon::after{
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 25px;
    background: url(/images/mirakoto/2017/icon_key.svg) no-repeat;
    background-size: 20px 20px;
}

@media screen and (max-width: 850px) {
  #wrapper > header > div > .ex_r_data > .ex_top_login_box{
    float: left;
  }
  #wrapper > header > div > .ex_r_data {
    float: right;
    width: 390px;
    padding: 3px 0 0 0;
  }
}

/*==================================================================
20191018 / CSS追加
==================================================================*/

.ex_box .ex_iconbox{
	position: absolute;
	bottom: 30px;
	left: 10px;
	z-index: 1000;
}
.ex_box .ex_iconbox .ex_icon{
    background-color: #ffffff;
    font-size: 11px;
	line-height: 1em;
    display: inline-block;
	text-decoration: none;
    padding: 7px 7px 5px 33px;
  float: left;
	margin-right: 10px;
    margin-bottom: 5px;
	color: #ff7f00;
	border-radius: 5px;
	line-height: 1.3em;
}
.ex_box .ex_iconbox .ex_icon.ex_icon1{
	background: url("/images/mirakoto/2017/topcontent_icon1.svg") no-repeat;
	background-size: 23px 18px;
	background-position: 5px center;
	background-color: #ffffff;
	display: inline-block;
	width: auto!important;
	color: #d30d20;
	border: 1px solid #d30d20;
	pointer-events:none;
}
.ex_box .ex_iconbox .ex_icon.ex_icon2{
	background: url("/images/mirakoto/2017/topcontent_icon2.svg") no-repeat;
	background-size: 32px 17px;
	background-position: 6px center;
	padding-left: 42px;
	background-color: #ffffff;
	display: inline-block;
	width: auto!important;
	color: #3aba55;
	border: 1px solid #3aba55;
	pointer-events:none;
}
.ex_box .ex_iconbox .ex_icon.ex_icon3{
	background: url("/images/mirakoto/2017/topcontent_icon3.svg") no-repeat;
	background-size: 17px 32px;
	background-position: 9px center;
	background-color: #ffffff;
	display: inline-block;
	width: auto!important;
	color: #13257f;
	border: 1px solid #13257f;
	pointer-events:none;
}
.ex_box .ex_iconbox .ex_icon:hover{
	background-color: #dddddd;
}