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

/*==================================================================
sp_topbox_setting
==================================================================*/
.ex_pc{
  display: none;
}
/*==================================================================
sp_JS_setting
==================================================================*/
.ex_pb10{
  padding-bottom: 5px!important;
}
.ex_mb0{
  margin-bottom: 0px!important;
}
.ex_display_on{
  display: block!important;
}
/*==============================================
社会デザイン研究
==============================================*/
/* カテゴリーTOP */
.category .design .ex_top_Wrap{
  background-attachment: fixed;
  background-position: center 0;
  }

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

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

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

/*==============================================
未来への階段
==============================================*/
/* カテゴリーTOP */
.ex_category_mirai{
  background-attachment: fixed;
  background-position: right 0;
  /* background-size: 100% auto */
  }

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

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

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

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

/*==================================================================
sp_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_PC{
  display: none !important;
  }

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

/*==============================================
header setting
==============================================*/
#wrapper > header {
  background: #000000;
  text-align: center
  }
#wrapper > header > div{
  width: auto;
  margin: 0 auto;
  padding: 8px 5px 8px 10px;
  }
/* top_catgory */
.ex_top_category{
  display: none;
}
/* logo */
#wrapper > header > div > .siteLogo{
  float: left;
  padding: 2px 0 0 0;
  }
#wrapper > header > div > .siteLogo img{
  width: 160px;
  height: auto;
  margin-top: 5px;
  }
/* keyword_box */
.ex_top_keyword_box{
  background-color: #ffffff;
}
/* right data */
#wrapper > header > div > .ex_r_data{
  float: right;
  width: 170px;
  padding: 0 0 0 0;
  }
#wrapper > header > div > .ex_r_data > .searchBox{
  display: none;
  }
#wrapper > header > div > .ex_r_data > .searchBox > form > .ex_text{
  float: left;
  font-size: 13px;
  line-height: 1em;
  height: 27px;
  padding: 5px 0 0 8px;
  width: 110px;
  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: 40px;
    height: 27px;
    background: #FF7F00 url(/images/mirakoto/2017/common_search_btn.png) no-repeat center 5px;
  background-size: 15px auto
  }

#wrapper > header > div > .ex_r_data > .ex_about_link{
  display: none;
  }
#wrapper > header > div > .ex_r_data > .ex_facebook{
  display: none;
  }


/*==============================================
footer setting
==============================================*/
/*======= 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: 50%;
  }
#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;
}

/*======= copyright-top =======*/
#wrapper > footer{
  color: #333333;
  line-height: 1.4em;
  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 20px 0 20px;
  text-align: center;
  }
#wrapper > footer > .localFooter p{
  text-align: center;
  line-height: 1.4em;
  }
#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: 200px;
  height: auto;
  margin: 0 auto;
  }
#wrapper > footer > .ex_box > .ex_top_copyright_top{
  text-align: center;
  line-height: 1.4em;
  padding: 0 20px;
  }

/*======= copyright-under =======*/
#wrapper > footer > .copyright{
  margin: 25px 0 0 0;
  background: #000000;
  text-align: center;
  color: #ffffff;
  padding: 15px 0 30px;
  }
/*==============================================
parts setting
==============================================*/
/*======= RELATED LINKS =======*/
.asideBottom{
  background: #ffffff;
  text-align: center;
  }
.asideBottom > h2{
  background: #000000;
  text-align: center;
  padding: 10px 0;
  font-size: 0px;
  line-height: 0%;
  margin: 0 0 25px 0;
  }
.asideBottom > h2 > img{
  margin: 0 auto;
  width: auto;
  height: 10px;
  font-size: 0px;
  line-height: 0%;
  }
.asideBottom > div > ul > li{
  width: 100%;
  text-align: center;
  padding: 0 0 0 0;
  margin: 0 0 20px 0;
  border-bottom: 1px dotted #000000;
  }
.asideBottom > div > ul > li:last-child{
  width: 100%;
  text-align: center;
  padding: 0 0 20px 0;
  margin: 0;
  border-bottom: none;
  }
.asideBottom > div > ul > li:nth-child(2) .ex_data{}
.asideBottom > div > ul > li a.thumnail {
  display: block;
  overflow: hidden;
  width: 300px;
  text-decoration: none;
  margin: 0 auto;
}
.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;
  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_top .ex_vd_box{
  /*background: url(/images/mirakoto/2017/top_ami.png) repeat 0 0; 2021削除*/
  }
.ex_top #wrapper{
  background: #ffffff;
  }
/* main ttl */
#wrapper.ex_top > .content > article .siteLogo{
  padding: 30px 0 20px 0;
  text-align: center;
  }
#wrapper.ex_top > .content{
  /*background:url(../../../../images/mirakoto/2017/top_sp_topimg.jpg)no-repeat center 0px 2021削除*/
}
#wrapper.ex_top > .content > article .siteLogo img{
  margin: 0 auto;
  width: 240px;
  height: auto;
  }
  .ex_top .ex_content_box{
  margin: 0 auto;
  }
#wrapper.ex_top > .content > article .ex_siteLogo_text{
  font-size: 11px;
  text-align: center;
  line-height: 1.8em;
  color: #ffffff;
  padding-bottom: 35px;
  font-weight: bold;
}

/* panel list */
#wrapper.ex_top > .content > article > .articleBody{
  margin: 0 auto;
  }
#wrapper.ex_top > .content > article .articleBody,
#wrapper.ex_top > .content > article .articleBody .ex_content_box{
  width: 100%;
  background-color: #ffffff;
  }
#wrapper.ex_top > .content > article > .articleBody > .ex_content_box > .ex_btn_box > ul > li{
  text-align: center;
  border-bottom: 1px dotted #000000;
  padding-bottom: 0px;
  margin-bottom: 20px;
  }
#wrapper.ex_top > .content > article > .articleBody .ex_new_icon_box{
  width: 300px;
  margin: 0 auto;
  position: relative;
  height: 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;
  }
#wrapper.ex_top > .content > article .articleBody{
  padding: 0 0 15px 0;
  }
#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;
  }
#wrapper.ex_top > .content > article > .articleBody h2 img{
  height: 11px;
}

/* AD banner */
#wrapper.ex_top > .content > article > .articleBody .dag_box{
  width: 300px;
  margin: 0 auto;
  }
#wrapper.ex_top > .content > article > .articleBody .dag_banner{
  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: 14px !important;
  line-height: 150% !important;
  width: 300px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  }



/* top panel setting */
#wrapper.ex_top > .content > article > .articleBody > .ex_content_box > .ex_btn_box > ul > li{
  border-bottom: 1px dotted #000000;
  padding-bottom: 25px;
  margin-bottom: 30px;
  }
#wrapper.ex_top > .content > article > .articleBody > .ex_content_box > .ex_btn_box > ul > li:nth-child(4){
  border-bottom: none;
  padding-bottom: 20px;
  margin-bottom: 10px;
}
#wrapper.ex_top > .content > article > .articleBody > .ex_content_box > .ex_btn_box > ul > li:nth-child(5){
  border-bottom: none;
  padding-bottom: 10px;
  margin-bottom: 0px;
}
#wrapper.ex_top > .content > article > .articleBody > .ex_content_box > .ex_btn_box .ex_w66{
  display: none;
  }
#wrapper.ex_top > .content > article > .articleBody > .ex_content_box > .ex_btn_box .ex_w33{

  }

#wrapper.ex_top > .content > article > .articleBody > .ex_content_box > li .ex_data{
  box-sizing: border-box;
  }


#wrapper.ex_top > .content > article > .articleBody .ex_btn_box a.ex_thumnail {
  display: block;
  overflow: hidden;
  width: 300px;
  margin: 0 auto;
  text-decoration: none;
}


#wrapper.ex_top > .content > article > .articleBody .ex_btn_box .ex_sp_wrapper li{
  width: 50%;
  display: block;
}
#wrapper.ex_top > .content > article > .articleBody .ex_btn_box .ex_sp_wrapper a{
  width: 100%;
}

#wrapper.ex_top > .content > article > .articleBody .ex_btn_box .ex_sp_wrapper li:nth-child(odd){
  border-right: 1px solid #e6e6e6;
}


#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:#f2f2f2;
  padding: 15px 25px 20px 25px;
  text-align: center;
}
.ex_top_keyword_box .ex_wrapper ul{
  display: flex;
  flex-wrap: wrap;
  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: 7px 12px 4px 12px;
  color: #000000;
  text-decoration: none;
  font-size: 12px;
  margin-left: 10px;
  margin-bottom: 10px;
  font-weight: bold;
}
.ex_top_keyword_box .ex_wrapper li:nth-child(8),
.ex_top_keyword_box .ex_wrapper li:nth-child(9),
.ex_top_keyword_box .ex_wrapper li:nth-child(10),
.ex_top_keyword_box .ex_wrapper li:nth-child(11),
.ex_top_keyword_box .ex_wrapper li:nth-child(12),
.ex_top_keyword_box .ex_wrapper li:nth-child(13),
.ex_top_keyword_box .ex_wrapper li:nth-child(14),
.ex_top_keyword_box .ex_wrapper li:nth-child(15),
.ex_top_keyword_box .ex_wrapper li:nth-child(16),
.ex_top_keyword_box .ex_wrapper li:nth-child(17),
.ex_top_keyword_box .ex_wrapper li:nth-child(18),
.ex_top_keyword_box .ex_wrapper li:nth-child(19),
.ex_top_keyword_box .ex_wrapper li:nth-child(20),
.ex_top_keyword_box .ex_wrapper li:nth-child(21),
.ex_top_keyword_box .ex_wrapper li:nth-child(22),
.ex_top_keyword_box .ex_wrapper li:nth-child(23),
.ex_top_keyword_box .ex_wrapper li:nth-child(24){
  display: none;
}
.ex_top_keyword_box .ex_wrapper ul{
  margin-bottom: 10px;
}

.ex_sp_keyword_box_text{
  font-size: 11px;
  text-align: center;
  text-decoration: underline;
  color: #000000;
  background: url(../../../../images/mirakoto/2017/sp_keyword_box_arrow.png) no-repeat 1px 3px;
  background-size: 14px 10px;
  padding-left: 18px;
  font-weight: bold;
  cursor: pointer;
  margin-top: 20px;
}

.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;
  margin-top: 0px;
}
.ex_content_box .ex_btn_box .ex_box:first-child {
  margin-top: 0px;
}
.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 {
}
.ex_content_box  a:hover > .ex_box .ex_cap {
}

.ex_content_box .ex_data{
  color: #000000;
  font-size: 12px;
  line-height: 150%;
  padding: 16px 20px 0px 20px;
  background: #ffffff ;
  }
.ex_sp_wrapper .ex_data{
  padding: 0px 20px 20px 20px;
  position: relative;
}
.ex_sp_wrapper li:last-child,
.ex_sp_wrapper li:nth-child(15){
  display: none;
}
.ex_btn_box ul li:nth-child(2){
  margin-top: 20px;
}
.ex_sp_wrapper li:nth-child(2){
  margin-top: 0px!important;
}
.ex_sp_wrapper{
  display: flex;
   flex-wrap: wrap;
}


.ex_content_box .ex_category{
  position: absolute;
  width: 100%;
  left: 0px;
  bottom: 0px;
  z-index: 10000;
  background: #ffffff;
  font-size: 11px;
  line-height: 150%;
  color: #ffffff;
  padding: 10px 20px 7px;
  font-weight: normal;
  }
.ex_sp_wrapper .ex_content_box .ex_category{
  padding: 5px 20px 0;
}
.ex_content_box .ex_data h3{
  font-size: 18px;
  line-height: 150%;
  padding: 0 0 10px 0;
  font-weight: normal;
  }
.ex_sp_wrapper .ex_data h3{
  font-size: 13px;
  font-weight: bold;
}
.ex_content_box .ex_data a h3{
  text-decoration: underline !important;
}
.ex_content_box .ex_data .ex_data2{
  font-size: 11px;
  line-height: 105%;
  }

.ex_content_box .ex_data .ex_data2 .ex_keyword_name{
  bottom: 35px;
  left: 20px;
  color: #666666;
  line-height: 1.4em;
  width: 75%;
  float: left;
  margin-bottom: 10px;
  }
.ex_content_box .ex_data .ex_data2 .ex_keyword_name a{
  text-decoration: none;
  color: #000000;
  display: inline-block;
}
.ex_content_box .ex_data .ex_data2 .ex_keyword_name a:hover{
  background-color: #000000;
  color: #ffffff;
}
.ex_sp_wrapper .ex_keyword_name{
  bottom: 35px;
  left: 20px;
  color: #666666;
  line-height: 1.4em;
  width: 100%!important;
  }
.ex_content_box .ex_data .ex_data2 .ex_keyword_name .ex_boxcategory{
  border: 1px solid #000000!important;
  border-radius: 5px;
  background-color: #ffffff;
  font-size: 11px;
  display:inline-block!important;
  padding: 5px 10px 5px 10px;
  width: auto!important;
  margin-right: 5px;
  margin-bottom: 9px;
}
.ex_content_box .ex_data .ex_data2 .ex_supported{
  font-size: 10px;
  line-height: 105%;
  margin-bottom:5px;
  margin-top: 3px;
}
.ex_content_box .ex_data .ex_data2 time{
  bottom: 10px;
  right: 10px;
  text-align: right;
  line-height: 1.4em;
  color: #666666;
  float: left;
  width: 25%;
}
.ex_sp_wrapper .ex_data .ex_data2 time{
  font-size: 10px;
  text-align: right;
  line-height: 1.4em;
  color: #666666;
  width: 100%;
}
/* Facebook common */
#wrapper.ex_top > .content > article > .articleBody .ex_facebook_box{
  box-sizing: border-box;
  border: 2px solid #ffffff;
  padding: 15px 0px 0px 0;
  text-align: center;
  font-size: 13px;
  line-height: 1.5em;
  color: #333333;
  margin: 0 auto;
  background-color:rgba(255,255,255,0.9);
  border-top: 1px solid #000000;
  }
#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 3px;
  background-size: 10px auto;
  padding: 0 0 0 20px;
  font-weight: bold;
  }
#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: #ffffff;
  height: auto;
  text-align: center
  }
#wrapper.ex_top > .content > article > .articleBody .ex_keyword_box{
  display: none;
}
#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;

  margin: 0 auto;
  }


#wrapper.ex_top > .content > article > .articleBody .ex_keyword_box .ex_keyword{
  padding: 10px 0 0 0;
  margin: 0 auto;
  }
#wrapper.ex_top > .content > article > .articleBody .ex_ranking_box .ranking a,
#wrapper.ex_top > .content > article > .articleBody .ex_keyword_box .ex_keyword a{
  text-decoration: underline !important;
  }

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

#wrapper.ex_top > .content > article > .articleBody .ex_ranking_box .ex_category_color4{
  font-size: 11px;
  color:#0A4D7D;
  font-weight: bold;
  margin-top: 15px;
  margin-bottom: 10px;
}
#wrapper.ex_top > .content > article > .articleBody .ex_ranking_box .ex_category_color5{
  font-size: 11px;
  color:#82CA00;
  font-weight: bold;
  margin-top: 15px;
  margin-bottom: 10px;
}
#wrapper.ex_top > .content > article > .articleBody .ex_ranking_box .ex_category_color6{
  font-size: 11px;
  color:#00C7A5;
  font-weight: bold;
  margin-top: 15px;
  margin-bottom: 10px;
}
#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: 15px;
  margin-bottom: 10px;
}
#wrapper.ex_top > .content > article > .articleBody .ex_ranking_box .ex_category_color8{
  font-size: 11px;
  color:#D90035;
  font-weight: bold;
  margin-top: 20px;
  margin-bottom: 10px;
  margin-bottom: 10px;
}
#wrapper.ex_top > .content > article > .articleBody .ex_ranking_box .ex_title{
  font-size: 13px;
  line-height: 19px;
  margin-right: 20px;
  margin-bottom: 10px;
  font-weight: bold;
}
#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%;
  border-bottom: 1px dotted #999999;
  height: auto;
  }
#wrapper.ex_top > .content > article > .articleBody .ex_ranking_box .ranking ol li:last-child{
  border-bottom: none;
  }
#wrapper.ex_top > .content > article > .articleBody .ex_ranking_box .ranking li a{
  background-repeat: no-repeat;
  background-position: 20px 12px;
  background-size: 20px 20px;
  z-index: 1;
  position: relative;
  text-decoration: 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: 20px;
  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: 20px;
  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: 20px;
  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: 20px;
  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: 20px;
  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 a{
  display: block;
  color: #333333;
  text-decoration: none;
  }
#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: 16px;
  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;
  padding: 0px 0 25px;
  }
#wrapper.ex_about > .content{
  height: auto;
  padding: 0;
  }
#wrapper.ex_about > .content > article > header > h1{
  text-align: center;
  padding: 50px 0 50px 0;
  }
#wrapper.ex_about > .content > article > header > h2{
  text-align: center;
  padding: 0 25px 50px 25px;
  font-size: 28px;
  color: #ffffff;
  line-height: 1.5em;
  text-shadow: 0px -1px #000, 1px 0px #000, 0px 1px #000, -1px 1px #000;
  }
#wrapper.ex_about > .content > article > header > h1 > img{
  width: 280px;
  height: auto;
  margin: 0 auto;
  }
#wrapper.ex_about > .content > article > .articleBody{
  padding: 0 0 25px 0;
  }
#wrapper.ex_about > .content > article > .articleBody > p{
  padding: 0 25px 30px 25px;
  color: #ffffff;
  font-size: 16px;
  line-height: 180%;
  display: block;
  text-shadow: 0px -1px #000, 1px 0px #000, 0px 1px #000, -1px 1px #000;
  text-align: left
  }
#wrapper.ex_about > .content > article > .articleBody > p > span{
  margin: 0 auto;
  text-align: left
  }
#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{
  text-align: center;
  padding: 40px 0 40px 0;
  }
#wrapper.ex_category > .content > article > header h1{
  text-align: center;
  font-size: 32px;
  line-height: 105%;
  padding: 0 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%;
  font-weight: bold;
  padding: 0 25px;
  text-align: left
  }

#wrapper.ex_category > .content > article > header .ex_lead2{
  font-size: 18px;
  line-height: 160%;
  font-weight: bolder;
  color: #000000;
  text-shadow: 1px 1px 1px #fff, 1px -1px 1px #fff,  -1px 1px 1px #fff, -1px -1px 1px #fff;
  padding: 0 25px;
  text-align: left
  }

/* banner list */
#wrapper.ex_category > .content > article > .articleBody{
  background: #ffffff;
  overflow: hidden;
  }
#wrapper.ex_category > .content > article > .articleBody > h2{
  background: #000000;
  text-align: center;
  padding: 10px 0;
  font-size: 0px;
  line-height: 0%;
  margin: 0 0 20px 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: 100%;
  margin: 0 0 25px 0;
  border-bottom: 1px dotted #000000
  }
#wrapper.ex_category > .content > article > .articleBody > div > ul > li > .ex_new_icon_box{
  position: relative;
  height: 0px;
  width: 300px;
  margin: 0 auto;
  }
#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;
  overflow: hidden;
  width: 300px;
  text-decoration: none;
  margin: 0 auto;
}
#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;
  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{
  display: none !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: 100%;
  background: #ffffff;
  }
#wrapper.ex_clumn2 > .content main > .ex_clumn2_wrap > article{
  padding: 0 15px;
  }
#wrapper.ex_clumn2 > .content > .ex_clumn2_wrap > .asideRight{
  text-align: center;
  border-top: 2px solid #000000;
  margin-top: 50px;
  }

/*======= Rght Clumn =======*/
#wrapper.ex_clumn2 > .content > .ex_clumn2_wrap > .asideRight{
  padding-bottom: 50px;
  text-align: center;
  padding: 0 25px 50px 25px;
  }
#wrapper.ex_clumn2 > .content > .ex_clumn2_wrap > .asideRight h2{
  font-size: 13px;
  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: 25px 0 35px 0;
  margin: 0 auto;
  width: 300px;
  }

/* 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: 13px;
  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 3px;
  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: 3px 3px;
  }
.pagenation ul li a{
  display: block;
  width: 38px;
  height: 38px;
  padding: 10px 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{
  filter: alpha(opacity=50);
  -moz-opacity:0.5;
  opacity:0.5;
  }
.pagenation ul li.none{
  filter: alpha(opacity=20);
  -moz-opacity:0.2;
  opacity:0.2;
  }
.pagenation li.current a{
  color: #ffffff;
  border: 2px solid #000000;
  background: #000000;
  }


/*==================================================================
article Setting
==================================================================*/
#wrapper.ex_article > .content > .ex_top_Wrap{
  text-align: center;
  background-position: center 50%;
  border-bottom: 5px solid #000000;
  margin: 0 0 25px 0;
  }
#wrapper.ex_article > .content > .ex_top_Wrap > div{
  background-attachment: fixed;
  padding: 25px 0 20px;
  }
#wrapper.ex_article > .content > .ex_top_Wrap .parentTitle{
  font-size: 16px;
  line-height: 105%;
  text-align: center;
  font-weight: bold;
  }
#wrapper.ex_article > .content > .ex_top_Wrap h1{
  font-size: 24px;
  line-height: 140%;
  text-align: center;
  font-weight: bold;
  padding: 10px 15px 5px 15px;
  }
#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;
  }
#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;
  }
#wrapper.ex_article > .content > .ex_top_Wrap > div.bgColorBlack p.ad_typ{
  color:#ffffff;
  }


/* 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;
  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{
  display: block;
  width: 100%;
  text-align: center;
  padding: 5px 0 3px;
  background: #eeeeee;
  margin: 0 0 5px 0;
  font-size: 10px;
  line-height: 1.0em;
  }

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

#wrapper.ex_article > .content main > .ex_clumn2_wrap > article > header > .socialButtons > div{
  float: left;
  padding: 0 0;
  margin: 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 5px 5px 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: left;
  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-block;
  margin: 0 10px 8px 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;
  margin: 0 auto;
  background-image: url(/images/mirakoto/2017/common_next_banner_arrow.png) ;
  background-repeat: no-repeat;
  background-position: 15px 18px;
  background-size: 14px auto;
  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 18px;
  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;
  }
#wrapper.ex_article > .content main > .ex_clumn2_wrap > article > .articleBody > .backnumber > p{
  padding: 5px 0 5px 0;
  font-weight: bold;
  font-size: 15px;
  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 20px;
  font-size: 15px;
  line-height: 150%;
  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: 15px
  }

/* ------------------------------ *
  中見出し
 * ------------------------------ */
.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: 15px;
  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 0;
/*
  width: 170px;
*/
}
.ex_article .articleBody .bpimage_right img,
.ex_article .articleBody .bpimage_left img{
/*
  width: 144px;
*/
  width: 100%;
  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 0 20px 0px;
/*
  width: 170px;
*/
}


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

/* ------------------------------ *
  スキルアップビデオの横幅調整
 * ------------------------------ */
.ex_article .articleBody .bpimage_image video{
  width:100% !important;
  height:auto !important;
}

/* ------------------------------ *
  youtubeの横幅調整
 * ------------------------------ */
.ex_article .articleBody .bpimage_center .bpimage_image iframe{
  width:100% !important;
  height:auto !important;
  }

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

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

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



/* ------------------------------ *
  テーブル基本
 * ------------------------------ */
.ex_article .articleBody .bptable{
  width:100%;
  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{
  width: 100%;
float: none;
text-align: center;
padding-right: 25px;
padding-left: 25px;
}
.ex_article .articleBody .bpimage_right{
width: 100% !important;
float: none;
text-align: center;
padding-right: 25px;
padding-left: 25px;
}
.ex_article .articleBody .bpimage_right .bpimage_image,
.ex_article .articleBody .bpimage_left .bpimage_image{
  text-align: center;
}
.ex_article .articleBody .bpimage_right .bpimage_image img,
.ex_article .articleBody .bpimage_left .bpimage_image img{
  width: 150px;
  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 {
  }
#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: 25px 0px 10px 0px ;
  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{
  padding: 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: right;
  width: 130px;
  padding: 0 0 20px 20px;
  }
#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{
  padding: 0 0 5px 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;
  clear: both;
  width: 80px;
  text-align: center;
  padding: 5px 0 4px;
  background: #eeeeee;
  margin: 0 10px 5px 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{
padding:10px;
}
.expand_content .imgBox{
margin:0 auto;
}
.expand_content .imgBox .img img{
width:100%;
height: auto;
}
.expand_content .imgBox .imgTitle{
margin:10px 0 0;
font-size:14px;
font-weight:bold;
}
.expand_content .imgBox .imgCaption{
margin:10px 0 0;
font-size:14px;
}
.expand_content .close{
margin:10px 0 0;
font-size:14px;
text-align:center;
}

/*==================================================================
SPコンテツカラー　セッティング
==================================================================*/
.ex_sp_wrapper .ex_robotics_bgcolor{
  background-color: #ffffff!important;
  color: #EA302C !important
}
.ex_sp_wrapper .ex_mirai_bgcolor{
  background-color: #ffffff!important;
  color: #FB7400 !important;
}
.ex_sp_wrapper .ex_food_bgcolor{
  background-color: #ffffff!important;
  color: #82CA00 !important;
}
.ex_sp_wrapper .ex_design_bgcolor{
  background-color: #ffffff!important;
  color: #473561 !important;
}
.ex_sp_wrapper .ex_city_bgcolor{
  background-color: #ffffff!important;
  color: #0A4D7D !important;
}
.ex_sp_wrapper .ex_wellness_bgcolor{
  color: #00C7A5 !important;
  background-color: #ffffff!important;
}
.ex_sp_wrapper .ex_buzzword_bgcolor{
  color: #0095D0 !important;
  background-color: #ffffff!important;
}
.ex_sp_wrapper .ex_tv_bgcolor{
  color: #D90035 !important;
  background-color: #ffffff!important;
}
.ex_sp_wrapper .ex_sports_bgcolor{
  color: #D90035 !important;
  background-color: #ffffff!important;
}
.ex_sp_wrapper .ex_global_bgcolor{
  color: #4fadc6 !important;
  background-color: #ffffff!important;
}
/*==================================================================
SP ハンバーガーメニュー
==================================================================*/
.drawer-hamburger,
.drawer-hamburger:hover{
  background-color: #ffffff;
  z-index: 100003;
}
.drawer-nav{
  z-index: 100001;
}
.drawer-nav .siteLogo img{
  width: 170px;
  padding: 10px 0 0 10px;
  margin-bottom: 25px;
}
.drawer-nav .ex_catgory_btn{
  display: block;
  width: calc(100% - 30px);
  padding: 15px 0 15px 0;
  color: #ffffff;
  font-size: 13px;
  text-align: center;
  background-color: rgba(255,255,255,0.15);
  text-decoration: none;
  margin: 0 15px 2px 15px;
}
.ex_search_box{
  border-top: 1px dotted #ffffff;
  margin: 15px 15px 0 15px;
  padding-bottom: 15px;
  padding-top: 15px;
}
.drawer-nav .ex_facebook img{
  width: 30px;
  height: 30px;
  margin-left: 20px;
}

.drawer-nav .ex_search_box .ex_text{
  float: left;
  font-size: 14px;
  line-height: 1em;
  height: 30px;
  padding: 3px 0 0 10px;
  width: calc(100% - 110px);
  background: #ffffff;
  border: none;
}
.drawer-nav .ex_search_box .ex_btn{
  float: left;
  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;
}

.drawer-open{
  position: fixed;
}


/*==================================================================
20190325 / CSS追加
==================================================================*/
#wrapper.ex_top > .content > article .articleBody{
  background: none;
}
.ex_application_box{
  width: auto;
  border: 4px solid #fcee21;
  background-color: #ffffff;
  padding: 15px 20px 15px 20px;
  margin-bottom: 15px;
}
.ex_application_box .ex_text{
  font-size: 18px;
  font-weight:  bold;
  color: #333333;
  text-align: center;
  margin-bottom: 15px;
}
.ex_application_box .ex_text span{
  font-size: 15px;
  display: block;
  margin-top: 5px;
}
.ex_application_box a{
  display: block;
    background: none;
  background-color: #38579a;
  width: 100%;
  font-size: 17px;
  color: #ffffff;
  padding: 11px 0;
  border-radius: 4px;
  text-align: center;
  box-sizing: border-box;
  line-height: 1em;
}
.ex_top .ex_content_box {
  margin-bottom: 10px;
}
.ex_banner_area{
  width: 300px;
  margin: auto;
}
.ex_banner_area a:hover{
  opacity: 0.5;
}
.ex_banner_area{
  margin-top: 30px;
}
.ex_about h1{
  font-size: 24px;
  color: #ffffff;
  line-height: 1.6em;
  padding: 50px 20px 50px 20px!important;
}
#wrapper.ex_about > .content > article > .articleBody > p{
  text-align: left;
}
#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_white_arrow.png) no-repeat 20% 25px;
  background-color: #ff7f00;
  width: calc(100% - 40px);
  color: #ffffff;
  font-size: 21px;
  font-weight: bold;
  text-align: center;
  padding: 25px 0 25px 30px;
  margin: auto;
  border-radius: 4px;
  margin-bottom: 30px;
}
.ex_article .ex_application_box{
  background-color: #000000;
}
.ex_article .ex_application_box .ex_text{
  color: #ffffff;
}
.ex_article .ex_application_box a{
  background: none;
  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: 100%;
  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{

}
.ex_article .articleBody .ex_login_box .ex_flex .ex_box{
  width:calc(100%);
  margin: auto;
}

.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: 2px;
}
.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;
}
.ex_article .articleBody .ex_login_box .ex_flex .ex_box:nth-child(1) a{
  background: url(/images/mirakoto/2017/reg_arrow.png)no-repeat 20px 18px;
  background-size: 22px 22px;
  border-bottom: #f15a24 3px solid;
  background-color: #ff931e;
  margin-bottom: 15px;
}
.ex_article .articleBody .ex_login_box .ex_flex .ex_box:nth-child(2) a{
  background: url(/images/mirakoto/2017/reg_arrow.png)no-repeat 20px 18px;
  background-size: 22px 22px;
  border-bottom: #1b3a70 3px solid;
  background-color: #37579a;
}
#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: 60px;
}
#wrapper.ex_top > .content > article > .articleBody .ex_ranking_box .ranking ol li .ex_key_icon img{
  width: 20px;
  height: 30px;
  z-index: 1000;
}

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

.drawer-nav .ex_top_login_box{
  width: calc(100% - 30px);
  margin: auto;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;

}
.drawer-nav .ex_top_login_box a{
  width: 50%;
  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: 5%;
}
.drawer-nav .ex_top_login_box a:nth-child(1){
  background: url(/images/mirakoto/2017/login_icon.png)no-repeat 30% 6px;
  background-size: 16px 18px;
  background-color: #ff931e;
  margin-right: 5px;

}
.drawer-nav .ex_top_login_box a:nth-child(2){
  background: url(/images/mirakoto/2017/registration_icon.png)no-repeat 30% 6px;
  background-size: 18px 18px;
  background-color: #37579a;
}

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

#wrapper > header > div > .ex_r_data > .ex_top_login_box{
  float: left;
}
#wrapper > header > div > .ex_r_data > .ex_top_login_box a{
  padding: 10px 4px 8px 4px;
  display: block;
  border-radius: 3px;
  font-size: 11px;
  color: #ffffff;
  text-align: center;
  line-height: 1em;
  text-decoration: none;
  float: left;
  box-sizing: border-box;
  padding-left: 19px;
}
#wrapper > header > div > .ex_r_data > .ex_top_login_box a:nth-child(1){
  background: url(/images/mirakoto/2017/login_icon.png)no-repeat 5px 9px;
  background-size: 10px 11px;
  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 5px 9px;
  background-size: 11px 11px;
  background-color: #37579a;
}

#wrapper > header > div > .ex_r_data > .ex_top_logout_box{
  float:right;
}
#wrapper > header > div > .ex_r_data > .ex_top_logout_box a{
  width: 95px;
  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 3px 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;
}


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

.ex_iconbox{
	position: absolute;
	bottom: 40px;
	left: 10px;
	z-index: 1000;
}
.ex_iconbox .ex_icon{
	border: 1px solid #ff7f00;
    background-color: #ffffff;
    font-size: 10px;
	line-height: 1em;
    display: inline-block;
	text-decoration: none;
    padding: 27px 3px 5px 3px;
	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 13px;
	background-position:center 8px;
	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 12px;
	background-position:center 8px;
	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: 18px 19px;
	background-position:center 3px;
	background-color: #ffffff;
	display: inline-block;
	width: auto!important;
	color: #13257f;
	border: 1px solid #13257f;
	pointer-events:none;
}
.ex_iconbox .ex_icon:hover{
	background-color: #dddddd;
}

/* ex_sp_wrapper */

.ex_sp_wrapper li .ex_iconbox{

}

/* top keyword */
.topKeyword .topKeywordList li:nth-child(8),
.topKeyword .topKeywordList li:nth-child(9),
.topKeyword .topKeywordList li:nth-child(10),
.topKeyword .topKeywordList li:nth-child(11),
.topKeyword .topKeywordList li:nth-child(12),
.topKeyword .topKeywordList li:nth-child(13),
.topKeyword .topKeywordList li:nth-child(14),
.topKeyword .topKeywordList li:nth-child(15),
.topKeyword .topKeywordList li:nth-child(16),
.topKeyword .topKeywordList li:nth-child(17),
.topKeyword .topKeywordList li:nth-child(18),
.topKeyword .topKeywordList li:nth-child(19),
.topKeyword .topKeywordList li:nth-child(20),
.topKeyword .topKeywordList li:nth-child(21),
.topKeyword .topKeywordList li:nth-child(22),
.topKeyword .topKeywordList li:nth-child(23),
.topKeyword .topKeywordList li:nth-child(24){
  display: none;
}