@charset "utf-8";
/* CSS Document */

/* ==== アコーディオン ==== */
.accordion {
	cursor: pointer;
	padding: 10px;
	width: 100%;
	border: none;
	text-align: left;
	background: #eee;
	font-size: 16px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.panel {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.5s ease;
	background: #fff;
	/*padding: 0 10px;*/
}
.close-panel{
  --size: 40px;          /* 直径 */
  --line: 2px;           /* × の線の太さ */
  --bg: #fff;            /* 背景色 */
  --fg: #fff;            /* 線/文字色（currentColor） */
      /* 枠線 */

  position: relative;
  inline-size: var(--size);
  block-size: var(--size);
  border-radius: 50%;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
display: block;
  margin-inline: auto; /* 横方向だけ真ん中 */
	margin-bottom: 20px;
}

/* × の2本線 */
.close-panel::before,
.close-panel::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  height: var(--line);
  background: currentColor;
  border-radius: 1px;
  transform-origin: center; /* 回転の基準を真ん中に */
}

.close-panel::before { transform: translate(-50%, -50%) rotate(45deg); }
.close-panel::after  { transform: translate(-50%, -50%) rotate(-45deg); }

/* ちょいリッチなホバー/フォーカス */
.close-panel:hover{
  background: #f5f5f5;
}
.close-panel:focus-visible{
  outline: 2px solid #9ecbff;
  outline-offset: 2px;
}
#sec1 .close-panel {
  background: rgba(233,78,115,0.50);
}
#sec2 .close-panel {
  background: #004ca170;
}
#sec3 .close-panel {
  background: #59575761;
}
/*#sec1 .panel {
	border-left-color: #E94E73;
	border-right-color: #E94E73;
	border-bottom-color: #E94E73;
	border-left-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-width: 3px;
	border-right-width: 3px;
	border-bottom-width: 3px;
	
}*/
.accordion.active + .panel {
	max-height: 200px;
	/*padding: 10px;*/
}
.accordion span {
    margin-left: 10px;
}