:root {
  --font-size: 16px;
  --max-width: 1200px;
  --main-backgroud-color: #222;
}

* { margin: 0; padding: 0; box-sizing: border-box; word-break: break-word;  }
html, 
body { width: 100%; height: 100%; margin: 0; font-size: var(--font-size); letter-spacing: 2px; }
ul, li { list-style: none; }
a { text-decoration: none; }
img { max-width: 100%; }

.zg-ctn { max-width: var(--max-width); margin: auto; }
.zg-header { background-color: var(--main-backgroud-color); height: 60px; padding: 15px; }
.zg-header .zg-logo { max-height: 100%; }

.zg-header-pc { display: flex; height: 100%; }

.zg-nav { display: flex; align-items: center; }
.zg-nav li { flex: 0 0 120px; text-align: center; }
.zg-nav li a { color: white; }

.zg-banner { width: 100%; height: 600px; }
.zg-banner img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

.zg-series-list { background-color: var(--main-backgroud-color); padding: 40px 0; }
.zg-series-list h1 { color: white; font-size: 40px; text-align: center; margin-bottom: 60px; }
.zg-series-list ul { display: flex; }
.zg-series-list li { flex: 0 0 25%; padding: 0 10px; }
.zg-series-list .zg-font { color: white; text-align: center; font-size: 18px; padding: 10px 0; }

.zg-three-mouth { background-color: black; padding: 40px 0; }
.zg-three-mouth .zg-title { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 20px 0; }
.zg-three-mouth h1 { color: white; }
.zg-three-mouth img { border-radius: 10px; }
.zg-three-mouth .zg-two-img { display: flex; justify-content: space-between; margin-top: 5px; }
.zg-three-mouth .zg-two-img img { width: 49.5%; }

.zg-swiper-1 { background-color: black; padding: 40px 0; }
.zg-swiper-1 h1 { color: white; font-size: 40px; text-align: center; margin-bottom: 60px; }
.zg-swiper-1 .swiper-button-prev { left: var(--swiper-navigation-sides-offset, 80px); color: white; }
.zg-swiper-1 .swiper-button-next { right: var(--swiper-navigation-sides-offset, 80px); color: white; }

@media only screen and (min-width:1024px) {
  .zg-mb { display: none; }
}

@media only screen and (max-width:1024px) {
  .zg-pc { display: none; }

  .zg-banner { height: 300px; }

  .zg-series-list { padding: 20px 10px; }
  .zg-series-list h1 { font-size: 25px; margin-bottom: 25px; }
  .zg-series-list li { padding: 0 5px; }
  .zg-series-list .zg-font { color: #a1a1a1; font-size: 16px; padding: 5px 0; }

  .zg-three-mouth { padding: 20px 10px; }
  .zg-three-mouth .zg-title { display: block; text-align: center; }
  .zg-three-mouth h1 { margin-bottom: 20px; font-size: 25px; }

  .zg-swiper-1 h1 { font-size: 25px; margin-bottom: 25px; }
  .zg-swiper-1 .swiper-button-prev { left: var(--swiper-navigation-sides-offset, 10px); }
  .zg-swiper-1 .swiper-button-next { right: var(--swiper-navigation-sides-offset, 10px); }
}