@charset "UTF-8";

/* お問い合わせページヘッダー（ace-life works.css から contact 用のみ抽出） */
:root {
  --color--main: #27813f;
  --color--accent: #ff8834;
}

body:has([data-title--en="contact"]),
body:has([data-title--en="privacy"]),
body:has([data-title--en="company"]) {
  --background-image: url("../images/works/page_header_bg_works.svg");

  background-image: var(--background-image);
  background-repeat: no-repeat;
  background-size: contain;

  @media (width <=1150px) {
    background-size: auto 340px;
  }

  @media (width <=767px) {
    --background-image: url("../images/works/md_page_header_bg__works.svg");
    background-size: contain;
  }
}

.page-header {
  --row-gap: min(3.2svw, 45px);

  display: flex;
  flex-direction: column;
  row-gap: var(--row-gap);
  width: min(1070px, calc(100% - 32px));
  padding-block-end: min(14.4svw, 208px);
  margin: 100px auto 30px;

  @media (width <=1600px) {
    margin: 0 auto 30px;
  }

  @media (width <=767px) {
    /* ヘッダーロゴ（.header-inner 83svw）と左端を揃える */
    width: 83svw;
    margin-inline: auto;
    margin-block: 0 30px;
    /* 固定ヘッダー分 + ロゴ下の余白（添付の ABOUT 位置準拠） */
    padding-block-start: calc(60px + 6svw);
    padding-block-end: 50svw;
  }

  @media (width <=480px) {
    padding-block-start: calc(60px + 8svw);
    padding-block-end: 35svw;
  }
}

.page-title {
  --font-size--en: clamp(2rem, 1.2571rem + 3.0476vw, 4rem);

  span {
    color: #555;
  }

  :is(h1, h2, h3, h4, h5, h6) {
    --column-gap: 58px;
    --font-size: 20px;

    display: flex;
    column-gap: var(--column-gap);
    align-items: flex-end;
    font-size: var(--font-size);
    font-weight: 400;

    @media (width <=480px) {
      --column-gap: 16px;
      --font-size: 15px;
    }

    &::before {
      font-size: var(--font-size--en);
      font-weight: 700;
      line-height: 1;
      color: var(--color--main);
      text-transform: uppercase;
      letter-spacing: 0.13em;
      content: attr(data-title--en);
    }
  }
}

.ace-breadcrumbs {
  --font-size: 15px;

  &>ul {
    display: flex;
    flex-wrap: wrap;

    li {
      font-size: var(--font-size);

      @media (width <=480px) {
        --font-size: 13px;
      }

      :is(a, span) {
        color: var(--color--main);
      }

      &:not(:last-child) {
        &::after {
          --padding-inline: 12px;
          --font-size-after: 1em;

          padding-inline: var(--padding-inline);
          font-size: var(--font-size-after);
          content: "＞";
          color: #666;

          @media (width <=480px) {
            --padding-inline: 8px;
            --font-size-after: 10px;
          }
        }
      }
    }
  }
}