.cf {
/*zoom: 100%;*/
  overflow: hidden;
}
.cf:after {
  content: "";
  clear: both;
  height: 0;
  display: block;
  visibility: hidden;
}
.eveltTitle{width:100%;cursor: pointer;
    background-color: #f7f5ef;
    border: 1px solid #EEEEEE;
    border-radius: 1.25rem;
}
.eveltData{display:none; width:100%;background-color:#efefef;padding:10px;}
.eveltData_ttl{width: calc(20% - 16px);float:left;background-color:#f7f5ef; margin:4px 8px;padding:8px;}
.eveltData_content{width: calc(80% - 16px);float:left;background-color:#fff; margin:4px 8px; padding:8px;}

details{width:100%;cursor: pointer;
//    background-color: #f7f5ef;
    background-color: #fff;
    border: 1px solid #EEEEEE;
    border-radius: 1.25rem;
margin-top:10px;padding:0px;
}

@media (max-width: 600px) {
  .eveltData_ttl{width:100%;float:none;}
  .eveltData_content{width:100%;float:none;}
  .eveltData_ttl{width: 90%;float:none;border-bottom:solid #ccc 1px; margin:0 auto; padding:8px;}
  .eveltData_content{width: 90%;float:none;background-color:#fff; margin:0 auto; padding:8px;}
}

summary {
  display: grid; /* 初期値の display: list-item 以外を指定したので、デフォルトの三角形アイコンは非表示になる */
  grid-template-columns: 1fr 24px;
  gap: 6px;
  align-items: center;
  margin:10px;
  padding: 16px 24px;
  background-color:#fff;
border:#ccc solid 1px;
}
summary::marker {
  content: "";
}
/* Safariで表示されるデフォルトの三角形アイコンを消します */
summary::-webkit-details-marker {
  display: none;
}
/* --------アイコンを作ります-------- */
.icon {
  display: block;
  position: relative;
  width: 24px;
  transform-origin: center 43%;
  transition: transform 0.4s;
  /* アイコンのバーのスタイル */
  &::before, &::after {
    content: "";
    position: absolute;
    display: block;
    width: 15px;
    height: 3px;
    background-color: #7050ff;
  }
  &::before {
    left: 0;
    transform: rotate(45deg);
  }
  &::after {
    right: 0;
    transform: rotate(-45deg);
  }
}
/* アコーディオンが開いた時のスタイル */
details[open] .icon {
  transform: rotate(180deg);
}
/* summaryタグの疑似要素でアイコンを作るパターン
（注意）疑似要素のトランジションはSafari 17.4以前でうまくいかない */
.pseudoElement {
  summary::after {
    content: "";
    display: block;
    width: 25px;
    height: 16px;
    margin-left: 6px;
    background-image: url("icon.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform-origin: center 43%;
    transition: transform 0.4s;
  }
  details[open] summary::after {
    transform: rotate(180deg);
  }
}

details {
  /* --------アコーディオンの中身のスタイル-------- */
  &::details-content {
    transition:
      height 0.4s,
      opacity 0.4s,
      content-visibility 0.4s allow-discrete;
    height: 0;
    opacity: 0;
    overflow: clip;
    background-color:#fff;
  }

  /* --------アコーディオンの中身のスタイル（開いている時）-------- */
  &[open]::details-content {
    opacity: 1;
  }

  /* アコーディオンが開いた時のスタイル */
  &[open] .icon {
    transform: rotate(180deg);
  }
}

@supports (interpolate-size: allow-keywords) {
  :root {
    interpolate-size: allow-keywords; /* height:0（数値型） → auto（文字型） のアニメーションを可能にするための指定 */
  }
  details[open]::details-content {
    height: auto;
  }
}

/* height:0→autoへのアニメーションが対応していない場合は、固定値にアニメーションさせる */
@supports not (interpolate-size: allow-keywords) {
  details[open]::details-content {
    height: 150px;
    overflow-y: scroll;
  }
}

.lineTitle{font-weight:bold;font-size:1.15em;display:inline-block;padding:3px 6px;}
.open{background-color:#80d993;display:inline-block;padding:3px 6px;border-radius: 0.5rem;}
.closed{background-color:#ff0;display:inline-block;padding:3px 6px;border-radius: 0.5rem;}
.finish{background-color:#ccc;display:inline-block;padding:3px 6px;border-radius: 0.5rem;}