/* lineup
----------------------------------------------------*/
/*
font-family: 'Libre Caslon Display', serif;
*/
@import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&display=swap');
/*
----------------------------------------------------*/
.pageTtl {
  background-image: url("img/page_ttl.jpg");
}
.lead {
  text-align: center;
  padding: 0 15px;
}
.visible, .invisible {
  opacity: 0.0;
  transition: opacity 1s ease;
}
.visible {
  opacity: 1.0;
}
.visible.translateToLeft, .invisible.translateToLeft {
  transform: translateX(100px);
  transition: all 1s cubic-bezier(0.165, 0.840, 0.440, 1.000);
}
.visible.translateToLeft {
  transform: translateX(0);
}
.visible.translateToRight, .invisible.translateToRight {
  transform: translateX(-100px);
  transition: all 1s cubic-bezier(0.165, 0.840, 0.440, 1.000);
}
.visible.translateToRight {
  transform: translateX(0);
}
.visible.translateY, .invisible.translateY {
  transform: translateY(100px);
  transition: all 1s cubic-bezier(0.165, 0.840, 0.440, 1.000);
}
.visible.translateY {
  transform: translateY(0);
}
@media (min-width: 415px) {}
@media (min-width: 960px) {}
/*
----------------------------------------------------*/
.lineupBox {
  padding: 20px 0;
  overflow: hidden;
}
.lineupBox a {
  display: block;
}
.lineupBox a.sublink {
  display: inline-block;
  color: #333;
  padding: 0 40px 0 10px;
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24"><path fill="%23000000" d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z" /></svg>');
  background-repeat: no-repeat;
  background-position: right 5px center;
  background-size: 14px;
  border: 1px solid #999;
}
.lineupBox .txtBox {
  padding: 15px;
}
.lineupBox a .txtBox {
  padding: 15px 60px 15px 15px;
  display: block;
  color: #333;
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24"><path fill="%23000000" d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z" /></svg>');
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 20px;
  position: relative;
}
.lineupBox a .txtBox::after {
  content: '';
  position: absolute;
  right: 50px;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  height: 70%;
  border-left: 1px solid #333;
}
.lineupBox .phtBox {
  height: 200px;
  overflow: hidden;
  position: relative;
}
.lineupBox .phtBox img {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.lineupBox .txtBox h4 {
  font-size: 1.8rem;
}
@media (min-width: 415px) {
  .lineupBox {
    padding: 30px 0;
    overflow: hidden;
  }
  .lineupBox .txtBox {
    padding: 15px 30px;
  }
  .lineupBox a .txtBox {
    padding: 15px 120px 15px 30px;
    display: table;
    width: 100%;
    background-position: right 60px center;
  }
  .lineupBox a .txtBox::after {
    right: 110px;
  }
  .lineupBox .txtBox h4, .lineupBox .txtBox .txt {
    display: table-cell;
    vertical-align: middle;
  }
  .lineupBox .txtBox h4 {
    width: 150px;
  }
}
@media (min-width: 960px) {
  .lineupBox .txtBox {
    padding: 20px 50px 20px 30px;
  }
  .lineupBox a {
    border: 1px solid #fff;
    transition: all 0.5s;
  }
  .lineupBox a .txtBox {
    padding: 20px 150px 20px 30px;
    transition: all 0.5s;
  }
  .lineupBox a .txtBox::after {
    right: 120px;
  }
  .lineupBox .phtBox {
    height: 340px;
  }
  .lineupBox .txtBox h4 {
    font-size: 2.5rem;
    width: 220px;
  }
  .lineupBox a:hover {
    border: 1px solid #fff;
    box-shadow: 0 15px 10px -10px rgba(31, 31, 31, 0.5);
  }
.lineupBox a.sublink:hover {
    border: 1px solid #fff;
    box-shadow: 0 10px 10px -10px rgba(31, 31, 31, 0.5);
  background-position: right 3px center;
}
  .lineupBox a:hover .txtBox {
    background-position: right 55px center;
  }
}
/*
----------------------------------------------------*/
@media (min-width: 415px) {}
@media (min-width: 960px) {}
/*
----------------------------------------------------*/
@media (min-width: 415px) {}
@media (min-width: 960px) {}