.about-materials { background: var(--white); border-block: 1px solid var(--line); }
.about-materials .brand-story { grid-template-columns: .8fr 1.2fr; gap: 8%; align-items: start; }
.about-materials h2 { margin-top: 20px; }
.about-materials .materials-intro { max-width: 300px; color: var(--muted); }
.materials-list { min-width: 0; border-top: 1px solid var(--line); }
.material-detail { border-bottom: 1px solid var(--line); }
.material-detail summary {
  display: flex;
  gap: 20px;
  align-items: baseline;
  min-height: 112px;
  padding-block: 28px;
  list-style: none;
  cursor: pointer;
}
.material-detail summary::-webkit-details-marker { display: none; }
.material-detail summary::marker { content: ""; }
.material-detail summary:focus-visible { outline: 2px solid #738569; outline-offset: 5px; }
.material-detail summary:hover .material-title { color: #658056; }
.material-number { flex: 0 0 18px; font-size: 10px; color: var(--muted); }
.material-summary { display: grid; gap: 8px; min-width: 0; }
.material-title { font-size: 18px; line-height: 1.6; }
.material-lead { font-size: 12px; line-height: 1.9; color: var(--muted); }
.material-toggle { position: relative; flex: 0 0 14px; width: 14px; height: 14px; margin-left: auto; }
.material-toggle::before,.material-toggle::after {
  content: ""; position: absolute; width: 14px; height: 1px; background: currentColor; top: 50%; left: 0;
}
.material-toggle::after { transform: rotate(90deg); }
.material-detail[open] .material-toggle::after { transform: rotate(0); }
.material-body { padding: 0 30px 30px 38px; font-size: 14px; line-height: 2.1; }
.material-body p + p { margin-top: 15px; }
.material-points { margin: 20px 0 0; }
.material-points > div + div { margin-top: 20px; }
.material-points dt { font-size: 12px; font-weight: 600; }
.material-points dd { margin: 5px 0 0; }

.auto-materials { padding-block: 24px; }
.auto-materials > details { border-block: 1px solid var(--line); }
.auto-materials > details > summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 56px; padding: 12px 0; box-sizing: border-box; cursor: pointer; list-style: none; font-size: 16px; }
.auto-materials > details > summary::-webkit-details-marker { display: none; }
.auto-materials > details > summary:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.auto-materials > details[open] > summary .auto-materials-arrow { transform: rotate(180deg); }
.auto-materials .about-materials { border: 0; background: transparent; }
.auto-materials .brand-story { width: 100%; padding-block: 32px 48px; }
@media(max-width:700px) {
  .auto-materials .brand-story { display: block; }
  .about-materials .materials-intro { max-width: none; }
  .materials-list { margin-top: 30px; }
  .material-detail summary { gap: 14px; min-height: 106px; padding-block: 23px; }
  .material-title { font-size: 17px; }
  .material-body { padding: 0 14px 25px 0; font-size: 14px; line-height: 2.05; }
}