@charset "utf-8";

#about h2{ background-color: var(--main-color); }
#works h2{ background-color: var(--sub-color1); }
#links h2{ background-color: var(--sub-color2); }
#photos h2{ background-color: var(--sub-color3); color: brown; }

/* 募集要項 */
#about{
	position: relative;
	min-height: 100vh;
  background: var(--bg-color);
  overflow-y: scroll;
  li{ list-style: none; }
  .about_inner{
    dl{
      > div{
        display: flex;
        flex-direction: column;
        width: 100%;
        margin-bottom: 20px;
        @media (min-width: 640px) {
          flex-direction: row;
          gap: 1rem;
        }
        > dt, > dd{
          display: flex;
          align-items: center;
          padding: 10px 1em;
        }
        > dt{
          background-color: var(--sub-color3);
          box-shadow: 2px 2px 2px #ccc;
          @media (min-width: 640px) {
            width: 10rem;
          }
        }
        > dd{
          flex: 1;
          background-color: var(--sub-color2);
          box-shadow: 2px 2px 2px #ccc;
          .sub{
            margin-left: 2em;
          }
        }
      }
    }
  }
}

/* 当日の予定 */
#works{
  background: white;

  dl.yotei_all{
    border: dashed 1px #ccc;
    > div{
      width: 100%;
      margin: 20px 0;
      @media (min-width: 480px) {
        display: flex;
        gap: 1rem;
      }
      > dt, > dd {        
        display: flex;
        align-items: flex-start;
        padding: 10px 1em;
        gap: 1rem;
        flex-direction: column;
      }
      > dt {
        @media (min-width: 480px) {
          gap: 0.5rem;
          align-items: center;
        }
        time {
          padding: 3px 5px 2px;
          letter-spacing: 0.1rem;
          border: solid 1px;
          background-color: var(--sub-color1);
          border-radius: 5px;
          color: #fff;
          font-family: "D7CMB";
          font-size: clamp(1rem,3vw,1.2rem);
        }
        .taizai{ color: crimson;}
        .chui_border{ border: solid 2px crimson ;}
      }
      > dd {
        flex: 1;
        .yotei_txt { flex-shrink: 0; }
        .yotei_link{ 
          a::after{
            content: url( "../img/link_other.svg" );
            width: 14px;
            display: inline-block;
            margin-left: 0.5rem;
          }
        }
        .yotei_photo img {
            width: 100%;
            aspect-ratio: 4 / 3;
          @media (min-width: 840px) {
            max-width: 320px;
          }
        }
      }
    }
  }

  div.lec_table{
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 100%;
    margin: 20px 0;
    @media (min-width: 1024px) {
      flex-direction: row;
    }
    > div{
      flex: 1;
    }
    dl{
      line-height: 2.0;
      > div{
        display: flex;
        border-bottom: dotted #fff;
        > dt, > dd{
          padding: 0 0.5rem;
        }
        > dt{
          background-color: var(--sub-color3);
          white-space: nowrap;
        }
        > dd{
          flex-grow: 1;
          background-color: var(--sub-color2);
        }
      }
    }
  }
}

/* 参考になるサイト */
#links {
  background: var(--bg-color);
  ul.site_info {    
    li {
      list-style: square inside;
      line-height: 2.4;
    }
  }
}

/* 写真アルバム */
#photos{
  background-color: white;
  .photo_lists{
    @media (min-width: 480px) {
      columns: 2;
    }
    @media (min-width: 840px) {
      columns: 3;
    }
    li {
      margin-bottom: 1rem;
      img {
        width: 100%;
      }
    }
  }
  .click_txt{
    display: none;
    @media (min-width: 480px) {
      display: block;
    }  
  }
  #modal-container {
    display: none;
    position: fixed;
    background: rgba(0, 0, 0, .6);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99;
    & > div {
      display: flex;
      height: 100vh;
      justify-content: center;
      align-items: center;
      & > img {
        max-width: calc(100vw - 30px);
        max-height: calc(100vh - 30px);
      }
    }
  }
  img.popup {
    cursor: pointer;
  }
}