/*
Theme Name: B-systems
Theme URI: https://b-systems.co.jp
Author: B-systems
Author URI: https://b-systems.co.jp
Description: 株式会社B-systems コーポレートサイト用オリジナルテーマ
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: bsystems
*/

/* ==========================================================================
   B-systems - TOP page
   ========================================================================== */

:root {
  --color-navy: #323f5b;
  --color-navy-light: #6597b0;
  --color-yellow: #fbc900;
  --color-teal: #008eb2;
  --color-amber: #d18f00;
  --color-text: #3d3d3d;
  --color-footer: #22202b;
  --color-watermark: #c8c8c8;

  --font-jp: "Noto Sans JP", sans-serif;
  --font-serif: "Noto Serif JP", serif;
  --font-en: "Inter", sans-serif;

  --container-max: 1240px;
  --header-h: 70px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-jp);
  color: var(--color-text);
  background: #ffffff;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

section {
  position: relative;
  scroll-margin-top: var(--header-h);
}

/* ---------- Header ---------- */

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-h);
  background: #ffffff;
  z-index: 1000;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.2s ease;
}

.header__inner {
  width: 100%;
  height: 100%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header__logo {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 5px 0 5px 30px;
}

.header__logo img {
  height: 54px;
  width: auto;
  display: block;
}

.header__nav {
  display: flex;
  align-items: center;
  gap: 44px;
}

.header__nav-list {
  display: flex;
  align-items: center;
  gap: 0;
}

.header__nav-list li {
  position: relative;
  padding: 0 20px;
  border-right: 1px solid #ddd;
}

.header__nav-list li:last-child {
  border-right: none;
}

.header__nav-list a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  position: relative;
}

.header__nav-en {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 15px;
  color: var(--color-text);
  letter-spacing: 0.5px;
}

.header__nav-jp {
  margin-top: -3px;
  font-family: var(--font-jp);
  font-size: 11px;
  line-height: 1;
  color: #8a8a8a;
}

.header__nav-list a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 2px;
  background: var(--color-navy);
  transition: width 0.2s ease;
}

.header__nav-list a:hover::after {
  width: 100%;
}

.header__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 200px;
  height: var(--header-h);
  background: var(--color-yellow);
  color: var(--color-text);
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 16px;
  transition: filter 0.2s ease;
}

.header__cta:hover {
  filter: brightness(0.96);
}

.header__cta-icon {
  width: 20px;
  height: auto;
}

.header__mobile-actions {
  display: none;
  align-items: center;
  height: 100%;
  gap: 8px;
}

.header__mail {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--header-h);
  height: 100%;
  flex-shrink: 0;
  background: var(--color-yellow);
  transition: filter 0.2s ease;
}

.header__mail:hover {
  filter: brightness(0.96);
}

.header__mail img {
  width: 40%;
  height: auto;
}

.header__toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.header__toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-text);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.header__toggle.is-active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.header__toggle.is-active span:nth-child(2) {
  opacity: 0;
}

.header__toggle.is-active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  height: 100vh;
  min-height: 520px;
  display: flex;
  align-items: center;
  padding: var(--header-h) 8vw 60px;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: -2;
  transform: scale(1);
  animation: heroZoom 10s ease-out forwards;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.15) 55%, rgba(0, 0, 0, 0) 100%);
}

@keyframes heroZoom {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.08);
  }
}

.hero__inner {
  max-width: 620px;
}

.hero__title {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: clamp(30px, 3.6vw, 52px);
  color: #ffffff;
  line-height: 1.3;
  text-shadow: -1px 10px 18px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateY(28px);
  animation: heroTextIn 1s ease-out 0.4s forwards;
}

.hero__text {
  margin-top: 32px;
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: clamp(13px, 1.2vw, 18px);
  color: #ffffff;
  line-height: 1.85;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateY(28px);
  animation: heroTextIn 1s ease-out 0.75s forwards;
}

/* Only forces a break after "株式会社B-systems|" on narrow screens, where
   the full first line would otherwise wrap mid-phrase. */
.hero__text-break {
  display: none;
}

@keyframes heroTextIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__bg {
    animation: none;
  }

  .hero__title,
  .hero__text {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ---------- Watermark (decorative giant background text) ---------- */

.message__watermark,
.service__watermark,
.news__watermark,
.contact__watermark,
.contact-page__watermark {
  font-family: "Hiragino Kaku Gothic StdN", var(--font-jp);
  font-weight: 900;
  color: var(--color-watermark);
  opacity: 0.5;
  display: block;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

/* ---------- Message ---------- */

.message {
  padding: 100px 6vw 120px;
  overflow: hidden;
}

.message__watermark {
  display: block;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(50px, 8vw, 90px);
  text-align: left;
}

.message__inner {
  position: relative;
  max-width: var(--container-max);
  margin: 20px auto 0;
  border-radius: 4px;
}

/* The photo sits as a full-bleed background behind the text rather than
   in its own column, so text and image overlap generously at every size.
   Fades only right at the edge (soft vignette) so it dissolves into the
   surrounding white section instead of showing a hard rectangular edge. */
.message__photo {
  position: absolute;
  top: 34%;
  left: -6%;
  right: -6%;
  bottom: -18%;
  z-index: 0;
  /* Two gradients intersected (vertical fade x horizontal fade) instead
     of one radial gradient — this box is much wider than it is tall, so
     a radial fade never reaches its edges within the box's short height
     and ends up looking like a hard-edged rectangle. */
  mask-image:
    linear-gradient(to bottom, transparent 0%, #000 20%, #000 72%, transparent 100%),
    linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, #000 20%, #000 72%, transparent 100%),
    linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-composite: intersect;
  -webkit-mask-composite: source-in;
}

.message__photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.message__body {
  position: relative;
  z-index: 1;
  max-width: 700px;
  margin: 0 auto;
  padding: 100px 24px;
}

.message__title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(28px, 3.2vw, 46px);
  line-height: 1.3;
  margin-bottom: 36px;
  /* Top layer: the moving light band (must be listed first so its
     transparent areas let the solid gradient beneath show through).
     Bottom layer: the static navy gradient that fills the letterforms. */
  background-image:
    linear-gradient(110deg, transparent 40%, rgba(255, 255, 255, 0.75) 48%, #ffffff 50%, rgba(255, 255, 255, 0.75) 52%, transparent 60%),
    linear-gradient(90deg, var(--color-navy-light), var(--color-navy));
  background-size: 300% 100%, 100% 100%;
  background-repeat: no-repeat;
  background-position: -220% 0, 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: titleShimmer 5.5s ease-in-out 0.5s infinite;
}

.message__title-bar {
  display: inline-block;
  width: clamp(60px, 7vw, 130px);
  height: 2px;
  margin-left: 18px;
  margin-bottom: 0.4em;
  vertical-align: middle;
  background-image:
    linear-gradient(110deg, transparent 40%, rgba(255, 255, 255, 0.85) 48%, #ffffff 50%, rgba(255, 255, 255, 0.85) 52%, transparent 60%),
    linear-gradient(90deg, var(--color-navy-light), var(--color-navy));
  background-size: 300% 100%, 100% 100%;
  background-repeat: no-repeat;
  background-position: -220% 0, 0 0;
  animation: titleShimmer 5.5s ease-in-out 0.5s infinite;
}

/* Below this width the bar no longer fits after "すべての現場に" and
   wraps onto its own line, which looks like a stray dash — hide it
   rather than let it drop down. */
@media (max-width: 430px) {
  .message__title-bar {
    display: none;
  }
}

@keyframes titleShimmer {
  0% {
    background-position: -220% 0, 0 0;
  }
  45% {
    background-position: 220% 0, 0 0;
  }
  100% {
    background-position: 220% 0, 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .message__title,
  .message__title-bar {
    animation: none;
    background-position: -220% 0, 0 0;
  }
}

.message__text {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(14px, 1.1vw, 17px);
  line-height: 2.1;
  letter-spacing: 0.5px;
  color: var(--color-text);
  text-shadow: 0 1px 14px rgba(255, 255, 255, 0.85), 0 1px 2px rgba(255, 255, 255, 0.9);
}

/* ---------- Service ---------- */

.service {
  padding: 110px 6vw;
  color: #ffffff;
}

.service__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  z-index: -2;
}

/* iOS Safari ignores background-attachment: fixed; fall back to a normal
   scrolling background rather than leaving the section blank. */
@supports (-webkit-touch-callout: none) {
  .service__bg {
    background-attachment: scroll;
  }
}

.service::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.63);
  z-index: -1;
}

.service__watermark {
  display: block;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(50px, 8vw, 90px);
  text-align: left;
  color: #6c6c6c;
  opacity: 1;
  margin-bottom: 30px;
}

.service__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.service__grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 60px;
}

.service-card {
  background: #ffffff;
  border-radius: 4px;
  padding: 40px 20px 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

.service-card__icon {
  width: 90px;
  height: 90px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.service-card__icon img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.service-card__icon--stack {
  display: block;
  width: 90px;
  height: 78.5px;
}

.service-card__icon--stack img {
  position: absolute;
  max-width: none;
  max-height: none;
}

/* Web制作: two layered glyphs, positions match the source design's relative offsets */
.service-card__icon--web img:nth-child(1) {
  left: 0;
  top: 0;
  width: 100%;
  height: 83.1%;
}

.service-card__icon--web img:nth-child(2) {
  left: 15%;
  top: 29.9%;
  width: 70%;
  height: 70.1%;
}

/* 映像・音響設備: two layered glyphs, positions match the source design's relative offsets */
.service-card__icon--media img:nth-child(1) {
  left: 0;
  top: 0;
  width: 77.4%;
  height: 66.1%;
}

.service-card__icon--media img:nth-child(2) {
  left: 22.6%;
  top: 45.05%;
  width: 77.4%;
  height: 54.95%;
}

.service-card__title {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 22px;
  color: var(--color-navy);
  text-align: center;
}

.service__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 260px;
  height: 62px;
  background: var(--color-teal);
  color: #ffffff;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 18px;
  border-radius: 2px;
  transition: filter 0.2s ease, transform 0.2s ease;
}

.service__btn:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
}

.service__btn img {
  width: 18px;
  height: 18px;
  filter: brightness(0) invert(1);
}

/* ---------- News ---------- */

.news {
  padding: 150px 6vw 170px;
  overflow: hidden;
}

.news__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.12;
  z-index: -2;
}

.news__watermark {
  font-size: clamp(50px, 8vw, 90px);
  text-align: left;
  color: #8da2aa;
}

.news__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
}

.news__left {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 56px;
}

.news__card {
  flex: 1;
  min-width: 0;
  max-width: 700px;
  background: #ffffff;
  border-radius: 4px;
  padding: 44px 48px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

.news-list {
  display: flex;
  flex-direction: column;
}

.news-item {
  border-bottom: 1px solid #dcdcdc;
}

.news-item:first-child {
  border-top: 1px solid #dcdcdc;
}

.news-item__link {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 26px 4px;
  flex-wrap: wrap;
  border-radius: 4px;
  transition: background 0.2s ease, opacity 0.2s ease;
}

.news-item__link:hover {
  background: #f7f7f7;
  opacity: 0.85;
}

.news-item__date {
  font-family: var(--font-jp);
  font-size: 15px;
  letter-spacing: 1px;
  color: #333;
  flex: 0 0 100px;
}

.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1px;
  color: #ffffff;
}

.tag--news {
  background: var(--color-amber);
}

.news-item__title {
  font-family: var(--font-jp);
  font-size: 15px;
  letter-spacing: 1px;
  color: #333;
  flex: 1;
  min-width: 200px;
}

.news__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 280px;
  height: 62px;
  border: 2px solid var(--color-navy);
  border-radius: 54px;
  background: #ffffff;
  color: var(--color-text);
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 1.5px;
  transition: background 0.2s ease, color 0.2s ease;
}

.news__btn:hover {
  background: var(--color-navy);
  color: #ffffff;
}

.news__btn img {
  width: 20px;
  height: 20px;
}

/* ---------- Contact ---------- */

.contact {
  height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: -1;
}

.contact__panel {
  width: min(90vw, 720px);
  padding: 50px 40px;
  background: rgba(255, 255, 255, 0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
}

.contact__watermark {
  font-size: clamp(40px, 6vw, 63px);
  color: #8da2aa;
}

.contact__text {
  font-family: var(--font-jp);
  font-size: clamp(13px, 1.4vw, 16px);
  line-height: 2;
  letter-spacing: -0.3px;
  color: var(--color-text);
}

.contact__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 200px;
  height: 62px;
  background: var(--color-yellow);
  color: var(--color-text);
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 18px;
  transition: filter 0.2s ease;
}

.contact__btn:hover {
  filter: brightness(0.96);
}

.contact__btn img {
  width: 20px;
  height: auto;
}

/* ---------- Footer ---------- */

.footer {
  background: var(--color-footer);
  color: #ffffff;
  padding: 60px 6vw;
}

.footer__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}

.footer__brand {
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
}

.footer__logo {
  display: flex;
  align-items: center;
}

.footer__logo img {
  height: 52px;
  width: auto;
  display: block;
}

.footer__address {
  font-family: var(--font-en);
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: -0.3px;
}

.footer__nav ul {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
}

.footer__nav a {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 15px;
}

.footer__nav a:hover {
  color: var(--color-yellow);
}

/* ---------- To top ---------- */

.to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-navy);
  color: #ffffff;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  z-index: 900;
}

.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1100px) {
  .header__nav-list li {
    padding: 0 14px;
  }

  .service__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 960px) {
  :root {
    --header-h: 62px;
  }

  .header__inner {
    padding: 0 20px;
  }

  .header__nav {
    position: fixed;
    top: var(--header-h);
    right: 0;
    width: 70%;
    max-width: 360px;
    height: calc(100vh - var(--header-h));
    background: #ffffff;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 40px;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    box-shadow: -4px 0 30px rgba(0, 0, 0, 0.15);
  }

  .header__nav.is-open {
    transform: translateX(0);
  }

  .header__nav-list {
    flex-direction: column;
    gap: 28px;
  }

  .header__nav-list li {
    padding: 0;
    border-right: none;
  }

  .header__nav-en {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 1px;
  }

  .header__nav-jp {
    font-size: 12px;
  }

  .header__mobile-actions {
    display: flex;
  }

  .header__logo {
    padding-left: 0;
  }

  .header__logo img {
    height: 38px;
  }

  .message__body {
    padding: 60px 24px;
  }

  .news__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
  }

  /* Unwrap the left column so watermark, card and button become direct
     flex items of .news__inner and can be reordered independently, with
     the button moved to the very bottom of the section. */
  .news__left {
    display: contents;
  }

  .news__watermark {
    order: 1;
  }

  .news__card {
    order: 2;
    max-width: 100%;
  }

  .news__btn {
    order: 3;
    align-self: center;
  }

  .news-item__link {
    align-items: flex-start;
  }

  .news-item__title {
    flex-basis: 100%;
  }
}

@media (max-width: 640px) {
  :root {
    --header-h: 50px;
  }

  .header__logo img {
    height: 28px;
  }

  .header__toggle {
    width: 24px;
    height: 24px;
  }

  .hero {
    min-height: 520px;
    padding-left: 24px;
    padding-right: 24px;
  }

  .hero__title {
    font-size: clamp(22px, 7.8vw, 34px);
    white-space: nowrap;
  }

  .hero__text-break {
    display: inline;
  }

  .message,
  .service,
  .news {
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 70px;
    padding-bottom: 70px;
  }

  .message__body {
    padding: 28px 20px;
  }

  .message__title {
    font-size: clamp(26px, 8.6vw, 36px);
    white-space: nowrap;
  }

  .service__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .service-card {
    padding: 20px 10px 32px;
    gap: 20px;
  }

  .service-card__icon,
  .service-card__icon--stack {
    width: 56px;
    height: 48.9px;
  }

  .service-card__title {
    font-size: 14px;
  }

  .news__card {
    padding: 30px 20px;
  }

  .news-item {
    gap: 12px;
  }

  .news-item__link {
    gap: 12px;
  }

  .news-item__date {
    flex: 0 0 auto;
    font-size: 13px;
  }

  .news-item__title {
    font-size: 13px;
    min-width: 0;
  }

  .contact {
    height: auto;
    padding: 70px 20px;
  }

  .contact__panel {
    padding: 36px 24px;
  }

  .footer__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer__nav ul {
    flex-direction: column;
    gap: 16px;
  }
}

/* ==========================================================================
   Shared sub-page hero (About / News / etc.)
   A giant faded watermark word with a small eyebrow + colored-initial title
   overlapping its lower half, optionally over a dot-pattern photo background.
   ========================================================================== */

.page-hero {
  position: relative;
  overflow: hidden;
  padding-top: var(--header-h);
}

.page-hero--photo .page-hero__bg {
  position: absolute;
  inset: 0;
  background-image: url('img/page-head-bg.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.page-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px clamp(24px, 5vw, 80px) 50px;
}

.page-hero__watermark {
  display: block;
  font-family: var(--font-jp);
  font-weight: 900;
  font-size: clamp(50px, 9vw, 118px);
  color: #f3f3f3;
  line-height: 1;
  white-space: nowrap;
  margin-bottom: -0.56em;
}

.page-hero__eyebrow {
  position: relative;
  font-size: 14px;
  color: var(--color-text);
  margin-bottom: 2px;
}

.page-hero__title {
  position: relative;
  font-family: var(--font-jp);
  font-weight: 900;
  font-size: clamp(20px, 2.6vw, 30px);
  letter-spacing: -0.05em;
  color: var(--color-text);
}

.page-hero__title .accent {
  color: #1820c2;
}