@charset "UTF-8"; /* voicearea7.css Scoped styles for .voicearea7 */
.voicearea7 { --gap: 18px; --card-radius: 12px; --card-bg: #fff; --muted: #666; --accent: #0b74de; --max-width: 1200px; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif; color: #222; }

/* Box sizing */ .voicearea7 * { box-sizing: border-box; overflow-wrap: break-word;}

/* Container */ .voicearea7 .wrap { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 24px; background: #f5f7fb; }

/* Header */ .voicearea7 header { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; } .voicearea7 h1 { margin:0; font-size:0.5rem; }

/* Panels container */ .voicearea7 .panels { margin-bottom: 20px; }

/* QA panel (hidden by default) */ .voicearea7 .qa-panel { display: none; background: #fff; padding: 20px; border-radius: 12px; box-shadow: 0 6px 24px rgba(11,21,40,0.08); margin-bottom: 20px; } .voicearea7 .qa-panel.is-open { display: block; }

/* Panel internals */ .voicearea7 .qa-panel .title { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; } .voicearea7 .avatar-small { width:200px; height:200px; border-radius:10px; background:#ddd center/cover no-repeat; flex-shrink:0; } .voicearea7 .qa-panel h2 { margin:0; font-size:0.28rem; } .voicearea7 .qa-panel .meta { color:var(--muted); font-size:0.3rem; }

/* QA list */ .voicearea7 .qa-list { margin-top:12px; } .voicearea7 .qa { margin-bottom:12px; } .voicearea7 .q { font-weight:700; } .voicearea7 .a { margin-top:6px; color:#333; }

/* Close button */ .voicearea7 .close-btn { background: transparent; border: none; color: var(--accent); font-weight:700; cursor:pointer; text-decoration: underline; }

/* Hide elements */ .voicearea7 .is-hidden { display: none !important; }

/* Card grid */ .voicearea7 .group { margin-bottom:28px; } .voicearea7 .group-title { font-weight:700; margin:0 0 10px 0; }

.voicearea7 .grid { display:flex; gap:var(--gap); flex-wrap:wrap; }

/* Card */ .voicearea7 .card { background:var(--card-bg); border-radius:10px; padding:12px; box-shadow:0 1px 6px rgba(0,0,0,0.05); flex:1 1 calc((100% - (var(--gap) * 3)) / 4); max-width: calc((100% - (var(--gap) * 3)) / 4); min-width:180px; text-align:center; cursor:pointer; transition:transform .15s, box-shadow .15s; } .voicearea7 .card:hover { transform:translateY(-6px); box-shadow:0 8px 24px rgba(11,21,40,0.08); }

/* Active card highlight */ .voicearea7 .card.is-active { outline: 3px solid rgba(11,116,222,0.12); transform: translateY(-4px) scale(1.02); }

/* Avatar */ .voicearea7 .avatar { width:100%; aspect-ratio:1/1; border-radius:var(--card-radius); background:#ddd center/cover no-repeat; }

/* Meta */ .voicearea7 .meta { margin-top:10px; } .voicearea7 .year { font-size:0.2rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; } .voicearea7 .name { margin-top:6px; font-weight:700; }

/* Link color */ .voicearea7 a, .voicearea7 button { color: var(--accent); }
/*.voicearea7 a, .voicearea7 .drawer{ right:180px}*/

/*閉じるボタンの追加部分-START*/

/* 閉じるボタンのスタイル（赤ベース） */
/* ボタンを視認しやすく、高コントラストでアクセシビリティ配慮 */
.voicearea7 .close-btn {
  /* 見た目 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  background-color: #c92a2a; /* メインの赤（背景） */
  color: #fff;                /* テキストは白でコントラスト確保 */
  border: 0;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(201, 42, 42, 0.18);
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
  /* キーボード利用者向けに明確なフォーカスを設定 */
  outline: none;
}

/* ホバー・アクティブ時の微調整 */
.voicearea7 .close-btn:hover {
  transform: translateY(-2px);
  background-color: #b02121; /* 少し濃い色に */
  box-shadow: 0 6px 18px rgba(176, 33, 33, 0.18);
}
.voicearea7 .close-btn:active {
  transform: translateY(0);
  background-color: #9e1a1a;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

/* キーボードフォーカス時の視認性（:focus-visible を優先） */
.voicearea7 .close-btn:focus-visible {
  box-shadow: 0 0 0 4px rgba(201, 42, 42, 0.18), 0 6px 18px rgba(176, 33, 33, 0.12);
  border-radius: 8px;
}

/* 高コントラスト設定の環境にも配慮（prefers-contrast） */
@media (prefers-contrast: more) {
  .voicearea7 .close-btn {
    box-shadow: none;
    background-color: #9e1a1a;
  }
  .voicearea7 .close-btn:focus-visible {
    box-shadow: 0 0 0 3px #fff, 0 0 0 6px #9e1a1a;
  }
}

/* 小さい領域での配置調整（モバイル） */
@media (max-width:520px) {
  .voicearea7 .close-btn {
    padding: 6px 10px;
    font-size: 0.2rem;
    border-radius: 6px;
  }
 .voicearea7 .meta{
  font-size:0.2rem;
 }
 .voicearea7 .year{
  font-size:0.2rem;
}
}
/*閉じるボタン-END*/


/* Responsive */ @media (max-width:1000px) { .voicearea7 .card { flex:1 1 calc((100% - var(--gap)) / 2); max-width: calc((100% - var(--gap)) / 2); }.voicearea7 .drawer { right:-260px; } } @media (max-width:520px) { .voicearea7 .card { flex:auto; max-width:100%; } .voicearea7 .avatar-small { width:100px; height:100px; } .voicearea7 .year { font-size:0.2rem; } .voicearea7 .drawer { right:-100px; }.voicearea7 .qa-panel .meta {font-size:0.2rem;}.voicearea7 .qa-panel h2{font-size:0.25rem;}