@charset "UTF-8";
/* ==========================================================================
	root
========================================================================== */
:root {
  --base-pc-width:1500;
  --easeInQuad:cubic-bezier(.55, .085, .68, .53);
  --easeOutQuad:cubic-bezier(0.215, 0.61, 0.355, 1);
  --easeOutQuint:cubic-bezier(.25, .46, .45, .94);
  --easeOutSine:cubic-bezier(0.39, 0.575, 0.565, 1);
  --easeInOutQuad:cubic-bezier(0.45, 0, 0.55, 1);
  --easeInOutCubic:cubic-bezier(0.65, 0, 0.35, 1);
  --easePopUp:cubic-bezier(0.17, 0.88, 0.30, 1.28);
  --easeInCirc:cubic-bezier(0.55, 0, 1, 0.45);
  --theme-color:#d9c888;
  --theme-color02:#169a5a;
  --theme-color03:#2D96C1;
  --base-text-color:#1b140b;
  --base-border-color:#46443c;
  --base-border-color02:#e9e2c4;
  --menu-border-color01:#f36251;
  --menu-border-color02:#fead39;
  --menu-border-color03:#fead39;
  --base-color-orange:#ef8222;
  --base-color-blue:#65bac4;
  --base-color-sand:#d9c989;
  --base-color-green:#23684a;
  --base-color-green02:#62a768;
  --base-color-green03:#026736;
  --border:1px solid var(--base-border-color);
  --base-shadow:1px 1px 0 black,-1px 1px 0 black,1px -1px 0 black,-1px -1px 0 black;
  --hanten:scale(-1, 1); }

@media screen and (max-width: 800px) {
  :root {
    --fz10:clamp(10px,calc((10/400)*100vw),12px);
    --fz12:clamp(12px,calc((12/400)*100vw),14px);
    --fz13:clamp(13px,calc((13/400)*100vw),14px);
    --fz14:clamp(14px,calc((14/400)*100vw),16px);
    --fz15:clamp(15px,calc((15/400)*100vw),17px);
    --fz16:clamp(16px,calc((16/400)*100vw),18px);
    --fz17:clamp(17px,calc((17/400)*100vw),19px);
    --fz18:clamp(18px,calc((18/400)*100vw),20px);
    --fz19:clamp(19px,calc((19/400)*100vw),21px);
    --fz20:clamp(20px,calc((20/400)*100vw),22px);
    --fz21:clamp(21px,calc((21/400)*100vw),23px);
    --fz22:clamp(22px,calc((22/400)*100vw),24px);
    --fz24:clamp(24px,calc((24/400)*100vw),26px);
    --fz25:clamp(25px,calc((25/400)*100vw),27px);
    --fz26:clamp(26px,calc((26/400)*100vw),28px);
    --fz27:clamp(27px,calc((27/400)*100vw),29px);
    --fz28:clamp(28px,calc((28/400)*100vw),30px);
    --fz32:clamp(32px,calc((23/400)*100vw),35px);
    --fz35:clamp(35px,calc((25/400)*100vw),39px);
    --fz36:clamp(36px,calc((36/400)*100vw),40px);
    --fz38:clamp(38px,calc((38/400)*100vw),42px);
    --fz40:clamp(40px,calc((40/400)*100vw),44px);
    --fz45:clamp(45px,calc((45/400)*100vw),49px);
    --fz56:clamp(56px,calc((56/400)*100vw),60px); } }
@-webkit-keyframes main {
  0% {
    opacity: 0;
    -webkit-transform: scale(1);
            transform: scale(1); }
  10% {
    opacity: 1; }
  26% {
    opacity: 1; }
  34% {
    opacity: 0; }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.2);
            transform: scale(1.2); } }
@keyframes main {
  0% {
    opacity: 0;
    -webkit-transform: scale(1);
            transform: scale(1); }
  10% {
    opacity: 1; }
  26% {
    opacity: 1; }
  34% {
    opacity: 0; }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.2);
            transform: scale(1.2); } }
@-webkit-keyframes firstImageAnimation {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1); }
  26% {
    opacity: 1; }
  30% {
    opacity: 0; }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.2);
            transform: scale(1.2); } }
@keyframes firstImageAnimation {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1); }
  26% {
    opacity: 1; }
  30% {
    opacity: 0; }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.2);
            transform: scale(1.2); } }
/* ==========================================================================
	intro
========================================================================== */
.intro {
  position: relative;
  padding-top: 300px;
  z-index: 5;
  padding-bottom: 40px; }
  .intro h2 {
    font-size: clamp(48px, 3.3333333333vw, 60px);
    --lh:calc(72/50);
    position: relative;
    /*
    overflow: hidden;
    */
    line-height: calc(var(--lh)* 1em);
    padding-top: .1px;
    padding-bottom: .1px;
    text-align: center;
    margin-bottom: 75px; }
    .intro h2::before {
      content: '';
      display: block;
      height: 0;
      width: 0;
      /*
      margin-top: calc((1 - var(--lh)) * 0.5em);
      */
      margin-top: calc((1 - var(--lh))* .5em); }
    .intro h2::after {
      content: '';
      display: block;
      height: 0;
      width: 0;
      margin-bottom: calc((1 - var(--lh))* .5em); }
    .intro h2 span {
      color: var(--base-color-green); }
  .intro .c_txt {
    position: relative;
    text-align: center;
    font-size: clamp(20px, 1.4666666667vw, 26.4px);
    --lh:calc(50/22);
    position: relative;
    /*
    overflow: hidden;
    */
    line-height: calc(var(--lh)* 1em);
    padding-top: .1px;
    padding-bottom: .1px;
    margin-bottom: 105px; }
    .intro .c_txt::before {
      content: '';
      display: block;
      height: 0;
      width: 0;
      /*
      margin-top: calc((1 - var(--lh)) * 0.5em);
      */
      margin-top: calc((1 - var(--lh))* .5em); }
    .intro .c_txt::after {
      content: '';
      display: block;
      height: 0;
      width: 0;
      margin-bottom: calc((1 - var(--lh))* .5em); }
  .intro .cloud {
    display: block;
    position: absolute;
    width: 230px; }
    .intro .cloud.cloud01 {
      top: 270px;
      right: calc(50% + 570px);
      -webkit-animation: twoStepX 2s steps(2) infinite;
              animation: twoStepX 2s steps(2) infinite; }
    .intro .cloud.cloud02 {
      width: 270px;
      top: 100px;
      right: calc(50% - 70px);
      -webkit-animation: twoStepX 2s steps(2) infinite;
              animation: twoStepX 2s steps(2) infinite;
      -webkit-animation-delay: 1s;
              animation-delay: 1s; }
    .intro .cloud.cloud03 {
      top: 270px;
      left: calc(50% + 570px);
      -webkit-animation: twoStepX 2s steps(2) infinite;
              animation: twoStepX 2s steps(2) infinite;
      -webkit-animation-delay: .5s;
              animation-delay: .5s; }
  .intro .bird {
    display: block;
    position: absolute;
    width: 75px; }
    .intro .bird.bird01 {
      top: 540px;
      right: calc(50% + 520px);
      -webkit-animation: twoStepY 2s steps(1) infinite;
              animation: twoStepY 2s steps(1) infinite; }
    .intro .bird.bird02 {
      top: 625px;
      left: calc(50% + 536px);
      -webkit-animation: twoStepY 2s steps(1) infinite;
              animation: twoStepY 2s steps(1) infinite;
      -webkit-animation-delay: .5s;
              animation-delay: .5s; }
  .intro .btm_area {
    position: relative; }
    .intro .btm_area:after {
      content: "";
      display: block;
      position: absolute;
      left: 0;
      bottom: -40px;
      width: 100%;
      height: 50px;
      z-index: -1;
      background: var(--base-color-green02); }
    .intro .btm_area .top-bg_area {
      width: 100%;
      height: 356px; }
      .intro .btm_area .top-bg_area img {
        position: absolute;
        width: 3247px;
        left: calc(50% - 1624px); }
    .intro .btm_area .btm-bg_area {
      width: 100%;
      height: 360px;
      background: url(../img/work/intro_bottom-bg.webp) center center repeat-x;
      background-size: 1920px 360px;
      -webkit-transform: translateY(-10px);
              transform: translateY(-10px);
      margin-bottom: -10px;
      z-index: 20; }
    .intro .btm_area .forests {
      position: absolute;
      width: 684px;
      z-index: 30; }
      .intro .btm_area .forests.forests01 {
        left: -150px;
        bottom: -30px; }
      .intro .btm_area .forests.forests02 {
        width: 699px;
        right: -150px;
        bottom: -30px; }

@media screen and (max-width: 1500px) {
  .intro .btm_area .forests.forests01 {
    left: auto;
    right: calc(50% + 225px); }
  .intro .btm_area .forests.forests02 {
    left: calc(50% + 225px);
    right: auto; } }
@media screen and (max-width: 800px) {
  .intro {
    padding-top: 37.5vw;
    padding-bottom: 90px; }
    .intro h2 {
      display: block;
      vertical-align: top;
      text-align: left;
      font-size: var(--fz28);
      --lh:calc(88/56);
      margin: 0 auto 60px; }
    .intro .c_txt {
      position: relative;
      text-align: left;
      font-size: var(--fz16);
      --lh:2;
      position: relative;
      /*
      overflow: hidden;
      */
      line-height: calc(var(--lh)* 1em);
      padding-top: .1px;
      padding-bottom: .1px;
      width: 75%;
      margin: 0 auto 20vw; }
      .intro .c_txt::before {
        content: '';
        display: block;
        height: 0;
        width: 0;
        /*
        margin-top: calc((1 - var(--lh)) * 0.5em);
        */
        margin-top: calc((1 - var(--lh))* .5em); }
      .intro .c_txt::after {
        content: '';
        display: block;
        height: 0;
        width: 0;
        margin-bottom: calc((1 - var(--lh))* .5em); }
      .intro .c_txt br {
        display: none; }
    .intro .cloud {
      width: 115px; }
      .intro .cloud.cloud01 {
        top: 46.25vw;
        right: calc(50% + 28vw); }
      .intro .cloud.cloud02 {
        width: 135px;
        top: 23.75vw;
        left: calc(50% + 22.5vw);
        right: auto; }
      .intro .cloud.cloud03 {
        display: none; }
    .intro .bird {
      display: none; }
    .intro .btm_area:after {
      content: "";
      display: block;
      position: absolute;
      left: 0;
      bottom: -90px;
      width: 100%;
      height: 95px;
      z-index: -1;
      background: var(--base-color-green02); }
    .intro .btm_area .top-bg_area {
      width: 100%;
      height: 178px; }
      .intro .btm_area .top-bg_area img {
        width: 1624px;
        left: calc(50% - 812px); }
    .intro .btm_area .btm-bg_area {
      height: 180px;
      background-size: 960px 180px;
      -webkit-transform: translateY(-5px);
              transform: translateY(-5px);
      margin-bottom: -5px; }
    .intro .btm_area .forests {
      width: 189px;
      width: 47.25%; }
      .intro .btm_area .forests.forests01 {
        left: -55px;
        left: auto;
        right: calc(50% + 16.625vw);
        bottom: -43px; }
      .intro .btm_area .forests.forests02 {
        width: 283px;
        width: 70.75%;
        right: auto;
        left: calc(50% + 17.5vw);
        bottom: -89px; } }
/* ==========================================================================
	circulation
========================================================================== */
.circulation {
  position: relative;
  z-index: 5;
  padding-bottom: 150px; }
  .circulation:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--base-color-green02);
    z-index: -1; }
  .circulation .title_area {
    padding-right: 270px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding-bottom: 170px;
    z-index: 10; }
    .circulation .title_area h2 {
      position: absolute;
      top: -50px;
      right: 10px;
      width: 16.2vw;
      aspect-ratio: 239/450;
      max-width: 243px;
      min-width: 180px; }
      .circulation .title_area h2 span {
        display: block;
        position: absolute;
        width: calc(49.38% + 2px);
        top: 80px;
        border: 1px solid var(--base-border-color);
        -webkit-box-sizing: border-box;
                box-sizing: border-box; }
        .circulation .title_area h2 span:first-child {
          right: 0;
          top: 0; }
    .circulation .title_area h3 {
      font-size: clamp(34px, 2.4vw, 43.2px);
      --lh:calc(56/36);
      position: relative;
      /*
      overflow: hidden;
      */
      line-height: calc(var(--lh)* 1em);
      padding-top: .1px;
      padding-bottom: .1px;
      font-weight: 500;
      color: #fff;
      margin-bottom: 72px; }
      .circulation .title_area h3::before {
        content: '';
        display: block;
        height: 0;
        width: 0;
        /*
        margin-top: calc((1 - var(--lh)) * 0.5em);
        */
        margin-top: calc((1 - var(--lh))* .5em); }
      .circulation .title_area h3::after {
        content: '';
        display: block;
        height: 0;
        width: 0;
        margin-bottom: calc((1 - var(--lh))* .5em); }
    .circulation .title_area .n_txt {
      width: calc((830/950)*100%);
      font-size: clamp(20px, 1.4666666667vw, 26.4px);
      --lh:calc(42/22);
      position: relative;
      /*
      overflow: hidden;
      */
      line-height: calc(var(--lh)* 1em);
      padding-top: .1px;
      padding-bottom: .1px;
      font-weight: 500;
      color: #fff; }
      .circulation .title_area .n_txt::before {
        content: '';
        display: block;
        height: 0;
        width: 0;
        /*
        margin-top: calc((1 - var(--lh)) * 0.5em);
        */
        margin-top: calc((1 - var(--lh))* .5em); }
      .circulation .title_area .n_txt::after {
        content: '';
        display: block;
        height: 0;
        width: 0;
        margin-bottom: calc((1 - var(--lh))* .5em); }
    .circulation .title_area .bado {
      position: absolute;
      right: 10px;
      top: 300px;
      max-width: 167px;
      width: 15vw;
      top: calc((350/450)*100%); }
  .circulation .flow_area {
    background: var(--theme-color);
    border: 1px solid var(--base-border-color);
    border-radius: 50px;
    padding-top: 100px; }
    .circulation .flow_area:before {
      content: "";
      display: block;
      position: absolute;
      left: 10px;
      top: 10px;
      height: calc(100% - 20px);
      width: calc(100% - 20px);
      background: #fff;
      border-radius: 40px;
      z-index: 1; }
  .circulation .flow {
    position: relative;
    width: 85.7142857143%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
    margin: 0 auto 100px;
    z-index: 10; }
    .circulation .flow .img_area {
      width: 50%;
      -webkit-box-sizing: border-box;
              box-sizing: border-box; }
    .circulation .flow .text_area {
      width: 45.8333333333%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center; }
      .circulation .flow .text_area .num {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        width: 140px;
        height: 34px;
        background: var(--theme-color02);
        font-size: 18px;
        font-weight: 500;
        color: #fff;
        text-shadow: var(--base-shadow);
        border: 1px solid var(--base-border-color);
        border-radius: 17px;
        margin-bottom: 30px; }
      .circulation .flow .text_area h4 {
        font-size: clamp(42px, 2.9333333333vw, 52.8px);
        font-weight: 500;
        --lh:1.5;
        position: relative;
        /*
        overflow: hidden;
        */
        line-height: calc(var(--lh)* 1em);
        padding-top: .1px;
        padding-bottom: .1px;
        margin-bottom: 45px; }
        .circulation .flow .text_area h4::before {
          content: '';
          display: block;
          height: 0;
          width: 0;
          /*
          margin-top: calc((1 - var(--lh)) * 0.5em);
          */
          margin-top: calc((1 - var(--lh))* .5em); }
        .circulation .flow .text_area h4::after {
          content: '';
          display: block;
          height: 0;
          width: 0;
          margin-bottom: calc((1 - var(--lh))* .5em); }
        .circulation .flow .text_area h4 span {
          color: var(--base-color-green03); }
      .circulation .flow .text_area p {
        font-size: clamp(18px, 1.3333333333vw, 24px);
        font-weight: 500;
        --lh:calc(36/20);
        position: relative;
        /*
        overflow: hidden;
        */
        line-height: calc(var(--lh)* 1em);
        padding-top: .1px;
        padding-bottom: .1px; }
        .circulation .flow .text_area p::before {
          content: '';
          display: block;
          height: 0;
          width: 0;
          /*
          margin-top: calc((1 - var(--lh)) * 0.5em);
          */
          margin-top: calc((1 - var(--lh))* .5em); }
        .circulation .flow .text_area p::after {
          content: '';
          display: block;
          height: 0;
          width: 0;
          margin-bottom: calc((1 - var(--lh))* .5em); }
    .circulation .flow.flow01 .img_area {
      padding-left: 6.6666666667%; }
      .circulation .flow.flow01 .img_area img {
        width: 86.6666666667%; }
    .circulation .flow.flow01 .text_area {
      padding-bottom: 20px; }
    .circulation .flow.flow02 .text_area {
      margin-bottom: 100px; }
    .circulation .flow.flow03 {
      margin-bottom: 78px; }
  .circulation .next_area {
    position: relative;
    width: 100%;
    margin-bottom: 100px;
    z-index: 10; }
    .circulation .next_area:before, .circulation .next_area:after {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      bottom: 0;
      margin: auto;
      width: 60px;
      height: 1px;
      background: var(--base-border-color); }
    .circulation .next_area:before {
      left: 0; }
    .circulation .next_area:after {
      right: 0; }
    .circulation .next_area .scroll_area {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      width: 85.7142857143%;
      margin: 0 auto;
      background: var(--theme-color02);
      border: 1px solid var(--base-border-color);
      height: 40px;
      border-radius: 20px;
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
      overflow: hidden; }
      .circulation .next_area .scroll_area p {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-animation: loop-slide 30s infinite linear 1s both;
                animation: loop-slide 30s infinite linear 1s both; }
        .circulation .next_area .scroll_area p img {
          width: 896px;
          height: 23px; }
    .circulation .next_area.next02 .scroll_area p img {
      width: 818px; }
  .circulation .purpose {
    position: relative;
    width: 100%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    background: var(--theme-color);
    border: 1px solid var(--base-border-color);
    padding: 5px;
    border-radius: 10px;
    box-sizing: border-box;
    -webkit-transform: translateY(-22px);
            transform: translateY(-22px); }
    .circulation .purpose .tit {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      position: absolute;
      left: 45px;
      top: 0;
      width: 80px;
      height: 100%;
      background: var(--theme-color02);
      font-size: 32px;
      font-weight: 500;
      color: #fff;
      text-shadow: var(--base-shadow);
      border-left: 1px solid var(--base-border-color);
      border-right: 1px solid var(--base-border-color);
      z-index: 20; }
    .circulation .purpose .inr {
      position: relative;
      border-radius: 15px;
      background: url(../img/common/bg_pat02.jpg) center center repeat;
      background-size: 8px 8px;
      padding: 110px 0 110px 250px;
      -webkit-box-sizing: border-box;
              box-sizing: border-box; }
    .circulation .purpose .bado {
      position: absolute;
      width: 154px;
      left: 225px;
      left: 18.75%;
      bottom: -5px;
      z-index: 20; }
      .circulation .purpose .bado:before {
        content: "";
        display: block;
        width: 140px;
        height: 79px;
        position: absolute;
        left: -30px;
        top: -100px;
        background: url(../img/work/purpose_bado_ar.png);
        background-size: cover;
        opacity: 0;
        -webkit-transform: translateY(10px);
                transform: translateY(10px);
        -webkit-transition: all 0.6s var(--easePopUp);
        transition: all 0.6s var(--easePopUp);
        -webkit-transition-delay: .8s;
                transition-delay: .8s; }
    .circulation .purpose ul {
      display: table;
      margin: 0 auto; }
      .circulation .purpose ul li {
        position: relative;
        padding-left: 65px;
        -webkit-box-sizing: border-box;
                box-sizing: border-box; }
        .circulation .purpose ul li:before {
          content: "";
          display: block;
          position: absolute;
          left: 0;
          top: 4px;
          width: 36px;
          height: 36px;
          background: url(../img/work/check.png);
          background-size: cover; }
        .circulation .purpose ul li:not(:last-child) {
          margin-bottom: 23px; }
        .circulation .purpose ul li p {
          display: inline;
          font-size: 26px;
          font-weight: 500;
          --b_color:#000;
          background-image: -webkit-gradient(linear, left top, right top, from(var(--b_color)), to(var(--b_color)));
          background-image: linear-gradient(90deg, var(--b_color), var(--b_color));
          background-repeat: no-repeat;
          background-position: 0px 90%;
          background-size: 100% 2px; }
    .circulation .purpose.move .bado:before {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      opacity: 1; }

@media screen and (max-width: 1150px) {
  .circulation .purpose {
    overflow: hidden; }
    .circulation .purpose ul {
      max-width: 545px;
      padding-right: 30px;
      -webkit-box-sizing: border-box;
              box-sizing: border-box; }
    .circulation .purpose .bado {
      bottom: -130px; } }
@media screen and (max-width: 800px) {
  .circulation {
    padding-bottom: 15vw; }
    .circulation .title_area {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: reverse;
          -ms-flex-direction: row-reverse;
              flex-direction: row-reverse;
      width: 80%;
      padding-right: 0;
      padding-bottom: 15vw;
      z-index: 10; }
      .circulation .title_area h2 {
        position: relative;
        top: -55px;
        right: 0;
        width: 30vw;
        min-width: 120px;
        margin-bottom: 15vw; }
        .circulation .title_area h2 span {
          top: auto;
          bottom: 0;
          left: 0;
          width: 50%; }
          .circulation .title_area h2 span:first-child {
            right: 0;
            left: auto;
            top: 0;
            bottom: auto;
            width: 50%; }
      .circulation .title_area h3 {
        font-size: var(--fz25);
        --lh:calc(76/50);
        margin-bottom: 10vw;
        font-size: 6.25vw; }
      .circulation .title_area .n_txt {
        width: 100%;
        font-size: var(--fz15);
        --lh:calc(50/30); }
      .circulation .title_area .bado {
        right: -20px;
        top: calc((317/450)*100%);
        width: 20.875vw; }
    .circulation .flow_area {
      width: 100%;
      padding-top: 18.75vw;
      border-radius: 50px; }
      .circulation .flow_area:before {
        left: 5px;
        top: 5px;
        height: calc(100% - 10px);
        width: calc(100% - 10px);
        border-radius: 47.5px; }
    .circulation .flow {
      display: block;
      width: 80%;
      margin: 0 auto 60px; }
      .circulation .flow .img_area {
        width: 100%;
        margin-bottom: 50px;
        text-align: center; }
      .circulation .flow .text_area {
        width: 100%; }
        .circulation .flow .text_area .num {
          width: 110px;
          height: 27px;
          font-size: var(--fz14);
          margin: 0 auto 13px; }
        .circulation .flow .text_area h4 {
          font-size: var(--fz27);
          text-align: center;
          margin-bottom: 25px; }
        .circulation .flow .text_area p {
          font-size: var(--fz15);
          --lh:calc(50/30); }
      .circulation .flow.flow01 .img_area {
        padding-left: 0; }
        .circulation .flow.flow01 .img_area img {
          width: 81.25%; }
      .circulation .flow.flow01 .text_area {
        padding-bottom: 0; }
      .circulation .flow.flow02 .img_area img {
        width: 90.78125%; }
      .circulation .flow.flow02 .text_area {
        margin-bottom: 50px; }
      .circulation .flow.flow03 {
        margin-bottom: 75px; }
        .circulation .flow.flow03 .img_area img {
          width: 90.625%; }
    .circulation .next_area {
      margin-bottom: 50px; }
      .circulation .next_area.next02 {
        margin-bottom: 80px; }
      .circulation .next_area:before, .circulation .next_area:after {
        width: 20px; }
      .circulation .next_area .scroll_area {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        width: 80%;
        height: 38px; }
        .circulation .next_area .scroll_area p img {
          width: 650px;
          height: 18px; }
      .circulation .next_area.next02 .scroll_area p img {
        width: 636px; }
    .circulation .purpose {
      padding: 3px;
      border-radius: 5px;
      -webkit-transform: translateY(0);
              transform: translateY(0); }
      .circulation .purpose .tit {
        left: 0;
        right: 0;
        margin: auto;
        text-align: center;
        display: block;
        width: 250px;
        height: 50px;
        padding: 12px 20px 0;
        padding-top: 16px;
        vertical-align: middle;
        font-size: var(--fz19); }
      .circulation .purpose .inr {
        border-radius: 12.5px;
        padding: 90px 0 140px; }
      .circulation .purpose .bado {
        position: absolute;
        width: 135px;
        left: 16.6666666667%;
        bottom: -115px; }
        .circulation .purpose .bado:before {
          width: 110px;
          height: 64px;
          left: auto;
          top: -10px;
          right: -120px;
          background-image: url(../img/work/purpose_bado_ar_sp.png); }
      .circulation .purpose ul {
        width: 73.6111111111%;
        padding-right: 0;
        margin: 0 auto; }
        .circulation .purpose ul li {
          padding-left: 37px; }
          .circulation .purpose ul li:before {
            top: 2px;
            width: 23px;
            height: 23px; }
          .circulation .purpose ul li p {
            display: inline;
            font-size: var(--fz17);
            --lh:calc(54/34);
            position: relative;
            /*
            overflow: hidden;
            */
            line-height: calc(var(--lh)* 1em);
            padding-top: .1px;
            padding-bottom: .1px; }
            .circulation .purpose ul li p::before {
              content: '';
              display: block;
              height: 0;
              width: 0;
              /*
              margin-top: calc((1 - var(--lh)) * 0.5em);
              */
              margin-top: calc((1 - var(--lh))* .5em); }
            .circulation .purpose ul li p::after {
              content: '';
              display: block;
              height: 0;
              width: 0;
              margin-bottom: calc((1 - var(--lh))* .5em); } }
/* ==========================================================================
	cycle
========================================================================== */
.cycle {
  background: var(--base-color-green02);
  padding-bottom: 90px; }
  .cycle h2 {
    text-align: center;
    color: #fff;
    text-shadow: var(--base-shadow);
    font-size: clamp(48px, 3.3333333333vw, 60px);
    font-weight: 500;
    margin-bottom: 100px; }
    .cycle h2 span {
      position: relative; }
      .cycle h2 span:before {
        content: "しんりん";
        display: block;
        width: 100%;
        text-align: center;
        font-size: clamp(18px, 1.3333333333vw, 24px);
        color: #fff;
        text-shadow: var(--base-shadow);
        font-weight: 500;
        position: absolute;
        left: 0;
        top: -25px; }
      .cycle h2 span.ruby02:before {
        content: "サイクル"; }
  .cycle .slide_area {
    position: relative;
    width: clamp(780px, 89.3333333333vw, 1715.2px);
    aspect-ratio: 1340/700;
    margin: 0 auto; }
    .cycle .slide_area .slide {
      position: relative;
      width: 100%;
      height: 100%; }
      .cycle .slide_area .slide li {
        position: absolute;
        width: 46.2686567164%;
        -webkit-transition: all .6s ease;
        transition: all .6s ease;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        z-index: 5; }
        .cycle .slide_area .slide li img {
          border-radius: 100px;
          border: 1px solid var(--base-border-color); }
        .cycle .slide_area .slide li.current {
          top: 0;
          margin: auto;
          left: 50%;
          -webkit-transform: translateX(-50%);
                  transform: translateX(-50%); }
        .cycle .slide_area .slide li.right {
          top: 14.2857142857%;
          -webkit-filter: blur(2px);
                  filter: blur(2px);
          z-index: 2;
          left: 50%;
          -webkit-transform: translateX(8%);
                  transform: translateX(8%); }
        .cycle .slide_area .slide li.left {
          top: 14.2857142857%;
          left: 0;
          -webkit-transform: translateX(0);
                  transform: translateX(0);
          -webkit-filter: blur(2px);
                  filter: blur(2px);
          z-index: 2; }
  .cycle .np_btn {
    position: absolute;
    top: 35.7142857143%;
    margin: auto;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 1px solid var(--base-border-color);
    background: #fff;
    -webkit-transition: border .4s ease;
    transition: border .4s ease;
    z-index: 100;
    overflow: hidden;
    cursor: pointer; }
    .cycle .np_btn:after {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      margin: auto;
      width: 80px;
      height: 80px;
      background: url(../img/work/cycle_slide-arrow.jpg);
      background-size: cover;
      -webkit-transition: -webkit-transform .4s ease;
      transition: -webkit-transform .4s ease;
      transition: transform .4s ease;
      transition: transform .4s ease, -webkit-transform .4s ease;
      z-index: 2; }
  .cycle .next_btn {
    left: calc(50% +  23.1343283582%);
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%); }
  .cycle .prev_btn {
    right: calc(50% + 23.1343283582%);
    -webkit-transform: rotate(180deg) translateX(-50%);
            transform: rotate(180deg) translateX(-50%); }

@media screen and (max-width: 800px) {
  .cycle h2 {
    font-size: var(--fz32);
    margin-bottom: 50px; }
    .cycle h2 span {
      position: relative; }
      .cycle h2 span:before {
        font-size: var(--fz13);
        top: -15px; }
  .cycle .slide_area {
    width: 168.7%;
    -webkit-transform: translateX(-20.65%);
            transform: translateX(-20.65%); }
  .cycle .np_btn {
    position: absolute;
    top: 35.7142857143%;
    margin: auto;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 1px solid var(--base-border-color);
    background: #fff;
    -webkit-transition: border .4s ease;
    transition: border .4s ease;
    z-index: 100;
    overflow: hidden;
    cursor: pointer; }
    .cycle .np_btn:after {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      margin: auto;
      width: 80px;
      height: 80px;
      background: url(../img/work/cycle_slide-arrow.jpg);
      background-size: cover;
      -webkit-transition: -webkit-transform .4s ease;
      transition: -webkit-transform .4s ease;
      transition: transform .4s ease;
      transition: transform .4s ease, -webkit-transform .4s ease;
      z-index: 2; }
  .cycle .next_btn {
    left: calc(50% +  23.1343283582%);
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%); }
  .cycle .prev_btn {
    right: calc(50% + 23.1343283582%);
    -webkit-transform: rotate(180deg) translateX(-50%);
            transform: rotate(180deg) translateX(-50%); } }
/* ==========================================================================
	loopslide_area
========================================================================== */
.loop-slide_area {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 700px;
  overflow: hidden; }
  .loop-slide_area:before {
    content: "";
    display: block;
    width: 100%;
    height: 190px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    background: var(--base-color-green02); }
  .loop-slide_area .slide_box {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-animation: loop-slide-rev 100s infinite linear 1s both;
            animation: loop-slide-rev 100s infinite linear 1s both;
    z-index: 20; }
  .loop-slide_area .slides {
    position: relative;
    width: 900px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box; }
    .loop-slide_area .slides img {
      border: 1px solid var(--base-border-color);
      -webkit-box-sizing: border-box;
              box-sizing: border-box; }

@media screen and (max-width: 800px) {
  .loop-slide_area {
    height: 350px;
    overflow: hidden; }
    .loop-slide_area:before {
      display: none; }
    .loop-slide_area .slides {
      width: 450px; } }
/* ==========================================================================
	works
========================================================================== */
.works {
  padding-top: 230px;
  padding-bottom: 150px; }
  .works .title_area {
    padding-right: 270px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding-bottom: 170px;
    z-index: 10; }
    .works .title_area h2 {
      position: absolute;
      top: -50px;
      right: 10px;
      width: 16.2vw;
      aspect-ratio: 239/374;
      max-width: 243px;
      min-width: 180px; }
      .works .title_area h2 span {
        display: block;
        position: absolute;
        width: calc(49.38% + 2px);
        top: 80px;
        border: 1px solid var(--base-border-color);
        -webkit-box-sizing: border-box;
                box-sizing: border-box; }
        .works .title_area h2 span:first-child {
          right: 0;
          top: 0; }
    .works .title_area h3 {
      font-size: clamp(34px, 2.4vw, 43.2px);
      --lh:calc(56/36);
      position: relative;
      /*
      overflow: hidden;
      */
      line-height: calc(var(--lh)* 1em);
      padding-top: .1px;
      padding-bottom: .1px;
      font-weight: 500;
      margin-bottom: 72px; }
      .works .title_area h3::before {
        content: '';
        display: block;
        height: 0;
        width: 0;
        /*
        margin-top: calc((1 - var(--lh)) * 0.5em);
        */
        margin-top: calc((1 - var(--lh))* .5em); }
      .works .title_area h3::after {
        content: '';
        display: block;
        height: 0;
        width: 0;
        margin-bottom: calc((1 - var(--lh))* .5em); }
    .works .title_area .n_txt {
      width: calc((830/950)*100%);
      font-size: clamp(20px, 1.4666666667vw, 26.4px);
      --lh:calc(42/22);
      position: relative;
      /*
      overflow: hidden;
      */
      line-height: calc(var(--lh)* 1em);
      padding-top: .1px;
      padding-bottom: .1px;
      font-weight: 500; }
      .works .title_area .n_txt::before {
        content: '';
        display: block;
        height: 0;
        width: 0;
        /*
        margin-top: calc((1 - var(--lh)) * 0.5em);
        */
        margin-top: calc((1 - var(--lh))* .5em); }
      .works .title_area .n_txt::after {
        content: '';
        display: block;
        height: 0;
        width: 0;
        margin-bottom: calc((1 - var(--lh))* .5em); }
    .works .title_area .bado {
      position: absolute;
      right: -60px;
      bottom: -314px;
      width: 294px; }
  .works .box_area {
    position: relative;
    background: #fff;
    border: 1px solid var(--base-border-color);
    padding: 0 5% 80px;
    border-radius: 30px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between; }
    .works .box_area:not(:last-child) {
      margin-bottom: 20px; }
    .works .box_area.-rev {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: reverse;
          -ms-flex-direction: row-reverse;
              flex-direction: row-reverse; }
      .works .box_area.-rev .text_area {
        padding: 20px 30px 0 0; }
    .works .box_area .img_area {
      position: relative;
      width: 48.5294117647%;
      min-width: 500px;
      border: 1px solid var(--base-border-color); }
      .works .box_area .img_area .swiper-wrapper {
        overflow: hidden; }
      .works .box_area .img_area .swiper-pagination {
        bottom: -35px; }
      .works .box_area .img_area .swiper-pagination-bullet {
        width: 30px;
        height: 4px;
        background: var(--theme-color);
        border: 1px solid var(--base-border-color);
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        border-radius: 0;
        opacity: 1; }
      .works .box_area .img_area .swiper-pagination-bullet-active {
        background: var(--theme-color02); }
    .works .box_area .text_area {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      padding: 20px 0 0 30px;
      width: 37.5%;
      max-width: calc(100% - 530px); }
    .works .box_area .num {
      display: inline-block;
      padding: 2px 18px;
      background: var(--theme-color02);
      font-size: 18px;
      font-weight: 500;
      color: #fff;
      text-shadow: var(--base-shadow);
      border: 1px solid var(--base-border-color);
      border-radius: 17px;
      margin-bottom: 30px; }
    .works .box_area h4 {
      font-size: clamp(42px, 2.9333333333vw, 52.8px);
      --lh:1.8;
      position: relative;
      /*
      overflow: hidden;
      */
      line-height: calc(var(--lh)* 1em);
      padding-top: .1px;
      padding-bottom: .1px;
      margin-bottom: 38px; }
      .works .box_area h4::before {
        content: '';
        display: block;
        height: 0;
        width: 0;
        /*
        margin-top: calc((1 - var(--lh)) * 0.5em);
        */
        margin-top: calc((1 - var(--lh))* .5em); }
      .works .box_area h4::after {
        content: '';
        display: block;
        height: 0;
        width: 0;
        margin-bottom: calc((1 - var(--lh))* .5em); }
    .works .box_area p {
      font-size: clamp(18px, 1.3333333333vw, 24px);
      --lh:1.8;
      position: relative;
      /*
      overflow: hidden;
      */
      line-height: calc(var(--lh)* 1em);
      padding-top: .1px;
      padding-bottom: .1px; }
      .works .box_area p::before {
        content: '';
        display: block;
        height: 0;
        width: 0;
        /*
        margin-top: calc((1 - var(--lh)) * 0.5em);
        */
        margin-top: calc((1 - var(--lh))* .5em); }
      .works .box_area p::after {
        content: '';
        display: block;
        height: 0;
        width: 0;
        margin-bottom: calc((1 - var(--lh))* .5em); }

@media screen and (max-width: 1050px) {
  .works {
    padding-top: 230px;
    padding-bottom: 150px; }
    .works .box_area {
      display: block;
      padding: 0 7.5% 80px; }
      .works .box_area.-rev .text_area {
        padding: 0; }
      .works .box_area .img_area {
        width: 100%;
        min-width: 10px;
        margin: 0 auto 80px; }
      .works .box_area .text_area {
        width: 95%;
        display: block;
        padding: 0;
        max-width: 100%;
        text-align: center;
        margin: 0 auto;
        -webkit-box-sizing: border-box;
                box-sizing: border-box; }
        .works .box_area .text_area p {
          text-align: left; } }
@media screen and (max-width: 800px) {
  .works {
    padding-top: 25vw;
    padding-bottom: 18.75vw; }
    .works .title_area {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: reverse;
          -ms-flex-direction: row-reverse;
              flex-direction: row-reverse;
      width: 90%;
      padding-right: 0;
      padding-bottom: 15vw;
      width: 80%;
      -webkit-box-align: start;
          -ms-flex-align: start;
              align-items: flex-start;
      z-index: 10; }
      .works .title_area h2 {
        position: relative;
        top: -55px;
        right: 0;
        width: 30vw;
        min-width: 120px;
        margin-bottom: 15vw; }
        .works .title_area h2 span {
          top: auto;
          bottom: 0;
          left: 0;
          width: 50%; }
          .works .title_area h2 span:first-child {
            right: 0;
            left: auto;
            top: 0;
            bottom: auto; }
      .works .title_area h3 {
        font-size: var(--fz25);
        --lh:calc(76/50);
        margin-bottom: 10vw;
        font-size: 6vw;
        white-space: nowrap; }
      .works .title_area .n_txt {
        width: 100%;
        font-size: var(--fz15);
        --lh:calc(50/30); }
      .works .title_area .bado {
        right: -5vw;
        top: calc(100% + 80px);
        width: 45.375vw; }
    .works .box_area {
      padding-bottom: 60px;
      border-radius: 5px; }
      .works .box_area:not(:last-child) {
        margin-bottom: 15px; }
      .works .box_area .img_area {
        margin-bottom: 60px;
        border-top: none; }
        .works .box_area .img_area .swiper-pagination {
          bottom: -14px;
          height: 3px; }
        .works .box_area .img_area .swiper-pagination-bullet {
          width: 15px;
          height: 3px;
          margin: 0 2.5px; }
      .works .box_area .num {
        padding: 2px 12px;
        background: var(--theme-color02);
        font-size: var(--fz14);
        margin-bottom: 15px; }
      .works .box_area h4 {
        font-size: var(--fz27);
        margin-bottom: 25px; }
      .works .box_area p {
        font-size: var(--fz15); } }

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