@import url("../../css/reset.css");
.menu { position: fixed; width: 100%; top: 0; padding: 10px; background: white; height: 5vh; border-bottom: 5px solid #246; z-index: 99; }
.menu h1 { font-size: 2.0rem; color: #246; font-family: cursive,'Pacifico'; }

.nav_toggle { position: fixed; top: 13px; right: 10px; display: block; width: 1.75rem; height: 1.5rem; }
.nav_toggle i { display: block; width: 100%; height: 2px; background-color: #333; position: absolute; transition: transform 0.5s, opacity 0.5s; }
.nav_toggle i:nth-child(1) { top: 0; }
.nav_toggle i:nth-child(2) { top: 0; bottom: 0; margin: auto; }
.nav_toggle i:nth-child(3) { bottom: 0; }

.show i:nth-child(1) { transform: translateY(10px) rotate(-45deg); }
.show i:nth-child(2) { opacity: 0; }
.show i:nth-child(3) { transform: translateY(-12px) rotate(45deg); }

.nav { background: #fff; position: fixed; top: 7vh; left: 0; right: 0; bottom: 0; padding: 1rem; opacity: 0; visibility: hidden; transition: opacity 0.5s; }
.nav .show { height: 100%; }

.show { z-index: 2; opacity: 1; visibility: visible; }
.show ul { padding: 10px; }
.show ul li { padding: 10px; background: #fff; text-align: left; border-bottom: 1px solid #245; }
.show ul li a { list-style: none; text-decoration: none; color: #000; font-weight: bold; font-family: monospace; font-size: 1.3rem; }

.pc_nav { display: none; }

.frame { z-index: 1; margin: 8vh 5vw; display: grid; grid-template-columns: 1fr; grid-row-gap: 3vh; grid-template-areas: "h1" "photo" "site" "cg" "movie" "DTP" "BD"; }
.frame h1 { margin-top: 3vh; font-size: 2.0rem; font-family: cursive,'Pacifico',serif; color: #246; text-align: center; }
.frame .photo { grid-area: photo; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 2.0rem 1fr 1fr 1fr; grid-row-gap: 10px; grid-column-gap: 7px; grid-template-areas: "title title" "img1 img2" "img3 img4" "img5 img6"; }
.frame .photo a img { width: 100%; }
.frame h2 { font-size: 2.0rem; font-family: cursive,'Pacifico',serif; grid-area: title; border-bottom: 2px solid #000; }
.frame #site { grid-area: site; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 2.0rem 1fr 1fr; grid-row-gap: 10px; grid-column-gap: 7px; grid-template-areas: "h2 h2" "img9 img10" "img11 img12"; }
.frame #site h2 { grid-area: h2; }
.frame #site a img { width: 100%; }

#cg { grid-area: cg; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 2.0rem 1fr; grid-row-gap: 10px; grid-column-gap: 7px; grid-template-areas: "h2 h2" "img9 img10" "img11 img12"; }
#cg h2 { grid-row: 1/2; grid-column: 1/3; }
#cg a img { width: 100%; }

#movie { grid-area: movie; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 2.0rem 1fr; grid-row-gap: 10px; grid-column-gap: 7px; grid-template-areas: "h2 h2" "img9 img10" "img11 img12"; }
#movie h2 { grid-row: 1/2; grid-column: 1/3; }
#movie a img { width: 100%; }

#DTP { grid-area: DTP; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 2.0rem 1fr; grid-row-gap: 10px; grid-column-gap: 7px; grid-template-areas: "h2 h2" "img9 img10" "img11 img12"; }
#DTP h2 { grid-row: 1/2; grid-column: 1/3; }
#DTP a img { width: 100%; }

#BD { grid-area: BD; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 2.0rem 1fr; grid-row-gap: 10px; grid-column-gap: 7px; grid-template-areas: "h2 h2" "img9 img10" "img11 img12"; }
#BD h2 { grid-row: 1/2; grid-column: 1/3; }
#BD a img { width: 100%; }

footer { background: #444; color: #fff; }
footer p { line-height: 50px; text-align: center; }

@media (min-width: 720px) { .nav_toggle { display: none; }
  .pc_nav { display: block; position: fixed; top: 15px; right: 10px; }
  .pc_nav ul li { display: inline-block; padding: 5px 1rem; }
  .pc_nav ul li a { text-decoration: none; font-size: 1.5rem; color: #246; }
  .pc_nav ul li:hover { background: #ddf; transition: background 1s; }
  .frame { z-index: 1; margin: 8vh 10vw; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-row-gap: 3vh; grid-column-gap: 3vw; grid-template-areas: "h1 h1 h1" "photo site DTP" "movie cg BD"; }
  .frame h1 { grid-area: h1; }
  .frame #DTP { grid-template-rows: 2.0rem; } }

/*# sourceMappingURL=style.css.map */