.details {
  border-radius: 13px;
  background-color: #fff;
}

@media screen and (min-width: 768px) {
  .details {
    border-radius: 20px;
  }
}

.details-summary {
  /* display: list-item;以外を指定してデフォルトの三角形アイコンを消します */
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 72px;
  cursor: pointer;
}

.details-summary::-webkit-details-marker {
  /* Safariで表示されるデフォルトの三角形アイコンを消します */
  display: none;
}

.item-3-details-summary-icon {
  position: relative;
  padding-left: 20px;
}

@media screen and (min-width: 768px) {
  .item-3-details-summary-icon {
    padding-left: 30px;
  }
}

.item-3-details-summary-icon::before,
.item-3-details-summary-icon::after {
  content: '';
  position: absolute;
  display: inline-block;
  top: -8px;
  right: 0;
  width: 2px;
  height: 17px;
  border-radius: 2px;
  background-color: #009389;
  transition: .5s;
}

@media screen and (min-width: 768px) {
  .item-3-details-summary-icon::before,
  .item-3-details-summary-icon::after {
    right: 6px;
  }
}

.item-3-details-summary-icon::before {
  transform: rotate(90deg);
}

/* is-opened クラスはJSで追加・削除しています */
.details.is-opened .item-3-details-summary-icon::after {
  transform: rotate(90deg);
  opacity: 0;
}

/*
note: 実際に延び縮みする要素
この要素には `margin` や `padding` を付与しない
付与してしまうと、アニメーションの開始・終了時にガクッとなってしまう
*/
.details-content {
  transition-property: height;
  transition-duration: 400ms;
  transition-timing-function: ease;
}



/* ルーターイメージ */
.router-img img {
	width:220px;
	height:147px;
	margin:-48px auto 0 auto;
}
@media screen and (min-width: 768px) {
	.router-img img {
		width:280px;
		height:188px;
		margin:-74px auto 0 auto;
	}
}

/* ルーター説明 */
.router-list summary.details-summary {
	padding-left:33px;
}
.router-cont-outer {
    max-width: calc(870px + 68px);
	margin-right: 31px;
	margin-left: 31px;
}
.router-cont-inner {
    max-width: calc(870px + 68px);
}
.router-cont-inner ul.disc li {
    list-style-type:none;
    margin-left:0.6em;
}
.router-cont-inner ul.disc li:before {
	content: "・";
	color:#333;
}