/**
 * カスタムCSS
 *
 * テーマのスタイルを上書き・追加するためのファイルです。
 * このファイルは全てのテーマCSSの後に読み込まれます。
 */
.l-container--narrow {
  --content-width: 59.625rem;
  --container-width: calc(var(--content-width) + (var(--container-gutter) * 2));
}

.p-page__header--page {
  padding-left: 0;
  padding-right: 0;
}

.p-page__headline--md {
  font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.75rem); /* 20-28 */
}

.p-page__content--page {
  margin-top: clamp(3.125rem, 2.5rem + 3.13vw, 6.25rem); /* 50-100 */
  padding-left: 0;
  padding-right: 0;
}

.c-link-button--back span {
  flex-direction: row-reverse;
}

.c-link-button--back span::after {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14.541' height='14.334' viewBox='0 0 14.541 14.334'%3E%3Cg id='グループ_424' data-name='グループ 424' transform='translate(-4206.54 4412.48) rotate(-135)'%3E%3Cg id='グループ_423' data-name='グループ 423' transform='translate(140.053 6090) rotate(90)'%3E%3Cpath id='パス_1088' data-name='パス 1088' d='M0,9.372V0H9.372' fill='none' stroke='%23000' stroke-miterlimit='10' stroke-width='1'/%3E%3Cline id='線_1' data-name='線 1' x2='9.428' y2='9.428' fill='none' stroke='%23000' stroke-miterlimit='10' stroke-width='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
  width: .833125rem;
  height: .833125rem;
}

/* ヒーロ画像の固定ページテンプレート */
body.page-template-page-hero .l-site__inner {
  padding-top: calc(142 / 16 * 1rem);
}

.p-page__header--hero {
  display: grid;
  grid-template: 1fr / 1fr;
}

.p-page__header--hero > * {
  grid-area: 1 / 1;
}

.p-page__header--hero .p-page__thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-page__header--hero .l-container {
  position: relative;
  z-index: 1;
  align-self: start;
}

.p-page__header--hero .p-page__thumbnail ~ .l-container .p-page__headline {
  color: #fff;
}

.l-container--hero {
  --content-width: 67.625rem;
  --container-width: calc(var(--content-width) + (var(--container-gutter) * 2));
  padding-top: clamp(1.875rem, 1.525rem + 1.75vw, 3.625rem);
}