@charset "utf-8";
/* =========================================
   下層ページの見出し（タイトル＋抜粋＋アイキャッチ）
   株式会社スリーエス

   ・PC（1920-1440）を基準に記述
   ・デバイス区分は 1439 / 1199 / 700 / 349 のまま（増やしていません）
   ・色は :root の既存カラーのみ（新規カラーなし）
       タイトル … var(--color-teal)   … 1920pxのイメージから実測した #326464
       説明文   … var(--color-base)   … #333333（新しい黒は作っていません）
   ・アニメーション
       1) タイトル … 1文字ずつ上がる
       2) 説明文   … 左からワイプ
       3) 画像     … 右からワイプ
========================================= */

.page-header {
  /* --- 表示アニメーションの開始時間 -----------------------------
     ページに入った時点を 0s としています。

       0.00s  タイトル … 1文字ずつ（文字数 × 0.04s ＋ 0.5s）
       0.40s  説明文   … 左からワイプ（0.6s なので 1.0s で終わる）
       1.00s  画像     … 右からワイプ

     タイトルが長いページに合わせて遅らせたいときは、
     この2つだけを変更してください。
  ------------------------------------------------------------- */
  --ph-lead-delay: 0.4s;
  --ph-image-delay: 1s;

  --ph-max: 1920px;                                        /* 画像の最大幅 */
  --ph-title: clamp(1.75rem, 1.1rem + 1.6vw, 2.75rem);     /* 1920pxで44px */
  --ph-lead-max: 640px;                                    /* 説明文の折り返し幅 */
  --ph-gap: var(--space-40);                               /* タイトルと説明文の間 */
  --ph-image-ratio: 1920 / 480;                            /* アイキャッチの縦横比 */

  background: var(--color-white);
}

/* =========================================
   タイトル＋説明文
   1920pxのイメージに合わせて、2つをひとかたまりにして中央に置きます
   （左端ぞろえではなく、かたまりごと中央）。
========================================= */
.page-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--ph-gap);
  padding-top: var(--space-20);
  padding-bottom: var(--space-20);
}

/*
 * タイトルの上の小さなラベル（実績のカテゴリーなど）。
 * 横並びの行から抜けて、必ずタイトルの上に来るようにします。
 */
.page-header__badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  flex-basis: 100%;
}

.page-header__badge {
  padding: 4px var(--space-10);
  border-radius: 999px;
  background: var(--color-surface-blue);
  color: var(--color-navy);
  font-size: var(--font14-size);
  font-weight: 700;
  line-height: 1.4;
}

.page-header__title {
  min-width: 0;
  color: var(--color-teal);
  font-size: var(--ph-title);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: 0.02em;
  line-break: strict;
}

.page-header__lead {
  --wipe-delay: var(--ph-lead-delay);
  text-align: left;
  min-width: 0;
  /* 抜粋欄の改行はそのまま反映されます。
     改行を入れない場合は、この幅で自然に折り返します。 */
  max-width: var(--ph-lead-max);
  color: var(--color-base);
  font-size: var(--font-size-base);
  font-weight: 500;
  line-height: 1.6;
  line-break: strict;
}

/* =========================================
   アイキャッチ
   画面いっぱい（最大1920px）に置きます
========================================= */
.page-header__image {
  --wipe-delay: var(--ph-image-delay);
  width: 100%;
  max-width: var(--ph-max);
  margin: 0 auto;
  overflow: hidden;
  aspect-ratio: var(--ph-image-ratio);
  background: var(--color-surface);
}

.page-header__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* =========================================
   1439px以下：small-pc
========================================= */
@media screen and (max-width: 1439px) {
  .page-header {
    --ph-lead-max: 520px;
  }
}

/* =========================================
   1199px以下：タブレット
   レイアウトはPCと同じですが、画像だけ縦横比を変えます。
   4:1のままだと、幅が狭い分そのまま薄くなり
   （701pxで高さ175px）、帯のようになってしまうためです。
========================================= */
@media screen and (max-width: 1199px) {
  .page-header {
    --ph-image-ratio: 3 / 1;
  }
}

/* =========================================
   980px以下：タイトルと説明文を縦に積む

   横並びのままだと、タイトル＋説明文で880px前後が必要になり、
   説明文が1文字ずつしか入らない細い列になってしまうためです。
   980px は common.css の --width980 と同じ境界で、
   デバイス区分は増やしていません。
========================================= */
@media screen and (max-width: 980px) {
  .page-header__inner {
    flex-direction: column;
    align-items: center;
    gap: var(--space-10);
    text-align: center;
  }

  .page-header {
    --ph-lead-max: 100%;
  }
}

/* =========================================
   700px以下：スマートフォン
   画像が細長くなりすぎるので、縦横比を変えます
========================================= */
@media screen and (max-width: 700px) {
  .page-header {
    --ph-image-ratio: 16 / 9;
  }

  .page-header__inner {
    padding-top: var(--space-10);
    padding-bottom: var(--space-20);
  }
}

/* =========================================
   349px以下：mini SP
========================================= */
@media screen and (max-width: 349px) {
  .page-header {
    --ph-image-ratio: 4 / 3;
  }
}