@charset "UTF-8";
@import url(https://rainbow-apps.com/css/common.css);
/* ///////////////////////////
webfont
/////////////////////////// */
@import url(https://fonts.googleapis.com/css?family=Josefin+Sans:300,400,600);
.mt0 {
  margin-top: 0px !important; }

.mt1 {
  margin-top: 10px !important; }

.mt15 {
  margin-top: 15px !important; }

.mt2 {
  margin-top: 20px !important; }

.mt25 {
  margin-top: 25px !important; }

.mt3 {
  margin-top: 30px !important; }

.mt35 {
  margin-top: 35px !important; }

.mt4 {
  margin-top: 40px !important; }

.mt45 {
  margin-top: 45px !important; }

.mt5 {
  margin-top: 50px !important; }

.mt55 {
  margin-top: 55px !important; }

.mt6 {
  margin-top: 60px !important; }

.mt65 {
  margin-top: 65px !important; }

.mt7 {
  margin-top: 70px !important; }

.mt75 {
  margin-top: 75px !important; }

.mt8 {
  margin-top: 80px !important; }

.mt85 {
  margin-top: 85px !important; }

.mt9 {
  margin-top: 90px !important; }

.mt95 {
  margin-top: 95px !important; }

.mt10 {
  margin-top: 100px !important; }

.mb0 {
  margin-bottom: 0px !important; }

.mb1 {
  margin-bottom: 10px !important; }

.mb15 {
  margin-bottom: 15px !important; }

.mb2 {
  margin-bottom: 20px !important; }

.mb25 {
  margin-bottom: 25px !important; }

.mb3 {
  margin-bottom: 30px !important; }

.mb35 {
  margin-bottom: 35px !important; }

.mb4 {
  margin-bottom: 40px !important; }

.mb45 {
  margin-bottom: 45px !important; }

.mb5 {
  margin-bottom: 50px !important; }

.mb55 {
  margin-bottom: 55px !important; }

.mb6 {
  margin-bottom: 60px !important; }

.mb65 {
  margin-bottom: 65px !important; }

.mb7 {
  margin-bottom: 70px !important; }

.mb75 {
  margin-bottom: 75px !important; }

.mb8 {
  margin-bottom: 80px !important; }

.mb85 {
  margin-bottom: 85px !important; }

.mb9 {
  margin-bottom: 90px !important; }

.mb95 {
  margin-bottom: 95px !important; }

.mb10 {
  margin-bottom: 100px !important; }

.mr0 {
  margin-right: 0px !important; }

.mr1 {
  margin-right: 10px !important; }

.mr15 {
  margin-right: 15px !important; }

.mr2 {
  margin-right: 20px !important; }

.mr25 {
  margin-right: 25px !important; }

.mr3 {
  margin-right: 30px !important; }

.mr35 {
  margin-right: 35px !important; }

.mr4 {
  margin-right: 40px !important; }

.mr45 {
  margin-right: 45px !important; }

.mr5 {
  margin-right: 50px !important; }

.mr55 {
  margin-right: 55px !important; }

.mr6 {
  margin-right: 60px !important; }

.mr65 {
  margin-right: 65px !important; }

.mr7 {
  margin-right: 70px !important; }

.mr75 {
  margin-right: 75px !important; }

.mr8 {
  margin-right: 80px !important; }

.mr85 {
  margin-right: 85px !important; }

.mr9 {
  margin-right: 90px !important; }

.mr95 {
  margin-right: 95px !important; }

.mr10 {
  margin-right: 100px !important; }

.ml0 {
  margin-left: 0px !important; }

.ml1 {
  margin-left: 10px !important; }

.ml15 {
  margin-left: 15px !important; }

.ml2 {
  margin-left: 20px !important; }

.ml25 {
  margin-left: 25px !important; }

.ml3 {
  margin-left: 30px !important; }

.ml35 {
  margin-left: 35px !important; }

.ml4 {
  margin-left: 40px !important; }

.ml45 {
  margin-left: 45px !important; }

.ml5 {
  margin-left: 50px !important; }

.ml55 {
  margin-left: 55px !important; }

.ml6 {
  margin-left: 60px !important; }

.ml65 {
  margin-left: 65px !important; }

.ml7 {
  margin-left: 70px !important; }

.ml75 {
  margin-left: 75px !important; }

.ml8 {
  margin-left: 80px !important; }

.ml85 {
  margin-left: 85px !important; }

.ml9 {
  margin-left: 90px !important; }

.ml95 {
  margin-left: 95px !important; }

.ml10 {
  margin-left: 100px !important; }

.pt0 {
  padding-top: 0px !important; }

.pt1 {
  padding-top: 10px !important; }

.pt15 {
  padding-top: 15px !important; }

.pt2 {
  padding-top: 20px !important; }

.pt25 {
  padding-top: 25px !important; }

.pt3 {
  padding-top: 30px !important; }

.pt35 {
  padding-top: 35px !important; }

.pt4 {
  padding-top: 40px !important; }

.pt45 {
  padding-top: 45px !important; }

.pt5 {
  padding-top: 50px !important; }

.pt55 {
  padding-top: 55px !important; }

.pt6 {
  padding-top: 60px !important; }

.pt65 {
  padding-top: 65px !important; }

.pt7 {
  padding-top: 70px !important; }

.pt75 {
  padding-top: 75px !important; }

.pt8 {
  padding-top: 80px !important; }

.pt85 {
  padding-top: 85px !important; }

.pt9 {
  padding-top: 90px !important; }

.pt95 {
  padding-top: 95px !important; }

.pt10 {
  padding-top: 100px !important; }

.pb0 {
  padding-bottom: 0px !important; }

.pb1 {
  padding-bottom: 10px !important; }

.pb15 {
  padding-bottom: 15px !important; }

.pb2 {
  padding-bottom: 20px !important; }

.pb25 {
  padding-bottom: 25px !important; }

.pb3 {
  padding-bottom: 30px !important; }

.pb35 {
  padding-bottom: 35px !important; }

.pb4 {
  padding-bottom: 40px !important; }

.pb45 {
  padding-bottom: 45px !important; }

.pb5 {
  padding-bottom: 50px !important; }

.pb55 {
  padding-bottom: 55px !important; }

.pb6 {
  padding-bottom: 60px !important; }

.pb65 {
  padding-bottom: 65px !important; }

.pb7 {
  padding-bottom: 70px !important; }

.pb75 {
  padding-bottom: 75px !important; }

.pb8 {
  padding-bottom: 80px !important; }

.pb85 {
  padding-bottom: 85px !important; }

.pb9 {
  padding-bottom: 90px !important; }

.pb95 {
  padding-bottom: 95px !important; }

.pb10 {
  padding-bottom: 100px !important; }

.pr0 {
  padding-right: 0px !important; }

.pr1 {
  padding-right: 10px !important; }

.pr15 {
  padding-right: 15px !important; }

.pr2 {
  padding-right: 20px !important; }

.pr25 {
  padding-right: 25px !important; }

.pr3 {
  padding-right: 30px !important; }

.pr35 {
  padding-right: 35px !important; }

.pr4 {
  padding-right: 40px !important; }

.pr45 {
  padding-right: 45px !important; }

.pr5 {
  padding-right: 50px !important; }

.pr55 {
  padding-right: 55px !important; }

.pr6 {
  padding-right: 60px !important; }

.pr65 {
  padding-right: 65px !important; }

.pr7 {
  padding-right: 70px !important; }

.pr75 {
  padding-right: 75px !important; }

.pr8 {
  padding-right: 80px !important; }

.pr85 {
  padding-right: 85px !important; }

.pr9 {
  padding-right: 90px !important; }

.pr95 {
  padding-right: 95px !important; }

.pr10 {
  padding-right: 100px !important; }

.pl0 {
  padding-left: 0px !important; }

.pl1 {
  padding-left: 10px !important; }

.pl15 {
  padding-left: 15px !important; }

.pl2 {
  padding-left: 20px !important; }

.pl25 {
  padding-left: 25px !important; }

.pl3 {
  padding-left: 30px !important; }

.pl35 {
  padding-left: 35px !important; }

.pl4 {
  padding-left: 40px !important; }

.pl45 {
  padding-left: 45px !important; }

.pl5 {
  padding-left: 50px !important; }

.pl55 {
  padding-left: 55px !important; }

.pl6 {
  padding-left: 60px !important; }

.pl65 {
  padding-left: 65px !important; }

.pl7 {
  padding-left: 70px !important; }

.pl75 {
  padding-left: 75px !important; }

.pl8 {
  padding-left: 80px !important; }

.pl85 {
  padding-left: 85px !important; }

.pl9 {
  padding-left: 90px !important; }

.pl95 {
  padding-left: 95px !important; }

.pl10 {
  padding-left: 100px !important; }

#about .h1-area {
  background-color: #444;
  padding: 18px 0 21px;
  letter-spacing: 5px; }
#about section {
  max-width: 880px;
  width: 94%;
  padding: 6% 3%;
  margin: 0 auto; }
  #about section p {
    text-align: left; }
#about .main-img {
  background-color: #f8f9fa;
  text-align: center;
  padding-top: 2%;
  border-bottom: 1px solid #e5e5e5; }
  #about .main-img img {
    width: 746px; }
#about .main-area {
  width: 75%;
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
  line-height: 1.8; }
  #about .main-area h2 {
    font-size: 28px;
    font-weight: normal;
    margin-bottom: 1%; }
    #about .main-area h2 span {
      color: #f64c68;
      font-size: 35px;
      font-weight: bold; }
  #about .main-area .colorful-line {
    width: 90%;
    margin: 0 auto 1% auto; }
  #about .main-area .main-text {
    width: 78%;
    margin: 0 auto;
    line-height: 2; }
  #about .main-area .main-point {
    margin-top: 11%;
    line-height: 1.5; }
    #about .main-area .main-point li {
      text-align: center;
      font-size: 15px;
      width: 32%;
      display: inline-block;
      *display: inline;
      *zoom: 1;
      vertical-align: middle;
      vertical-align: top; }
      #about .main-area .main-point li span {
        font-size: 25px; }
      #about .main-area .main-point li img {
        margin-bottom: 9%; }
    #about .main-area .main-point div {
      margin: 0 auto; }
    #about .main-area .main-point .number {
      width: 93px;
      margin-bottom: 16%; }
    #about .main-area .main-point .point-1 {
      color: #4ba6c8; }
      #about .main-area .main-point .point-1 div {
        width: 102px; }
    #about .main-area .main-point .point-2 {
      color: #e07b57; }
      #about .main-area .main-point .point-2 div {
        width: 100px; }
    #about .main-area .main-point .point-3 {
      color: #f0b15f; }
      #about .main-area .main-point .point-3 div {
        width: 118px; }
  #about .main-area .question {
    margin-top: 15%; }
    #about .main-area .question .icon {
      color: #fff;
      background-color: #f64c68;
      padding: 10px 18px;
      text-align: center;
      font-size: 40px;
      line-height: 1;
      -webkit-border-radius: 100px;
      -moz-border-radius: 100px;
      border-radius: 100px;
      display: inline-block;
      *display: inline;
      *zoom: 1;
      vertical-align: middle; }
    #about .main-area .question .text {
      color: #f64c68;
      margin-left: 2%;
      font-size: 30px;
      display: inline-block;
      *display: inline;
      *zoom: 1;
      vertical-align: middle; }
    #about .main-area .question p {
      width: 78%;
      margin: 5% auto 0 auto;
      line-height: 2; }
#about .point-box {
  width: 100%;
  text-align: center;
  line-height: 1.8;
  margin-top: 10%; }
  #about .point-box h3 {
    position: relative;
    color: #fff; }
    #about .point-box h3 p {
      width: 126px;
      position: absolute;
      margin-left: -63px;
      left: 50%;
      z-index: 300;
      top: -70px; }
    #about .point-box h3 div {
      width: 100%;
      height: 100px;
      background-size: cover;
      background-position: center top;
      background-repeat: no-repeat;
      font-size: 32px;
      letter-spacing: 10px;
      padding-top: 70px; }
      #about .point-box h3 div span {
        display: inline-block;
        *display: inline;
        *zoom: 1;
        vertical-align: middle; }
      #about .point-box h3 div img {
        width: 48px;
        margin-right: 20px;
        display: inline-block;
        *display: inline;
        *zoom: 1;
        vertical-align: middle; }
  #about .point-box h4 {
    font-size: 27px;
    letter-spacing: 2px;
    font-weight: bold;
    width: 90%;
    margin: 85px auto 0; }
  #about .point-box .box {
    margin-top: 50px; }
    #about .point-box .box p {
      display: inline-block;
      *display: inline;
      *zoom: 1;
      vertical-align: middle; }
    #about .point-box .box .img {
      width: 18%; }
    #about .point-box .box .text {
      width: 45%;
      margin-left: 3%; }
  #about .point-box section {
    width: 100%;
    max-width: 100%;
    padding: 0; }
#about #eng h3 div {
  text-align: center;
  background-image: url("https://rainbow-apps.com/images/about/eng_bg.jpg"); }
#about #eng h4 span {
  color: #4ba6c8; }
#about #cur h3 div {
  text-align: center;
  background-image: url("https://rainbow-apps.com/images/about/cur_bg.jpg"); }
#about #cur h4 span {
  color: #e07b57; }
#about #cur .box .text {
  margin: 0; }
#about #cur .box .img {
  margin-left: 3%; }
#about #bk h3 div {
  text-align: center;
  background-image: url("https://rainbow-apps.com/images/about/bk_bg.jpg"); }
#about #bk h4 span {
  color: #f0b15f; }

/* ==========================================================
	SP 1060px以下
========================================================== */
@media screen and (max-width: 1060px) {
  #about .point-box h3 div {
    font-size: 22px; } }
/* ==========================================================
	SP 920px以下
========================================================== */
@media screen and (max-width: 920px) {
  .h1-area img {
    width: 30px; } }
/* ==========================================================
	SP 850px以下
========================================================== */
@media screen and (max-width: 850px) {
  #about #cur h3 div {
    letter-spacing: 5px; } }
/* ==========================================================
	SP 780px以下
========================================================== */
@media screen and (max-width: 780px) {
  #about section {
    width: 100%;
    padding: 6% 0; }
  #about .main-img img {
    width: 90%; }
  #about .point-box {
    margin-top: 20%; } }
/* ==========================================================
	SP 770px以下
========================================================== */
@media screen and (max-width: 770px) {
  #about .main-area h2 {
    font-size: 20px;
    line-height: 1.6;
    margin-bottom: 2%; }
    #about .main-area h2 span {
      font-size: 30px; }
  #about .point-box h4 {
    font-size: 20px;
    line-height: 1.6; }
    #about .point-box h4 .sp {
      display: none; }
  #about .point-box h3 p {
    width: 106px;
    margin-left: -53px;
    left: 50%;
    top: -65px; }
  #about .point-box h3 div {
    height: 80px;
    padding-top: 50px; } }
/* ==========================================================
	SP 640px以下
========================================================== */
@media screen and (max-width: 640px) {
  #about .h1-area {
    padding: 9px 0 11px;
    letter-spacing: 4px; }
  #about section {
    width: 100%;
    padding: 6% 0; }
  #about .main-img img {
    width: 90%; }
  #about .main-area {
    width: 90%; }
    #about .main-area h2 {
      font-size: 18px;
      margin-bottom: 3%; }
      #about .main-area h2 span {
        font-size: 17px; }
    #about .main-area .colorful-line {
      width: 100%; }
    #about .main-area .main-text {
      width: 100%; }
    #about .main-area .main-point li {
      width: 99%;
      margin-bottom: 6%;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
      padding: 4% 0 2%; }
      #about .main-area .main-point li div {
        width: 100% !important; }
        #about .main-area .main-point li div img {
          width: 100px;
          margin-bottom: 0; }
        #about .main-area .main-point li div .number {
          width: 100px;
          margin-right: 3%;
          margin-bottom: 0; }
    #about .main-area .main-point .point-1 {
      border: 2px solid #4ba6c8; }
    #about .main-area .main-point .point-2 {
      border: 2px solid #e07b57; }
    #about .main-area .main-point .point-3 {
      border: 2px solid #f0b15f; }
  #about .point-box {
    margin-top: 15%; }
    #about .point-box h3 p {
      width: 70px;
      margin-left: -35px;
      top: -40px; }
    #about .point-box h3 div {
      font-size: 20px;
      height: 150px;
      padding-top: 50px;
      letter-spacing: 5px; }
      #about .point-box h3 div img {
        margin: 0 0 2% 0; }
      #about .point-box h3 div span {
        width: 90%;
        margin: 0 auto; }
    #about .point-box h4 {
      margin: 10% auto 0;
      width: 90%;
      font-size: 18px;
      line-height: 1.5;
      letter-spacing: 1px; }
    #about .point-box .box {
      margin-top: 6%; }
      #about .point-box .box .text {
        margin: 0;
        width: 90%; }
      #about .point-box .box .img {
        display: none; }
  #about #cur h3 div {
    height: 180px; }
    #about #cur h3 div span {
      width: 70%; }
  #about .main-area .question .text {
    font-size: 18px; }
  #about .main-area .question .icon {
    padding: 8px 14px;
    font-size: 28px;
    display: none; }
  #about .main-area .question p {
    width: 100%; }

  #about #eng h3 div,
  #about #cur h3 div,
  #about #bk h3 div {
    height: 100px;
    padding-top: 50px; }

  #about .point-box h3 div span {
    width: 75%; }

  #about .point-box h4 .sp {
    display: block; }

  #about .point-box h3 div span {
    width: 58%;
    letter-spacing: 1px;
    line-height: 1.5; } }
/* ==========================================================
	SP 320px以下
========================================================== */
@media screen and (max-width: 620px) {
  #about #eng h3 div {
    height: 80px;
    padding-top: 40px; }

  #about #cur h3 div {
    height: 110px;
    padding-top: 40px; }

  #about #bk h3 div {
    height: 80px;
    padding-top: 40px; } }