#top_image {
 position: relative;
 margin-top: 13vh;
}
#top_image img{
 object-fit: cover;
 object-position: 50% 50%;
 font-family: 'object-fit: cover; object-position: 50% 50%;'
}
.top_image_cap {
 -js-display: flex;
 display: -webkit-box;
 display: -webkit-flex;
 display: -moz-box;
 display: -ms-flexbox;
 display: flex;
 align-items: center;
 justify-content: center;
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 width: 100vw;
 height: 30%;
 margin: auto;
 text-align: center;
 background-color: rgba(0, 0, 0, 0.7);
}
.top_image_cap p, .top_image_cap h2 {
 display: inline-block;
 color: #0ec2ff;
 letter-spacing: 0.09em;
 text-shadow: 0px 0px 10px #000000;
}
.top_image_cap p {
 padding: 10px 0 5px;
}
.top_image_cap h2 {
 padding: 5px 0 10px;
}
.top_image_cap_wrap {
 width: 50%;
}
.top_image_cap_wrap, .top_image_cap_back {
 position: absolute;
}
main {
 display: block;
}
#grid {
 display: -ms-grid;
 display: grid;
 color: #0ec2ff;
}
#grid h2, #grid h3, #grid h4 {
 text-align: left;
 line-height: 1.75em;
 letter-spacing: 0.08em;
}
#grid h2 {
 margin: 1.4rem 2.1rem;
}
#grid h3 {
 margin: 0.7rem 2.1rem 0.7rem;
}
#grid h3:first-child{
 margin-top: 1.4rem;
}
#grid h4 {
 margin: 0.7rem 2.1rem 0rem;
}
#grid li {
 text-align: left;
 line-height: 1.75em;
 letter-spacing: 0.09em;
 margin: 0 2.1rem 0;
}
footer {
 width: 100vw;
 text-align: center;
}
footer p {
 margin: 2vh 0 10vh;
}
@media screen and (max-width: 479px) {
 footer p {
  margin: 2vh 0 4vh;
 }
 .top_image_cap_back {
  display: none;
 }
 .top_image_cap p, .top_image_cap h2 {
  font-size: calc(1.6rem + ((1vw - 3.2px) * 3.125));
 }
 #grid h2, #grid h3, #grid h4 {
  font-size: calc(1.1rem + ((1vw - 3.2px) * 3.75));
 }
 #grid li {
  font-size: calc(1.1rem + ((1vw - 3.2px) * 3.75));
 }
 footer p {
  font-size: calc(1.2rem + ((1vw - 3.2px) * 3.75));
 }
}
@media screen and (min-width: 480px) and (max-width: 767px) {
 #top_image {
  margin: 0;
 }
 #top_image img {
  width: 100vw;
  height: 100vh;
 }
 .top_image_cap p, .top_image_cap h2 {
  font-size: calc(2rem + ((1vw - 4.8px) * 0.694));
 }
 #grid {
  -ms-grid-columns: 60vw 37vw;
  grid-template-columns: 60vw 37vw;
  -ms-grid-rows: auto auto auto;
  grid-template-rows: auto auto auto;
 }
 .grid01 {
  -ms-grid-column: 1;
  grid-column: 1;
  -ms-grid-row: 1;
  grid-row: 1;
 }
 .grid02 {
  -ms-grid-column: 2;
  grid-column: 2;
  -ms-grid-row: 1;
  grid-row-start: 1;
  grid-row-end: 4;
  -ms-grid-row-span: 3;
 }
 .grid03 {
  -ms-grid-column: 1;
  grid-column: 1;
  -ms-grid-row: 2;
  grid-row: 2;
 }
 .grid04 {
  -ms-grid-column: 1;
  grid-column: 1;
  -ms-grid-row: 3;
  grid-row: 3;
 }
 #grid h2, #grid h3, #grid h4 {
  font-size: calc(1.5rem + ((1vw - 4.8px) * 0.347));
 }
 #grid h2 {
  margin: 1.4rem 3.5rem 0.7rem 2.8rem;
 }
 #grid h3 {
  margin: 0.7rem 3.5rem 0.7rem 2.8rem;
 }
 #grid h3:first-child {
  margin-top: 0.7rem;
 }
 #grid h4 {
  margin: 0.7rem 3.5rem 0rem 2.8rem;
 }
 #grid ul {
  margin-bottom: 1.4rem;
 }
 #grid li {
  font-size: calc(1.4rem + ((1vw - 4.8px) * 0.347));
  margin: 0 2.1rem 0 2.8rem;
 }
 footer p {
  font-size: calc(0.9rem + ((1vw - 4.8px) * 1.041));
  margin: 2vh 0 4vh;
 }
 .top_image_cap_back, footer br {
  display: none;
 }
}
@media screen and (min-width: 768px) and (max-width: 959px) {
 #top_image {
  margin: 0;
 }
 #top_image img {
  width: 100%;
  height: 30vh;
 }
 .top_image_cap {
  height: 100%;
 }
 .top_image_cap p, .top_image_cap h2, .top_image_cap_back p {
  font-size: calc(2rem + ((1vw - 7.68px) * 0.694));
  margin: 0;
  padding: 0;
 }
 .top_image_cap_wrap {
  bottom: 2.8rem;
  left: 4.9rem;
  width: 55%;
  text-align: left;
 }
 .top_image_cap_back {
  display: initial;
  right: 4.9rem;
  bottom: 2.8rem;
  text-align: left;
 }
 #grid {
  -ms-grid-columns: 58vw 37vw;
  grid-template-columns: 58vw 37vw;
  -ms-grid-rows: auto auto auto;
  grid-template-rows: auto auto auto;
 }
 .grid01 {
  -ms-grid-column: 1;
  grid-column: 1;
  -ms-grid-row: 1;
  grid-row: 1;
 }
 .grid02 {
  -ms-grid-column: 2;
  grid-column: 2;
  -ms-grid-row: 1;
  grid-row-start: 1;
  grid-row-end: 4;
  -ms-grid-row-span: 3;
 }
 .grid03 {
  -ms-grid-column: 1;
  grid-column: 1;
  -ms-grid-row: 2;
  grid-row: 2;
 }
 .grid04 {
  -ms-grid-column: 1;
  grid-column: 1;
  -ms-grid-row: 3;
  grid-row: 3;
 }
 #grid h2, #grid h3, #grid h4 {
  font-size: calc(1.5rem + ((1vw - 7.68px) * 0.347));
 }
 #grid h2 {
  margin: 1.4rem 3.5rem 0.7rem 4.2rem;
 }
 #grid h3 {
  margin: 0.7rem 3.5rem 0.7rem 4.2rem;
 }
 #grid h3 :first-child {
  margin-top: 0.7rem;
 }
 #grid h4 {
  margin: 0.7rem 3.5rem 0rem 4.2rem;
 }
 #grid ul {
  margin-bottom: 1.4rem;
 }
 #grid li {
  font-size: calc(1.4rem + ((1vw - 7.68px) * 0.347));
  margin: 0 2.1rem 0 4.2rem;
 }
 footer p {
  font-size: calc(1.3rem + ((1vw - 7.68px) * 0.520));
  margin: 1.5vh 0 2vh;
 }
 .top_image_cap_wrap br, footer br {
  display: none;
 }
}
@media only screen and (device-width: 812px) and (device-height: 375px) {
 #top_image {
  padding-top: 0;
 }
 #top_image img {
  width: 100%;
  height: 100vh;
 }
 .top_image_cap p, .top_image_cap h2 {
  margin: 0;
  padding: 0;
 }
 .top_image_cap p {
  font-size: calc(2.5rem + ((1vw - 8.12px) * 0.694));
 }
 .top_image_cap h2 {
  font-size: calc(2rem + ((1vw - 8.12px) * 0.694));
 }
 .top_image_cap_wrap {
  width: 55%;
  bottom: 2.8rem;
  left: 4.9rem;
  text-align: left;
 }
 .top_image_cap_back {
  display: initial;
  right: 4.9rem;
  bottom: 2.8rem;
  text-align: left;
 }
 .top_image_cap_back p{
  font-size: calc(2rem + ((1vw - 8.12px) * 0.694));
 }
 #grid h2, #grid h3, #grid h4 {
  font-size: calc(1.5rem + ((1vw - 8.12px) * 0.347));
 }
 #grid h2 {
  margin: 1.4rem 3.5rem 0.7rem 4.2rem;
 }
 #grid h3 {
  margin: 0.7rem 3.5rem 0.7rem 4.2rem;
 }
 #grid h3 :first-child {
  margin-top: 0.7rem;
 }
 #grid h4 {
  margin: 0.7rem 3.5rem 0rem 4.2rem;
 }
 #grid ul {
  margin-bottom: 1.4rem;
 }
 #grid li {
  font-size: calc(1.4rem + ((1vw - 8.12px) * 0.347));
  margin: 0 2.1rem 0 4.2rem;
 }
 footer p {
  font-size: calc(1.3rem + ((1vw - 8.12px) * 0.347));
  margin: 4vh 0;
 }
 .top_image_cap_wrap br, footer br {
  display: none;
 }
}
@media screen and (min-width: 960px) and (max-width: 1279px) {
 #top_image {
  margin: 0;
 }
 #top_image img {
  width: 100%;
  height: 40vh;
 }
 .top_image_cap {
  height: 100%;
 }
 .top_image_cap h2, .top_image_cap p, .top_image_cap_back p {
  font-size: calc(2.2rem + ((1vw - 9.6px) * 0.312));
  margin: 0;
  padding: 0;
 }
 .top_image_cap_wrap {
  width: 55%;
  bottom: 2.8rem;
  left: 4.9rem;
  text-align: left;
 }
 .top_image_cap_back {
  display: initial;
  right: 4.9rem;
  bottom: 2.8rem;
  text-align: left;
  padding: 0;
 }
 #grid {
  -ms-grid-columns: 55vw 40vw;
  grid-template-columns: 55vw 40vw;
  -ms-grid-rows: auto auto auto;
  grid-template-rows: auto auto auto;
 }
 .grid01 {
  -ms-grid-column: 1;
  grid-column: 1;
  -ms-grid-row: 1;
  grid-row: 1;
 }
 .grid02 {
  -ms-grid-column: 2;
  grid-column: 2;
  -ms-grid-row: 1;
  grid-row-start: 1;
  grid-row-end: 4;
  -ms-grid-row-span: 3;
 }
 .grid03 {
  -ms-grid-column: 1;
  grid-column: 1;
  -ms-grid-row: 2;
  grid-row: 2;
 }
 .grid04 {
  -ms-grid-column: 1;
  grid-column: 1;
  -ms-grid-row: 3;
  grid-row: 3;
 }
 #grid h2, #grid h3, #grid h4 {
  font-size: calc(1.6rem + ((1vw - 9.6px) * 0.347)); 
 }
 #grid h2 {
  margin: 1.4rem 3.5rem 0.7rem 4.2rem;
 }
 #grid h3 {
  margin: 0.7rem 3.5rem 0.7rem 4.2rem;
 }
 #grid h3 :first-child {
  margin-top: 0.7rem;
 }
 #grid h4 {
  margin: 0.7rem 3.5rem 0rem 4.2rem;
 }
 #grid ul {
  margin-bottom: 1.4rem;
 }
 #grid li {
  font-size: calc(1.5rem + ((1vw - 9.6px) * 0.347));
  margin: 0 2.1rem 0 4.9rem;
 }
 footer p {
  font-size: calc(1.4rem + ((1vw - 9.6px) * 0.347));
  margin: 2vh 0;
 }
 .top_image_cap_wrap br, footer br {
  display: none;
 }
}
@media screen and (min-width: 1280px) {
 #body{
  width: 90vw;
  margin: 0 auto;
 }
 #top_image {
  margin: 0;
 }
 #top_image img {
  width: 90vw;
  height: 50vh;
 }
 .top_image_cap {
  width: 90vw;
  height: 105%;
 }
 .top_image_cap h2, .top_image_cap p, .top_image_cap_back p {
  font-size: calc(2.5rem + ((1vw - 12.8px) * 0.312));
  letter-spacing: 0.09em;
  margin: 0;
  padding: 0;
 }
 .top_image_cap_wrap {
  width: 55%;
  bottom: 3.5rem;
  left: 4.9rem;
  text-align: left;
 }
 .top_image_cap_back {
  display: initial;
  right: 4.9rem;
  bottom: 3.5rem;
  text-align: left;
 }
 #grid {
  -ms-grid-columns: 50vw 35vw;
  grid-template-columns: 50vw 35vw;
  -ms-grid-rows: auto auto auto;
  grid-template-rows: auto auto auto;
 }
 .grid01 {
  -ms-grid-column: 1;
  grid-column: 1;
  -ms-grid-row: 1;
  grid-row: 1;
 }
 .grid02 {
  -ms-grid-column: 2;
  grid-column: 2;
  -ms-grid-row: 1;
  grid-row-start: 1;
  grid-row-end: 4;
  -ms-grid-row-span: 3;
 }
 .grid03 {
  -ms-grid-column: 1;
  grid-column: 1;
  -ms-grid-row: 2;
  grid-row: 2;
 }
 .grid04 {
  -ms-grid-column: 1;
  grid-column: 1;
  -ms-grid-row: 3;
  grid-row: 3;
 }
 #grid h2, #grid h3, #grid h4 {
  font-size: calc(1.8rem + ((1vw - 12.8px) * 0.347));
 }
 #grid h2 {
  margin: 1.4rem 3.5rem 0.7rem 3.5rem;
 }
 #grid h3 {
  margin: 0.7rem 3.5rem 0.7rem 3.5rem;
 }
 #grid h3 :first-child {
  margin-top: 0.7rem;
 }
 #grid h4 {
  margin: 0.7rem 3.5rem 0rem 3.5rem;
 }
 #grid ul {
  margin-bottom: 1.4rem;
 }
 #grid li {
  font-size: calc(1.7rem + ((1vw - 12.8px) * 0.347));
  margin: 0 2.8rem 0 3.5rem;
 }
 footer {
  width: 90vw;
 }
 footer p {
  font-size: calc(1.8rem + ((1vw - 12.8px) * 0.454));
  margin: 2vh 0;
 }
 .top_image_cap_wrap br, footer br {
  display: none;
 }
}