@charset "UTF-8";

/* nationalexam.css (769px以上：コンパクト調整版) */
@media (min-width: 769px) {
.c-nationalexam-voice {
  background-color: #ffffff;
  /* どの学科でも対応できるよう var(--color-main) を使用 */
  background-image: repeating-linear-gradient(
    -45deg,
    color-mix(in srgb, var(--color-main), transparent 90%), /* 10%の濃度 */
    color-mix(in srgb, var(--color-main), transparent 90%) 5px, /* ライン幅を1pxに */
    transparent 1px,
    transparent 8px /* 間隔を8pxに詰めて密度を上げる */
  );
  
  /* その他の装飾 */
  padding: var(--spacing-xl);
  border-radius: var(--radius-lg);
  margin-block: var(--spacing-xl);
  /* 枠線も学科カラーに連動 */
  border: 1px solid color-mix(in srgb, var(--color-main), transparent 85%);
}

  .c-nationalexam-voice__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--spacing-xl); /* 48pxから32pxに縮小 */
    row-gap: var(--spacing-lg);    /* 48pxから24pxに縮小 */
    align-items: center;
  }

  /* 画像の最大幅を制限して高さを抑える */
  .c-nationalexam-voice__photo-col,
  .c-nationalexam-voice__item-col {
    width: 100%;
    max-width: 280px; /* 画像の肥大化を防止 */
    margin-inline: auto; /* カラム内で中央に配置 */
  }

  .c-nationalexam-voice__text {
    font-size: var(--fs-base);
    line-height: 1.7; /* 1.8からわずかに縮小 */
    margin: 0;
  }

  .c-nationalexam-voice__profile {
    margin-top: var(--spacing-xs); /* 16pxから4pxに縮小 */
    font-size: var(--fs-sm);
    line-height: var(--lh-tight);
  }
}

@media (max-width: 768px) {
  .c-nationalexam-voice {
    padding: var(--spacing-md); /* 16px: スマホではよりコンパクトに */
  }

  .c-nationalexam-voice__grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }

  /* 写真とプロフィールをセンター配置に */
  .c-nationalexam-voice__photo-col,
  .c-nationalexam-voice__item-col {
    max-width: 240px; /* スマホで見やすいサイズ */
    margin-inline: auto;
    text-align: center;
  }

  .c-nationalexam-voice__text {
    font-size: var(--fs-sm); /* 14px相当 */
    text-align: left; /* テキストは可読性のため左揃えを維持 */
  }
}