@charset "utf-8";

@import url("../../style/variables.css");/*変数定義*/
	
:root{
  --color_kadan:#D01417;
  --color_nouen:#E28F13;
  --color_ajisai:#87B328;
  --color_sibafu:#218E42;;
  --color_ent:#1F928B;
  --color_go:#1D91CE;
  --color_jitensha:#1460A5;
  --color_golf:#1A2971;
  --color_dog:#851376;
}


#mark_top{
  border:2px solid #ffd540;
  padding:20px;
  border-radius: 10px;
  background:#fff9ee;
}


.mark_list{
  ul{
    display:flex;
    justify-content: start;
    flex-wrap:wrap;
    gap:.5em 1.5em;
    li{
      display:grid;
      grid-template-columns: 1.7em 1fr;
      justify-content: start;
      gap:0 .5em;
      strong{
        background:var(--color_kadan);
        padding:0 0;
        color:white;
        text-align: center;
        display:inline-block;
        border-radius: 3px;
      }
      p{
        font-size: .9rem;
        text-align: left;
      }
      &:nth-of-type(2){
        strong{
          background:var(--color_nouen);
        }
      }
      &:nth-of-type(3){
        strong{
          background:var(--color_ajisai);
        }
      }
      &:nth-of-type(4){
        strong{
          background:var(--color_sibafu);
        }
      }
      &:nth-of-type(5){
        strong{
          background:var(--color_ent);
        }
      }
      &:nth-of-type(6){
        strong{
          background:var(--color_go);
        }
      }
      &:nth-of-type(7){
        strong{
          background:var(--color_jitensha);
        }
      }
      &:nth-of-type(8){
        strong{
          background:var(--color_golf);
        }
      }
      &:nth-of-type(9){
        strong{
          background:var(--color_dog);
        }
      }
    }
  }
}


#schedule{
  section{
    display:grid;
    grid-template-columns: 5rem 1fr;
    align-items: start;
    gap:1em;
    margin:50px auto 0 auto;
    h3{
      height:5rem;
      font-size: 1.7rem;
      line-height:1em;
      background:#F3E6ED;
      color:#5e4dae;
      border-radius: .5rem;
      display: grid;
      place-items: center;
    }
    ul{
      display:grid;
      grid-template-columns: repeat(auto-fill,minmax(min(200px,1100%),1fr));
      gap:0 10px;
      li{
        display:grid;
        grid-template-columns: 1.7em 1fr;
        justify-content: start;
        gap:0 .5em;
        align-items: start;
        padding:10px 5px;
        border-top:1px dotted silver;
        &:nth-last-child(-n+3){
          border-bottom:1px dotted silver;
        }
      }
    }
    &:nth-of-type(1),&:nth-of-type(7),&:nth-of-type(12){
      h3{
        background:#DFF1F1;
        color:#21769e;
      }
    }
    &:nth-of-type(2),&:nth-of-type(4),&:nth-of-type(10){
      h3{
        background:#FCE8E7;
      color:#7c4212;
      }
    }
    &:nth-of-type(3),&:nth-of-type(5),&:nth-of-type(8){
      h3{
        background:#FFF1BD;
      color:#9d5a00;
      }
    }
  }
}

#pictures{
  i{
    margin:0 .3em 0 0;
    font-weight: 500;
  }
  strong{
    background:var(--color_kadan);
    margin:0 .3em 0 0;
    color:white;
    text-align: center;
    display:inline-block;
    border-radius: 3px;
    padding:0 .2em;
    &.nou{
      background:var(--color_nouen);
    }
    &.ajisai{
      background:var(--color_ajisai);
    }
    &.sibafu{
      background:var(--color_sibafu);
    }
    &.ent{
      background:var(--color_ent);
    }
    &.go{
      background:var(--color_go);
    }
    &.jitensha{
      background:var(--color_jitensha);
    }
    &.golf{
      background:var(--color_golf);
    }
    &.dog{
      background:var(--color_dog);
    }
  }
}