@charset "UTF-8";
/*
 * =====================================================
 *
 * [variable]
 *
 * =====================================================
 */
/*
 * =====================================================
 *
 * [content]
 *
 * =====================================================
 */
/**
 * ---------------------------------------------------
 * 幅指定
 * ---------------------------------------------------
 */
.w20p {
  width: 20%;
}

.w30p {
  width: 30%;
}

.w33p {
  width: 33%;
}

.w40p {
  width: 40%;
}

.w48p {
  width: 48%;
}

.w49p {
  width: 49%;
}

.w50p {
  width: 50%;
}

.w65p {
  width: 65%;
}

.w70p {
  width: 70%;
}

.w90p {
  width: 90%;
}

.w50 {
  width: 50px;
}

.w60 {
  width: 60px;
}

.w70 {
  width: 70px;
}

.w80 {
  width: 80px;
}

.w90 {
  width: 90px;
}

.w100 {
  width: 100px;
}

.w110 {
  width: 110px;
}

.w120 {
  width: 120px;
}

.w130 {
  width: 130px;
}

.w140 {
  width: 140px;
}

.w150 {
  width: 150px;
}

.w160 {
  width: 160px;
}

.w170 {
  width: 170px;
}

.w180 {
  width: 180px;
}

.w190 {
  width: 190px;
}

.w200 {
  width: 200px;
}

.w210 {
  width: 210px;
}

.w220 {
  width: 220px;
}

.w230 {
  width: 230px;
}

.w240 {
  width: 240px;
}

.w250 {
  width: 250px;
}

.w260 {
  width: 260px;
}

.w270 {
  width: 270px;
}

.w280 {
  width: 280px;
}

.w290 {
  width: 290px;
}

.w300 {
  width: 300px;
}

.w310 {
  width: 310px;
}

.w320 {
  width: 320px;
}

.w330 {
  width: 330px;
}

.w340 {
  width: 340px;
}

.w350 {
  width: 350px;
}

.w360 {
  width: 360px;
}

.w370 {
  width: 370px;
}

.w380 {
  width: 380px;
}

.w390 {
  width: 390px;
}

.w400 {
  width: 400px;
}

.w410 {
  width: 410px;
}

.w420 {
  width: 420px;
}

.w430 {
  width: 430px;
}

.w440 {
  width: 440px;
}

.w450 {
  width: 450px;
}

.w460 {
  width: 460px;
}

.w470 {
  width: 470px;
}

.w480 {
  width: 480px;
}

.w490 {
  width: 490px;
}

.w500 {
  width: 500px;
}

.w1em {
  width: 1em;
}

.w2em {
  width: 2em;
}

.w3em {
  width: 3em;
}

.w4em {
  width: 4em;
}

.w5em {
  width: 5em;
}

.w6em {
  width: 6em;
}

.w7em {
  width: 7em;
}

.w8em {
  width: 8em;
}

.w9em {
  width: 9em;
}

.w10em {
  width: 10em;
}

.w11em {
  width: 11em;
}

.w12em {
  width: 12em;
}

.w13em {
  width: 13em;
}

.w14em {
  width: 14em;
}

.w15em {
  width: 15em;
}

.w16em {
  width: 16em;
}

.w17em {
  width: 17em;
}

.w18em {
  width: 18em;
}

.w19em {
  width: 19em;
}

.w20em {
  width: 20em;
}

/**
 * ---------------------------------------------------
 * レイアウト
 * ---------------------------------------------------
 */
.mL1em {
  margin-left: 1em;
}

.mL2em {
  margin-left: 2em;
}

.mL3em {
  margin-left: 3em;
}

.mL4em {
  margin-left: 4em;
}

.mL5em {
  margin-left: 5em;
}

.mL6em {
  margin-left: 6em;
}

.mL7em {
  margin-left: 7em;
}

.mL8em {
  margin-left: 8em;
}

.mL1hem {
  margin-left: 1.5em;
}

.mL2hem {
  margin-left: 2.5em;
}

.mL3hem {
  margin-left: 3.5em;
}

.mL4hem {
  margin-left: 4.5em;
}

.mL5hem {
  margin-left: 5.5em;
}

.mL6hem {
  margin-left: 6.5em;
}

.mL7hem {
  margin-left: 7.5em;
}

.mL8hem {
  margin-left: 8.5em;
}

.mB60 {
  margin-bottom: 60px;
}

.mB70 {
  margin-bottom: 70px;
}

.mB80 {
  margin-bottom: 80px;
}

/**
 * ---------------------------------------------------
 * 文字サイズ
 * ---------------------------------------------------
 */
.s0-8r {
  font-size: 0.8rem;
}

.s1-0r {
  font-size: 1rem;
}

.s1-1r {
  font-size: 1.1rem;
}

.s1-2r {
  font-size: 1.2rem;
}

.s1-3r {
  font-size: 1.3rem;
}

.s1-4r {
  font-size: 1.4rem;
}

.s1-5r {
  font-size: 1.5rem;
}

.s1-6r {
  font-size: 1.6rem;
}

.s1-7r {
  font-size: 1.7rem;
}

.s1-8r {
  font-size: 1.8rem;
}

.s1-9r {
  font-size: 1.9rem;
}

.s2-0r {
  font-size: 2rem;
}

.s2-1r {
  font-size: 2.1rem;
}

.s2-2r {
  font-size: 2.2rem;
}

.s2-3r {
  font-size: 2.3rem;
}

.s2-4r {
  font-size: 2.4rem;
}

.s2-5r {
  font-size: 2.5rem;
}

.s2-6r {
  font-size: 2.6rem;
}

.s2-7r {
  font-size: 2.7rem;
}

.s2-8r {
  font-size: 2.8rem;
}

.s2-9r {
  font-size: 2.9rem;
}

.s3-0r {
  font-size: 3rem;
}

.s3-1r {
  font-size: 3.1rem;
}

.s3-2r {
  font-size: 3.2rem;
}

.s3-3r {
  font-size: 3.3rem;
}

.s3-4r {
  font-size: 3.4rem;
}

.s3-5r {
  font-size: 3.5rem;
}

.s3-6r {
  font-size: 3.6rem;
}

.s3-7r {
  font-size: 3.7rem;
}

.s3-8r {
  font-size: 3.8rem;
}

.s3-9r {
  font-size: 3.9rem;
}

/**
 * ---------------------------------------------------
 * 見出し
 * ---------------------------------------------------
 */
.headStyle01 {
  color: #201600;
  font-size: clamp(1.6rem, 4.2vw, 3.1rem);
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: 1.5vw;
}

.headStyle02 {
  font-weight: 500;
}

/**
 * ---------------------------------------------------
 * リスト
 * ---------------------------------------------------
 */
.listStyle01 {
  list-style-type: disc;
  padding: 0 0 0 20px;
  margin: 0;
}

.listStyle02 {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.listStyle03 {
  list-style-type: decimal;
  padding: 0 0 0 2em;
  margin: 0;
}

/**
 * ---------------------------------------------------
 * ログイン
 * ---------------------------------------------------
 */
.loginVox {
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  text-align: center;
  /* margin-top: 10%; */
}
.loginVox p {
  margin: 15px 0;
}
/* .loginVox .firstBtn {
  width: 120px;
  height: 120px;
  margin: 10px auto 0 auto;
}
.loginVox .firstBtn a {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  color: #fff;
  font-size: clamp(1.1rem, 2.5vw, 2rem);
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  width: 100%;
  height: 100%;
  border: 1px solid #fff;
  border-radius: 25px;
  transition: background-color 0.2s;
}
.loginVox .firstBtn a .title {
  display: block;
  width: 100%;
}
.loginVox .firstBtn a::before {
  display: block;
  content: "";
  width: 40%;
  padding-top: 40%;
  background: url("../../images/ico_entry.svg") no-repeat center/cover;
  margin: 0 auto 10px auto;
} */

/**
 * ---------------------------------------------------
 * ユーザー情報
 * ---------------------------------------------------
 */
.userVox {
  padding-top: 12%;
  padding-bottom: 12%;
}
.userVox .icon {
  width: 20vw;
  max-width: 145px;
  margin: 0 auto 3vw auto;
}
.userVox .name {
  font-size: clamp(1.8rem, 4.5vw, 3.5rem);
  font-weight: bold;
  line-height: 1.3;
}

/**
 * ---------------------------------------------------
 * ラリー情報
 * ---------------------------------------------------
 */
.rallyInfoVox {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  font-size: clamp(1.4rem, 3vw, 2.6rem);
  padding: 0 4vw 8vw 4vw;
}
.rallyInfoVox > .item {
  width: 47%;
}
.rallyInfoVox > .item .title {
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: bold;
  line-height: 1.3;
  margin-bottom: 5px;
}
.rallyInfoVox > .item .time,
.rallyInfoVox > .item .point,
.rallyInfoVox > .item .distance {
  color: #201600;
  font-size: clamp(1.8rem, 4.5vw, 3.5rem);
  font-weight: bold;
  line-height: 1.3;
  letter-spacing: 0.1em;
  max-width: 65vw;
  padding: 10px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 12px;
}
.rallyInfoVox > .item .time:not(:last-child) {
  margin-bottom: 5px;
}
.rallyInfoVox > .item.end {
  width: 100%;
  margin: 0 auto 10% auto;
}

/**
 * ---------------------------------------------------
 * マップ情報
 * ---------------------------------------------------
 */
#mapVox {
  width: 100vw;
  max-width: 600px;
  height: 100vh;
  margin: 0 auto;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}
#mapVox iframe {
  width: 100% !important;
  height: 100% !important;
  border: none;
}

.mapInfoVox {
  font-size: clamp(1.2rem, 3vw, 2rem);
  padding: 13px 20px;
  color: #fff;
  background-color: #c64f49;
  border-radius: 25px;
}
.mapInfoVox p {
  line-height: 1.5;
}
.mapInfoVox .point {
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 500;
}
.mapInfoVox .place {
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 500;
}

/**
 * ---------------------------------------------------
 * テキストページ用
 * ---------------------------------------------------
 */
.txtVox {
  color: #585551;
  font-weight: 500;
  font-family: "Noto Sans JP", sans-serif;
  text-align: left;
  padding: 20px 15px;
  margin: 15px 15px 0 15px;
  background-color: #fff;
  border-radius: 25px;
}

/**
 * ---------------------------------------------------
 * ゴール
 * ---------------------------------------------------
 */
#goalVox {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
}
#goalVox > p {
  color: white;
  --ts-c: red;
  --ts-br: 8px;
  text-shadow: -1px -1px var(--ts-br) var(--ts-c), -1px 0 var(--ts-br) var(--ts-c), -1px 1px var(--ts-br) var(--ts-c), 0 -1px var(--ts-br) var(--ts-c), 0 1px var(--ts-br) var(--ts-c), 1px -1px var(--ts-br) var(--ts-c), 1px 0 var(--ts-br) var(--ts-c), 1px 1px var(--ts-br) var(--ts-c);
  font-size: clamp(6.5rem, 20vw, 9rem);
  font-weight: bold;
  text-align: center;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

body#current,
body#goal {
  position: fixed;
}