/* media query */
@import url("https://fonts.googleapis.com/css2?family=Harmattan:wght@700&family=MonteCarlo&display=swap");
body #wrapper .intro {
  margin-top: 70px; }
  @media all and (max-width: 480px) {
    body #wrapper .intro {
      margin-top: 60px; } }
  body #wrapper .intro .title {
    position: relative;
    max-width: 80%;
    margin: auto; }
    @media all and (max-width: 1200px) {
      body #wrapper .intro .title {
        max-width: 90%; } }
    @media all and (max-width: 480px) {
      body #wrapper .intro .title {
        max-width: 100%; } }
    body #wrapper .intro .title .titleImage {
      position: relative;
      max-height: 80%;
      margin: auto; }
      @media all and (max-width: 480px) {
        body #wrapper .intro .title .titleImage {
          max-width: 100%; } }
      body #wrapper .intro .title .titleImage h2 {
        text-align: center; }
        body #wrapper .intro .title .titleImage h2 img {
          max-height: 130px;
          height: 100%; }
          @media all and (max-width: 1024px) {
            body #wrapper .intro .title .titleImage h2 img {
              max-height: none;
              max-width: 80%; } }
      body #wrapper .intro .title .titleImage p {
        position: absolute; }
        body #wrapper .intro .title .titleImage p.left {
          left: 90px;
          top: -10px; }
          @media all and (max-width: 1024px) {
            body #wrapper .intro .title .titleImage p.left {
              left: 0;
              top: 0; } }
          @media all and (max-width: 480px) {
            body #wrapper .intro .title .titleImage p.left {
              left: -5px;
              top: -15px; } }
          body #wrapper .intro .title .titleImage p.left img {
            max-width: 60px; }
            @media all and (max-width: 1024px) {
              body #wrapper .intro .title .titleImage p.left img {
                max-width: 50px; } }
            @media all and (max-width: 480px) {
              body #wrapper .intro .title .titleImage p.left img {
                max-width: 35px; } }
    body #wrapper .intro .title p.lead {
      margin: 50px 0;
      font-size: 1.2em;
      text-align: center; }
      @media all and (max-width: 480px) {
        body #wrapper .intro .title p.lead {
          margin: 50px 0 30px;
          font-size: 1em;
          text-align: left; } }
body #wrapper .inner .headline {
  text-align: center; }
  @media all and (max-width: 480px) {
    body #wrapper .inner .headline {
      margin-top: 20px; } }
  body #wrapper .inner .headline img {
    max-width: 400px; }
    @media all and (max-width: 480px) {
      body #wrapper .inner .headline img {
        max-width: 60%; } }
body #wrapper .inner p.headline_large {
  border: 6px solid #5BB43B;
  font-weight: bold;
  color: #5BB43B;
  margin: auto;
  padding: 10px;
  line-height: 1.6; }
  @media all and (max-width: 480px) {
    body #wrapper .inner p.headline_large {
      border: 4px solid #5BB43B;
      padding: 5px; } }
body #wrapper .inner p.circleList {
  font-size: 1.8em; }
  @media all and (max-width: 480px) {
    body #wrapper .inner p.circleList {
      font-size: 1.6em; } }
  @media all and (max-width: 375px) {
    body #wrapper .inner p.circleList {
      font-size: 6vw; } }
  body #wrapper .inner p.circleList + p {
    text-align: left; }
body #wrapper .worksArea1 {
  font-size: 1.1em;
  text-align: center; }
  @media all and (max-width: 480px) {
    body #wrapper .worksArea1 {
      font-size: 1em; } }
  body #wrapper .worksArea1 .w1100.pc_column {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; }
    @media all and (max-width: 950px) {
      body #wrapper .worksArea1 .w1100.pc_column {
        justify-content: center; } }
    @media all and (max-width: 640px) {
      body #wrapper .worksArea1 .w1100.pc_column {
        display: block; } }
    body #wrapper .worksArea1 .w1100.pc_column > div {
      width: 30%; }
      @media all and (max-width: 950px) {
        body #wrapper .worksArea1 .w1100.pc_column > div {
          width: 45%; } }
      @media all and (max-width: 640px) {
        body #wrapper .worksArea1 .w1100.pc_column > div {
          width: 100%; } }
      @media all and (max-width: 950px) {
        body #wrapper .worksArea1 .w1100.pc_column > div:first-child {
          margin-right: 3%; } }
      @media all and (max-width: 640px) {
        body #wrapper .worksArea1 .w1100.pc_column > div:first-child {
          margin-right: 0; } }
      body #wrapper .worksArea1 .w1100.pc_column > div:not(:nth-child(2)) h3 {
        padding-top: 15px; }
        @media all and (max-width: 480px) {
          body #wrapper .worksArea1 .w1100.pc_column > div:not(:nth-child(2)) h3 {
            padding-top: 0; } }
      body #wrapper .worksArea1 .w1100.pc_column > div h3 {
        font-size: 1em;
        line-height: 1.5; }
        @media all and (max-width: 1024px) {
          body #wrapper .worksArea1 .w1100.pc_column > div h3 {
            font-size: 0.8em; } }
        @media all and (max-width: 480px) {
          body #wrapper .worksArea1 .w1100.pc_column > div h3 {
            font-size: 1.1em; } }
        @media all and (max-width: 320px) {
          body #wrapper .worksArea1 .w1100.pc_column > div h3 {
            font-size: 1em; } }
  body #wrapper .worksArea1 .headline_large {
    font-size: 1.6em; }
    @media all and (max-width: 480px) {
      body #wrapper .worksArea1 .headline_large {
        font-size: 1.2em; } }
    body #wrapper .worksArea1 .headline_large + p {
      margin: 50px 0; }
      @media all and (max-width: 480px) {
        body #wrapper .worksArea1 .headline_large + p {
          margin: 20px 0; } }
      @media all and (max-width: 480px) {
        body #wrapper .worksArea1 .headline_large + p img {
          max-width: 90%;
          margin: auto; } }
      body #wrapper .worksArea1 .headline_large + p + p {
        font-size: 1.3em; }
        @media all and (max-width: 480px) {
          body #wrapper .worksArea1 .headline_large + p + p {
            font-size: 1em; } }
  body #wrapper .worksArea1 .headline_small {
    font-weight: bold;
    color: #5BB43B;
    font-size: 1.3em;
    margin-top: 50px; }
    @media all and (max-width: 1200px) {
      body #wrapper .worksArea1 .headline_small {
        font-size: 1em; } }
    @media all and (max-width: 480px) {
      body #wrapper .worksArea1 .headline_small {
        font-size: 1.3em; } }
  body #wrapper .worksArea1 ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 20px auto 0;
    max-width: 800px; }
    body #wrapper .worksArea1 ul li {
      position: relative;
      width: 47%;
      border: 10px solid #BDDA8C;
      border-radius: 5px;
      padding: 40px 5px;
      box-sizing: border-box;
      min-height: 200px; }
      @media all and (max-width: 1024px) {
        body #wrapper .worksArea1 ul li {
          min-height: 180px; } }
      @media all and (max-width: 320px) {
        body #wrapper .worksArea1 ul li {
          width: 48%;
          min-height: 160px; } }
      body #wrapper .worksArea1 ul li::after {
        position: absolute;
        content: "";
        top: -20px;
        left: 50%;
        transform: translateX(-50%);
        background-image: url(../images/flame.svg);
        background-size: cover;
        width: 70px;
        height: 22px; }
        @media all and (max-width: 480px) {
          body #wrapper .worksArea1 ul li::after {
            top: -10px;
            width: 50px;
            height: 16px; } }
    body #wrapper .worksArea1 ul h3 {
      font-size: 1.2em;
      font-weight: bold;
      letter-spacing: 0; }
      @media all and (max-width: 480px) {
        body #wrapper .worksArea1 ul h3 {
          font-size: 1.1em;
          line-height: 150%; } }
      @media all and (max-width: 320px) {
        body #wrapper .worksArea1 ul h3 {
          font-size: 4vw; } }
      body #wrapper .worksArea1 ul h3 span {
        display: block;
        font-size: 67%; }
body #wrapper .worksArea2 {
  font-size: 1.1em;
  text-align: center;
  margin-top: 60px; }
  @media all and (max-width: 480px) {
    body #wrapper .worksArea2 {
      font-size: 1em;
      margin-top: 30px; } }
  body #wrapper .worksArea2 .headline_large {
    font-size: 1.5em; }
    @media all and (max-width: 480px) {
      body #wrapper .worksArea2 .headline_large {
        font-size: 1.6em; } }
  body #wrapper .worksArea2 .w1000 {
    margin-bottom: 50px; }
    @media all and (max-width: 480px) {
      body #wrapper .worksArea2 .w1000 {
        margin-bottom: 0; } }
  @media all and (max-width: 480px) {
    body #wrapper .worksArea2 .w800 img.sp {
      margin-bottom: 20px; } }
  body #wrapper .worksArea2 .shadowBox {
    margin: 20px auto 60px; }
    @media all and (max-width: 480px) {
      body #wrapper .worksArea2 .shadowBox {
        margin: 20px auto 0; } }
    body #wrapper .worksArea2 .shadowBox h3 {
      display: inline-block;
      line-height: 140%;
      border-bottom: 5px solid #5BB43B;
      margin-bottom: 15px; }
  body #wrapper .worksArea2 .worksList {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 auto 50px;
    text-align: center; }
    @media all and (max-width: 480px) {
      body #wrapper .worksArea2 .worksList {
        margin: 0 auto 30px; } }
    body #wrapper .worksArea2 .worksList li {
      width: 48%; }
      body #wrapper .worksArea2 .worksList li:nth-child(odd) {
        position: relative; }
        body #wrapper .worksArea2 .worksList li:nth-child(odd)::before {
          position: absolute;
          content: "";
          background: url(../../common/images/line_yoko.svg);
          height: 4px;
          right: -83.5px;
          width: 145px; }
          @media all and (max-width: 480px) {
            body #wrapper .worksArea2 .worksList li:nth-child(odd)::before {
              background: url(../../common/images/line_yoko_sp.svg);
              height: 2px;
              right: -24.5px;
              width: 40px; } }
        body #wrapper .worksArea2 .worksList li:nth-child(odd)::after {
          position: absolute;
          content: "";
          background: url(../../common/images/line.svg);
          width: 4px;
          top: 0;
          right: -19px;
          height: 100%; }
          @media all and (max-width: 480px) {
            body #wrapper .worksArea2 .worksList li:nth-child(odd)::after {
              background: url(../../common/images/line_sp.svg);
              width: 2px; } }
          @media all and (max-width: 480px) {
            body #wrapper .worksArea2 .worksList li:nth-child(odd)::after {
              right: -8px;
              width: 2px; } }
      body #wrapper .worksArea2 .worksList li:first-child::before {
        top: 13.4%; }
      body #wrapper .worksArea2 .worksList li:nth-child(2) dl dt {
        margin-bottom: 55px; }
        @media all and (max-width: 480px) {
          body #wrapper .worksArea2 .worksList li:nth-child(2) dl dt {
            margin-bottom: 33px; } }
      body #wrapper .worksArea2 .worksList li:nth-child(3)::before {
        top: 15.4%; }
        @media all and (max-width: 480px) {
          body #wrapper .worksArea2 .worksList li:nth-child(3)::before {
            top: 13.4%; } }
      body #wrapper .worksArea2 .worksList li:nth-child(5)::before {
        top: 22%; }
        @media all and (max-width: 480px) {
          body #wrapper .worksArea2 .worksList li:nth-child(5)::before {
            top: 17%; } }
      body #wrapper .worksArea2 .worksList li dl dt {
        margin: 50px 0 20px;
        margin-bottom: 20px; }
        @media all and (max-width: 480px) {
          body #wrapper .worksArea2 .worksList li dl dt {
            margin: 20px 0; } }
        body #wrapper .worksArea2 .worksList li dl dt img.w50 {
          max-width: 50%; }
          @media all and (max-width: 480px) {
            body #wrapper .worksArea2 .worksList li dl dt img.w50 {
              max-width: 60%; } }
        body #wrapper .worksArea2 .worksList li dl dt img.w60 {
          max-width: 60%; }
          @media all and (max-width: 480px) {
            body #wrapper .worksArea2 .worksList li dl dt img.w60 {
              max-width: 70%; } }
        body #wrapper .worksArea2 .worksList li dl dt img.w65 {
          max-width: 65%; }
          @media all and (max-width: 480px) {
            body #wrapper .worksArea2 .worksList li dl dt img.w65 {
              max-width: 75%; } }
        body #wrapper .worksArea2 .worksList li dl dt img.w75 {
          max-width: 75%; }
          @media all and (max-width: 480px) {
            body #wrapper .worksArea2 .worksList li dl dt img.w75 {
              max-width: 85%; } }
        body #wrapper .worksArea2 .worksList li dl dt img.w80 {
          max-width: 80%; }
          @media all and (max-width: 480px) {
            body #wrapper .worksArea2 .worksList li dl dt img.w80 {
              max-width: 90%; } }
      body #wrapper .worksArea2 .worksList li dl dd {
        font-size: 1.4em; }
        @media all and (max-width: 480px) {
          body #wrapper .worksArea2 .worksList li dl dd {
            text-align: left;
            font-size: 3.3vw;
            letter-spacing: 0;
            padding-left: 1em;
            text-indent: -1em; } }
        body #wrapper .worksArea2 .worksList li dl dd span {
          font-size: 90%;
          margin-left: 5px; }
          @media all and (max-width: 480px) {
            body #wrapper .worksArea2 .worksList li dl dd span {
              font-size: 100%;
              margin-left: 0; } }
    body #wrapper .worksArea2 .worksList.second li:first-child::before {
      top: 16.4%; }
  body #wrapper .worksArea2 .linkArea {
    padding: 0 0 50px; }
    @media all and (max-width: 480px) {
      body #wrapper .worksArea2 .linkArea {
        padding: 0 0 30px; } }
  body #wrapper .worksArea2 p.consulting_img {
    margin: 50px 0 0; }
    @media all and (max-width: 480px) {
      body #wrapper .worksArea2 p.consulting_img {
        margin: 20px 0 0; } }
    body #wrapper .worksArea2 p.consulting_img img {
      max-width: 90%; }
      @media all and (max-width: 480px) {
        body #wrapper .worksArea2 p.consulting_img img {
          max-width: 100%; } }
body #wrapper .worksArea3 {
  font-size: 1.1em;
  margin-top: 60px; }
  @media all and (max-width: 480px) {
    body #wrapper .worksArea3 {
      font-size: 1em;
      margin-top: 30px; } }
  body #wrapper .worksArea3 p.graph {
    text-align: center;
    margin-top: 30px; }
    body #wrapper .worksArea3 p.graph img {
      max-width: 450px; }
      @media all and (max-width: 480px) {
        body #wrapper .worksArea3 p.graph img {
          max-width: 90%; } }
  body #wrapper .worksArea3 p.balloon {
    position: relative;
    background: #5BB43B;
    color: #fff;
    text-align: center;
    padding: 8px;
    font-size: 1.5em;
    margin: 50px 0 40px;
    border-radius: 5px; }
    @media all and (max-width: 480px) {
      body #wrapper .worksArea3 p.balloon {
        font-size: 1.1em;
        margin: 30px 0;
        line-height: 150%; } }
    body #wrapper .worksArea3 p.balloon::after {
      position: absolute;
      content: "";
      bottom: -25px;
      right: 30px;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 30px 30px 0 0;
      border-color: #5BB43B transparent transparent transparent; }
      @media all and (max-width: 480px) {
        body #wrapper .worksArea3 p.balloon::after {
          right: 20px; } }
  body #wrapper .worksArea3 p.reverse {
    background: #BDDA8C;
    color: #231815; }
    body #wrapper .worksArea3 p.reverse::after {
      right: auto;
      left: 30px;
      border-width: 0 30px 30px 0;
      border-color: transparent #BDDA8C transparent transparent; }
      @media all and (max-width: 480px) {
        body #wrapper .worksArea3 p.reverse::after {
          left: 20px; } }
  body #wrapper .worksArea3 .box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 15px auto 0 0;
    max-width: 500px; }
    @media all and (max-width: 480px) {
      body #wrapper .worksArea3 .box {
        margin: 15px auto 0; } }
    body #wrapper .worksArea3 .box li {
      color: #5BB43B; }
      @media all and (max-width: 480px) {
        body #wrapper .worksArea3 .box li {
          font-size: 3vw;
          padding-left: 1em;
          text-indent: -1em;
          box-sizing: border-box; } }
      body #wrapper .worksArea3 .box li:nth-child(odd) {
        width: 40%; }
        @media all and (max-width: 480px) {
          body #wrapper .worksArea3 .box li:nth-child(odd) {
            width: 36%; } }
      body #wrapper .worksArea3 .box li:nth-child(even) {
        width: 60%; }
        @media all and (max-width: 480px) {
          body #wrapper .worksArea3 .box li:nth-child(even) {
            width: 64%; } }