@import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@100;200;300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lekton&display=swap');
@font-face {
  font-family: 'Comma'; 
  src: local('Arial');
  unicode-range: U+002C;
}

body{
  width: 100%;
  height: 100%;
  height: 100vh;
  margin:0 0 0 0;
  background-color: #000;
  color: #fff;
  overflow: hidden;
  font-family: "メイリオ","Meiryo","Hiragino Kaku Gothic ProN", sans-serif;
}

#svg{
  transform-box:"fill-box";
  max-width: 1000px;
  height: 420px;
}

#container {
  width:100%;
  height:100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

#indicator {
  position: absolute;
  bottom:0;
  left:0;
  width:100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
#indicator .r_count{
  font-size:16px;
}

#indicator .r_count .km{
  font-size:12px;
}

.background {
  position: absolute;
  overflow: hidden;
  top:0;
  left: 0;
  width:100%;
  height:100%;
  background-color: #000;
  z-index: -10;
}

.separation::before {
  position: absolute;
  overflow: hidden;
  width:100%;
  height:100%;
  top:0;
  content: "";
  opacity: 0.75;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: auto 600px;
  z-index: -1;
  background-image: url("./images/bg_separation.jpg");
}

.return::before {
  position: absolute;
  overflow: hidden;
  width:100%;
  height:100%;
  top:0;
  content: "";
  opacity: 0.75;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: auto 600px;
  z-index: -1;
  background-image: url("./images/bg_return.jpg");
}
.departure::before {
  position: absolute;
  overflow: hidden;
  width:100%;
  height:100%;
  top:0;
  content: "";
  opacity: 0.75;
  background-repeat: no-repeat;
  background-position: right center;
  background-size: auto 1024px;
  z-index: -1;
  background-image: url("./images/bg_departure.jpg");
}

@media only screen and (max-width: 782px) {
  .separation::before {
    background-size: auto 320px;
    background-position: left top;
    opacity: 0.65;
  }

  .return::before {
    background-size: auto 400px;
    background-position: left top;
    opacity: 0.65;
  }

  .departure::before {
    background-size: auto 420px;
    background-position: right top;
    opacity: 0.65;
  }

  #indicator {
    flex-direction: column;
    justify-content: flex-start;
    left:10px;
    width: 100%;
    align-items: flex-start;
  }
  #indicator .r_count{
    font-size:14px;
  }
  #indicator .r_count .km{
    font-size:10px;
  }
}
@media only screen and (max-width: 540px) {
  .separation::before {
    background-size: auto 320px;
    background-position: center top;
    opacity: 0.65;
  }
  .return::before {
    background-size: auto 320px;
    background-position: center top;
    opacity: 0.65;
  }
  .departure::before {
    background-size: auto 320px;
    background-position: right top;
    opacity: 0.65;
  }
}
#distance_indicator{
  padding:0;
  margin:10px 5px;
  text-shadow: 0px 0px 15px #001129;
}
#distance_to_earth{
  color:#10abec;
  font-size:52px;
  text-align: left;
  white-space: nowrap;
  line-height: 0.8em;
}
#distance_en{
  font-family: 'Saira Condensed', sans-serif;
  letter-spacing:2px;
  font-size:30px;
}
#distance_preposition{
  font-weight: 200;
}
#distance_earth{
  font-weight: 400;
}
#distance_ja{
  font-size:12px;
  color:#ffffff;

}
#distance_num{
  /*font-family: 'Saira Condensed', sans-serif;*/
  font-family: 'Comma', 'Lekton', monospace;
  font-weight: 200;
  font-size:54px;
  letter-spacing: -0.02em;
}
#distance_km{
  letter-spacing:2px;
  font-family: 'Saira Condensed', sans-serif;
  font-weight: 300;
  font-size:38px;
}
@media only screen and (max-width: 782px) {
  #distance_indicator{
    left: 5%;
  }
  #distance_to_earth{
    font-size:36px;
    line-height: 1.0em;
  }
  #distance_en{
    font-size:24px;
  }
  #distance_num{
    font-size:48px;
  }
  #distance_km{
    font-size:28px;
  }
  #name_of_probe {
    margin-top:10px;
  }
}

#name_of_probe {
  margin-top:5px;
  letter-spacing:2px;
  color:#ffffff;
}
#name_asteroid_explorer {
  margin:0;
  padding:0;
  font-family: 'Saira Condensed', sans-serif;
  font-weight: 100;
  font-size:15px;
}
#name_hayabusa2 {
  margin:0;
  padding:0;
  font-family: 'Saira Condensed', sans-serif;
  font-weight: 500;
  font-size:15px;
}
#data_indicator{
  margin:10px;
  line-height: 1.0em;
  width: auto;
  text-shadow: 0 0 3px #000;
}

.left_column{
  float:none;
  width:300px
}
.right_column{
  float:none;
  width:300px
}

#data_indicator th {
  font-family: 'Saira Condensed', sans-serif;
  font-size:9pt;
  width:20em;
  color:#b4b9c2;
  text-align: left;
  vertical-align:bottom;
}

#data_indicator td {
  /*font-family: 'Saira Condensed', sans-serif;*/
  font-family: 'Comma', 'Lekton', monospace;
  font-weight: 300;
  font-size:10pt;
  letter-spacing: -0.02em;
  width:10em;
  color:#b4b9c2;
  padding-right:12px;
  text-align: right;
}
#data_indicator .km {
  font-family: 'Saira Condensed', sans-serif;
  font-size:7pt;
}
@media only screen and (max-width: 782px) {
  #data_indicator{
    margin:5px 0;
    line-height: 0.85em;
  }

  #data_indicator th {
    font-size:8pt;
  }
  #data_indicator td {
    font-size:9pt;
  }
}
.sun_line{
  stroke-width:1.0pt;
  stroke:#5f4e2c;
  fill: none;
  opacity:1.0;
}

.sun_label{
  font-family: 'Saira Condensed', sans-serif;
  font-weight: 500;
  font-size:14px;
  fill:#5f4e2c;
  opacity:1.0;
}

.earth_dot{
  stroke:#2c5f32;
  fill: #2c5f32;
  opacity:1.0;
}
.earth_line{
  stroke-width:1.0pt;
  stroke:#2c5f32;
  fill: none;
  opacity:1.0;
}

.earth_label{
  font-family: 'Saira Condensed', sans-serif;
  font-weight: 500;
  font-size:14px;
  fill:#2c5f32;
  opacity:1.0;
}

.hayabusa2_line{
  stroke-width:1.0px;
  stroke:#ff3eab;
  fill: none;
  opacity:1.0;
}

.hayabusa2_label{
  font-family: 'Saira Condensed', sans-serif;
  font-weight: 100;
  font-size:16px;
  fill:#ff3eab;
  opacity:1.0;
}

.hayabusa2_dot{
  fill: #ff3eab;
  opacity:1.0;
}

.event_dot{
  stroke:#9e2e6d;
  opacity:1.0;
}

.event_label{
  font-family: 'Saira Condensed', sans-serif;
  font-weight: 100;
  font-size:12px;
  fill:#9e2e6d;
  opacity:1.0;
}

.distance_label{
  font-family: 'Saira Condensed', sans-serif;
  font-weight: 200;
  font-size:10px;
  fill:#667bbc;
}

#startup_screen{
  width:100%;
  text-align:center;
  color:white;
}