.case {
  --casecolor-gray50: rgba(108, 117, 125, 0.5);
  --casecolor-gray25: rgba(108, 117, 125, 0.25);
  --casecolor-gray15: rgba(108, 117, 125, 0.15);
  --caselistspace: 40px;
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
  text-align: left;
  &:has(.casedetail + .caselist) {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    > .caselist {
      margin-top: 2.5cqw;
      padding-top: 5cqw;
      border-top: 1px solid #ddd;
      grid-template-columns: repeat(4, 1fr);
      @media (max-width: 767px) {
        grid-template-columns: repeat(2, 1fr);
        gap: calc(var(--caselistspace) / 2);
      }
      /*
      display: flex;
      flex-direction: column;
      width: 25%;
      gap: unset;
      @media (max-width: 767px) {
        width: 100%;
      }
        */
      > .caselisttitle {
        margin-bottom: 1cqw;
        padding-bottom: 1cqw;
        border-bottom: 3px solid #7964ff;
        font-size: 1.4em;
        font-weight: normal;
      }
      > .caseitem {
        &:not(:last-child) {
          margin-bottom: 2.5cqw;
        }
        > a {
          flex-direction: column;
          > :where(.casedate, .casetitle) {
            align-self: flex-start;
          }
          > .casetitle {
            /*font-size: 1em;*/
          }
        }
      }
    }
    > .casedetail {
      @media (max-width: 767px) {
        width: 100%;
      }
    }
  }
  a {
    color: #232323 !important;
    &:hover {
      opacity: 0.8;
    }
  }
  .caselist {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--caselistspace);
    @media (max-width: 767px) {
      grid-template-columns: repeat(1, 1fr);
    }
    > .caseitem {
      > a {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        border: unset;
        border-radius: 4px;
        @media (max-width: 767px) {
          flex-direction: column;
          gap: 4px;
        }
        &:hover {
          background-color: #f8f8f8;
        }
        > .caseimg {
          aspect-ratio: 16/9;
          border-radius: 4px;
          object-fit: cover;
        }
        > .casedate {
          display: none;
          flex-shrink: 0;
          width: 9em;
          font-size: 0.8em;
          @media (max-width: 767px) {
            align-self: flex-start;
          }
        }
        > .casename {
          padding-inline: 8px;
          background-color: #f8f8f8;
          border: 1px solid #ddd;
          border-radius: 4px;
          font-size: 0.7rem;
          font-weight: 600;
        }
        > .casetitle {
          font-size: 1.18em;
          @media (max-width: 767px) {
            font-size: 1em;
          }
        }
      }
    }
  }
  .casedetail {
    container-type: inline-size;
    margin-bottom: 3em;
    > * {
      line-height: 1.7;
    }
    > .casetitle {
      margin-bottom: 0.5em;
      padding-bottom: 0.5em;
      border-bottom: 1px solid var(--casecolor-gray25);
      font-size: clamp(1.6rem, 6cqw, 2.4rem);
      line-height: 1.5;
    }
    > .casename {
      width: fit-content;
      margin-bottom: 1cqw;
      padding: 0.5cqw 1cqw;
      background-color: #f8f8f8;
      border: 1px solid #ddd;
      border-radius: 0.5cqw;
      font-size: clamp(1rem, 3cqw, 1.2rem);
      font-weight: 600;
    }
    > .casedate {
      display: none;
      margin-bottom: 1em;
      text-align: right;
      @media (max-width: 767px) {
        text-align: left;
      }
    }
    > .casehero {
      position: relative;
      z-index: 0;
      figure {
        box-shadow: inset 0 0 2cqw rgba(0, 0, 0, 0.3);
        border-radius: 1cqw;

        img {
          position: relative;
          z-index: -1;
        }
        figcaption {
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;
          padding: 1.8cqw 2.5cqw;
          background-color: rgba(0, 0, 0, 0.5);
          border-radius: 0 0 1cqw 1cqw;
          :is(h5, p) {
            all: unset;
            color: #fff;
            line-height: 1.2;
          }
          h5 {
            display: block;
            font-size: clamp(0.7rem, 2cqw, 1.6rem) !important;
            span {
              font-size: clamp(0.6rem, 1.5cqw, 1.4rem) !important;
            }
          }
          p {
            font-size: clamp(0.8rem, 2cqw, 1.6rem) !important;
            span {
              margin-left: 0.1em;
              font-size: 0.8em;
            }
          }
        }
      }
    }
    > .casesummary {
      background-color: #efefef;
      border-radius: 1cqw;
      padding: 2cqw 3cqw 2cqw 7cqw;
      @media (max-width: 767px) {
        padding: 2cqw 3cqw 2cqw 9cqw;
      }
      dt {
        margin-bottom: 1cqw;
      }
      dd:not(:last-child) {
        margin-bottom: 2cqw;
      }
    }
    :where(h3, h4, h5, h6) {
      margin-top: 2em;
      margin-bottom: 1em;
      padding-left: 0.5em;
      border-left: 0.5em solid var(--casecolor-gray15);
      font-size: 1.8em !important;
    }
    h2 {
      display: flex;
      align-items: center;
      gap: 1cqw;
      margin-top: 3em;
      margin-bottom: 1.5em;
      font-size: max(24px, 3.2cqw) !important;
      line-height: 1.2;
      @media (max-width: 480px) {
        flex-direction: column;
        align-items: flex-start;
      }
      > .casecategory {
        flex-shrink: 0;
        display: flex;
        justify-content: center;
        padding: 1cqw 1.5cqw;
        background-color: #232323;
        border-radius: 0.5cqw;
        font-size: max(14px, 2.2cqw) !important;
        color: white;
        line-height: 1;
      }
      & + h3 {
        margin-top: 1em;
      }
    }
    :where(figure) {
      margin: unset;
    }
    :where(p, ul, ol, dl, table, figure) {
      font-size: clamp(16px, 3cqw, 22px);
      margin-bottom: 1.5em;
      text-wrap: pretty;
      line-break: strict;
      @media (max-width: 767px) {
        text-wrap: unset;
      }
    }
    p {
      &:has(.casespeaker) {
        display: flex;
        @media (max-width: 767px) {
          display: block;
        }
        .casespeaker {
          text-align: right;
          flex-shrink: 0;
          width: 8em;
          font-weight: 600;
          &::after {
            content: "：";
          }
        }
      }
      &:has(.annotation) {
        padding-left: 8em;
        @media (max-width: 767px) {
          padding: unset;
        }
        .annotation {
          display: block;
          font-size: clamp(12px, 1.4cqw, 16px);
          font-style: italic;
          color: #aaa;
        }
      }
    }
    .casefooter {
      text-align: right;
      font-size: clamp(13px, 2cqw, 16px);
    }
    /* list */
    :where(ul, ol, dl) {
      margin-block: 2em;
      padding-left: 2em;
      dt {
        margin-bottom: 1cqw;
        text-indent: -4cqw;
        @media (max-width: 767px) {
          text-indent: -6cqw;
        }
      }
      dd {
        &:not(:last-child) {
          margin-bottom: 2cqw;
        }
      }
      :where(li, dd) {
        display: list-item;
        font-size: 1em;
        &:not(:last-child) {
          margin-bottom: 1em;
        }
      }
    }
    :where(ul) {
      list-style-type: disc;
    }
    :where(ol) {
      list-style-type: decimal-leading-zero;
    }
    :where(dl) {
      list-style-type: circle;
    }
    /* table 
    table {
      border: 1px solid var(--casecolor-gray25);
      :where(th, td) {
        all: unset;
        display: table-cell;
        padding: 4px 8px;
        border: 1px solid var(--casecolor-gray25);
        font-size: 16px;
        @media (max-width: 767px) {
          text-wrap: nowrap;
        }
      }
      :where(th) {
        background-color: var(--casecolor-gray15);
        font-weight: bold;
      }
    }
*/
    > figure {
      padding-left: 8em;
      @media (max-width: 767px) {
        padding: unset;
      }
    }
    figure {
      img {
        display: block;
        border-radius: 1cqw;
        line-height: 1;
      }
      figcaption {
        margin-top: 0.5em;
        text-align: right;
        font-size: clamp(12px, 1.4cqw, 16px);
        color: #aaa;
        line-height: 1.4;
      }
    }
    a {
      text-decoration: underline;
      text-underline-offset: 4px;
    }
    strong {
      background: linear-gradient(to top, transparent, transparent 6%, rgba(255, 203, 46, 0.3) 6%, rgba(255, 203, 46, 0.3) 35%, transparent 35%, transparent);
    }
    .author {
      display: flex;
      justify-content: flex-end;
      padding: 4px 8px;
      border: 2px solid #ddd;
      border-radius: 4px;
    }
  }
  .tablewrap {
    font-size: clamp(16px, 3cqw, 22px);
    padding-left: 8em;
    margin-inline: unset;
    @media (max-width: 1150px) {
      padding-left: unset;
    }
    table {
      margin-bottom: unset;
    }
    & + .note {
      margin-bottom: 3em;
      text-align: right;
    }
  }
}

.container {
  &:has(.case) {
    max-width: unset;
  }
}