@charset "utf-8";


#news .wrap_tab {
  margin-top: 2rem;
}

.wrap_tab {
  height: 240px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 24px;
  background: linear-gradient(to bottom, #fffdfd, #fff9fc);
  box-shadow: 0 4px 12px rgb(0 0 0 / 3%);
}

.list_tab {
  display: flex;
  gap: 2px;
  padding: 8px 8px 0;
  text-align: center;
  font-size: 1.2rem;
}

.list_tab>li {
  width: 100%;
  padding: .6em 0;
  background: transparent;
  color: #907C70;
  border-bottom: 1px solid rgb(153 113 179 / 14%);
  border-radius: 10px 10px 0 0;
  transition: .2s;
}

.list_tab li:hover {
  cursor: pointer;
  background: rgb(253 239 245 / 45%);
}

.list_tab .active {
  background: rgb(253 239 245 / 70%);
  color: #6D5C4F;
  border-bottom: 1px solid transparent;
}

.tab_content {
  display: none;
  height: calc(252px - 72px);
  overflow-y: auto;
  padding: .5rem 0 1rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(172, 82, 233, 0.3) transparent;
}

.tab_content.active {
  display: block;
}

/* ---------------- */
/* details */
/* ---------------- */

#news details {
  margin: 0 12px;
  border-bottom: 1px dashed rgb(153 113 179 / 18%);
}

/* ---------------- */
/* summary */
/* ---------------- */

#news details summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem 1rem;
  border-radius: 14px;
  transition: background .25s;
}

#news details summary:hover {
  background: #FFF4F8;
}

#news details[open] summary {
  background: #FFF7FA;
}

#news .date {
  flex-shrink: 0;
  font-size: 1rem;
  color: #A38D82;
  letter-spacing: .04em;
}

.news_title {
  flex: 1;
  font-size: 1.2rem;
  color: #6D5C4F;
}

.news_contents {
  padding: .5rem 1rem 1.5rem 1rem;
  color: #7A685D;
  line-height: 1.9;
}

.news_contents p {
  font-size: 1.05rem;
}