@charset "UTF-8";
/* CSS Document */
html, body {
  overflow-x: hidden; /* 横方向のはみ出しをカット */
  width: 100%;
}
ul.nav-list {
  display: flex;
  list-style: none;
  gap: 20px;
  justify-content: center;
align-items: center;
width: 100%;
margin: 0;
padding: 0;
}

ul.nav-list a {
  text-decoration: none;
color: #222;
width: calc(100% / 4);
padding:20px;
}
ul.nav-list :hover{
color: #3d62ac;
}
/* ハンバーガーボタンはPCでは隠す */
.menu-trigger {
  display: none;
}

/* --- スマホスタイル (768px以下) --- */
@media screen and (max-width: 768px) {
  .menu-trigger {
    display: block;
    position: relative;
    width: 30px;
    height: 24px;
    background: none;
    border: none;
    z-index: 100;
  }

  /* 三本線のデザイン */
  .menu-trigger span {
    display: block;
    position: absolute;
    width: 100%;
    height: 2px;
    background: #333;
    transition: all 0.3s;
  }
  .menu-trigger span:nth-child(1) { top: 0; }
  .menu-trigger span:nth-child(2) { top: 11px; }
  .menu-trigger span:nth-child(3) { bottom: 0; }

  /* 開いた時の三本線の変化 (×印) */
  .is-active .menu-trigger span:nth-child(1) { transform: translateY(11px) rotate(45deg); }
  .is-active .menu-trigger span:nth-child(2) { opacity: 0; }
  .is-active .menu-trigger span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); }

  /* ナビゲーションを右側に隠す */
  .nav {
    position: fixed;
    top: 0;
    right: -100%; /* 画面外に配置 */
    width: 70%;
    height: 100vh;
    background: #fff;
    z-index: 90;
    transition: all 0.4s;
    padding-top: 80px;
  }

  .is-active .nav { right: 0; } /* 表示状態 */

  .nav-list {
    flex-direction: column;
    padding-left: 40px;
    gap: 30px;
	
  }
  .nav-list li{
  border-bottom: 1px solid #ccc;
  width: 100%;
  text-align: center;
  padding: 0 0 20px;
  }
  /* 背景の暗幕 */
  .overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 80;
  }
  .is-active .overlay { display: block; }
}