/*
* 衆院補選バナー
*/
/*
* 注目の選挙
*/
.attention__list {
  box-sizing: border-box;
}
.attention__list__col {
  box-sizing: border-box;
  background: #f0f0f0;
  border-radius: 4px;
  box-shadow: inset -1px -1px 0px 0px rgba(0,0,0,0.1);
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.attention .kao {
  position: relative;
  overflow: hidden;
  border-right: solid 1px #e5e5e4;
  border-left: solid 1px #e5e5e4;
}
.attention .kao img {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.attention .info {
  text-align: center;
  font-weight: bold;
}
.attention .info .pref {
  text-align: left;
  color: #2795d4;
}
.attention .info .prtyNm {
  text-align: left;
}
.attention .info .name {
  text-align: left;
}
@media print, screen and (min-width: 768px) {
  .banner {
    width: 230px;
    position: absolute;
    bottom: 30px;
    right: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: column-reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
  .banner__items {
    width: 230px;
    height: 36px;
    margin-bottom: 20px;
  }
  .banner__items img {
    vertical-align: middle;
  }
  .banner__items:hover {
    opacity: 0.5;
  }
  .senkyo-attention .fk-title2 {
    padding-top: 20px;
  }
  .attention {
    width: 1168px;
    margin: 15px auto 30px auto;
  }
  .attention__list {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    padding: 0 72px;
    margin-left: -34px;
  }
  .attention__list__col {
    width: 330px;
    padding: 0 17px;
    margin: 0 0 17px 17px;
  }
  .attention__list__col:hover {
    background: #f7f7f7;
  }
  .attention__list__col:hover .kao img {
    opacity: 0.5;
  }
  .attention__list__col:hover .info .pref {
    color: #92caeb;
  }
  .attention__list__col:hover .info .prtyNm,
  .attention__list__col:hover .info .name {
    color: #808080;
  }
  .attention .kao {
    width: 96px;
    height: 96px;
  }
  .attention .info {
    padding: 0 0 0 15px;
    width: 200px;
  }
  .attention .info .pref {
    font-size: 14px;
  }
  .attention .info .prtyNm {
    font-size: 14px;
  }
  .attention .info .name {
    font-size: 18px;
    line-height: 1.2;
  }
}
@media screen and (max-width: 767px) {
  .banner {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    padding: 0px 16px 16px;
  }
  .banner__items {
    width: 47.667638483965014%;
    margin-bottom: 0.5em;
  }
  .banner__items img {
    width: 100%;
    height: auto;
    vertical-align: middle;
  }
  .senkyo-attention .fk-title2 {
    padding-top: 11px;
  }
  .attention {
    width: 100%;
    padding: 0 16px 18px 16px;
    margin-top: 6px;
  }
  .attention__list__col {
    width: 100%;
    padding: 0 3.498542274052478%;
    margin-bottom: 3.498542274052478%;
  }
  .attention .kao {
    width: 22.157434402332363%;
    height: 0;
    padding-top: 22.157434402332363%;
  }
  .attention .info {
    width: 75.21865889212827%;
    padding: 0 0 0 5.797101449275362%;
  }
  .attention .info .pref {
    font-size: 0.6875rem;
  }
  .attention .info .prtyNm {
    font-size: 0.6875rem;
    line-height: 1.6;
    margin-top: 0.2em;
  }
  .attention .info .name {
    font-size: 0.8125rem;
    line-height: 1.6;
  }
}