#page-main h2 {
  margin: 0;
}

#page-main a {
  cursor: pointer;
}

#page-main .notifications li.error {
  color: red;
}

#page-main .content-bbs-front {
  background-color: var(--sotokabe-bbs-main-bg-color);
  display: flex;
  flex-direction: column;
  gap: calc(6px + 2vw);
  padding: 20px calc(8px + 1vw) 50px calc(8px + 1vw);
  word-break: break-all;
}

#page-main .content-bbs-front > .content:empty {
  display: none;
}

#page-main .content-bbs-front .my-space {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

#page-main .content-bbs-front .my-space .welcome {
  display: flex;
  gap: 5px;
}

#page-main .content-bbs-front .register {
  display: flex;
  gap: 10px;
  justify-content: center;
}

#page-main .content-bbs-front .painters {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#page-main .content-bbs-front .painter {
  background-color: var(--sotokabe-bbs-info-bg-color);
  border: solid 1px var(--sotokabe-bbs-info-border-color);
}

#page-main .content-bbs-front .painter .painter-title a {
  align-items: center;
  color: var(--sotokabe-bbs-info-head-color);
  display: flex;
  justify-content: space-between;
  padding: 16px;
  white-space: nowrap;
}
#page-main .content-bbs-front .painter .painter-title a:hover {
  color: var(--sotokabe-bbs-info-head-color);
  opacity: 1;
}

#page-main .content-bbs-front .painter .painter-title a:before {
  font-size: 1.4em;
  white-space: normal;
}

#page-main .content-bbs-front .painter .painter-info {
  background-color: var(--sotokabe-bbs-info-bg-color);
  display: flex;
}

#page-main .content-bbs-front .painter .painter-info .painter-info-image {
  align-items: center;
  display: flex;
  flex-direction: column;
  max-width: calc(200px + 5vw);
  min-width: calc(200px + 5vw);
}
#page-main .content-bbs-front .painter .painter-info .painter-info-image:empty {
  display: none;
}

#page-main .content-bbs-front .painter .painter-info :is(.avatar-wrapper, .avatar-wrapper img) {
  max-height: calc(200px + 5vw);
}
#page-main .content-bbs-front .painter .painter-info .avatar-wrapper img {
  object-fit: contain;
}

#page-main .content-bbs-front .painter .painter-info ul {
  align-items: center;
  display: flex;
  flex-grow: 1;
  justify-content: space-evenly;
  width: 100%;
}

#page-main .content-bbs-front .painter .painter-info li {
  font-size: calc((200px + 5vw) / 6 / 1.5);
}

#page-main .content-bbs-front .painter .painter-info i {
  color: var(--sotokabe-bbs-info-icon-color);
}

#page-main .content-bbs-front .painter .painter-info dl {
  display: grid;
  grid-template-columns: auto 1fr;
}

#page-main .content-bbs-front .painter .painter-info dt {
  align-items: center;
  background: color-mix(in srgb, var(--sotokabe-bbs-info-bg-color) 30%, #fff);
  color: var(--sotokabe-bbs-info-dt-color);
  display: flex;
  font-weight: bold;
  padding: 15px 5vw 15px 6vw;
}
#page-main .content-bbs-front .painter .painter-info dt:nth-of-type(even) {
  background: color-mix(in srgb, var(--sotokabe-bbs-info-bg-color) 10%, #fff);
}

#page-main .content-bbs-front .painter .painter-info dd {
  align-items: center;
  background-color: var(--sotokabe-bbs-info-dd-bg-color);
  color: var(--sotokabe-bbs-info-dd-color);
  display: flex;
  padding: 10px;
}
#page-main .content-bbs-front .painter .painter-info dd:not(:first-of-type):last-of-type {
  border-bottom: none;
}

#page-main .content-bbs-front .painter-prefectures ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

#page-main .content-bbs-front .painter-prefectures .button {
  margin: 0;
}

@media screen and (max-width:425px){
  #page-main .content-bbs-front {
    padding-left: 0;
    padding-right: 0;
  }

  #page-main .content-bbs-front .painters {
    padding: 0.5em;
  }
}

@media screen and (max-width:768px){
  #page-main .content-bbs-front .painter .painter-info {
    align-items: center;
    flex-direction: column;
  }

  #page-main .content-bbs-front .painter .painter-info .painter-info-image {
    max-height: none;
    width: 100%;
  }

  #page-main .content-bbs-front .painter .painter-info .avatar-wrapper {
    display: flex;
    justify-content: center;
  }

  #page-main .content-bbs-front .painter-prefectures ul {
    padding-left: 6px;
  }
}