@media screen and (min-width: 768px) {
  .visual{
    background-color: #a7d6ea;
  }
  .visual a{
    width: 3rem;
    display: block;
    position: absolute;
    left: 1rem;
    top: 1rem;
  }

  .sec-event dl{
    margin: 2rem;
  }
  .sec-event dt,
  .sec-event dd {
    padding: 1.7rem 0;
    border-bottom: 1px solid #fff;
  }
  .campaign-date dd img{
    width: 80%;
  }
  .sec-campaign .red-button{
    width: 50%;
  }
  .campaign-howto{
    margin: 2rem;
  }

  .timeline-card{
    width: 50%;
    margin-bottom: 2rem;
  }
  .timeline-card:before{
    display: block;
    content: '';
    background-color: #fff;
    width: 3rem;
    height: .8rem;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
  }
  .card-content{
    width: calc(100% - 3rem);
  }
  .y1995 .timeline-card:nth-child(2)::before,
  .y1995 .timeline-card:nth-child(3)::before,
  .y1995 .timeline-card:nth-child(5)::before,
  .y1995 .timeline-card:nth-child(7)::before,
  .y2000 .timeline-card:nth-child(even)::before,
  .y2025 .timeline-card:nth-child(1)::before{
    right: auto;
    left: 0;
  }
  .y2000 .timeline-card:nth-child(even),
  .y1995 .timeline-card:nth-child(2),
  .y1995 .timeline-card:nth-child(3),
  .y1995 .timeline-card:nth-child(5),
  .y1995 .timeline-card:nth-child(7),
  .y2025 .timeline-card:nth-child(1)
  {
    position: absolute;
    right: 0;
    margin-bottom: 0;
  }
  .y2000 .timeline-card:nth-child(even) .card-content,
  .y1995 .timeline-card:nth-child(2) .card-content,
  .y1995 .timeline-card:nth-child(3) .card-content,
  .y1995 .timeline-card:nth-child(5) .card-content,
  .y1995 .timeline-card:nth-child(7) .card-content,
  .y2025 .timeline-card:nth-child(1) .card-content{
    margin-left: auto;
  }
  .y1995 .timeline-card:nth-child(2){
    top: 10.8rem;
  }
  .y1995 .timeline-card:nth-child(3){
    top: 25rem;
  }
  .y1995 .timeline-card:nth-child(5){
    top: 39rem;
  }
  .y1995 .timeline-card:nth-child(7){
    bottom: 0;
  }
  .y2000 .timeline-card:nth-child(1){
    margin-bottom: 5rem;
  }
  .y2000 .timeline-card:nth-child(2){
    top: 10.8rem;
  }
  .y2025 .timeline-card:nth-child(1){
    top: 0rem;
  }
  .y2025 .timeline-contents{
    padding-top: 9rem;
  }  
}
@media screen and (max-width: 768px){
  .visual{
    text-align: center;
  }
  .visual a{
    display: block;
    width: 10vw;
    margin: 1rem auto;
  }

  .sec-event dl{
    grid-template-columns: 1fr;
    margin-top: 2rem;
  }
  .sec-event dt{
    padding-top: 1rem;
  }
  .sec-event dd {
    padding-top: .5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #fff;
  }

  .inner{
    margin: 1rem;
  }

  .campaign-date dd img{
    width: 100%;
  }

  .campaign-howto{
    margin: 2rem 0;
  }
  .campaign-howto li{
    grid-template-columns: 1.8rem 1fr;
  }
  .campaign-howto li::before{
    font-size: 1rem;
    padding: .2rem;
  }
  .campaign-howto li{
    align-items: flex-start;
    font-size: 1rem;
  }
  .campaign-notice{
    margin: 2rem 0;
  }

  .movie-wrap{
    margin-top: -2vw;
    padding-top: 23vw;
  }
  .movie-wrap::before{
    background-image: url(../img/movie_bg_sp.png);
    width: 95%;
    aspect-ratio: 696 / 501;
    left: 50%;
    top: 5rem;
  }
  .sec-movie{
    padding: 54vw 0 48vw;
    background-image: none;
    clip-path: polygon(0 0, 100% 20vw, 100% calc(100% - 25vw), 0 100%);
  }
  .sec-history{
    clip-path: polygon(0 25vw, 100% 0, 100% 100%, 0 100%);
    margin-top: -25vw;
    padding-top: 25vw;
  }
  .sec-movie .movie-link{
    grid-gap: 1.5rem 1.2rem;
  }
  .movie-wrap::after{
    background-image: url(../img/train_sp.png);
    aspect-ratio: 734 / 353;
    bottom: 1rem;
  }

  .sec-history{
    background-image: url(../img/history_bg_sp.png), url(../img/history_bg2_sp.png), url(../img/history_bg_sp.png);
    background-position: right 2rem, left 83%, right 90%;
    padding-bottom: 30vw;
  }
  .sec-history .subtitle p{
    font-size: 1.7rem;
  }
  .sec-history::after{
    background-image: url(../img/wrapping_sp.png);
    aspect-ratio: 685 / 162;
  }
  .history-timeline::after{
    width: 1rem;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1) 98%, rgba(255, 255, 255, 0));
  }

  .timeline-card {
    z-index: 2;
    margin: 0 1.5rem 3rem;
  }
  .timeline-card.-img{
    margin: 0 0 3rem;
  }
  .card-date{
    font-size: 1.2rem;
    margin: 0 auto .5rem;
  }
  .card-title{
    font-size: 1.4rem;
  }
  .card-title small{
    font-size: 1.3rem;
  }
  .card-text{
    font-size: 1rem;
  }
  .card-text a{
    font-size: 1.3rem;
  }

  .timeline-now img{
    width: 90%;
    margin-top: 1rem;
  }

  .sec-point{
    padding-top: 3rem;
    background-size: 100% auto;
  }
  .point-banner{
    flex-direction: column;
    padding: 2rem;
  }
  .point-banner p{
    font-size: 1.3rem;
  }

  /* .sec-point h2::before,
  .sec-point h2::after{
    background-image: url(../img/point_accent_sp.png);
    aspect-ratio: 154 / 221;
    width: 6.5rem;
    top: -2rem;
  }
  .sec-point h2::before{
    left: 0;
  }
  .sec-point h2::after{
    right: 0;
  } */
  .sec-point h2 img{
    width: 80%;
  }
  .sec-point h3{
    font-size: 1.5rem;
  }
  .sec-point a{
    width: auto;
  }
  .point-sec:nth-of-type(1){
    margin-bottom: 2rem;
  }
}