@charset "utf-8";
/* CSS Document */

/*-------
擬似要素テキストが流れる
-------*/
.flowimg1 {
  position: relative;
  padding: 0vw;
  overflow: hidden;
}
.flowimg1::before,
.flowimg1::after {
  content: "MINOR DRIVER’S LICENSE";
  position: absolute;
  bottom: -100;
  width: 100%;
  height: auto;
  color: whitesmoke;
  font-size: 13vw;
  font-family: 'Marcellus', serif;
  line-height: 0.8;
  text-align: center;
  z-index: -1;
	white-space:nowrap;
}
.flowimg1::before {
  left: 0;
  animation: flowimg 90s linear infinite;
}
.flowimg1::after {
  left: 100%;
  animation: flowimg 90s linear infinite;
}
@keyframes flowimg {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
/*==================================================
770px以下の形状
===================================*/
@media screen and (max-width: 770px) {
.flowimg1::before,
.flowimg1::after {
  position: absolute;
  bottom: -100;
  width: 100%;
  height: auto;
  font-size: 18vw;
  line-height: 0.8;
  text-align: center;
  z-index: -1;
	white-space:nowrap;
}
/*==================================================
580px以下の形状
===================================*/
@media screen and (max-width: 580px) {
.flowimg1::before,
.flowimg1::after {
  position: absolute;
  bottom: -100;
  width: 100%;
  height: auto;
  font-size: 20vw;
  line-height: 0.8;
  text-align: center;
  z-index: -1;
	white-space:nowrap;
}

/*==================================================
480px以下の形状
===================================*/
@media screen and (max-width: 480px) {
.flowimg1 {
    padding: 0;
}
}
/*==================================================
450px以下の形状
===================================*/
@media screen and (max-width: 450px) {
.flowimg1::before,
.flowimg1::after {
  position: absolute;
  bottom: -100;
  width: 100%;
  height: auto;
  font-size: 35vw;
  line-height: 0.8;
  text-align: center;
  z-index: -1;
	white-space:nowrap;
}