@charset "UTF-8";
/* ==========================================================================
   株式会社FEA ホームページ
   header ほかの指定
   --------------------------------------------------------------------------
   もとは greeting.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: #1a1a1a;
  text-shadow: none;
}
header:not(.scrolled) nav ul li > a::after {
  background: #1a1a1a;
}
header:not(.scrolled) .logo img {
  filter: none;
}
header:not(.scrolled) .hamburger span {
  background: #1a1a1a;
}
@media (max-width: 820px) {
  header:not(.scrolled) nav ul li a { color: #ffffff; }
  header:not(.scrolled) nav ul li > a::after { background: #ffffff; }
  header:not(.scrolled) .hamburger span { background: rgba(0,0,0,0.75); }
}
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:  #1c1c1c;
      --c-blue:  #3a3a3a;
      --c-dark:  #0a0a0a;
      --c-bg:    #f2f2f0;
      --c-border: rgba(0,0,0,0.10);
      --c-gold:  #c8960a;
      --c-mid:   #555555;
    }
body { font-family: "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif; color: #222; background: #f2f2f0; overflow-x: hidden; }
.hero-en-br { display: none; }
.catch-mobile-br { display: none; }

/* ===== ヒーロー〜署名：固定背景画像 ===== */
.gr-bg-wrap {
      position: relative;
      background: #ffffff;
    }
.gr-bg-light {
      position: fixed;
      top: 0; left: 0;
      width: 100vw;
      height: 100vh;
      background: #ffffff;
      z-index: 0;
    }
.gr-bg-img {
      position: static;
      width: 100%;
      max-width: none;
      height: auto;
      object-fit: contain;
      object-position: bottom;
      filter: none;
      display: block;
    }
.gr-bg-overlay {
      position: fixed;
      top: 0; left: 0;
      width: 100vw;
      height: 100vh;
      background: transparent;
      z-index: 0;
    }

.page-hero {
      position: relative;
      z-index: 1;
      width: 100%;
      min-height: 56vh;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 160px 8vw 40px;
      color: #1a1a1a;
      box-sizing: border-box;
    }
.page-hero-person {
      position: absolute;
      right: 8vw;
      top: 100px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      width: clamp(168px, 16.8vw, 238px);
      z-index: 2;
    }
.mobile-hero-person { display: none; }
.hero-sign {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
      text-align: center;
    }
.hero-sign .sign-position {
      font-size: 1.05rem;
      color: #1a1a1a;
      letter-spacing: 0.1em;
    }
.hero-sign .sign-img {
      height: 42px;
      width: auto;
      display: block;
      filter: invert(1);
    }
/* モバイルのタップオーバーレイ末尾に表示される元の署名は下部で定義 */
.page-hero .breadcrumb {
      font-size: 0.72rem; color: rgba(0,0,0,0.55);
      margin-bottom: 16px; letter-spacing: 0.1em;
    }
.page-hero .breadcrumb a { color: rgba(0,0,0,0.65); text-decoration: none; transition: color 0.2s; }
.page-hero .breadcrumb a:hover { color: var(--c-gold); }
.page-hero h1 {
      font-size: clamp(1.6rem, 2.4vw, 2.1rem);
      letter-spacing: 0.15em; margin-bottom: 18px; font-weight: 300;
      text-shadow: none;
    }
.page-hero .page-hero-en {
      font-size: 0.85rem; color: var(--c-gold);
      letter-spacing: 0.3em; text-transform: uppercase;
      margin-bottom: 10px;
      text-shadow: none;
    }
.page-hero .page-hero-catch {
      font-family: 'HGP行書体', 'HG行書体', 'HGPGyoshotai', 'Yuji Syuku', 'Klee One', "Hiragino Kaku Gothic ProN", serif;
      font-weight: 600;
      font-size: clamp(1.5rem, 3.6vw, 3.1rem);
      line-height: 1.6;
      letter-spacing: 0.05em;
      white-space: nowrap;
      color: #1a1a1a;
      text-shadow: none;
      display: inline-block;
      max-width: calc(100% - 300px);
    }
.gr-reveal {
      opacity: 0;
      transform: translateY(70px);
      transition: opacity 1.1s ease, transform 1.1s ease;
    }
.gr-reveal.is-visible { opacity: 1; transform: translateY(0); }
.gr-line {
      opacity: 0;
      transform: translateY(18px);
      transition: opacity 0.7s ease, transform 0.7s ease;
    }
.gr-line.is-visible { opacity: 1; transform: translateY(0); }

.greeting-section {
      position: relative;
      z-index: 1;
      background: transparent;
      padding: 0;
    }

/* ── あいさつ文 ── */
.greeting-body-wrap {
      max-width: 880px;
      width: 100%;
      box-sizing: border-box;
      margin: 0 auto;
      padding: 0 6vw clamp(40px, 5vw, 64px);
    }
.greeting-body-scroll p {
      font-size: clamp(0.95rem, 1.5vw, 1.12rem);
      color: #1a1a1a;
      line-height: 2.3;
      letter-spacing: 0.02em;
      margin-bottom: 0;
      margin-top: 0;
      text-shadow: none;
    }
.greeting-body-scroll p:first-child { margin-top: 0; }
.greeting-body-scroll p:last-of-type { margin-bottom: 0; }

/* 本文中の改行指定（<br class="gr-pc-br">）について
   ------------------------------------------------------------------
   もともとパソコン表示でだけ効かせていた改行です。以前の狭い横幅
   （約726px）に合わせて入れられたもので、2026-09 に横幅を会社概要
   ページと同じ幅（最大1300px・左右8vw）へ広げたことで、そのままだと
   短い行が混ざり行末がそろわなくなりました。
   そのため、すべての画面幅で効かせず、自然な折り返しに任せています。

   ※ HTML側の <br class="gr-pc-br"> は残してあります。
     以前の改行に戻す場合は、下の none を block に変えてください
     （横幅も元に戻さないと行末は不揃いのままです）。 */
.gr-pc-br { display: none; }

.greeting-sign .sign-position {
      font-size: 1.15rem;
      color: #ffffff;
      letter-spacing: 0.14em;
      text-shadow: 0 2px 8px rgba(0,0,0,0.6);
    }
.greeting-sign .sign-img {
      height: 68px;
      width: auto;
      display: block;
      filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
    }
@media (max-width: 820px) {
  .gr-bg-wrap { background: #ffffff; }
  .gr-bg-light { background: #ffffff; }
  .gr-bg-overlay { background: transparent; }
  .gr-bg-img { display: none; }
  .page-hero-person { display: none; }
  .mobile-hero-person {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        position: relative;
        width: 34vw;
        max-width: 150px;
        margin: 16px auto 40px;
        z-index: 2;
      }
  .mobile-hero-photo {
        width: 100%;
        aspect-ratio: 637 / 950;
        background-image: url('../image/pre-2-person.webp');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: bottom center;
      }
  .mobile-hero-sign { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
  .mobile-hero-sign .sign-position { font-size: 0.78rem; color: #1a1a1a; letter-spacing: 0.08em; }
  .mobile-hero-sign .sign-img { height: 34px; width: auto; display: block; filter: invert(1); }
  
  .page-hero { padding: 140px 6vw 40px; min-height: auto; background: transparent; justify-content: flex-start; align-items: flex-start; text-align: left; color: #1a1a1a; z-index: 55; }
  .page-hero h1 { text-shadow: none; }
  .page-hero .page-hero-en { text-shadow: none; }
  .page-hero .page-hero-catch { color: #1a1a1a; text-shadow: none; }
  .greeting-body-scroll p { color: #1a1a1a; text-shadow: none; }
  
  .greeting-sign .sign-position { color: #1a1a1a; text-shadow: none; }
  .greeting-sign .sign-img { filter: invert(1); }
  .page-hero .breadcrumb { display: none; }
  .page-hero .page-hero-en {
        display: block;
        order: 2;
        font-size: 0.62rem;
        line-height: 1.6;
        letter-spacing: 0.2em;
        margin-bottom: 0;
        white-space: nowrap;
      }
  .hero-en-br { display: none; }
  .page-hero h1 {
        display: block;
        order: 1;
        font-size: 1.3rem;
        letter-spacing: 0.12em;
        margin-bottom: 6px;
      }
  body.gr-greeting-open .page-hero-en,
  body.gr-greeting-open .page-hero h1,
  body.gr-greeting-open .page-hero .gr-reveal,
  body.gr-greeting-open .gr-mobile-tap-btn:not([aria-expanded="true"]),
  body.gr-greeting-open .recruit-side-btn {
        display: none !important;
      }
  body.gr-greeting-open .page-hero {
        pointer-events: none;
      }
  body.gr-greeting-open .gr-mobile-tap-btn[aria-expanded="true"] {
        pointer-events: auto;
      }
  body.gr-greeting-open header {
        background: #ffffff !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
      }
  .page-hero .page-hero-catch {
        font-size: clamp(1.05rem, 5.3vw, 1.6rem);
        text-align: center;
        white-space: nowrap;
        margin: 0;
        max-width: none;
      }
  .page-hero .gr-reveal {
        order: 3;
        width: 100%;
        opacity: 1 !important;
        transform: none !important;
        margin-top: 24px;
      }
  .gr-mobile-tap-btn {
        display: none;
      }
  .gr-mobile-tap-icon {
        position: relative;
        width: 54px;
        height: 54px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 2px;
      }
  .gr-mobile-tap-icon::before,
  .gr-mobile-tap-icon::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50%;
        border: 1.5px solid rgba(26,26,26,0.4);
        animation: grTapRipple 1.8s ease-out infinite;
      }
  .gr-mobile-tap-icon::after { animation-delay: 0.9s; }
  .gr-mobile-tap-icon svg {
        position: relative;
        z-index: 1;
        width: 27px;
        height: 27px;
      }
  @keyframes grTapRipple {
        0% { transform: scale(0.6); opacity: 1; }
        100% { transform: scale(1.7); opacity: 0; }
      }
  .gr-mobile-tap-label2 {
        font-size: 0.8rem;
        opacity: 0.85;
      }
  
  .gr-mobile-tap-btn[aria-expanded="true"] {
        position: fixed;
        top: 88px;
        right: 16px;
        bottom: auto;
        left: auto;
        margin: 0;
        transform: none;
        background: rgba(255,255,255,0.95);
        border: 1px solid rgba(0,0,0,0.15);
        border-radius: 50px;
        padding: 8px 18px;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        color: rgba(26,26,26,0.85);
        z-index: 1200;
        box-shadow: 0 2px 10px rgba(0,0,0,0.12);
      }
  .gr-mobile-tap-btn[aria-expanded="true"] .gr-mobile-tap-icon { display: none; }
  .gr-mobile-tap-btn[aria-expanded="true"] .gr-mobile-tap-label2 { display: none; }
  .gr-mobile-tap-btn[aria-expanded="true"] .gr-mobile-tap-label { text-align: center; font-size: 0.8rem; }
  .gr-mobile-body {
        display: block;
        position: static;
        background: #ffffff;
      }
  .greeting-body-wrap { padding: 20px 9vw 20px; }
  
  .greeting-sign .sign-position { font-size: 1.15rem; letter-spacing: 0.14em; }
  .greeting-sign .sign-img { height: 68px; }
}
@media (max-width: 768px) {
  .greeting-body-scroll p {
        font-size: clamp(0.92rem, 4vw, 1.1rem);
        line-height: 1.9;
        margin-bottom: 0;
      }
}
@media (min-width: 821px) {
  .gr-mobile-tap-btn { display: none !important; }
}
@media (max-width: 540px) {
  .greeting-body-wrap { padding: 20px 11vw 16px; }
}
@media (max-width: 480px) {
  
  body { overflow-x: hidden; }
}
@media (max-width: 480px) {
  .page-hero {
        padding: 100px 6vw 26px;
      }
  .page-hero h1 {
        font-size: 2rem;
        line-height: 1.5;
      }
  .page-hero .page-hero-en {
        font-size: 0.68rem;
        letter-spacing: 0.2em;
      }
}
@media (max-width: 340px) {
  .greeting-body-scroll p {
        font-size: 0.85rem;
      }
}

/* ==========================================================================
   オープニング演出（2026-09 追加）
   --------------------------------------------------------------------------
   ページを開いたとき、
     「一生涯の安心に、本気で寄り添う。」＋ 人物写真 ＋ 署名
   を画面中央にフェード表示し、数秒後に消えてからあいさつ文を出します。
   パソコン・スマートフォンとも同じ流れです。

   演出したあとは、キャッチコピーと人物写真をヒーローから外し、
   写真と署名はあいさつ文の最後（手紙の署名の位置）に置きます。

   制御は <html> タグに付くクラスで行っています。
     gr-intro-mode    … この並べ方を使う（greeting.html に直接書いてあります）
     gr-intro-playing … 演出中だけ付く（js/greeting-intro.js が付けます）
     gr-intro-in      … フェードイン中
     gr-intro-out     … フェードアウト中

   gr-intro-mode は greeting.html の <html> タグに書いてあるので、
   次の場合でも並べ方は変わりません（演出だけを行いません）。2026-09 変更
     ・パソコン（821px以上）で開いたとき
     ・OSで「視差効果を減らす／動きを減らす」を設定しているとき
     ・JavaScript が無効なとき
   ========================================================================== */

/* 既定では非表示。演出中のみ表示する */
.gr-intro { display: none; }

/* あいさつ文のあとのキャッチコピーも、演出するときだけ表示する
   （演出しないときはページ上部のキャッチコピーが出るため） */
.gr-closing-catch { display: none; }

/* ── 演出するときは、ヒーロー内のキャッチコピーと人物写真を画面から外す ──
   キャッチコピーはオープニングで見せるため。
   読み上げソフトには残したいので、消さずに画面外へ置いています。 */
html.gr-intro-mode .page-hero .gr-reveal {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
html.gr-intro-mode .page-hero-person { display: none; }

/* 人物写真を外したぶん、ヒーローの高さを内容に合わせて詰める
   （パソコンでは写真のために画面の56%を確保していたため） */
html.gr-intro-mode .page-hero {
  min-height: 0;
  justify-content: flex-start;
  padding-bottom: 24px;
}

/* ── あいさつ文のあとに、キャッチコピー＋人物写真＋署名を置く ──
   （手紙の署名の位置。オープニングと同じ組み合わせで締めくくります）

   並べ方（2026-09 変更）
     スマートフォン … 上にキャッチコピー（2行）、下に人物写真と署名
     パソコン       … 左にキャッチコピー（1行）、右に人物写真と署名
   パソコンの指定は、下のほうにある @media (min-width: 821px) にまとめています。

   ※ キャッチコピー（.gr-closing-catch）は演出するときだけ表示します。
     演出しないとき（動きを減らす設定・JavaScript無効）は、
     ページ上部のキャッチコピーがそのまま出るため、ここでは出しません。
   ※ 要素名は mobile-hero-person ですが、演出するときはパソコンでも使います。 */
html.gr-intro-mode .greeting-section.gr-mobile-body {
  display: flex;
  flex-direction: column;
  /* 背景用の白い固定レイヤー（.gr-bg-light）より前面に置く。
     これが無いと、環境によっては本文が白い背景に隠れて見えなくなります。 */
  position: relative;
  z-index: 1;
}
html.gr-intro-mode .greeting-section.gr-mobile-body .greeting-body-wrap { order: 1; }

/* 締めくくりのまとまり（キャッチコピーと人物写真の入れ物） */
html.gr-intro-mode .greeting-section.gr-mobile-body .gr-closing {
  order: 2;                     /* あいさつ文（order:1）のあとに置く */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  box-sizing: border-box;
  padding: 0 6vw;
  margin: 8px 0 48px;
  position: relative;
  z-index: 2;
}

/* キャッチコピー（スマートフォンでは2行） */
html.gr-intro-mode .gr-closing-catch {
  display: block;
  flex: 0 0 auto;
  margin: 0;
  font-family: 'HGP行書体', 'HG行書体', 'HGPGyoshotai', 'Yuji Syuku', 'Klee One', "Hiragino Kaku Gothic ProN", serif;
  font-weight: 600;
  /* オープニングのキャッチコピーと同じ大きさにしています。
     変えたいときは、この行の数値を変更してください */
  font-size: clamp(1.1rem, 6.2vw, 1.9rem);
  line-height: 1.7;
  letter-spacing: 0.06em;
  color: #1a1a1a;
  text-align: center;
}

/* 人物写真と署名 */
html.gr-intro-mode .greeting-section.gr-mobile-body .mobile-hero-person {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  /* 大きさを変えたいときは、この2行の数値を変更してください */
  width: 40vw;
  max-width: 180px;
  margin: 0;
  z-index: 2;
}
html.gr-intro-mode .mobile-hero-photo {
  width: 100%;
  aspect-ratio: 637 / 950;
  background-image: url('../image/pre-2-person.webp');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom center;
}
html.gr-intro-mode .mobile-hero-sign {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
html.gr-intro-mode .mobile-hero-sign .sign-position {
  font-size: 0.84rem;
  color: #1a1a1a;
  letter-spacing: 0.08em;
}
html.gr-intro-mode .mobile-hero-sign .sign-img {
  height: 40px;
  width: auto;
  display: block;
  filter: invert(1);
}

/* ── 演出が終わるまで、あいさつ文は伏せておく ── */
html.gr-intro-playing .gr-line,
html.gr-intro-playing .gr-line.is-visible {
  opacity: 0;
  transform: translateY(18px);
}

/* ── 演出中も「代表挨拶」の見出しは出したままにする ──
   オープニングの白い面（z-index:1100）より前面に置くことで、
   見出しだけはフェードの影響を受けず、常に表示されます。 */
html.gr-intro-playing .page-hero { z-index: 1101; }

/* ── オープニング本体 ──
   z-index はヘッダー(1150)より下。演出中もメニューは操作できます。
   上の余白は「代表挨拶」の見出しと重ならない高さにしています。 */
html.gr-intro-playing .gr-intro {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 1100;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  /* 上の余白は「代表挨拶」の見出しの高さ＋24px。
     実際の高さは js/greeting-intro.js が --gr-intro-top に入れています。 */
  padding: calc(var(--gr-intro-top, 260px) + 24px) 8vw 48px;
  box-sizing: border-box;
  overflow: hidden;
  opacity: 0;
  transition: opacity 1s ease;
}
html.gr-intro-in  .gr-intro { opacity: 1; }
html.gr-intro-out .gr-intro { opacity: 0; transition: opacity 0.7s ease; }

.gr-intro-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 2vh, 24px);
  max-height: 100%;
  transform: translateY(16px) scale(0.97);
  transition: transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
}
html.gr-intro-in  .gr-intro-inner { transform: none; }
html.gr-intro-out .gr-intro-inner {
  transform: translateY(-12px);
  transition: transform 0.7s ease;
}

.gr-intro-catch {
  font-family: 'HGP行書体', 'HG行書体', 'HGPGyoshotai', 'Yuji Syuku', 'Klee One', "Hiragino Kaku Gothic ProN", serif;
  font-weight: 600;
  /* 画面の幅と高さの小さいほうに合わせる（低い画面ではみ出さないため） */
  font-size: clamp(1.4rem, min(3vw, 3.6vh), 2.9rem);
  line-height: 1.8;
  flex: 0 0 auto;
  letter-spacing: 0.06em;
  color: #1a1a1a;
  text-align: center;
  margin: 0;
}

.gr-intro-person {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.gr-intro-photo {
  height: min(34vh, 320px);
  width: auto;
  flex: 0 1 auto;
  min-height: 0;
  aspect-ratio: 637 / 950;
  background-image: url('../image/pre-2-person.webp');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom center;
}
.gr-intro-sign {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
.gr-intro-sign .sign-position {
  font-size: 0.95rem;
  color: #1a1a1a;
  letter-spacing: 0.1em;
}
.gr-intro-sign .sign-img {
  height: min(5vh, 46px);
  width: auto;
  display: block;
  filter: invert(1);
}

/* ── パソコン（横並び：左にキャッチコピー1行、右に人物写真と署名） ──
   画面をスクロールせずに全体が見えるよう、写真の大きさは画面の高さに
   追従させています（min(◯vh, ◯px) の形）。 */
@media (min-width: 821px) {
  html.gr-intro-playing .gr-intro { padding-bottom: 40px; }

  .gr-intro-inner {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: clamp(28px, 4.5vw, 84px);
  }

  /* キャッチコピーは1行で表示する（HTML内の <br> は効かせない） */
  .gr-intro-catch {
    white-space: nowrap;
    font-size: clamp(1.15rem, 2.6vw, 2.8rem);
    flex: 0 0 auto;
  }
  .gr-intro-catch br { display: none; }

  /* 人物写真と署名は、縦並びのときより大きめに */
  .gr-intro-person { flex: 0 1 auto; min-width: 0; gap: 12px; }
  .gr-intro-photo  { height: min(44vh, 460px); }
  .gr-intro-sign .sign-position { font-size: 1.05rem; letter-spacing: 0.12em; }
  .gr-intro-sign .sign-img      { height: min(6vh, 56px); }

  /* ── あいさつ文の締めくくり（2026-09 変更） ──
       上から　人物写真 → 署名 → キャッチコピー　の縦並びにします。
       キャッチコピーはいちばん下に、1行・中央そろえで置きます。
       （以前は「左にキャッチコピー／右に人物写真」の横並びでした） */
  html.gr-intro-mode .greeting-section.gr-mobile-body .gr-closing {
    flex-direction: column;
    align-items: center;
    gap: clamp(20px, 2.4vw, 36px);
    padding: 0 8vw;
    margin: 24px 0 64px;
  }
  html.gr-intro-mode .greeting-section.gr-mobile-body .mobile-hero-person { order: 1; }
  html.gr-intro-mode .greeting-section.gr-mobile-body .gr-closing-catch   { order: 2; }

  /* キャッチコピーは1行で表示する（HTML内の <br> は効かせない）。
     大きさを変えたいときは、下の数値を変更してください。
     2026-09：2ポイント（約2.7px）ぶん大きくしました
              1.15rem→1.3rem ／ 2.6vw→2.8vw ／ 2.8rem→3rem */
  html.gr-intro-mode .greeting-section.gr-mobile-body .gr-closing-catch {
    font-size: clamp(1.3rem, 2.8vw, 3rem);
    line-height: 1.8;
    white-space: nowrap;
    text-align: center;
    margin: 0;
  }
  html.gr-intro-mode .greeting-section.gr-mobile-body .gr-closing-catch br { display: none; }

  /* 人物写真と署名は、スマートフォンより大きめに */
  html.gr-intro-mode .greeting-section.gr-mobile-body .mobile-hero-person {
    /* 大きさを変えたいときは、この行の数値を変更してください
       （2026-09：260px → 300px に拡大） */
    width: clamp(220px, 24vw, 300px);
    max-width: none;
    flex: 0 0 auto;
    gap: 12px;
  }
  /* 署名も写真に合わせて少し大きく（2026-09：1.05rem→1.15rem／56px→66px） */
  html.gr-intro-mode .mobile-hero-sign .sign-position { font-size: 1.15rem; letter-spacing: 0.12em; }
  html.gr-intro-mode .mobile-hero-sign .sign-img      { height: 66px; }
}

/* ── スマートフォン（見出しが小さいぶん、上の余白と文字を詰める） ── */
@media (max-width: 820px) {
  .gr-intro-inner { gap: clamp(10px, 2vh, 20px); }
  .gr-intro-catch { font-size: clamp(1.1rem, min(6.2vw, 3.4vh), 1.9rem); }
  .gr-intro-photo { height: min(38vh, 280px); }
  .gr-intro-sign .sign-position { font-size: 0.8rem; letter-spacing: 0.08em; }
  .gr-intro-sign .sign-img { height: min(4.5vh, 36px); }
}

/* ==========================================================================
   JavaScript が無効なときの保険（2026-09 追加）
   --------------------------------------------------------------------------
   .gr-reveal / .gr-line は「スクロールに合わせて浮かび上がる」演出のため、
   既定では透明（opacity:0）にしてあります。表示に切り替えるのは JavaScript です。
   そのため JS が無効だと、あいさつ文が読めないままになってしまいます。

   <html> に付けた class="no-js" は js/greeting-intro.js が読み込み時に外すので、
   JS が動かなかったときだけ下の指定が効き、最初から表示された状態になります。
   ========================================================================== */
html.no-js .gr-reveal,
html.no-js .gr-line {
  opacity: 1;
  transform: none;
}
html.no-js .greeting-section.gr-mobile-body {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   あいさつ文の横幅（パソコン表示のみ／2026-09 追加）
   --------------------------------------------------------------------------
   会社概要ページ（company-overview.html）の会社情報ブロックと
   横幅をそろえています。向こうは .page-content が
       max-width: 1300px ／ 左右 padding: 8vw
   で本文の幅を決めているため、同じ値を指定しています。
   会社概要側の指定を変えるときは、こちらも合わせてください。

   ※ スマートフォン（820px以下）は従来どおり（左右 padding: 9vw）です。
   ========================================================================== */
@media (min-width: 821px) {
  .greeting-body-wrap {
    max-width: 1300px;
    /* 会社概要ページの本文と同じ位置（8vw）から、左右それぞれ 40px 内側へ。
       幅を変えたいときは、この 40px を増減してください
       （0px にすると会社概要とぴったり同じ幅に戻ります）。 */
    padding-left: calc(8vw + 40px);
    padding-right: calc(8vw + 40px);
  }

  /* あいさつ文のかたまりを画面の中央に置く（2026-09 追加）
     ------------------------------------------------------------------
     パソコン表示では、あいさつ文の改行位置を greeting.html の
     <br class="gr-pc-br"> で決めています（下の gr-pc-br 参照）。
     width: max-content は「いちばん長い行のちょうどの幅」になるので、
     それを margin:auto で中央に置くと、文章のかたまりが画面の
     まん中にそろいます。行頭は従来どおり左そろえです。

     max-width: 100% は保険です。画面が狭くて max-content が
     入りきらないとき（おおむね1000px未満）は枠の幅まで縮み、
     指定した改行位置に加えて自動でも折り返します。 */
  .greeting-body-scroll {
    width: max-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  /* あいさつ文の改行指定を、パソコン表示でだけ有効にする。
     改行位置を変えたいときは greeting.html 側の
     <br class="gr-pc-br"> を動かしてください。 */
  .greeting-body-scroll .gr-pc-br { display: block; }
}

/* ==========================================================================
   画面が広いときの並べ方（2026-09 追加）
   --------------------------------------------------------------------------
   1280px 以上のとき、

       ┌──────────────────┬──────────┐
       │ あいさつ文          │ 人物写真   │
       │                    │ 署名      │
       ├──────────────────┴──────────┤
       │     一生涯の安心に、本気で寄り添う。     │
       └─────────────────────────────┘

   の形に並べます。あいさつ文は左、人物写真と署名はその右、
   キャッチコピーは2列の下いっぱいに広げて、画面の中央に1行で置きます。

   1279px 以下は、あいさつ文の下に
       人物写真 → 署名 → キャッチコピー
   が縦に続く形になり、スマートフォンにも影響しません。

   切り替わる幅を変えたいときは、下の 1280px を増減してください。
   狭くしすぎると、あいさつ文（いちばん長い行が約790px）と
   人物写真（最大260px）が横に並びきらなくなります。
   ========================================================================== */
@media (min-width: 1280px) {

  html.gr-intro-mode .greeting-section.gr-mobile-body {
    display: grid;
    /* 左＝あいさつ文の幅ぴったり、右＝人物写真の幅ぴったり */
    grid-template-columns: max-content max-content;
    justify-content: center;   /* 2列のかたまりを画面の中央に置く */
    align-items: start;
    column-gap: clamp(40px, 4vw, 88px);
    padding: 0 40px clamp(48px, 5vw, 72px);
    box-sizing: border-box;
  }

  /* 左：あいさつ文 */
  html.gr-intro-mode .greeting-section.gr-mobile-body .greeting-body-wrap {
    grid-column: 1;
    grid-row: 1;
    max-width: none;
    width: auto;
    padding: 0;
  }
  html.gr-intro-mode .greeting-section.gr-mobile-body .greeting-body-scroll {
    margin-left: 0;
    margin-right: 0;
  }

  /* キャッチコピーと人物写真の入れ物（.gr-closing）は、
     display: contents で「無いもの」として扱い、
     中の2つをそれぞれ別のマス目に置きます。 */
  html.gr-intro-mode .greeting-section.gr-mobile-body .gr-closing {
    display: contents;
  }

  /* 右上：人物写真と署名 */
  html.gr-intro-mode .greeting-section.gr-mobile-body .mobile-hero-person {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    margin: 0;
  }

  /* 下段：キャッチコピー（2列ぶんに広げ、画面の中央に1行で置く） */
  html.gr-intro-mode .greeting-section.gr-mobile-body .gr-closing-catch {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
    margin: clamp(28px, 3vw, 52px) 0 0;
    position: relative;
    z-index: 2;
  }
}