/* Page (下層ページ共通) CSS
 * HPP HP — Figma file hTk2UtIZPusbWScukKNgMV
 * Node: 136:2614 (下層header-bg / fv) + 136:2622 (会社概要-bg)
 *
 * 役割:
 *   - 下層ページ用の小型 FV ヘッダー（"Company / 会社概要" のような帯）
 *   - 下層ページ本文用の白背景＋虹画像オーバーレイのラッパー
 *   - WordPress 側でフリーテキストとして差し込むコンテンツ領域（.page-content__free）の
 *     既定タイポグラフィ（h2, p, ul, table 等）
 *
 * PC のみのスタイル。SP の上書きは responsive.css 側の対応ブロックに書く。
 */

/* =====================
 * 下層 FV (page header band)
 * Figma node: 136:2614 — 1440×320, navy + rainbow mix-blend-multiply
 * ===================== */

.page-fv {
  position: relative;
  width: 100%;
  height: 320px;
  overflow: hidden;
  background-color: var(--color-navy-primary);
}

.page-fv__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* base navy fill (Figma 136:2616: #1e4d8b under) */
.page-fv__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color-blue-primary);
}

/* rainbow image with mix-blend-multiply (Figma 136:2911)
 * ビューポート幅にかかわらず FV 全体を画像で覆う（左右に単色帯が出ないように）。 */
.page-fv__bg-img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
}

/* Centered title block (Figma 136:2618) */
.page-fv__title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1.6;
}

.page-fv__title-en {
  font-family: var(--font-en-serif);  /* Cormorant Garamond は使わず Figma 仕様の Shippori Mincho に揃える */
  font-family: 'Shippori Mincho', serif;
  font-weight: 600;
  font-size: 56px;
  color: var(--color-white);
  letter-spacing: 5.6px;
  white-space: nowrap;
}

.page-fv__title-ja {
  font-family: 'Shippori Mincho', serif;
  font-weight: 500;
  font-size: 20px;
  color: #f4e5b8;            /* Accent/Gold from Figma */
  letter-spacing: 2px;
}

/* =====================
 * 下層本文ラッパー (page content)
 * Figma node: 136:2622 — 白背景 + 虹画像の薄いオーバーレイ
 * ===================== */

.page-content {
  position: relative;
  width: 100%;
  background-color: var(--color-white);
  padding: 120px 0;
  overflow: hidden;
}

/* 背景: 巨大な虹画像を薄く敷く (Figma 136:2623 / opacity 0.7 で重ねた装飾) */
.page-content__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.7;
}

/* Figma 136:2915: 元画像のアスペクト比は 7594:3031 (≒2.505:1)。
 * セクションの高さに合わせて height:100% で伸ばし、横は自然なアスペクト比で
 * はみ出した分を overflow:hidden でクロップする。
 * これでコンテンツが下まで伸びても背景が途切れず最後まで敷ける。 */
.page-content__bg img {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  height: 100%;
  width: auto;
  min-width: 100%;
  max-width: none;
  aspect-ratio: 7594 / 3031;
  object-fit: cover;
}

/* 下層ページの基本コンテンツ幅は Figma に合わせて 1080px。
 * inner padding 24px を足した 1128px を max-width にし、子要素 (.mvv-card 等) が
 * 100% で 1080px に揃うようにする。viewport < 1200px のときは既存の 1024px に戻す。 */
.page-content__inner {
  position: relative;
  width: 100%;
  max-width: 1128px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

@media (max-width: 1199px) {
  .page-content__inner {
    max-width: var(--layout-content-width); /* 1024px */
  }
}

/* =====================
 * フリーテキスト領域 (.page-content__free)
 * WordPress の the_content() がそのまま入る前提の素直なタイポグラフィ
 * ===================== */

.page-content__free {
  color: var(--color-navy-primary);
  font-family: var(--font-jp-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

.page-content__free > * + * { margin-top: 24px; }

.page-content__free h2 {
  font-family: 'Shippori Mincho', serif;
  font-weight: 500;
  font-size: 32px;
  line-height: 1.5;
  letter-spacing: 1.6px;
  color: var(--color-navy-primary);
  margin-top: 64px;
}

.page-content__free h3 {
  font-family: var(--font-jp-sans);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: 1px;
  color: var(--color-navy-primary);
  margin-top: 48px;
}

.page-content__free h4 {
  font-family: var(--font-jp-sans);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.5;
  color: var(--color-navy-primary);
  margin-top: 32px;
}

.page-content__free p {
  font-size: 16px;
  line-height: 1.75;
}

.page-content__free a {
  color: var(--color-blue-primary);
  text-decoration: underline;
}

.page-content__free ul,
.page-content__free ol {
  padding-left: 1.5em;
}

.page-content__free ul li { list-style: disc; }
.page-content__free ol li { list-style: decimal; }
.page-content__free li + li { margin-top: 8px; }

.page-content__free blockquote {
  border-left: 3px solid var(--color-blue-primary);
  padding: 8px 0 8px 24px;
  color: var(--color-blue-primary);
  font-style: italic;
}

.page-content__free img {
  max-width: 100%;
  height: auto;
  display: block;
}

.page-content__free figure { margin: 0; }
.page-content__free figcaption {
  font-size: 14px;
  color: #717983; /* gray/Primary */
  margin-top: 8px;
  text-align: center;
}

.page-content__free table {
  width: 100%;
  border-collapse: collapse;
}

.page-content__free th,
.page-content__free td {
  padding: 16px 12px;
  border-bottom: 1px solid rgba(26, 35, 50, 0.15);
  text-align: left;
  vertical-align: top;
}

.page-content__free th {
  font-weight: 700;
  width: 160px;
}

/* セクション間の余白 (固定セクション同士) — Figma 136:2625 の gap-[96px] に合わせる */
.page-content__sections > * + * {
  margin-top: 96px;
}

/* 下層ページでは Contact カード末尾と Footer の間に余白を入れる。
 * 共通の .contact は padding-bottom: 24px (Figma index 仕様) で固定なので、
 * "page-content と兄弟関係にある contact" にだけ追加余白を当てる。
 * index.html では .page-content が存在しないので影響しない。 */
.page-content ~ .section.contact {
  padding-bottom: 120px;
}