@charset "UTF-8";
@-webkit-keyframes loop {
  0% {
      transform: translateX(100%);
  }
  
  to {
      transform: translateX(-100%);
  }
}
  @-webkit-keyframes loop2 {
  0% {
      transform: translateX(0);
  }
  
  to {
      transform: translateX(-200%);
  }
}
  @keyframes loop_rev {
  0% {
        transform: translateX(-100%);
  }
  100% {
        transform: translateX(100%);
  }
}
 
 @keyframes loop2_rev {
  0% {
        transform: translateX(-200%);
  }
  100% {
        transform: translateX(0);
  }
}
 
  

/* ========================================
  @media screen and (min-width: 768px), print
======================================== */
@media screen and (min-width: 768px),print {
/* mv -------------------------------------*/
.mv {padding: 117px 0 0;}
.mv .loop {
  overflow: hidden;
  padding: 0 0 32px;
}
.mv .loop .loop__box {
  display: flex;
  width: 100vw;
}
.mv .loop01 .loop__box img {
  min-width: 100.64vw;
}
.mv .loop01 .loop__box img:first-child {
  -webkit-animation: loop 50s -25s linear infinite;
  animation: loop 50s -25s linear infinite;
}
.mv .loop01 .loop__box img:last-child {
  -webkit-animation: loop2 50s linear infinite;
  animation: loop2 50s linear infinite;
}
.mv .loop01 {
  position: relative;
  z-index: 1;
}
.mv .loop02 .loop__box img:first-child {
  animation: loop_rev 74s -37s linear infinite; /* 50s → 74s */
}
.mv .loop02 .loop__box img:last-child {
  animation: loop2_rev 74s linear infinite; /* 50s → 74s */
}
.mv .loop02 {
  position: relative;
  z-index: 3;
}
.mv .loop02 .loop__box img {
  min-width: 149.08vw;
}
.mv h2 {
  text-align: center;
  font-size: 40px;
  font-weight: 500;
  line-height: 1.5; /* 150% */
  letter-spacing: -0.05em;
  margin-bottom: 40px;
  margin-top: 47px;
}
.mv .list {
  width: min(95%, 1580px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  position: relative;
  margin-bottom: 168px;
}
.mv .list::after {
  position: absolute;
  content: "";
  background: url(../images/online/mv-arrow.svg)no-repeat;
  background-size: contain;
  width: 402px;
  height: 49px;
  bottom: -88px;
  left: 50%;
  transform: translateX(-50%);
}
.mv .list li {
  border: 1px solid #D9D9D9;
  background: #FFF;
  box-shadow: 0 10px 20px 0 rgba(26, 26, 26, 0.10);
  padding: 32px 80px;
  display: grid;
  gap: 24px;
  justify-content: center;
}
.mv .list li h3 {
  text-align: center;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.7; /* 170% */
}

/* message
-------------------------------------*/
.message {
  width: min(95%, 1200px);
  margin-inline: auto;
  margin-bottom: -18px;
}
.message h2 {
  color: #C93800;
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.75; /* 175% */
  margin-bottom: 40px;
}
.message .photo {
  text-align: center;
}
.message .photo img {
  width: 100%;
  height: auto;
}
.message .txt-box {
  text-align: center;
  background: #FFF;
  width: min(95%, 1000px);
  margin-inline: auto;
  margin-top: -40px;
  position: relative;
  padding: 40px 0;
}
.message .txt-box .txt {
  text-align: center;
  font-size: clamp(1.375rem, 1.292rem + 0.17vw, 1.5rem);
  font-weight: 500;
  line-height: 1.45833;
  margin-bottom: 12px;
}
.message .txt-box .txt02 {
  text-align: center;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.5; /* 150% */
  letter-spacing: -0.08em;
}

}

/* ========================================
@media screen and (min-width:768px) and (max-width:1440px)
======================================== */
@media screen and (min-width:768px) and (max-width:1440px) {
  .main-ttl-wrap .main-ttl.thank {
    font-size: 3.472vw;
    padding-right: 2.986vw;
    margin-top: -5.139vw;
  }
}

/* ========================================
@media screen and (min-width:768px) and (max-width:1100px)
======================================== */
@media screen and (min-width:768px) and (max-width:1100px) {
  .mv .list li {
    padding: 2.909vw 7.273vw;
    gap: 2.182vw;
  }
  .mv .list li img {
    width: 20.00vw;
  }
  .mv .list li h3 {
    font-size: 1.818vw;
  }
}
/* ========================================
  @media screen and (max-width: 767px)
======================================== */

@media screen and (max-width: 767px) {
/* mv
-------------------------------------*/
.mv {
    padding: 11vw 0 0;
}
.mv .loop {
  overflow: hidden;
  padding: 0 0 1.5vw;
}
.mv .loop .loop__box {
  display: flex;
  width: 100vw;
}
.mv .loop01 .loop__box img {
  min-width: 286.3vw;
}
.mv .loop01 .loop__box img:first-child {
  -webkit-animation: loop 50s -25s linear infinite;
  animation: loop 50s -25s linear infinite;
}
.mv .loop01 .loop__box img:last-child {
  -webkit-animation: loop2 50s linear infinite;
  animation: loop2 50s linear infinite;
}
.mv .loop01 {
  position: relative;
  z-index: 1;
}
.mv .loop02 .loop__box img:first-child {
  animation: loop_rev 74s -37s linear infinite; /* 50s → 74s */
}
.mv .loop02 .loop__box img:last-child {
  animation: loop2_rev 74s linear infinite; /* 50s → 74s */
}
.mv .loop02 {
  position: relative;
  z-index: 3;
}
.mv .loop02 .loop__box img {
  min-width: 424.08vw;
}
.mv h2 {
  text-align: center;
  font-size:5.797vw;
  font-weight: 500;
  line-height: 1.5; /* 150% */
  margin-bottom: 9.66vw;
  margin-top: 8.5vw;
}
.mv .list {
  width: 89.37vw;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 4.35vw;
  position: relative;
  margin-bottom: 34.6vw;
}
.mv .list::after {
  position: absolute;
  content: "";
  background: url(../images/online/mv-arrow.svg)no-repeat;
  background-size: contain;
  width: 74.88vw;
  height: 9.18vw;
  bottom: -19.26vw;
  left: 50%;
  transform: translateX(-50%);
}
.mv .list li {
  border: 0.2vw solid #D9D9D9;
  background: #FFF;
  box-shadow: 0 6px 12px 0 rgba(26, 26, 26, 0.10);
  padding: 3.86vw 3.9vw 2.91vw 3.86vw;
  display: grid;
  grid-template-columns: 33.82vw 41.3vw;
  gap: 3.86vw;
  align-items: center;
}
.mv .list li:first-child {
  gap: 5.5vw;
}
.mv .list li h3 {
  font-size:4.348vw;
  font-weight: 500;
  line-height: 1.7778;
  margin-top: -1vw;
}

/* message
-------------------------------------*/
.message {margin-bottom: 4.5vw;}
.message h2 {
  color: #C93800;
  text-align: center;
  font-size:4.348vw;
  font-weight: 600;
  line-height: 1.7778;
  margin-bottom: 7.73vw;
}
.message .photo {
  text-align: center;
}
.message .photo img {
  width: 100%;
  height: auto;
}
.message .txt-box {
  text-align: center;
  background: #FFF;
  width: 89.37vw;
  margin-inline: auto;
  margin-top: -9.8vw;
  position: relative;
  padding: 5.80vw 0;
}
.message .txt-box .txt {
  text-align: center;
  font-size:3.382vw;
  font-weight: 500;
  line-height: 1.57143;
  margin-bottom: 2.90vw;
}
.message .txt-box .txt02 {
  text-align: center;
  font-size:5.797vw;
  font-weight: 700;
  line-height: 1.4583;
}

/* thank */
.main-ttl-wrap .main-ttl.thank {
  font-size: 3.472vw;
}

}