/* introArea */
#introArea {
  overflow: hidden;
  margin: 0;
  padding: 0; }
  #introArea .content {
    position: relative;
    background-color: #ffffff; }
  #introArea .title {
    font-size: 21px;
    font-size: 0.42rem;
    line-height: 1.43;
    text-align: center;
    margin: 0 0 calc(30 / 600 * 100%) 0;
    padding: calc(50 / 600 * 100%) 0 0 0; }
  #introArea .intro {
    text-align: center; }
    #introArea .intro:last-child {
      margin: 0 0 calc(60 / 600 * 100%) 0;
      padding: 0 0 calc(30 / 600 * 100%) 0; }
  .current #introArea:before {
    opacity: 1; }

@media screen and (min-width: 769px) {
  #introArea {
    margin: 0;
    padding: 0; }
    #introArea .title {
      font-size: 46px;
      font-size: 4.6rem;
      line-height: 1.3;
      letter-spacing: 0.05em;
      margin: 0 0 calc(28 / 1200 * 100%) 0;
      padding: calc(54 / 1200 * 100%) 0 0 0; }
    #introArea .intro {
      letter-spacing: 0.025em; }
      #introArea .intro:last-child {
        margin: 0 0 calc(42 / 1200 * 100%) 0;
        padding: 0 0 calc(40 / 1200 * 100%) 0; } }
/* reasonArea */
#reasonArea .content {
  background-color: #5dc2d0; }
#reasonArea .title {
  width: calc(450 / 600 * 100%);
  margin: 0 auto calc(70 / 600 * 100%) auto;
  padding: calc(100 / 600 * 100%) 0 0 0; }
#reasonArea .box {
  margin: 0 0 calc(50 / 600 * 100%) 0; }
  #reasonArea .box .boxTitle {
    width: calc(250 / 600 * 100%);
    margin: 0 auto; }
  #reasonArea .box .wrap {
    background-color: #ffffff;
    margin: calc(-68 / 600 * 100%) 0 0 0;
    padding: calc(90 / 600 * 100%) calc(20 / 600 * 100%) calc(20 / 600 * 100%) calc(20 / 600 * 100%);
    border-radius: 7px; }
    #reasonArea .box .wrap .text {
      margin: 0 0 calc(40 / 560 * 100%) 0; }
      #reasonArea .box .wrap .text .head {
        color: #5dc2d0;
        font-size: 16px;
        font-size: 0.32rem;
        line-height: 1.38;
        font-weight: 700;
        text-align: center;
        margin: 0 0 calc(20 / 560 * 100%) 0; }
      #reasonArea .box .wrap .text .cont .boxButtonArea {
        padding: calc(20 / 560 * 100%) 0 0 0; }
#reasonArea .buttonArea {
  padding: 0 0 calc(50 / 600 * 100%) 0; }
  #reasonArea .buttonArea .buttonType02 a {
    width: calc(450 / 640 * 100vw);
    color: #5dc2d0;
    font-weight: 700;
    background-color: #ffffff; }

@media screen and (min-width: 769px) {
  #reasonArea .title {
    width: calc(447 / 1200 * 100%);
    margin: 0 auto calc(58 / 1200 * 100%) auto;
    padding: calc(92 / 1200 * 100%) 0 0 0; }
  #reasonArea .box {
    margin: 0 0 calc(47 / 1200 * 100%) 0; }
    #reasonArea .box .boxTitle {
      width: calc(240 / 1200 * 100%); }
    #reasonArea .box .wrap {
      display: flex;
      justify-content: space-between;
      margin: calc(-65 / 1200 * 100%) 0 0 0;
      padding: calc(90 / 1200 * 100%) calc(50 / 1200 * 100%) calc(50 / 1200 * 100%) calc(50 / 1200 * 100%);
      border-radius: 10px; }
      #reasonArea .box .wrap .text {
        flex-basis: calc(645 / 1100 * 100%);
        margin: 0; }
        #reasonArea .box .wrap .text .head {
          font-size: 44px;
          font-size: 4.4rem;
          line-height: 1.11;
          text-align: left;
          margin: 0 0 calc(20 / 645 * 100%) 0;
          padding: calc(5 / 645 * 100%) 0 0 0; }
        #reasonArea .box .wrap .text .cont {
          font-size: 16px;
          font-size: 1.6rem;
          line-height: 2; }
          #reasonArea .box .wrap .text .cont .boxButtonArea {
            padding: calc(10 / 645 * 100%) 0 0 0; }
            #reasonArea .box .wrap .text .cont .boxButtonArea .buttonType02 a {
              margin: 0;
              padding: 16px 0 18px 0; }
      #reasonArea .box .wrap .image {
        flex-basis: calc(410 / 1100 * 100%); }
  #reasonArea .buttonArea {
    padding: calc(15 / 1200 * 100%) 0 calc(120 / 1200 * 100%) 0; }
    #reasonArea .buttonArea .buttonType02 a {
      width: calc(400 / 1200 * 100%);
      max-width: 400px;
      font-size: 18px;
      font-size: 1.8rem;
      line-height: 1;
      padding: 31px 0 31px 0; } }
/* bannerArea */
.bannerArea .item {
  padding: calc(50 / 600 * 100%) 0; }

@media screen and (min-width: 769px) {
  .bannerArea .item {
    width: calc(850 / 1200 * 100%);
    margin: auto;
    padding: calc(80 / 1200 * 100%) 0; } }
/* featuresArea */
#featuresArea .content {
  background-color: #f8f8f8; }
#featuresArea .title {
  margin: 0 0 calc(70 / 600 * 100%) 0;
  padding: calc(100 / 600 * 100%) 0 0 0; }
#featuresArea .list {
  padding: 0 0 calc(75 / 600 * 100%) 0; }
  #featuresArea .list .item {
    background-color: #ffffff;
    margin: 0 0 calc(40 / 600 * 100%) 0;
    padding: calc(20 / 600 * 100%); }
    #featuresArea .list .item .image {
      margin: 0 0 calc(30 / 560 * 100%) 0; }
    #featuresArea .list .item .text .row .head {
      color: #5dc2d0;
      font-size: 16px;
      font-size: 0.32rem;
      line-height: 1.38;
      font-weight: 700;
      margin: 0 0 calc(20 / 560 * 100%) 0; }
    #featuresArea .list .item .text .row .cont {
      margin: 0 0 calc(25 / 560 * 100%) 0; }
    #featuresArea .list .item .text .buttonArea {
      margin: 0 0 calc(20 / 560 * 100%) 0; }

@media screen and (min-width: 769px) {
  #featuresArea .title {
    margin: 0 0 calc(40 / 1200 * 100%) 0;
    padding: calc(54 / 1200 * 100%) 0 0 0; }
  #featuresArea .list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    padding: 0 0 calc(135 / 1200 * 100%) 0; }
    #featuresArea .list .item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-basis: 100%;
      margin: 0 0 calc(30 / 1200 * 100%) 0;
      padding: calc(20 / 1200 * 100%);
      box-sizing: border-box; }
      #featuresArea .list .item.small {
        display: block;
        flex-basis: calc(380 / 1200 * 100%); }
        #featuresArea .list .item.small .image {
          margin: 0 0 calc(26 / 340 * 100%) 0; }
        #featuresArea .list .item.small .text {
          padding: 0; }
          #featuresArea .list .item.small .text .row .head {
            font-size: 20px;
            font-size: 2rem;
            line-height: 1.2;
            margin: 0 0 calc(10 / 340 * 100%) 0; }
          #featuresArea .list .item.small .text .row .cont {
            margin: 0 0 calc(20 / 340 * 100%) 0; }
      #featuresArea .list .item .image {
        flex-basis: calc(380 / 1160 * 100%);
        margin: 0; }
      #featuresArea .list .item .text {
        flex-basis: calc(720 / 1160 * 100%);
        padding: 0 calc(30 / 720 * 100%) 0 0;
        box-sizing: border-box; }
        #featuresArea .list .item .text .row .head {
          font-size: 24px;
          font-size: 2.4rem;
          line-height: 1.33;
          margin: 0 0 calc(20 / 690 * 100%) 0; }
        #featuresArea .list .item .text .row .cont {
          font-size: 14px;
          font-size: 1.4rem;
          line-height: 2;
          margin: 0 0 calc(20 / 690 * 100%) 0; }
        #featuresArea .list .item .text .buttonArea {
          margin: 0 0 calc(20 / 690 * 100%) 0; }
          #featuresArea .list .item .text .buttonArea .buttonType01 a {
            margin: 0 0 0 auto; } }
/* otherArea */
#otherArea .content {
  overflow: hidden;
  background-color: #ffffff; }
#otherArea .title {
  margin: 0 0 calc(40 / 600 * 100%) 0;
  padding: calc(75 / 600 * 100%) 0 0 0; }
#otherArea .desc {
  margin: 0 0 calc(40 / 600 * 100%) 0; }
#otherArea .list {
  margin: 0 auto calc(60 / 600 * 100%) auto; }
  #otherArea .list .item {
    margin: 0 0 calc(20 / 600 * 100%) 0; }
#otherArea .buttonArea {
  margin: 0 0 calc(150 / 600 * 100%) 0; }

@media screen and (min-width: 769px) {
  #otherArea .title {
    margin: 0 0 calc(15 / 1200 * 100%) 0;
    padding: calc(80 / 1200 * 100%) 0 0 0; }
  #otherArea .desc {
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 1.75;
    text-align: center;
    margin: 0 0 calc(35 / 1200 * 100%) 0; }
  #otherArea .list {
    display: flex;
    justify-content: space-between;
    margin: 0 0 calc(41 / 1200 * 100%) 0; }
    #otherArea .list .item {
      flex-basis: calc(390 / 1200 * 100%);
      margin: 0; }
  #otherArea .buttonArea {
    margin: 0 0 calc(110 / 1200 * 100%) 0; } }
