@charset "UTF-8";
/*==========================
    - 〜479px      ：SP portrait
    - 480px〜599px ：SP landscape
    - 600px〜959px ：tablet
    - 960px〜1279px：small PC
    - 1280px〜     ：large PC
    - 1400px〜     ：largest PC
==========================*/
/* 〜479px：SP portrait
------------------------------ */
/***************************
    container
***************************/
#title-bar {
  background-image: url(../img/h1_sp.png); }

#block-intro {
  z-index: 1; }
  #block-intro > .bg {
    background: url(../img/intro_bg1_sp.png) no-repeat;
    background-size: 100%; }
    #block-intro > .bg:before {
      background: url(../img/intro_bg2_sp.png) no-repeat;
      background-size: 100%; }
    #block-intro > .bg:after {
      top: auto;
      bottom: -30px;
      background: url(../img/intro_bg3_sp.png) bottom no-repeat;
      background-size: 100%; }
  #block-intro > .inner {
    padding: 20px 0 65px; }
  #block-intro h2 {
    letter-spacing: -1px; }

#block-curriculum > .bg {
  background: #f9f8f0 url(../img/curriculum_bg_sp.png);
  background-size: cover; }
#block-curriculum > .inner {
  padding: 34px 0 65px; }
#block-curriculum .example {
  margin: 35px auto 0; }
  #block-curriculum .example .box + .box {
    margin: 34px 0 0; }
  #block-curriculum .example .box h5 {
    position: relative;
    margin: 0 0 10px;
    padding: 0 0 0 12px;
    line-height: 32px;
    color: #fff; }
    #block-curriculum .example .box h5:before {
      content: '';
      position: absolute;
      z-index: -1;
      left: -5.147058823529411%;
      top: 0;
      width: 150px;
      height: 100%; }
    #block-curriculum .example .box h5:after {
      content: '';
      position: absolute;
      z-index: -1;
      left: calc(-5.147058823529411% + 150px);
      top: 0;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 32px 0 0 32px; }
  #block-curriculum .example .box .caption {
    padding: 0 0 0 12px;
    font-size: 10px; }
  #block-curriculum .example .box ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; }
    #block-curriculum .example .box ul li {
      width: 100%;
      margin: 15px 0 0;
      background: #fff;
      text-align: center; }
      #block-curriculum .example .box ul li .name {
        line-height: 36px;
        color: #fff; }
      #block-curriculum .example .box ul li .description {
        padding: 12px 0;
        line-height: 24px;
        font-size: 12px;
        border: 2px solid #5698da;
        border-top: none;
        border-bottom: none; }
      #block-curriculum .example .box ul li .photo {
        border: 2px solid #5698da;
        border-top: none; }
  #block-curriculum .example .box:nth-child(1) h5:before {
    background: #5698da; }
  #block-curriculum .example .box:nth-child(1) h5:after {
    border-color: transparent transparent transparent #5698da; }
  #block-curriculum .example .box:nth-child(1) ul li .name {
    background: #5698da; }
  #block-curriculum .example .box:nth-child(1) ul li .description,
  #block-curriculum .example .box:nth-child(1) ul li .photo {
    border-color: #5698da; }
  #block-curriculum .example .box:nth-child(2) h5:before {
    background: #2769ac; }
  #block-curriculum .example .box:nth-child(2) h5:after {
    border-color: transparent transparent transparent #2769ac; }
  #block-curriculum .example .box:nth-child(2) ul li .name {
    background: #2769ac; }
  #block-curriculum .example .box:nth-child(2) ul li .description,
  #block-curriculum .example .box:nth-child(2) ul li .photo {
    border-color: #2769ac; }
  #block-curriculum .example .box:nth-child(3) h5:before {
    background: #104e8e; }
  #block-curriculum .example .box:nth-child(3) h5:after {
    border-color: transparent transparent transparent #104e8e; }
  #block-curriculum .example .box:nth-child(3) ul li .name {
    background: #104e8e; }
  #block-curriculum .example .box:nth-child(3) ul li .description,
  #block-curriculum .example .box:nth-child(3) ul li .photo {
    border-color: #104e8e; }

#block-term {
  z-index: 1; }
  #block-term > .bg {
    background: url(../img/term_bg1_sp.png) center top no-repeat;
    background-size: cover; }
    #block-term > .bg:before {
      top: -45px;
      background: url(../img/term_bg2_sp.png) no-repeat;
      background-size: 100%; }
    #block-term > .bg:after {
      top: auto;
      bottom: -50px;
      background: url(../img/term_bg3_sp.png) bottom no-repeat;
      background-size: 100%; }
  #block-term > .inner {
    padding: 38px 0 65px; }
  #block-term h3 {
    margin: 0 0 22px;
    line-height: 23px;
    font-size: 15px;
    text-align: center;
    color: #104e8e; }
  #block-term .image {
    margin: 0 0 34px; }

#block-movie > .bg {
  background: url(../img/movie_bg1_sp.jpg) center top no-repeat;
  background-size: cover; }
  #block-movie > .bg:before {
    background: url(../img/movie_bg2_sp.png) no-repeat;
    background-size: 100%; }
#block-movie > .inner {
  padding: 38px 0 65px;
  color: #fff; }
#block-movie h2 {
  color: #fff; }
#block-movie h3 {
  margin: 40px 0 22px;
  line-height: 23px;
  font-size: 15px;
  text-align: center;
  color: #fff; }
#block-movie .box li {
  margin: 32px 0 0; }
  #block-movie .box li h4 {
    margin: 0 0 12px;
    line-height: 26px;
    font-size: 15px; }
  #block-movie .box li .text {
    margin: 0 0 16px; }
  #block-movie .box li .movie {
    position: relative;
    padding: 56.470588235294116% 0 0 100%; }
    #block-movie .box li .movie span {
      position: absolute;
      z-index: 1;
      left: 0;
      top: 0;
      display: block;
      width: 100%;
      height: 100%;
      background-size: cover; }
      #block-movie .box li .movie span.movie1 {
        background-image: url(../img/movie_thumb1.jpg); }
      #block-movie .box li .movie span.movie2 {
        background-image: url(../img/movie_thumb2.jpg); }
      #block-movie .box li .movie span.movie3 {
        background-image: url(../img/movie_thumb3.jpg); }
      #block-movie .box li .movie span.movie4 {
        background-image: url(../img/movie_thumb4.jpg); }
    #block-movie .box li .movie iframe {
      position: absolute;
      z-index: 0;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%; }
    #block-movie .box li .movie.play span {
      z-index: -1; }

#block-cost > .bg {
  background: url("/robopro/general/img/bg_gray_box.jpg");
  background-size: 103.5px 178.5px; }
  #block-cost > .bg:before {
    top: -37px;
    background: url(../img/cost_bg_sp.png) no-repeat;
    background-size: 100%; }
#block-cost > .inner {
  padding: 38px 0 65px; }
#block-cost table {
  width: 100%;
  border-collapse: collapse;
  background: #fff; }
  #block-cost table + table {
    margin: 15px 0 0; }
  #block-cost table th, #block-cost table td {
    line-height: 18px;
    font-size: 11px;
    vertical-align: middle;
    border: 1px solid #cecece; }
  #block-cost table th {
    width: 29.117647058823533%;
    padding: 12px 0;
    text-align: center;
    color: #fff;
    background: #5698da;
    border-right: none; }
  #block-cost table td {
    width: 70.88235294117646%;
    padding: 12px;
    border-left: none; }
    #block-cost table td .caption {
      display: inline-block;
      font-size: 9px;
      text-indent: -1em;
      margin-left: 1em; }

/* 480px〜599px：SP landscape
------------------------------ */
@media screen and (min-width: 414px) {
  /***************************
      container
  ***************************/ }
/* 600px〜959px：tablet
------------------------------ */
@media screen and (min-width: 600px) {
  /***************************
      container
  ***************************/ }
/* 960px〜1279px：small PC
------------------------------ */
@media screen and (min-width: 960px) {
  /***************************
      container
  ***************************/
  #title-bar {
    background-image: url(../img/h1_pc.png); }

  #block-intro {
    z-index: 1; }
    #block-intro > .bg {
      background-image: url(../img/intro_bg1_pc.png); }
      #block-intro > .bg:before {
        background-image: url(../img/intro_bg2_pc.png); }
      #block-intro > .bg:after {
        bottom: -164px;
        background-image: url(../img/intro_bg3_pc.png); }
    #block-intro > .inner {
      padding: 45px 0 120px; }

  #block-curriculum > .bg {
    background: #f9f8f0 url(../img/curriculum_bg_pc.png);
    background-size: cover; }
  #block-curriculum > .inner {
    padding: 100px 0 120px; }
  #block-curriculum .example {
    width: 950px;
    margin: 70px auto 0; }
    #block-curriculum .example .box + .box {
      margin: 80px 0 0; }
    #block-curriculum .example .box h5 {
      margin: 0 0 20px;
      padding: 0;
      line-height: 53px; }
      #block-curriculum .example .box h5:before {
        left: auto;
        right: calc(100% - 190px);
        top: 0;
        width: 10000px; }
      #block-curriculum .example .box h5:after {
        left: 190px;
        border-width: 53px 0 0 53px; }
    #block-curriculum .example .box .caption {
      position: absolute;
      top: 38px;
      left: 251px;
      line-height: 12px;
      padding: 0;
      font-size: 12px; }
    #block-curriculum .example .box ul li {
      width: 465px;
      margin: 20px 0 0; }
      #block-curriculum .example .box ul li .name {
        line-height: 53px;
        font-size: 22px; }
      #block-curriculum .example .box ul li .description {
        padding: 14px 0;
        line-height: 26px;
        font-size: 14px;
        border-width: 4px; }
      #block-curriculum .example .box ul li .photo {
        border-width: 4px; }

  #block-term > .bg {
    background-image: url(../img/term_bg1_pc.png); }
    #block-term > .bg:before {
      top: 0;
      background-image: url(../img/term_bg2_pc.png); }
    #block-term > .bg:after {
      display: none; }
  #block-term > .inner {
    padding: 100px 0 90px; }
  #block-term h3 {
    margin: 0 0 44px;
    line-height: 32px;
    font-size: 26px; }
  #block-term .image {
    width: 724px;
    margin: 0 auto 60px; }

  #block-movie > .bg {
    background-image: url(../img/movie_bg1_pc.jpg); }
    #block-movie > .bg:before {
      background-image: url(../img/movie_bg2_pc.png); }
  #block-movie > .inner {
    padding: 100px 0 120px; }
  #block-movie h3 {
    margin: 75px 0 24px;
    line-height: 46px;
    font-size: 26px; }
  #block-movie .box {
    width: 950px;
    margin: 0 auto; }
    #block-movie .box li {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin: 60px 0 0; }
      #block-movie .box li:nth-child(even) {
        flex-direction: row-reverse; }
      #block-movie .box li .description {
        width: 465px; }
        #block-movie .box li .description h4 {
          margin: 0 0 22px;
          line-height: 46px;
          font-size: 22px; }
        #block-movie .box li .description .text {
          margin: 0; }
      #block-movie .box li .movie {
        padding: 262px 0 0 465px; }

  #block-cost > .bg {
    background-size: 103.5px 178.5px; }
    #block-cost > .bg:before {
      top: auto;
      bottom: 0;
      background: url(../img/cost_bg_pc.png) bottom no-repeat; }
  #block-cost > .inner {
    padding: 100px 0 120px; }
  #block-cost .blk-body .inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 950px;
    margin: 0 auto; }
  #block-cost table {
    width: 465px; }
    #block-cost table + table {
      margin: 30px 0 0; }
    #block-cost table:nth-child(2) {
      margin: 0; }
      #block-cost table:nth-child(2) th {
        width: 210px; }
      #block-cost table:nth-child(2) td {
        width: 255px; }
    #block-cost table th, #block-cost table td {
      line-height: 30px;
      font-size: 16px;
      vertical-align: middle;
      border: 1px solid #cecece; }
    #block-cost table th {
      width: 156px;
      padding: 18px 0;
      letter-spacing: -1px; }
    #block-cost table td {
      width: 309px;
      padding: 18px; }
      #block-cost table td .caption {
        line-height: 22px;
        font-size: 12px; } }
/* 1280px〜：large PC
------------------------------ */
@media screen and (min-width: 1280px) {
  /***************************
      container
  ***************************/ }
/* 1400px〜：largest PC
------------------------------ */
@media screen and (min-width: 1400px) {
  /***************************
      container
  ***************************/ }

/*# sourceMappingURL=index.css.map */