@charset "UTF-8";

/* PC表示：「場所」と「対象」の間隔調整 */
@media screen and (min-width: 768px) {
  .mv__info {
    top: 42.5cqw;
  }
}

/* スマホ表示：「場所」と「対象」の間隔調整 */
@media screen and (max-width: 767px) {
  .mv__info {
    top: 109cqw;
  }
}



/* ==========================================
   交通費支給エリア
========================================== */

/* 白い水玉背景のカード */
.benefit--transport {
  display: block;
  width: 100%;
  max-width: 917px;
  margin: 26px auto 0;
  padding: 20px 15px 25px;
  border-radius: 10px;
  text-align: center;

  /* 参加ポイントと同じ水玉模様 */
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14.4' height='14.4' viewBox='0 0 14.4 14.4'%3E%3Cg fill='%2337C3F0'%3E%3Ccircle cx='3.6' cy='3.6' r='0.72'/%3E%3Ccircle cx='10.8' cy='10.8' r='0.72'/%3E%3C/g%3E%3C/svg%3E") repeat 0 0/14.4px 14.4px;
}

/* コンテンツ */
.benefit--transport .benefit__content {
  width: 100%;
  margin: 0 auto;
}

/* 見出し */
.benefit--transport .benefit__text {
  position: static;
  margin: 0;
  padding: 0;
  color: #fff;
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1.4;
}

/* 黄色マーカーは既存CSSを利用 */

/* 説明文 */
.benefit--transport .benefit__description {
  margin-top: 15px;
  color: #000;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.8;
}

/* 注意書き */
.benefit--transport .benefit__note {
  margin-top: 5px;
  color: #555;
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.7;
}

/* ==========================================
   スマートフォン表示
========================================== */

@media screen and (max-width: 767px) {

  .benefit--transport {
    width: 100%;
    max-width: none;
    margin: 20px auto 0;
    padding: 15px 10px 20px;
    border-radius: 10px;
  }

  .benefit--transport .benefit__text {
    position: static;
    margin: 0;
    padding: 0;
    font-size: 1.3rem;
    line-height: 1.4;
  }

  .benefit--transport .benefit__description {
    margin-top: 10px;
    font-size: 0.95rem;
    line-height: 1.7;
  }

  .benefit--transport .benefit__note {
    margin-top: 12px;
    font-size: 0.75rem;
    line-height: 1.6;
  }
}




/* ==========================================
   イベントの流れ：矢印と移動時間
========================================== */

/* 矢印を左に移動 */
.flow__item + .flow__item::before {
  left: calc(50% - 70px);
  transform: none;
}

/* 移動時間の文字 */
.flow__move {
  position: absolute;

  /* 矢印の上下中央に合わせる */
  top: -40px;
  left: calc(50% - 15px);
  transform: translateY(-50%);

  color: #FFEF00;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

/* ==========================================
   スマートフォン表示
========================================== */
@media screen and (max-width: 767px) {

  /* 矢印の位置 */
  .flow__item + .flow__item::before {
    left: calc(50% - 60px);
  }

  /* 移動時間の文字 */
  .flow__move {
    top: -28px;
    left: calc(50% - 10px);
    font-size: 18px;
  }
}