.home-introduction {
  border-bottom:1px solid var(--line);
  padding:1rem 0;
  color:var(--primary);
  display: flex;
  justify-content: center;
  align-items: center;
}

dl.case-row {
  display:grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr minmax(2rem, 20rem) 1fr minmax(2rem, 20rem) 1fr 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 16px; 
  margin-top:16px;
  cursor: pointer;
}
dl.case-row:hover{
  background-color: rgba(142, 206, 182, 0.26);
}
.case-row dt,
.case-row dd {
  display:flex;
  flex-direction:column;
  justify-content:center;
  border:1px solid var(--line);
  padding:0.5rem;
  font-size:0.8rem;
}
.case-row dt:nth-of-type(5n+1) {
  border:none
}
.case-row dt:not(:nth-of-type(5n+1)),
.case-row dd:not(:nth-of-type(5n+5)) {
  border-right:none
}
.case-row dd:nth-of-type(5n+1) {
  border-top-left-radius:5px;
  border-bottom-left-radius:5px
}
.case-row dd:nth-of-type(5n+5) {
  border-top-right-radius:5px;
  border-bottom-right-radius:5px
}
.case-row dd:not(.step4) {
  color:var(--primary)
}
.case-row dd:empty {
  background-color:var(--background);
  color:var(--text);
  text-align:center
}
.case-row dd:empty::before {
  content:"-"
}

@media screen and (max-width: 768px) {
  .home-introduction{ margin-top: 150px;}
  .path-my-caselist main{ margin-top: 20px;}
  dl.case-row {
    display:grid;
      grid-template-columns: repeat(2, 1fr);
      grid-column-gap: 0px;
      grid-row-gap: 0px; 

  }
  .case-row dt:not(:nth-of-type(5n+1)),
  .case-row dd:not(:nth-of-type(5n+5)) {
    border-right:1px solid var(--line);
  }
  .case-row dd:nth-of-type(5n+1) {
    border-top-left-radius:0px;
    border-bottom-left-radius:0px
  }
  .case-row dd:nth-of-type(5n+5) {
    border-top-right-radius:0px;
    border-bottom-right-radius:0px
  }
}
.area-button {
  max-width: 70vw;
  width: 100%;
}
.area-number {
  color:var(--primary);
  white-space:nowrap
}
.area-label,
.area-name,
.area-date {
  font-size:14px
}
.area-status {
  position:relative;
  padding:0;
  text-align:center;
  font-weight:var(--bold);
  letter-spacing:0.1rem;
  color:var(--white);
  white-space:nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  min-width: 95px;

}
.area-status a {
  position:absolute;
  left:0;
  top:0;
  right:0;
  bottom:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  color:#ffffff !important;
}
.area-status.step4 {
  background-color:var(--success);
  border-color:var(--success);
  transition:filter 0.3s
}
.area-status.step1 {
  border-color:var(--danger);
  background-color:var(--danger);
  background-image:url(/assets/image/icon-pen-step3.svg);
  background-position:calc(100% - 10px) center;
  transition:filter 0.3s
}
.area-status.step2 {
  border-color:var(--infos);
  background-color:var(--infos);
  background-image:url(/assets/image/icon-pen-step3.svg);
  background-position:calc(100% - 10px) center;
  transition:filter 0.3s
}
.area-status.step3 {
  border-color:var(--warning);
  background-color:var(--warning);
  background-image:url(/assets/image/icon-pen-step3.svg);
  background-position:calc(100% - 10px) center;
  transition:filter 0.3s
}
.area-status.step4:hover,
.area-status.step1:hover,
.area-status.step3:hover {
  filter:brightness(0.9)
}
.area-status.step1 {
  border-color:var(--danger);
  background-color:var(--danger);
  background-image:url(/assets/image/icon-pen-incomplete.svg);
  background-position:calc(100% - 10px) center;
  transition:filter 0.3s
}
.area-status span {
  display:block;
  font-size:14px;
  font-weight:var(--regular)
}
.area-label {
  white-space:nowrap
}
.area-label span {
  display:block
}
.button-create {
  display:inline-block;
  width:100%;
  padding:1rem;
  text-align:center;
  font-weight:var(--bold);
  letter-spacing:0.3rem;
  color:var(--white);
  border-radius:5px;
  background-image:url(/assets/image/icon-plus.svg);
  background-position:calc(50% + 65px) center
}
.pagination {
  display:flex;
  justify-content:center;
  gap:20px;
  margin-top:20px
}
.pagination a.disabled {
  opacity:0.5;
  pointer-events:none
}

.guide{ color:#9e7503; padding-left: 100px;}