@charset "UTF-8";

/* =====================
  footer
===================== */
@layer style {
  .footer {
    padding-block: 72px 26px;

    @media (width <=768px) {
      padding-block-start: calc((100 / 390) * 80 * 1vw);
      padding-block-end: calc((100 / 390) * 28 * 1vw);
    }

    .footer_wrap {
      margin-inline: 120px;
      display: block grid;
      align-items: start;
      grid-template-columns: max-content auto;
      justify-content: space-between;

      @media only screen and (width <=768px) {
        margin-inline: calc((100 / 390) * 16 * 1vw);
        grid-template-columns: 1fr;
      }

      /* ==== nav ==== */
      .main-nav {
        grid-area: 1/1/2/2;

        &>ul {
          display: block grid;
          grid-auto-flow: column;
          grid-template-rows: repeat(2, max-content);
          column-gap: 80px;

          @media only screen and (width <=768px) {
            display: block flow;

            &>li {
              border-block-start: 1px solid #b7b7b7;

              &:last-child {
                border-block-end: 1px solid #b7b7b7;
              }
            }
          }

          .nav-unit {
            grid-area: 1/2/3/3;
          }

          .head {
            position: relative;
            font-weight: 500;
            line-height: 1.4;
            color: #102647;

            @media only screen and (width <=768px) {
              display: block flow;
              padding-inline: calc((100 / 390) * 16 * 1vw);
              padding-block: calc((100 / 390) * 15.4 * 1vw);
            }

            &::before {
              content: attr(data-text);
              display: block flow;
              font-family: var(--serif);
              font-size: 14px;
              font-weight: 500;
              line-height: 1.4;
              color: #acacac;
            }

            @media only screen and (width <=768px) {
              &::before {
                font-size: calc((100 / 390) * 13 * 1vw);
              }
            }
          }

          .sub-list {
            &>li {
              margin-block-start: 16px;

              @media only screen and (width <=768px) {
                margin-block-start: 0;
              }

              .sub {
                font-size: 14px;
                font-weight: 500;
                line-height: 1.4;
                color: #575757;
                display: block flex;
                align-items: center;
                gap: 4px;

                @media only screen and (width <=768px) {
                  font-size: calc((100 / 390) * 14 * 1vw);
                  gap: calc((100 / 390) * 4 * 1vw);
                }

                &::before {
                  content: '';
                  display: block flow;
                  inline-size: 8px;
                  block-size: 1px;
                  background-color: #575757;
                  flex-shrink: 0;
                }

                @media only screen and (width <=768px) {
                  &::before {
                    inline-size: calc((100 / 390) * 8 * 1vw);
                  }
                }
              }
            }
          }
        }

        /* ==== SP Menu Toggle ==== */
        @media (width <=768px) {
          .acc-wrap {
            display: block grid;
            grid-template-columns: auto calc((100 / 390) * 40 * 1vw);
            align-items: center;

            .u-hover {
              grid-column: 1/2;
            }

            .acc-toggle-btn {
              grid-column: 2/3;
              position: relative;
              display: block;
              cursor: pointer;
              border: 1px solid #b7b7b7;
              inline-size: calc((100 / 390) * 24 * 1vw);
              aspect-ratio: 1/1;
            }

            .acc-toggle-btn::before,
            .acc-toggle-btn::after {
              content: '';
              position: absolute;
              display: inline-block;
              background: #b7b7b7;
              vertical-align: middle;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              transition: all 0.5s ease-out;
            }

            .acc-toggle-btn::before {
              inline-size: calc((100 / 390) * 11 * 1vw);
              block-size: 1px;
            }

            .acc-toggle-btn::after {
              inline-size: 1px;
              block-size: calc((100 / 390) * 11 * 1vw);
            }

            .acc-detail {
              grid-column: 1/3;
              display: grid;
              grid-template-rows: 0fr;
              transition: grid-template-rows 0.5s ease-out;

              .sub-list {
                overflow: hidden;

                & li {
                  border-block-start: solid 1px #b7b7b7;

                  .sub {
                    position: relative;
                    inline-size: 100%;
                    padding-block: calc((100 / 390) * 17 * 1vw);
                    padding-inline: calc((100 / 390) * 32 * 1vw);
                    display: block flex;
                    gap: calc((100 / 390) * 8 * 1vw);
                    align-items: center;

                    &::before {
                      inline-size: calc((100 / 390) * 8 * 1vw);
                      block-size: 1px;
                    }
                  }
                }
              }
            }

            &.open {
              .acc-detail {
                grid-template-rows: 1fr;
              }
            }

            &.open {
              .acc-toggle-btn::after {
                inline-size: 0;
              }
            }
          }
        }
      }

      /* ==== 会社情報 ==== */
      .footer_info {
        grid-area: 1/2/3/3;

        @media (width <=768px) {
          grid-area: 2/1/3/2;
          margin-block-start: calc((100 / 390) * 63 * 1vw);

          & img {
            display: block flow;
            inline-size: calc((100 / 390) * 306 * 1vw);
            margin-inline: auto;
          }
        }

        .address {
          font-size: 15px;
          color: #332727;
          margin-block-start: 16px;
          margin-inline-start: 16px;

          @media (width <=768px) {
            inline-size: fit-content;
            font-size: calc((100 / 390) * 13 * 1vw);
            margin-block-start: calc((100 / 390) * 8 * 1vw);
            margin-inline: auto;
          }

          .item[data-id='2'] {
            margin-block-start: 13px;

            @media (width <=768px) {
              margin-block-start: calc((100 / 390) * 8 * 1vw);
            }
          }
        }
      }

      .pdf-btn {
        display: block flow;
        margin-block-start: 48px;
        padding-inline: 32px;

        @media only screen and (width <=768px) {
          margin-block-start: calc((100 / 390) * 25 * 1vw);
          padding-inline: calc((100 / 390) * 24 * 1vw);
          padding-block: calc((100 / 390) * 14 * 1vw);
          margin-inline: auto;
        }
      }
    }

    .foot {
      margin-block-start: 32px;
      padding-inline: 40px;

      @media only screen and (width <=768px) {
        margin-block-start: calc((100 / 390) * 56 * 1vw);
        padding-inline: calc((100 / 390) * 16 * 1vw);
      }

      .sub-nav {
        position: relative;
        padding-inline: 80px;

        @media only screen and (width <=768px) {
          padding-inline: 0;
        }

        &>ul {
          display: block flex;
          gap: 60px;
          font-size: 13px;
          color: #797979;

          @media only screen and (width <=768px) {
            font-size: calc((100 / 390) * 12 * 1vw);
            justify-content: center;
          }
        }
      }

      .copyright {
        border-top: 1px solid #d9d9d9;
        display: block flow;
        font-family: var(--serif);
        font-size: 12px;
        text-align: center;
        color: #848484;
        margin-block-start: 24px;
        padding-block-start: 16px;

        @media only screen and (width <=768px) {
          font-size: calc((100 / 390) * 11 * 1vw);
          margin-block-start: calc((100 / 390) * 19 * 1vw);
          padding-block-start: calc((100 / 390) * 18 * 1vw);
        }
      }
    }
  }
}