body {

  font-family: "Segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;

  margin: 0;

  padding: 0;

  background-color: #f9f9f9;

  color: #333;

  line-height: 1.6;

}



header {

  background-color: #fff;

  padding: 1.5rem;

  border-bottom: 1px solid #ddd;

  text-align: center;

}



header h1 {

  margin: 0;

  font-size: 1.5rem;

  color: #c00;

}



main {

  max-width: 900px;

  margin: 2rem auto;

  padding: 1px 1rem;

  background-color: #fff;

  box-shadow: 0 0 10px rgba(0,0,0,0.05);

}



/* 横並び画像 */

.image-row {

  display: flex;               /* 横並びにする */

  gap: 1rem;                    /* 画像間の余白 */

  margin-bottom: 2rem;

}



.image-box {

  flex: 1;                      /* 均等幅にする */

  text-align: center;

}



.image-box img {

  width: 100%;

  height: auto;

  border: 1px solid #ccc;

}



.image-box figcaption {

  margin-top: 0.5rem;

  font-size: 0.9rem;

  color: #666;

}



section {

  margin-bottom: 2rem;

}



section h2 {

  font-size: 1.2rem;

  color: #444;

  border-left: 4px solid #c00;

  padding-left: 0.5rem;

  margin-bottom: 0.5rem;

}



ul {

  padding-left: 1.2rem;

}



a {

  color: #0066cc;

  text-decoration: none;

}



a:hover {

  text-decoration: underline;

}



footer {

  text-align: center;

  font-size: 0.9rem;

  color: #666;

  padding: 2rem 1rem;

}



/* スマホ対応 */

@media (max-width: 600px) {

  .image-row {

    flex-direction: column;     /* 縦並びに切り替え */

  }

}