/* https://flex-box.net/accordion/#co-index-5 */
.accordion-container .accordion-title {
  position: relative;
  margin: 5px;
  /* padding: 0.625em 0.625em 0.625em 2em; */
  padding: 0.4em 0.2em 0.4em 2em;
  background-color: #000;
  font-size: 1.25em;
  font-weight: normal;
  color: #ccddee;
  cursor: pointer;
  border-bottom: 1px solid #113355;
}
.accordion-container .accordion-title:hover,
.accordion-container .accordion-title:active,
.accordion-title.open { 
  background-color: #446688;
}

.accordion-container .accordion-title::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 25px;
  width: 15px;
  height: 2px;
  /*縦線に*/
  transform: rotate(90deg);
  background: #fff;
  transition: all .3s ease-in-out;
}

.accordion-container .accordion-title::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 25px;
  /*横線*/
  width: 15px;
  height: 2px;
  background: #fff;
  transition: all .2s ease-in-out;
}

.accordion-container .accordion-title.open::before {
  transform: rotate(180deg);
}

.accordion-container .accordion-title.open::after {
  opacity: 0;
}

.accordion-content {
  display: none;
  padding-left: 2.3125em;
  width: 700px;
  /* border: 1px solid #0079c1; */
  border-bottom: 1px solid #113355;
}

.bl_comment {
  margin-top: 1em;
  margin-bottom: 1em;
}

div.bl_media {
  margin-top: 1em;
  margin-bottom: 1em;
  display: flex;
  /* flex-direction: row-reverse; */
  flex-direction: row;
}

.bl_media_body {
  flex: 1 1 42%;
  margin-left: 1%;
}

.bl_media_imageWrapper {
  flex: 1 1 55%;
}

.bl_media_imageWrapper img {
    width: 100%;
    vertical-align: top;
}


/* CSS for CodePen */
.accordion-container {
  position: absolute;
  /* width: 300px; */
  width: 730px;
  margin: 0 auto;
}

/* https://www.websuccess.jp/blog/archives/2711/ */
ol {
    margin-left: 3.5em;
}

ol li {
	list-style-type: none;
	counter-increment: cnt;
	font-size: 12px;
	color: #ccddee;
}

ol li::before {
	font-size: 12px;
	color: #ccddee;
	content: "(" counter(cnt) ")";
	display:inline-block;
	margin-left:-2em; /* サイトに合せて調整 */
	width: 2em; /* サイトに合せて調整 */
}

div.memo {
    
}