@charset "UTF-8";
/* ==========================================================================
   株式会社FEA ホームページ
   header ほかの指定
   --------------------------------------------------------------------------
   もとは philosophy.html の <head> に直接書かれていたスタイルです。
   CSP から style-src 'unsafe-inline' を外すため、2026-09 に外部ファイル化しました。
   修正するときは、HTML ではなくこのファイルを編集してください。
   ========================================================================== */
header {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
  transition: background 0.3s, box-shadow 0.3s, padding 0.3s;
}
header.scrolled {
  background: #ffffff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
header:not(.scrolled) nav ul li a {
  color: #ffffff;
  text-shadow: none;
}
header:not(.scrolled) nav ul li > a::after {
  background: #ffffff;
}
header:not(.scrolled) .logo img {
  filter: none;
}
header:not(.scrolled) .hamburger span {
  background: #ffffff;
}
header:has(nav ul li.has-dropdown:hover) {
  background: #ffffff;
}
header:has(nav ul li.has-dropdown:hover) nav ul li a {
  color: rgba(0,0,0,0.88);
  text-shadow: none;
}
header:has(nav ul li.has-dropdown:hover) .logo img {
  filter: none;
}
:root {
      --c-navy:        #1a1a1a;
      --c-blue:        #444444;
      --c-dark:        #0d1f3c;
      --c-bg:          #ffffff;
      --c-bg-mid:      #f5f5f5;
      --c-bg-hi:       #e8e8e8;
      --c-border:      rgba(0,0,0,0.10);
      --c-gold:        #1a1a1a;
      --c-gold-bright: #c8960a;
      --c-mid:         rgba(0,0,0,0.45);
      --c-text:        #1a1a1a;
      --c-text-sub:    rgba(0,0,0,0.55);
    }
body { font-family: "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif; color: #1a1a1a; background: #ffffff; overflow-x: hidden; }
/* ===== ヒーロー〜Values：固定背景動画（フッターの不透明背景で自然に隠れる） ===== */
.ph-video-wrap {
      position: relative;
    }
.ph-bg-video {
      position: fixed;
      top: 0; left: 0;
      width: 100vw;
      height: 100vh;
      object-fit: cover;
      z-index: 0;
    }
.ph-bg-video-overlay {
      position: fixed;
      top: 0; left: 0;
      width: 100vw;
      height: 100vh;
      background: linear-gradient(160deg, rgba(8,20,45,0.86) 0%, rgba(6,14,32,0.8) 100%);
      z-index: 0;
    }

.page-hero { margin-top: 0; padding: 160px 8vw 60px; min-height: 320px; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; background: transparent; color: #ffffff; position: relative; z-index: 1; }
.page-hero .breadcrumb, .page-hero h1, .page-hero p { position: relative; z-index: 2; }
.page-hero .breadcrumb { font-size: 0.72rem; color: rgba(255,255,255,0.65); margin-bottom: 14px; letter-spacing: 0.08em; }
.page-hero .breadcrumb a { color: rgba(255,255,255,0.55); text-decoration: none; }
.page-hero .breadcrumb a:hover { color: #c8960a; }
.page-hero h1 { font-size: clamp(2rem, 3.6vw, 3rem); letter-spacing: 0.15em; margin-bottom: 6px; font-weight: 300; color: #ffffff; text-shadow: 1px 2px 12px rgba(0,0,0,0.45);}
.page-hero p { font-size: 0.78rem; color: #c8960a; letter-spacing: 0.3em; text-transform: uppercase; }
.page-content { max-width: 900px; margin: 0 auto; padding: 0; }

/* ===== 企業理念（新レイアウト：動画背景固定・白文字） ===== */
.ph-mvv-block {
      position: relative;
      left: 50%;
      transform: translateX(-50%);
      width: 100vw;
      max-width: 100vw;
      box-sizing: border-box;
    }
.ph-mvv-full {
      position: relative;
      z-index: 2;
      width: 100%;
      box-sizing: border-box;
      padding: 140px 8vw;
      text-align: center;
    }
.ph-mvv-block .ph-mvv-full:first-of-type { padding-top: 40px; }
.ph-mvv-inner {
      max-width: 900px;
      margin: 0 auto;
      opacity: 0;
      transform: translateY(100px);
      transition: opacity 1.1s ease, transform 1.1s ease;
    }
.ph-mvv-inner.is-visible { opacity: 1; transform: translateY(0); }
.ph-mvv-label-en {
      font-family: Georgia, serif;
      font-weight: 700;
      /* 2026-09-25 変更：英字（Asahi Life Group Mission／FEA Corporate slogan／
         Vision／Values）を、スマートフォンでは13ポイント小さくしました
         （2026-09-25 に 9pt → 13pt へ変更）。
         clamp() は画面幅に応じて大きさが変わる指定のため、
         その結果から一律で 13pt を引いています。
         ※ パソコン表示は、すぐ下の @media (min-width: 561px) が優先されます。
         元の指定： clamp(2.6rem, 5.5vw, 4.4rem) */
      font-size: calc(clamp(2.6rem, 5.5vw, 4.4rem) - 13pt);
      letter-spacing: 0.1em;
      color: #ffffff;
      line-height: 1.1;
      text-shadow: 0 2px 10px rgba(0,0,0,0.75), 0 6px 32px rgba(0,0,0,0.5);
    }
/* ==========================================================================
   パソコン表示のときの英字の大きさ（2026-09-25 見直し）
   --------------------------------------------------------------------------
   561px は、このページが「パソコン表示」と「スマートフォン表示」を
   切り替えている境目です（ph-pc-br と同じ基準）。
   560px 以下のスマートフォンは上の指定（13pt 小さい）が使われます。

   【なぜ引き算をやめたか】
     以前は「もとの指定から 22pt 引く」という書き方をしていました。
     引き算は大きい文字からも小さい文字からも同じ量を引くため、
     もともと小さい方が割合として大きく削られます。その結果、
     ウィンドウを半分にすると 30.8pt → 9.2pt（3.35倍の差）まで
     小さくなっていました。
     そこで引き算をやめ、大きさを直接指定する形に変えました。
     差は 1.58倍に収まります。

   【今の指定の読み方】  clamp(最小, 画面幅に応じた値, 最大)
     26px    … これより小さくはならない（＝約19.5pt）
     3.3vw   … 画面幅の3.3%。ウィンドウの大きさに合わせて変わる
     41.1px  … これより大きくはならない（＝約30.8pt。以前と同じ大きさ）

   【大きさを変えたいとき】
     ・広い画面での大きさ   → 41.1px を増減する
     ・狭くしたときの下限   → 26px を増減する
     引き算（- ○pt）を足す書き方は、上記の理由で避けてください。
   ========================================================================== */
@media (min-width: 561px) {
  .ph-mvv-label-en { font-size: clamp(26px, 3.3vw, 41.1px); }

  /* 2026-09-25 追加：文字数の多い2つ（Asahi Life Group Mission / FEA Corporate
     slogan）だけ、パソコン表示で約1割小さくします。
     Vision と Values は上の指定のままです。
     対象はHTML側で class="ph-mvv-label-en ph-mvv-label-en-long" を
     付けた要素です（並び順を変えても影響を受けません）。
     上の指定の各数値を 0.9倍 したものです。 */
  .ph-mvv-label-en.ph-mvv-label-en-long { font-size: clamp(23.4px, 3.0vw, 37px); }
}
.ph-mvv-label-ja {
      font-size: 1rem;
      letter-spacing: 0.35em;
      color: #f0d27a;
      margin: 18px 0 48px;
      text-shadow: 0 2px 8px rgba(0,0,0,0.6);
    }
.ph-mvv-text {
      /* 2026-09-25 変更：MVVの本文3か所（使命・スローガン・目指す姿）を
         4ポイント大きくしました。
         元の指定： clamp(0.92rem, 1.6vw, 1.18rem) */
      font-size: calc(clamp(0.92rem, 1.6vw, 1.18rem) + 4pt);
      line-height: 2.15;
      letter-spacing: 0.01em;
      color: #ffffff;
      text-shadow: 0 2px 8px rgba(0,0,0,0.7), 0 4px 20px rgba(0,0,0,0.45);
      text-align: left;
    }
.ph-mvv-text.ph-mvv-text-lg { text-align: center; }
@media (min-width: 769px) {
  /* 上と同じく4ポイント大きく（元の指定： clamp(1.6rem, 2.8vw, 2.2rem)） */
  .ph-mvv-text.ph-mvv-text-lg { font-size: calc(clamp(1.6rem, 2.8vw, 2.2rem) + 4pt); }
  .ph-mvv-text { text-align: center; }
}
.ph-values-list { display: flex; flex-direction: column; gap: 44px; margin-top: 14px; text-align: left; }
.ph-value-item { display: flex; align-items: flex-start; gap: 22px; }
.ph-value-num {
      flex-shrink: 0;
      /* 2026-09-25 変更：行動指針の番号（01/02/03）のフォントを
         Georgia から Bahnschrift（細長いサンセリフ）に変更しました。
         英字見出しが Georgia のセリフ体のため、番号を別系統にして
         「見出し＝セリフ／番号＝サンセリフ」と役割を分けています。

         左から順に、その環境にあるものが使われます。
           Bahnschrift     … Windows 10 以降に標準搭載
           DIN Alternate   … macOS・iOS に標準搭載（Bahnschriftに近い書体）
           Arial Narrow    … 上記が無い環境向けの細長いフォント
           sans-serif      … それも無い場合の既定のゴシック体
         Webフォントを読み込まないため、表示が遅くなることはありません。 */
      font-family: "Bahnschrift", "DIN Alternate", "Arial Narrow", sans-serif;
      font-size: 1.9rem;
      font-weight: 700;
      color: #f0d27a;
      line-height: 1.4;
      text-shadow: 0 2px 8px rgba(0,0,0,0.6);
    }
.ph-value-item h3 {
      font-size: 1.3rem;
      color: #ffffff;
      letter-spacing: 0.01em;
      font-weight: 700;
      margin-bottom: 12px;
      text-shadow: 0 2px 8px rgba(0,0,0,0.7), 0 4px 18px rgba(0,0,0,0.45);
    }
.ph-value-item ul { margin: 0; padding: 0; list-style: none; }
.ph-value-item li {
      font-size: 1.05rem;
      line-height: 2;
      color: #ffffff;
      letter-spacing: 0.01em;
      text-shadow: 0 2px 8px rgba(0,0,0,0.65), 0 4px 16px rgba(0,0,0,0.4);
    }
/* 2026-09-25 変更：行動指針の本文を、パソコン表示のときだけ2ポイント小さくします。
   スマートフォン（560px以下）は下の指定のままで、変更していません。
   元の指定： 1.05rem */
@media (min-width: 561px) {
  .ph-value-item li { font-size: calc(1.05rem - 2pt); }
}
.ph-mobile-br { display: none; }
.ph-pc-br { display: block; }
@media (max-width: 560px) {
  /* ======================================================================
     スマートフォンでの MVV の文字サイズ（2026-09-25 見直し）
     ----------------------------------------------------------------------
     英字の大きさを --ph-en として1か所で決め、日本語はそこからの
     比率で指定します。こうすることで、英字を変えれば日本語も同じ比率で
     追従し、バランスが崩れません。

       英字（Mission／slogan／Vision／Values）  … --ph-en（4つとも同じ大きさ）
       使命・スローガンの日本語                … --ph-en の 1.5倍
       目指す姿の日本語                        … --ph-en の 0.7倍

     大きさを変えたいときは --ph-en の値だけを直してください。
     ====================================================================== */
  .ph-mvv-block { --ph-en: calc(clamp(2.6rem, 5.5vw, 4.4rem) - 13pt); }
  .ph-mvv-label-en { font-size: var(--ph-en); }
  .ph-mvv-text.ph-mvv-text-lg { font-size: calc(var(--ph-en) * 1.5); }
  .ph-mvv-text:not(.ph-mvv-text-lg) { font-size: calc(var(--ph-en) * 0.7); }

  /* 文字が大きくなったぶん、左右の余白を狭めて表示幅を確保します
     （2026-09-25 変更：12vw → 8vw） */
  .ph-mvv-full { padding: 90px 8vw; }
  .ph-mvv-block .ph-mvv-full:first-of-type { padding-top: 24px; }
  .ph-mvv-label-ja { margin: 12px 0 32px; }
  .ph-values-list { gap: 32px; }
  .ph-mobile-br { display: block; }
  .ph-pc-br { display: none; }
  /* 文字サイズは上の比率指定（--ph-en）が受け持ちます。ここは行間だけ。 */
  .ph-mvv-text { line-height: 1.95; }
  .ph-mvv-text:not(.ph-mvv-text-lg) { padding: 0 5vw; }
  .ph-value-num { font-size: 1.6rem; }
  .ph-value-item h3 { font-size: 1.02rem; }
  .ph-value-item li { font-size: 0.78rem; line-height: 1.8; }
}
@media (max-width: 340px) {
  /* 英字のもとの大きさだけ差し替え。日本語は上の比率（1.5倍 / 0.7倍）で追従します。 */
  .ph-mvv-block { --ph-en: calc(clamp(2.1rem, 4.6vw, 3.6rem) - 13pt); }
  .ph-value-item h3 { font-size: 0.82rem; }
  .ph-value-item li { font-size: 0.64rem; }
}

@media (max-width: 480px) {
  
  body { overflow-x: hidden; }
}
@media (max-width: 480px) {
  .page-hero {
        padding: 50px 6vw 26px;
      }
  .page-hero h1 {
        font-size: 2rem;
        line-height: 1.5;
      }
  .page-hero p {
        font-size: 0.68rem;
        letter-spacing: 0.2em;
      }
}