@font-face {
  font-family: 'Noto-B';
  src: url("/asset/font/NotoSansJP-Bold.eot");
  src: url("/asset/font/NotoSansJP-Bold.eot?iefix") format("eot"), url("/asset/font/NotoSansJP-Bold.woff") format("woff");
  font-display: swap; }

@font-face {
  font-family: 'Noto-L';
  src: url("/asset/font/NotoSansJP-Light.eot");
  src: url("/asset/font/NotoSansJP-Light.eot?iefix") format("eot"), url("/asset/font/NotoSansJP-Light.woff") format("woff");
  font-display: swap; }

@font-face {
  font-family: 'Noto-R';
  src: url("/asset/font/NotoSansJP-Regular.eot");
  src: url("/asset/font/NotoSansJP-Regular.eot?iefix") format("eot"), url("/asset/font/NotoSansJP-Regular.woff") format("woff");
  font-display: swap; }

@font-face {
  font-family: 'Noto-M';
  src: url("/asset/font/NotoSansJP-Medium.eot");
  src: url("/asset/font/NotoSansJP-Medium.eot?iefix") format("eot"), url("/asset/font/NotoSansJP-Medium.woff") format("woff");
  font-display: swap; }

@font-face {
  font-family: 'TexGyreHeros';
  src: url("../font/texgyreheros-regular.eot");
  src: url("../font/texgyreheros-regular.eot?iefix") format("eot"), url("../font/texgyreheros-regular.woff") format("woff");
  font-display: swap; }

a {
  cursor: pointer; }

@media only screen and (max-width: 767px) {
  .dn-sp {
    display: none !important; } }

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .dn-tablet {
    display: none !important; } }

@media only screen and (min-width: 1025px) {
  .dn-pc {
    display: none !important; } }

@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 1025px) {
  .dn-tab_pc {
    display: none !important; } }

.teaser_inner {
  background-color: #000; }
  @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 1025px) {
    .teaser_inner {
      display: table;
      width: 100%;
      height: calc(100vh - 115px); } }
  @media only screen and (max-width: 767px) {
    .teaser_inner {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
      flex-direction: column-reverse; } }

@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 1025px) {
  .teaser_left, .teaser_right {
    display: table-cell;
    width: 50%; } }

.teaser_left {
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url(/img/ride/kris-van-assche/teaser/mv-pc.webp); }
  @media only screen and (min-width: 1025px) {
    .teaser_left {
      background-position: top; } }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .teaser_left {
      background-position: top; } }
  @media only screen and (max-width: 767px) {
    .teaser_left {
      background-image: url(/img/ride/kris-van-assche/teaser/mv-sp.webp);
      background-position: center;
      height: 0;
      padding-top: 110%; } }

.teaser_right {
  vertical-align: middle; }
  @media only screen and (max-width: 767px) {
    .teaser_right {
      padding: 50px 20px; } }

.logo {
  width: 120px;
  margin: 0 auto 30px; }
  .logo img {
    width: 100%; }

.teaser_subTitle {
  color: #fff;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.8; }

.teaser_subText {
  color: #fff;
  text-align: left;
  font-size: 14px;
  line-height: 1.8;
  margin-top: 25px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 1025px) {
    .teaser_subText {
      width: 500px;
      margin: 25px auto 0; } }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .teaser_subText {
      width: 300px;
      margin: 25px auto 0; } }

.teaser_members {
  margin-top: 50px; }
  @media only screen and (max-width: 767px) {
    .teaser_members {
      margin-top: 30px; } }

.teaser_members_btn {
  background-color: #fff;
  color: #000;
  padding: 12px 0;
  text-decoration: none;
  width: 200px;
  margin: 0 auto;
  display: block;
  text-align: center;
  font-weight: 600;
  border: 1px solid #fff;
  -webkit-transition: all 0.3s;
  transition: all 0.3s; }
  .teaser_members_btn:hover {
    background-color: #000;
    color: #fff; }

.teaser_line {
  margin-top: 25px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s; }
  .teaser_line:hover {
    opacity: 0.7; }
  @media only screen and (max-width: 767px) {
    .teaser_line {
      margin-top: 20px; } }

.teaser_line_btn {
  display: block;
  width: 150px;
  margin: 0 auto; }
  .teaser_line_btn img {
    width: 100%; }