@charset 'utf-8';

/* #cource */
#cource {
  /*background: url('../images/common/bg-cource.jpg') top center;*/
}
  #cource h1 {
    font-size: 4.2rem;
    color: #fff;
    font-weight: bold;
    letter-spacing: 1px;
  }
    #cource h1 {
      padding-bottom: 10px;
      max-width: 1280px;
      margin: 0 auto;
    }
      #cource h1 .pc {
        display: block;
      }
      #cource h1 .sp {
        display: none;
      }
      #cource h1 img {
        display: block;
        width: 100%;
        height: auto;
      }
    main > .header {
      padding: 0 5%;
    }
    main > .header p {
      font-size: 1.8rem;
    }
      main > .header p span {
        display: block;
      }

@media screen and (max-width: 1280px) {
  #cource h1 img {
    display: block;
    height: auto;
  }
}

@media screen and (max-width: 640px) {
  #cource h1 {
    font-size: 2.8rem;
  }
  #cource h1 .pc {
    display: none;
  }
  #cource h1 .sp {
    display: block;
  }
}

  .section {
    max-width: 1280px;
    margin: 80px 5% 0;
  }
    .section > h2 {
      font-size: 3rem;
      font-weight: bold;
    }

@media screen and (max-width: 640px) {
  .section {
    max-width: 1280px;
    margin: 40px 5% 0;
  }
    .section > h2 {
      font-size: 2.4rem;
      font-weight: bold;
    }
}

  #cource .context {
    max-width: 1280px;
    margin: 0 auto;
    width: 90%;
  }
  #cource .lists_wrap01{
    margin: 0 auto;
  }
  #cource .lists {
    display: flex;
    flex-wrap: wrap;
  }

    #cource .list:link,
    #cource .list:visited,
    #cource .list:hover,
    #cource .list:active {
      display: block;
      text-align: left;
      width: 47%;
      margin: 30px 1.5% 0;
      color: #fff;
      background: url('../images/common/ico-arr-cir-wh.svg') 98% 50% no-repeat;
      background-size: auto auto;
      -webkit-background-size: 20px;
      background-size: 20px;
    }
    #cource .list:nth-of-type(1) {
      background-color: #079fe5;
    }
    #cource .list:nth-of-type(2) {
      background-color: #00933b;
    }
    #cource .list:nth-of-type(3) {
      background-color: #ed83b8;
    }
    #cource .list .inner {
      padding: 20px 35px 20px 0;
    }
    #cource .list:nth-of-type(2n+1) {
      clear: both;
    }

    #cource .list .header {
      overflow: hidden;
      padding-bottom: 10px;
    }
    #cource .list .figure {
      float: left;
      width: 48%;
    }
      #cource .list .figure img {
        width: 100%;
        height: auto;
      }
    #cource .list .inner {
      float: right;
      width: 48%;
    }
    #cource .list b {
      display: block;
      margin-bottom: 5px;
      font-size: 2rem;
      font-weight: bold;
      color: #fff;
    }
    #cource .list {
      font-size: 1.4rem;
    }

@media screen and (max-width: 880px) {
    #cource .list:link,
    #cource .list:visited,
    #cource .list:hover,
    #cource .list:active {
      color: #fff;
      background-image: none;
      background-size: auto auto;
      -webkit-background-size: 20px;
      background-size: 20px;
    }
    #cource .list .figure {
      float: none;
      width: 100%;
    }
      #cource .list .figure img {
        width: 100%;
        height: auto;
      }
    #cource .list .inner {
      float: none;
      width: 100%;
    }
    #cource .list .inner {
      background: url('../images/common/ico-arr-cir-wh.svg') 98% 50% no-repeat;
      background-size: auto auto;
      -webkit-background-size: 20px;
      background-size: 20px;
      padding: 20px 35px 20px 20px;
    }
}

@media screen and (max-width: 640px) {
  #cource .lists {
    display: block;
    margin: 0;
  }
    #cource .list {
      float: none;
      text-align: left;
      width: auto;
      margin: 30px 0 0;
    }
    #cource .list:link, #cource .list:visited, #cource .list:hover, #cource .list:active{
      width: auto;
    }
    #cource .list:first-child {
      margin-top: 15px;
    }
    #cource .list b {
      display: block;
      margin-bottom: 5px;
      font-size: 2rem;
      font-weight: bold;
      color: #fff;
    }
    #cource .list {
      font-size: 1.6rem;
    }
}