@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;
  }

  /* contents
  -------------------------- */
  .program,.profile{
    text-align: left;
  }
  .program{
    position: relative;
    margin-bottom: 4em;
  }
  .category{
    width: calc(80px + 20 * (100vw - 375px)/393);
    height:auto;
    position: absolute;
    top:0;
  }
  time{
    font-size: 2.8rem;
    color: #004da0;
  }
  h2{
    font-size: 3rem;
    letter-spacing: 0.04em;
    line-height: 1.2;
    margin-top: 0.15em;
    display: inline-block;
  }
  time,h2{
    margin-left: calc(94px + 25 * (100vw - 375px)/393);
  }

  /* profile
  -------------------------- */
  .p-box{
    border-top:1px solid #14171a;
    margin-bottom: 1.5em;
  }
  .profile{
    flex:1;
  }
  .name{
    display: inline-block;
    font-size: 1.7rem;
    color: #fff;
    background: #14171a;
    padding:0.5em 0.8em;
    margin-bottom: 0.7em;
  }
  .desc{
    font-size: 1.4rem;
    line-height: 1.6;
    text-align: justify;
    font-weight: normal;
  }
  .face{
    width: 200px;
    margin-left: 2.5em;
  }
  .flex-r{
    flex-direction: row-reverse;
  }
  .flex-r .face{
    margin-left: 0;
    margin-right: 2.5em;
  }
  .flex-r .profile{
    text-align: right;
  }
  @media (max-width:587px){
    .tab-c .flex{
      flex-direction: column;
    }
    .profile{
      margin-bottom:1.5em;
    }
    .face,.flex-r .face{
      margin: 0 auto;
    }
  }

  /* check
  -------------------------- */
  .check{
    position: relative;
    background: #e0d179;
    padding:4em 4.5em;
    margin-top: 3em;
  }
  .tab-c:nth-of-type(2) .check{
    background: #b58c4b;
  }
  .tab-c:nth-of-type(3) .check{
    background: #868e27;
  }
  .tab-c:nth-of-type(4) .check{
    background: #958c87;
  }
  .c-t{
    position: absolute;
    color: #fff;
    font-size:3.6rem;
    letter-spacing: 0.1em;
    top: -2%;
    right: 3%;
    text-shadow:
    #14171a 2px 0px 0px, #14171a -2px 0px 0px,
    #14171a 0px -2px 0px, #14171a 0px 2px 0px,
    #14171a 2px 2px 0px, #14171a -2px 2px 0px,
    #14171a 2px -2px 0px, #14171a -2px -2px 0px,
    #14171a 1px 2px 0px, #14171a -1px 2px 0px,
    #14171a 1px -2px 0px, #14171a -1px -2px 0px,
    #14171a 2px 1px 0px, #14171a -2px 1px 0px,
    #14171a 2px -1px 0px, #14171a -2px -1px 0px,
    #14171a 1px 1px 0px, #14171a -1px 1px 0px,
    #14171a 1px -1px 0px, #14171a -1px -1px 0px;
    transform: rotate(12deg);
  }
  .c-img{
    width:100%;
    margin-bottom:2em;
  }
  .c-desc{
    font-size: 1.7rem;
    line-height: 1.6;
    text-align: justify;
  }

  /* youtube
  -------------------------- */
  .youtube{
    width: 100%;
    margin: 2.5em 0;
  }
  .youtube p{
    font-size: 1.5rem;
    margin-bottom: 0.5em;
  }
  .youtube a{
    font-size: 1.8rem;
    font-weight: bold;
    border: 2px solid #14171a;
    background: #fff;
    padding: 1em 0.5em;
  }
  .youtube a img{
    width: auto;
    height: 18px;
  }
  .y-title{
    display: inline-block;
    width: 40px;
    margin-left: 10px;
  }

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


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


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

    /* header
    -------------------------- */
    header{
      margin-bottom: calc(7% - 5 * (100vw - 769px)/230);
    }

    /* contents
    -------------------------- */
    .tab-c{
      display: block;
      padding-top: 20px;
    }
    .tab-c:not(:first-child){
      margin-top: calc(0.6% + 9 * (100vw - 769px)/230);
    }
    .tab-c::before{
      transform: rotate(6deg);
    }
    .category{
      width: 113px;
      height:auto;
    }
    time{
      font-size: 3.3rem;
    }
    h2{
      font-size: 3.8rem;
    }
    time,h2{
      margin-left: 126px;
    }

    /* profile
    -------------------------- */
    .p-box{
      max-width: 676px;
      margin: 0 auto 1.5em;
    }
    .name{
      font-size: 1.9rem;
    }
    .desc{
      font-size: 1.5rem;
    }

    /* check
    -------------------------- */
    .c-t{
      font-size: 5rem;
    }
    .c-img{
      width:46%;
      margin-bottom:0;
    }
    .c-desc{
      width:49.5%;
    }
    .c-img img{
      height: 100%;
      width: 100%;
      object-fit: cover;
      object-position: top;
    }

    /* youtube
    -------------------------- */
    .youtube p{
      font-size: 1.8rem;
    }
    .youtube a{
      font-size: 2.2rem;
      background-image: linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 77, 160, 1) 50%);
      background-position: 0 0;
      background-size: auto 200%;
      transition: .3s;
    }
    .youtube a:hover {
      background-position: 0 100%;
      color: #fff;
    }
    .youtube a img{
      width: auto;
      height: 22px;
    }
    .y-title:hover{
      opacity: .5;
      transition: .5s;
    }
    .y-title img{
      vertical-align: baseline;
    }

  }

  @media (min-width:1000px){
    header{
      margin-bottom: calc(7.5% - 64 * (100vw - 1000px)/920);
    }
    .tab-c:not(:first-child){
      margin-top: 17px;
    }
  } /* = PC ============================================ */