/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
      margin: 0;
      font-family: sans-serif;
      padding-top: 60px; /* ヘッダー分の余白 */
      background-color: #fdfdfd;
    }

    /* ヘッダー部分 */
    header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 60px;
      background-color: #fff;
      color: white;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 40px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.3);
      z-index: 1000;
    }

    /* メニューボタンまじわからん */
    nav a {
      color: #000;
      text-decoration: none;
      margin-left: 5px;
      font-weight: bold;
    }

    /* コンテンツ部分 */
    .content {
      margin: 0 auto;
      padding-top: 0px;
      padding-left: 5px;
      padding-right: 5px;
    }
      
    img {
      max-width: 100%;
      height: 100%;
      margin: 0px 0;
    }

nav ul {
  display: flex;
  justify-content: space-around; /* 等間隔配置 */
  list-style: none;
  padding: 0;
  margin: 0;
}

nav ul li a {
  text-decoration: none;
  color: #333;
}

nav a:hover {
  color: #5aa;
}


.carousel {
  position: relative;
  width: 100%;
  max-width: 480px; /* ←最大幅をここで制御する */
  margin: 0px auto;
  overflow: visible;
}

.carousel-track-container {
  overflow: hidden;
}

.carousel-track {
  display: flex;
  transition: transform 0.5s ease;
}

.carousel img {
  flex-shrink: 0;
  width: 100%;
  height: auto; /* 縦横比維持 */
  border: none;
  border-radius: 8px;
}

.carousel button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.7);
  border: none;
  font-size: 2rem;
  cursor: pointer;
  z-index: 10;
  border-radius: 50%;
  padding: 5px 10px;
}

.carousel .prev {
  left: -50px;
}

.carousel .next {
  right: -50px;
}

.carousel-indicators {
  text-align: center;
  margin-top: 0px;
}

.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: #ccc;
  border-radius: 50%;
  margin: 0 5px;
  cursor: pointer;
}

.dot.active {
  background-color: #0bf;
}