details {
  width: 95%;
  min-height: 5px;
  max-width: 700px;
  padding: 20px 45px 20px 45px;
  margin: 0 auto;
  position: relative;
  font-size: 22px;
  border: 1px solid rgba(0,0,0,.1);
  background: rgb(238, 238, 238);
  border-radius: 15px;
  box-sizing: border-box;
  transition: all .3s;
}
details img{
width: 100%;
border-radius: 20px;
margin-bottom: 20px;
}
details:first-of-type {
  margin-top: 20px;
  margin-bottom: 20px;
}
details + details {
  margin-bottom: 20px;
}

details[open] {
  min-height: 50px;
  background-color: #f6f7f8;
  box-shadow: 2px 2px 20px rgba(0,0,0,.2);
}

details p {
  font-weight: 300;
  font-size: 16px;
}
[id*="detail"] td {
  padding: 10px;
  font-size: 12px;
  background-color:  #c0c9ff; /* 背景色指定 */
  border-bottom: 2px solid #ffffff;
}
[id*="detail"] th {
  background-color:  #3F51B5; /* 背景色指定 */
  color:  #fff;               /* 文字色指定 */
  font-weight:  normal;       /* 文字の太さ指定 */
  border-bottom: 2px solid #ffffff;
}
summary {
  font-weight: 500;
  cursor: pointer;
}

/* removed outline as for codepen only
  don't remove focus on elements
  it's bad accessibility
  don't be _that_ guy
*/
summary:focus {
  outline: none;
}

summary::-webkit-details-marker {
  display: none
}

summary::after {
    padding: 15px;
    position: absolute;
    top: 50%;
    right: 15px;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    content: "\f078";
    transform: translateY(-50%);
    transition: .3s ease;
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    background-image: url(https://www.rakuten.ne.jp/gold/co2s/icon/dropdown.png);
    background-size: contain;
    vertical-align: middle;
}
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {  
  [id^='detail'] {
    display:block;
  }
  summary::after{
    background:none;
  }
}
/* for Microsoft Edge */
@supports (-ms-ime-align:auto) {
  [id^='detail'] {
    display:block;
  }
  summary::after{
    background:none;
  }
}
details[open] summary::after {
    content: "";
    top: 10px;
    transform: translateY(0);
    transition: .3s ease;
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    background-image: url(https://www.rakuten.ne.jp/gold/co2s/icon/close.png);
    background-size: contain;
    vertical-align: middle;
}

details[open] summary:hover::after {
  animation: pulse 1s ease;
}

@keyframes pulse {
  25% {
    transform: scale(1.1);
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}


/* 
Copyright (c) 2018 Monica Wheeler
Released under the MIT license*/


/* 20190830 add css */
details h4 {
	padding: .25em 0 .25em .75em;
	border-left: 6px solid #ccc;
	margin: 10px 0;
	font-size: 18px;
}
details strong {
    background: linear-gradient(transparent 60%, #ffcc81 60%);
    font-weight: bold;
}
details a {
    font-weight: bold;
    text-decoration: underline;
}
details[open] summary{
    font-weight: bold;
}
/*引用*/
blockquote {
    position: relative;
    padding: 30px 15px 8px 15px;
    box-sizing: border-box;
    font-style: italic;
    background: #efefef;
    color: #555;
}

blockquote:before{
/*
    display: inline-block;
    position: absolute;
    top: 13px;
    left: 15px;
    content: "\f10d";
    font-family: FontAwesome;
    color: #cfcfcf;
    font-size: 28px;
    line-height: 1;
    font-weight: 900;*/
    display: inline-block;
    position: absolute;
    top: 5px;
    left: 3px;
    content: "“";
    font-family: sans-serif;
    color: #cfcfcf;
    font-size: 90px;
    line-height: 1;
    font-weight: 900;
}

blockquote p {
    padding: 0;
    margin: 10px 0;
    line-height: 1.7;
}

blockquote cite {
    display: block;
    text-align: right;
    color: #888888;
    font-size: 12px;
}