@charset "utf-8";
/* CSS Document */

.main {
    height: 3000px;
    /* background-color: #ff0000; */
    text-align: center;
  }
  .content1, .content2, .content3, .content4, .content5 {
    width: 600px;
    height: 400px;
    /* background-color: #0000ff; */
    margin: 30px auto;
    /* color: #ffffff; */
  }



  .modal,
  .com-02-modal,
  .com-03-modal,
  .com-04-modal,
  .com-09-modal,
  .com-12-modal,
  .com-13-modal,
  .com-14-modal,
  .com-15-modal,
  .com-18-modal,
  .com-19-modal,
  .col-up-img{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;   
  }

  #com-01,
  #com-02,
  #com-03,
  #com-04,
  #com-09,
  #com-12,
  #com-13,
  #com-14,
  #com-15,
  #com-18,
  #com-19,
  #col-up{
    cursor: pointer;
  }

  .modal_wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.66);
  }
  .modal_content {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      /* color: #ffffff; */
      font-size: 22px;
      display: flex;
      justify-content: center;
      align-items: center;
  }


  .col-up-img .modal_wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .col-up-img picture{
    height: 90%;
  }

  .col-up-img img{
    height: 100%;
    width: auto;
    position: relative;
  }

  .modal-close{
    position: fixed;
    right: 25%;
    top: 30px;
    font-size: 30px;
    cursor: pointer;
    z-index: -1;
  }

  @media screen and (max-width: 1600px) {
      .modal-close{
        right: 10%;
      }
    }

  @media screen and (max-width: 767px) {
    .col-up-img img{
      width: 100%;
      height: auto;
    }
  
}