@font-face {
  font-family: 'BebasNeue';
  src: url("../font/BebasNeue-Regular.eot");
  src: url("../font/BebasNeue-Regular.eot?#iefix") format("embedded-opentype"), url("../font/BebasNeue-Regular.woff2") format("woff2"), url("../font/BebasNeue-Regular.woff") format("woff"), url("../font/BebasNeue-Regular.ttf") format("truetype"); }
@font-face {
  font-family: 'BebasNeue-Bold';
  src: url("../font/BebasNeue-Bold.otf"); }
* {
  box-sizing: border-box; }

#key-box {
  background: url("../img/about/key.jpg") no-repeat center center/cover;
  position: relative; }
  @media only screen and (max-width: 999px) {
    #key-box {
      height: auto;
      background: transparent;
	  padding-top: 0;} }
  #key-box h1 {
    position: absolute;
    bottom: 24px;
    left: 52px;
    z-index: 5; }
    @media only screen and (max-width: 1400px) {
      #key-box h1 {
        left: 30px;
        padding-left: 0; } }
    @media only screen and (max-width: 999px) {
      #key-box h1 {
        left: 0;
        right: 0;
        text-align: center;
        bottom: 15px; } }
  #key-box .bnr {
    top: 571px;
    right: 152px; }
    @media only screen and (max-width: 1400px) {
      #key-box .bnr {
        right: 30px; } }
    @media only screen and (max-width: 999px) {
      #key-box .bnr {
        display: none; } }

#lead {
  position: relative;
  z-index: 1; }
  #lead .wrap {
    padding-top: 94px;
    padding-bottom: 113px; }
    @media only screen and (max-width: 999px) {
      #lead .wrap {
        padding-top: 10%;
        padding-bottom: 12%; } }
  #lead .photo {
    width: 1010px;
    float: left;
    margin-left: -400px; }
    @media only screen and (max-width: 1500px) {
      #lead .photo {
        width: 990px; } }
    @media only screen and (max-width: 1400px) {
      #lead .photo {
        width: 74%;
        margin-left: -18%; } }
    @media only screen and (max-width: 999px) {
      #lead .photo {
        width: 100%;
        float: none;
        margin: 0; } }
  #lead .lead-ct {
    width: 560px;
    float: right;
    margin-right: -255px; }
    @media only screen and (max-width: 1500px) {
      #lead .lead-ct {
        margin-right: -200px; } }
    @media only screen and (max-width: 1400px) {
      #lead .lead-ct {
        width: 40%;
        margin-right: 0; } }
    @media only screen and (max-width: 999px) {
      #lead .lead-ct {
        width: 100%;
        float: none;
        margin-top: 6%; } }
    #lead .lead-ct .ttl {
      font-weight: bold;
      padding-top: 63px; }
      @media only screen and (max-width: 1400px) {
        #lead .lead-ct .ttl {
          margin-right: -18%;
          padding-top: 0; } }
      @media only screen and (max-width: 1200px) {
        #lead .lead-ct .ttl {
          margin-right: 0; } }
      #lead .lead-ct .ttl .sttl {
        font-size: 35px;
        letter-spacing: 2.7px;
        margin-bottom: 24px; }
        @media only screen and (max-width: 1200px) {
          #lead .lead-ct .ttl .sttl {
            font-size: 30px;
            margin-bottom: 15px; } }
        @media only screen and (max-width: 999px) {
          #lead .lead-ct .ttl .sttl {
            font-size: 6vw;
            line-height: 7vw;
            margin-bottom: 3%; } }
      #lead .lead-ct .ttl .mttl {
        font-size: 38px;
        line-height: 77px;
        letter-spacing: 7px; }
        @media only screen and (max-width: 1200px) {
          #lead .lead-ct .ttl .mttl {
            font-size: 33px;
            line-height: 69px; } }
        @media only screen and (max-width: 999px) {
          #lead .lead-ct .ttl .mttl {
            font-size: 6.8vw;
            line-height: 15vw;
            letter-spacing: 5px; } }
        #lead .lead-ct .ttl .mttl span {
          color: #fff;
          background: #33bedd;
          padding: 7px 16px;
          margin-right: 8px; }
      #lead .lead-ct .ttl .lttl {
        font-size: 60px;
        letter-spacing: 12px;
        margin-top: 35px; }
        @media only screen and (max-width: 1200px) {
          #lead .lead-ct .ttl .lttl {
            font-size: 55px;
            letter-spacing: 7px;
            margin-top: 30px; } }
        @media only screen and (max-width: 999px) {
          #lead .lead-ct .ttl .lttl {
            font-size: 11vw;
            line-height: 13vw;
            margin-top: 3%; } }
    #lead .lead-ct .txt {
      line-height: 26px;
      letter-spacing: 1.3px;
      margin: 62px 0 0 8px; }
      @media only screen and (max-width: 1400px) {
        #lead .lead-ct .txt {
          margin-right: -18%; } }
      @media only screen and (max-width: 1200px) {
        #lead .lead-ct .txt {
          margin: 40px 0 0 0;
          padding-right: 10px; } }
      @media only screen and (max-width: 999px) {
        #lead .lead-ct .txt {
          padding: 0;
          text-align: justify;
          margin-top: 5%; }
          #lead .lead-ct .txt br {
            display: none; } }
  #lead .deco {
    width: calc(50% + 406px);
    height: 256px;
    background: #e9f2fe;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1; }
    @media only screen and (max-width: 999px) {
      #lead .deco {
        width: 100%;
        height: 20%; } }

#price {
  background: #003270;
  padding: 214px 0 80px;
  margin-top: -100px;
  }
#price .txt2{
  color:#fff;
  text-align: center;
}
  @media only screen and (max-width: 999px) {
    #price {
      padding: 10% 0; } }
  #price h2 {
    text-align: center;
    color: #fff;
    font-family: 'BebasNeue';
    font-size: 100px;
    letter-spacing: 10px; }
    @media only screen and (max-width: 999px) {
      #price h2 {
        font-size: 15vw;
        line-height: 16vw;
        letter-spacing: 0.2em; } }
    #price h2 small {
      display: block;
      font-size: 24px;
      font-weight: bold;
      letter-spacing: 4px;
      margin-top: 40px; }
      @media only screen and (max-width: 999px) {
        #price h2 small {
          font-size: 5vw;
          line-height: 5vw;
          margin-top: 0; } }
  #price .blk1 {
    width: 1200px;
    margin: 65px 0 67px -100px;
    padding: 40px 100px 33px;
    position: relative;
    z-index: 1; }
    @media only screen and (max-width: 1250px) {
      #price .blk1 {
        width: 100%;
        margin-left: 0;
        padding: 40px 30px; } }
    @media only screen and (max-width: 999px) {
      #price .blk1 {
        margin-top: 10%;
        margin-bottom: 10%;
        padding: 7%; } }
    #price .blk1 .bg {
      background: #fff;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      z-index: -1; }
      #price .blk1 .bg:before {
        background: #003270; }
    #price .blk1 .ttl {
      width: 50%;
      float: left; }
      @media only screen and (max-width: 999px) {
        #price .blk1 .ttl {
          width: 100%;
          float: none; } }
      #price .blk1 .ttl .icon {
        margin-top: 13px; }
    #price .blk1 .txt {
      width: 50%;
      float: right;
      text-align: justify;
      line-height: 26px;
      padding: 31px 0 0 45px; }
      @media only screen and (max-width: 999px) {
        #price .blk1 .txt {
          width: 100%;
          float: none;
          padding: 0;
          margin-top: 7%; } }
  #price .tabs-switch {
    background: #bdd2ee;
    width: 1200px;
    margin-left: -100px; }
    @media only screen and (max-width: 1250px) {
      #price .tabs-switch {
        width: 100%;
        margin-left: 0; } }
    #price .tabs-switch .tab-link {
      background: #fff;
      color: #003270;
      font-size: 36px;
      font-weight: bold;
      display: flex; }
      @media only screen and (max-width: 999px) {
        #price .tabs-switch .tab-link {
          font-size: 5vw;
          line-height: 6vw;
          letter-spacing: 0; } }
      #price .tabs-switch .tab-link small {
        font-size: 24px; }
        @media only screen and (max-width: 999px) {
          #price .tabs-switch .tab-link small {
            font-size: 3vw; } }
      #price .tabs-switch .tab-link span {
        font-size: 48px;
        font-family: 'BebasNeue-Bold';
        color: #fff;
        -webkit-text-stroke: 1px #003270;
        margin-right: 28px; }
        @media only screen and (max-width: 999px) {
          #price .tabs-switch .tab-link span {
            margin-right: 3%;
            font-size: 6vw;
            letter-spacing: 0; } }
      #price .tabs-switch .tab-link q {
        font-size: 16px;
        margin-top: -3px; }
      #price .tabs-switch .tab-link li {
        border: 8px solid #003270;
        border-top: none;
        position: relative;
        padding: 14px 0 7px;
        letter-spacing: 2px; }
        @media only screen and (max-width: 999px) {
          #price .tabs-switch .tab-link li {
            letter-spacing: -1px;
            border-width: 4px;
            padding: 5% 2%; } }
      #price .tabs-switch .tab-link li:first-child {
        width: 412px;
        border-left: none;
        text-align: right;
        padding-right: 53px; }
        @media only screen and (max-width: 999px) {
          #price .tabs-switch .tab-link li:first-child {
            width: 32%;
            padding-right: 0;
            text-align: left; } }
        #price .tabs-switch .tab-link li:first-child q {
          margin-right: -21px; }
      #price .tabs-switch .tab-link li:nth-child(2) {
        width: 377px;
        border-left: none;
        border-right: none;
        text-align: center;
        padding-right: 34px; }
        @media only screen and (max-width: 999px) {
          #price .tabs-switch .tab-link li:nth-child(2) {
            width: 36%;
            padding-right: 0;
            text-align: left; } }
        #price .tabs-switch .tab-link li:nth-child(2) q {
          margin-right: -64px; }
          @media only screen and (max-width: 1250px) {
            #price .tabs-switch .tab-link li:nth-child(2) q {
              margin-right: -23px;
              letter-spacing: -1px; } }
      #price .tabs-switch .tab-link li:last-child {
        width: 411px;
        border-right: none;
        padding-left: 24px; }
        @media only screen and (max-width: 999px) {
          #price .tabs-switch .tab-link li:last-child {
            width: 32%;
            padding-left: 2%; } }
        #price .tabs-switch .tab-link li:last-child span {
          margin-right: 20px; }
          @media only screen and (max-width: 999px) {
            #price .tabs-switch .tab-link li:last-child span {
              margin-right: 3%; } }
        #price .tabs-switch .tab-link li:last-child q {
          margin-left: 86px; }
      #price .tabs-switch .tab-link .active {
        background: #bdd2ee; }
        #price .tabs-switch .tab-link .active:before {
          content: '';
          height: 8px;
          background: #bdd2ee;
          position: absolute;
          left: 0;
          right: 0;
          bottom: -8px;
          z-index: 1; }
    #price .tabs-switch .tab-content {
      padding-bottom: 40px; }
      @media only screen and (max-width: 999px) {
        #price .tabs-switch .tab-content {
          padding: 0 10px 10%; } }
      #price .tabs-switch .tab-content table {
        font-size: 18px;
        width: 932px;
        margin: 0 auto; }
        @media only screen and (max-width: 999px) {
          #price .tabs-switch .tab-content table {
            width: 100%;
            font-size: 3vw;
            line-height: 4vw; } }
        #price .tabs-switch .tab-content table thead {
          text-align: center; }
          #price .tabs-switch .tab-content table thead th {
            border: 9px solid #bdd2ee;
            font-weight: bold;
            line-height: 140%;
            position: relative;
            vertical-align: middle;
            padding: 7px 0; }
            @media only screen and (max-width: 999px) {
              #price .tabs-switch .tab-content table thead th {
                border-width: 2px;
                letter-spacing: -1px; } }
          #price .tabs-switch .tab-content table thead th:first-child {
            width: 291px;
            background: #9ac0f2; }
            @media only screen and (max-width: 999px) {
              #price .tabs-switch .tab-content table thead th:first-child {
                width: 36%; } }
          #price .tabs-switch .tab-content table thead th:nth-child(2) {
            width: 297px;
            background: #719ad0; }
            @media only screen and (max-width: 999px) {
              #price .tabs-switch .tab-content table thead th:nth-child(2) {
                width: 30%; } }
          #price .tabs-switch .tab-content table thead th:nth-child(3) {
            width: 308px;
            background: #5292e6; }
            @media only screen and (max-width: 999px) {
              #price .tabs-switch .tab-content table thead th:nth-child(3) {
                width: 32%; } }
        #price .tabs-switch .tab-content table tbody td {
          border: 9px solid #bdd2ee;
          font-weight: bold;
          padding: 7px 0; }
          @media only screen and (max-width: 999px) {
            #price .tabs-switch .tab-content table tbody td {
              border-width: 2px;
              letter-spacing: 0; } }
          #price .tabs-switch .tab-content table tbody td small {
            font-size: 14px; }
        #price .tabs-switch .tab-content table tbody td:first-child {
          background: #fff;
          padding-left: 17px; }
          @media only screen and (max-width: 999px) {
            #price .tabs-switch .tab-content table tbody td:first-child {
              padding-left: 2%; } }
        #price .tabs-switch .tab-content table tbody td:nth-child(2) {
          background: #a2bbdc;
          text-align: center; }
        #price .tabs-switch .tab-content table tbody td:nth-child(3) {
          background: #8fbcf7;
          text-align: center; }
      #price .tabs-switch .tab-content .note {
        text-align: center;
        line-height: 30px;
        margin-top: 83px; }
        @media only screen and (max-width: 999px) {
          #price .tabs-switch .tab-content .note {
            margin-top: 6%;
            text-align: left; } }
      #price .tabs-switch .tab-content .note1 {
        text-align: center;
        line-height: 24px;
        margin-top: 10px; }
        @media only screen and (max-width: 999px) {
          #price .tabs-switch .tab-content .note1 {
            margin-top: 15px;
            margin-bottom: 10px; } }
      #price .tabs-switch .tab-content .tab1 {
        padding-top: 38px; }
      #price .tabs-switch .tab-content .tab3 {
        padding-top: 38px; }
        #price .tabs-switch .tab-content .tab3 table thead th:first-child {
          width: 291px;
          background: #9ac0f2; }
          @media only screen and (max-width: 999px) {
            #price .tabs-switch .tab-content .tab3 table thead th:first-child {
              width: 50%; } }
        #price .tabs-switch .tab-content .tab3 table thead th:nth-child(2) {
          width: 614px;
          background: #5292e6; }
          @media only screen and (max-width: 999px) {
            #price .tabs-switch .tab-content .tab3 table thead th:nth-child(2) {
              width: 50%; } }
        #price .tabs-switch .tab-content .tab3 table tbody td:first-child {
          background: #fff;
          padding-left: 17px; }
          @media only screen and (max-width: 999px) {
            #price .tabs-switch .tab-content .tab3 table tbody td:first-child {
              padding-left: 2%; } }
        #price .tabs-switch .tab-content .tab3 table tbody td:nth-child(2) {
          background: #8fbcf7;
          text-align: center; }
  #price .btn {
    width: 570px;
    margin: 0 auto;
    padding-top: 73px; }
    #price .btn a {
      background: #fff;
      color: #000;
      font-size: 18px;
      font-weight: bold;
      line-height: 54px;
      box-sizing: border-box;
      border: 1px solid #000; }
      #price .btn a:after {
        content: "";
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 42px;
        background: url("../img/index/about_arr_on.png") no-repeat;
        width: 12px;
        height: 11px; }
      #price .btn a:before {
        background: #33bedd; }
      #price .btn a:hover {
        color: #fff;
        border: 1px solid #33bedd; }
        #price .btn a:hover:before {
          background: #33bedd; }
        #price .btn a:hover:after {
          background: url("../img/index/price_arr.jpg") no-repeat; }
  #price .ltr:before {
    background: #003270; }

@media only screen and (max-width: 999px) {
  .btn a {
 font-size:4vw !important;
  }
   #price .btn {
      width: 100%;
      margin: 10% auto 0;
      padding-top: 0; }
}

#flow {
  background: #e9f2fe;
  padding-top: 100px;
  margin-top: -100px;
  }
  @media only screen and (max-width: 999px) {
    #flow {
      background: #fff; } }
  #flow .blk {
    width: 1200px;
    background: #fff;
    margin: 0 auto;
    padding: 120px 13px 142px; }
    @media only screen and (max-width: 1200px) {
      #flow .blk {
        width: 100%;
        margin: 0; } }
    @media only screen and (max-width: 999px) {
      #flow .blk {
        padding: 10% 3% 13%; } }
  @media only screen and (max-width: 999px) {
    #flow .wrap {
      padding: 0%; } }
  #flow h2 {
    text-align: center;
    color: #0053b9;
    font-family: 'BebasNeue';
    font-size: 100px;
    letter-spacing: 10px;
    margin-bottom: 53px; }
    @media only screen and (max-width: 999px) {
      #flow h2 {
        font-size: 15vw;
        line-height: 16vw;
        letter-spacing: 0.2em;
        margin-bottom: 10%; } }
    #flow h2 small {
      display: block;
      font-size: 24px;
      font-weight: bold;
      letter-spacing: 4px;
      margin-top: 44px;
      color: #000; }
      @media only screen and (max-width: 999px) {
        #flow h2 small {
          font-size: 5vw;
          line-height: 5vw;
          margin-top: 0; } }
  #flow .step {
    border-top: 2px dashed #0053b9;
    margin: 0 86px; }
    #flow .step .ttl {
      border-bottom: 2px solid #0053b9;
      padding: 29px 0 24px; }
      @media only screen and (max-width: 999px) {
        #flow .step .ttl {
          padding: 5% 0 4%; } }
      #flow .step .ttl span {
        display: inline-block; }
      #flow .step .ttl .sttl {
        font-family: 'BebasNeue';
        font-size: 30px;
        letter-spacing: 3px;
        color: #003270;
        border-bottom: 3px solid #003270;
        padding-left: 6px;
        position: relative;
        top: -19px; }
        @media only screen and (max-width: 999px) {
          #flow .step .ttl .sttl {
            font-size: 4vw;
            line-height: 4vw;
            letter-spacing: 1px;
            padding-left: 1px;
            top: -9px; } }
      #flow .step .ttl .num {
        font-family: 'BebasNeue';
        font-size: 85px;
        letter-spacing: 8px;
        color: #003270;
        margin: 0 46px 0 27px;
        position: relative;
        top: 15px; }
        @media only screen and (max-width: 999px) {
          #flow .step .ttl .num {
            font-size: 12vw;
            line-height: 5vw;
            letter-spacing: 0.1em;
            top: 9px;
            margin: 0 3% 0 2%; } }
      #flow .step .ttl .mttl {
        font-size: 36px;
        font-weight: bold;
        letter-spacing: 2.6px; }
        @media only screen and (max-width: 999px) {
          #flow .step .ttl .mttl {
            font-size: 5vw;
            line-height: 5vw;
            letter-spacing: 0; } }
    #flow .step .step-ct {
      width: 100%;
      display: table;
      margin: 42px 0 64px; }
      @media only screen and (max-width: 999px) {
        #flow .step .step-ct {
          margin: 5% 0 8%; } }
    #flow .step .img {
      display: table-cell;
      width: 266px; }
      @media only screen and (max-width: 999px) {
        #flow .step .img {
          width: 40%; } }
    #flow .step .txt {
      display: table-cell;
      font-size: 20px;
      line-height: 36px;
      font-weight: 600;
      padding: 14px 0 0 44px;
      vertical-align: top;
      letter-spacing: 1px; }
      @media only screen and (max-width: 999px) {
        #flow .step .txt {
          font-size: 14px;
          line-height: 24px;
          padding: 0 0 0 15px;
          vertical-align: middle; } }
  #flow .arrow {
    width: 106px;
    margin: 0 auto; }
    @media only screen and (max-width: 999px) {
      #flow .arrow {
        width: 17%; } }
  #flow .step1 {
    padding-bottom: 34px; }
    @media only screen and (max-width: 999px) {
      #flow .step1 {
        padding-bottom: 6%; } }
    #flow .step1 .step-ct {
      margin-bottom: 0; }
  #flow .step2 .arrow {
    margin-bottom: 32px; }
    @media only screen and (max-width: 999px) {
      #flow .step2 .arrow {
        margin-bottom: 6%; } }
  #flow .step3 .arrow {
    margin-bottom: 37px; }
    @media only screen and (max-width: 999px) {
      #flow .step3 .arrow {
        margin-bottom: 6%; } }
  #flow .step4 .arrow {
    margin-bottom: 43px; }
    @media only screen and (max-width: 999px) {
      #flow .step4 .arrow {
        margin-bottom: 6%; } }
  #flow .step5 .step-ct {
    margin-bottom: 0; }

#contact {
  background: #003270;
  color: #fff;
  padding-bottom: 45px;
  margin: 49px 0 34px; }
  #contact h2 {
    font-weight: bold;
    font-size: 34.39px;
    text-align: center;
    letter-spacing: 0.1em;
    padding-top: 62px; }
    #contact h2 small {
      padding-bottom: 13px;
      font-size: 24px;
      display: block;
      position: relative; }
      #contact h2 small:before {
        content: "";
        position: absolute;
        top: 4px;
        left: 300px;
        border-left: 1px solid #fff;
        height: 31px;
        background: #fff;
        transform: skewX(30deg); }
      #contact h2 small:after {
        content: "";
        position: absolute;
        top: 4px;
        right: 308px;
        border-left: 1px solid #fff;
        height: 31px;
        background: #fff;
        transform: skewX(-30deg); }
    #contact h2 .txt-blue {
      color: #33bedd; }
  #contact .lst_blk {
    display: flex;
    justify-content: center;
    padding-top: 54px;
    position: relative; }
    #contact .lst_blk:before {
      content: "";
      position: absolute;
      top: 45px;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      border-left: 1px solid #597da9; }
    #contact .lst_blk .box {
      width: 367px;
      margin: 0px 66px; }
      #contact .lst_blk .box h3 {
        font-size: 20px;
        font-weight: bold;
        text-align: center;
        border-bottom: 2px solid #fff;
        padding-bottom: 6px;
        margin-bottom: 28px; }
      #contact .lst_blk .box .tel1 {
        font-size: 36px;
        font-weight: bold;
        position: relative;
        letter-spacing: 0.08em;
        padding-bottom: 11px;
        white-space: nowrap; }
        #contact .lst_blk .box .tel1:before {
          content: "";
          display: inline-block;
          background: url("../img/index/contact_deco.jpg") no-repeat center;
          width: 45px;
          height: 26px;
          padding-right: 28px; }
      #contact .lst_blk .box ul {
        padding-bottom: 7px; }
        #contact .lst_blk .box ul li:nth-child(1) {
          font-size: 23.96px;
          font-weight: bold;
          letter-spacing: 0.08em;
          padding-bottom: 3%;
          white-space: nowrap; }
          #contact .lst_blk .box ul li:nth-child(1) .txt-md {
            font-size: 15.97px; }
        #contact .lst_blk .box ul li:nth-child(2) {
          font-size: 18px;
          font-weight: bold;
          text-align: right;
          margin-right: 26px;
          margin-top: -9px;
          letter-spacing: 0.1em; }
      #contact .lst_blk .box .txt {
        background: #0053b9;
        font-size: 16px;
        line-height: 30px;
        font-weight: bold;
        text-align: center;
        padding: 0;
        letter-spacing: 0;
        display: block; }
      #contact .lst_blk .box .note {
        font-size: 12px;
        text-align: center;
        line-height: 24px;
        margin-top: 10px; }
      #contact .lst_blk .box h4 {
        text-align: center;
        font-size: 24px;
        font-weight: bold;
        padding-top: 4px;
        padding-bottom: 33px; }
        #contact .lst_blk .box h4 small {
          display: block;
          font-size: 14px;
          letter-spacing: 0.08em; }
      #contact .lst_blk .box .btn {
        width: 345px;
        border: 1px solid #000;
        border-radius: 30px;
        font-size: 18px;
        font-weight: bold; }
        #contact .lst_blk .box .btn a {
          padding: 7px 0 6px; }
          #contact .lst_blk .box .btn a:after {
            content: "";
            display: inline-block; }
          #contact .lst_blk .box .btn a .icon-mail:before {
            font-size: 28px;
            font-weight: bold;
            vertical-align: middle; }

#area {
  color: #fff;
  padding: 163px 0 98px 77px;
  position: relative;
  z-index: 1; }
  @media only screen and (max-width: 1500px) {
    #area {
      padding-left: 30px; } }
  @media only screen and (max-width: 999px) {
    #area {
      padding: 10% 0; } }
  #area .bg {
    background: #003270;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1; }
  #area h2 {
    font-family: 'BebasNeue';
    font-size: 100px;
    letter-spacing: 10px;
    margin-bottom: 53px; }
    @media only screen and (max-width: 999px) {
      #area h2 {
        font-size: 15vw;
        line-height: 16vw;
        letter-spacing: 0.2em;
        margin-bottom: 7%;
        text-align: center; } }
    #area h2 small {
      display: block;
      font-size: 24px;
      font-weight: bold;
      letter-spacing: 4px;
      margin-top: 49px; }
      @media only screen and (max-width: 999px) {
        #area h2 small {
          font-size: 5vw;
          line-height: 5vw;
          margin-top: 0; } }
  #area .txt-box {
    width: 456px;
    background: #fff;
    border: 2px solid #00479f;
    text-align: center;
    color: #00479f;
    font-size: 18px;
    font-weight: bold;
    line-height: 32px;
    letter-spacing: 4px;
    position: absolute;
    left: 357px;
    top: 134px;
    z-index: 1;
    padding: 9px 0 10px; }
    @media only screen and (max-width: 999px) {
      #area .txt-box {
        width: 90%;
        margin: 0 auto;
        position: static;
        letter-spacing: 1px;
        padding: 10px 0;
        font-size: 16px;
        line-height: 28px; } }
  #area .blk {
    width: 1475px;
    font-weight: 600; }
    @media only screen and (max-width: 1500px) {
      #area .blk {
        width: 100%; } }
    #area .blk .map {
      width: 768px;
      float: right;
      margin-top: -193px; }
      @media only screen and (max-width: 1500px) {
        #area .blk .map {
          width: 50%;
          margin-top: -10%; } }
      @media only screen and (max-width: 1200px) {
        #area .blk .map {
          margin-top: -5%; } }
      @media only screen and (max-width: 999px) {
        #area .blk .map {
          width: 100%;
          float: none;
          margin-top: 2%; } }
    #area .blk .area-ct {
      font-size: 16px;
      line-height: 30px;
      width: 700px;
      float: left;
      padding-left: 4px;
      text-align: justify; }
      @media only screen and (max-width: 1500px) {
        #area .blk .area-ct {
          width: 50%; } }
      @media only screen and (max-width: 999px) {
        #area .blk .area-ct {
          width: 100%;
          float: none;
          padding: 0;
          font-size: 14px;
          line-height: 24px;
          padding: 0 5%; } }
      #area .blk .area-ct dl {
        margin-bottom: 47px; }
        @media only screen and (max-width: 999px) {
          #area .blk .area-ct dl {
            margin-bottom: 7%; } }
        #area .blk .area-ct dl dt {
          font-size: 24px;
          border-bottom: 3px solid #fff;
          padding-bottom: 7px;
          margin-bottom: 14px; }
          @media only screen and (max-width: 999px) {
            #area .blk .area-ct dl dt {
              font-size: 18px;
              border-width: 2px; } }
          #area .blk .area-ct dl dt small {
            font-size: 16px; }
            @media only screen and (max-width: 999px) {
              #area .blk .area-ct dl dt small {
                font-size: 14px; } }
      #area .blk .area-ct .note {
        padding-top: 8px;
        letter-spacing: 0; }
        @media only screen and (max-width: 999px) {
          #area .blk .area-ct .note {
            padding-top: 1%; } }

#banner {
  padding-top: 75px; }
  @media only screen and (max-width: 999px) {
    #banner {
      padding-top: 5%; } }
  #banner ul li + li {
    margin-top: 41px; }
    @media only screen and (max-width: 999px) {
      #banner ul li + li {
        margin-top: 3%; } }

#faq {
  padding: 187px 0 59px;
  margin-top: -50px;
  }
  @media only screen and (max-width: 999px) {
    #faq {
      padding: 10% 0; } }
  #faq h2 {
    font-family: 'BebasNeue';
    font-size: 100px;
    letter-spacing: 10px;
    margin-bottom: 104px;
    text-align: center;
    color: #0053b9; }
    @media only screen and (max-width: 999px) {
      #faq h2 {
        font-size: 15vw;
        line-height: 16vw;
        letter-spacing: 0.2em;
        margin-bottom: 7%; } }
    #faq h2 small {
      display: block;
      font-size: 24px;
      font-weight: bold;
      letter-spacing: 4px;
      margin-top: 44px;
      color: #000; }
      @media only screen and (max-width: 999px) {
        #faq h2 small {
          font-size: 5vw;
          line-height: 5vw;
          margin-top: 0; } }
  #faq .blk .quest {
    margin-bottom: 44px; }
    @media only screen and (max-width: 999px) {
      #faq .blk .quest {
        margin-bottom: 8%; } }
    #faq .blk .quest .ttl {
      width: 100%;
      display: block; }
      #faq .blk .quest .ttl span {
        display: inline-block;
        vertical-align: top;
        font-family: 'BebasNeue';
        font-weight: normal;
        width: 78px;
        height: 78px;
        line-height: 78px;
        font-size: 72px;
        background: #0053b9;
        color: #fff;
        text-align: center; }
        @media only screen and (max-width: 999px) {
          #faq .blk .quest .ttl span {
            width: 13%;
            height: auto;
            line-height: 12vw;
            font-size: 9vw; } }
      #faq .blk .quest .ttl q {
        display: inline-block;
        width: calc(100% - 78px);
        vertical-align: middle;
        font-size: 24px;
        font-weight: bold;
        border: 2px solid #cacaca;
        line-height: 40px;
        padding: 17px 22px; }
        @media only screen and (max-width: 999px) {
          #faq .blk .quest .ttl q {
            width: 87%;
            padding: 2.876% 3%;
            font-size: 4vw;
            letter-spacing: 0;
            line-height: 6vw; } }
    #faq .blk .quest .db q {
      padding: 21px 22px; }
      @media only screen and (max-width: 999px) {
        #faq .blk .quest .db q {
          padding: 3% 3%; } }
    #faq .blk .quest .ans {
      font-size: 18px;
      line-height: 36px;
      font-weight: 600;
      padding: 34px 0 0 63px; }
      @media only screen and (max-width: 999px) {
        #faq .blk .quest .ans {
          font-size: 14px;
          line-height: 24px;
          padding: 5% 0 0; } }
    #faq .blk .quest .bnr a {
      display: block;
      width: 570px;
      margin: 22px auto 0;
      background: #0053b9;
      border: 1px solid #0053b9;
      color: #fff;
      text-align: center;
      font-size: 18px;
      font-weight: bold;
      line-height: 56px;
      border-radius: 50px;
      position: relative; }
      @media only screen and (max-width: 999px) {
        #faq .blk .quest .bnr a {
          width: 100%;
          border-radius: 20px;
          font-size: 14px;
          line-height: 48px; } }
      #faq .blk .quest .bnr a:after {
        content: '';
        width: 12px;
        height: 11px;
        background: url("../img/index/about_arr.png") no-repeat;
        background-repeat: no-repeat;
        background-size: 100%;
        position: absolute;
        top: 22px;
        right: 65px; }
        @media only screen and (max-width: 999px) {
          #faq .blk .quest .bnr a:after {
            right: 20px;
            top: 18px; } }
      #faq .blk .quest .bnr a:before {
        background: #fff; }
      #faq .blk .quest .bnr a:hover {
        text-decoration: none;
        border: 1px solid #000;
        color: #000; }
        #faq .blk .quest .bnr a:hover:before {
          background: #fff; }
        #faq .blk .quest .bnr a:hover:after {
          background: url("../img/index/about_arr_on.png") no-repeat; }
  #faq .blk .mb62 {
    margin-bottom: 62px; }
    @media only screen and (max-width: 999px) {
      #faq .blk .mb62 {
        margin-bottom: 8%; } }
  #faq .blk .mb64 {
    margin-bottom: 64px; }
    @media only screen and (max-width: 999px) {
      #faq .blk .mb64 {
        margin-bottom: 8%; } }
  #faq .blk .mb75 {
    margin-bottom: 75px; }
    @media only screen and (max-width: 999px) {
      #faq .blk .mb75 {
        margin-bottom: 8%; } }

#contact2.contact2 {
  padding-bottom: 68px;
  background: #003270;
  color: #fff;
  padding-bottom: 45px;
  margin: 49px 0 34px; }
  #contact2.contact2 h2 {
    font-weight: bold;
    font-size: 34.39px;
    text-align: center;
    letter-spacing: 0.1em;
    padding-top: 62px;
    white-space: nowrap; }
    #contact2.contact2 h2 small {
      padding-bottom: 13px;
      font-size: 24px;
      display: block;
      position: relative; }
      #contact2.contact2 h2 small:before {
        content: "";
        position: absolute;
        top: 4px;
        left: 300px;
        border-left: 1px solid #fff;
        height: 31px;
        background: #fff;
        transform: skewX(30deg); }
      #contact2.contact2 h2 small:after {
        content: "";
        position: absolute;
        top: 4px;
        right: 308px;
        border-left: 1px solid #fff;
        height: 31px;
        background: #fff;
        transform: skewX(-30deg); }
    #contact2.contact2 h2 .txt-blue {
      color: #33bedd; }
  #contact2.contact2 .lst_blk {
    display: flex;
    justify-content: center;
    padding-top: 54px;
    position: relative; }
    #contact2.contact2 .lst_blk:before {
      content: "";
      position: absolute;
      top: 45px;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      border-left: 1px solid #597da9; }
    #contact2.contact2 .lst_blk .box {
      width: 367px;
      margin: 0px 66px; }
      #contact2.contact2 .lst_blk .box h3 {
        font-size: 20px;
        font-weight: bold;
        text-align: center;
        border-bottom: 2px solid #fff;
        padding-bottom: 6px;
        margin-bottom: 28px; }
      #contact2.contact2 .lst_blk .box .tel1 {
        font-size: 36px;
        font-weight: bold;
        position: relative;
        letter-spacing: 0.08em;
        padding-bottom: 11px;
        white-space: nowrap; }
        #contact2.contact2 .lst_blk .box .tel1:before {
          content: "";
          display: inline-block;
          background: url("../img/index/contact_deco.jpg") no-repeat center;
          width: 45px;
          height: 26px;
          padding-right: 28px; }
      #contact2.contact2 .lst_blk .box ul {
        padding-bottom: 7px; }
        #contact2.contact2 .lst_blk .box ul li:nth-child(1) {
          font-size: 23.96px;
          font-weight: bold;
          letter-spacing: 0.08em;
          padding-bottom: 3%;
          white-space: nowrap; }
          #contact2.contact2 .lst_blk .box ul li:nth-child(1) .txt-md {
            font-size: 15.97px; }
        #contact2.contact2 .lst_blk .box ul li:nth-child(2) {
          font-size: 18px;
          font-weight: bold;
          text-align: right;
          margin-right: 26px;
          margin-top: -9px;
          letter-spacing: 0.1em; }
      #contact2.contact2 .lst_blk .box .txt {
        background: #0053b9;
        font-size: 16px;
        line-height: 30px;
        font-weight: bold;
        text-align: center;
        padding: 0;
        letter-spacing: 0;
        display: block; }
      #contact2.contact2 .lst_blk .box .note {
        font-size: 12px;
        text-align: center;
        line-height: 24px;
        margin-top: 10px; }
      #contact2.contact2 .lst_blk .box h4 {
        text-align: center;
        font-size: 24px;
        font-weight: bold;
        padding-top: 4px;
        padding-bottom: 33px; }
        #contact2.contact2 .lst_blk .box h4 small {
          display: block;
          font-size: 14px;
          letter-spacing: 0.08em; }
      #contact2.contact2 .lst_blk .box .btn {
        width: 345px;
        border: 1px solid #000;
        border-radius: 30px;
        font-size: 18px;
        font-weight: bold; }
        #contact2.contact2 .lst_blk .box .btn a {
          padding: 7px 0 6px; }
          #contact2.contact2 .lst_blk .box .btn a:after {
            content: "";
            display: inline-block; }
          #contact2.contact2 .lst_blk .box .btn a .icon-mail:before {
            font-size: 28px;
            font-weight: bold;
            vertical-align: middle; }
  #contact2.contact2 .lst_blk {
    padding-top: 42px; }
    #contact2.contact2 .lst_blk .box h3 {
      margin-bottom: 31px; }
    #contact2.contact2 .lst_blk .box ul {
      padding-bottom: 10px; }
    #contact2.contact2 .lst_blk .box h4 {
      padding-top: 20px; }

@media only screen and (max-width: 1200px) {
  #flow .step {
    margin: 0 0 !important; } }
@media only screen and (max-width: 1015px) {
  #flow .blk {
    padding: 120px 0 142px; } }
@media only screen and (max-width: 999px) {
  #contact.contact2 .lst_blk,
  #contact .lst_blk {
    display: block;
    justify-content: center;
    padding-top: 40px;
    position: relative; }

  #contact .lst_blk:before {
    border-left: none; }

  #contact .lst_blk .box {
    width: 90%;
    margin: 0 auto;
    text-align: center; }

  #contact.contact2 .lst_blk .box h3,
  #contact .lst_blk .box h3 {
    font-size: 4.5vw;
    padding-bottom: 3%;
    margin-bottom: 5%;
    width: 100%; }

  #contact .lst_blk .box .tel1 {
    font-size: 5vw; }

  #contact .lst_blk .box .tel1:before {
    width: 6vw;
    height: 6vw;
    vertical-align: text-top; }

  #contact .lst_blk .box ul li:nth-child(1) {
    font-size: 5vw;
    font-weight: bold;
    letter-spacing: 0.08em; }

  #contact .lst_blk .box ul li:nth-child(1) .txt-md {
    font-size: 4vw; }

  #contact .lst_blk .box ul li:nth-child(2) {
    font-size: 4vw;
    text-align: center;
    margin-right: 0; }

  #contact .lst_blk .box .txt {
    font-size: 3vw; }

  #contact .lst_blk .box .note {
    font-size: 2vw;
    padding-bottom: 8%; }

  #contact.contact2 .lst_blk .box h4,
  #contact .lst_blk .box h4 {
    font-size: 4.5vw;
    padding-top: 0;
    padding-bottom: 6%;
    line-height: 7vw; }

  #contact .lst_blk .box h4 small {
    font-size: 3vw; }

  #contact .lst_blk .box .btn {
    width: 100%;
    margin: 0 auto;
    font-size: 5vw; }

  #contact .lst_blk .box .btn a {
    padding: 2% 0 2%; } }
@media only screen and (max-width: 999px) {
  #contact2.contact2 {
    padding-bottom: 10%; }
    #contact2.contact2 h2 {
      font-size: 5.5vw;
      line-height: 8vw;
      padding-top: 8%;
      width: 90%;
      margin: 0 auto; }
      #contact2.contact2 h2 small {
        padding-bottom: 0;
        font-size: 4vw; }
        #contact2.contact2 h2 small:before {
          left: 5%; }
        #contact2.contact2 h2 small:after {
          right: 5%; }
      #contact2.contact2 h2 .txt-blue {
        color: #33bedd; }
    #contact2.contact2 .lst_blk {
      display: block;
      justify-content: center;
      padding-top: 40px;
      position: relative; }
      #contact2.contact2 .lst_blk:before {
        border-left: none; }
      #contact2.contact2 .lst_blk .box {
        width: 90%;
        margin: 0 auto;
        text-align: center; }
        #contact2.contact2 .lst_blk .box h3 {
          font-size: 4.5vw;
          padding-bottom: 3%;
          margin-bottom: 5%;
          width: 100%; }
        #contact2.contact2 .lst_blk .box .tel1 {
          font-size: 5vw; }
          #contact2.contact2 .lst_blk .box .tel1:before {
            width: 6vw;
            height: 6vw;
            vertical-align: text-top; }
        #contact2.contact2 .lst_blk .box ul li:nth-child(1) {
          font-size: 5vw;
          font-weight: bold;
          letter-spacing: 0.08em; }
          #contact2.contact2 .lst_blk .box ul li:nth-child(1) .txt-md {
            font-size: 4vw; }
        #contact2.contact2 .lst_blk .box ul li:nth-child(2) {
          font-size: 4vw;
          text-align: center;
          margin-right: 0; }
        #contact2.contact2 .lst_blk .box .txt {
          font-size: 3vw; }
        #contact2.contact2 .lst_blk .box .note {
          font-size: 2vw;
          padding-bottom: 8%; }
        #contact2.contact2 .lst_blk .box h4 {
          font-size: 4.5vw;
          padding-top: 0;
          padding-bottom: 6%;
          line-height: 7vw; }
          #contact2.contact2 .lst_blk .box h4 small {
            font-size: 3vw; }
        #contact2.contact2 .lst_blk .box .btn {
          width: 100%;
          margin: 0 auto;
          font-size: 5vw; }
          #contact2.contact2 .lst_blk .box .btn a {
            padding: 2% 0 2%; }

  #flow .step {
    margin: 0 2% !important; } }
#case {
  padding: 117px 0 104px; }
  @media only screen and (max-width: 999px) {
    #case {
      padding: 8% 0 10%; } }
  #case h2 {
    text-align: center;
    color: #0053b9;
    font-family: 'BebasNeue';
    font-size: 100px;
    letter-spacing: 10px;
    margin-bottom: 45px; }
    @media only screen and (max-width: 999px) {
      #case h2 {
        font-size: 15vw;
        line-height: 16vw;
        letter-spacing: 0.2em;
        margin-bottom: 8%; } }
    #case h2 small {
      display: block;
      font-size: 24px;
      font-weight: bold;
      letter-spacing: 4px;
      margin-top: 44px;
      color: #000; }
      @media only screen and (max-width: 999px) {
        #case h2 small {
          font-size: 5vw;
          line-height: 5vw;
          margin-top: 0; } }
  #case .b-txt {
    text-align: center;
    font-size: 28px;
    font-weight: 600;
    line-height: 48px;
    margin-bottom: 59px; }
    @media only screen and (max-width: 999px) {
      #case .b-txt {
        font-size: 5vw;
        line-height: 8vw;
        letter-spacing: 0;
        margin-bottom: 8%; } }
  #case .slider .slick-slide {
    width: 477px; }
    @media only screen and (max-width: 999px) {
      #case .slider .slick-slide {
        width: 390px; } }
  #case .slider p {
    padding: 0 14px; }
  #case .rss {
    width: 1200px;
    margin: 45px auto 0;
    background: #e9f2fe;
    padding: 62px 100px 47px; }
    @media only screen and (max-width: 1200px) {
      #case .rss {
        width: 100%;
        padding: 62px 30px 47px; } }
    @media only screen and (max-width: 999px) {
      #case .rss {
        padding: 10% 3%; } }
    #case .rss .ttl {
      font-size: 30px;
      font-weight: bold;
      color: #00479f;
      text-align: center;
      letter-spacing: 6px;
      margin-bottom: 32px; }
      @media only screen and (max-width: 999px) {
        #case .rss .ttl {
          font-size: 5vw;
          line-height: 6vw;
          letter-spacing: 0; } }
      #case .rss .ttl span {
        position: relative; }
        #case .rss .ttl span:before {
          content: '';
          width: 111px;
          height: 2px;
          background: #00479f;
          position: absolute;
          left: -135px;
          top: 21px; }
          @media only screen and (max-width: 999px) {
            #case .rss .ttl span:before {
              width: 10%;
              left: -14%;
              top: 48%; } }
        #case .rss .ttl span:after {
          content: '';
          width: 111px;
          height: 2px;
          background: #00479f;
          position: absolute;
          right: -126px;
          top: 21px; }
          @media only screen and (max-width: 999px) {
            #case .rss .ttl span:after {
              width: 10%;
              right: -14%;
              top: 48%; } }
    #case .rss #feed {
      display: flex;
      justify-content: space-between; }
      #case .rss #feed .row {
        width: 280px; }
        @media only screen and (max-width: 1200px) {
          #case .rss #feed .row {
            width: 31%; } }
        @media only screen and (max-width: 999px) {
          #case .rss #feed .row {
            width: 32%; } }
        #case .rss #feed .row .rss_img span {
          width: 280px !important;
          height: auto !important;
          padding-top: 64%; }
          #case .rss #feed .row .rss_img span:hover {
            opacity: 0.8; }
          @media only screen and (max-width: 1200px) {
            #case .rss #feed .row .rss_img span {
              width: 100% !important; } }
        #case .rss #feed .row dl {
          font-size: 16px;
          margin-top: 30px;
          line-height: 28px; }
          @media only screen and (max-width: 999px) {
            #case .rss #feed .row dl {
              font-size: 14px;
              line-height: 24px;
              margin-top: 3%; } }
          #case .rss #feed .row dl dt {
            color: #000689;
            font-weight: bold;
            letter-spacing: 0;
            margin-bottom: 2px; }
    #case .rss .bnr a {
      display: block;
      width: 570px;
      margin: 22px auto 0;
      background: #0053b9;
      border: 1px solid #0053b9;
      color: #fff;
      text-align: center;
      font-size: 18px;
      font-weight: bold;
      line-height: 56px;
      border-radius: 50px;
      position: relative; }
      @media only screen and (max-width: 999px) {
        #case .rss .bnr a {
          width: 100%;
          border-radius: 20px;
          font-size: 14px;
          line-height: 48px;
          margin-top: 5%; } }
      #case .rss .bnr a:after {
        content: '';
        width: 12px;
        height: 11px;
        background: url("../img/index/about_arr.png") no-repeat;
        background-repeat: no-repeat;
        background-size: 100%;
        position: absolute;
        top: 22px;
        right: 65px; }
        @media only screen and (max-width: 999px) {
          #case .rss .bnr a:after {
            right: 20px;
            top: 18px; } }
      #case .rss .bnr a:before {
        background: #fff; }
      #case .rss .bnr a:hover {
        text-decoration: none;
        border: 1px solid #000;
        color: #000; }
        #case .rss .bnr a:hover:before {
          background: #fff; }
        #case .rss .bnr a:hover:after {
          background: url("../img/index/about_arr_on.png") no-repeat; }