@charset "UTF-8";

@import url("common.css");
@import url("nav.css");
@import url("tab.css");


/* = SP ================================================ */

@media screen and (min-width:320px) {

  /* header
  -------------------------- */
  header{
    margin:62px 0 30px;
  }

  /* cisco
  -------------------------- */
  .ballon .desc{
    padding-bottom: 1em;
    margin-bottom: 1em;
    border-bottom: 1px solid #14171a;
  }
  .cisco{
    font-size: 1.4rem;
  }
  .cisco dl:first-child{
    margin-bottom: 1em;
  }
  .cisco dt{
    margin-bottom: 0.25em;
  }
  .cisco dd a{
    color: #004da0;
    letter-spacing: 0.04em;
  }

  /* contents
  -------------------------- */
  .tab-c{
    padding-top: 30px;
  }
  .program{
    position: relative;
    text-align: left;
    margin-bottom: 2em;
  }
  .category{
    width: calc(80px + 20 * (100vw - 375px)/393);
    height:auto;
    position: absolute;
    top:0;
  }
  .category img{
    border-radius: 50%;
    border: 2px solid #e0d179;
  }
  time{
    font-size: 2.8rem;
    color: #004da0;
  }
  h2{
    font-size: calc(1.8rem + 3 * (100vw - 375px)/393);
    letter-spacing: 0.04em;
    line-height: 1.6;
    margin-top: 0.15em;
  }
  .n-mark,.mark{
    font-size: calc(2.5rem + 9 * (100vw - 375px)/393);
    padding: 0.25em;
    line-height: 1.75;
    margin-right: 0.1em;
  }
  .n-mark{
    background: #e0d179;
  }
  .mark{
    background: #fff362;
  }
  .tab-c:nth-of-type(3) .category img,
  .tab-c:nth-of-type(3) .n-mark{
    border-color: #b58c4b;
    background: #b58c4b;
  }
  .tab-c:nth-of-type(4) .category img,
  .tab-c:nth-of-type(4) .n-mark{
    border-color: #868e27;
    background: #868e27;
  }
  .tab-c:nth-of-type(5) .category img,
  .tab-c:nth-of-type(5) .n-mark{
    border-color: #958c87;
    background: #958c87;
  }
  time,h2{
    margin-left: calc(94px + 25 * (100vw - 375px)/393);
  }
  .coming{
    font-size: 2.8rem;
    line-height: 1;
  }

  /* check
  -------------------------- */
  figure{
    margin-bottom: 1.65em;
  }
  .desc{
    font-size: 1.7rem;
    line-height: 1.6;
    text-align: justify;
    margin-bottom: 1.65em;
  }

  /* more
  -------------------------- */
  .tab-c:nth-of-type(2) .more,
  .tab-c:nth-of-type(6) .more{
    color: #14171a;
  }
  .tab-c:nth-of-type(2) .more::before,
  .tab-c:nth-of-type(6) .more::before{
    border-color: #14171a;
  }
  .join{
    font-size: 2.6rem;
    width:280px;
    height: auto;
    background: #e0d179;
    border: 2px solid #14171a;
    margin: 0 auto;
  }
  .tab-c:nth-of-type(3) .join{
    background: #b58c4b;
  }
  .tab-c:nth-of-type(4) .join{
    background: #868e27;
  }
  .tab-c:nth-of-type(5) .join{
    background: #958c87;
  }

}

@media (max-width:535px) {
  .display{
    display: none;
  }
  } /* = SP ================================================ */


  /* = PC ================================================ */


  @media screen and (min-width:769px) {

    /* header
    -------------------------- */
    header{
      margin-bottom: 4%;
    }

    /* cisco
    -------------------------- */
    .ballon{
      margin-top: 0;
      margin-bottom: 7%;
    }
    .cisco dl{
      display: inline-block;
      margin: 0 1.5em;
    }
    .cisco dl:first-child{
      margin-bottom: 0;
    }
    .cisco dd a{
      position: relative;
      transition: .3s;
    }
    .cisco dd a::after {
      content: "";
      position: absolute;
      width: 0;
      bottom: -3px;
      left: 0;
      height: 1px;
      background: #004da0;
      transition: .3s;
    }
    .cisco dd a:hover::after {
      width: 100%;
    }

    /* contents
    -------------------------- */
    .tab-c{
      display: block;
      padding-top: 20px;
    }
    .tab-c:not(:first-child){
      margin-top: calc(7% - 20 * (100vw - 769px)/230);
    }
    .tab-c::before{
      transform: rotate(6deg);
    }
    .tab-c:nth-of-type(2)::before{
      border-color: #e0d179;
    }
    .tab-c:nth-of-type(3)::before{
      border-color: #b58c4b;
    }
    .tab-c:nth-of-type(4)::before{
      border-color: #868e27;
    }
    .tab-c:nth-of-type(5)::before{
      border-color: #958c87;
    }
    .category{
      width: 113px;
      height:auto;
    }
    time{
      font-size: 3.3rem;
    }
    h2{
      font-size: 2.7rem;
    }
    .n-mark,.mark{
      font-size: 3.8rem;
    }
    time,h2{
      margin-left: 126px;
    }
    .coming{
      font-size: 3.8rem;
    }

    /* check
    -------------------------- */
    .flex{
      flex-direction: row-reverse;
    }
    .c-img{
      width:46%;
      margin-bottom:0;
    }
    .l-flex{
      display: flex;
      flex-direction: column;
    }
    .lead{
      width:49.5%;
    }
    .c-img img{
      height: 100%;
      width: 100%;
      object-fit: cover;
      object-position: top;
    }

    /* more
    -------------------------- */
    .more{
      width: 100%;
      margin-top: auto;
    }
  }

  @media (min-width:1000px){
    header{
      margin-bottom: calc(4.5% - 40 * (100vw - 1000px)/920);
    }
    .tab-c:not(:first-child){
      margin-top: 25px;
    }

    } /* = PC ============================================== */