/* ========== Page Hero (共通パーツ) ========== */
.p-page-hero {
  position: relative;
  overflow: hidden;
  padding: 96px 0 32px;
  border-bottom: 1px solid var(--color-gray-light);
}

.p-page-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 1120px;
  margin-inline: auto;
}

.p-page-hero__label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-gray);
  margin: 0 0 8px;
}

.p-page-hero__label-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--color-brand-amber);
  transform: rotate(45deg);
  flex-shrink: 0;
}

.p-page-hero__title {
  color: var(--color-text);
  margin: 0;
}

.p-page-hero__deco {
  position: absolute;
  right: 0;
  padding-right: 40px;
  bottom: -40px;
  background: linear-gradient(180deg, #ededed 0%, rgba(242, 242, 242, 0) 88.5%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
  margin: 0;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.p-page-hero__bc {
  max-width: 1120px;
  margin-inline: auto;
  padding: 12px 20px;
  display: flex;
  justify-content: flex-end;
}

.p-page-hero__bc .b-breadcrumb {
  max-width: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 768px) {
  .p-page-hero {
    padding: 64px 20px 24px;
  }

  .p-page-hero__deco {
    display: none;
  }

  .p-page-hero__bc {
    justify-content: flex-start;
  }

}

/* ========== ========== */

.c-more-link {
    --c-more-link-color: var(--color-brand-sky);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 5px;
    text-decoration: none;
    font-family: var(--font-base);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
    white-space: nowrap;
    /* 下線: テキスト幅は gray、右端アイコン幅だけブランドカラー */
    background-image: linear-gradient(
        to right,
        var(--color-gray-light) calc(100% - 24px),
        var(--c-more-link-color) calc(100% - 24px)
    );
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: 0 100%;
}

.c-more-link__text {
    display: inline-block;
}

.c-more-link__icon {
    display: block;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

.c-more-link:hover { opacity: 0.7; }

.c-more-link--amber { --c-more-link-color: var(--color-brand-amber); }
.c-more-link--sky   { --c-more-link-color: var(--color-brand-sky); }
.c-more-link--rose  { --c-more-link-color: var(--color-brand-rose); }
.c-more-link--blue     { --c-more-link-color: var(--color-brand-blue); }
.c-more-link--teal     { --c-more-link-color: var(--color-brand-teal); }
.c-more-link--lavender { --c-more-link-color: var(--color-brand-lavender); }

.c-more-link--full {
    display: flex;
}
.c-more-link--full .c-more-link__text {
    flex: 1;
}

.b-contact-cta {
    --b-contact-cta-bg:           #fff;
    --b-contact-cta-heading-color: var(--color-text);
    --b-contact-cta-label-color:   var(--color-gray);
    --b-contact-cta-dot-color:     var(--color-brand-rose);

    position: relative;
    padding: 80px 0 96px;
    overflow: hidden;
    border-top: 1px solid var(--color-gray-light);
    background: var(--b-contact-cta-bg);
}

.b-contact-cta__inner {
    position: relative;
    z-index: 1;
    width: 90vw;
    max-width: 920px;
    margin: 0 auto;
}

.b-contact-cta__title {
    text-align: center;
    margin-bottom: 32px;
}

.b-contact-cta__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 10px;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 400;
    font-style: italic;
    color: var(--b-contact-cta-label-color);
}

.b-contact-cta__label-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--b-contact-cta-dot-color);
    transform: rotate(45deg);
    flex-shrink: 0;
}

.b-contact-cta__heading {
    margin: 0;
    font-size: 28px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--b-contact-cta-heading-color);
}

.b-contact-cta__actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
}

.b-contact-cta__mail a,
.b-contact-cta__tel a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 450px;
    height: 100px;
    gap: 8px;
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: background-color 0.3s ease, opacity 0.3s ease;
}

.b-contact-cta__mail a {
    background-color: #262626;
    color: #fff;
    font-weight: 700;
    font-size: 18px;
}

.b-contact-cta__mail a:hover { background-color: var(--color-brand-rose); }

.b-contact-cta__mail img,
.b-contact-cta__tel img {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.b-contact-cta__tel a {
    flex-wrap: wrap;
    align-content: center;
    gap: 2px 8px;
    border: 1px solid #262626;
    background-color: #fff;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 24px;
    letter-spacing: 1px;
    color: var(--color-text);
}

.b-contact-cta__tel a p {
    width: 100%;
    margin: 0;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-gray-sub);
    font-family: var(--font-base);
    letter-spacing: 0;
}

/* z-index: 1 の __inner より背面に置くため ::after で実装 */
.b-contact-cta::after {
    content: "ContactContactContactContactContactContact";
    position: absolute;
    bottom: -24px;
    left: 0;
    white-space: nowrap;
    pointer-events: none;
    font-family: "Inter", sans-serif;
    font-style: italic;
    font-weight: 300;
    font-size: 200px;
    line-height: 1;
    background: linear-gradient(180deg, #f2f2f2 0%, rgba(242, 242, 242, 0) 88.5%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.b-contact-cta--blue {
    --b-contact-cta-bg: var(--color-brand-blue);
    --b-contact-cta-heading-color: #fff;
    --b-contact-cta-label-color:   rgba(255, 255, 255, 0.8);
    --b-contact-cta-dot-color:     rgba(255, 255, 255, 0.8);
}
.b-contact-cta--blue .b-contact-cta__tel a { border-color: transparent; }
.b-contact-cta--blue::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 88.5%);
    -webkit-background-clip: text;
    background-clip: text;
}

.b-contact-cta--sky {
    --b-contact-cta-bg: #b9d9f0;
}

.b-contact-cta--teal {
    --b-contact-cta-bg: var(--color-brand-teal);
    --b-contact-cta-heading-color: #fff;
    --b-contact-cta-label-color:   rgba(255, 255, 255, 0.8);
    --b-contact-cta-dot-color:     rgba(255, 255, 255, 0.8);
    border-top-color: transparent;
}
.b-contact-cta--teal .b-contact-cta__tel a {
    border-color: rgba(255, 255, 255, 0.6);
    background-color: transparent;
    color: #fff;
}
.b-contact-cta--teal .b-contact-cta__tel a p { color: rgba(255, 255, 255, 0.7); }
.b-contact-cta--teal::after {
    color: rgba(255, 255, 255, 0.15);
}

.b-contact-cta--rose {
    --b-contact-cta-bg:            var(--color-brand-rose);
    --b-contact-cta-heading-color: #fff;
    --b-contact-cta-label-color:   rgba(255, 255, 255, 0.8);
    --b-contact-cta-dot-color:     rgba(255, 255, 255, 0.8);
}
.b-contact-cta--rose .b-contact-cta__tel a { border-color: transparent; }
.b-contact-cta--rose::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 88.5%);
    -webkit-background-clip: text;
    background-clip: text;
}

.b-contact-cta--lavender {
    --b-contact-cta-bg: #ede7f6;
    border-top-color: transparent;
}

.b-contact-cta--amber {
    --b-contact-cta-bg: var(--color-brand-amber);
    --b-contact-cta-dot-color: var(--color-gray);
    border-top-color: transparent;
}
.b-contact-cta--amber .b-contact-cta__tel a { border-color: transparent; }
.b-contact-cta--amber::after {
    background: linear-gradient(180deg, #f3ae33 0%, #fbca72 88.5%);
    -webkit-background-clip: text;
    background-clip: text;
}

@media (max-width: 769px) {
    .b-contact-cta__actions { flex-direction: column; align-items: stretch; }
    .b-contact-cta__mail,
    .b-contact-cta__tel { width: 100%; }
    .b-contact-cta__mail a,
    .b-contact-cta__tel a { width: 100%; height: 72px; padding: 0 20px; overflow: hidden; }
    .b-contact-cta__tel a { font-size: 18px; letter-spacing: 0; }
    .b-contact-cta__mail img,
    .b-contact-cta__tel img { width: 24px; height: 24px; }
    .b-contact-cta__tel a p { font-size: 10px; line-height: 1.2; }
    .b-contact-cta { padding-bottom: 48px; }
    .b-contact-cta::after { font-size: 80px; bottom: 0; }
}


/* b-breadcrumb */
.b-breadcrumb__list {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--color-text-sub);
}

.b-breadcrumb__item,
.b-breadcrumb__sep {
  display: flex;
  align-items: center;
}

.p-news .b-breadcrumb__item--current {
  min-width: 0;
}

.p-news .b-breadcrumb__item--current span {
  display: block;
  max-width: 12em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.b-breadcrumb__link {
  color: var(--color-text-sub);
  text-decoration: underline;
}

@media (max-width: 768px) {
  .b-breadcrumb__list {
    justify-content: flex-start;
  }
}