@charset "UTF-8";
/* ============================================================
   RASENCA — Sections
   （現在: FV。以降のセクションは順次追加）
   ============================================================ */

/* ============ Stage：sticky heroが背景に追従（FV+PHILOSOPHY共通背景） ============ */
.stage { position: relative; }
.stage__bg {
  position: sticky;
  top: 0;
  /* 背景写真はlvh(大きい方＝アドレスバー隠れ時)で固定。dvhだとバー開閉で高さが変わりcoverが再スケール＝ズームして見える。
     lvhは開閉で変化しない＝画像は一切リサイズされない。バー表示時は写真下端がわずかに隠れるだけ(cover写真なので気づかない)。100vhはlvhのフォールバック */
  height: 100vh;
  height: 100lvh;
  margin-bottom: -100vh;
  margin-bottom: -100lvh;   /* 後続を引き上げ、背景の上に重ねる（標準的なstickyパララックス） */
  overflow: hidden;
  z-index: 0;
  background: var(--color-main);
}
.stage__bg picture { display: block; width: 100%; height: 100%; } /* imgのheight:100%基準にするためブロック化 */
.stage__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } /* 全画面のためcover。hero-sp/hero(PC)は中央 */
/* hero-sp_long(超縦長)が使われる縦長端末では上揃え（上＝空を残し、下を切る） */
@media (max-width: 1024px) and (max-aspect-ratio: 1536 / 2752) {
  .stage__bg img { object-position: top; }
}
/* スクロール連動で「均一に」暗転する黒ヴェール（空間的な段差がない＝境界が絶対に出ない）。opacityはJSで滑らかに制御 */
.stage__veil { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; will-change: opacity; }
.fv, .philosophy { position: relative; z-index: 1; }

/* ============================== FV（100dvh 全画面） ============================== */
.fv {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 0 12rem 10rem;
  color: var(--color-base);
}
/* FVは専用オーバーレイを置かない（境界防止）。文字の視認性は「細く控えめな」影のみ（黒い箱に見えないように） */
.fv__title, .fv__sub, .fv__body-text { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); }
.fv__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
}
/* PC: 横3カラム [見出し+英語サブ | 縦線 | 本文]  gap-100 */
.fv__row { display: flex; gap: 10rem; align-items: flex-start; width: 100%; }
.fv__lead { display: flex; flex-direction: column; gap: 1.2rem; } /* gap-12 */
.fv__title {
  font-family: var(--font-base);
  font-weight: var(--fw-bold);
  font-size: var(--fs-48);        /* 48px */
  letter-spacing: 0.05em;         /* 2.4px */
  line-height: 6.9rem;            /* leading-69 */
  white-space: nowrap;
}
.fv__title span { display: block; }
.fv__sub {
  font-family: var(--font-en);
  font-weight: var(--fw-regular);
  font-size: var(--fs-24);        /* 24px */
  letter-spacing: 0.05em;         /* 1.2px */
  line-height: 1.4;
  white-space: nowrap;
}
/* 区切り線：PC=縦線（コンテンツ高いっぱい） */
.fv__divider { align-self: stretch; width: 1px; flex-shrink: 0; background: rgba(255, 255, 255, 0.4); }
.fv__body { width: 34.9rem; flex-shrink: 0; }  /* w-349 */
.fv__body-text {
  font-family: var(--font-base);
  font-weight: var(--fw-regular);
  font-size: var(--fs-20);        /* 20px */
  letter-spacing: 0.05em;         /* 1px */
  line-height: 4rem;              /* leading-40 */
}

@media (max-width: 1024px) {
  /* SP: 縦積み [見出し+英語サブ | 横線80px | 本文]  gap-24 / px-20 */
  .fv { padding: 0 2rem 4rem; }                                               /* 下余白をテキスト約2行分（8→4rem）詰める */
  .fv__row { flex-direction: column; gap: 2.4rem; align-items: flex-start; }
  .fv__title { font-size: 2.4rem; line-height: 3.2rem; white-space: normal; } /* 24px leading-32 */
  /* 英語サブは全端末で1行固定。狭い端末では画面幅に応じて縮小（iPhone等でBusiness後の折り返し防止） */
  .fv__sub { font-size: min(1.2rem, 3.05vw); white-space: nowrap; letter-spacing: 0.02em; }
  .fv__divider { align-self: flex-start; width: 8rem; height: 1px; }          /* 横線80px */
  .fv__body { width: 100%; }
  .fv__body-text { font-size: 1.4rem; line-height: 2rem; }                    /* 13→14px（+0.1rem）leading-20 */
}

/* ---- FV: ヘッダー付近でフェードアウト（philosophyと同様。初期表示があるので入場ブラー無し・退場のみ）
   exit範囲＝要素の「上端」がヘッダー付近(inset)を越え始めた所で消える。背の高い要素でも早く消える ---- */
@keyframes fv-line {
  0%   { opacity: 1; filter: blur(0); transform: translateY(0); }
  100% { opacity: 0; filter: blur(4px); transform: translateY(-0.6rem); }
}
@supports (animation-timeline: view()) {
  .fv__title, .fv__sub, .fv__body-text, .fv__divider {
    animation: fv-line linear both;
    animation-timeline: view(block 220px 0px);   /* PC: 早めに開始（150→220） */
    animation-range: exit 0% exit 60%;            /* PC: 長く消える（40→60%） */
    will-change: opacity, filter, transform;
  }
  @media (max-width: 1024px) {
    .fv__title, .fv__sub, .fv__body-text, .fv__divider {
      animation-timeline: view(block 110px 0px); /* SP：従来のまま（読みやすさ優先） */
      animation-range: exit 0% exit 40%;
    }
  }
}

/* ============================== PHILOSOPHY（sticky hero上・暗くして白文字） ============================== */
.philosophy {
  /* 暗転はstage__veil（スクロール連動・均一）が担う＝段差なし */
  color: var(--color-base);
  padding: 40rem 12rem 12rem; /* pt-400 px-120 pb-120 */
}

/* ---- 行単位のスクロール駆動アニメ（下からブラー＋フェードイン → ヘッダー手前で消える） ----
   各行断片は inline-block。同一行の断片は同じ高さ＝まとめて表示、SPは改行が増えて1行ずつ */
.philosophy .ln { display: inline-block; }
@keyframes ph-line { /* SP用（従来：92%まで保持して短く消える＝読みやすさ優先） */
  0%   { opacity: 0; filter: blur(4px); transform: translateY(1.4rem); }
  25%  { opacity: 1; filter: blur(0);   transform: translateY(0); }
  92%  { opacity: 1; filter: blur(0);   transform: translateY(0); }
  100% { opacity: 0; filter: blur(0);   transform: translateY(-0.5rem); }
}
@keyframes ph-line-pc { /* PC用：アンカー着地位置(≈220px)を過ぎてから消え始め、ヘッダー手前で消え切る */
  0%   { opacity: 0; filter: blur(4px); transform: translateY(1.4rem); }
  22%  { opacity: 1; filter: blur(0);   transform: translateY(0); }
  92%  { opacity: 1; filter: blur(0);   transform: translateY(0); }
  100% { opacity: 0; filter: blur(0);   transform: translateY(-0.8rem); }
}
@supports (animation-timeline: view()) {
  .philosophy [data-line] {
    animation: ph-line-pc linear both;          /* PC */
    animation-timeline: view(block 170px 0px);  /* PC：ヘッダー手前で消え切る位置 */
    animation-range: cover;
    will-change: opacity, filter, transform;
  }
  /* SPはヘッダー70px基準＋従来keyframeで、ぶつかる直前まで表示（読みやすさ優先） */
  @media (max-width: 1024px) {
    .philosophy [data-line] { animation-name: ph-line; animation-timeline: view(block 110px 0px); }
  }
}
.philosophy__inner {
  max-width: 1200px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6.4rem; /* gap-64 */
  text-align: center;
  scroll-margin-top: 12rem; /* #philosophyアンカーはここ（テキスト位置）に着地。他セクションと同じ距離感に */
}
.philosophy__head { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; }
.philosophy__en {
  font-family: var(--font-en); font-weight: var(--fw-light);
  font-size: 1.3rem; letter-spacing: 0.1em;      /* 13px tracking-1.3 */
}
.philosophy__jp {
  font-family: var(--font-base); font-weight: var(--fw-medium);
  font-size: 2.2rem; letter-spacing: 0.1em;      /* 22px tracking-2.2 */
}
.philosophy__lead {
  font-family: var(--font-base); font-weight: var(--fw-medium);
  font-size: 2.6rem; line-height: 5rem; letter-spacing: 0.05em; /* 26px leading-50 */
}
.philosophy__body {
  font-family: var(--font-base); font-weight: var(--fw-regular);
  font-size: 1.9rem; line-height: 3.2rem; letter-spacing: 0.05em; /* 19px leading-32 */
}
.philosophy__body p + p { margin-top: 3.2rem; } /* 段落間（Figmaの空行相当） */
.philosophy__logo { color: var(--color-base); line-height: 0; }
.philosophy__logo .logo-svg { width: 16rem; height: auto; }

@media (max-width: 1024px) {
  .philosophy { padding: 11rem 2rem 8rem; }        /* SP：FVとの余白を半分に（pt 22rem→11rem） */
  /* アンカー着地：他セクション見出し（section上端8rem＋section padding6.4rem＝14.4rem）と同じ位置に。PCの12remはSPでは過大 */
  .philosophy__inner { gap: 4rem; scroll-margin-top: 6.4rem; }
  .philosophy__en { font-size: 1rem; }             /* 10px */
  .philosophy__jp { font-size: 1.6rem; }            /* 16px */
  .philosophy__lead { font-size: 1.8rem; line-height: 3rem; }   /* 18px leading-30 */
  /* SP本文：最長行「自身の…アジアの若者」(26字)を基準に。
     ~393px＝幅に比例(1.27rem)して左右いっぱいに充填、393px以上＝393px時のサイズ(13.3px)で固定
     →幅が広がっても大きくならないので絶対に折り返さない。768px以降はタブレット側で上書き。字間0 */
  .philosophy__body { font-size: min(1.27rem, 13.3px); line-height: 2; letter-spacing: 0; }
  .philosophy__body p + p { margin-top: 2.4rem; }
  .philosophy__logo .logo-svg { width: 13rem; }
}

/* ============================== FEATURES（自社の特徴） ============================== */
/* リード：PC＝Bold 26px 中央 / SP＝Medium 16px 左寄せ（Figmaで別スタイル） */
.features__lead {
  text-align: center;
  font-family: var(--font-base);
  font-weight: var(--fw-bold);
  font-size: 2.6rem;               /* 26px */
  line-height: 5rem;               /* leading-50 */
  letter-spacing: 0.05em;          /* 1.3px */
  color: var(--color-main);
}
.features__grid {
  margin-top: 6.4rem;              /* gap-64（リード→カード） */
  display: flex;
  gap: 2.4rem;                     /* gap-24 */
  align-items: stretch;           /* カード等高 */
}
.feature-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rem;                       /* gap-40（アイコン→本文） */
  padding: 4rem 2.4rem;            /* py-40 px-24 */
  background: var(--color-sub);    /* #F9FAFC */
  border-radius: 1.6rem;           /* 16px */
}
.feature-card__icon { line-height: 0; }
.feature-card__icon img { width: auto; height: 4.8rem; } /* 高さ48px基準 */
.feature-card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4rem;                     /* gap-24 */
  width: 100%;
}
.feature-card__title {
  font-family: var(--font-base);
  font-weight: var(--fw-medium);
  font-size: 1.8rem;               /* 18px */
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--color-main);
  text-align: center;
}
.feature-card__rule {
  width: 4rem;                     /* 40px */
  height: 1px;
  background: var(--color-main);   /* #003853 */
}
.feature-card__text {              /* 本文は左寄せ（Figma準拠） */
  font-family: var(--font-base);
  font-weight: var(--fw-regular);
  font-size: 1.6rem;               /* 16px */
  line-height: 3.2rem;             /* leading-32 */
  letter-spacing: 0.03em;
  color: var(--color-main);
  width: 100%;
}

@media (max-width: 1024px) {
  .features__lead {
    text-align: left;
    font-weight: var(--fw-medium); /* SPはMedium */
    font-size: 1.6rem;             /* 16px */
    line-height: 3rem;             /* leading-30 */
    letter-spacing: 0.02em;
  }
  .features__grid {
    margin-top: 3.2rem;            /* gap-32 */
    flex-direction: column;        /* 縦積み */
    gap: 2.4rem;                   /* gap-24 */
  }
  .feature-card { gap: 2.4rem; }   /* SP アイコン→本文 gap-24 */
  .feature-card__title { font-size: 1.5rem; }                   /* 15px */
  .feature-card__text { font-size: 1.3rem; line-height: 2.4rem; } /* 13px leading-24 */
}

/* ============================== SERVICE（主な商品・サービス） ============================== */
/* リード：PC Bold 26px 中央2行 / SP Bold 16px 左寄せ（Figma準拠） */
.service__lead {
  text-align: center;
  font-family: var(--font-base); font-weight: var(--fw-bold);
  font-size: 2.6rem; line-height: 5rem; letter-spacing: 0.05em;
  color: var(--color-main);
}
.service__list {
  margin-top: 6.4rem;              /* gap-64（リード→リスト） */
  display: flex; flex-direction: column; gap: 6.4rem; /* 行間 gap-64 */
}
/* 1行：PC＝画像(左)＋テキスト(右) 等分・gap64 */
.service-card { display: flex; gap: 6.4rem; align-items: center; }
.service-card__media { flex: 1; aspect-ratio: 1200 / 685; overflow: hidden; }
.service-card__media img { width: 100%; height: 100%; object-fit: cover; }
.service-card__body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 1.6rem; } /* gap-16 */
.service-card__title {
  font-family: var(--font-base); font-weight: var(--fw-medium);
  font-size: 3rem; line-height: 1.4; letter-spacing: 0.05em; color: var(--color-main); /* 30px */
}
.service-card__rule { width: 100%; height: 1px; background: var(--color-main); }
.service-card__catch {
  font-family: var(--font-base); font-weight: var(--fw-medium);
  font-size: 1.9rem; line-height: 3.2rem; letter-spacing: 0.05em; color: var(--color-main); /* 19px leading-32 */
}
.service-card__text {
  font-family: var(--font-base); font-weight: var(--fw-regular);
  font-size: 1.6rem; line-height: 3.2rem; letter-spacing: 0.05em; color: var(--color-main); /* 16px leading-32 */
}

/* pill link（詳しくはこちら ›）：枠線ピル・矢印は右パディング内に配置。ホバーで反転 */
.pill-link {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 21.5rem;             /* Figma枠幅215px（横長ピル） */
  padding: 1.2rem 5.6rem;         /* py-12 px-56 */
  border: 1px solid var(--color-main); border-radius: 100px;
  font-family: var(--font-base); font-weight: var(--fw-regular);
  font-size: 1.4rem; line-height: 1; letter-spacing: 0.05em; color: var(--color-main); /* line-height:1で高さ40pxに（本文1.9の継承を打ち消す） */
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
}
.pill-link__arrow { position: absolute; right: 1.9rem; top: 50%; transform: translateY(-50%); width: 0.6rem; height: 1rem; }
@media (hover: hover) {
  .pill-link:hover { background: var(--color-main); color: var(--color-base); } /* 矢印はcurrentColorで白に */
}
/* 塗りバリエーション（チャリティー企画など）：#003853塗り・白文字。ホバーで反転 */
.pill-link--main { background: var(--color-main); color: var(--color-base); }
@media (hover: hover) {
  .pill-link--main:hover { background: transparent; color: var(--color-main); }
}

@media (max-width: 1024px) {
  .service__lead { text-align: left; font-size: 1.6rem; line-height: 3rem; letter-spacing: 0.02em; }
  .service__list { margin-top: 3.2rem; gap: 6.4rem; } /* SPのみカード間を64pxに（次カードと近すぎ回避） */
  .service-card { flex-direction: column; gap: 2.4rem; align-items: stretch; } /* 画像上・テキスト下・全幅 */
  .service-card__media { aspect-ratio: 353 / 200; }
  .service-card__title { font-size: 2rem; }                       /* 20px */
  .service-card__catch { font-size: 1.6rem; line-height: 2.8rem; } /* 16px leading-28 */
  .service-card__text { font-size: 1.3rem; line-height: 2.4rem; } /* 13px leading-24 */
  .pill-link { width: 100%; }                                     /* SP 全幅 */
}

/* ============================== SOCIAL ACTIVITY（私たちの社会活動） ============================== */
/* リード：PC Bold 26px 中央2行 / SP Bold 16px 左寄せ */
.social__lead {
  text-align: center;
  font-family: var(--font-base); font-weight: var(--fw-bold);
  font-size: 2.6rem; line-height: 5rem; letter-spacing: 0.05em;
  color: var(--color-main);
}

/* 自動ループスライダー（画面横幅いっぱい・l-inner外の直下子＝100vw） */
.social__slider {
  margin-top: 6.4rem;              /* リード→スライダー gap-64 */
  width: 100%;
  background: var(--color-sub);    /* #F9FAFC */
  padding-block: 2.4rem;           /* py-24 */
  overflow: hidden;
}
.marquee {
  display: flex; width: max-content;
  animation-name: marquee-scroll; animation-timing-function: linear; animation-iteration-count: infinite;
  animation-duration: calc(var(--marquee-items, 9) * 5s); /* 枚数×5秒＝速度一定（JSが--marquee-items設定） */
}
.marquee__item { flex: 0 0 auto; width: 30rem; height: 22.5rem; margin-right: 2rem; } /* PC 300×225・gap20 */
.marquee__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes marquee-scroll { to { transform: translateX(-50%); } } /* JSでトラックを複製し2セット化→-50%=1セットでシームレス */
@media (prefers-reduced-motion: reduce) { .marquee { animation: none; } }

/* チャリティー：ワールドマップ(opacity 0.14)を背面に、テキスト＋ボタンを中央に */
/* PC：ワールドマップ(ドットSVG)を絶対配置で全体表示(SVGのpreserveAspectRatio=contain相当)、text+buttonを中央に重ねる */
.social__charity { position: relative; margin-top: 6.4rem; min-height: 60rem; } /* マップ表示領域（Figma 600） */
.social__charity-inner {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4rem; /* gap-40 */
  text-align: center; padding: 0 2rem;
}
.social__charity-textwrap { display: contents; } /* PC：透過。map/textをinnerの中央寄せに参加させる */
.social__charity-map { position: absolute; inset: 0; pointer-events: none; }
.social__charity-map svg { width: 100%; height: 100%; display: block; } /* preserveAspectRatio既定meet＝全体表示・中央 */
/* ドット：初期0 → スクロールで散らばって出現(中心ほど濃い) → 一部トゥインクル。JSが per-circle の --o/--rd/--td を付与 */
.social__charity-map circle {
  fill: var(--color-main); fill-opacity: 0;
  transition: fill-opacity 0.55s ease; transition-delay: var(--rd, 0s);
}
.social__charity-map.is-revealed circle { fill-opacity: var(--o, 0.14); }
.social__charity-map.is-twinkling circle.tw { animation: dot-tw 3.2s ease-in-out infinite; animation-delay: var(--td, 0s); }
@keyframes dot-tw { 0%, 100% { fill-opacity: var(--o); } 50% { fill-opacity: calc(var(--o) * 2.4); } }
.social__charity-text {
  position: relative; /* マップの前面 */
  font-family: var(--font-base); font-weight: var(--fw-medium);
  font-size: 1.9rem; line-height: 3.2rem; letter-spacing: 0.05em; color: var(--color-main); /* 19px leading-32 */
}

@media (max-width: 1024px) {
  .social__lead { text-align: left; font-size: 1.6rem; line-height: 3rem; letter-spacing: 0.02em; }
  .social__slider { margin-top: 3.2rem; }
  .marquee { animation-duration: calc(var(--marquee-items, 9) * 6s); } /* SPは遅め */
  .marquee__item { width: 20rem; height: 15rem; margin-right: 1.2rem; } /* SPは小さめ 200×150・gap12 */
  /* SP：mapは画面いっぱい(全幅)・in-flowで高さを持つ。テキストはその上に中央overlay、ボタンはmapの下 */
  .social__charity { margin-top: 6.4rem; min-height: 0; }             /* スライダーとの余白を増やす（テキスト上の余白） */
  .social__charity-inner { position: static; align-items: stretch; justify-content: flex-start; text-align: left; gap: 3.2rem; padding: 0; }
  .social__charity-textwrap { display: block; position: relative; }
  .social__charity-map { position: static; }                          /* in-flow＝高さを持つ */
  .social__charity-map svg { width: 100%; height: auto; }             /* 全幅(画面いっぱい) 335×166 */
  .social__charity-text {
    position: absolute; inset: 0;                                     /* mapの上に重ねる */
    display: flex; flex-direction: column; justify-content: center;   /* mapの中央にテキスト */
    font-size: 1.3rem; line-height: 2.4rem;                           /* 13px leading-24 */
  }
}

/* SP（<768px）のみ：worldmapのドットを少し濃く（中心0.09→端0.20 を約1.6倍） */
@media (max-width: 767px) {
  .social__charity-map.is-revealed circle { fill-opacity: calc(var(--o, 0.14) * 1.6); }
}

/* ============================== MEMBERS（役員紹介） ============================== */
.members__grid { display: flex; gap: 4rem; justify-content: center; } /* PC 3枚横並び gap-40 */
.member-card { flex: 0 0 30rem; display: flex; flex-direction: column; gap: 1.6rem; cursor: pointer; } /* 300px幅 */
.member-card__photo { position: relative; aspect-ratio: 360 / 440; border-radius: 1.6rem; overflow: hidden; background: var(--main-12); }
.member-card__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; transition: transform 0.6s var(--ease); } /* 上揃え＝頭上の余白を確保。ホバーでゆっくりズーム */
/* ホバーで下から立ち上がるネイビーの幕（写真下部のみ・ブランドカラー） */
.member-card__photo::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(0, 56, 83, 0.55) 0%, rgba(0, 56, 83, 0) 55%);
  opacity: 0; transition: opacity 0.5s var(--ease);
}
/* ＋アイコン（写真右下）。ホバーで反転：#003853の円→白い円 / 白＋→#003853＋ */
.member-card__plus { position: absolute; right: 1.6rem; bottom: 1.6rem; z-index: 2; width: 5rem; height: 5rem; line-height: 0; cursor: pointer; } /* 幕(z1)より前面 */
.member-card__plus-icon { width: 100%; height: 100%; display: block; }
.member-card__plus-icon .plus-ring { fill: var(--color-main); fill-opacity: 0.8; transition: fill 0.35s var(--ease), fill-opacity 0.35s var(--ease); }
.member-card__plus-icon .plus-mark { fill: #fff; transition: fill 0.35s var(--ease); }
@media (hover: hover) {
  .member-card:hover .plus-ring { fill: #fff; fill-opacity: 1; }
  .member-card:hover .plus-mark { fill: var(--color-main); }
  .member-card:hover .member-card__photo img { transform: scale(1.05); } /* ゆっくりズーム */
  .member-card:hover .member-card__photo::after { opacity: 1; }          /* 下からネイビーの幕 */
}
@media (prefers-reduced-motion: reduce) {
  .member-card:hover .member-card__photo img { transform: none; }
}
.member-card__meta { display: flex; flex-direction: column; gap: 0.8rem; } /* gap-8。line-height:1で行の余白を排し実質8pxに */
.member-card__role { font-family: var(--font-base); font-weight: var(--fw-regular); font-size: 1.3rem; line-height: 1; letter-spacing: 0.05em; color: var(--color-main); } /* 13px */
.member-card__name { font-family: var(--font-base); font-weight: var(--fw-medium); font-size: 2.4rem; line-height: 1; letter-spacing: 0.05em; color: var(--color-main); } /* PC 24px */

@media (max-width: 1024px) {
  /* SP：横2列。3人目(奇数)は2段目の左に自動配置 */
  .members__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3.2rem 1.6rem; }
  .member-card { flex: none; width: auto; gap: 1.2rem; } /* カード縮小に合わせ写真→氏名を詰める */
  .member-card__name { font-size: 1.8rem; } /* SP 18px */
  .member-card__plus { width: 2.8rem; height: 2.8rem; right: 0.8rem; bottom: 0.8rem; } /* 小さいカードに合わせて縮小 */
}

/* ============================== COMPANY（会社概要） ============================== */
/* 定義リスト表：ラベル＋値を上下中央揃え、行間に1px区切り線(#003853 opacity0.5) */
.company__table { width: 80rem; max-width: 100%; margin-inline: auto; } /* PC 800px 中央 */
.company__row {
  display: flex; align-items: center;      /* ラベルと値を上下中央揃え */
  padding-block: 1.6rem;                    /* 上下16px */
  border-top: 1px solid rgba(0, 56, 83, 0.5);
}
.company__row:last-child { border-bottom: 1px solid rgba(0, 56, 83, 0.5); }
.company__label {
  flex: 0 0 14rem;                          /* PC ラベル幅140 */
  font-family: var(--font-base); font-weight: var(--fw-bold);
  font-size: 1.6rem; line-height: 1.5; letter-spacing: 0.05em; color: var(--color-main);
}
.company__value {
  font-family: var(--font-base); font-weight: var(--fw-regular);
  font-size: 1.6rem; line-height: 1.5; letter-spacing: 0.05em; color: var(--color-main);
}

@media (max-width: 1024px) {
  .company__table { width: 100%; }
  .company__label { flex: 0 0 9.6rem; font-size: 1.3rem; }  /* SP ラベル幅96 / 13px */
  .company__value { font-size: 1.3rem; }
}

/* ============================== CONTACT（お問い合わせ・入力/確認/完了の3ビュー） ============================== */
.contact { width: 80rem; max-width: 100%; margin-inline: auto; } /* PC 800px 中央 */
.contact__view { display: flex; flex-direction: column; align-items: center; gap: 3.2rem; }
.contact__view[hidden] { display: none; } /* display:flexが[hidden]を打ち消すのを防ぐ */
.contact__intro {
  font-family: var(--font-base); font-weight: var(--fw-regular);
  font-size: 1.4rem; line-height: 2.4rem; letter-spacing: 0.05em; color: var(--color-main); text-align: center;
}
.contact__complete {
  font-family: var(--font-base); font-weight: var(--fw-regular);
  font-size: 1.4rem; line-height: 2.8rem; letter-spacing: 0.05em; color: var(--color-main); text-align: center;
}

/* --- 入力フォーム --- */
.contact-form { display: flex; flex-direction: column; gap: 3.2rem; width: 100%; }
.contact-field { display: flex; flex-direction: column; gap: 0.8rem; width: 100%; }
.contact-field__head { display: flex; align-items: center; gap: 0.8rem; min-height: 3.2rem; }
.contact-field__label { font-family: var(--font-base); font-weight: var(--fw-bold); font-size: 1.5rem; letter-spacing: 0.05em; color: var(--color-main); }
.contact-field__req {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.4rem 1.2rem; border-radius: 100px; background: var(--color-main);
  font-family: var(--font-base); font-weight: var(--fw-bold); font-size: 1.1rem; letter-spacing: 0.05em; color: var(--color-base);
}
.contact-field__input {
  width: 100%; height: 5.1rem; padding: 0 1.6rem;
  background: #fff; border: 1px solid rgba(0, 56, 83, 0.5); border-radius: 0.8rem;
  font-family: var(--font-base); font-weight: var(--fw-regular); font-size: 1.6rem; letter-spacing: 0.05em; color: var(--color-main);
  transition: border-color 0.2s var(--ease);
}
.contact-field__input::placeholder { color: var(--color-sub2); opacity: 1; }
.contact-field__input:focus { outline: none; border-color: var(--color-main); }
.contact-field__textarea { height: auto; min-height: 30rem; padding: 1.6rem; line-height: 1.7; resize: vertical; }
.contact-field__error { font-family: var(--font-base); font-size: 1.3rem; letter-spacing: 0.03em; color: #c0392b; }
.contact-field.is-error .contact-field__input { border-color: #c0392b; }

/* --- 確認ビュー --- */
.contact-confirm { display: flex; flex-direction: column; gap: 3.2rem; width: 100%; }
.contact-confirm__row { display: flex; flex-direction: column; gap: 0.8rem; }
.contact-confirm__row dt { font-family: var(--font-base); font-weight: var(--fw-bold); font-size: 1.5rem; letter-spacing: 0.05em; color: var(--color-main); }
.contact-confirm__row dd {
  font-family: var(--font-base); font-weight: var(--fw-regular); font-size: 1.6rem; line-height: 1.7; letter-spacing: 0.05em;
  color: var(--color-main); white-space: pre-wrap; word-break: break-word;
}

/* --- ボタン（filled #003853・ホバーで反転）。確認の2ボタンはFigma準拠で両方filled --- */
.contact__actions { display: flex; justify-content: center; gap: 4rem; width: 100%; }
.contact-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20rem; padding: 2.4rem 6.4rem;
  border: 1px solid var(--color-main); border-radius: 100px; background: var(--color-main);
  font-family: var(--font-base); font-weight: var(--fw-bold); font-size: 1.6rem; letter-spacing: 0.05em; color: var(--color-base);
  cursor: pointer; transition: background 0.4s var(--ease), color 0.4s var(--ease);
}
@media (hover: hover) { .contact-btn:hover { background: transparent; color: var(--color-main); } }

@media (max-width: 1024px) {
  .contact__intro { font-size: 1.3rem; text-align: left; } /* SPは左揃え */
  .contact-field__label { font-size: 1.2rem; }
  .contact-field__head { gap: 0.4rem; }
  .contact-field__req { font-size: 1rem; }
  .contact-confirm__row dt { font-size: 1.2rem; }
  .contact-confirm__row dd { font-size: 1.4rem; }
  .contact__complete { font-size: 1.3rem; line-height: 2.6rem; text-align: left; }
  .contact__actions { flex-direction: column; align-items: stretch; gap: 1.6rem; }
  .contact-btn { width: 100%; min-width: 0; padding: 2rem 3rem; }
}

/* ============================== 送信完了ページ（独立ページ /thanks/） ============================== */
.thanks { display: flex; align-items: center; min-height: calc(100vh - 10rem); } /* ヘッダー高さ(PC100)分を引いて縦中央 */
.thanks__inner { display: flex; flex-direction: column; align-items: center; gap: 6.4rem; text-align: center; }
.contact-btn--link { text-decoration: none; }
@media (max-width: 1024px) {
  .thanks { min-height: calc(100vh - 7rem); }        /* SPヘッダー70px */
  .thanks__inner { gap: 4.8rem; }
}

/* ============================== MEMBER MODAL（役員プロフィール） ============================== */
.member-modal {
  position: fixed; top: 0; left: 0; width: 100%; height: 100dvh; z-index: 100; /* 可視領域基準（JSがVisualViewportで精密に上書き）。inset:0(=100vh)だとモバイルのアドレスバー分ズレる */
  display: flex; align-items: center; justify-content: center; padding: 2rem;
  opacity: 0; visibility: hidden; transition: opacity 0.3s var(--ease), visibility 0.3s var(--ease);
}
.member-modal.is-open { opacity: 1; visibility: visible; }
.member-modal__overlay { position: absolute; inset: 0; background: rgba(0, 56, 83, 0.6); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.member-modal__dialog {
  position: relative; z-index: 1;
  display: flex; width: min(112rem, 100%); height: min(80rem, 90dvh);
  background: #fff; border-radius: 1.6rem; overflow: hidden;
  transform: scale(0.98); transition: transform 0.3s var(--ease);
}
.member-modal.is-open .member-modal__dialog { transform: scale(1); }
.member-modal__dialog:focus { outline: none; }
/* 写真（PC=左半分・長方形） */
.member-modal__photo { flex: 1 0 0; min-width: 0; }
.member-modal__photo picture { display: block; width: 100%; height: 100%; }
.member-modal__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
/* 本文（PC=右半分・スクロール） */
.member-modal__body { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 2.4rem; padding: 3.2rem 4rem 4rem; overflow-y: auto; }
.member-modal__body > * { flex-shrink: 0; } /* 長い経歴で内容が溢れても各要素(特に1px下線)を潰さずスクロールさせる */
.member-modal__nav { display: flex; align-items: center; justify-content: center; gap: 1.5rem; }
.member-modal__arrow, .member-modal__close {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 5rem; height: 5rem; border-radius: 50%; background: var(--color-sub2); color: #fff;
  cursor: pointer; transition: background 0.3s var(--ease);
}
.member-modal__arrow svg, .member-modal__close svg { width: 2.2rem; height: 2.2rem; }
@media (hover: hover) { .member-modal__arrow:hover, .member-modal__close:hover { background: var(--color-main); } }
.member-modal__count { font-family: var(--font-base); font-size: 1.6rem; color: var(--color-main); min-width: 3.5rem; text-align: center; }
.member-modal__close { position: absolute; top: 3.2rem; right: 3.2rem; z-index: 2; }
.member-modal__head { display: flex; flex-direction: column; gap: 0.4rem; }
.member-modal__role { font-family: var(--font-base); font-weight: var(--fw-regular); font-size: 1.6rem; letter-spacing: 0.05em; color: var(--color-main); }
.member-modal__name { font-family: var(--font-base); font-weight: var(--fw-medium); font-size: 4rem; line-height: 1.2; letter-spacing: 0.05em; color: var(--color-main); } /* 40px */
.member-modal__divider { width: 100%; height: 1px; background: rgba(0, 56, 83, 0.5); }
.member-modal__bio { font-family: var(--font-base); font-weight: var(--fw-regular); font-size: 1.6rem; line-height: 3.2rem; letter-spacing: 0.05em; color: var(--color-main); }
.member-modal__bio p + p { margin-top: 3.2rem; }

@media (max-width: 1024px) {
  /* SP：縦積み。正方形写真は周囲に余白＋角丸 */
  .member-modal { padding: 1.6rem; }
  .member-modal__dialog { flex-direction: column; width: min(48rem, 100%); height: auto; max-height: 92dvh; overflow-y: auto; }
  .member-modal__photo { flex: none; padding: 2rem 2rem 0; }
  .member-modal__photo img { aspect-ratio: 1 / 1; height: auto; border-radius: 1.6rem; } /* 正方形・角丸（セクション写真と同様） */
  .member-modal__body { flex: none; overflow: visible; padding: 2.4rem 2rem 2.8rem; gap: 2rem; }
  .member-modal__name { font-size: 2.8rem; } /* SP 28px */
  .member-modal__bio { font-size: 1.3rem; line-height: 2.4rem; }
  .member-modal__bio p + p { margin-top: 2.4rem; }
  .member-modal__arrow, .member-modal__close { width: 4rem; height: 4rem; }
  .member-modal__close { top: 1.2rem; right: 1.2rem; }
}

/* ============================== Tablet（768–1024px）：PC寄りへ上書き ============================== */
@media (min-width: 768px) and (max-width: 1024px) {
  /* PHILOSOPHY：PC寄りフォント（中央テキストは幅問わず成立） */
  .philosophy { padding: 20rem 4rem 10rem; }
  .philosophy__inner { gap: 5.6rem; scroll-margin-top: 8rem; } /* タブレットのsection padding(8rem)に合わせ、見出し着地を他セクションと揃える */
  .philosophy__en { font-size: 1.3rem; }
  .philosophy__jp { font-size: 2.2rem; }
  .philosophy__lead { font-size: 2.4rem; line-height: 4.4rem; }
  .philosophy__body { font-size: 1.7rem; line-height: 3rem; }
  .philosophy__body p + p { margin-top: 3rem; }

  /* FEATURES：3カラム（PC流用） */
  .features__lead { text-align: center; font-weight: var(--fw-bold); font-size: 2rem; line-height: 3.4rem; letter-spacing: 0.05em; }
  .features__lead .br-pc, .service__lead .br-pc { display: inline; } /* リードはPCと同じ位置で改行 */
  .features__grid { flex-direction: row; gap: 2rem; }
  .feature-card { gap: 3.2rem; padding: 3.6rem 2rem; }
  /* タイトルは上揃えのまま、2行分の高さを確保＝1行/2行が混在しても下の線・本文の位置を3枚で揃える */
  .feature-card__title { font-size: 1.7rem; min-height: 5.1rem; }
  .feature-card__text { font-size: 1.4rem; line-height: 2.6rem; }

  /* SERVICE：画像左＋テキスト右（PC流用） */
  .service__lead { text-align: center; font-weight: var(--fw-bold); font-size: 2rem; line-height: 3.4rem; letter-spacing: 0.05em; }
  .service__list { margin-top: 4.8rem; gap: 4.8rem; }
  .service-card { flex-direction: row; gap: 4rem; align-items: center; }
  .service-card__media { aspect-ratio: 1200 / 685; }
  /* 3タイトル共通・1行を保ちつつ幅に応じて可変（768=18px→1024=24px）。狭い時だけ縮小し広い時は大きく */
  .service-card__title { font-size: clamp(1.8rem, 2.34vw, 2.4rem); white-space: nowrap; }
  .service-card__catch { font-size: 1.7rem; line-height: 2.8rem; }
  .service-card__text { font-size: 1.4rem; line-height: 2.6rem; }
  .pill-link { width: auto; }

  /* SOCIAL：リード中央＋チャリティーはPC型（マップ背景の中央にテキスト） */
  .social__lead { text-align: center; font-weight: var(--fw-bold); font-size: 2.2rem; line-height: 3.6rem; letter-spacing: 0.05em; }
  .social__charity { min-height: 50rem; }
  .social__charity-inner { position: absolute; inset: 0; align-items: center; justify-content: center; text-align: center; gap: 4rem; padding: 0 4rem; }
  .social__charity-textwrap { display: contents; }
  .social__charity-map { position: absolute; inset: 0; }
  .social__charity-map svg { width: 100%; height: 100%; }
  .social__charity-text { position: relative; font-size: 1.8rem; line-height: 3rem; }

  /* MEMBERS：2カラムのまま大きめカードに合わせて＋ボタン・氏名を調整 */
  .members__grid { gap: 4rem 3.2rem; }
  .member-card__plus { width: 4.4rem; height: 4.4rem; right: 1.2rem; bottom: 1.2rem; }
  .member-card__name { font-size: 2.2rem; }

  /* COMPANY：ラベル幅をPC寄りに */
  .company__label { flex: 0 0 14rem; font-size: 1.5rem; }
  .company__value { font-size: 1.5rem; }

  /* FV：縦積みは維持しつつPC寄りに拡大。本文は幅を絞って一行が長くなりすぎるのを防ぐ */
  .fv { padding: 0 4rem 10rem; }
  .fv__row { gap: 3.2rem; }
  .fv__title { font-size: 3.4rem; line-height: 4.8rem; }   /* 24→34px */
  .fv__sub { font-size: 1.8rem; }                          /* 12→18px */
  .fv__divider { width: 12rem; }                           /* 横線を少し長く */
  .fv__body { width: 100%; max-width: none; }              /* 幅制限を外し2文目「テクノロジー…ここから。」を1行に収める */
  .fv__body-text { font-size: 1.7rem; line-height: 3.2rem; } /* 13→17px */

  /* SOCIAL スライダー：SPの小さめとPCの中間サイズに */
  .marquee { animation-duration: calc(var(--marquee-items, 9) * 5.5s); }
  .marquee__item { width: 26rem; height: 19.5rem; margin-right: 1.6rem; } /* 260×195 */

  /* CONTACT：PC寄り。ボタンは全幅縦積みをやめ、横並び・自動幅に戻す（間延び防止） */
  .contact__intro { font-size: 1.4rem; text-align: center; } /* タブレットは中央維持 */
  .contact-field__label { font-size: 1.5rem; }
  .contact-field__head { gap: 0.8rem; }
  .contact-field__req { font-size: 1.1rem; }
  .contact-confirm__row dt { font-size: 1.5rem; }
  .contact-confirm__row dd { font-size: 1.6rem; }
  .contact__complete { font-size: 1.4rem; line-height: 2.8rem; text-align: center; }
  .contact__actions { flex-direction: row; align-items: center; gap: 4rem; }
  .contact-btn { width: auto; min-width: 20rem; padding: 2.4rem 6.4rem; }

  /* 送信完了ページ：ボタンは自動幅・見出し余白はPC寄り */
  .thanks { min-height: calc(100vh - 7rem); }
  .thanks__inner { gap: 6.4rem; }
}