@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 > .bg {
  background: url(../img/intro_bg_sp.png) no-repeat;
  background-size: 100%; }
#block-intro > .inner {
  padding: 55px 0 65px; }
#block-intro .photo {
  margin: 30px 0 0; }

#block-mood > .bg {
  background: url("/robo/general/img/bg_green_box.jpg") left top repeat;
  background-size: 94px 162px; }
  #block-mood > .bg:before {
    top: -36px;
    background: url(../img/mood_bg1_sp.png) no-repeat;
    background-size: 100%; }
  #block-mood > .bg:after {
    top: auto;
    bottom: -10px;
    background: url(../img/mood_bg2_sp.png) bottom no-repeat;
    background-size: 100%; }
#block-mood > .inner {
  padding: 38px 0 65px;
  color: #fff; }
#block-mood h2 {
  color: #fff; }
#block-mood .list li + li {
  margin: 35px 0 0; }
#block-mood .list li .text h3 {
  font-size: 15px;
  color: #fff; }
  #block-mood .list li .text h3 span {
    position: relative; }
    #block-mood .list li .text h3 span:before {
      content: '';
      position: absolute;
      left: -25px;
      top: 3px;
      width: 15px;
      height: 15px; }
#block-mood .list li .text .description {
  margin: 0 0 22px; }
#block-mood .list li:nth-child(1) h3 span:before {
  background: #e366ba; }
#block-mood .list li:nth-child(2) h3 span:before {
  background: #f39800; }
#block-mood .list li:nth-child(3) h3 span:before {
  background: #50db62; }
#block-mood .list li:nth-child(4) h3 span:before {
  background: #60c6ff; }

#block-teacher {
  z-index: 1; }
  #block-teacher > .bg:before {
    background: url(../img/teacher_bg1_sp.png) no-repeat;
    background-size: 100%; }
  #block-teacher > .bg:after {
    top: auto;
    bottom: -50px;
    background: url(../img/teacher_bg2_sp.png) bottom no-repeat;
    background-size: 100%; }
  #block-teacher > .inner {
    padding: 38px 0 65px; }
  #block-teacher h3 {
    font-size: 15px; }
  #block-teacher .photo {
    margin: 20px 0; }

#block-parents-voice > .bg {
  background: url(/robo/general/img/bg_cream_box.jpg) left top repeat;
  background-size: 94px 162px; }
  #block-parents-voice > .bg:before {
    background: url(../img/parents-voice_bg_sp.png) no-repeat;
    background-size: 100%; }
#block-parents-voice > .inner {
  padding: 38px 0 65px; }
#block-parents-voice .list li + li {
  margin: 35px 0 0; }
#block-parents-voice .list li h3 {
  font-size: 15px; }
  #block-parents-voice .list li h3 span {
    font-size: 12px; }
#block-parents-voice .list li .photo1 {
  margin: 0 0 20px; }
#block-parents-voice .list li .photo2 {
  margin: 20px 0; }

#block-students-voice > .bg {
  background: url("/robo/general/img/bg_green_box.jpg");
  background-size: 94px 162px; }
  #block-students-voice > .bg:before {
    top: -52px;
    height: calc(100% + 52px);
    background: url(../img/students-voice_bg1_sp.png) no-repeat;
    background-size: 100%; }
  #block-students-voice > .bg:after {
    top: auto;
    bottom: 0;
    background: url(../img/students-voice_bg2_sp.png) bottom no-repeat;
    background-size: 100%; }
#block-students-voice > .inner {
  padding: 38px 0 65px;
  color: #fff; }
#block-students-voice h2 {
  color: #fff; }
#block-students-voice .list li + li {
  margin: 35px 0 0; }
#block-students-voice .list li h3 {
  font-size: 15px;
  color: #fff; }
  #block-students-voice .list li h3 span {
    font-size: 12px; }
#block-students-voice .list li .photo1 {
  margin: 0 0 20px; }
#block-students-voice .list li .photo2 {
  margin: 20px 0; }

/* 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 > .bg {
    background-image: url(../img/intro_bg_pc.png); }
  #block-intro > .inner {
    padding: 75px 0 120px; }
  #block-intro .photo {
    width: 950px;
    margin: 70px auto 0; }

  #block-mood > .bg {
    background-size: 188px 324px; }
    #block-mood > .bg:before {
      top: -140px;
      height: calc(100% + 140px);
      background-image: url(../img/mood_bg_pc.png); }
    #block-mood > .bg:after {
      background: none; }
  #block-mood > .inner {
    padding: 100px 0; }
  #block-mood .list {
    width: 79%;
    max-width: 1106px;
    margin: 0 auto; }
    #block-mood .list li {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between; }
      #block-mood .list li + li {
        margin: 70px 0 0; }
      #block-mood .list li:nth-child(even) {
        flex-direction: row-reverse; }
        #block-mood .list li:nth-child(even) .text {
          padding: 0 78px 0 0; }
      #block-mood .list li:nth-child(1) .text:before {
        content: 'PRIMARY';
        left: 50px; }
      #block-mood .list li:nth-child(2) .text:before {
        content: 'BASIC';
        left: 100%; }
      #block-mood .list li:nth-child(3) .text:before {
        content: 'MIDDLE';
        left: 50px; }
      #block-mood .list li:nth-child(4) .text:before {
        content: 'ADVANCE';
        left: 100%; }
      #block-mood .list li .text {
        position: relative;
        width: 49.09584086799277%;
        padding: 0 0 0 78px;
        box-sizing: border-box; }
        #block-mood .list li .text:before {
          position: absolute;
          top: 70px;
          line-height: 56px;
          font-size: 56px;
          font-family: "NotoSansCJKjp-Black";
          color: #fff;
          transform: rotate(90deg);
          transform-origin: 0 0; }
        #block-mood .list li .text h3 {
          line-height: 26px;
          font-size: 26px;
          text-align: left; }
          #block-mood .list li .text h3 span {
            padding: 0 0 0 40px; }
            #block-mood .list li .text h3 span:before {
              left: 0;
              top: 8px;
              width: 24px;
              height: 24px; }
        #block-mood .list li .text .description {
          margin: 0; }
      #block-mood .list li .photo {
        width: 49.09584086799277%; }

  #block-teacher {
    z-index: 2; }
    #block-teacher > .bg:before {
      top: -153px;
      background-image: url(../img/teacher_bg1_pc.png); }
    #block-teacher > .bg:after {
      bottom: -136px;
      background-image: url(../img/teacher_bg2_pc.png); }
    #block-teacher > .inner {
      padding: 100px 0 120px; }
    #block-teacher .box {
      width: 67.85714285714286%;
      max-width: 950px;
      margin: 0 auto; }
      #block-teacher .box .upper {
        position: relative;
        margin: 0 0 32px; }
        #block-teacher .box .upper:after {
          content: '';
          clear: both;
          display: block; }
        #block-teacher .box .upper .photo {
          width: 72.63157894736842%;
          float: right;
          margin: 0 -23.684210526315788% 20px 20px; }
        #block-teacher .box .upper h3 {
          font-size: 26px;
          text-align: left; }

  #block-parents-voice {
    z-index: 1; }
    #block-parents-voice > .bg {
      background-size: 188px 324px; }
      #block-parents-voice > .bg:before {
        background-image: url(../img/parents-voice_bg1_pc.png); }
      #block-parents-voice > .bg:after {
        top: auto;
        bottom: -60px;
        background: url(../img/parents-voice_bg2_pc.png) bottom no-repeat;
        background-size: 100%; }
    #block-parents-voice > .inner {
      padding: 100px 0 110px; }
    #block-parents-voice .list li {
      width: 67.85714285714286%;
      max-width: 950px;
      margin: 0 auto; }
      #block-parents-voice .list li + li {
        margin: 74px auto 0; }
      #block-parents-voice .list li:nth-child(even) .upper .photo1 {
        float: left;
        margin: 0 20px 20px -23.684210526315788%; }
      #block-parents-voice .list li .upper {
        position: relative;
        margin: 0; }
        #block-parents-voice .list li .upper:after {
          content: '';
          clear: both;
          display: block; }
        #block-parents-voice .list li .upper .photo1 {
          width: 72.63157894736842%;
          float: right;
          margin: 0 -23.684210526315788% 20px 20px; }
        #block-parents-voice .list li .upper h3 {
          font-size: 26px;
          text-align: left;
          letter-spacing: -1px; }
          #block-parents-voice .list li .upper h3 span {
            font-size: 22px; }
      #block-parents-voice .list li .photo2 {
        margin: 20px 0 24px; }

  #block-students-voice > .bg {
    background-size: 188px 324px; }
    #block-students-voice > .bg:before {
      top: 0;
      height: 100%;
      background-image: url(../img/students-voice_bg1_pc.png); }
    #block-students-voice > .bg:after {
      background-image: url(../img/students-voice_bg2_pc.png); }
  #block-students-voice > .inner {
    padding: 110px 0; }
  #block-students-voice .list li {
    width: 67.85714285714286%;
    max-width: 950px;
    margin: 0 auto; }
    #block-students-voice .list li + li {
      margin: 74px auto 0; }
    #block-students-voice .list li:nth-child(even) .upper .photo1 {
      float: left;
      margin: 0 20px 20px -23.684210526315788%; }
    #block-students-voice .list li .upper {
      position: relative;
      margin: 0; }
      #block-students-voice .list li .upper:after {
        content: '';
        clear: both;
        display: block; }
      #block-students-voice .list li .upper .photo1 {
        width: 72.63157894736842%;
        float: right;
        margin: 0 -23.684210526315788% 20px 20px; }
      #block-students-voice .list li .upper h3 {
        font-size: 26px;
        text-align: left;
        letter-spacing: -1px; }
        #block-students-voice .list li .upper h3 span {
          font-size: 22px; }
    #block-students-voice .list li .photo2 {
      margin: 20px 0 24px; } }
/* 1280px〜：large PC
------------------------------ */
@media screen and (min-width: 1280px) {
  /***************************
      container
  ***************************/ }
/* 1400px〜：largest PC
------------------------------ */
@media screen and (min-width: 1400px) {
  /***************************
      container
  ***************************/ }

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