@import url('https://fonts.googleapis.com/css2?family=Yeseva+One&display=swap');
.schedule .conts .title_icon {
  background-color: #fff;
}
.schedule .conts .contsTtl {
  background-color: #fff;
}

.schedule section.grade {
    background-color: #FFF;
    margin-bottom: 40px;
}
.schedule section.notice {
    margin-bottom: 80px;
}
.grade ul.age_cate {
    margin-bottom: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    text-align: center;
}
.grade ul.age_cate li a {
  width: 100%;
  display: block;
  border: 2px solid #999;
  color: #999;
  border-radius: 9999px;
  background-color: #fff;
  padding-block: 0.4em;
  font-weight: bold;
}
.grade ul.age_cate li.active a {
  background-color: #999;
  color: #FFF;
  position: relative;
}
.grade ul.age_cate li.active a::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -15px;
    border: 15px solid transparent;
    border-top-width: 15px;
    border-top-style: solid;
    border-top-color: transparent;
    border-top: 15px solid #999;
  }
.grade ul.age_cate li.age0 a {
  border-color: #f582a2;
  color: #f582a2;
}
.grade ul.age_cate li.age0.active a {
  background-color: #f582a2;
  color: #FFF;
}
.grade ul.age_cate li.age0.active a::before {
  border-top-color: #f582a2;
}
.grade ul.age_cate li.age1 a {
  border-color: #ffb132;
  color: #ffb132;
}
.grade ul.age_cate li.age1.active a {
  background-color: #ffb132;
  color: #FFF;
}
.grade ul.age_cate li.age1.active a::before {
  border-top-color: #ffb132;
}
.grade ul.age_cate li.age3 a {
  border-color: #4ab978;
  color: #4ab978;
}
.grade ul.age_cate li.age3.active a {
  background-color: #4ab978;
  color: #FFF;
}
.grade ul.age_cate li.age3.active a::before {
  border-top-color: #4ab978;
}
.grade .area {
    display: none;
}
.grade .area.is-active {
    display: block;
    animation-name: displayAnime;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}
@media (max-width: 768px) {
.grade ul.age_cate {
  padding-inline: 8px;
}
.grade ul.age_cate li {
    flex: 1 1 calc(33.3% - (8px / 3));
}
.grade ul.age_cate li a {
  font-size: 14px;
}
}
@media (min-width: 769px) {
.schedule section {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.grade ul.age_cate {
    max-width: 980px;
    margin-inline: auto;
    gap: 30px;
}
.grade ul.age_cate li {
    flex: 1 1 calc(33.3% - (60px / 3));
}
.grade ul.age_cate li a {
    padding-block: 1em;
}
}
@keyframes displayAnime{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}




/* ===== timeline base ===== */

.timeline .item{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  margin:80px 0;
  position:relative;
}

/* dot */

.timeline .item::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:20px;
  height:20px;
  background:var(--accent);
  border-radius:50%;
  transform:translateX(-50%);
  z-index:2;
}

/* line */

.timeline .item::after{
  content:"";
  position:absolute;
  left:50%;
  top:30px;
  bottom:-80px;
  width:2px;
  transform:translateX(-50%);
  background:repeating-linear-gradient(
    to bottom,
    #ccc 0 6px,
    transparent 6px 12px
  );
}

.timeline .item:last-child::after{
  display:none;
}

/* image */

.timeline .image img{
  width:100%;
  border-radius:20px;
}

.timeline .image:empty{
  display:none;
}

/* text */

.timeline .time{
  color:var(--accent);
  font-size:28px;
  font-weight:bold;
}

.timeline .inline{
  display: flex;
  align-items: center;
  gap: 1em;
}
.timeline h3 {
  font-size:28px;
  font-weight: 900;
  display: flex;
  align-items: center;
  gap: 1em;
}

/* left / right */

.item.left .text{order:2}
.item.left .image{order:1}

.item.right .text{order:1}
.item.right .image{order:2}

/* ===== area color ===== */

.area{
  --accent:#f582a2;
  padding-bottom: 80px;
}

.area.area1{
  --accent:#ffb132;
}

.area.area3{
  --accent:#4ab978;
}

/* ===== mobile ===== */

@media (max-width:768px){

.timeline{
  padding-right:30px;
}

.timeline .item{
  grid-template-columns:1fr;
  padding-left:40px;
  gap:20px;
  margin:20px 0;
}

.timeline .item::before,
.timeline .item::after{
  left:20px;
}

/* image always under */

.item.left .text,
.item.right .text{
  order:1
}
.item.left .image,
.item.right .image{
  order:2
}
.timeline .time,
.timeline h3 {
  font-size:20px;
}
.timeline .note{
  font-size:14px;
}

.area {
  padding-bottom: 30px;
}
}
@media (min-width:769px){
.timeline{
  padding-inline:5%;
}
}


.year .yearWrap {
 --gap-width: 15px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: var(--gap-width);
    margin-bottom: 30px;
}
.year .yearWrap > div {
    border-radius: 8px;
    background-color: #FFF;
    padding: 1em;
    display: flex;
    flex-direction: column;
    background-repeat: no-repeat;
    background-position: right 8px top 8px;
    gap: 4px;
}
.year .yearWrap > div.apr {
    background-image: url(img/apr.png);
}
.year .yearWrap > div.may {
    background-image: url(img/may.png);
}
.year .yearWrap > div.jun {
    background-image: url(img/jun.png);
}
.year .yearWrap > div.jul {
    background-image: url(img/jul.png);
}
.year .yearWrap > div.aug {
    background-image: url(img/aug.png);
}
.year .yearWrap > div.sep {
    background-image: url(img/sep.png);
}
.year .yearWrap > div.oct {
    background-image: url(img/oct.png);
}
.year .yearWrap > div.nov {
    background-image: url(img/nov.png);
}
.year .yearWrap > div.dec {
    background-image: url(img/dec.png);
}
.year .yearWrap > div.jan {
    background-image: url(img/jan.png);
}
.year .yearWrap > div.feb {
    background-image: url(img/feb.png);
}
.year .yearWrap > div.mar {
    background-image: url(img/mar.png);
}
.year .yearWrap > div h3 {
    font-size: 30px;
    font-weight: 400;
    font-family: "Yeseva One", serif;
  font-style: normal;
  line-height: 1.2;
}
.year .yearWrap > div h3 span {
    font-size: 16px;
    font-weight: 900;
}
.year .yearWrap > div .photo {
  align-self: center;
  margin-top: auto;
}
.year .yearWrap .item ul {
  line-height: 1.2;
}
.year .yearWrap .item ul li {
  display: inline-block;
  margin-right: 1.5em;
  font-size: 16px;
}
.year .yearWrap .item ul li::before {
  content: "・";
}
@media (max-width: 768px) {
.schedule section.year {
    padding: 15px;
}
.schedule section.notice {
    padding: 15px;
}
}
@media (min-width: 769px) {
.year .yearWrap {
 --gap-width: 30px;
    flex-direction: row;
    gap: var(--gap-width);
}
.year .yearWrap > div {
    flex-basis: calc(33.3% - ((var(--gap-width) * 2) / 3));
    background-position: right 15px top 15px;
}
.year .yearWrap > div h3 {
    font-size: 36px;
}
.year .yearWrap > div h3 span {
    font-size: 20px;
}
}


ul.memo li {
  text-indent:-1em;
  padding-left:1em;
  font-size: 14px;
}