:target {
  scroll-margin-top: 50px;
}

body {
  display: grid;
  grid-template: "edge_tl . head head . edge_tr" "edge_s edge_s edge_s edge_s edge_s edge_s" "edge_l . main side . edge_r" "edge_bl . foot foot . edge_br";
  grid-template-columns: 1fr 4px minmax(100px, 800px) 250px 4px 1fr;
  grid-template-rows: 40px 4px 1fr 60px;
  justify-content: stretch;
}
body a {
  color: #008101;
}
body a:visited {
  color: #595959;
}
@media (max-width: 800px) {
  body {
    grid-template: "head" "edge_s" "main" "side" "foot";
    grid-template-rows: 40px 4px 1fr auto 60px;
  }
}

main {
  grid-area: main;
  line-height: 1.7;
  margin: 0 10px 0 10px;
}

.edge {
  display: contents;
}
@media (max-width: 800px) {
  .edge .top_left, .edge .top_right, .edge .left, .edge .right, .edge .bottom_left, .edge .bottom_right {
    display: none;
  }
}
.edge .top_space {
  grid-area: edge_s;
  position: sticky;
  top: 40px;
  z-index: 10;
  background-color: #FFFFFF;
}
.edge .top_left {
  background-color: #46CD7F;
  grid-area: edge_tl;
  justify-self: right;
  width: 30px;
  position: sticky;
  top: 0px;
  z-index: 10;
}
.edge .top_right {
  background-color: #46CD7F;
  grid-area: edge_tr;
  justify-self: left;
  width: 30px;
  position: sticky;
  top: 0px;
  z-index: 10;
}
.edge .left {
  background-color: #7CCA62;
  grid-area: edge_l;
  justify-self: right;
  width: 30px;
  margin: 0 0 4px 0;
}
.edge .right {
  background-color: #7CCA62;
  grid-area: edge_r;
  justify-self: left;
  width: 30px;
  margin: 0 0 4px 0;
}
.edge .bottom_left {
  background-color: #46CD7F;
  grid-area: edge_bl;
  justify-self: right;
  width: 30px;
}
.edge .bottom_right {
  background-color: #46CD7F;
  grid-area: edge_br;
  justify-self: left;
  width: 30px;
}

header {
  grid-area: head;
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  font-size: 0.9rem;
  grid-template-columns: 1fr;
  background-color: #FFFFFF;
  gap: 4px;
}
@media (max-width: 800px) {
  header {
    grid-template-columns: 1fr;
  }
  header .tab_neg {
    grid-template-columns: 1fr;
  }
  header .tab_neg p {
    display: none;
  }
  header img {
    justify-self: center;
  }
}
header .menu {
  display: grid;
  grid-template-columns: repeat(6, auto);
  align-items: end;
  padding: 0 5px 0 5px;
  gap: 3px;
  background-color: #10CF9B;
}
header .menu a {
  display: grid;
  grid-template-columns: 35px auto;
  align-content: center;
  justify-content: center;
  align-items: center;
  padding: 0 3px 0 3px;
  border-radius: 10px 10px 0 0;
  height: 85%;
}
header .menu a img {
  width: 25px;
}
header .menu .tab_pos {
  background-color: #FFFFFF;
}
header .menu .tab_neg {
  color: #595959;
  background-color: #C8F3E6;
}
header .menu .tab_neg:hover {
  font-weight: bold;
}

footer {
  grid-area: foot;
  display: grid;
  grid-template: "to_top info mail . logo_footer";
  grid-template-columns: auto auto auto 1fr auto;
  grid-template-rows: 1fr;
  justify-items: start;
  align-content: center;
  align-items: center;
  gap: 10px;
  padding: 5px;
  background-color: #10CF9B;
  color: #595959;
}
@media (max-width: 800px) {
  footer {
    grid-template: "to_top info mail . logo_footer";
    grid-template-columns: auto auto auto 1fr auto;
    grid-template-rows: 1fr;
  }
  footer .to_top, footer .mail, footer .info {
    gap: 0;
  }
  footer p {
    display: none;
  }
  footer img {
    justify-self: center;
  }
}
footer .to_top {
  grid-area: to_top;
  display: grid;
  grid-template-columns: 30px auto;
  align-content: center;
  align-items: center;
  gap: 0px;
  background-color: #FFFFFF;
  font-size: 0.8rem;
  border-radius: 12px;
  padding: 7px;
}
footer .to_top img {
  width: 25px;
}
footer .info {
  grid-area: info;
  display: grid;
  grid-template-columns: 30px auto;
  align-content: center;
  align-items: center;
  gap: 0px;
  background-color: #FFFFFF;
  font-size: 0.8rem;
  border-radius: 12px;
  padding: 7px;
}
footer .info img {
  width: 25px;
}
footer .mail {
  grid-area: mail;
  display: grid;
  grid-template-columns: 30px auto;
  align-content: center;
  align-items: center;
  gap: 0px;
  background-color: #FFFFFF;
  font-size: 0.8rem;
  border-radius: 12px;
  padding: 7px;
}
footer .mail img {
  width: 25px;
}
footer .logo_footer {
  grid-area: logo_footer;
  display: grid;
}
footer .logo_footer img {
  height: 50px;
}

aside {
  grid-area: side;
  line-height: 1.4;
  background-color: #C8F3E6;
  border-radius: 20px;
  font-size: 0.8rem;
  padding: 10px;
  margin: 10px 0 10px 0;
  width: max(90%, 220px);
  justify-self: center;
}
aside h3 {
  font-size: 0.936rem;
  border-bottom: solid 3px #00B050;
  margin: 0 10px 0 10px;
}
aside .aside_related_contents {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
  justify-content: space-around;
  margin: 10px 0 10px 0;
}
aside .aside_related_contents .items {
  display: grid;
  padding: 10px;
  background-color: #FFFFFF;
  border: 2px solid #10CF9B;
  border-radius: 15px;
}
aside .aside_related_contents .items .description {
  display: grid;
  grid-auto-flow: column;
  justify-content: start;
  align-items: center;
}
aside .aside_related_contents .items .description img {
  width: 14px;
  margin-right: 0.3rem;
}
aside .aside_related_contents .items .description .underline {
  text-decoration: underline;
  text-decoration-thickness: 0.5em;
  text-decoration-color: #87E7CD;
  text-underline-offset: -0.3em;
  text-decoration-skip-ink: none;
}
aside .aside_related_contents .items .thumbnail img {
  width: max(100%, 200px);
  justify-self: center;
}
aside .aside_related_contents .items .update {
  display: grid;
  grid-auto-flow: column;
  justify-content: end;
  align-items: center;
  column-gap: 0.3rem;
  color: #595959;
}
aside .aside_related_contents .items .update img {
  width: 14px;
}
aside .aside_latest_movies {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
  justify-content: space-around;
  margin: 10px 0 10px 0;
}
aside .aside_latest_movies .movie {
  display: grid;
  padding: 10px;
  background-color: #FFFFFF;
  border: 2px solid #10CF9B;
  border-radius: 15px;
}
aside .aside_latest_movies .movie .thumbnail {
  width: max(100%, 200px);
  justify-self: center;
}
aside .aside_latest_movies .movie .update {
  display: grid;
  grid-auto-flow: column;
  justify-content: end;
  align-items: center;
  column-gap: 0.3rem;
  color: #595959;
}
aside .aside_latest_movies .movie .update img {
  width: 14px;
}
aside .aside_contents_list {
  position: sticky;
  top: 50px;
}
aside .aside_contents_list .content {
  background-color: #FFFFFF;
  line-height: 2rem;
  border: 2px solid #10CF9B;
  border-radius: 10px;
  padding: 10px;
  margin: 10px;
  list-style-position: outside;
}
aside .aside_contents_list .content li {
  font-size: 0.9rem;
  margin-left: 1.5em;
  text-indent: -1.5em;
}