@charset "UTF-8";

/* =========================================================
   XOO / Xtreme Offshore Outsourcing Inc.
   トップページ FV スタイル
   - Figma: PC View (1440x1024) を全画面表示に最適化
   ========================================================= */

:root {
  --xoo-red: #C30D23;
  --gray-cc: #CCCCCC;
  --text: #1a1a1a;
  --white: #ffffff;
  --content-x: clamp(20px, 8.3vw, 120px); /* Figma左右余白120px相当 */
  --ease: cubic-bezier(.22, .61, .36, 1);
  /* FVコピー「BPO×DX=BTO」のサイズ基準。1200px幅で最大120pxに到達→以降固定 */
  --eq: clamp(36px, 10vw, 120px);
}

/* =========================================================
   書体：Google Fonts ではなく、実際に描画される文字だけに絞った
   可変フォントを自前で配る
   - xoo-sans        … Noto Sans JP、サイト全881字、wght 400〜900
   - xoo-sans-latin  … Roboto、ラテン108字、wght 400〜700 / wdth 75〜100
     （wdth 軸があるので Roboto Condensed も同じファイルで賄える）

   Google Fonts 経由では 834KB / 38リクエストかかっていた。うち120KBは
   レンダリングを止めるCSS。外部オリジン2つへの接続も無くなる。

   ※原稿やページの文言を変えたら bin/build-fonts.sh で作り直すこと。
     作り直さないと、増えた文字だけシステムフォントに落ちて字面が変わる。
     URLの ?v= は中身のSHA1（先頭8桁）で、build-fonts.sh が自動で書き換える。
     .htaccess で1年キャッシュを付けているため、これが無いと差し替えても
     古い字形が最大1年残り、増やした文字だけ欠ける
   ========================================================= */
@font-face {
  font-family: "XOO Sans";
  src: url("/assets/fonts/xoo-sans.woff2?v=82a01c0f") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
/* ラテン用を指定する箇所では、必ず "XOO Sans" を後ろに置くこと。
   ラテン用サブセットには日本語が1文字も入っていないため、退避先が無いと
   日本語混じりの文字列（例：.bar-chart__value の「150万円」）で
   数字だけラテン用・日本語だけシステムフォント、という混在が起きる。
   実際に起きていたものを 2026-09-24 に修正した。 */
@font-face {
  font-family: "XOO Sans Latin";
  src: url("/assets/fonts/xoo-sans-latin.woff2?v=76a42a7d") format("woff2");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}


* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "XOO Sans", system-ui, sans-serif;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
/* コンポーネントで使う ol も番号を出さない（.list など本文用リストは除く） */
ol.flow, ol.diagram, ol.tags, ol.checklist { list-style: none; margin: 0; padding: 0; }

.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--content-x);
}

/* =========================================================
   Menu Tab（言語＋ハンバーガー）：常に右上に固定
   ========================================================= */
.menu-tab {
  position: fixed;
  top: 47px;
  right: var(--content-x);
  z-index: 100;
  display: flex;
  align-items: stretch;
  width: 96px;
  height: 48px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--xoo-red);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
}
.menu-tab__btn {
  flex: 1 0 0;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 10px;
  transition: background-color .2s var(--ease);
}
.menu-tab__btn:hover { background: rgba(0, 0, 0, .14); }
.menu-tab__btn img { width: 24px; height: auto; }
.menu-tab__btn:last-child img { width: 16px; }

/* =========================================================
   Site Header（ロゴ＋グローバルメニュー）：FVヒーロー上にオーバーレイ
   スクロールで一緒に流れて消える（固定しない）
   ========================================================= */
.site-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 50;
  padding: 42px var(--content-x) 0;
}
.header-inner {
  display: flex;
  align-items: flex-start;
  gap: clamp(16px, 2.5vw, 40px);
  /* 右上固定の Menu Tab(96px) と重ならないよう、その分のスペースを右に予約 */
  padding-right: calc(96px + clamp(16px, 2vw, 40px));
}

/* ロゴ */
.logo {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
.logo__mark { width: 133px; height: 57px; }
.logo__text {
  display: flex;
  flex-direction: column;
  font-family: "XOO Sans Latin", "XOO Sans", sans-serif;
  font-stretch: 75%;           /* 可変の wdth 軸で Condensed を出す */
  font-weight: 700;
  font-size: 16px;
  line-height: 1.18;
  color: var(--white);
  letter-spacing: .01em;
}

/* グローバルメニュー：半透明グレーの角丸バー。
   余白は左（ロゴ↔ナビ）に集約し、縮むとまず左が詰まる。右は予約スペースでLanguageと距離を確保 */
.gnav {
  margin-left: auto;
  flex-shrink: 0;          /* 幅はフォントなりに維持（文字切れ＝クリップさせない） */
  padding-top: 6px;        /* ロゴ高さに対して上端を48px位置へ */
}
.gnav__list {
  display: flex;
  align-items: stretch;
  width: auto;             /* 内容に応じて縮む */
  height: 48px;
  border-radius: 10px;
  background: rgba(130, 130, 130, .62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  overflow: hidden;
}
.gnav__list > li { display: flex; }
.gnav__link {
  display: grid;
  place-items: center;
  height: 100%;
  padding: 0 clamp(8px, 1.1vw, 20px);          /* 項目間スペースも可変 */
  font-family: "XOO Sans Latin", "XOO Sans", sans-serif;
  font-size: clamp(12px, 0.95vw, 16px);        /* 双方詰まったら最小12pxまで縮小 */
  font-weight: 400;
  color: var(--white);
  text-align: center;
  white-space: nowrap;
  transition: background-color .2s var(--ease);
}
/* ロールオーバー：オプションに赤背景（PC_Component state=selected 準拠） */
.gnav__link:hover,
.gnav__link:focus-visible,
.gnav__link[aria-current="page"] {
  background: var(--xoo-red);
}

/* =========================================================
   ヒーロー（FV）
   ========================================================= */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: #0a0a0a;
}

/* 背景スライドショー */
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.6s var(--ease);
}
.hero__slide.is-active { opacity: 1; }
.hero__slide-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1);
  will-change: transform;
}
/* わずかな暗幕でコピーの可読性を確保 */
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .12) 45%, rgba(0, 0, 0, 0) 80%);
  z-index: 1;
  pointer-events: none;
}

/* Ken Burns：画像ごとにズーム起点・方向を変える。
   アニメは .anim が付いている間ずっと再生され続ける（= フェードアウト中も止めない）。
   これにより切替時に transform が基準値へ戻る「カクッ」が起きない。
   duration(8s) > 表示5s + フェード1.6s = 6.6s なので、消えるまで動き続ける。 */
/* 各画像のズーム起点（transform-origin）と表示位置（background-position） */
.hero__slide--1 .hero__slide-img { transform-origin: 50% 50%; }                              /* 1枚目：中央ズームイン（OK） */
.hero__slide--2 .hero__slide-img { transform-origin: 58% 30%; background-position: 42% 38%; } /* 2枚目：タトゥー削除済み画像。右上の手元へズームイン */
.hero__slide--3 .hero__slide-img { transform-origin: 72% 38%; background-position: 60% 40%; } /* 3枚目：女性オペレーターを右に置きズームイン */
.hero__slide--4 .hero__slide-img { transform-origin: 78% 24%; }                              /* 4枚目（OK） */
.hero__slide--5 .hero__slide-img { transform-origin: 0% 55%;  background-position: 0% 58%; }  /* 5枚目：引きの画で海岸線を見せる（椰子の上部は多少切れてOK）。左基点でズームアウト */

.hero__slide.anim .hero__slide-img { animation: kb-in 8s linear forwards; }
.hero__slide--2.anim .hero__slide-img { animation-name: kb-in; }
.hero__slide--5.anim .hero__slide-img { animation-name: kb-out2; }

@keyframes kb-in   { from { transform: scale(1);    } to { transform: scale(1.12); } }
@keyframes kb-out  { from { transform: scale(1.12); } to { transform: scale(1.00); } }
/* 5枚目：引きの画からスタートして海岸線を見せつつ、さらに引いていく */
@keyframes kb-out2 { from { transform: scale(1.24); } to { transform: scale(1.08); } }

/* コピー（大中小の比率 10 : 5 : 3。1200px幅で最大固定）。
   背面の赤枠(::before)は左下固定の細い縦バー。Figmaの赤枠⇔文字の位置関係を踏襲：
   - 左端：ウィンドウ内側12px
   - 下端：ウィンドウ下端
   - 上端：コピー「BPO…」より約1文字分上
   - 右端：BPOの「P」の半分あたり（＝それ以降は赤枠から右へはみ出す） */
.hero__copy {
  --copy-bottom: clamp(40px, 8vh, 80px);  /* コピー下端のウィンドウ下端からの距離 */
  position: absolute;
  z-index: 3;
  isolation: isolate;                     /* ::before を背面に重ねる */
  left: var(--content-x);
  bottom: var(--copy-bottom);
  width: max-content;                     /* テキストの自然幅（右へはみ出す） */
  max-width: 96vw;
  color: var(--white);
  text-shadow: 0 2px 16px rgba(0, 0, 0, .5);
}
.hero__copy::before {
  content: "";
  position: absolute;
  z-index: -1;
  /* 左端をウィンドウの12px内側へ。右端はコピー先頭から約1.05文字（B＋Pの半分）まで */
  left: calc(12px - var(--content-x));
  width: calc(var(--content-x) - 12px + var(--eq) * 1.05);
  /* 上端はコピーより約1文字分上、下端はウィンドウ下端 */
  top: calc(var(--eq) * -0.7);
  bottom: calc(var(--copy-bottom) * -1);
  background: rgba(195, 13, 35, .80);
  border-radius: 12px;
}
.hero__eq {
  display: flex;
  align-items: baseline;
  margin: 0 0 .12em;
  font-weight: 900;
  font-size: var(--eq);
  line-height: 1.1;
  letter-spacing: .01em;
  white-space: nowrap;
}
.hero__eq .op {
  font-weight: 700;
  margin: 0 .22em;       /* × と = の前後を均等に */
  font-size: .82em;      /* 演算子はやや小さくしてバランスを取る */
}
.hero__title {
  margin: 0 0 .5em;
  font-weight: 900;
  font-size: clamp(22px, 5vw, 60px);   /* 1200px幅で最大60px */
  line-height: 1.5;
}
.hero__lead {
  margin: 0;
  font-weight: 700;
  font-size: clamp(14px, 3vw, 36px);   /* 1200px幅で最大36px */
  line-height: 1.6;
}

/* レスポンシブ改行ヘルパー：.br-sp はスマホのみ改行 */
.br-sp { display: none; }

/* =========================================================
   スクロール以降の通常コンテンツ（プレースホルダ / oki.com風クリーン）
   ========================================================= */
.site-main { position: relative; z-index: 4; background: var(--white); }
.section { padding: clamp(64px, 12vh, 160px) 0; }
.section__label {
  margin: 0 0 16px;
  font-family: "XOO Sans Latin", "XOO Sans", sans-serif;
  font-weight: 700;
  letter-spacing: .2em;
  font-size: 13px;
  color: var(--xoo-red);
}
.section__title {
  margin: 0 0 24px;
  font-weight: 900;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.4;
}
.section__lead {
  margin: 0 0 24px;
  font-weight: 500;
  font-size: clamp(15px, 2vw, 20px);
  line-height: 2;
  color: #333;
}
.section__note { margin: 0; font-size: 13px; color: #888; }

/* フッター（Figma: Footer 11:104 準拠） */
.site-footer {
  background: #333;
  color: var(--white);
  /* 上の余白は直前のセクション（CTA）側で取るため0にする。
     境界線までの間隔をCTA上部の余白と同じにそろえる */
  padding: 0 var(--content-x) 60px;
}
.footer-inner {
  max-width: 1200px;
  margin-inline: auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}

/* 左：ブランド */
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
}
.footer-logo img { width: 133px; height: 57px; }
.footer-company {
  margin: 0;
  font-family: "XOO Sans Latin", "XOO Sans", sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.2;
  color: var(--white);
}
.footer-address {
  margin: 0;
  font-family: "XOO Sans Latin", "XOO Sans", sans-serif;
  font-weight: 500;
  font-size: 16px;
  font-style: normal;
  line-height: 1.5;
  color: var(--white);
}

/* 右：メニュー / SNS / コピーライト */
.footer-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 24px;
  min-width: 0;
}
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 16px 36px;
}
.footer-nav a {
  font-family: "XOO Sans Latin", "XOO Sans", sans-serif;
  font-weight: 500;
  font-size: 18px;
  color: var(--white);
  white-space: nowrap;
  transition: opacity .2s var(--ease);
}
.footer-nav a:hover { opacity: .65; }
.footer-social {
  display: flex;
  align-items: center;
  gap: 36px;
}
.footer-social__link { display: block; transition: opacity .2s var(--ease); }
.footer-social__link:hover { opacity: .75; }
.footer-social__link img { height: 48px; width: auto; }
/* リーガルリンク（個人情報保護方針 / Cookie運用方針 / Cookie設定） */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px 20px;
  margin: 0;
  font-family: "XOO Sans Latin", "XOO Sans", sans-serif;
  font-size: 13px;
  color: var(--gray-cc);
}
.footer-legal a { color: var(--gray-cc); transition: color .2s var(--ease); }
.footer-legal a:hover { color: var(--white); text-decoration: underline; }

.footer-copy {
  margin: 0;
  font-family: "XOO Sans Latin", "XOO Sans", sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: var(--gray-cc);
}

/* フッター：タブレット以下は縦積み・左寄せ */
@media (max-width: 768px) {
  .footer-inner { flex-direction: column; gap: 32px; }
  .footer-right { align-items: flex-start; }
  .footer-nav { justify-content: flex-start; gap: 14px 24px; }
  .footer-legal { justify-content: flex-start; }
}

/* フッター内「Cookie設定」再表示リンク */
.footer-cookie-settings {
  margin-left: 14px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--gray-cc);
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
  transition: color .2s var(--ease);
}
.footer-cookie-settings:hover { color: var(--white); }

/* =========================================================
   Cookie同意バナー（下部固定）
   ========================================================= */
.cookie-consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  background: rgba(34, 34, 34, .97);
  color: var(--white);
  padding: 16px clamp(16px, 4vw, 40px);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .28);
  transform: translateY(100%);
  transition: transform .4s var(--ease);
}
.cookie-consent.is-visible { transform: translateY(0); }
.cookie-consent[hidden] { display: none; }
.cookie-consent__inner {
  max-width: 1200px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 32px;
}
.cookie-consent__text {
  margin: 0;
  flex: 1 1 420px;
  font-family: "XOO Sans", sans-serif;
  font-size: 14px;
  line-height: 1.7;
}
.cookie-consent__link { color: var(--white); text-decoration: underline; }
.cookie-consent__link:hover { opacity: .8; }
.cookie-consent__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.cookie-consent__btn {
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 28px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .2s var(--ease), opacity .2s var(--ease);
}
.cookie-consent__btn--accept { background: var(--xoo-red); color: var(--white); }
.cookie-consent__btn--accept:hover { background: #a60b1e; }
.cookie-consent__btn--ghost {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, .5);
}
.cookie-consent__btn--ghost:hover { background: rgba(255, 255, 255, .12); }
.cookie-consent__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (max-width: 600px) {
  .cookie-consent__inner { flex-direction: column; align-items: stretch; }
  .cookie-consent__actions { flex-wrap: wrap; justify-content: stretch; }
  .cookie-consent__actions .cookie-consent__btn { flex: 1 1 auto; }
}

/* =========================================================
   Cookie設定モーダル
   ========================================================= */
.cc-modal { position: fixed; inset: 0; z-index: 1100; }
.cc-modal[hidden] { display: none; }
.cc-modal__overlay {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .5);
  opacity: 0; transition: opacity .4s var(--ease);
}
.cc-modal.is-open .cc-modal__overlay { opacity: 1; }
.cc-modal__dialog {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -46%);
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: #fff;
  color: var(--text);
  border-radius: 14px;
  padding: 32px clamp(20px, 4vw, 40px);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .35);
  opacity: 0;
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.cc-modal.is-open .cc-modal__dialog { opacity: 1; transform: translate(-50%, -50%); }
.cc-modal__close {
  position: absolute; top: 12px; right: 14px;
  width: 36px; height: 36px;
  border: 0; background: none;
  font-size: 26px; line-height: 1; color: #888;
  cursor: pointer; border-radius: 8px;
}
.cc-modal__close:hover { background: #f0f0f0; color: #333; }
.cc-modal__title { margin: 0 0 12px; font-size: 22px; font-weight: 900; }
.cc-modal__lead { margin: 0 0 20px; font-size: 14px; line-height: 1.7; color: #555; }

.cc-cat { display: flex; flex-direction: column; gap: 4px; margin: 0 0 24px; }
.cc-cat__item { padding: 16px 0; border-top: 1px solid #eee; }
.cc-cat__item:last-child { border-bottom: 1px solid #eee; }
.cc-cat__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cc-cat__name { font-weight: 700; font-size: 15px; }
.cc-cat__fixed { font-size: 13px; color: #999; }
.cc-cat__desc { margin: 8px 0 0; font-size: 13px; line-height: 1.6; color: #666; }

/* トグルスイッチ */
.cc-switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; flex-shrink: 0; }
.cc-switch input { position: absolute; opacity: 0; width: 44px; height: 24px; margin: 0; cursor: pointer; }
.cc-switch__slider {
  width: 44px; height: 24px; border-radius: 999px;
  background: #ccc; position: relative; transition: background-color .2s var(--ease);
}
.cc-switch__slider::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px; border-radius: 50%; background: #fff;
  transition: transform .2s var(--ease); box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
.cc-switch input:checked + .cc-switch__slider { background: var(--xoo-red); }
.cc-switch input:checked + .cc-switch__slider::after { transform: translateX(20px); }
.cc-switch input:focus-visible + .cc-switch__slider { outline: 2px solid var(--xoo-red); outline-offset: 2px; }
.cc-switch__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* a11y用ラベル（視覚的に隠す） */

.cc-modal__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.cc-modal__actions .cookie-consent__btn--ghost { color: var(--text); border-color: #ccc; }
.cc-modal__actions .cookie-consent__btn--ghost:hover { background: #f3f3f3; }
@media (max-width: 480px) {
  .cc-modal__actions { flex-direction: column-reverse; }
  .cc-modal__actions .cookie-consent__btn { width: 100%; }
}

/* Google Maps 代替表示 */
.cc-map-fallback {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; height: 100%; min-height: 240px;
  padding: 24px; text-align: center;
  background: #f2f2f2; color: #555;
}
.cc-map-fallback__text { margin: 0; font-size: 14px; line-height: 1.6; }

/* =========================================================
   レスポンシブ：グローバルメニューはタブレット以下で隠す（ハンバーガーで代替予定）
   ========================================================= */
/* 狭幅では左右インセットとMenu Tab位置を詰めて、約900pxまでナビが重ならず収まるようにする
   （ロゴ・ナビのサイズ／フォントはこの帯では変更しない） */
@media (max-width: 1120px) {
  .site-header { padding-left: clamp(20px, 3vw, 40px); padding-right: clamp(20px, 3vw, 40px); }
  .menu-tab { right: clamp(20px, 3vw, 40px); }
  .header-inner { padding-right: calc(96px + 12px); }
}

/* 約900px以下：グローバルナビを非表示（言語アイコンに重なる前に、Menu Tabのハンバーガーへ集約）。
   ※ロゴ（XOO＋英字テキスト）はサイズ・表示を変更しない */
@media (max-width: 900px) {
  .gnav { display: none; }
  .header-inner { padding-right: 0; }
}

/* ロゴがMenu Tabに重なる幅で、ロゴ全体を縮める。
   Menu Tab の左端はおよそ (100vw - 108px)。ロゴの開始位置20pxと
   間隔12pxを引いた幅に収める必要がある。414px以上では重ならないので、
   その手前の420pxから縮め始める。
   ロゴは「マーク＋英字3行」で全体が約17.25em幅なので、
   使える幅を17.25で割った値を基準フォントサイズにすれば全体が比例して縮む。
   マークと間隔を em で持たせているため、font-size だけで一括制御できる。
   除数は 17.25 のまま据え置く。マークだけを小さくした結果ロゴ全体は
   それより細くなるが、タブとの間隔が広がる側なので問題にならない。 */
@media (max-width: 420px) {
  .logo {
    font-size: clamp(9px, calc((100vw - 140px) / 17.25), 16px);
    gap: 1em;
  }
  /* マークは英字テキストに対して大きいので、スマホではさらに20%落とす。
     8.3125em（133px相当）× 0.8 = 6.65em */
  .logo__mark { width: 6.65em; height: auto; }
  .logo__text { font-size: 1em; }
}

/* スマートフォン：コピーの改行をさらに追加（指定の改行位置） */
@media (max-width: 600px) {
  .br-sp { display: inline; }
  .site-header { padding-top: 24px; }
  .menu-tab { top: 24px; }
  .hero__copy {
    --copy-bottom: clamp(24px, 6vh, 56px);
    /* left が var(--content-x) ぶん右にあるので、そのぶんを引かないと右が見切れる。
       390pxでは left=32px に対して max-width=374px となり、16px はみ出していた。 */
    max-width: calc(100vw - var(--content-x) - 16px);
  }
}

/* アクセシビリティ：モーション低減設定時はKen Burnsとスムーススクロールを無効化 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__slide.anim .hero__slide-img { animation: none; }
  .hero__slide { transition: opacity .4s linear; }
}

/* =========================================================
   下層ページ共通：タイトル帯（ヘッダーが白文字オーバーレイのため背面はダーク）
   ※トップ以外の固定ページ（privacy / cookie-policy 等）で使用
   ========================================================= */
.page-hero {
  position: relative;
  background: #333;
  color: var(--white);
  /* 上：absoluteなヘッダー(約100px)＋Menu Tabを確実に避ける余白 */
  padding-top: clamp(140px, 18vh, 200px);
  padding-bottom: clamp(36px, 6vh, 64px);
}
.page-hero__en {
  margin: 0 0 10px;
  font-family: "XOO Sans Latin", "XOO Sans", sans-serif;
  font-weight: 700;
  letter-spacing: .2em;
  font-size: 13px;
  color: var(--xoo-red);
  text-transform: uppercase;
}
.page-hero__title {
  margin: 0;
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.3;
}

/* パンくず */
.breadcrumb {
  padding: 14px 0;
  font-size: 12px;
  color: #777;
  border-bottom: 1px solid #eee;
}
.breadcrumb a:hover { color: var(--xoo-red); text-decoration: underline; }
.breadcrumb span[aria-current] { color: var(--text); }

/* =========================================================
   法務系ページ本文（privacy / cookie-policy）
   ========================================================= */
.legal { padding: clamp(48px, 8vh, 88px) 0 clamp(72px, 12vh, 132px); }
.legal__inner { max-width: 1200px; }     /* コンテンツ幅 最大1200px */
.legal__lead {
  margin: 0 0 clamp(32px, 5vh, 56px);
  font-size: 15px;
  line-height: 2;
  color: #333;
}
.legal__sec { margin-bottom: clamp(32px, 5vh, 52px); }
.legal__sec > h2 {
  margin: 0 0 16px;
  padding-left: 14px;
  border-left: 4px solid var(--xoo-red);
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 700;
  line-height: 1.4;
}
.legal__sec p {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.95;
  color: #333;
}
.legal__sec p:last-child { margin-bottom: 0; }
.legal__sec ul,
.legal__sec ol {
  margin: 0 0 14px;
  padding-left: 1.4em;
  font-size: 15px;
  line-height: 1.9;
  color: #333;
}
.legal__sec ul { list-style: disc; }
.legal__sec ol { list-style: decimal; }
.legal__sec li { margin-bottom: 8px; }
.legal__sec a { color: var(--xoo-red); text-decoration: underline; word-break: break-all; }

/* テーブル（Cookieの種類など） */
.legal__table-wrap { overflow-x: auto; margin: 0 0 14px; }
.legal__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.7;
}
.legal__table th,
.legal__table td {
  padding: 12px 14px;
  border: 1px solid #ddd;
  text-align: left;
  vertical-align: top;
}
.legal__table thead th { background: #f5f5f5; font-weight: 700; white-space: nowrap; }

/* 連絡先・改定情報のブロック */
.legal__contact {
  margin: 0;
  padding: 20px 22px;
  background: #f7f7f7;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.9;
  font-style: normal;
}
.legal__meta { margin: 0; color: #777; font-size: 13px; line-height: 1.9; }

/* =========================================================
   下層ページ共通コンポーネント
   （about / services / strengths / contact / トップ本文）
   ========================================================= */
:root {
  --gray-bg: #f5f5f5;
  --gray-line: #e2e2e2;
  --text-sub: #555;
  --radius: 12px;
}

[id] { scroll-margin-top: 96px; }  /* アンカー遷移時、右上Menu Tabと重ならないよう余白 */

/* ただしセクション単位のアンカー（#bpo #kpo #reason01-03 #access）は余白を付けない。
   96px空けると「前のセクションの末尾」が画面上部に残り、どこへ飛んだのか分かりにくい。

   セクション自身が上余白を持っており（最初の文字まで 67〜108px）、
   Menu Tab とは左右に分かれているため重ならない。実測:
     デスクトップ1440px  本文 x=240〜322 / Menu Tab x=1174〜1320
     モバイル390px      本文 x= 32〜104 / Menu Tab x= 282〜370 */
section[id] { scroll-margin-top: 0; }

/* セクション（.section は既存）のバリエーション */
.section--gray { background: var(--gray-bg); }
/* 中身がセクションの外へはみ出す配置を許しつつ、横スクロールは出さない。
   overflow:hidden だと縦がスクロールポートになって位置指定に影響するため clip を使う。
   overflow-clip-margin は指定しない。値を持たせるとその分だけ
   scrollWidth が伸びて、結局そのぶん横スクロールが出る。 */
.section--clip { overflow: clip; }
.section--tight { padding: clamp(48px, 8vh, 96px) 0; }
.section__title--sm { font-size: clamp(22px, 3vw, 32px); }
.section__head { margin-bottom: clamp(32px, 5vh, 56px); }
.section__head .section__lead:last-child { margin-bottom: 0; }

/* 本文テキスト */
.text { margin: 0 0 16px; font-size: 16px; line-height: 2; color: #333; }
.text:last-child { margin-bottom: 0; }
.note { margin: 12px 0 0; font-size: 13px; line-height: 1.7; color: #888; }
.catch {
  margin: 0 0 16px;
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 900;
  line-height: 1.5;
}
.emphasis { color: var(--xoo-red); }

/* 見出し（H3〜H4） */
.block { margin-top: clamp(48px, 7vh, 80px); }
.block:first-child { margin-top: 0; }
.block__title {
  margin: 0 0 20px;
  padding-left: 14px;
  border-left: 4px solid var(--xoo-red);
  font-size: clamp(19px, 2.2vw, 24px);
  font-weight: 700;
  line-height: 1.5;
}
.block__subtitle {
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
}

/* ボタン */
.btn-group { display: flex; flex-wrap: wrap; gap: 12px 16px; margin-top: 32px; }
.btn-group--center { justify-content: center; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 12px 36px;
  border-radius: 999px;
  border: 2px solid var(--xoo-red);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease), opacity .2s var(--ease);
}
.btn::after { content: "→"; font-weight: 400; transition: transform .2s var(--ease); }
.btn:hover::after { transform: translateX(4px); }
.btn--primary { background: var(--xoo-red); color: var(--white); }
.btn--primary:hover { background: #a60b1e; border-color: #a60b1e; }
.btn--outline { background: var(--white); color: var(--xoo-red); }
.btn--outline:hover { background: #fff1f3; }
.btn--gray { background: var(--white); color: #333; border-color: #bbb; }
.btn--gray:hover { background: #f3f3f3; }
.btn--gray::after { content: none; }
.btn--back::after { content: none; }
.btn--back::before { content: "←"; font-weight: 400; }
.btn:focus-visible { outline: 3px solid rgba(195, 13, 35, .35); outline-offset: 2px; }

/* グリッド・カード */
.grid { display: grid; gap: clamp(16px, 2.5vw, 32px); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 960px) {
  .grid--3, .grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .grid--2, .grid--3, .grid--5 { grid-template-columns: 1fr; }
}
/* 中に表を持つ2カラムは早めに1カラムへ落とす。
   768pxでは列幅が311pxしかなく、3列の比較表が収まらない（英語版で+113px）。
   収まっても窮屈なので、表には全幅を与える。 */
@media (max-width: 900px) {
  .grid--stack-md { grid-template-columns: 1fr; }
}

.card {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 3vw, 36px);
  background: var(--white);
  border: 1px solid var(--gray-line);
  border-radius: var(--radius);
}
.section--gray .card { border-color: transparent; }
.card__num {
  margin: 0 0 8px;
  font-family: "XOO Sans Latin", "XOO Sans", sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .15em;
  color: var(--xoo-red);
}
.card__title { margin: 0 0 14px; font-size: 20px; font-weight: 700; line-height: 1.5; }
.card__text { margin: 0; font-size: 15px; line-height: 1.9; color: #444; }
.card__text + .card__text { margin-top: 10px; }
.card__link { margin-top: auto; padding-top: 20px; }
.card__link a { font-weight: 700; color: var(--xoo-red); }
.card__link a:hover { text-decoration: underline; }
a.card { transition: box-shadow .2s var(--ease), transform .2s var(--ease); }
a.card:hover { box-shadow: 0 10px 28px rgba(0, 0, 0, .08); transform: translateY(-2px); }

/* 数字パネル */
/* 3枚並べたとき、1枚だけ数字が2行になることがある（英語版の "Approx. 670,000" など）。
   カードの高さはグリッドで揃うので、数字に余った高さを持たせ、その中で上下中央に置く。
   こうすると数字が1行でも2行でも、下の説明文が3枚で同じ位置に並ぶ。 */
.stat {
  display: flex;
  flex-direction: column;
  padding: 28px 20px;
  background: var(--white);
  border-radius: var(--radius);
  text-align: center;
}
.stat__num {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 6px;
  font-weight: 900;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.3;
  color: var(--xoo-red);
}
.stat__label { margin: 0 0 10px; font-size: 15px; font-weight: 700; }
.stat__text { margin: 0; font-size: 13px; line-height: 1.7; color: var(--text-sub); }

/* チェックリスト */
.checklist { display: grid; gap: 12px; margin: 0; }
.checklist li {
  position: relative;
  padding: 18px 20px 18px 56px;
  background: var(--white);
  border-radius: 10px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  border-radius: 50%;
  background: var(--xoo-red);
}
.checklist li::after {
  content: "";
  position: absolute;
  left: 26px;
  top: 50%;
  width: 8px;
  height: 4px;
  margin-top: -4px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}

/* 箇条書き（本文用） */
.list { margin: 0 0 16px; padding-left: 1.4em; list-style: disc; font-size: 15px; line-height: 1.9; color: #333; }
.list li + li { margin-top: 6px; }

/* テーブル（比較表スタイル：罫線は横線のみ・ヘッダーは塗らない） */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.8;
  background: transparent;
}
.table th,
.table td {
  padding: 22px 20px;
  border: 0;
  border-bottom: 1px solid var(--gray-line);
  text-align: left;
  vertical-align: middle;
}
.table thead th {
  padding-top: 8px;
  border-bottom: 1px solid #bbb;
  background: transparent;
  color: var(--text);
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}
.table tbody th {
  width: 22%;
  background: transparent;
  font-weight: 700;
  white-space: nowrap;
}
.table tbody tr:last-child th,
.table tbody tr:last-child td { border-bottom: 1px solid var(--gray-line); }
.table .is-highlight { color: var(--xoo-red); font-weight: 700; }
.table--center td { text-align: center; }
.table--center tbody th { text-align: center; width: auto; }

/* 会社概要スタイル：項目名の下だけアクセント色の線 */
.table--profile th,
.table--profile td { padding: 18px 20px; vertical-align: middle; }
.table--profile tbody th {
  width: 24%;
  border-bottom: 2px solid var(--xoo-red);
  color: var(--text);
  text-align: left;
}
.table--profile tbody td { border-bottom: 1px solid var(--gray-line); }
/* 最終行も項目名の下線は赤のまま（比較表用の指定に上書きされないように） */
.table--profile tbody tr:last-child th { border-bottom: 2px solid var(--xoo-red); }
.table--profile tbody tr:last-child td { border-bottom: 1px solid var(--gray-line); }

/* 値の右に添えるページ内リンク（所在地 → アクセス） */
.table__anchor {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 16px;
  padding: 4px 16px;
  border: 1px solid var(--xoo-red);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
  vertical-align: middle;
  color: var(--xoo-red);
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.table__anchor::after { content: "↓"; font-weight: 400; }
.table__anchor:hover { background: var(--xoo-red); color: var(--white); }

/* 見出しと行見出しの nowrap を解除する。これが無いと列幅の下限が画面幅を超え、
   .table-wrap の中で横スクロールが出る。390pxで最大 +277px はみ出していた。
   tbody th 側も解除しないと1列目だけが不要に広がる（英語版で179px、最長単語は64px）。
   ※ .table thead th / tbody th の nowrap 指定より後ろに置くこと。
      前に置くと同じ詳細度で後勝ちされ、まったく効かない。 */
@media (max-width: 900px) {
  .table thead th,
  .table tbody th { white-space: normal; }
}

@media (max-width: 640px) {
  .table { font-size: 14px; }
  .table th, .table td { padding: 14px 12px; }
  .table--stack tbody th,
  .table--stack tbody td { display: block; width: 100%; }
  .table--stack tbody th { border-bottom: 0; padding-bottom: 0; }
  .table--profile tbody th {
    display: block;
    width: 100%;
    border-bottom: 2px solid var(--xoo-red);
    padding-bottom: 10px;
  }
  .table--profile tbody td { display: block; width: 100%; padding-top: 12px; }
  /* 幅が足りないので、リンクは値の下に落とす */
  .table__anchor { margin-left: 0; margin-top: 10px; }
  .table__value { display: block; }
}

/* ページ内リンク（アンカーナビ） */
.anchor-nav { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.anchor-nav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  border: 1px solid var(--xoo-red);
  border-radius: 999px;
  font-weight: 700;
  color: var(--xoo-red);
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.anchor-nav a::after { content: "↓"; font-weight: 400; }
.anchor-nav a:hover { background: var(--xoo-red); color: var(--white); }

/* ミッション・ステートメント */
.statement {
  margin: 0;
  font-size: clamp(22px, 3.2vw, 36px);
  font-weight: 900;
  line-height: 1.7;
}

/* サービス見出しラベル（BPO ｜ Business Process Outsourcing） */
.service-label {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 12px;
  font-family: "XOO Sans Latin", "XOO Sans", sans-serif;
  font-weight: 700;
  color: var(--xoo-red);
}
.service-label strong { font-size: clamp(32px, 4vw, 48px); line-height: 1; }
.service-label span { font-size: 14px; letter-spacing: .08em; }

/* 図解（横並びフロー） */
.diagram {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.diagram__item {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px 16px;
  background: var(--white);
  border: 2px solid var(--gray-line);
  border-radius: 10px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
}
.diagram__item small { display: block; margin-top: 6px; font-size: 12px; font-weight: 400; color: var(--text-sub); }
.diagram__item + .diagram__item { margin-left: 40px; }
.diagram__item + .diagram__item::before {
  content: "";
  position: absolute;
  left: -30px;
  top: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  background: var(--xoo-red);
  clip-path: polygon(0 15%, 60% 15%, 60% 0, 100% 50%, 60% 100%, 60% 85%, 0 85%);
}
.diagram__item--accent { border-color: var(--xoo-red); color: var(--xoo-red); }
.diagram--both .diagram__item + .diagram__item::before {
  clip-path: polygon(0 50%, 30% 0, 30% 30%, 70% 30%, 70% 0, 100% 50%, 70% 100%, 70% 70%, 30% 70%, 30% 100%);
  width: 28px;
  left: -34px;
}
@media (max-width: 768px) {
  .diagram { flex-direction: column; }
  .diagram__item + .diagram__item { margin-left: 0; margin-top: 36px; }
  .diagram__item + .diagram__item::before {
    left: 50%;
    top: -28px;
    margin-top: 0;
    margin-left: -10px;
    transform: rotate(90deg);
  }
  .diagram--both .diagram__item + .diagram__item::before { margin-left: -14px; left: 50%; }
}

/* 導入イメージ（匿名事例） */
.case {
  padding: clamp(24px, 3.5vw, 40px);
  background: var(--white);
  border-top: 4px solid var(--xoo-red);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .06);
}
.case__label {
  display: inline-block;
  margin: 0 0 10px;
  padding: 4px 12px;
  border-radius: 4px;
  background: #333;
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
}

/* タグ */
.tags { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.tags li {
  padding: 8px 16px;
  border: 1px solid var(--gray-line);
  border-radius: 999px;
  background: var(--white);
  font-size: 14px;
  line-height: 1.4;
}

/* 横棒グラフ */
.bar-chart { display: grid; gap: 12px; margin: 0; }
.bar-chart__row {
  display: grid;
  grid-template-columns: 9em 1fr 3.5em;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}
.bar-chart__label { font-weight: 500; }
.bar-chart__track { height: 22px; background: #eee; border-radius: 4px; overflow: hidden; }
.bar-chart__bar { display: block; height: 100%; width: var(--v, 0%); background: #9a9a9a; border-radius: 4px; }
.bar-chart__row.is-highlight .bar-chart__bar { background: var(--xoo-red); }
.bar-chart__row.is-highlight .bar-chart__label,
.bar-chart__row.is-highlight .bar-chart__value { color: var(--xoo-red); font-weight: 700; }
.bar-chart__value { text-align: right; font-family: "XOO Sans Latin", "XOO Sans", sans-serif; font-weight: 700; }
@media (max-width: 480px) {
  .bar-chart__row { grid-template-columns: 7em 1fr 3em; font-size: 13px; }
}

/* 図版プレースホルダー（素材待ち） */
.figure-placeholder {
  display: grid;
  place-items: center;
  min-height: 220px;
  margin: 0;
  padding: 24px;
  border: 2px dashed #ccc;
  border-radius: var(--radius);
  background: #fafafa;
  color: #999;
  font-size: 14px;
  text-align: center;
  line-height: 1.7;
}

/* ご利用の流れ（タイムライン：ステップ → 見出し → アイコン → 線 → 説明） */
.flow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: auto auto auto auto auto;   /* ステップ／見出し／アイコン／線／説明 */
  --flow-gap: clamp(8px, 1.5vw, 24px);
  --flow-line: #666;
  gap: 0 var(--flow-gap);
  margin: 0;
}
/* 列をまたいで各行の高さをそろえる（線とドットが一直線に並ぶ） */
.flow__item {
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  text-align: center;
}
/* subgrid 非対応ブラウザ向け：見出しの高さを確保して行のずれを抑える */
@supports not (grid-template-rows: subgrid) {
  .flow__item { grid-row: auto; grid-template-rows: auto minmax(3.4em, auto) auto auto auto; }
  .flow__title { min-height: 3.4em; }
}
.flow__step {
  margin: 0 0 10px;
  font-family: "XOO Sans Latin", "XOO Sans", sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .22em;
  color: var(--xoo-red);
}
.flow__title {
  margin: 0 0 20px;
  font-size: clamp(16px, 1.4vw, 19px);
  font-weight: 700;
  line-height: 1.5;
  align-self: start;
}
/* アイコン（グレーの円） */
.flow__icon {
  display: grid;
  place-items: center;
  width: clamp(88px, 8vw, 116px);
  height: clamp(88px, 8vw, 116px);
  margin: 0 auto 22px;
  border-radius: 50%;
  background: #ececec;
}
.flow__icon img { width: 58%; height: auto; }
/* 横線とドット */
.flow__dot {
  position: relative;
  height: 34px;
  margin: 0 0 22px;
}
.flow__dot::before {            /* 項目をつなぐ横線（列の間隔ぶん左右に伸ばして途切れさせない） */
  content: "";
  position: absolute;
  top: 50%;
  left: calc(var(--flow-gap) / -2 - 1px);
  right: calc(var(--flow-gap) / -2 - 1px);
  height: 2px;
  margin-top: -1px;
  background: var(--flow-line);
}
.flow__item:first-child .flow__dot::before { left: 50%; }
.flow__item:last-child  .flow__dot::before { right: 50%; }
.flow__dot span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 50%;
  background: var(--flow-line);
}
.flow__item:last-child .flow__dot span { background: var(--xoo-red); }   /* 最終ステップだけ赤 */
.flow__text {
  margin: 0;
  padding: 0 clamp(4px, 0.8vw, 12px);
  font-size: 15px;
  line-height: 1.9;
  color: var(--text-sub);
  text-align: left;
}

/* タブレット以下：縦のタイムラインに切り替え */
@media (max-width: 900px) {
  .flow { grid-template-columns: 1fr; gap: 0; }
  .flow__item {
    grid-template-columns: clamp(64px, 16vw, 92px) 1fr;
    grid-template-rows: auto auto auto;
    gap: 0 20px;
    text-align: left;
    padding-bottom: 28px;
  }
  .flow__step  { grid-column: 2; margin-bottom: 4px; }
  .flow__title { grid-column: 2; margin-bottom: 8px; }
  .flow__text  { grid-column: 2; padding: 0; }
  .flow__icon {
    grid-column: 1;
    grid-row: 1 / span 3;
    width: clamp(64px, 16vw, 92px);
    height: clamp(64px, 16vw, 92px);
    margin: 0;
    position: relative;
  }
  .flow__icon::after {          /* 縦の線でつなぐ */
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: 2px;
    height: calc(100% + 28px);
    margin-left: -1px;
    background: var(--flow-line);
  }
  .flow__item:last-child .flow__icon::after { display: none; }
  .flow__dot { display: none; }
}

/* CTA帯 */
.cta {
  padding: clamp(64px, 10vh, 120px) 0;
  background: #333;
  color: var(--white);
  text-align: center;
}
.cta .section__label { color: #ff6b7d; }
.cta__title { margin: 0 0 20px; font-size: clamp(24px, 3.4vw, 40px); font-weight: 900; line-height: 1.5; }
.cta__text { margin: 0; font-size: 16px; line-height: 2; color: #ddd; }
.cta .btn--outline { background: transparent; color: var(--white); border-color: var(--white); }
.cta .btn--outline:hover { background: rgba(255, 255, 255, .12); }

/* 会社概要（dl） */
.dl-table { margin: 0; border-top: 1px solid var(--gray-line); }
.dl-table__row { display: grid; grid-template-columns: 220px 1fr; border-bottom: 1px solid var(--gray-line); }
.dl-table dt { padding: 20px 16px; font-weight: 700; background: var(--gray-bg); }
.dl-table dd { margin: 0; padding: 20px 16px; line-height: 1.8; }
@media (max-width: 640px) {
  .dl-table__row { grid-template-columns: 1fr; }
  .dl-table dt { padding: 12px 16px; }
  .dl-table dd { padding: 12px 16px 16px; }
}

/* 地図 */
.map { height: clamp(280px, 40vw, 440px); border-radius: var(--radius); overflow: hidden; background: #eee; }

/* 理由カードの大きな番号 */
.reason-head { display: flex; align-items: baseline; gap: 16px; margin: 0 0 12px; }
.reason-head__num {
  font-family: "XOO Sans Latin", "XOO Sans", sans-serif;
  font-weight: 700;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1;
  color: var(--xoo-red);
}

/* =========================================================
   お問い合わせフォーム
   ========================================================= */
.form-wrap { max-width: 880px; margin-inline: auto; }
.form-lead { margin: 0 0 32px; font-size: 16px; line-height: 2; }
.form-alert {
  margin: 0 0 32px;
  padding: 16px 20px;
  border: 1px solid var(--xoo-red);
  border-radius: 8px;
  background: #fff1f3;
  color: var(--xoo-red);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.7;
}
.form { border-top: 1px solid var(--gray-line); }
.form-row {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 12px 32px;
  padding: 24px 0;
  border-bottom: 1px solid var(--gray-line);
}
.form-row[hidden] { display: none; }
.form-row__label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 12px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
}
.form-row__body { min-width: 0; }
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}
.badge--req { background: var(--xoo-red); color: var(--white); }
.badge--opt { background: #e5e5e5; color: #666; }
.form-inline { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-inline label { display: block; margin-bottom: 6px; font-size: 13px; color: var(--text-sub); }

.input,
.select,
.textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: var(--white);
  font-family: inherit;
  font-size: 16px;   /* iOSでのズーム防止 */
  line-height: 1.6;
  color: var(--text);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, #666 50%), linear-gradient(135deg, #666 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.textarea { min-height: 220px; resize: vertical; }
.input:focus,
.select:focus,
.textarea:focus { outline: none; border-color: var(--xoo-red); box-shadow: 0 0 0 3px rgba(195, 13, 35, .15); }
.is-error .input,
.is-error .select,
.is-error .textarea { border-color: var(--xoo-red); background: #fffafa; }
.form-error { margin: 8px 0 0; font-size: 14px; font-weight: 700; color: var(--xoo-red); line-height: 1.6; }
.form-help { margin: 8px 0 0; font-size: 13px; color: #888; line-height: 1.6; }
.form-count { margin: 6px 0 0; font-size: 13px; color: #888; text-align: right; }
.form-count.is-over { color: var(--xoo-red); font-weight: 700; }

.form-agree { margin: 32px 0 0; text-align: center; }
.form-agree .is-error { display: block; }
.checkbox { display: inline-flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.7; text-align: left; cursor: pointer; }
.checkbox input { flex-shrink: 0; width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--xoo-red); }
.checkbox a { color: var(--xoo-red); text-decoration: underline; }
.form-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 40px; }
.form-actions .btn { min-width: 260px; }

/* ハニーポット（ボット対策：人には見えない入力欄） */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* 確認画面 */
.confirm-table .textarea-value { white-space: pre-wrap; word-break: break-word; }

/* 完了画面 */
.thanks { max-width: 760px; margin-inline: auto; text-align: center; }
.thanks .text { text-align: left; }
.thanks__note { margin-top: 24px; padding: 16px 20px; background: var(--gray-bg); border-radius: 8px; font-size: 14px; line-height: 1.8; text-align: left; }

@media (max-width: 768px) {
  .form-row { grid-template-columns: 1fr; gap: 8px; padding: 20px 0; }
  .form-row__label { padding-top: 0; }
  .form-actions { flex-direction: column-reverse; align-items: stretch; }
  .form-actions .btn { min-width: 0; }
}
@media (max-width: 480px) {
  .form-inline { grid-template-columns: 1fr; }
}

/* パネル・ユーティリティ */
.panel { padding: clamp(20px, 3vw, 32px); background: var(--gray-bg); border-radius: var(--radius); }
.u-center { text-align: center; }
.u-mt-40 { margin-top: 40px; }
.panel--white { background: var(--white); }
.u-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.section__title .section__title--sm { display: inline-block; margin-top: 8px; font-weight: 700; }
.reason-head .section__label { margin: 0; }

/* =========================================================
   言語スイッチャー（地球儀アイコン＋現在の言語）
   ========================================================= */
/* 言語メニューがタブの外へ出るため、はみ出しを隠さない（角丸は各ボタン側で維持） */
.menu-tab { width: auto; overflow: visible; }
.menu-tab__btn:first-child { border-radius: 10px 0 0 10px; }
.menu-tab__btn:last-child  { border-radius: 0 10px 10px 0; }
.lang-switch:first-child .lang-switch__btn { border-radius: 10px 0 0 10px; }
.lang-switch { position: relative; display: flex; }
.lang-switch__btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  white-space: nowrap;
}
.lang-switch__btn img { flex-shrink: 0; }
.lang-switch__current {
  font-family: "XOO Sans Latin", "XOO Sans", sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--white);
  line-height: 1;
}
.lang-switch__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 140px;
  padding: 6px;
  border-radius: 10px;
  background: var(--white);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
  z-index: 10;
}
.lang-switch__menu[hidden] { display: none; }
.lang-switch__menu a {
  display: block;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
}
.lang-switch__menu a:hover { background: #f3f3f3; }
.lang-switch__menu a.is-current { color: var(--xoo-red); font-weight: 700; }
.lang-switch__menu a.is-current::after { content: " ✓"; }

@media (max-width: 600px) {
  .lang-switch__current { display: none; }   /* スマホはアイコンのみ */
  .lang-switch__btn { padding: 10px; }
}

/* 言語表示が入ってメニュータブが広がった分、ナビとの重なりを避ける */
.header-inner { padding-right: calc(190px + clamp(16px, 2vw, 40px)); }
@media (max-width: 1120px) { .header-inner { padding-right: calc(190px + 12px); } }
@media (max-width: 900px)  { .header-inner { padding-right: 0; } }   /* ナビ非表示のため余白不要 */

/* =========================================================
   会社案内：フィロソフィー
   写真を右いっぱいに敷き、その上に見出しと本文を重ねる
   ========================================================= */
.philosophy {
  position: relative;
  overflow: hidden;
  /* 上の余白は他ページの1つ目のセクション（選ばれる理由など）と同じにそろえる */
  padding-block: clamp(48px, 8vh, 96px) clamp(96px, 16vh, 200px);
}
.philosophy__media {
  position: absolute;
  inset: 0 0 0 34%;      /* 右側 66% を写真に */
  margin: 0;
  z-index: 0;
}
.philosophy__media picture { display: block; width: 100%; height: 100%; }
.philosophy__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}
/* 文字が乗る左側を白くぼかし、写真は右へ向かってそのまま見せる */
.philosophy__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    #fff 0%,
    rgba(255, 255, 255, .98) 28%,
    rgba(255, 255, 255, .86) 50%,
    rgba(255, 255, 255, .30) 78%,
    rgba(255, 255, 255, 0) 100%);
}
/* 写真はセクション全体を基準に敷きたいので、コンテナ自体は位置指定しない */
.philosophy__inner { position: static; }
.philosophy__head,
.philosophy__body { position: relative; z-index: 1; }
.philosophy__head { max-width: min(100%, 820px); margin-bottom: clamp(20px, 3vw, 36px); }
.philosophy__head .section__title { margin-bottom: 0; }
/* 見出し左の赤いアクセント */
.philosophy__head .section__label { position: relative; padding-left: 52px; }
.philosophy__head .section__label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 40px;
  height: 3px;
  background: var(--xoo-red);
}
.philosophy__body { max-width: 34em; }
.philosophy__body .text { font-weight: 500; }
.philosophy__body .text:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  .philosophy { padding-block: clamp(64px, 10vh, 120px); }
  .philosophy__media { inset: 0; }
  /* スマホは写真が全面になるため、白を強めて可読性を確保 */
  .philosophy__media::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .90) 60%, rgba(255, 255, 255, .82) 100%);
  }
  .philosophy__head { max-width: none; }
  .philosophy__body { max-width: none; }
}

/* 開発人材コスト比較（金額が入るため値の欄を広めに） */
.note--condition { margin: 0 0 20px; font-size: 14px; font-weight: 700; color: #555; }
.bar-chart--cost .bar-chart__row { grid-template-columns: 12em 1fr 6em; }
@media (max-width: 640px) {
  .bar-chart--cost .bar-chart__row { grid-template-columns: 8.5em 1fr 4.5em; font-size: 12px; }
}

/* 本文中のリンク（赤＋下線。ホバーで下線が消える） */
.link-inline {
  color: var(--xoo-red);
  font-weight: 700;
  border-bottom: 1px solid currentColor;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.link-inline:hover,
.link-inline:focus-visible { border-bottom-color: transparent; color: #a60b1e; }
.link-inline:focus-visible { outline: 2px solid rgba(195, 13, 35, .35); outline-offset: 3px; }

/* =========================================================
   濃いグレー背景の質感（ごく薄いノイズ）
   画像ファイルは使わず、SVGのノイズ生成をCSSに直接埋め込む
   濃さ = --noise-opacity、粒の細かさ = SVG内の baseFrequency
   ========================================================= */
.page-hero,
.cta,
.site-footer {
  position: relative;
  isolation: isolate;          /* ノイズが他の要素に影響しないよう閉じる */
}
.page-hero > .container,
.cta > .container,
.site-footer > .footer-inner {
  position: relative;
  z-index: 1;                  /* 文字はノイズより前面 */
}
.page-hero::after,
.cta::after,
.site-footer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--noise-opacity, .75);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* 問い合わせ動線とフッターコンテンツの境界（1px白＋直下に1px #333 の影） */
.site-footer .footer-inner {
  position: relative;
  padding-top: clamp(40px, 6vh, 64px);
  margin-top: 0;
}
.site-footer .footer-inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: #fff;
  box-shadow: 0 1px 0 #333;   /* 直下の影ライン */
}

/* =========================================================
   サービスページの見出しブロック（背景写真つき）
   画像は左へ白くフェードした状態で書き出してある
   ========================================================= */
.bpo, .kpo { background: var(--white); padding: 0; }   /* 余白は写真ブロックと本文帯が持つ */
/* BPOは写真ブロックも本文帯も薄グレー。画像に焼き込まれたフェードも #f5f5f5 なので下地を合わせる */
.bpo { background: var(--gray-bg); }
.svc-hero {
  position: relative;
  padding-block: clamp(48px, 8vh, 104px);
  background-color: var(--white);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: cover;
}
.svc-hero--bpo {
  background-color: var(--gray-bg);   /* 画像のフェード色・後続の本文帯と同じ */
  min-height: clamp(420px, 44vw, 620px);
  background-image: image-set(
    url("/assets/images/photo/bpo-bg-1920.webp") type("image/webp"),
    url("/assets/images/photo/bpo-bg-1920.jpg") type("image/jpeg"));
}
.svc-hero--kpo {
  min-height: clamp(300px, 30vw, 420px);
  padding-block: clamp(56px, 9vh, 120px);
  background-image: image-set(
    url("/assets/images/photo/kpo-bg-1920.webp") type("image/webp"),
    url("/assets/images/photo/kpo-bg-1920.jpg") type("image/jpeg"));
}
.svc-hero__inner { position: relative; max-width: 1200px; }
.svc-hero__inner > * { max-width: min(100%, 700px); }
.svc-hero--kpo .svc-hero__inner > * { max-width: min(100%, 620px); }
/* KPO の見出しは2行で見せる。上限48pxだと枠620pxを1行目が超えるので少し下げる */
.svc-hero--kpo .section__title { font-size: clamp(28px, 3.5vw, 44px); }
.svc-hero .section__title { margin-bottom: 28px; }
.svc-hero .section__lead { margin-bottom: 0; }
.svc-hero--bpo .section__lead { margin-bottom: clamp(32px, 5vh, 56px); }
.svc-hero__catch {
  margin: 0 0 18px;
  font-size: clamp(26px, 3.4vw, 44px);
  font-weight: 900;
  line-height: 1.4;
}
.svc-hero__highlight { display: inline-block; }
/*
 * 英語だけ小さくする
 *
 * 1行目は日本語「世界最大級のBPO拠点」に対し英語は
 * "One of the world's largest BPO locations" と約2倍の長さがあり、
 * 日本語と同じ clamp(26px, 3.4vw, 44px) では全幅で2行に折り返す。
 *
 * 実測した「1行に収まる上限」:
 *   375px 幅 → 15.3px ／ 768px 幅 → 31.4px ／ 1024px 以上 → 34.6px
 * （1024px 以上は本文カラムが700pxで頭打ちになるため上限も一定）
 *
 * 3.9vw は各幅で必要幅の約95%に収まり、余裕を持って1行になる。
 */
html[lang="en"] .svc-hero__catch {
  font-size: clamp(13px, 3.9vw, 33px);
}
.svc-hero__text {
  margin: 0;
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 2;
  color: #333;
}

@media (max-width: 900px) {
  /* 狭い画面では写真を避けて文字を置く余地がない。
     写真は中身の高さちょうどに敷き、上に色を重ねて薄くしたうえに文字を乗せる。
     - min-height を外す：中身より背景が伸びて下に余白が残るのを防ぐ
     - cover にする：150% auto だと画像の高さが足りず、途中で写真が切れていた
     - padding-top の 18vw をやめる：中身の開始位置が下がりすぎていた */
  .svc-hero--bpo,
  .svc-hero--kpo {
    min-height: 0;
    padding-block: clamp(32px, 7vw, 56px);
    background-position: center top;
    background-size: cover;
  }

  /* スマホは専用の背景画像に差し替える。
     PC用の *-bg-1920 は横位置で、狭い幅だと強く切り取られるうえ、
     文字と重なる分をCSSフィルタで飛ばすと写真がほとんど見えなくなる。
     そこで元画像（10_UI/images_raw/）から、階調を後続セクションの地色へ
     寄せた専用画像を書き出して使う。画像側で調整済みなので
     backdrop-filter は使わない（スマホでの描画も軽い）。 */
  .svc-hero::before {
    content: "";
    position: absolute;
    inset: 0;
  }

  /* 伏せる層の色は、それぞれの後続セクションに合わせる。
     上端は赤ラベル（小さい文字）が載るので強めに伏せてコントラストを確保し、
     そこから下は写真を見せ、下端は後続の地色で閉じて地続きにする。
     停止位置は % なので、ヒーローの高さが変わってもラベルの位置とずれない。 */

  /* BPO：後続は薄グレーの本文帯。元画像は縦位置の夜景 */
  .svc-hero--bpo {
    background-image: image-set(
      url("/assets/images/photo/bpo-bg-mobile-860.webp") type("image/webp"),
      url("/assets/images/photo/bpo-bg-mobile-860.jpg") type("image/jpeg"));
  }
  .svc-hero--bpo::before {
    background: linear-gradient(to bottom,
      rgba(245, 245, 245, .60) 0%,
      rgba(245, 245, 245, .58) 18%,
      rgba(245, 245, 245, .24) 34%,
      rgba(245, 245, 245, .22) 60%,
      var(--gray-bg) 100%);
  }

  /* KPO：後続は白い本文帯。ヒーローがBPOより低いので、ラベルを覆う範囲を下まで取る */
  .svc-hero--kpo {
    background-image: image-set(
      url("/assets/images/photo/kpo-bg-mobile-860.webp") type("image/webp"),
      url("/assets/images/photo/kpo-bg-mobile-860.jpg") type("image/jpeg"));
  }
  .svc-hero--kpo::before {
    background: linear-gradient(to bottom,
      rgba(255, 255, 255, .46) 0%,
      rgba(255, 255, 255, .44) 26%,
      rgba(255, 255, 255, .18) 42%,
      rgba(255, 255, 255, .16) 65%,
      var(--white) 100%);
  }

  .svc-hero__inner > * { max-width: 100%; }
}

/* =========================================================
   トップ 02｜数字で見る、フィリピン
   左：文章＋数字カード（3列）／右：写真2枚＋赤いアクセント
   ========================================================= */
.why {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(300px, 34%, 440px);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}
.why__body .section__head { margin-bottom: clamp(24px, 4vh, 40px); }
.why__body .section__title { font-size: clamp(24px, 3vw, 38px); }
.why__body .section__lead { font-size: clamp(14px, 1.2vw, 16px); line-height: 1.9; }

/* 数字カード */
.stat-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
  margin: 0;
}
.stat-cards .stat-card:nth-child(3) { grid-column: 1; }   /* 3枚目から2段目へ */
/* 見出し・数字・説明文の3行を、同じ段のカード同士で揃える。
   英語版は見出しが1行のカードと2行のカードが混ざる（Population (2023) と
   University graduates a year）。カードごとに上詰めすると数字の開始位置が
   食い違うため、subgrid で行の高さを共有し、見出しはその中で上下中央に置く。
   行数を決め打ちしないので、日本語版のように全部1行なら余白は増えない。 */
.stat-card {
  display: grid;
  grid-template-rows: subgrid;
  grid-template-columns: minmax(0, 1fr);   /* 列が中身の最小幅に押し広げられないように */
  grid-row: span 3;
  row-gap: 0;   /* 段の間隔は親が持つ。カード内の間隔は各要素の margin で取る */
  padding: clamp(16px, 1.8vw, 24px) clamp(12px, 1.4vw, 18px);
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .05);
  text-align: center;
}
.stat-card__label {
  align-self: center;   /* 1行のときは2行ぶんの高さの中で上下中央 */
  margin: 0 0 10px;
  font-size: clamp(12px, 1vw, 14px);
  font-weight: 700;
  line-height: 1.4;
}
.stat-card__num {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0 0 12px;
  color: var(--xoo-red);
  font-weight: 900;
  line-height: 1.1;
}
.stat-card__pre { font-size: clamp(13px, 1.1vw, 15px); line-height: 1.3; }
.stat-card__value { font-size: clamp(30px, 3.4vw, 44px); letter-spacing: -.01em; }
.stat-card__unit { font-size: clamp(13px, 1.2vw, 16px); }
.stat-card__text {
  margin: auto 0 0;
  font-size: clamp(11px, .95vw, 13px);
  line-height: 1.7;
  color: var(--text-sub);
  text-align: left;
}
/* 「世界第」などの前置き語は数字の左に置く */
.stat-card__num { flex-wrap: nowrap; gap: 3px; }
.stat-card__pre { align-self: baseline; white-space: nowrap; }
/* 「in the world」のような語句の単位は、数字の横に並べると折り返して
   数字がカードの中央からずれる。単位だけ次の行へ送り、数字を中央に置く。
   'million' のような一語の単位は従来どおり数字の横に置く。 */
.stat-card__num--stack { display: block; }
.stat-card__num--stack .stat-card__unit { display: block; }

/* 右カラムいっぱいの写真1枚。右は画面の端まで抜く。
   right を -50vw にして大きくはみ出させ、.section--clip で切り取っている。
   画面幅によってパネルの縦横比が 0.7〜1.6 と大きく変わるので、
   画像は object-fit: cover で合わせる。 */
.why { align-items: stretch; }   /* 写真カラムを左カラムと同じ高さまで伸ばす */
.why__photos { position: relative; min-height: 320px; }
.why__photo {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  /* 右端を画面の端にぴったり合わせる。
     コンテナの右パディング ＋ コンテナが中央寄せされて空いた分、だけ外へ出す。
     -50vw のように大きく出すと、画面外を含んだ幅に対して object-fit が効いてしまい、
     見えている範囲には画像の左側しか映らなくなる。 */
  right: calc(-1 * var(--content-x) - max(0px, (100vw - 1200px) / 2));
  margin: 0;
}
.why__photo picture { display: block; width: 100%; height: 100%; }
.why__photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 16px 0 0 16px;   /* 右は画面外なので左側だけ丸める */
}

@media (max-width: 1100px) {
  .why { grid-template-columns: 1fr; }
  /* 1カラムでは左右とも画面端まで抜いた帯にする */
  .why__photos { width: 100%; height: clamp(240px, 46vw, 380px); min-height: 0; }
  /* 1カラムのときは左右とも画面端まで。ここではコンテナは中央寄せされない */
  .why__photo { left: calc(-1 * var(--content-x)); right: calc(-1 * var(--content-x)); }
  .why__photo img { border-radius: 0; }
}
@media (max-width: 720px) {
  .stat-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-cards .stat-card:nth-child(3) { grid-column: auto; }
}
@media (max-width: 420px) {
  .stat-cards { grid-template-columns: 1fr; }
  /* 英語は語の途中で折り返せないため（Approx. 113,200,000 など）、
     640px指定のままでは列幅の下限が画面幅を超える。文字と余白をさらに詰める。 */
  .table { font-size: 13px; }
  .table th, .table td { padding: 10px 6px; }
}

/* iPhone SE 幅。英語版の比較表がこの幅でだけ収まらないため、もう一段詰める */
@media (max-width: 340px) {
  .table { font-size: 12px; }
  .table th, .table td { padding: 8px 4px; }
}


/* 締めのコピー（小さい2行＋大きい結び） */
.why__closing { margin-top: clamp(40px, 6vh, 72px); }
.why__catch {
  margin: 0 0 6px;
  font-size: clamp(16px, 1.7vw, 22px);
  font-weight: 700;
  line-height: 1.7;
}
.why__catch-strong {
  margin: 0;
  font-size: clamp(22px, 3vw, 38px);
  font-weight: 900;
  line-height: 1.5;
}

/* 人口ピラミッド（2カラムの右側に収める） */
.population__chart {
  margin: 0;
  padding: clamp(10px, 1.4vw, 18px);
  background: var(--white);
  border-radius: var(--radius);
  align-self: start;
}
.population__chart img { width: 100%; height: auto; display: block; }
.population__chart figcaption { margin-top: 12px; text-align: center; }

/* 制作サンプル（画像＋キャプション） */
.samples { align-items: start; }
.sample {
  margin: 0;
  padding: clamp(10px, 1.2vw, 16px);
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .06);
}
.sample img {
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: contain;
  border-radius: 6px;
  display: block;
}
.sample__caption {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

/* サービスページ：写真ブロックの下の本文帯（BPOは薄グレー） */
.svc-body {
  background: var(--gray-bg);
  padding-block: clamp(56px, 9vh, 120px);
}
.svc-body--white { background: var(--white); }
.svc-body .card,
.svc-body .case,
.svc-body .panel--white { background: var(--white); }

/* =========================================================
   会社案内 02｜会社概要（左：表／右：写真＋赤いアクセント）
   ========================================================= */
.profile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(240px, 30%, 360px);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.profile__photo {
  position: relative;
  margin: 0;
  align-self: center;
}
.profile__photo img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  border-radius: 14px;
  display: block;
}
.profile__photo::before {          /* 赤い四角：写真の右下からのぞく */
  content: "";
  position: absolute;
  left: 12%;
  top: 6%;
  width: 100%;
  height: 100%;
  background: var(--xoo-red);
  border-radius: 14px;
  z-index: 0;
}

@media (max-width: 900px) {
  .profile { grid-template-columns: 1fr; gap: 32px; }
  .profile__photo { max-width: 360px; margin-inline: auto; }
}

/* =========================================================
   ハンバーガーのドロップダウン（全ページ共通）
   ========================================================= */
.menu-drop { position: relative; display: flex; }
.menu-drop__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  padding: 6px;
  border-radius: 10px;
  background: var(--white);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
  z-index: 10;
}
.menu-drop__menu[hidden] { display: none; }
.menu-drop__menu a {
  display: block;
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.menu-drop__menu a:hover,
.menu-drop__menu a:focus-visible { background: #f3f3f3; }
.menu-drop__menu a[aria-current="page"] { color: var(--xoo-red); font-weight: 700; }