/* css/style.css */

body {
    font-family: "Hiragino Sans", "Noto Sans JP", sans-serif;
    line-height: 1.6;
    margin: 0;
  }

  header, main, footer {
    max-width: 960px;
    margin: auto;
    padding: 1rem;
  }

  header {
      color: #333;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  header h1 {
    font-size: 1.2rem;
font-weight:bold;
    margin: 0;
  }

  header img {
    max-width: 250px;
    height: auto;
  }

  main {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
  }


a {
    color: #333; /* 好きな色 */
    text-decoration: none;
  }
  
  a:hover {
    color: #dec978; /* ホバー時の色 */
  }
  
  a:active {
    color: #7aa842; /* クリック時の色 */
  }

  

  .backnumbers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1.5rem;
    list-style: none;
    padding: 0;
    margin: 2rem 0;
  }

  .backnumbers img {
    width: 100%;
    height: auto;
    border: 1px solid #ddd;
    border-radius: 6px;
  }

  footer {
    font-size: 0.9rem;
    color: #666;
    text-align: center;
    border-top: 1px solid #ccc;
    padding: 1rem 0;
    margin-top: 2rem;
  }



/* バックナンバーのグリッド */
.backnumbers {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 1.5rem;
list-style: none;
padding: 0;
margin: 2rem 0;
}

.backnumbers li {
text-align: center;
}

/* 小さい画面では1列 */
@media (max-width: 600px) {
.backnumbers {
  grid-template-columns: 1fr;
}
}

/* ヘッダー */

/* ロゴ */
  .logo {
    font-size: 24px;
    font-weight: bold;
  }

  /* ナビゲーション */
  nav ul {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
  }

  nav ul li {
    margin-left: 20px;
  }

  nav ul li a {
    color: #333;
    text-decoration: none;
    font-size: 1.2rem;
    transition: color 0.3s;
  }

  nav ul li a:hover {
    color: #d8d6cc;
  }

  /* レスポンシブ対応（小さい画面で縦並びに） */
  @media (max-width: 600px) {
    header {
      flex-direction: column;
      align-items: flex-start;
    }
    nav ul {
      flex-direction: column;
      width: 100%;
    }
    nav ul li {
      margin: 10px 0;
    }
  }



/* バックナンバーのページ */

.issue {
display: flex;
gap: 20px;
margin-bottom: 3rem;
border-bottom: 1px solid #ddd;
padding-bottom: 2rem;
}
.issue .cover img {
max-width: 160px;
height: auto;
}
.issue .details {
flex: 1;
}
.issue h2 {
margin: 0 0 0.5rem;
font-size: 1.2rem;
}

.issue h3 {
    font-size: 1.2rem;
    margin: 0;
    color: #ad884e;
  }

.issue h4 {
font-weight: bold;
    font-size: 0.8rem;
    margin: 0;
    color: #b53b22;
  }

.issue h5 {
font-weight: bold;
    font-size: 0.8rem;
    margin: 0;
    color: #c9a887;
  }

.issue .date {
font-weight: normal;
font-size: 0.9rem;
color: #666;
}
.issue ul {
margin: 0.5rem 0 1rem 1rem;
}

@media (max-width: 768px) {
.issue {
  flex-direction: column;
  align-items: center;
}
.issue .cover img {
  max-width: 100%;
}
}

/* ハンバーガーアイコン */
.hamburger {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 30px;
  height: 25px;
  cursor: pointer;
  z-index: 1001;
}
.hamburger div {
  width: 100%;
  height: 4px;
  background-color: #333;
  margin: 5px 0;
  transition: 0.4s;
}

/* フルスクリーンメニュー */
.menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(51, 51, 51, 0.95);
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transform: translateY(-100%);
  transition: transform 0.3s ease;
  z-index: 1000;
}
.menu a {
  color: white;
  text-decoration: none;
  font-size: 2rem;
  margin: 20px 0;
  transition: color 0.3s;
}
.menu a:hover {
  color: #ffcc00;
}

/* メニュー開閉状態 */
.menu.open {
  transform: translateY(0);
}

/* ハンバーガーアイコンアニメーション */
.hamburger.active div:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.hamburger.active div:nth-child(2) {
  opacity: 0;
}
.hamburger.active div:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}
</style>