@charset "UTF-8";

/*	┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
	┃　
	┃　■ 初版 1.0.0
	┃　
	┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛*/

/* CSS Document */

/* 
解説
いろいろな方法で表示方法を紹介
https://code-kitchen.dev/html/details-summary/
【番外編】
	https://www.omakase.net/blog/2022/05/css-accordion.html
	https://gokansoichiro.com/blog/css-accordion/
ブログデザイン備忘録 ～ detailタグのアニメーション
https://atatat.hatenablog.com/entry/blog_design77_detail_anim

https://developer.mozilla.org/ja/docs/Web/CSS/list-style-type
 */
/* accordion */



.accordion-01 details {
	display:block;
	margin: 0 0 1rem 0;
	padding: 0 0 0 0;
	height:1em; /* ※1）この指定があることで、アニメーションが機能する */
	transition: 0.5s;
}
	details div.details-content{
		margin: 0 0 2rem 1.2rem;
		animation: fadeOut 0.5s ease;
	}

.accordion-01 details[open] {
	height: auto;  /*※1）この指定があることで、アニメーションが機能する */
	transition: 0.5s;
}
	.accordion-01 details[open] div.details-content{
		animation: fadeIn 0.5s ease;
	}

	.accordion-01 details summary {
		height:auto;
		font-weight:bold;
		cursor: pointer;
		list-style-type: "＋ ";
		/* list-style-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/85188/arrow-right.svg); */
	}

	/* 	 */
	.accordion-01 details summary::marker,
	.accordion-01 details summary::-webkit-details-marker {
		
		font-size: 1rem;
		vertical-align: middle;
	}


	.accordion-01 details[open] summary {
		list-style-type: "− ";
		/* list-style-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/85188/arrow-right.svg); */
	}

@keyframes fadeIn {
  0% {
    opacity: 0; /* 透明 */
    transform: translateY(-10px); /* 上から表示 */
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

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