.tp-TopBana_Title img {
  display: block;
  margin: 0 auto; }
@media screen and (min-width: 1001px) {
  .tp-TopBana_Title {
    margin-bottom: 1vw;
    background: url(img/reco-kira-l.png), url(img/reco-kira-r.png);
    background-repeat: no-repeat;
    background-size: 4vw;
    background-position: 5vw, 91vw; }
    .tp-TopBana_Title img {
      width: 70vw; } }
@media screen and (min-width: 481px) and (max-width: 1000px) {
  .tp-TopBana_Title {
    margin-bottom: 4.5vw;
    background: url(img/reco-kira-l.png), url(img/reco-kira-r.png);
    background-repeat: no-repeat;
    background-size: 9.5vw;
    background-position: 2.5vw, 88vw; }}
@media screen and (max-width: 480px) {
  .tp-TopBana_Title {
    margin-bottom: 4.5vw; }}

.tp-TopBana_Title:after {
  content: "";
  display: block;
  height: 2px;
  border-top: solid 1px #eee;
  border-bottom: solid 1px white; }

.tp-TopBana_List {
  display: -webkit-flex;
  display: flex; }
  .tp-TopBana_List li {
    position: relative;
    font-size: 0; }
  @media screen and (min-width: 1001px) {
    .tp-TopBana_List {
      -webkit-justify-content: space-between;
              justify-content: space-between;
      -webkit-flex-wrap: wrap;
              flex-wrap: wrap; } }
  @media screen and (min-width: 481px) and (max-width: 1000px) {
    .tp-TopBana_List {
      -webkit-justify-content: space-between;
              justify-content: space-between;
      -webkit-flex-wrap: wrap;
              flex-wrap: wrap;
      margin: 0 2.5vw; } }
  @media screen and (max-width: 480px) {
    .tp-TopBana_List {
      -webkit-justify-content: space-around;
              justify-content: space-around;
      -webkit-flex-wrap: wrap;
              flex-wrap: wrap; } }

@media screen and (min-width: 1001px) {
  .tp-TopBana_Item {
    margin-bottom: 1vw; } }
@media screen and (min-width: 481px) and (max-width: 1000px) {
  .tp-TopBana_Item {
    margin-bottom: 2.5vw; } }
@media screen and (max-width: 480px) {
  .tp-TopBana_Item {
    margin-bottom: 2.5vw; } }

.tp-TopBana_Image {
  opacity: 1; }
  @media screen and (min-width: 1001px) {
    .tp-TopBana_Image {
      width: 48.5vw; } }
  @media screen and (min-width: 481px) and (max-width: 1000px) {
    .tp-TopBana_Image {
      width: 45vw; } }
  @media screen and (max-width: 480px) {
    .tp-TopBana_Image {
      width: 95vw; }
    .tp-TopBana_Title img{
      width: 95vw; }
	  }

.tp-TopBana_Grade {
  position: absolute;
  transition: 0.2s ease;
  height: 100%;
  top: 0;
  background: url(img/reco-arrow.png), url(img/reco-grade.png);
  background-repeat: no-repeat, repeat;
  background-position: 88% 50%, left top;
  opacity: 0;
  z-index: 100; }
  @media screen and (min-width: 1001px) {
    .tp-TopBana_Grade {
      background-size: 3.2vw, contain;
      width: 48.5vw; } }
  @media screen and (min-width: 481px) and (max-width: 1000px) {
    .tp-TopBana_Grade {
      background-size: 3.2vw, contain;
      width: 45vw; } }
  @media screen and (max-width: 480px) {
    .tp-TopBana_Grade {
      background-size: 6.4vw, contain;
      width: 95vw; } }

.tp-TopBana_Image-hover,
.tp-TopBana_Grade-hover {
  opacity: 1;
  background-position: 94% 50%, left top;
  transition: 0.2s ease; }

.tp-TopBana_Arrow {
  position: absolute;
  opacity: 0;
  transition: 0.1s ease-in;
  z-index: 50;
  bottom: 6.4vw;
  right: 4.8vw; }
  @media screen and (min-width: 1001px) {
    .tp-TopBana_Arrow {
      width: 3.2vw; } }
  @media screen and (min-width: 481px) and (max-width: 1000px) {
    .tp-TopBana_Arrow {
      width: 3.2vw; } }
  @media screen and (max-width: 480px) {
    .tp-TopBana_Arrow {
      width: 6.4vw; } }