@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;
}

#orbit_diagram{
  position: absolute;
  right:60px;
  top:0;
  z-index: 1;
  width: 540px;
  height: 540px;
  margin-left: 0;
  margin-top: 40px;
}

#orbit_diagram svg{
  position: absolute;
  left:0;
  top:0;
}


#indicator {
  position: absolute;
  z-index: 100;
  bottom: 0;
  left: 60px;
  width: fit-content;
  display: flex;
  flex-direction: column;
}

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

.new_mission::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_new_mission.jpg");
}

@media only screen and (max-width: 782px) {
  #orbit_diagram{
    position: absolute;
    left:0;
    right: 0;
    margin: auto;
    top:0;
    width:100%;
    height:100%;
  }
  #orbit_diagram{
    z-index: 1;
    width: 95vw;
    height: 95vw;
    max-width: 480px;
    max-height: 480px;
  }
  #ies_graph{
    z-index: 0;
    width: 80vw;
    height: 80vw;
    max-width: 450px;
    max-height: 450px;
    margin-top: 165px;
    margin-left: auto;
    margin-right: 0;
    left: initial;
    right: -60px;
  }

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

  #indicator {
    flex-direction: column;
    justify-content: flex-start;
    left:10px;
    width: 100%;
    align-items: flex-start;
  }
}
@media only screen and (max-width: 540px) {
  .new_mission::before {
    background-size: auto 320px;
    background-position: right top;
    opacity: 0.65;
  }
}
#distance_indicator{
  padding:0;
  margin:5px;
  margin-right: 40px;
  text-shadow: 0px 0px 15px #001129;
}

#new_mission_title{
  color: #1d3f58;
  font-family: 'Saira Condensed', sans-serif;
  font-size: 40px;
  font-weight: 200;
  text-align: left;
  white-space: nowrap;
  line-height: 0.75em;
  letter-spacing: 0.04rem;
}
@media only screen and (max-width: 782px){
  #new_mission_title{
    font-size: 26px;
  }
}
#new_mission_title>.num{
  font-weight: 400;
}
#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;
}
.separate＿num i{
  display: inline-block;
  padding-left:0.2em;
  width: 0;
}
#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:24px;
    line-height: 1.0em;
  }
  #distance_en{
    font-size:18px;
  }
  #distance_num{
    font-size:36px;
    line-height: 1.0;
  }
  #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;
}

.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;
}
.tick text{
  font-size: 8px;
}
.y_unit{
  font-size: 8px;
  color:#bbb;
}
#ies_status{
  position: absolute;
  bottom: 165px;
  left: 700px;
  margin: 10px;
  line-height: 1.0em;
  width: auto;
  font-family: 'Saira Condensed', sans-serif;
  font-size:10px;
  color:#b4b9c2;
}
#ies_status th {
  font-family: 'Saira Condensed', sans-serif;
  font-size:10px;
  width:6em;
  color:#b4b9c2;
  text-align: left;
  vertical-align:bottom;
}
#ies_status thead th {
  width: 100%;
}
#ies_status td {
  /*font-family: 'Saira Condensed', sans-serif;*/
  font-family: 'Comma', 'Lekton', monospace;
  font-weight: 300;
  font-size:10px;
  letter-spacing: -0.02em;
  width:7em;
  color:#b4b9c2;
  padding-right:12px;
  text-align: right;
}
#ies_status .km {
  font-family: 'Saira Condensed', sans-serif;
  font-size:8px;
}

@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;
  }

  #ies_status{
    top: 270px;
    bottom: initial;
    left: initial;
    right: 20px;
  }
}
@media only screen and (max-width: 400px) {
  #ies_status{
    top: 260px;
    bottom: initial;
    left: 0;
    right: inherit;
  }
}
.sun_line{
  stroke-width:1.0pt;
  stroke:#be8f30;
  fill: none;
  opacity:1.0;
}

.sun_label{
  font-family: 'Saira Condensed', sans-serif;
  font-weight: 100;
  font-size:14px;
  fill:#be8f30;
  opacity:1.0;
}
.sun_dot{
  stroke:#be8f30;
  fill: #be8f30;
  opacity:1.0;
}
.earth_dot{
  stroke:#3a7c41;
  fill: #3a7c41;
  opacity:1.0;
}
.earth_line{
  stroke-width:1.0pt;
  stroke:#3a7c41;
  fill: none;
  opacity:1.0;
}

.earth_label{
  font-family: 'Saira Condensed', sans-serif;
  font-weight: 100;
  font-size:14px;
  fill:#479a4f;
  opacity:1.0;
}

.asteroid_2001cc21_dot{
  stroke:#10abec;
  fill: #10abec;
  opacity:1.0;
}
.asteroid_2001cc21_label{
  font-family: 'Saira Condensed', sans-serif;
  stroke:#10abec;
  font-weight: 100;
  font-size:12px;
  opacity:1.0;
}
.asteroid_2001cc21_line{
  stroke-width:1.0pt;
  stroke:#10abec;
  fill: none;
  opacity:1.0;
}

.asteroid_1998ky26_dot{
  stroke:#708090;
  fill: #708090;
  opacity:1.0;
}
.asteroid_1998ky26_label{
  font-family: 'Saira Condensed', sans-serif;
  stroke:#90a4b9;
  font-weight: 100;
  font-size:12px;
  opacity:1.0;
}
.asteroid_1998ky26_line{
  stroke-width:1.0pt;
  stroke:#708090;
  fill: none;
  opacity:1.0;
}

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

.hayabusa2_future_line{
  stroke-width:1.0pt;
  stroke:#ff3eab;
  fill: none;
  opacity:1.0;
}

.hayabusa2_past_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{
  stroke:#ff3eab;
  fill: #ff3eab;
  opacity:1.0;
}

.hayabusa2_footprint_dot{
  stroke:#9e2e6d;
  fill: #9e2e6d;
  opacity:1.0;
}

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

.event_dot{
  stroke:#9e2e6d;
  fill: #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;
}