$color: #000; // 変数の設定

.inner-block {
  position: relative;
  width: calc(100% - 60px);
  margin: 0 auto;
  max-width: 1000px;
}

.quiz {
  min-height: 100vh;
  padding: 100px 0;
  background: #fff5db;
}

.quiz-content {
  border: 1px solid #222;
  background-color: rgba(255, 255, 255, 0.4); // 修正
  box-shadow: 2px 2px 4px rgba($color, 0.1); // 修正
  position: relative;
}

.quiz-question-number {
  text-align: center;
  font-size: 26px;
  font-weight: bold;
  border-bottom: 1px solid #222;
  padding: 20px;
}

.quiz-question {
  font-size: 32px;
  font-weight: bold;
  line-height: 1.8;
  margin-bottom: 40px;
  position: relative;
  text-align: center;
  padding: 30px 200px 0; // 調整が必要か確認
}

.quiz-answer {
  display: grid;
  position: relative;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  
  li {
    position: relative;
    
    label {
      color: #222;
      display: block;
      margin: 0 auto;
      height: 60px;
      display: flex;
      align-items: center;
      width: 100%;
      padding: 4px 20px 4px 80px;
      font-weight: bold;
      font-size: 18px;
      line-height: 1.16;
      position: relative;
      transition: 0.3s ease-in-out;
      border: 1px solid #000;
      white-space: pre-wrap;
      
      &:hover {
        background-color: rgba(0, 0, 0, 0.1);
      }
    }
  }

  li {
    label {
      &::after {
        position: absolute;
        text-align: center;
        font-size: 20px;
        font-weight: bold;
        content: "";
        width: 60px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        top: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        z-index: 1;
        pointer-events: none;
        border-right: 1px solid #000;
      }
    }
    
    &:nth-child(1)::after {
      content: "A";
    }
    
    &:nth-child(2)::after {
      content: "B";
    }
    
    &:nth-child(3)::after {
      content: "C";
    }
    
    &:nth-child(4)::after {
      content: "D";
    }
  }
}