.details {
  width: 100%;
  box-sizing: border-box;
  border: 2px solid #ccb38c;
  margin-left: 0;
}

.details + .details {
  margin-top: -2px;
}

.details-summary {
  position: relative;
  display: block;                 /* <summary> を block 表示 */
  padding: 12px 16px;
  padding-left: 68px;
  min-height: 44px;
  color: #7a3b21;
  font-size: clamp(14px, 3.6vw, 16px);
  line-height: 1.6;
  font-weight: bold;
  text-align: left;
  background-color: #F5F0E7;
  user-select: none;
}

/* マーカー非表示（クロスブラウザ） */
.details-summary::-webkit-details-marker { display: none; }
.details-summary::marker { content: ""; }

.details-summary:hover {
  cursor: pointer;
  opacity: 0.8;
  color: #4b2d16;
}
.details-summary:hover .btn::before {
  color: #4b2d16;
}

.details-summary:focus-visible {
  outline: 3px solid #a96e2d;
  outline-offset: 3px;
}

.details-summary .btn {
  position: absolute;
  top: 50%;
  left: 20px;
  width: 18px;
  height: 18px;
  transform: translateY(-70%);    /* 視覚に応じて -50% も検討可 */
  transform-origin: center center;
}

.details-summary .btn::before {
  content: "▼";
  color: #7a3b21;
  font-size: 16px;
  line-height: 1;
  display: inline-block;
}
.details-summary .btn::after { content: none; }

details[open] .details-summary {
  color: #4b2d16;
}
details[open] .details-summary .btn::before {
  content: "▲";
  color: #4b2d16;
}
/* details[open] .details-summary .btn の transform は同一なので削除可能 */

.details-content {
  padding: 20px;
}
.details-content p {
  margin: 0 0 20px;
  color: #000;
  font-size: clamp(14px, 3.4vw, 16px);
  text-align: left;
  line-height: 1.6;
}
.details-content p:last-of-type { margin-bottom: 0; }

.details-content strong,
.details-content b {
  color: #7a3b21;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-contrast: more) {
  .details-summary:focus-visible {
    outline-width: 4px;
  }
}