body {
  font-family: Arial, sans-serif;
  max-width: 768px;
  margin: 0 auto;
  padding: 10px;
  background-color: #c6edfb;
}
.container {
    display: flex;
    flex-wrap: wrap;
}
.content {
    width: 50%;
    margin: 10px;
    padding: 1px 10px 20px 10px;
    background-color: #d0d0f4;
    border-radius: 8px;
    /* padding: 0px 10px;上下0px、左右10px */
  /* 0px 10px 10px 20px　上、右、下、左の順 */
}
@media (max-width: 768px) {
  .container {
    width: 100%; /* 幅を全幅に */
    flex-direction: column; /* 1列に変更 */
  }
  .content {
    width: 98%; /* 各アイテムを全幅に */
    margin: 10px 0; /* 左右のマージンを0に調整 */
    border-radius: 8px;
  }
}
.short {
    max-width: 300px;
}
.long {
    max-width: 700px;
}
.txt_center{
  text-align: center;
}
.button {
  background: #408cff;
  color: #fff;
  padding: 10px 15px; /* 上下10px, 左右30px */
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
}
/* 背景色用のクラス */
.bg-blue {
  background: #808cff;
}
.bg-green {
  background: #4caf50;
}
.bg-purple {
  background: purple;
}
.bg-violet {
  background: violet;
}
/* ホバーエフェクト（オプション） */
.button:hover {
  opacity: 0.9;
}
details {
  margin-bottom: 10px;
  border: 0px;   /* solid #ccc */
  padding: 5px;
}
summary {
  cursor: pointer;
  font-weight: bold;
  border-radius: 5px;
  padding: 5px;
  background-color: #f9f9f9;
}
details[open] summary {
  background-color: #bed9fb;
}
details p {
  padding: 10px;
  margin: 0;
}