.nav-work {
  padding-top: 4rem; }
  .nav-work ul {
    display: flex;
    justify-content: center; }
    .nav-work ul li {
      margin: 1rem; }
      @media only screen and (max-width: 767px) {
        .nav-work ul li {
          margin: 0 .5rem; } }
      .nav-work ul li a {
        width: 24rem;
        height: 4.8rem;
        border-radius: 1rem;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #ea8652;
        color: #fff;
        font-size: 1.6rem; }
        @media only screen and (max-width: 767px) {
          .nav-work ul li a {
            width: 13rem;
            height: 4rem;
            font-size: 1.3rem;
            border-radius: .5rem; } }
      .nav-work ul li:nth-of-type(1) a {
        background: #8dc552; }

.section-work {
  padding: 10rem 0 0; }
  @media only screen and (max-width: 1024px) {
    .section-work {
      padding: 7.5rem 2rem 0; } }
  @media only screen and (max-width: 1024px) and (max-width: 767px) {
    .section-work {
      padding: 5rem 2rem 0; } }

  .section-work-header {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-bottom: 6rem; }
    @media only screen and (max-width: 1024px) {
      .section-work-header {
        padding-bottom: 4.5rem; } }
  @media only screen and (max-width: 1024px) and (max-width: 767px) {
    .section-work-header {
      padding-bottom: 3rem; } }

    .section-work-header-ttl {
      font-size: 3.6rem;
      font-weight: 400; }
      @media only screen and (max-width: 767px) {
        .section-work-header-ttl {
          font-size: 2.8rem; } }
    .section-work-header-en {
      font-size: 1.6rem;
      color: #ea8652; }
      @media only screen and (max-width: 767px) {
        .section-work-header-en {
          font-size: 1.2rem; } }
  .section-work-inner {
    max-width: 110rem;
    margin: 0 auto 5rem; }
    @media only screen and (max-width: 767px) {
      .section-work-inner {
        margin-bottom: 2rem; } }
    .section-work-inner dl dt {
      font-weight: 400; }
    .section-work-inner .dl-work {
      margin-bottom: 2.5rem; }
      .section-work-inner .dl-work dt {
        border-bottom: 1px solid rgba(78, 50, 48, 0.15);
        padding: 1rem .5rem;
        font-size: 2.4rem; }
        @media only screen and (max-width: 767px) {
          .section-work-inner .dl-work dt {
            font-size: 1.8rem; } }
      .section-work-inner .dl-work dd {
        font-size: 1.6rem;
        padding: 1.5rem .5rem; }
        @media only screen and (max-width: 767px) {
          .section-work-inner .dl-work dd {
            font-size: 1.4rem; } }
    .section-work-inner .dl-works {
      background: rgba(234, 134, 82, 0.05);
      padding: 4rem 5rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 5rem;
      border-radius: .3rem; }
      @media only screen and (max-width: 1024px) {
        .section-work-inner .dl-works {
          padding: 4rem 1.5rem;
          margin-bottom: 2rem; } }
  @media only screen and (max-width: 1024px) and (max-width: 767px) {
    .section-work-inner .dl-works {
      padding: 2.5rem 1.5rem; } }

      .section-work-inner .dl-works dt {
        font-size: 2.2rem;
        line-height: 1.2;
        line-height: 1.3;
        border-bottom: 1px solid #ea8652;
        padding-bottom: .3rem;
        text-align: center;
        margin-bottom: 1.5rem; }
        @media only screen and (max-width: 767px) {
          .section-work-inner .dl-works dt {
            font-size: 1.6rem; } }
      .section-work-inner .dl-works dd ol {
        display: flex;
        justify-content: center; }
        @media only screen and (max-width: 767px) {
          .section-work-inner .dl-works dd ol {
            flex-direction: column; } }
        .section-work-inner .dl-works dd ol li {
          padding: 1.5rem;
          font-size: 1.6rem;
          display: flex;
          flex-direction: column;
          align-items: center;
          text-align: center; }
          @media only screen and (max-width: 1024px) {
            .section-work-inner .dl-works dd ol li {
              padding: 1.5rem .5rem; } }
  @media only screen and (max-width: 1024px) and (max-width: 767px) {
    .section-work-inner .dl-works dd ol li {
      font-size: 1.3rem; } }

          .section-work-inner .dl-works dd ol li figure {
            background: #fff;
            padding: 1.5rem 0;
            margin-bottom: 1rem; }
      .section-work-inner .dl-works dd p {
        text-align: center;
        font-size: 1.4rem; }
        @media only screen and (max-width: 767px) {
          .section-work-inner .dl-works dd p {
            font-size: 1.2rem; } }
    .section-work-inner .dl-project {
      background: rgba(141, 197, 82, 0.05);
      padding: 4rem 5rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 5rem;
      border-radius: .3rem; }
      @media only screen and (max-width: 767px) {
        .section-work-inner .dl-project {
          padding: 2rem;
          margin-bottom: 2rem; } }
      .section-work-inner .dl-project dt {
        font-size: 2.2rem;
        line-height: 1.3;
        border-bottom: 1px solid #8dc552;
        padding-bottom: .3rem;
        text-align: center;
        margin-bottom: 2.5rem; }
        @media only screen and (max-width: 767px) {
          .section-work-inner .dl-project dt {
            font-size: 1.6rem; } }
      .section-work-inner .dl-project dd {
        font-size: 1.6rem; }
        @media only screen and (max-width: 1024px) {
          .section-work-inner .dl-project dd {
            display: flex;
            justify-content: center; } }
  @media only screen and (max-width: 1024px) and (max-width: 767px) {
    .section-work-inner .dl-project dd {
      font-size: 1.3rem; } }

        .section-work-inner .dl-project dd ul {
          display: flex;
          flex-wrap: wrap; }
          @media only screen and (max-width: 1024px) {
            .section-work-inner .dl-project dd ul {
              flex-direction: column; } }
          .section-work-inner .dl-project dd ul li {
            width: 50%;
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
            margin-top: .5rem; }
            @media only screen and (max-width: 1024px) {
              .section-work-inner .dl-project dd ul li {
                width: auto; } }
            .section-work-inner .dl-project dd ul li:before {
              content: "";
              width: 1.6rem;
              height: 1.6rem;
              border-radius: 50%;
              border: 0.2rem solid rgba(141, 197, 82, 0.5);
              box-sizing: border-box;
              flex-shrink: 0;
              margin-right: .8rem;
              position: relative;
              top: .4rem; }
              @media only screen and (max-width: 767px) {
                .section-work-inner .dl-project dd ul li:before {
                  width: 1.4rem;
                  height: 1.4rem; } }
    .section-work-inner .dl-flow {
      background: rgba(234, 134, 82, 0.05);
      padding: 4rem 5rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 5rem;
      border-radius: .3rem; }
      @media only screen and (max-width: 1024px) {
        .section-work-inner .dl-flow {
          padding: 4rem 1.5rem 2rem; } }
  @media only screen and (max-width: 1024px) and (max-width: 767px) {
    .section-work-inner .dl-flow {
      padding: 2.5rem 1.5rem; } }

      .section-work-inner .dl-flow dt {
        font-size: 2.2rem;
        line-height: 1.2;
        line-height: 1.3;
        border-bottom: 1px solid #ea8652;
        padding-bottom: .3rem;
        text-align: center;
        margin-bottom: 1.5rem; }
        @media only screen and (max-width: 767px) {
          .section-work-inner .dl-flow dt {
            font-size: 1.6rem; } }
      .section-work-inner .dl-flow dd ol {
        display: flex;
        flex-wrap: wrap; }
        .section-work-inner .dl-flow dd ol li {
          width: 48%;
          background: #fff;
          margin: 2.5rem 1% 0 1%;
          position: relative;
          border: 1px solid rgba(234, 134, 82, 0.2); }
          @media only screen and (max-width: 767px) {
            .section-work-inner .dl-flow dd ol li {
              width: 100%;
              margin: 2.5rem 0 0; } }
          .section-work-inner .dl-flow dd ol li strong {
            font-size: 1.8rem;
            display: block;
            text-align: center;
            padding: 1.5rem 2.5rem;
            background: rgba(234, 134, 82, 0.15); }
            @media only screen and (max-width: 767px) {
              .section-work-inner .dl-flow dd ol li strong {
                font-size: 1.5rem;
                padding: 1.5rem 1rem; } }
          .section-work-inner .dl-flow dd ol li p {
            font-size: 1.6rem;
            text-align: left;
            padding: 2.5rem; }
            @media only screen and (max-width: 767px) {
              .section-work-inner .dl-flow dd ol li p {
                font-size: 1.3rem;
                padding: 1.5rem; } }
          .section-work-inner .dl-flow dd ol li span {
            content: "";
            color: #ea8652;
            font-size: 1.4rem;
            line-height: 1;
            position: absolute;
            left: 0;
            top: -1rem;
            width: 100%;
            text-align: center; }
            @media only screen and (max-width: 767px) {
              .section-work-inner .dl-flow dd ol li span {
                font-size: 1.2rem; } }
            .section-work-inner .dl-flow dd ol li span b {
              font-weight: 400;
              font-size: 2rem; }
              @media only screen and (max-width: 767px) {
                .section-work-inner .dl-flow dd ol li span b {
                  font-size: 1.6rem; } }
      .section-work-inner .dl-flow dd p {
        text-align: center;
        font-size: 1.4rem; }
  .section-work#regular .section-work-header-en {
    color: #8dc552; }
  .section-work#regular .section-work-related {
    background: rgba(141, 197, 82, 0.1); }
    .section-work#regular .section-work-related-ttl span {
      color: #8dc552; }
  .section-work#designer {
    padding-bottom: 10rem; }
    @media only screen and (max-width: 767px) {
      .section-work#designer {
        padding-bottom: 0; } }
    .section-work#designer .section-work-header-en {
      color: #ea8652; }
    .section-work#designer .section-work-related {
      background: rgba(234, 134, 82, 0.1); }
      .section-work#designer .section-work-related-ttl span {
        color: #ea8652; }
  .section-work-related {
    padding: 5rem 2.5rem 1.5rem;
    max-width: 110rem;
    margin: 0 auto 5rem; }
    @media only screen and (max-width: 767px) {
      .section-work-related {
        padding: 2.5rem 2rem .5rem; } }
    .section-work-related-ttl {
      text-align: center;
      font-size: 2.4rem;
      font-weight: 400;
      line-height: 1.4;
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      padding-bottom: 3rem; }
      @media only screen and (max-width: 767px) {
        .section-work-related-ttl {
          font-size: 1.8rem;
          padding-bottom: 1.5rem; } }
      .section-work-related-ttl span {
        font-size: 1.6rem; }
        @media only screen and (max-width: 767px) {
          .section-work-related-ttl span {
            font-size: 1.2rem; } }
    .section-work-related-list {
      display: flex;
      justify-content: center;
      flex-wrap: wrap; }
      .section-work-related-list li {
        width: 25%;
        padding: 0 1.5rem 3rem; }
        @media only screen and (max-width: 1024px) {
          .section-work-related-list li {
            width: 50%; } }
  @media only screen and (max-width: 1024px) and (max-width: 767px) {
    .section-work-related-list li {
      width: 100%;
      padding: 0 0 2.5rem; } }

        .section-work-related-list li a {
          display: flex;
          flex-direction: column; }
        .section-work-related-list li figure {
          margin-bottom: 1.5rem;
          border: .5rem solid #fff; }
          @media only screen and (max-width: 767px) {
            .section-work-related-list li figure {
              margin-bottom: .5rem; } }
        .section-work-related-list li p {
          font-size: 1.2rem;
          line-height: 1.3;
          display: flex;
          align-items: center;
          justify-content: space-between;
          flex-direction: column;
          text-align: center; }
          .section-work-related-list li p b {
            color: #4e3230;
            font-weight: 400;
            font-size: 1.8rem;
            flex-shrink: 0;
            margin-top: .5rem; }
            @media only screen and (max-width: 767px) {
              .section-work-related-list li p b {
                font-size: 1.6rem; } }
            .section-work-related-list li p b span {
              font-size: 1.3rem; }
              @media only screen and (max-width: 767px) {
                .section-work-related-list li p b span {
                  font-size: 1.2rem; } }