@charset "UTF-8";

/*リストの基本形*/
/*list_boxと任意のリスト名クラスを付与し、gapと横列数を指定*/

.list_box{
    display: flex;
    width: 80%;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    gap:var(--gap);

    & > li{
        width: calc((100% - var(--gap) * calc(var(--listitem-length) - 1)) / var(--listitem-length));
    }
    &.slideup li{
        opacity: 0;
    }
    &.animation.slideup li{
        animation: slide-up 1.1s forwards;
    }
}


/*点つきリスト*/
.dot-list{
	padding:0 1em;
}

.dot-list,
.dot-list li,
.point_list_box ul,
.point_list_box li{
	list-style:disc;
}
.dot-list li{
	margin-bottom: 0.5em;
}



@media (max-width:1024px) {
  .list_box{
    flex-wrap: wrap;
    --listitem-length:2;
    --gap:2.5em;
  }
}

@media (max-width:600px) {
  .list_box{
    width: 100%;
    --gap:1.5em;
  }
}