* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: rgba(0,0,0,0.02);
  font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN",
               "メイリオ", Meiryo,
               "ＭＳ Ｐゴシック", "MS PGothic",
               sans-serif;
}

.title {
    text-align: left !important;
    font-size: 10px;
}


.header {
    display: block !important;
    grid-column: span 3 / span 3;
    background: #fff;
    padding-bottom: 0 !important;
}
.header a > img {
    width:130px;
}
.nav {
    grid-column: span 3 / span 3;
    grid-row-start: 2;
    padding: 0 !important;
}

.footer {
    grid-column: span 3 / span 3;
    grid-row-start: 7;
    background: rgba(0,0,0,0.02) !important;
}

.footer p {
    text-align: center;
    font-size:10px;
    margin:0;
}

/* global menu */
/* リセット */
body, ul, li {
  margin: 0;
  padding: 0;
}
ul { list-style: none; }
a { text-decoration: none; color: inherit; }
a:hover{opacity: 0.6;}
/* 共通スタイル */
.gnav {
  background: #333;
  color: #fff;
  position: relative;
  width:100%;
}
.gnav a {
  display: block;
  padding: 7px 20px;
  color: #fff;
  transition: background 0.3s;
}
.gnav a:hover {
  background: #555;
}

/* PC時（横並び＋ドロップダウン） */
.gnav ul {
  display: flex;
  justify-content: left;
}
.gnav li {
  position: relative;
  font-size: 10px;
  letter-spacing: 3px;
}
.gnav .dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 160px;
  background: #444;
  flex-direction: column;
  z-index: 1000;
}
.gnav .dropdown li a {
  padding: 5px 10px;
  border-bottom: 1px solid #555;
}
.gnav li:hover > .dropdown {
  display: flex;   /* ホバーでドロップダウン表示 */
}
span.arrow {font-size:0.4em;vertical-align: middle;}
/* ハンバーガーボタン */
.menu-toggle {
  display: none;
  font-size: 24px;
  padding: 1px 12px 4px 12px;
  cursor: pointer;
}

/* スマホ時（ドロワーメニュー） */
@media (max-width: 640px) {
  .menu-toggle {
    display: block;
  }
  .gnav ul {
    flex-direction: column;
    position: fixed;
    top: 0;
    right: -250px;          /* 初期は画面外 */
    width: 250px;
    height: 100%;
    background: #333;
    padding-top: 60px;
    transition: right 0.3s ease;
  }
  .gnav ul.show {
    right: 0;              /* 開いたとき */
  }
  .gnav a {
    border-bottom: 1px solid #444;
  }
  /* スマホではドロップダウンを展開型に変更 */
  .gnav .dropdown {
    position: static;
    display: none;
    background: #444;
  }
  .gnav .has-sub.open > .dropdown {
    display: block; /* タップで開く */
  }
  .gnav li:hover > .dropdown {
    display: none; /* スマホではhover無効 */
  }
  .menu-toggle {
    display: block;
    position: fixed;     /* 画面に固定 */
    top: 10px;           /* 上から10px */
    right: 10px;         /* 右から10px */
    z-index: 1100;       /* メニューより前面に表示 */
    background: #333;    /* 背景を同じ色で */
    border-radius: 4px;
  }

  .gnav ul {
    flex-direction: column;
    position: fixed;
    top: 0;
    right: -250px;       /* 初期は画面外 */
    width: 250px;
    height: 100%;
    background: #333;
    padding-top: 60px;   /* メニュー内余白 */
    transition: right 0.3s ease;
    z-index: 1000;       /* ハンバーガーの下になる */
  }

  .gnav ul.show {
    right: 0;
  }
}


/*****スライドショー******/
.slideshow {
  position: relative;
  max-width: 577px;
  margin: 0 auto;
  overflow: hidden;
  min-height: 350px;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 1s ease;
}
.slide img {
  display: block;
  width: 100%;
}
.slide.active {
  opacity: 1;
  z-index: 1;
}

/* 矢印ボタン */
.controls span {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;          /* ← 文字サイズで大きさを制御 */
  line-height: 1;           /* ← 高さを文字に合わせる */
  color: rgba(0,0,0,0.3);
  padding: 5px;
  cursor: pointer;
  user-select: none;
  /*background: rgba(0,0,0,0.1);*/
  z-index: 2;
}
.controls .prev { left: 10px; }
.controls .next { right: 10px; }

/* ドット */
.dots {
  text-align: center;
  position: absolute;
  bottom: 5px;
  width: 100%;
  z-index: 2;
}
.dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin: 0 2px;
  background: rgba(255,255,255,0.5);
  border-radius: 50%;
  cursor: pointer;
}
.dot.active {
  background: white;
}