@charset "UTF-8";

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.g_content {
  h2 {
    position: relative;
    margin-left: clamp(50px, 10vw, 100px);
    font-size: 64px;
    font-weight: 700;

    &::after {
      content: "";
      position: absolute;
      left: -64px;
      top: -64px;
      display: block;
      width: 128px;
      aspect-ratio: 1 / 1;
      border-radius: 50%;
      background-color: var(--sub-green);
      z-index: -1
    }
  }

  @media (max-width: 767px) {
    h2 {
      font-size: clamp(28px, calc(8.6331vw - 2.21585px), 64px);

      &::after {
        width: clamp(56px, calc(17.2662vw - 4.4317px), 128px);
        left: calc(clamp(28px, calc(8.6331vw - 2.21585px), 64px) * -1);
        top: calc(clamp(28px, calc(8.6331vw - 2.21585px), 64px) * -1);
      }
    }
  }

  a {
    color: var(--text-green);
    text-decoration-style: solid;
    text-decoration-line: underline;
    text-decoration-color: var(--text-green);
    transition: 0.2s;

    &:hover {
      opacity: 0.75;
    }
  }

  a[target="_blank"]::after {
    content: "";
    display: inline-block;
    width: 1em;
    aspect-ratio: 1 / 1;
    margin: 0 4px 2px;
    background: url("../image/external_green.svg") center/contain no-repeat;
    vertical-align: middle;
  }

  .pagination {
    .nav-links {
      display: flex;
      gap: min(4.666667vw, 1.5em);
      justify-content: center;
      align-items: center;

      a {
        text-decoration-line: none;
      }

      .page-numbers:not(.current):not(.prev):not(.next) {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 2em;
        aspect-ratio: 1 / 1;
        border: 1px solid var(--text-green);

        &:hover {
          color: #fff;
          background-color: var(--main-green);
          opacity: 1;
        }
      }

      .page-numbers.current {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 2em;
        aspect-ratio: 1 / 1;
        background-color: var(--heading-black);
        color: #fff;
      }
    }
  }
}


/* --------------- 事業内容 --------------- */
#business {

  .introduction {
    width: min(90%, 1600px);
    margin-inline: auto;
    text-align: center;
  }

  .container_wrap {
    margin: 200px auto 0;
    padding-bottom: 3.645833vw;

    .container {
      position: relative;
      display: flex;

      &:nth-of-type(even) {
        flex-direction: row-reverse;
      }

      &:not(:first-of-type) {
        margin-top: 300px;
      }

      >img {
        align-self: center;
        width: 50%;
        margin-top: 4.6875vw;
        border-radius: 44px;
      }

      .content_wrap {
        align-self: stretch;
        position: relative;
        width: 50%;
        z-index: 2;

        .content {
          position: relative;
          width: 80%;
          min-height: 24.6875vw;
          margin: auto;
          padding: 32px;
          border: 4px solid var(--main-green);
          border-radius: 44px;

          &::before {
            content: "";
            position: absolute;
            top: -64px;
            left: -64px;
            display: block;
            width: 128px;
            aspect-ratio: 1 / 1;
            border-radius: 50%;
            background-color: var(--sub-green);
          }

          h2 {
            margin: 0;

            &::after {
              display: none;
            }
          }

          p {
            margin-top: 40px;
            line-height: 1.5;
          }

          .link_button {
            position: relative;
            margin: 16px 0 0 auto;
            display: flex;
            flex-direction: column;
            gap: 16px;
            width: fit-content;
            padding: 16px;
            border-radius: 22px;
            background-color: var(--pale-green);
            box-shadow: 3px 3px 3px 0 var(--shadow-black);
            text-decoration-line: none;

            &::after {
              display: none;
            }

            p {
              margin: 0 auto;
              text-align: center;
            }
          }
        }
      }

      &:nth-of-type(odd) .bg {
        right: 0;
      }

      &:nth-of-type(even) .bg {
        left: 0;
      }
    }

    .bg {
      position: absolute;
      bottom: -3.645833vw;
      font-family: "Noto Sans JP", sans-serif;
      font-size: min(10.416667vw, 200px);
      font-weight: 900;
      color: var(--sub-green);
      white-space: nowrap;
      opacity: 0.75;
      z-index: 1;
      -webkit-user-select: none;
      user-select: none;
    }
  }
}

@media(max-width: 1299px) {
  #business {
    .container_wrap {
      margin: clamp(50px, 20vw, 200px) auto 0;

      .container:nth-of-type(odd) {
        flex-direction: column-reverse;

        >img {
          align-self: start;
          transform: translateY(-7.7vw);
        }

        .content_wrap {
          align-self: end;
        }
      }

      .container:nth-of-type(even) {
        flex-direction: column-reverse;

        >img {
          align-self: end;
          transform: translateY(-7.7vw);
        }

        .content_wrap {
          align-self: start;
        }
      }

      .container {
        &:not(:first-of-type) {
          margin-top: calc(clamp(50px, 20vw, 200px) - 4.054167vw);
        }

        >img {
          width: min(85%, 650px);
        }

        .content_wrap {
          width: min(94.415384%, 722px);

          .content {
            width: 90%;
            background-color: #fff;
          }
        }
      }

      .bg {
        bottom: 4.054167vw;
      }
    }
  }
}

@media (max-width: 767px) {
  #business {
    .container_wrap {
      .container {

        >img {
          border-radius: clamp(22px, calc(4.9217vw + 6.25056px), 44px);
        }

        .content_wrap {
          .content {
            padding: 8px 8px clamp(8px, calc(5.35714vw - 9.142848px), 32px);
            border-radius: clamp(22px, calc(4.9217vw + 6.25056px), 44px);

            &::before {
              width: clamp(56px, calc(17.2662vw - 4.4317px), 128px);
              left: calc(clamp(28px, calc(8.6331vw - 2.21585px), 64px) * -1);
              top: calc(clamp(28px, calc(8.6331vw - 2.21585px), 64px) * -1);
            }

            p {

              &:has(~.link_button) {
                padding-bottom: 0;
              }
            }

            .link_button {
              position: static;
              gap: 14px;
              margin: 14px clamp(0px, calc(5.35714vw - 17.142848px), 24px) 0 auto;
              padding: 14px;
              border-radius: 16px;
            }
          }
        }
      }
    }
  }
}

/* --------------- 会社情報 --------------- */
#company {

  #guide {
    margin: calc(clamp(0px, calc(13.2vw - 66px), 66px) * -1) auto 0;

    ul {
      display: flex;
      gap: 80px;
      justify-content: center;
      align-items: center;


      li {
        position: relative;

        a::after {
          content: "";
          position: absolute;
          left: -1em;
          bottom: 0;
          display: block;
          width: 2em;
          aspect-ratio: 1 / 1;
          border-radius: 50%;
          background-color: var(--sub-green);
          z-index: -1;
          transition: 0.2s;
        }
      }
    }
  }

  /* ページ内リンクのためのパディング */

  #overview,
  #history {
    padding-top: 160px;
  }

  #policy {
    padding-top: 100px;
  }

  @media(max-width: 1299px) {

    #overview,
    #history {
      padding-top: 80px;
    }

    #policy {
      padding-top: 16px;
    }
  }

  @media(max-width: 767px) {

    #overview,
    #history,
    #policy {
      padding-top: 80px;
    }
  }

  #overview {
    @media(min-width: 1300px) {
      margin-top: -110px;
    }

    .table_wrap {
      width: 100%;
      height: fit-content;
      margin-top: 100px;
      padding-inline: 1em;
      padding-bottom: 1em;
      overflow-x: auto;

      @media(max-width: 767px) {
        margin-top: min(13.03781vw, 100px);
      }

      >table {
        width: clamp(736px, 90vw, 1290px);
        margin-inline: auto;
        border-collapse: collapse;

        >tbody>tr {
          border-top: 1px solid var(--text-black);

          &:last-child {
            border-bottom: 1px solid var(--text-black);
          }

          > :is(th, td) {
            vertical-align: top;
            padding: 1em;
            line-height: 2;
          }

          >th {
            max-width: 428px;
            white-space: nowrap;
            padding-right: 1.5em;
          }

          >td {
            padding-left: 1.5em;

            &:has(img) {
              display: flex;
              gap: 1em;
              justify-content: left;
              align-items: center;

              div:has(img) {
                display: flex;
                justify-content: center;
                align-items: center;
                min-width: 90px;
              }
            }

            img {
              width: auto;
              height: 84px;
              object-fit: contain;
              object-position: center;
            }

            table {
              td:not(:first-child) {
                padding-left: 2em;
              }
            }
          }
        }
      }
    }

    @media(max-width: 1299px) {
      .table_wrap>table {
        >tbody>tr {
          > :is(td, th) {
            display: block;
            border-inline: 1px solid var(--text-black);
            padding: 1em;
          }

          >th {
            max-width: unset;
            background-color: var(--pale-green);
          }
        }
      }
    }
  }

  #policy {
    display: flex;
    flex-direction: row-reverse;
    gap: min(15.384615vw, 200px);
    justify-content: center;
    align-items: start;
    margin-top: clamp(64px, 20.83333vw, 160px);

    @media(min-width:1300px) {
      margin-top: calc(clamp(64px, 20.83333vw, 160px) - 100px);
    }

    h2 {
      margin-top: 64px;
      margin-left: unset;
      writing-mode: vertical-rl;

      &::after {
        left: unset;
        bottom: unset;
        top: -64px;
        right: 0;
      }
    }

    figure{
      max-width: 1000px;
    }

    @media(max-width: 1299px) {
      figure {
        width: 64.76923vw;
      }
    }

    @media (max-width: 767px) {
      flex-direction: column;
      gap: min(9.375vw, 72px);

      h2 {
        margin-top: unset;
        margin-inline: auto;
        writing-mode: horizontal-tb;
        transform: translateX(clamp(14px, calc(4.31205vw - 1.107925px), 32px));

        &::after {
          top: unset;
          right: unset;
          left: calc(clamp(28px, calc(8.6331vw - 2.21585px), 64px) * -1);
          bottom: 0;
        }
      }

      figure {
        align-self: center;
        width: 95vw;
      }
    }
  }

  #history {
    margin-top: clamp(64px, 20.83333vw, 160px);

    @media(min-width:1300px) {
      margin-top: calc(clamp(64px, 20.83333vw, 160px) - 160px);
    }

    table {
      width: clamp(720px, 95vw, 1290px);
      margin: 100px auto 0;
      border-collapse: collapse;

      tbody tr {
        border-top: 1px solid var(--text-black);

        &:last-child {
          border-bottom: 1px solid var(--text-black);
        }

        :is(th, td) {
          vertical-align: top;
          padding: 1em;
          line-height: 2;
        }

        th {
          max-width: 428px;
          padding-right: 1.5em;
          white-space: nowrap;

          .date_box {
            display: flex;
            justify-content: start;
            align-items: center;
            gap: 2em;

            span {
              flex-basis: 0;
              display: inline-block;
            }

            .year {
              min-width: 3.4375em;
              text-align: end;
            }

            .jp_year {
              min-width: 4.375em;
              text-align: justify;
            }

            .month {
              min-width: 2.5em;
              text-align: end;
            }
          }
        }

        td {
          padding-left: 1.5em;
        }
      }
    }

    @media(max-width: 1299px) {
      table {
        width: 90%;

        tbody tr {
          :is(th, td) {
            display: block;
            width: 100%;
            padding: 1em;
            border-inline: 1px solid var(--text-black);
          }

          th {
            max-width: unset;
            background-color: var(--pale-green);
          }
        }
      }
    }

    @media(max-width: 767px) {
      table {
        margin-top: min(13.03781vw, 100px);
      }
    }
  }
}

/* --------------- 施工実績（カテゴリ一覧） --------------- */

#works_category {
  .category_list {
    display: flex;
    flex-wrap: wrap;
    gap: min(calc(18.064516vw - 186.838708px), 160px);
    justify-content: start;
    align-items: center;
    width: min(calc(83.870968vw + 109.677416px), 1720px);
    margin: 112px auto 0;

    .category_panel {
      width: min(calc(15.483871vw + 166.709677px), 464px);
      border: 1px solid var(--text-black);
      border-radius: 22px;
      box-shadow: 3px 3px 3px var(--shadow-black);

      a {
        display: flex;
        flex-direction: column;
        justify-content: end;
        align-items: stretch;
        width: 100%;
        height: 100%;
        padding: min(calc(1.290323vw + 7.225801px), 32px);
        text-decoration-line: none;

        &:hover h3::after {
          transform: rotate(360deg);
        }


        h3 {
          position: relative;
          margin-top: min(calc(0.645161vw + 19.6129px), 32px);
          padding-left: min(calc(0.645161vw + 19.6129px), 32px);
          font-size: min(calc(0.645161vw + 19.6129px), 32px);
          font-weight: 400;

          &::before {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            display: block;
            width: min(calc(1.290322vw + 39.2258px), 64px);
            aspect-ratio: 1 / 1;
            border-radius: 50%;
            background-color: var(--sub-green);
            z-index: -1;
          }

          &::after {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            display: block;
            width: 24px;
            aspect-ratio: 1 / 1;
            background: url(../image/i_arrow.svg) center center / contain no-repeat;
            transition: 0.2s;
          }
        }

        img {
          margin-top: 36px;
          width: 100%;
          aspect-ratio: 4 / 3;
          border-radius: 11px;
          object-fit: cover;
        }
      }
    }
  }
}

@media (max-width: 1299px) {
  #works_category {
    .category_list {
      justify-content: space-evenly;
      gap: clamp(64px, calc(27.87194vw - 198.0565px), 164px) clamp(16px, calc(27.87194vw - 198.0565px), 164px);
      width: min(calc(30.885123vw + 498.80226px), 900px);

      &:after {
        content: "";
        display: block;
        width: min(calc(16.572505vw + 152.72315px), 368px);
        height: 1px;
      }

      .category_panel {
        width: min(calc(16.572505vw + 152.72315px), 368px);

        a {
          padding: clamp(16px, calc(1.506591vw + 4.42938px), 24px);

          h3 {
            margin-top: min(calc(1.506591vw + 8.42937px), 28px);
            padding-left: min(calc(1.506591vw + 8.42937px), 28px);
            font-size: min(calc(1.506591vw + 8.42937px), 28px);

            &::before {
              width: min(calc(3.013182vw + 16.85874px), 56px);
            }
          }
        }
      }
    }
  }
}

@media (max-width: 767px) {
  #works_category {
    .category_list {
      flex-direction: column;
      gap: 48px;
      width: 90%;

      .category_panel {
        width: min(90%, 384px);

        a {
          h3 {
            margin-top: clamp(16px, calc(2.684564vw + 7.4093px), 28px);
            padding-left: clamp(16px, calc(2.684564vw + 7.4093px), 28px);
            font-size: clamp(16px, calc(2.684564vw + 7.4093px), 28px);

            &::before {
              width: clamp(32px, calc(5.369128vw + 14.8186px), 56px);
            }
          }
        }
      }
    }
  }
}


/* --------------- 施工実績（記事一覧） --------------- */
#works_article {
  .works_list {
    display: flex;
    flex-wrap: wrap;
    gap: 108px min(calc(10vw - 104px), 88px);
    justify-content: start;
    align-items: center;
    width: min(calc(83.870968vw + 109.677416px), 1720px);
    margin: 148px auto 0;

    .works_panel {
      position: relative;
      width: min(calc(13.54839vw + 103.87093px), 364px);
      border: 1px solid var(--text-black);
      border-radius: 22px;
      box-shadow: 3px 3px 3px var(--shadow-black);

      &::after {
        content: "";
        position: absolute;
        right: min(calc(0.96774vw - 2.58062px), 16px);
        bottom: 16px;
        display: block;
        width: 24px;
        aspect-ratio: 1 / 1;
        background: url(../image/i_arrow.svg) center / contain no-repeat;
        transition: 0.2s;
      }

      &:hover::after {
        transform: rotate(360deg);
      }

      a {
        display: block;
        width: 100%;
        height: 100%;
        padding: min(calc(3.87096vw - 42.32248px), 32px);
        text-decoration-line: none;

        img {
          width: 300px;
          aspect-ratio: 1 / 1;
          object-fit: cover;
          border-radius: 11px;
        }

        p {
          margin-top: 8px;
          line-height: 2;
        }
      }
    }
  }

  .pagination {
    margin-top: 108px;
  }
}

@media(max-width: 1299px) {
  #works_article {
    .works_list {
      gap: min(calc(9.03955vw - 5.42374px), 108px) min(calc(10.54614vw - 48.99436px), 88px);
      width: min(calc(21.09228vw + 542.01128px), 816px);

      .works_panel {
        width: min(calc(5.27307vw + 295.50282px), 364px);

        &::after {
          right: 16px;
          bottom: 16px;
        }

        a {
          padding: min(calc(3.01318vw - 7.14122px), 32px);
        }
      }
    }
  }
}

@media(max-width: 767px) {
  #works_article {
    .works_list {
      flex-direction: column;
      gap: 48px;
      width: 90%;
      margin-top: 19.27083vw;

      .works_panel {
        width: min(90%, 364px);

        a {
          padding: clamp(8px, calc(28.91566vw - 78.74698px), 32px);
        }

      }
    }
  }
}


/* --------------- 施工実績詳細 --------------- */
#works_detail {
  .date {
    margin: 16px 0 0 clamp(50px, 10vw, 100px);
  }

  .main_row {
    display: flex;
    justify-content: space-between;
    align-items: start;
    width: calc(100% - 200px);
    margin: 40px auto 0;

    .main_image {
      width: min(47.2093%, 812px);

      figure {
        a {
          border-radius: 22px;

          img {
            aspect-ratio: 4 / 3;
            object-fit: cover;
            border-radius: clamp(11px, calc(1.19565vw - 0.9565px), 22px);
            box-shadow: 3px 3px 3px var(--shadow-black);
          }
        }

        figcaption {
          margin-top: 8px;
          font-size: 14px;
          line-height: 1.5;
        }
      }
    }

    .info {
      width: min(47.2093%, 812px);

      dl {
        dt {
          padding-top: 24px;
          font-weight: 700;
        }

        dd {
          padding-block: 16px 24px;
          border-bottom: 1px solid var(--text-black);
        }
      }
    }
  }

  .sub_row {
    display: flex;
    justify-content: start;
    align-items: start;
    gap: 32px 4.60208vw;
    width: calc(100% - 200px);
    margin: min(7.8125vw, 150px) auto 0;

    figure {
      position: relative;
      width: min(calc(21.29032vw - 48.77416px), 360px);

      a {
        border-radius: clamp(11px, calc(1.19565vw - 0.9565px), 22px);

        img {
          width: 100%;
          aspect-ratio: 4 / 3;
          border-radius: clamp(11px, calc(1.19565vw - 0.9565px), 22px);
          box-shadow: 3px 3px 3px var(--shadow-black);
        }
      }

      figcaption {
        margin-top: 8px;
        font-size: 14px;
        line-height: 1.5;
      }


      &.before::before {
        content: "改修前";
        background-color: #d0dcf5;

      }

      &.after::before {
        content: "改修後";
        background-color: var(--sub-green);

      }

      &.before::before,
      &.after::before {
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: fit-content;
        aspect-ratio: 1 / 1;
        padding: 8px;
        border: 6px solid #fff;
        outline: 1px solid var(--text-black);
        border-radius: 50%;
        box-shadow: 3px 3px 3px var(--shadow-black);
        font-family: "M PLUS Rounded 1c", sans-serif;
        font-size: clamp(14px, 0.65217vw + 7.4783px, 20px);
        font-weight: 700;
        text-align: center;
        transform: translate3d(-50%, -50%, 0) rotate(0.03deg);
        z-index: 2;
      }
    }
  }
}

@media(max-width: 999px) {
  #works_detail {
    .main_row {
      flex-direction: column;
      gap: clamp(16px, calc(6.92641vw - 37.19483px), 32px);
      justify-content: start;
      align-items: center;
      width: calc(100% - clamp(100px, 20vw, 200px));

      .main_image {
        width: 100%;

        figure {
          a {
            border-radius: clamp(11px, calc(1.61765vw + 5.82352px), 22px);

            img {
              border-radius: clamp(11px, calc(1.61765vw + 5.82352px), 22px);
            }
          }
        }
      }

      .info {
        width: 100%;
      }
    }

    .sub_row {
      flex-wrap: wrap;
      row-gap: 48px;
      width: calc(100% - clamp(100px, 20vw, 200px));
      margin-top: clamp(48px, calc(6.92641vw - 5.19483px), 64px);

      figure {
        width: 45%;

        &.before::before,
        &.after::before {
          font-size: clamp(14px, calc(2.58621vw - 5.8621px), 20px);
        }

        a {
          border-radius: clamp(11px, calc(4.74138vw - 25.4138px), 22px);

          img {
            border-radius: clamp(11px, calc(4.74138vw - 25.4138px), 22px);
          }
        }
      }
    }
  }
}

@media(max-width: 767px) {
  #works_detail {
    .main_row {
      .info {
        dl {
          dt {
            padding-top: 21px;
          }

          dd {
            padding-block: 14px 21px;
          }
        }
      }
    }

    .sub_row {
      figure {
        width: 100%;

        &.before::before,
        &.after::before {
          font-size: clamp(14px, calc(1.33929vw + 9.71427px), 20px);
        }

        a {
          border-radius: clamp(11px, calc(2.45536vw + 3.14285px), 22px);

          img {
            border-radius: clamp(11px, calc(2.45536vw + 3.14285px), 22px);
          }
        }
      }
    }
  }
}

/* -------------- 施工実績詳細（比較タイプ） ------------- */
#works_detail_comparison {
  .date {
    margin: 16px 0 0 clamp(50px, 10vw, 100px);
  }

  .comparison_wrap {
    position: relative;
    margin-top: 200px;

    .label {
      position: sticky;
      top: 84px;
      display: flex;
      gap: 140px;
      justify-content: center;
      align-items: center;
      background-color: var(--main-green);
      z-index: 3;

      p {
        width: 480px;
        padding-block: 24px;
        font-size: 24px;
        color: #fff;
        text-align: center;
      }
    }

    .label_sp {
      background-color: var(--main-green);
      display: none;

      p {
        padding: 24px;
        font-size: 24px;
        color: #fff;
        text-align: center;
        word-break: keep-all;
        overflow-wrap: break-word;
      }
    }

    .comparison_box {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      padding-block: 120px;

      .img_wrap {
        display: flex;
        gap: 140px;
        justify-content: center;
        align-items: center;
        position: relative;
        z-index: 2;

        .img_before,
        .img_after {

          a {
            border-radius: 22px;

            img {
              width: 480px;
              aspect-ratio: 4 / 3;
              object-fit: cover;
              border-radius: 22px;
              box-shadow: 3px 3px 3px var(--shadow-black);
            }
          }

          figcaption {
            margin-top: 8px;
            font-size: 14px;
            line-height: 1.5;
          }
        }
      }

      .bg_before,
      .bg_after {
        position: absolute;
        font-size: min(calc(10vw + 30px), 160px);
        font-weight: 900;
        line-height: 1;
        -webkit-user-select: none;
        user-select: none;
      }

      .bg_before {
        top: 60px;
        left: 0;
      }

      .bg_after {
        bottom: 60px;
        right: 0;
      }

      &:nth-of-type(odd) {
        background-color: var(--pale-green);

        .bg_before,
        .bg_after {
          color: #fff;
        }
      }

      &:nth-of-type(even) {
        background-color: #fff;

        .bg_before,
        .bg_after {
          color: var(--pale-green);
        }
      }
    }
  }
}

@media(max-width: 1299px) {
  #works_detail_comparison {
    .comparison_wrap {
      margin-top: clamp(64px, calc(25.56391vw - 132.33083px), 200px);

      .label {
        gap: min(7.69231vw, 100px);

        p {
          width: min(36.92308vw, 480px);
        }
      }

      .comparison_box {

        .img_wrap {
          gap: min(7.69231vw, 100px);

          .img_before,
          .img_after {
            a {
              img {
                width: min(36.92308vw, 480px);
              }
            }
          }
        }
      }
    }
  }
}

@media(max-width: 767px) {
  #works_detail_comparison {
    .comparison_wrap {
      .label {
        display: none;
      }

      .label_sp {
        display: block;
      }

      .comparison_box {


        .img_wrap {
          width: min(90%, 480px);

          .img_before {
            position: absolute;
            top: 0;
            left: 0;
          }

          .img_before,
          .img_after {
            transition: 0.2s;

            a {

              img {
                width: 100%;
              }
            }
          }
        }

        .bg_before,
        .bg_after {
          transition: 0.2s;
        }

        .hide {
          opacity: 0;
          z-index: -1;
        }
      }
    }
  }
}

/* --------------- お知らせ --------------- */

#news {
  ul {
    width: min(90%, 1290px);
    margin-inline: auto;

    li {
      display: flex;
      gap: 4em;
      justify-content: start;
      align-items: center;
      border-top: 1px solid var(--text-black);
      padding: 2em 1em;

      &:last-child {
        border-bottom: 1px solid var(--text-black);
      }

      time {
        width: 11ex;
        font-size: 14px;
        color: var(--pale-black);
      }

      div {
        line-height: 1.5;
        text-wrap: pretty;
      }
    }
  }

  .pagination {
    margin-top: 52px;
  }
}

@media(max-width: 767px) {
  #news {
    ul {
      li {
        flex-direction: column;
        gap: 1em;
        align-items: start;
      }
    }
  }
}

/* --------------- お知らせ詳細 --------------- */

#news_detail {
  width: min(90%, 700px);
  margin: auto;

  .article_ttl {
    h1 {
      font-size: 36px;
      text-align: start;
    }

    time {
      display: block;
      margin-top: 16px;
      font-size: 16px;
      color: var(--pale-black);
      text-align: start;
    }
  }

  .article_content {
    margin-top: 60px;
  }

  .prev_next {
    display: flex;
    flex-wrap: wrap;
    gap: 28px 4px;
    justify-content: space-between;
    align-items: center;
    margin-top: 140px;

    @media (max-width:767px) {
      justify-content: center;

      div:nth-of-type(1),
      div:nth-of-type(3) {
        flex: 0 1 calc(50% - 2px);
      }

      div:nth-of-type(2) {
        order: 3;
        flex: 0 1 100%;
      }
    }

    .g_button {
      margin: auto;
      padding: 1.5em min(10vw, 3em);
    }
  }
}



/* --------------- 採用情報代替ページ --------------- */
#recruit_alternate {

  .notice {
    position: relative;
    margin: 64px auto 0;
    font-size: 36px;
    text-align: center;
    line-height: 2.5;
    z-index: 2;

    .pen {
      position: relative;
      margin-inline: -0.25em 0;
      white-space: nowrap;

      .pen_svg {
        position: absolute;
        left: 0;
        bottom: -32px;
        width: 100%;
        aspect-ratio: 50 / 9;
        stroke-dasharray: 276 278;
        stroke-dashoffset: 277;
        transition: 0.3s 0.2s;

        path {
          stroke: var(--main-green);
        }
      }
    }

    &.animated .pen .pen_svg {
      stroke-dashoffset: 0;
    }

    .marker {
      position: relative;
      white-space: nowrap;

      &::after {
        content: "";
        position: absolute;
        top: -0.25em;
        left: -0.25em;
        display: block;
        width: calc(100% + 0.5em);
        height: calc(100% + 0.5em);
        background: url(../image/marker.png) top 3px center / contain no-repeat;
        z-index: -5;
      }

      &::before {
        content: "";
        position: absolute;
        top: -0.25em;
        left: -0.25em;
        display: block;
        width: calc(100% + 0.5em);
        height: calc(100% + 0.5em);
        background-color: #fff;
        z-index: -3;
        transform: translateX(0) translateY(0);
        transition: 0.2s 0.75s;
      }
    }

    &.animated .marker::before {
      transform: translateX(100%) translateY(-5px);
    }
  }


  .description {
    margin: 140px auto 0;
    text-align: center;
    line-height: 1.5;
  }

  .sun_wrap {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 400px;
    aspect-ratio: 1 / 1;
    margin: 164px auto 364px;

    a {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 350px;
      aspect-ratio: 1 / 1;
      padding-bottom: 0.5em;
      border-radius: 50%;
      background-color: var(--main-orange);
      color: #fff;
      font-size: 44px;
      font-weight: 900;
      text-align: center;
      line-height: 1.5;
      text-decoration-line: none;

      &::after {
        display: none;
      }

      &:hover {
        opacity: 1;
      }

      &:hover+.sun {
        opacity: 1;
      }
    }

    .sun {
      position: absolute;
      top: 0;
      left: 0;
      width: 400px;
      aspect-ratio: 1 / 1;
      opacity: 0;
      transition: .3s;
      z-index: -1;
      perspective: 10px;

      svg {
        overflow: visible;
        width: 100%;
        height: 100%;
        -webkit-transform-origin: center center;
        transform-origin: center center;
        animation: 20s infinite linear rotation;

        text {
          textPath {
            font-size: 9.35px;
            font-weight: 900;
            fill: var(--main-orange);
          }
        }
      }

      @media(any-hover:none) {
        opacity: 1;
      }
    }
  }
}

@media (max-width: 767px) {
  #recruit_alternate {
    .notice {
      font-size: 4.6875vw;

      .pen {
        .pen_svg {
          bottom: calc(4.6875vw * -0.888889);
        }
      }
    }

    .description {
      width: 90%;
      margin-top: min(20vw, 140px);
    }

    .sun_wrap {
      width: min(57.142857vw, 400px);
      margin: min(23.42857vw, 164px) auto min(52vw, 364px);

      a {
        width: min(50vw, 350px);
        font-size: min(6.28571vw, 44px);
      }

      .sun {
        width: min(57.142857vw, 400px);
      }
    }
  }
}

/* --------------- お問い合わせ --------------- */
#contact {
  width: min(85%, 900px);
  margin: auto;

  .required {
    margin-inline: 4px;
    padding: 2px 4px;
    background-color: var(--main-orange);
    color: #fff;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 14px;
    font-weight: 700;
  }

  form {
    width: 100%;
    margin: 80px auto 0;

    >p {
      margin: 0;
      padding: 0;
    }

    br {
      display: none;
    }

    label {
      display: block;
      margin-block: 1.5em 0.5em;
      width: fit-content;
      line-height: 1.5;
    }

    input:not([type=checkbox]) {
      width: 100%;
      margin-bottom: 4px;
      border-width: 2px;
      border-radius: 4px;
    }

    textarea {
      width: 100%;
      height: 150px;
      border-width: 2px;
      border-radius: 4px;
      resize: none;
    }

    input:focus,
    textarea:focus {
      outline-width: 4px;
      outline-color: var(--ex-green);
    }

    input:autofill {
      box-shadow: 0 0 1000px inset var(--pale-green);
    }

    .accept_box {
      width: 100%;
      margin-top: 80px;
      padding: 16px;
      text-align: center;
      background-color: var(--pale-green);

      label {
        display: flex;
        flex-direction: row;
        gap: 2em;
        margin-block: 1em;
      }
    }

    input[type=submit] {
      width: fit-content;
      margin: 80px auto 0 0;
      padding: 1.5em 6em;
      border-width: 1px;
      border-radius: 0;

      &[disabled] {
        color: var(--pale-black);
        background-color: #e8e8e8;

        &:hover {
          color: var(--pale-black);
          background-color: #e8e8e8;
        }
      }
    }
  }
}

/* --------------- お問い合わせ送信完了 --------------- */
#contact_thanks {
  width: 90%;
  margin: auto;

  .g_button {
    margin: 80px auto 0;
  }
}

/* --------------- サイトマップ --------------- */
#sitemap {
  .list_box {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-content: start;
    justify-items: center;
    align-items: start;
    width: min(1720px, 90%);
    margin: 64px auto 0;

    ul {
      list-style-position: inside;

      li {
        list-style-type: disc;
        margin-block: 0.5em;
        line-height: 1.5;

        ul {
          margin-left: 2em;

          li {
            list-style-type: circle;

            ul {
              margin-left: 2em;

              li {
                list-style-type: square;
              }
            }
          }
        }
      }
    }
  }
}

@media(max-width: 767px) {
  #sitemap {
    .list_box {
      display: block;

      div {
        width: 100%;
        margin-left: clamp(50px, 10vw, 100px);
      }
    }
  }
}


/* --------------- お知らせ用 --------------- */
#news_detail {
  .news_block {

    h2 {
      margin-left: 0;
      padding-block: 16px 8px;
      font-size: 28px;

      &::after {
        content: "";
        position: absolute;
        left: 0;
        top: unset;
        bottom: 0;
        display: block;
        width: 100%;
        height: 2px;
        background-color: var(--main-orange);
      }
    }

    h3 {
      position: relative;
      width: fit-content;
      padding-block: 16px 8px;
      padding-right: 24px;
      font-size: 24px;

      &::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        display: block;
        width: 100%;
        height: 2px;
        background-color: var(--main-green);
      }
    }

    h4 {
      position: relative;
      width: fit-content;
      padding-block: 16px 8px;
      ;
      font-size: 20px;

      &::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        display: block;
        width: 50%;
        height: 2px;
        background-color: var(--pale-black);
      }
    }

    p {
      margin-block: 16px;
      line-height: 2;
    }

    hr {
      margin-block: 16px;
    }

    blockquote {
      position: relative;
      width: min(calc(100% - 80px), 650px);
      margin: 32px auto;
      padding: 32px;
      background-color: #f4f4f4;
      line-height: 2;
      z-index: 2;

      &::before,
      &::after {
        content: "";
        position: absolute;
        display: block;
        width: 64px;
        aspect-ratio: 1 / 1;
        background: url(../image/double-quotation.svg) center/ contain no-repeat;
      }

      &::before {
        top: -32px;
        left: -32px;
        transform: rotate(180deg);
      }

      &::after {
        right: -32px;
        bottom: -32px;
      }
    }

    @media (max-width: 767px) {
      blockquote {
        width: min(calc(100% - 70px), 650px);

        &::before,
        &::after {
          width: 56px;
        }

        &::before {
          top: -28px;
          left: -28px;
        }

        &::after {
          right: -28px;
          bottom: -28px;
        }
      }
    }

    ul {
      list-style-type: disc;

      ul {
        list-style-type: circle;

        ul {
          list-style-type: square;
        }
      }
    }

    ol {
      list-style-type: decimal;

      ol {
        list-style-type: lower-alpha;

        ol {
          list-style-type: lower-roman;
        }
      }
    }

    ul,
    ol {
      margin-top: 16px;
      padding-left: 32px;
      list-style-position: outside;

      li {
        padding-block: 0.25em;
        line-height: 1.5;
        font-family: "M PLUS Rounded 1c", sans-serif;
        font-weight: 500;
        color: var(--text-black);
      }
    }
  }
}