/* Style for PCs */
@media screen and (min-width: 1025px) {

/* Header */
header {
  width:100%;
  height: 60px;
  display: block;
  position: fixed;
  top:0;
  left:0;
  z-index:18500;
  transition: .4s all;
}
header figure {
  width:150px;
  height: 40px;
  display: block;
  position: fixed;
  top:15px;
  left:10px;
  z-index:18600;
}
header figure img {
  width:auto;
  height: 40px;
  display: block;
}

header.hr_act {
  height: 70px;
  background-color: rgba(255,255,255,0.7);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  box-shadow: 0px 10px 10px rgba(0,0,0,0.1);
}


/* Footer */
footer {
  width:100%;
  height: auto;
  display: block;
  padding:50px 5%;
  }
  footer ul {
  text-align: center;
  margin-bottom: 10px;
  }
  footer ul li {
  display: inline;
  zoom: 1;
  padding-right: 10px;
  font-size: 0.6em;
  line-height: 2em;
  }
  footer ul li a {
  color:var(--color-white);
  line-height: 1.25em;
  text-decoration: none;
  }
  footer ul li a:hover {
  color:var(--color-white);
  }
  footer p.ftcopy {
  width:100%;
  height: 40px;
  display: block;
  font-size:0.6em;
  font-weight: 200;
  line-height: 40px;
  color:var(--color-white);
  text-align: center;
  }

}


/* Style for iPad Pro */
@media screen and (min-width: 769px) and (max-width: 1024px) {

/* Header */
header {
width:100%;
height: 70px;
display: block;
position: fixed;
top:0;
left:0;
z-index:18500;
transition: .4s all;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
header figure {
width:150px;
height: 40px;
display: block;
position: fixed;
top:15px;
left:10px;
z-index:18600;
}
header figure img {
width:auto;
height: 40px;
display: block;
}

header.hr_act {
height: 70px;
background-color: rgba(255,255,255,0.7);
box-shadow: 0px 10px 10px rgba(0,0,0,0.2);
}


/* Footer */
footer {
width:100%;
height: auto;
display: block;
padding:50px 5%;
}
footer ul {
text-align: center;
margin-bottom: 10px;
}
footer ul li {
display: inline;
zoom: 1;
padding-right: 10px;
font-size: 0.6em;
line-height: 2em;
}
footer ul li a {
color:var(--color-white);
line-height: 1.25em;
text-decoration: none;
}
footer ul li a:hover {
color:var(--color-white);
}
footer p.ftcopy {
width:100%;
height: 40px;
display: block;
font-size:0.6em;
font-weight: 200;
line-height: 40px;
color:var(--color-white);
text-align: center;
}

}

/* Style for Smartphone */
@media screen and (max-width: 768px) {

  /* Header */
header {
  width:100%;
  height: 70px;
  display: block;
  position: fixed;
  top:0;
  left:0;
  z-index:18500;
  transition: .4s all;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  }
  header figure {
  width:150px;
  height: 40px;
  display: block;
  position: fixed;
  top:15px;
  left:10px;
  z-index:18600;
  }
  header figure img {
  width:auto;
  height: 40px;
  display: block;
  }

  header.hr_act {
  height: 70px;
  background-color: rgba(255,255,255,0.7);
  box-shadow: 0px 10px 10px rgba(0,0,0,0.2);
  }


  /* Footer */
  footer {
  width:100%;
  height: auto;
  display: block;
  padding:50px 5% 80px;
  }
  footer ul {
  text-align: center;
  margin-bottom: 10px;
  }
  footer ul li {
  display: inline;
  zoom: 1;
  padding-right: 10px;
  font-size: 0.6em;
  line-height: 2em;
  }
  footer ul li a {
  color:var(--color-white);
  line-height: 1.25em;
  text-decoration: none;
  }
  footer ul li a:hover {
  color:var(--color-white);
  }
  footer p.ftcopy {
  width:100%;
  height: 40px;
  display: block;
  font-size:0.6em;
  font-weight: 200;
  line-height: 40px;
  color:var(--color-white);
  text-align: center;
  }

}