/* media query */
@import url("https://fonts.googleapis.com/css2?family=Harmattan:wght@700&family=MonteCarlo&display=swap");
body #wrapper .mainvisual {
  background: linear-gradient(180deg, #18B3FF 0%, #18B3FF 55%, #5BB43B 55%, #5BB43B 100%);
  color: #fff;
  margin-top: 70px; }
  @media all and (max-width: 786px) {
    body #wrapper .mainvisual {
      background: linear-gradient(180deg, #18B3FF 0%, #18B3FF 35%, #5BB43B 35%, #5BB43B 100%); } }
  @media all and (max-width: 480px) {
    body #wrapper .mainvisual {
      margin-top: 60px; } }
  body #wrapper .mainvisual .title {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1200px;
    margin: auto;
    padding-top: 50px; }
    @media all and (max-width: 1200px) {
      body #wrapper .mainvisual .title {
        width: 95%;
        padding: 20px; } }
    @media all and (max-width: 480px) {
      body #wrapper .mainvisual .title {
        width: 90%; } }
    body #wrapper .mainvisual .title img {
      max-width: 650px; }
      @media all and (max-width: 786px) {
        body #wrapper .mainvisual .title img {
          max-width: 450px; } }
      @media all and (max-width: 480px) {
        body #wrapper .mainvisual .title img {
          width: 90%; } }
  body #wrapper .mainvisual .amimeArea {
    position: relative;
    margin-top: -350px; }
    @media all and (max-width: 1300px) {
      body #wrapper .mainvisual .amimeArea {
        margin-top: -300px; } }
    @media all and (max-width: 1024px) {
      body #wrapper .mainvisual .amimeArea {
        margin-top: -240px; } }
    body #wrapper .mainvisual .amimeArea div {
      position: absolute;
      width: 100%;
      height: 100%; }
      body #wrapper .mainvisual .amimeArea div p {
        position: absolute; }
        body #wrapper .mainvisual .amimeArea div p.balloon1 {
          width: 8%;
          top: -1%;
          right: 23%; }
          @media all and (max-width: 786px) {
            body #wrapper .mainvisual .amimeArea div p.balloon1 {
              top: 15%; } }
          @media all and (max-width: 480px) {
            body #wrapper .mainvisual .amimeArea div p.balloon1 {
              top: 27%;
              right: 22%; } }
          @media all and (max-width: 320px) {
            body #wrapper .mainvisual .amimeArea div p.balloon1 {
              top: 33%; } }
        body #wrapper .mainvisual .amimeArea div p.balloon2 {
          width: 3.5%;
          top: 6%;
          right: 2.2%; }
          @media all and (max-width: 786px) {
            body #wrapper .mainvisual .amimeArea div p.balloon2 {
              top: 21%; } }
          @media all and (max-width: 480px) {
            body #wrapper .mainvisual .amimeArea div p.balloon2 {
              top: 30%; } }
          @media all and (max-width: 320px) {
            body #wrapper .mainvisual .amimeArea div p.balloon2 {
              top: 35%; } }
        body #wrapper .mainvisual .amimeArea div p.boat {
          width: 16%;
          bottom: 19.5%;
          left: 8%; }
          @media all and (max-width: 786px) {
            body #wrapper .mainvisual .amimeArea div p.boat {
              bottom: 16.5%; } }
          @media all and (max-width: 480px) {
            body #wrapper .mainvisual .amimeArea div p.boat {
              bottom: 14%; } }
          @media all and (max-width: 320px) {
            body #wrapper .mainvisual .amimeArea div p.boat {
              bottom: 13%; } }
        body #wrapper .mainvisual .amimeArea div p.entry_btn_top {
          width: 20%;
          bottom: 20%;
          right: 11%; }
          @media all and (max-width: 786px) {
            body #wrapper .mainvisual .amimeArea div p.entry_btn_top {
              bottom: 17%; } }
          @media all and (max-width: 480px) {
            body #wrapper .mainvisual .amimeArea div p.entry_btn_top {
              width: 22%;
              bottom: 14%;
              right: 9%; } }
          body #wrapper .mainvisual .amimeArea div p.entry_btn_top a {
            display: block; }
            body #wrapper .mainvisual .amimeArea div p.entry_btn_top a:hover {
              opacity: 1; }
    @media all and (max-width: 786px) {
      body #wrapper .mainvisual .amimeArea .bg {
        padding-top: 150px; } }
  body #wrapper .mainvisual .lead {
    position: relative;
    text-align: center;
    width: 95%;
    margin: -250px auto 0; }
    @media all and (max-width: 1024px) {
      body #wrapper .mainvisual .lead {
        margin: -100px auto 0; } }
    @media all and (max-width: 480px) {
      body #wrapper .mainvisual .lead {
        margin: 0 auto; } }
    @media all and (max-width: 480px) {
      body #wrapper .mainvisual .lead p.arrow {
        margin-top: -50px; } }
    body #wrapper .mainvisual .lead p.arrow img {
      max-width: 60px; }
      @media all and (max-width: 480px) {
        body #wrapper .mainvisual .lead p.arrow img {
          max-width: 50px; } }
    body #wrapper .mainvisual .lead p.copy {
      margin: 40px 0 50px !important; }
      @media all and (max-width: 480px) {
        body #wrapper .mainvisual .lead p.copy {
          margin: 20px 0 0 !important; } }
      body #wrapper .mainvisual .lead p.copy img {
        max-width: 700px; }
        @media all and (max-width: 480px) {
          body #wrapper .mainvisual .lead p.copy img {
            max-width: 95%; } }
    body #wrapper .mainvisual .lead p:not(.arrow), body #wrapper .mainvisual .lead p p:not(.copy) {
      margin-top: 35px;
      font-size: 1.5em; }
      @media all and (max-width: 786px) {
        body #wrapper .mainvisual .lead p:not(.arrow), body #wrapper .mainvisual .lead p p:not(.copy) {
          font-size: 1em; } }
      @media all and (max-width: 480px) {
        body #wrapper .mainvisual .lead p:not(.arrow), body #wrapper .mainvisual .lead p p:not(.copy) {
          margin-top: 20px;
          font-size: 4vw; } }
body #wrapper .btnArea {
  background: #5BB43B;
  text-align: center;
  padding-top: 50px; }
  body #wrapper .btnArea ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; }
    @media all and (max-width: 1000px) {
      body #wrapper .btnArea ul {
        display: block;
        max-width: 80%;
        margin: auto; } }
    @media all and (max-width: 480px) {
      body #wrapper .btnArea ul {
        max-width: 100%; } }
    body #wrapper .btnArea ul li {
      position: relative;
      width: 48%;
      background: #fff;
      border-radius: 50%;
      padding: 80px 0;
      margin-bottom: 80px; }
      @media all and (max-width: 1024px) {
        body #wrapper .btnArea ul li {
          padding: 50px 0; } }
      @media all and (max-width: 1000px) {
        body #wrapper .btnArea ul li {
          width: 100%;
          padding: 100px 0 150px; } }
      @media all and (max-width: 786px) {
        body #wrapper .btnArea ul li {
          padding: 110px 0; } }
      @media all and (max-width: 480px) {
        body #wrapper .btnArea ul li {
          padding: 20px 0 40px;
          margin-bottom: 20px; } }
      @media all and (max-width: 375px) {
        body #wrapper .btnArea ul li:first-child {
          padding: 6px 0 30px; } }
      @media all and (max-width: 480px) {
        body #wrapper .btnArea ul li:nth-child(2) {
          padding: 33px 0 40px; } }
      @media all and (max-width: 375px) {
        body #wrapper .btnArea ul li:nth-child(2) {
          padding: 18px 0 40px; } }
      @media all and (max-width: 320px) {
        body #wrapper .btnArea ul li:nth-child(2) {
          padding: 10px 0 25px; } }
      body #wrapper .btnArea ul li:nth-child(2) h2 + p {
        margin: 63px auto 0; }
        @media all and (max-width: 480px) {
          body #wrapper .btnArea ul li:nth-child(2) h2 + p {
            margin: 30px auto 0; } }
      body #wrapper .btnArea ul li:nth-child(3), body #wrapper .btnArea ul li:nth-child(4) {
        padding: 100px 0; }
        @media all and (max-width: 1024px) {
          body #wrapper .btnArea ul li:nth-child(3), body #wrapper .btnArea ul li:nth-child(4) {
            padding: 90px 0; } }
        @media all and (max-width: 1000px) {
          body #wrapper .btnArea ul li:nth-child(3), body #wrapper .btnArea ul li:nth-child(4) {
            padding: 180px 0; } }
        @media all and (max-width: 786px) {
          body #wrapper .btnArea ul li:nth-child(3), body #wrapper .btnArea ul li:nth-child(4) {
            padding: 135px 0; } }
        @media all and (max-width: 480px) {
          body #wrapper .btnArea ul li:nth-child(3), body #wrapper .btnArea ul li:nth-child(4) {
            padding: 60px 0; } }
        @media all and (max-width: 375px) {
          body #wrapper .btnArea ul li:nth-child(3), body #wrapper .btnArea ul li:nth-child(4) {
            padding: 50px 0; } }
      @media all and (max-width: 786px) {
        body #wrapper .btnArea ul li:last-child {
          margin-bottom: 0; } }
      @media all and (max-width: 480px) {
        body #wrapper .btnArea ul li h2 {
          padding-top: 40px; } }
      body #wrapper .btnArea ul li h2 + p {
        color: #000;
        width: 90%;
        margin: 50px auto 0;
        font-size: 1.3em; }
        @media all and (max-width: 1024px) {
          body #wrapper .btnArea ul li h2 + p {
            font-size: 1em; } }
        @media all and (max-width: 480px) {
          body #wrapper .btnArea ul li h2 + p {
            margin: 30px auto 0;
            font-size: 3.5vw; } }
        @media all and (max-width: 360px) {
          body #wrapper .btnArea ul li h2 + p {
            font-size: 3.4vw; } }
      body #wrapper .btnArea ul li a {
        display: block;
        margin-top: 50px; }
        @media all and (max-width: 1024px) {
          body #wrapper .btnArea ul li a {
            margin-top: 30px; } }
        @media all and (max-width: 320px) {
          body #wrapper .btnArea ul li a {
            margin-top: 10px; } }
        body #wrapper .btnArea ul li a img {
          max-width: 300px; }
          @media all and (max-width: 480px) {
            body #wrapper .btnArea ul li a img {
              max-width: 50%; } }
      body #wrapper .btnArea ul li p.illust {
        position: absolute; }
      body #wrapper .btnArea ul li.aboutus h2 img {
        max-width: 270px; }
        @media all and (max-width: 1200px) {
          body #wrapper .btnArea ul li.aboutus h2 img {
            max-width: 50%; } }
        @media all and (max-width: 1024px) {
          body #wrapper .btnArea ul li.aboutus h2 img {
            max-width: 40%; } }
        @media all and (max-width: 480px) {
          body #wrapper .btnArea ul li.aboutus h2 img {
            max-width: 50%; } }
      body #wrapper .btnArea ul li.aboutus p.illust {
        top: 80px;
        left: 65px; }
        @media all and (max-width: 1024px) {
          body #wrapper .btnArea ul li.aboutus p.illust {
            top: 50px;
            left: 35px; } }
        @media all and (max-width: 1000px) {
          body #wrapper .btnArea ul li.aboutus p.illust {
            top: 100px;
            left: 90px; } }
        @media all and (max-width: 480px) {
          body #wrapper .btnArea ul li.aboutus p.illust {
            top: 50px;
            left: 35px; } }
        @media all and (max-width: 360px) {
          body #wrapper .btnArea ul li.aboutus p.illust {
            top: 40px;
            left: 30px; } }
        body #wrapper .btnArea ul li.aboutus p.illust img {
          max-width: 55px; }
          @media all and (max-width: 1024px) {
            body #wrapper .btnArea ul li.aboutus p.illust img {
              max-width: 45px; } }
          @media all and (max-width: 360px) {
            body #wrapper .btnArea ul li.aboutus p.illust img {
              max-width: 40px; } }
      body #wrapper .btnArea ul li.job h2 img {
        max-width: 280px; }
        @media all and (max-width: 1200px) {
          body #wrapper .btnArea ul li.job h2 img {
            max-width: 50%; } }
        @media all and (max-width: 1024px) {
          body #wrapper .btnArea ul li.job h2 img {
            max-width: 40%; } }
        @media all and (max-width: 480px) {
          body #wrapper .btnArea ul li.job h2 img {
            max-width: 50%; } }
      body #wrapper .btnArea ul li.job p.illust {
        left: 60px;
        top: 55px; }
        @media all and (max-width: 1024px) {
          body #wrapper .btnArea ul li.job p.illust {
            top: 40px; } }
        @media all and (max-width: 1000px) {
          body #wrapper .btnArea ul li.job p.illust {
            top: 75px;
            left: 80px; } }
        @media all and (max-width: 480px) {
          body #wrapper .btnArea ul li.job p.illust {
            left: auto;
            right: 20px;
            top: 20px; } }
        body #wrapper .btnArea ul li.job p.illust img {
          max-width: 70px; }
          @media all and (max-width: 1024px) {
            body #wrapper .btnArea ul li.job p.illust img {
              max-width: 60px; } }
          @media all and (max-width: 320px) {
            body #wrapper .btnArea ul li.job p.illust img {
              max-width: 55px; } }
      body #wrapper .btnArea ul li.job a {
        margin-top: 60px; }
        @media all and (max-width: 1024px) {
          body #wrapper .btnArea ul li.job a {
            margin-top: 35px; } }
        @media all and (max-width: 480px) {
          body #wrapper .btnArea ul li.job a {
            margin-top: 30px; } }
      @media all and (max-width: 480px) {
        body #wrapper .btnArea ul li.career h2 {
          padding-top: 20px; } }
      body #wrapper .btnArea ul li.career h2 img {
        max-width: 280px; }
        @media all and (max-width: 1200px) {
          body #wrapper .btnArea ul li.career h2 img {
            max-width: 50%; } }
        @media all and (max-width: 1024px) {
          body #wrapper .btnArea ul li.career h2 img {
            max-width: 40%; } }
        @media all and (max-width: 480px) {
          body #wrapper .btnArea ul li.career h2 img {
            max-width: 50%; } }
      body #wrapper .btnArea ul li.career p.illust.left {
        left: 70px; }
        @media all and (max-width: 1024px) {
          body #wrapper .btnArea ul li.career p.illust.left {
            top: 75px; } }
        @media all and (max-width: 1000px) {
          body #wrapper .btnArea ul li.career p.illust.left {
            top: 95px; } }
        @media all and (max-width: 480px) {
          body #wrapper .btnArea ul li.career p.illust.left {
            left: 30px;
            top: 50px; } }
        @media all and (max-width: 320px) {
          body #wrapper .btnArea ul li.career p.illust.left {
            left: 20px; } }
        body #wrapper .btnArea ul li.career p.illust.left img {
          max-width: 50px; }
          @media all and (max-width: 480px) {
            body #wrapper .btnArea ul li.career p.illust.left img {
              max-width: 40px; } }
      body #wrapper .btnArea ul li.career p.illust.right {
        top: 75px;
        right: 70px; }
        @media all and (max-width: 1024px) {
          body #wrapper .btnArea ul li.career p.illust.right {
            top: 55px; } }
        @media all and (max-width: 1000px) {
          body #wrapper .btnArea ul li.career p.illust.right {
            top: 75px; } }
        @media all and (max-width: 480px) {
          body #wrapper .btnArea ul li.career p.illust.right {
            top: 30px;
            right: 30px; } }
        @media all and (max-width: 320px) {
          body #wrapper .btnArea ul li.career p.illust.right {
            right: 20px; } }
        body #wrapper .btnArea ul li.career p.illust.right img {
          max-width: 55px; }
          @media all and (max-width: 480px) {
            body #wrapper .btnArea ul li.career p.illust.right img {
              max-width: 45px; } }
      @media all and (max-width: 480px) {
        body #wrapper .btnArea ul li.interview h2 {
          padding-top: 20px; } }
      body #wrapper .btnArea ul li.interview h2 img {
        max-width: 350px; }
        @media all and (max-width: 1200px) {
          body #wrapper .btnArea ul li.interview h2 img {
            max-width: 60%; } }
        @media all and (max-width: 1024px) {
          body #wrapper .btnArea ul li.interview h2 img {
            max-width: 55%; } }
        @media all and (max-width: 480px) {
          body #wrapper .btnArea ul li.interview h2 img {
            max-width: 65%; } }
      body #wrapper .btnArea ul li.interview p.illust.left {
        top: 60px;
        left: 15px; }
        @media all and (max-width: 480px) {
          body #wrapper .btnArea ul li.interview p.illust.left {
            top: 35px;
            left: -7px; } }
        @media all and (max-width: 320px) {
          body #wrapper .btnArea ul li.interview p.illust.left {
            left: -15px; } }
        body #wrapper .btnArea ul li.interview p.illust.left img {
          max-width: 85px; }
          @media all and (max-width: 480px) {
            body #wrapper .btnArea ul li.interview p.illust.left img {
              max-width: 65px; } }
      body #wrapper .btnArea ul li.interview p.illust.right {
        top: 75px;
        right: 55px; }
        @media all and (max-width: 480px) {
          body #wrapper .btnArea ul li.interview p.illust.right {
            top: 40px;
            right: 20px; } }
        @media all and (max-width: 320px) {
          body #wrapper .btnArea ul li.interview p.illust.right {
            right: 10px; } }
        body #wrapper .btnArea ul li.interview p.illust.right img {
          max-width: 35px; }
          @media all and (max-width: 480px) {
            body #wrapper .btnArea ul li.interview p.illust.right img {
              max-width: 30px; } }
body #wrapper .linkArea_top {
  background: #5BB43B;
  padding: 30px 0 0; }
  @media all and (max-width: 480px) {
    body #wrapper .linkArea_top {
      padding: 30px 0 0; } }
  body #wrapper .linkArea_top ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    text-align: center; }
    @media all and (max-width: 480px) {
      body #wrapper .linkArea_top ul {
        display: block; } }
    body #wrapper .linkArea_top ul li {
      position: relative;
      width: 48%; }
      @media all and (max-width: 480px) {
        body #wrapper .linkArea_top ul li {
          width: 100%;
          margin: 0 auto 20px; } }
      body #wrapper .linkArea_top ul li a {
        position: relative;
        display: block;
        padding: 15px;
        text-align: center;
        border-radius: 20px;
        transition: 0.3s;
        background: #fff;
        padding: 22px 15px; }
        body #wrapper .linkArea_top ul li a:hover {
          transform: translateY(3px); }
        @media all and (max-width: 480px) {
          body #wrapper .linkArea_top ul li a {
            padding: 10px;
            box-sizing: border-box;
            border-radius: 10px;
            margin: auto; } }
        body #wrapper .linkArea_top ul li a img.text {
          max-height: 40px;
          height: 100%; }
          @media all and (max-width: 480px) {
            body #wrapper .linkArea_top ul li a img.text {
              max-height: 25px; } }
        body #wrapper .linkArea_top ul li a::after {
          position: absolute;
          content: "";
          top: 50%;
          right: 15px;
          transform: translateY(-50%);
          background-image: url(../../common/images/arrow_g_right.svg);
          background-size: cover;
          width: 14px;
          height: 31px; }
          @media all and (max-width: 480px) {
            body #wrapper .linkArea_top ul li a::after {
              width: 10px;
              height: 22px; } }
          @media all and (max-width: 320px) {
            body #wrapper .linkArea_top ul li a::after {
              right: 5px; } }
        @media all and (max-width: 480px) {
          body #wrapper .linkArea_top ul li a {
            padding: 10px; } }
        body #wrapper .linkArea_top ul li a img {
          max-height: 35px;
          height: 100%; }
          @media all and (max-width: 480px) {
            body #wrapper .linkArea_top ul li a img {
              max-height: 25px; } }
      @media all and (max-width: 480px) {
        body #wrapper .linkArea_top ul li:last-child {
          margin-bottom: 0; } }
@media all and (max-width: 480px) {
  body #wrapper footer .bottomArea a {
    max-width: 100%; } }