.toc-editor-wrapper {
  background:#f7f7f7;
  border:1px solid #dcdcdc;
  border-radius:4px;
  padding:10px 12px 14px;
  margin-bottom:12px;
  counter-reset: num;
}

.toc-editor-wrapper > h3 {
  margin:0 0 10px;
  font-size:14px;
}

.toc-section {
  border-top:1px solid #e1e1e1;
  border-left:1px solid #e1e1e1;
  border-right:1px solid #e1e1e1;
  padding:16px 8px;
  padding-left:40px;
  counter-increment: num;
  position:relative;
  background:#fff;
}

.toc-section:before{
	position: absolute;
    content: counter(num, decimal);
    left: 14px;
    top: 50%;
    font-size: 12px;
    transform: translateX(-50%);
	z-index:1;
	color:#000;
	font-weight:bold;
}
.toc-section:after{
	content:'';
	background:#fafafa;
	position:absolute;
	width:30px;
	height:100%;
	top:0;
	left:0;
	border-right:1px solid #ddd;
}
.toc-section:last-of-type {
  border-bottom:1px solid #e1e1e1;
}

.toc-field {
  margin-bottom:16px;
}

.toc-field-label {
  display:block;
  font-size:13px;
  font-weight:600;
  margin-bottom:6px;
}

.toc-group {
  margin-left:20px;
}

.toc-group-label {
  font-size:12px;
  margin-bottom:6px;
  color:#555;
}

.toc-row {
  display:flex;
  align-items:flex-start;
}

.toc-row-index {
  width:32px;
  min-width:32px;
  height:32px;
  border:1px solid #ddd;
  background:#fafafa;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  margin-right:8px;
}

.toc-row-field {
  flex:1;
}

.toc-row-add {
  text-align:right;
  margin-top:6px;
}

.toc-row-add .components-button.is-primary {
  background:#007cba;
  color:#fff;
}

.toc-section-footer {
  margin-top:10px;
  text-align:right;
}

.toc-editor-wrapper .components-text-control__input {
  width:100%;
}

.toc-preview {
  border:1px solid #eee;
  border-radius:4px;
  padding:10px 12px;
  cursor:pointer;
  max-width: 840px;
  margin:auto;
}
.toc-preview ul{
  list-style:none !important;
}
.toc-preview h3 {
  margin-top:0;
  font-size:14px;
}


/* --- TOC 番号 --- */
.suntimes-toc > ul {
  counter-reset: toc-h2;
}

.suntimes-toc > ul > li {
  counter-increment: toc-h2;
}

.suntimes-toc > ul > li > a::before {
  content: counter(toc-h2) ". ";
  font-weight: 600;
  margin-right: 0.25em;
}

/* H3 */
.suntimes-toc > ul > li > ul {
  counter-reset: toc-h3;
}

.suntimes-toc > ul > li > ul > li {
  counter-increment: toc-h3;
}

.suntimes-toc > ul > li > ul > li > a::before {
  content: counter(toc-h2) "-" counter(toc-h3) " ";
  opacity: 0.8;
  margin-right: 0.25em;
}

.toc-title{
  font-size: 1.5rem;
  font-weight:bold;
}
.toc-h2{
  color:#000;
  font-size:1.1rem;
  padding:10px;
  border:1px solid #e1e1e1;
  position:relative;
}
.toc-h3{
  color:#000;
  font-size:1.1rem;
  padding:10px;
  border:1px solid #e1e1e1;
  position:relative;
  margin-left:20px;
  margin-top:10px;
}
.toc-h3-row{
  position:relative;
}
.toc-h3-row button{
  position:absolute;
	right:0;
	top:10px;
}
.toc-controls{
display: flex;
    justify-content: space-between;
    margin-left: 20px;
    margin-top: 10px;
}

h2,h3{
	scroll-margin-top:85px;
}

.layout-with-toc {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
}

/* aside */
.toc-area {
  position: sticky;
  top: 100px; /* ヘッダー高さ分 */
  align-self: flex-start;

  /* 可変長対策 */
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}


@media (max-width: 768px) {
  .toc-area {
    position: static;
    max-height: none;
    overflow: visible;
  }
}