-----------------------------------------------------
/*  link           */
/*----------------------------------------------------- */

.details {
	height: 71px;
	transition: all ease-in-out .3s;
    border-bottom: 2px solid #CCCCCC;
    border-left: 2px solid #CCCCCC;
    border-right: 2px solid #CCCCCC;
    border-top: none;
	box-sizing: border-box;
	/* &:last-of-type {
		border-bottom: 2px solid #CCCCCC;
	} */
    position: relative;
}
/* .details[open] { */
	/* height: 200px; */
	/* background-color: #bee1de; */
/* } */
.details-summary {
    position: relative;
	display: block;
	padding: 8px;
	border-top: 1px solid #CCCCCC;
	font-size: 16px;
	/* font-weight: bold; */
	transition: all ease-in-out .3s;
	&:hover {
		cursor: pointer;
		/* background-color: #bee1de; */
	}
    &::before,
    &::after {
      position: absolute;
      top: 25%;
      display: block;
      /* width: 16px;
      height: 2px; */
      content: "▼";
      /* background-color: currentColor; */
      right: 20px;
    }
    /* &::before {
      transform: translateY(-50%);
    }
    &::after {
      transition: transform 0.5s;
      transform: translateY(-50%) rotate(-90deg);
    } */
}
.details-summary::-webkit-details-marker {
	display: none;
}

.details[open] .details-content {
  	animation: fadeIn .3s ease;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}