.acc-block {
  margin: 0 !important;
  padding: 0 !important;
  border: none;
  background: none;
  box-shadow: none;
  border-radius: 0;
  font-family: 'M PLUS 1p', 'BIZ UDPGothic', sans-serif;
}
.acc-block > div {
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 4px;
}
  
/* アコーディオンヘッダー */
.acc-header {
  position: relative;
  background: linear-gradient(90deg, #0073b7, #3498db);
  color: #fff;
  padding: 12px 20px 12px 48px; /* 上下の余白を拡大 */
  font-size: clamp(1.6rem, 4vw, 1.8rem);
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.3s, color 0.3s;

  /* センター揃え */
  display: flex;
  align-items: center;         /* 上下中央 */
  justify-content: center;     /* 左右中央 */
  text-align: center;

  max-width: 1080px;
  margin: 0 auto;
}
  
  /* 左側のマーク */
  .acc-header::before {
    content: "◆";
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    color: #fffdd0;
    transition: transform 0.3s ease;
  }
  
  /* 右側の「＋」 */
  .acc-header::after {
    content: "＋";
    font-size: clamp(1.8rem, 5vw, 2.2rem);
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease, content 0.3s ease;
  }
  
  /* アクティブ状態のヘッダー */
.acc-block.active .acc-header {
	background: linear-gradient(90deg, #005f99, #2271b3);
	color: #fffbea;
}

.acc-block.active .acc-header::after {
	content: "－";
	transform: translateY(-50%) rotate(180deg);
}

.acc-block.active .acc-header::before {
	transform: translateY(-50%) scale(1.3);
}
  
 /* アコーディオンボディ */
.acc-body {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.6s ease, opacity 0.6s ease, padding 0.3s ease;
  padding: 0 20px;
  max-width: 1080px;
  margin: 0 auto;
  font-size: clamp(1.3rem, 3.5vw, 1.5rem);
  line-height: 1.7;
}

.acc-block.active .acc-body {
  max-height: 1500px;  /*JSで制御していれば不要 */
  opacity: 1;
  padding: 20px;
}

/* 最初のブロックだけ上の角を丸く */
.acc-block:first-of-type {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  margin-top: 20px;
}

/* 最後のブロックだけ下の角を丸く */
.acc-block:last-of-type {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  margin-bottom: 20px;
}

/* スマホ対応 */
@media (max-width: 600px) {
  .acc-header {
    padding: 14px 16px 14px 44px;
  }

  .acc-header::before {
    font-size: 1.1rem;
    left: 12px;
  }

  .acc-header::after {
    font-size: 2rem;
    right: 16px;
  }

  .acc-body {
    padding: 0 10px;
  }

  .acc-block.active .acc-body {
    padding: 10px;
  }
}