@charset "Shift_JIS";
.accordion-test summary{
  position: relative;
  list-style: none;
  /* デフォルトの三角形アイコンを消します */
	padding : 5px 45px 5px 25px;
  border : 1px solid #000474;
  cursor: pointer;
  /* ポインターを指さしマークに変更 */

  background-color : #00cccc;
  text-align : left;
  font-size : 110%;
  text-indent : 2em;
  letter-spacing : 0.5em;
  font-weight : bold;
  margin-top : 1px;
  margin-bottom : 1px;
  color : navy;
}
.accordion-test summary::-webkit-details-marker {
  display: none;
/* Safariで表示されるデフォルトの三角形アイコンを消します */
}
.accordion-test summary::after{
  position: absolute;
  width: 15px;
  height: 15px;
  top: calc(50% - 10px);
  right: 25px;
  border-right: 4px solid #000474;
  border-bottom: 4px solid #000474;
  box-sizing: border-box;
  content: "";
  transform: rotate(45deg);
  transition: top 0.4s ease-out, transform 0.4s ease-out;
}
.accordion-test details[open] summary::after{
  top: calc(50% - 5px);
  transform: rotate(-135deg);
}
.accordion-test .contents{
  padding: 15px 45px;
  background-image : none;
  background-repeat : repeat;
  background-attachment : scroll;
  background-position : 0% 0%;
  background-size : auto auto;
  background-origin : padding-box;
  background-clip : border-box;
}
/* ここから背景色ライトグレー*/
.accordion-lg summary::-webkit-details-marker {
  display: none;
/* Safariで表示されるデフォルトの三角形アイコンを消します */
}
.accordion-lg details[open] summary::after{
  top: calc(50% - 5px);
  transform: rotate(-135deg);
}
/* ここから背景色ダークグレー*/
.accordion-dg summary::-webkit-details-marker {
  display: none;
/* Safariで表示されるデフォルトの三角形アイコンを消します */
}
.accordion-dg details[open] summary::after{
  top: calc(50% - 5px);
  transform: rotate(-135deg);
}
.gray{
  background-color : #cccccc;
}
.gray ::after{
  background-color : #cccccc;
}
.accordion-test{
  clear : both;
}