#wrapper {
  position: relative; }
  #wrapper .animate__fadeInUp {
    opacity: 0; }
  #wrapper .w900 {
    width: 100%;
    max-width: 900px;
    margin: 0 auto; }
  #wrapper .w800 {
    width: 100%;
    max-width: 800px;
    margin: 0 auto; }
  #wrapper .circle {
    position: absolute;
    pointer-events: none;
    z-index: -1; }
  #wrapper .kv_area {
    width: 100%;
    padding: 160px 0 0px;
    margin-bottom: 190px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center; }
    @media screen and (max-width: 768px) {
      #wrapper .kv_area {
        padding: 50px 5% 0;
        margin-bottom: 80px; } }
    #wrapper .kv_area .circle1 {
      top: 0;
      left: 0; }
      @media screen and (max-width: 768px) {
        #wrapper .kv_area .circle1 {
          width: 150px; } }
    #wrapper .kv_area .circle2 {
      right: 0;
      bottom: -200px; }
      @media screen and (max-width: 768px) {
        #wrapper .kv_area .circle2 {
          width: 120px;
          bottom: -150px; } }
    #wrapper .kv_area > .inner {
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      flex-wrap: wrap; }
      #wrapper .kv_area > .inner .logo_box {
        text-align: center;
        margin-bottom: 40px; }
        @media screen and (max-width: 768px) {
          #wrapper .kv_area > .inner .logo_box {
            margin-bottom: 20px; } }
        #wrapper .kv_area > .inner .logo_box .hand {
          width: 165px;
          height: 207px;
          margin: 0 auto 30px;
          position: relative;
          overflow: hidden;
          opacity: 0;
          transition: opacity 0.3s; }
          @media screen and (max-width: 768px) {
            #wrapper .kv_area > .inner .logo_box .hand {
              width: 100px;
              height: 125px;
              margin-bottom: 15px; }
              #wrapper .kv_area > .inner .logo_box .hand img {
                width: 100px; } }
          #wrapper .kv_area > .inner .logo_box .hand.act {
            opacity: 1; }
          #wrapper .kv_area > .inner .logo_box .hand img {
            position: absolute;
            top: 100%;
            left: 0; }
        #wrapper .kv_area > .inner .logo_box p.name {
          overflow: hidden;
          width: 0;
          animation: txt_show 0.3s 0.5s;
          animation-fill-mode: forwards; }
          #wrapper .kv_area > .inner .logo_box p.name img {
            width: 400px;
            min-width: 400px; }
            @media screen and (max-width: 768px) {
              #wrapper .kv_area > .inner .logo_box p.name img {
                width: 250px;
                min-width: 250px; } }
      #wrapper .kv_area > .inner h1 {
        margin-bottom: 60px; }
        @media screen and (max-width: 768px) {
          #wrapper .kv_area > .inner h1 {
            margin-bottom: 30px; }
            #wrapper .kv_area > .inner h1 img {
              width: 250px; } }
      #wrapper .kv_area > .inner ul {
        display: flex;
        justify-content: center; }
        @media screen and (max-width: 768px) {
          #wrapper .kv_area > .inner ul {
            display: block; } }
        #wrapper .kv_area > .inner ul li:not(:last-child) {
          margin-right: 35px; }
          @media screen and (max-width: 768px) {
            #wrapper .kv_area > .inner ul li:not(:last-child) {
              margin: 0 0 20px; } }
        #wrapper .kv_area > .inner ul li:hover.login a {
          color: #fff;
          background: #ee86a8; }
          #wrapper .kv_area > .inner ul li:hover.login a i {
            color: #fff; }
        #wrapper .kv_area > .inner ul li:hover.signup a {
          background: #59c3e1;
          color: #fff; }
          #wrapper .kv_area > .inner ul li:hover.signup a i {
            color: #fff; }
        #wrapper .kv_area > .inner ul li.login a {
          border: 4px solid #ee86a8;
          color: #ee86a8; }
          #wrapper .kv_area > .inner ul li.login a i {
            color: #ee86a8; }
        #wrapper .kv_area > .inner ul li.signup a {
          border: 4px solid #59c3e1;
          color: #59c3e1; }
          #wrapper .kv_area > .inner ul li.signup a i {
            color: #59c3e1; }
        #wrapper .kv_area > .inner ul li a {
          display: flex;
          width: 260px;
          height: 60px;
          background: #fff;
          align-items: center;
          justify-content: center;
          text-align: center;
          position: relative;
          border-radius: 50px;
          font-size: 24px;
          font-weight: bold;
          line-height: 1;
          text-decoration: none;
          transition: background 0.3s, color 0.3s;
          -webkit-transition: -webkit-transform background 0.3s, color 0.3s; }
          @media screen and (max-width: 768px) {
            #wrapper .kv_area > .inner ul li a {
              width: 200px;
              height: 45px;
              font-size: 18px;
              border-width: 2px; } }
          #wrapper .kv_area > .inner ul li a i {
            font-size: 20px;
            position: absolute;
            top: 50%;
            right: 30px;
            transform: translate(0, -50%);
            transition: color 0.3s;
            -webkit-transition: -webkit-transform color 0.3s; }
            @media screen and (max-width: 768px) {
              #wrapper .kv_area > .inner ul li a i {
                font-size: 14px;
                right: 15px; } }
        #wrapper .kv_area > .inner ul li p.new {
          text-align: center;
          font-size: 16px;
          line-height: 1;
          margin-top: 10px;
          transition: color 0.3s;
          -webkit-transition: -webkit-transform color 0.3s; }
          @media screen and (max-width: 768px) {
            #wrapper .kv_area > .inner ul li p.new {
              font-size: 14px; } }
  #wrapper h2 {
    display: flex;
    align-items: flex-end;
    position: relative;
    margin-bottom: 60px; }
    @media screen and (max-width: 768px) {
      #wrapper h2 {
        display: block;
        margin-bottom: 30px; } }
    @media screen and (max-width: 768px) {
      #wrapper h2 span.en {
        display: block; } }
    #wrapper h2 span.jp {
      font-size: 18px;
      color: #898989;
      position: relative;
      bottom: 15px;
      line-height: 1;
      font-weight: bold; }
      @media screen and (max-width: 768px) {
        #wrapper h2 span.jp {
          font-size: 14px;
          position: static;
          margin-top: 10px;
          display: block; } }
  #wrapper .news_area {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto 190px; }
    @media screen and (max-width: 768px) {
      #wrapper .news_area {
        padding: 0 5%;
        margin-bottom: 80px; } }
    @media screen and (max-width: 768px) {
      #wrapper .news_area h2 span.en {
        width: 100px; } }
    #wrapper .news_area .w800 dl {
      font-size: 16px;
      display: flex;
      flex-wrap: wrap;
      text-align: left; }
      @media screen and (max-width: 768px) {
        #wrapper .news_area .w800 dl {
          font-size: 14px; } }
      #wrapper .news_area .w800 dl dt {
        width: 150px;
        font-weight: bold;
        padding: 0 0 25px 20px;
        border-bottom: 1px solid #ccc; }
        #wrapper .news_area .w800 dl dt:not(:last-of-type) {
          margin-bottom: 25px; }
          @media screen and (max-width: 768px) {
            #wrapper .news_area .w800 dl dt:not(:last-of-type) {
              margin-bottom: 15px; } }
        @media screen and (max-width: 768px) {
          #wrapper .news_area .w800 dl dt {
            padding: 0 0 15px;
            width: 100px; } }
      #wrapper .news_area .w800 dl dd {
        width: calc(100% - 150px);
        padding: 0 0 25px 0;
        border-bottom: 1px solid #ccc; }
        #wrapper .news_area .w800 dl dd:not(:last-child) {
          margin-bottom: 25px; }
          @media screen and (max-width: 768px) {
            #wrapper .news_area .w800 dl dd:not(:last-child) {
              margin-bottom: 15px; } }
        @media screen and (max-width: 768px) {
          #wrapper .news_area .w800 dl dd {
            width: calc(100% - 100px);
            padding: 0 0 15px 0; } }
  #wrapper .about_area {
    width: 100%;
    margin-bottom: 190px;
    position: relative; }
    @media screen and (max-width: 768px) {
      #wrapper .about_area {
        margin-bottom: 80px;
        padding: 0 5%; } }
    #wrapper .about_area .circle3 {
      top: 150px;
      left: 0; }
      @media screen and (max-width: 768px) {
        #wrapper .about_area .circle3 {
          width: 120px;
          top: 100px; } }
    #wrapper .about_area > .inner {
      width: 100%;
      max-width: 1100px;
      margin: 0 auto; }
      @media screen and (max-width: 768px) {
        #wrapper .about_area > .inner h2 span.en {
          width: 320px; } }
      #wrapper .about_area > .inner .txt_area {
        position: relative; }
        #wrapper .about_area > .inner .txt_area .img {
          position: absolute;
          top: 60px;
          right: 0;
          width: 28%;
          max-width: 350px; }
          @media screen and (max-width: 1080px) {
            #wrapper .about_area > .inner .txt_area .img {
              width: 24%; } }
          @media screen and (max-width: 980px) {
            #wrapper .about_area > .inner .txt_area .img {
              width: 100%;
              position: static;
              margin: 0 auto 30px; } }
          @media screen and (max-width: 768px) {
            #wrapper .about_area > .inner .txt_area .img {
              max-width: 250px;
              margin-bottom: 20px; } }
        #wrapper .about_area > .inner .txt_area .w800 {
          padding-right: 15%;
          position: relative; }
          @media screen and (max-width: 980px) {
            #wrapper .about_area > .inner .txt_area .w800 {
              padding: 0; } }
          #wrapper .about_area > .inner .txt_area .w800 dl dt {
            font-size: 22px;
            font-weight: bold;
            margin-bottom: 25px; }
            @media screen and (max-width: 768px) {
              #wrapper .about_area > .inner .txt_area .w800 dl dt {
                font-size: 18px;
                margin-bottom: 15px; } }
          #wrapper .about_area > .inner .txt_area .w800 dl dd {
            font-size: 16px; }
            #wrapper .about_area > .inner .txt_area .w800 dl dd:not(:last-child) {
              margin-bottom: 55px; }
              @media screen and (max-width: 768px) {
                #wrapper .about_area > .inner .txt_area .w800 dl dd:not(:last-child) {
                  margin-bottom: 30px; } }
            @media screen and (max-width: 768px) {
              #wrapper .about_area > .inner .txt_area .w800 dl dd {
                font-size: 14px; } }
          #wrapper .about_area > .inner .txt_area .w800 p.note {
            font-size: 14px;
            margin-top: 40px; }
            @media screen and (max-width: 768px) {
              #wrapper .about_area > .inner .txt_area .w800 p.note {
                font-size: 12px;
                margin-top: 20px; } }
  #wrapper .service_area {
    width: 100%;
    position: relative;
    margin-bottom: 190px; }
    @media screen and (max-width: 768px) {
      #wrapper .service_area {
        margin-bottom: 80px;
        padding: 0 5%; } }
    #wrapper .service_area .circle4 {
      right: 0;
      top: -350px; }
      @media screen and (max-width: 768px) {
        #wrapper .service_area .circle4 {
          width: 150px;
          top: -100px; } }
    #wrapper .service_area > .inner {
      width: 100%;
      max-width: 1100px;
      margin: 0 auto; }
      @media screen and (max-width: 768px) {
        #wrapper .service_area > .inner h2 span.en {
          width: 135px; } }
      #wrapper .service_area > .inner .col2 {
        width: 100%;
        display: flex;
        align-items: center; }
        @media screen and (max-width: 768px) {
          #wrapper .service_area > .inner .col2 {
            display: block; } }
        #wrapper .service_area > .inner .col2 .img {
          width: 32%; }
          @media screen and (max-width: 768px) {
            #wrapper .service_area > .inner .col2 .img {
              width: 100%;
              text-align: center;
              margin-bottom: 20px; }
              #wrapper .service_area > .inner .col2 .img img {
                max-width: 250px; } }
        #wrapper .service_area > .inner .col2 .txt_area {
          width: calc(100% - 32%);
          padding-left: 55px; }
          @media screen and (max-width: 768px) {
            #wrapper .service_area > .inner .col2 .txt_area {
              width: 100%;
              padding: 0; } }
          #wrapper .service_area > .inner .col2 .txt_area dl {
            text-align: left;
            margin-bottom: 45px; }
            @media screen and (max-width: 768px) {
              #wrapper .service_area > .inner .col2 .txt_area dl {
                margin-bottom: 25px; } }
            #wrapper .service_area > .inner .col2 .txt_area dl dt {
              font-size: 22px;
              font-weight: bold;
              margin-bottom: 35px; }
              @media screen and (max-width: 768px) {
                #wrapper .service_area > .inner .col2 .txt_area dl dt {
                  font-size: 18px;
                  margin-bottom: 20px; } }
            #wrapper .service_area > .inner .col2 .txt_area dl dd {
              font-size: 16px; }
              @media screen and (max-width: 768px) {
                #wrapper .service_area > .inner .col2 .txt_area dl dd {
                  font-size: 14px; } }
          #wrapper .service_area > .inner .col2 .txt_area p.btn a {
            display: flex;
            width: 290px;
            height: 70px;
            background: #fff;
            align-items: center;
            justify-content: center;
            text-align: center;
            position: relative;
            border-radius: 50px;
            font-size: 24px;
            font-weight: bold;
            line-height: 1;
            text-decoration: none;
            transition: background 0.3s, color 0.3s;
            -webkit-transition: -webkit-transform background 0.3s, color 0.3s;
            border: 4px solid #8fc31f;
            color: #8fc31f; }
            @media screen and (max-width: 768px) {
              #wrapper .service_area > .inner .col2 .txt_area p.btn a {
                width: 250px;
                height: 50px;
                font-size: 18px;
                border-width: 2px;
                margin: 0 auto; } }
            #wrapper .service_area > .inner .col2 .txt_area p.btn a:hover {
              background: #8fc31f;
              color: #fff; }
              #wrapper .service_area > .inner .col2 .txt_area p.btn a:hover i {
                color: #fff; }
            #wrapper .service_area > .inner .col2 .txt_area p.btn a i {
              font-size: 20px;
              position: absolute;
              color: #8fc31f;
              top: 50%;
              right: 30px;
              transform: translate(0, -50%);
              transition: color 0.3s;
              -webkit-transition: -webkit-transform color 0.3s; }
              @media screen and (max-width: 768px) {
                #wrapper .service_area > .inner .col2 .txt_area p.btn a i {
                  font-size: 14px;
                  right: 15px; } }
  #wrapper .sdgs_area {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto 200px; }
    @media screen and (max-width: 768px) {
      #wrapper .sdgs_area {
        margin-bottom: 100px;
        padding: 0 5%; } }
    @media screen and (max-width: 768px) {
      #wrapper .sdgs_area h2 span.en {
        width: 320px; } }
    #wrapper .sdgs_area .w800 p.lead {
      text-align: center;
      font-size: 16px;
      margin-bottom: 30px; }
      @media screen and (max-width: 768px) {
        #wrapper .sdgs_area .w800 p.lead {
          font-size: 14px;
          margin-bottom: 20px; } }
    #wrapper .sdgs_area .w800 .goal_area {
      display: flex;
      align-items: center;
      padding: 40px 80px;
      border: 1px solid #ccc;
      border-radius: 100px;
      margin-bottom: 40px; }
      @media screen and (max-width: 768px) {
        #wrapper .sdgs_area .w800 .goal_area {
          display: block;
          padding: 20px 5%;
          margin-bottom: 25px;
          border-radius: 20px; } }
      #wrapper .sdgs_area .w800 .goal_area .icon {
        width: 154px; }
        @media screen and (max-width: 768px) {
          #wrapper .sdgs_area .w800 .goal_area .icon {
            width: 135px;
            margin: 0 auto; } }
      #wrapper .sdgs_area .w800 .goal_area p.txt {
        width: calc(100% - 154px);
        font-size: 16px;
        text-align: left;
        padding-left: 40px; }
        @media screen and (max-width: 768px) {
          #wrapper .sdgs_area .w800 .goal_area p.txt {
            width: 100%;
            margin-top: 20px;
            font-size: 14px;
            padding: 0; } }
    #wrapper .sdgs_area .w800 .plan_area ul li {
      width: 100%;
      padding-left: 10px;
      display: flex;
      align-items: center; }
      @media screen and (max-width: 768px) {
        #wrapper .sdgs_area .w800 .plan_area ul li {
          display: block;
          padding: 0; } }
      #wrapper .sdgs_area .w800 .plan_area ul li:not(:last-child) {
        margin-bottom: 45px; }
        @media screen and (max-width: 768px) {
          #wrapper .sdgs_area .w800 .plan_area ul li:not(:last-child) {
            margin-bottom: 25px; } }
      #wrapper .sdgs_area .w800 .plan_area ul li .icon {
        width: 150px;
        text-align: center; }
        @media screen and (max-width: 768px) {
          #wrapper .sdgs_area .w800 .plan_area ul li .icon {
            margin: 0 auto 20px; } }
      #wrapper .sdgs_area .w800 .plan_area ul li dl {
        width: calc(100% - 150px);
        padding-left: 40px; }
        @media screen and (max-width: 768px) {
          #wrapper .sdgs_area .w800 .plan_area ul li dl {
            width: 100%;
            padding: 0; } }
        #wrapper .sdgs_area .w800 .plan_area ul li dl dt {
          font-size: 20px;
          font-weight: bold;
          margin-bottom: 15px; }
          @media screen and (max-width: 768px) {
            #wrapper .sdgs_area .w800 .plan_area ul li dl dt {
              font-size: 16px;
              margin-bottom: 10px; } }
          #wrapper .sdgs_area .w800 .plan_area ul li dl dt.no8 {
            color: #970a31; }
          #wrapper .sdgs_area .w800 .plan_area ul li dl dt.no10 {
            color: #dc097b; }
        #wrapper .sdgs_area .w800 .plan_area ul li dl dd {
          font-size: 16px; }
          @media screen and (max-width: 768px) {
            #wrapper .sdgs_area .w800 .plan_area ul li dl dd {
              font-size: 14px; } }
          #wrapper .sdgs_area .w800 .plan_area ul li dl dd span.color_8 {
            color: #970a31; }
          #wrapper .sdgs_area .w800 .plan_area ul li dl dd span.color_10 {
            color: #dc097b; }
          #wrapper .sdgs_area .w800 .plan_area ul li dl dd span.score {
            font-weight: bold; }

@keyframes txt_show {
  0% {
    width: 0; }
  100% {
    width: 100%; } }
@keyframes txt_hide {
  0% {
    width: 100%; }
  100% {
    width: 0; } }
@keyframes fadeup {
  0% {
    transform: translateY(100%);
    opacity: 0; }
  100% {
    transform: translateY(0);
    opacity: 1; } }

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