/* culture.html 専用CSS。 */

/* voice-section: 「社員の声」だけ他の3セクション(給与・フォローアップ・社内文化)と
   毛色を変えるための紺セクション。.support-cardと同じ白系ノイズ(surface-paperの反転版)を
   紺背景に乗せ、他ページのsupport-cardと質感を揃える。 */
.voice-section {
  background-color: var(--color-brand-700);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25' primitiveUnits='userSpaceOnUse'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch' result='t'/%3E%3CfeColorMatrix in='t' type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0' result='tinted'/%3E%3CfeComponentTransfer in='tinted'%3E%3CfeFuncA type='linear' slope='0.05' intercept='0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='c' x='0' y='0' width='100%25' height='100%25' primitiveUnits='userSpaceOnUse'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='3' stitchTiles='stitch' result='t'/%3E%3CfeColorMatrix in='t' type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0' result='tinted'/%3E%3CfeComponentTransfer in='tinted'%3E%3CfeFuncA type='linear' slope='0.07' intercept='0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='420' height='420' filter='url(%23c)'/%3E%3C/svg%3E");
  background-size: 180px 180px, 420px 420px;
  background-repeat: repeat, repeat;
}
.voice-section h2 { color: var(--color-surface); }

/* voice-list / voice-item: 社員の声(6名)を、開閉式の1カラムリストで見せる。全員を開いた
   カードで並べると文章量が多くくどくなるため(2026-09-02、ミサさんの指摘を受けて変更)、
   役職・名前だけが並ぶ一覧にし、読みたい人だけ<details>で開いて読む形にした。.faqと同じ
   <summary>+区切り線の骨格を流用しつつ、紺背景(voice-section)向けに白文字・半透明の罫線に
   配色を振り直している。 */
.voice-list {
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.voice-item {
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}
.voice-item:last-child {
  border-bottom: 0;
}
.voice-item__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  cursor: pointer;
  list-style: none;
  padding: var(--space-6) 0;
}
.voice-item__summary::-webkit-details-marker { display: none; }
.voice-item__summary:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}
.voice-item__who {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
}
.voice-item__role {
  color: var(--color-accent-light);
  font-size: var(--text-sm);
  font-weight: 700;
}
.voice-item__name {
  color: var(--color-surface);
  font-size: var(--text-lg);
  font-weight: 700;
}
.voice-item__chevron {
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--color-accent-light);
  border-bottom: 2px solid var(--color-accent-light);
  transform: rotate(45deg);
  transition: transform .2s var(--ease-out);
}
.voice-item[open] .voice-item__chevron { transform: rotate(-135deg); }
.voice-item__body {
  display: grid;
  gap: var(--space-4);
  padding: 0 0 var(--space-6);
}
.voice-item__body p {
  margin: 0;
  color: rgba(255, 255, 255, .78);
  font-size: var(--text-sm);
}