@charset "UTF-8";
/* ============================================================
   ONE SOUL SB LP — page-onesoul.php / onesoul.html 専用 CSS
   命名規約: .l- (Layout) / .m- (Module) / .p- (Page)
   既存テーマ CSS との干渉を避けるため、全規則は .l-onesoul 配下にスコープ
   既存テーマ準拠の SP/PC ブレイクポイント: 941px / 940px
   ============================================================ */

/* ===== Theme Variables ===== */
:root {
  /* Brand Color */
  --os-red: #C02020;
  --os-red-dark: #c1241f;
  --os-red-light: #fdecec;
  --os-gold: #f5b912;

  /* Mono */
  --os-black: #0a0a0a;
  --os-dark: #1a1a1a;
  --os-text: #1e1e1e;
  --os-text-sub: #555555;
  --os-gray-border: #d2d2d2;
  --os-gray-light: #f0f0f0;
  --os-gray-bg: #f7f7f7;
  --os-gray-placeholder: #c8c8c8;
  --os-white: #ffffff;

  /* Gradient (brand) */
  --os-gradient-red: linear-gradient(135deg, var(--os-red), var(--os-gold));

  /* Easing */
  --os-ease-out-sine: cubic-bezier(0.39, 0.575, 0.565, 1);
  --os-ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
  --os-ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --os-ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --os-ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);

  /* SP デザイン基準幅 */
  --os-sp-base: 750;

  /* Fonts */
  --os-font-sans: "Noto Sans JP", sans-serif;
  --os-font-serif: "Noto Serif JP", serif;
  --os-font-en: "Roboto", "Noto Sans JP", sans-serif;
}

/* ============================================================
   Reset / Base (.l-onesoul スコープのみ)
   ============================================================ */
.l-onesoul,
.l-onesoul *,
.l-onesoul *::before,
.l-onesoul *::after {
  box-sizing: border-box;
}
.l-onesoul {
  font-family: var(--os-font-sans);
  color: var(--os-text);
  line-height: 1.7;
  font-weight: 400;
  padding-top: 85px;           /* WP グローバルヘッダ下の余白（PC）。margin だと親 body に伝播してヘッダごと押し下げてしまうので padding を使う */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media only screen and (max-width: 940px) {
  .l-onesoul {
    padding-top: 50px;         /* SP 用に縮小 */
  }
}
/* partial として CTA セクションだけを別ページに埋める場合は、グローバルヘッダ用の
   padding-top を解除する（partner ページ等の埋め込み用 modifier） */
.l-onesoul.-ctaOnly {
  padding-top: 0;
}
.l-onesoul .en {
  font-family: var(--os-font-en);
  letter-spacing: 0.05em;
}
.l-onesoul .-serif {
  font-family: var(--os-font-serif);
}
.l-onesoul img,
.l-onesoul picture {
  display: block;
  max-width: 100%;
  height: auto;
}
/* Gotham Narrow ラベル画像（テキスト→画像差し替え）:
   親の text-align:center を活かし、隣接スパン（例: ティアラベルの JP）と
   縦中央で並ぶようインライン化する */
.l-onesoul .m-section-title__en img,
.l-onesoul .p-os-footerCta__subtitle img,
.l-onesoul .m-partnerGrid__tierLabel img,
.l-onesoul .p-os-experience__cardEn img,
.l-onesoul .m-step__num img,
.l-onesoul .m-accordion__q img,
.l-onesoul .m-accordion__a img {
  display: inline-block;
  vertical-align: middle;
}
.l-onesoul a {
  color: inherit;
  text-decoration: none;
  outline: 0;
  cursor: pointer;
}
.l-onesoul a:not(.-customOnHover),
.l-onesoul button:not(.-customOnHover) {
  transition: opacity 0.2s linear;
}
.l-onesoul a:not(.-customOnHover):hover,
.l-onesoul button:not(.-customOnHover):hover {
  opacity: 0.7;
}
.l-onesoul h1,
.l-onesoul h2,
.l-onesoul h3,
.l-onesoul h4,
.l-onesoul h5,
.l-onesoul h6,
.l-onesoul p {
  margin: 0;
  font-weight: inherit;
}
.l-onesoul ul,
.l-onesoul ol,
.l-onesoul dl {
  margin: 0;
  padding: 0;
  list-style: none;
}
.l-onesoul dd,
.l-onesoul dt {
  margin: 0;
}
.l-onesoul button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* ============================================================
   Utility (.sp / .pc 切替) — 既存テーマと同じ 940/941 境界
   ============================================================ */
.l-onesoul .sp { /* default visible */ }
.l-onesoul .pc { /* default visible */ }
@media only screen and (min-width: 941px) {
  .l-onesoul .sp { display: none !important; }
}
@media only screen and (max-width: 940px) {
  .l-onesoul .pc { display: none !important; }
}

/* ============================================================
   Layout Modules
   ============================================================ */
.l-onesoul .m-outer {
/*  padding-inline: 5vw;  */
}
.l-onesoul .m-inner {
  margin-inline: auto;
  max-width: 1078px;
}
@media only screen and (max-width: 940px) {
  .l-onesoul .m-outer {
/*    padding-inline: calc(40 / 750 * 100vw); */
  }
  .l-onesoul .m-inner {
    max-width: 100%;
  }
}

/* ============================================================
   m-inview (fade-up 既定)
   ============================================================ */
.l-onesoul .m-inview:not(.-vanilla) {
  opacity: 0;
  transform: translateY(24px);
  transition:
    transform 1.2s var(--os-ease-out-expo),
    opacity 0.7s linear;
}
@media only screen and (max-width: 940px) {
  .l-onesoul .m-inview:not(.-vanilla) {
    transform: translateY(calc(36 / 750 * 100vw));
  }
}
.l-onesoul .m-inview:not(.-vanilla).-inview {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   m-placeholder — ダミー画像/ロゴボックス
   ============================================================ */
.l-onesoul .m-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--os-gray-light);
  color: var(--os-gray-placeholder);
  font-family: var(--os-font-en);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-align: center;
  border: 1px dashed var(--os-gray-border);
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
}
.l-onesoul .m-placeholder::before {
  content: attr(data-label);
  padding: 8px 12px;
}
.l-onesoul .m-placeholder.-square { aspect-ratio: 1 / 1; }
.l-onesoul .m-placeholder.-portrait { aspect-ratio: 3 / 4; }
.l-onesoul .m-placeholder.-banner { aspect-ratio: 21 / 9; }

/* ダークセクション内の背景プレースホルダ (KV / footerCta) */
.l-onesoul .m-placeholder.-darkPhoto {
  background-color: var(--os-dark);
  background-image:
    radial-gradient(ellipse at 30% 40%, rgba(232, 49, 42, 0.18), transparent 60%),
    radial-gradient(ellipse at 70% 70%, rgba(245, 185, 18, 0.10), transparent 60%),
    linear-gradient(180deg, #0a0a0a, #1f1f1f 50%, #0a0a0a);
  border: 0;
  color: rgba(255, 255, 255, 0.25);
  aspect-ratio: auto;
}
.l-onesoul .m-placeholder.-darkPhoto::before {
  position: absolute;
  inset: auto 12px 12px auto;
  font-size: 11px;
}

/* ロゴ用プレースホルダ */
.l-onesoul .m-placeholder.-logo {
  aspect-ratio: auto;
  width: 100%;
  min-height: 80px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.55);
  border: 1px dashed rgba(255, 255, 255, 0.25);
  font-family: var(--os-font-en);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.1em;
}
.l-onesoul .m-placeholder.-logo.-light {
  background: var(--os-gray-light);
  color: var(--os-gray-placeholder);
  border-color: var(--os-gray-border);
}

/* ============================================================
   m-button-red — メイン赤 CTA
   ============================================================ */
/* セレクタにタグ名を含めて詳細度を (0,2,1) に上げる
   → ベース `.l-onesoul a:not(.-customOnHover)` の transition: opacity を上書きできるようにする */
.l-onesoul a.m-button-red,
.l-onesoul button.m-button-red {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 400px;
  min-width: 280px;
  width: 75vw;
  max-height: 80px;
  min-height: 80px;
  height: 10vw;
  padding-block: 31px;              /* 上下均等にして中央揃え（旧 27/35 の合計 62 維持）*/
  position: relative;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #fff;
  background-color: var(--os-red);  /* グラデ非対応時のフォールバック */
  background-image: linear-gradient(to bottom, #D33333 0%, #C02020 50%, #AE3535 100%);
  background-origin: border-box;    /* グラデを border 部分まで含めて描画（タイル折返しによる上下の色ズレを防ぐ）*/
  border-radius: 999px;
  border: 2px solid transparent;    /* ホバー時の赤枠用の予約枠（box-sizing: border-box 適用済みなのでサイズは変わらない）*/
  transition: all 0.4s;             /* ホバー時の色反転を 0.5s で滑らかに */
}
.l-onesoul .m-button-red::after {
  content: "";
  position: absolute;
  inset: 0 32px 0 auto;
  margin: auto 0;                   /* 垂直方向 auto で常にボタン中央へ（PC・SP どちらでもサイズ非依存）*/
  width: 12px;
  height: 12px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  transition: all 0.5s;             /* シェブロン色も親と同タイミングで反転 */
}
.l-onesoul .m-button-red:not(.-customOnHover):hover {
  opacity: 1;
  background-color: #fff;
  background-image: none;             /* グラデ消して白背景に */
  color: var(--os-red);
  border-color: var(--os-red);
  box-shadow: none;
}
.l-onesoul .m-button-red:not(.-customOnHover):hover::after {
  border-top-color: var(--os-red);
  border-right-color: var(--os-red);
}
@media only screen and (max-width: 940px) {
  /* PC ルールが a.m-button-red の (0,2,1) で書かれているので、SP もタグ付与で詳細度を合わせる */
  .l-onesoul a.m-button-red,
  .l-onesoul button.m-button-red {
    min-width: calc(560 / 750 * 100vw);
    padding: calc(28 / 750 * 100vw) calc(80 / 750 * 100vw) calc(28 / 750 * 100vw) calc(60 / 750 * 100vw);
    font-size: calc(30 / 750 * 100vw);
    min-height: calc(120 / 750 * 100vw);
  }
  .l-onesoul .m-button-red::after {
    inset: 0 calc(36 / 750 * 100vw) 0 auto;
  }
}

/* セレクタにタグ名を含めて詳細度を (0,2,1) に上げる
   → ベース `.l-onesoul a:not(.-customOnHover)` の transition: opacity を上書きできるようにする */
.l-onesoul a.m-square-button,
.l-onesoul button.m-square-button {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 28px 60px;
  position: relative;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #000;
  background-color: #fff;
  border: 1px solid #AAAAAA;
  transition: all 0.4s;             /* ホバー時の色反転を 0.5s で滑らかに */
}
.l-onesoul .m-square-button::after {
  content: "";
  position: absolute;
  inset: 0 20px 0 auto;
  margin: auto 0;                /* 垂直方向 auto で常にボタン中央へ（PC・SP どちらでもサイズ非依存）*/
  width: 12px;
  height: 12px;
  border-top: 2px solid #000;
  border-right: 2px solid #000;
  transform: rotate(45deg);
  transition: all 0.5s;             /* シェブロン色も親と同タイミングで反転 */
}
.l-onesoul .m-square-button:not(.-customOnHover):hover {
  opacity: 1;
  background-color: #000;
  color: #fff;
  /* border は #AAAAAA を維持、transform / box-shadow は外して飛び出さない */
}
.l-onesoul .m-square-button:not(.-customOnHover):hover::after {
  border-top-color: #fff;
  border-right-color: #fff;
}
@media only screen and (max-width: 940px) {
  /* PC ルールが a.m-square-button の (0,2,1) で書かれているので、SP もタグ付与で詳細度を合わせる */
  .l-onesoul a.m-square-button,
  .l-onesoul button.m-square-button {
    min-width: calc(560 / 750 * 100vw);
    padding: calc(28 / 750 * 100vw) calc(80 / 750 * 100vw) calc(28 / 750 * 100vw) calc(60 / 750 * 100vw);
    font-size: calc(30 / 750 * 100vw);
  }
  .l-onesoul .m-square-button::after {
    inset: 0 calc(36 / 750 * 100vw) 0 auto;
  }
}

/* ============================================================
   m-button-outline — 白枠 (ダーク用)
   ============================================================ */
.l-onesoul .m-button-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 240px;
  padding: 14px 40px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  transition: background-color 0.25s, color 0.25s;
}
.l-onesoul .m-button-outline:not(.-customOnHover):hover {
  opacity: 1;
  background-color: #fff;
  color: var(--os-text);
}

/* ============================================================
   m-normal-link — テキストリンク + 右側 download アイコン
   ::after に SVG を mask として当て background-color: currentColor
   で「アイコン色＝文字色」を保証（ホバー等の色変化にも自動追従）
   ============================================================ */
.l-onesoul .m-normal-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* color は親から継承（currentColor が文字色になる）*/
}
.l-onesoul .m-normal-link::after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: url("../image/onesoul/icon-download.svg") center/contain no-repeat;
          mask: url("../image/onesoul/icon-download.svg") center/contain no-repeat;
}

/* ============================================================
   m-section-title — セクション見出し (EN ラベル + JP タイトル)
   ============================================================ */
.l-onesoul .m-section-title {
  text-align: center;
  margin-bottom: 18px;
}
.l-onesoul .m-section-title__en {
  display: block;
  font-family: var(--os-font-en);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--os-red);
  margin-bottom: 8px;
}
.l-onesoul .m-section-title__jp {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--os-text);
  line-height: 1.4;
}
.l-onesoul .p-os-kv__category {
  display: inline-block;
  font-family: var(--os-font-en);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--os-gold);
}
@media only screen and (max-width: 940px) {
  .l-onesoul .m-section-title {
    margin-bottom: calc(60 / 750 * 100vw);
  }
  .l-onesoul .m-section-title__en {
    font-size: calc(24 / 750 * 100vw);
    margin-bottom: calc(16 / 750 * 100vw);
  }
  .l-onesoul .m-section-title__jp {
    font-size: calc(52 / 750 * 100vw);
  }
}

/* ============================================================
   m-priceTable — 4 ティア料金表
   ============================================================ */
.l-onesoul .m-priceTable {
  display: grid;
  grid-template-columns: 220px repeat(4, 1fr);
  border-top: 1px solid #CCCCCC;
  font-size: 14px;
}
.l-onesoul .m-priceTable__head,
.l-onesoul .m-priceTable__row {
  display: contents;
}
.l-onesoul .m-priceTable__rowLabel,
.l-onesoul .m-priceTable__cell,
.l-onesoul .m-priceTable__planHead {
  padding: 18px 14px;
  border-bottom: 1px solid #CCCCCC;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  line-height: 1.6;
}
.l-onesoul .m-priceTable__rowLabel {
  background-color: #FDF7F6;
  font-weight: 600;
  text-align: left;
  align-items: flex-start;
  height: 80px;
  padding: 0;
  padding-left: 24px;
}
/* ------------------------------------------------------------
   m-footnoteMark — 注釈の参照マーク（*1 *2 ...）と注釈本文プレフィックス
   ・.m-footnoteMark      → 本文中の上付き参照マーク（<sup> に付与）
   ・.m-footnoteMark-text → 注釈本文段落の先頭の対応マーク（<span> に付与）
   色は両者とも本文継承（指定なし）。同じ「*1」の文字列と書式の対で対応が伝わる。
   ------------------------------------------------------------ */
.l-onesoul .m-footnoteMark {
  font-size: 0.7em;
  font-weight: 400;     /* rowLabel の font-weight: 600 を継承させない */
  margin-left: 2px;
  /* vertical-align: super / line-height: 0 は <sup> のブラウザデフォルトに任せる */
}
.l-onesoul .m-footnoteMark-text {
  font-weight: 500;     /* 注釈段落の先頭でマーカーを目立たせ、対応関係を把握しやすく */
  margin-right: 4px;
}
/* 4 ティア列の交互背景: 1st/3rd 列 (ブロンズ/ゴールド) = #FFFFFF、2nd/4th 列 (シルバー/プラチナ) = #F9F9F9 */
.l-onesoul .m-priceTable__row .m-priceTable__cell:nth-child(even) {
  background-color: #FFFFFF;
}
.l-onesoul .m-priceTable__row .m-priceTable__cell:nth-child(odd) {
  background-color: #F9F9F9;
}
.l-onesoul .m-priceTable__planHead {
  position: relative;
  font-family: var(--os-font-en);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.10em;
  line-height: calc(20 / 14);
  background-color: var(--os-black);
  color: #fff;
  padding-block: 10px;
  border-bottom-color: #CCCCCC;
}
/* ティアカラーの下端バー（6px / 幅100%） */
.l-onesoul .m-priceTable__planHead::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 6px;
  background-color: transparent;
}
.l-onesoul .m-priceTable__planHead.-bronze::after   { background-color: #C97A3A; }
.l-onesoul .m-priceTable__planHead.-silver::after   { background-color: #AAAAAA; }
.l-onesoul .m-priceTable__planHead.-gold::after     { background-color: #E6B14A; }
.l-onesoul .m-priceTable__planHead.-platinum::after { background-color: #D8D8D8; }
.l-onesoul .m-priceTable__planHead .-lead {
  font-size: 11px;
  margin-top: 6px;
  letter-spacing: 0.05em;
  color: #fff;
}
.l-onesoul .m-priceTable__planHead .-jp {
  display: block;
  font-family: var(--os-font-sans);
  font-weight: 600;
  font-size: 20px;
  margin-top: 6px;
  letter-spacing: 0;
  line-height: calc(29 / 20);
  color: #fff;
}
/* 年額 / 数字 / 単位 を 1 行に並べる行コンテナ（baseline 揃え） */
.l-onesoul .m-priceTable__planHead .-priceRow {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 2px;
  margin-top: 12px;
}
.l-onesoul .m-priceTable__planHead .-priceLead {
  font-size: 14px;
  color: #AAAAAA;
}
.l-onesoul .m-priceTable__planHead .-price {
  font-family: var(--os-font-en);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 0;
  color: #FFFFFF;
}
.l-onesoul .m-priceTable__planHead .-priceUnit {
  font-size: 14px;
  color: #AAAAAA;
  margin-left: 2px;
}
/* 税別表記。PC では .-priceRow の gap: 2px を相殺して「万円」にぴったり連結 */
.l-onesoul .m-priceTable__planHead .-priceTax {
  font-size: 14px;
  color: #AAAAAA;
  margin-left: -2px;
}
.l-onesoul .m-priceTable__planHead.-bronze   { background-color: #C97A3A; }
.l-onesoul .m-priceTable__planHead.-silver   { background-color: #AAAAAA; }
.l-onesoul .m-priceTable__planHead.-gold     { background-color: #E6B14A; }
.l-onesoul .m-priceTable__planHead.-platinum { background-color: #D8D8D8; }
.l-onesoul .m-priceTable__planHead.-black    { background-color: #000; }

.l-onesoul .m-priceTable__cell {
  font-size: 14px;
  letter-spacing: 0.01em;
  line-height: calc(20 / 14);
}
.l-onesoul .m-priceTable__cell .-check {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--os-red);
  margin-right: 6px;
}
.l-onesoul .m-priceTable__cell .-none {
  color: var(--os-gray-placeholder);
}

@media only screen and (max-width: 940px) {
  /* SP: PC のテーブルレイアウトをそのまま使い、横スクロールのみ + 列幅・フォントを SP 用に縮小 */
  .l-onesoul .p-os-plan__tableWrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* 列幅縮小（合計 580px）— iPhone SE でもタイトル列＋1.5 ティア以上が一望可能 */
  .l-onesoul .m-priceTable {
    grid-template-columns: 104px repeat(4, 120px);
  }
  .l-onesoul .m-priceTable__head,
  .l-onesoul .m-priceTable__row {
    display: contents;
  }
  /* セル共通：パディングとフォントを SP 用に縮小 */
  .l-onesoul .m-priceTable__rowLabel,
  .l-onesoul .m-priceTable__cell,
  .l-onesoul .m-priceTable__planHead {
    padding: 12px 8px;
    font-size: 12px;
  }
  /* タイトル列（行ラベル）：左パディングと高さを SP 用に */
  .l-onesoul .m-priceTable__rowLabel {
    padding: 12px 12px;
    height: auto;
    min-height: 56px;
    font-size: 12px;
  }
  /* ヘッダ：font の SP 値 */
  .l-onesoul .m-priceTable__planHead {
    font-size: 11px;
    padding-block: 8px;
  }
  .l-onesoul .m-priceTable__planHead .-lead {
    font-size: 10px;
    margin-top: 4px;
  }
  .l-onesoul .m-priceTable__planHead .-jp {
    font-size: 15px;
    margin-top: 4px;
  }
  .l-onesoul .m-priceTable__planHead .-priceRow {
    margin-top: 8px;
    flex-wrap: wrap;       /* SP: .-priceTax を独立行に折り返す */
  }
  .l-onesoul .m-priceTable__planHead .-priceLead,
  .l-onesoul .m-priceTable__planHead .-priceUnit {
    font-size: 11px;
  }
  .l-onesoul .m-priceTable__planHead .-price {
    font-size: 22px;
  }
  /* SP: 税別を新しい行で全幅・センター揃え */
  .l-onesoul .m-priceTable__planHead .-priceTax {
    font-size: 11px;
    flex-basis: 100%;      /* 100% 幅を要求 → 確実に次行へ */
    margin-left: 0;        /* PC の -2px を打ち消し */
    margin-top: 2px;
    text-align: center;
  }
}

/* ============================================================
   m-step / m-stepList — 参加までの流れ
   ============================================================ */
.l-onesoul .m-stepList {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 64px;
  position: relative;
  margin-top: 38px;
}
.l-onesoul .m-step {
  position: relative;
  padding: 28px 28px;
  background: var(--os-gray-bg);
  box-shadow: 0 4px 20px #AAAAAA;
  text-align: center;
}
.l-onesoul .m-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  /* right: -(gap/2) で ::after の右端を gap の中心に置き、
     translateX(50%) で自分の幅の半分だけ右にずらして中心を gap 中心に合わせる
     （矢印幅を変えても中心位置は維持される） */
  right: -32px;
  transform: translate(50%, -50%);
  width: 20px;
  height: 28px;
  /* 角を少し丸めた三角（インライン SVG: 同色 stroke + stroke-linejoin: round で頂点丸め）*/
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 28'><polygon points='2,2 18,14 2,26' fill='%23C02020' stroke='%23C02020' stroke-width='4' stroke-linejoin='round'/></svg>") center/contain no-repeat;
}
.l-onesoul .m-step__num {
  display: inline-block;
  font-family: var(--os-font-en);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #fff;
  padding: 4px 16px;
  margin-bottom: 10px;
}
.l-onesoul .m-step__icon {
  max-width: 137px;
  max-height: 120px;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
}
.l-onesoul .m-step__title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
}
.l-onesoul .m-step__desc {
  font-size: 14px;
  font-weight: 400;
  line-height: calc(26 / 14);
  color: var(--os-text-sub);
  margin-top: 28px;
  text-align: left;
}
@media only screen and (max-width: 940px) {
  .l-onesoul .m-stepList {
    grid-template-columns: 1fr;
    gap: calc(80 / 750 * 100vw);
    padding-inline: 5vw;
  }
  .l-onesoul .m-step {
    padding: calc(50 / 750 * 100vw) calc(50 / 750 * 100vw);
  }
  .l-onesoul .m-step:not(:last-child)::after {
    top: auto;
    right: 50%;
    bottom: calc(-58 / 750 * 100vw);
    transform: translateX(50%);
    width: 28px;
    height: 20px;
    /* SP は下向き三角に差し替え（角丸 SVG） */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 20'><polygon points='2,2 26,2 14,18' fill='%23C02020' stroke='%23C02020' stroke-width='4' stroke-linejoin='round'/></svg>");
  }
  .l-onesoul .m-step__num {
    font-size: calc(22 / 750 * 100vw);
    padding: calc(8 / 750 * 100vw) calc(28 / 750 * 100vw);
    margin-bottom: calc(24 / 750 * 100vw);
  }
  .l-onesoul .m-step__icon {
    width: calc(140 / 750 * 100vw);
    height: calc(140 / 750 * 100vw);
    margin-bottom: calc(24 / 750 * 100vw);
  }
  .l-onesoul .m-step__title {
    font-size: calc(32 / 750 * 100vw);
    margin-bottom: calc(16 / 750 * 100vw);
  }
  .l-onesoul .m-step__desc {
    font-size: calc(24 / 750 * 100vw);
  }
}

/* ============================================================
   m-accordion / m-accordionList — FAQ
   ============================================================ */
.l-onesoul .m-accordionList {
  display: flex;
  flex-direction: column;
  max-width: 980px;
  margin-inline: auto;
  margin-top: 40px;
}
.l-onesoul .m-accordion {
  border-top: 1px solid #979797;
  overflow: hidden;
  min-height: 96px;        /* 閉じている時の高さを保証 */
}
.l-onesoul .m-accordion:last-child {
  border-bottom: 1px solid #979797;
}
.l-onesoul .m-accordion__head {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  height: 96px;
  padding: 0 28px;
  text-align: left;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  position: relative;
}
.l-onesoul .m-accordion__head:not(.-customOnHover):hover {
  opacity: 1;
}
.l-onesoul .m-accordion__q,
.l-onesoul .m-accordion__a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #fff;
  font-family: var(--os-font-en);
  font-weight: 400;
  font-size: 16px;
}
.l-onesoul .m-accordion__a {
  position: absolute;
  top: 4px;
  left: 28px;
  color: #AAAAAA;
}
.l-onesoul .m-accordion__title {
  flex: 1;
}
.l-onesoul .m-accordion.-open .m-accordion__title {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.l-onesoul .m-accordion__icon {
  flex: 0 0 auto;
  position: relative;
  width: 18px;
  height: 18px;
}
.l-onesoul .m-accordion__icon::before,
.l-onesoul .m-accordion__icon::after {
  content: "";
  position: absolute;
  background: #AAAAAA;
  transition: transform 0.25s var(--os-ease-out-cubic);
}
.l-onesoul .m-accordion__icon::before {
  inset: calc(50% - 1px) 0 auto 0;
  height: 2px;
}
.l-onesoul .m-accordion__icon::after {
  inset: 0 calc(50% - 1px) auto auto;
  width: 2px;
  height: 100%;
}
.l-onesoul .m-accordion.-open .m-accordion__icon::after {
  transform: scaleY(0);
}
.l-onesoul .m-accordion__body {
  position: relative;       /* head と同じ positioned 層に乗せ、ソース順で body を前面に */
  overflow: hidden;
  max-height: 0;
  margin-top: -26px;        /* 常時。body の top 位置を固定して文字を動かさない（min-height: 96px で閉じ時の高さは保証） */
  transition: max-height 0.35s var(--os-ease-out-cubic);
}
.l-onesoul .m-accordion__bodyInner {
  position: relative;
  padding: 4px 28px 40px 74px;
  font-size: 16px;
  color: #3C3C3C;
  opacity: 0;
  transition: opacity 0.35s var(--os-ease-out-cubic);
}
.l-onesoul .m-accordion.-open .m-accordion__bodyInner {
  opacity: 1;
}
.l-onesoul .m-accordion__bodyInner p + p {
  margin-top: 12px;
}

@media only screen and (max-width: 940px) {
  .l-onesoul .m-accordion__head {
    padding: calc(28 / 750 * 100vw) calc(32 / 750 * 100vw);
    gap: calc(20 / 750 * 100vw);
    font-size: calc(28 / 750 * 100vw);
  }
  .l-onesoul .m-accordion__q,
  .l-onesoul .m-accordion__a {
    width: calc(44 / 750 * 100vw);
    height: calc(44 / 750 * 100vw);
    font-size: calc(24 / 750 * 100vw);
  }
  .l-onesoul .m-accordion__a {
    top: calc(8 / 750 * 100vw);
    left: calc(32 / 750 * 100vw);
  }
  .l-onesoul .m-accordion__icon {
    width: calc(28 / 750 * 100vw);
    height: calc(28 / 750 * 100vw);
  }
  .l-onesoul .m-accordion__bodyInner {
    padding: calc(8 / 750 * 100vw) calc(32 / 750 * 100vw) calc(36 / 750 * 100vw) calc(96 / 750 * 100vw);
    font-size: calc(26 / 750 * 100vw);
  }
}

/* ============================================================
   m-partnerGrid — 参加企業ロゴ ティアグリッド
   ============================================================ */
.l-onesoul .m-partnerGrid__tier {
  margin-bottom: 48px;
}
.l-onesoul .m-partnerGrid__tier:last-child {
  margin-bottom: 0;
}
.l-onesoul .m-partnerGrid__tierLabel {
  text-align: center;
  font-family: var(--os-font-en);
  font-weight: 700;
  line-height: calc(32 / 14);
  font-size: 14px;
  color: var(--os-text-sub);
  margin-bottom: 24px;
  position: relative;
}
/* ラベル下 24px の位置に幅 50px × 高さ 3px のティアカラー下線を引く */
.l-onesoul .m-partnerGrid__tierLabel::after {
  content: "";
  position: absolute;
  top: calc(100% + 24px);
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 3px;
  background: var(--os-text-sub);  /* デフォルト（ティア修飾子なし時のフォールバック）*/
}
.l-onesoul .m-partnerGrid__tier.-bronze   .m-partnerGrid__tierLabel::after { background: #C97A3A; }
.l-onesoul .m-partnerGrid__tier.-silver   .m-partnerGrid__tierLabel::after { background: #AAAAAA; }
.l-onesoul .m-partnerGrid__tier.-gold     .m-partnerGrid__tierLabel::after { background: #E6B14A; }
.l-onesoul .m-partnerGrid__tier.-platinum .m-partnerGrid__tierLabel::after { background: #D8D8D8; }
.l-onesoul .m-partnerGrid__tierLabel .-jp {
  font-family: var(--os-font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--os-text-sub);
  margin-left: 6px;
}
.l-onesoul .m-partnerGrid__logos {
  /* CSS 変数: 各ティア／メディアクエリで値を上書き */
  --cols: 4;                          /* 1行あたりの最大数（各ティアで上書き）*/
  --gap: 16px;

  display: flex;
  flex-wrap: wrap;
  justify-content: center;            /* 満たない行・折り返し行は中央寄せ */
  gap: var(--gap);
  width: 100%;                        /* .m-inner(1078px) いっぱい → 全ティア共通幅で右端が揃う */
  margin-inline: auto;
  padding-top: 20px;
}
.l-onesoul .m-partnerGrid__logos > li {
  flex: 0 0 auto;
  /* アイテム数に依存しない固定幅 → MAX 時は左右端ぴったり、折り返した1個も同じ幅で中央寄せ */
  width: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  aspect-ratio: 2 / 1;               /* 全ティア共通のデザインアスペクト（width / height = 2）*/
  border: 1px solid #AAAAAA;
  background: #fff;                  /* 透明 PNG ロゴ用 */
}
/* 内側要素（リンク時 <a> / 非リンク時 <span>）が li の内側全面を埋める。
   padding と中央寄せをここに持たせることで、border 枠の内側いっぱいがクリック領域になる */
.l-onesoul .m-partnerGrid__logos > li > a,
.l-onesoul .m-partnerGrid__logos > li > span {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  padding: 14px 16px;                /* デザイン仕様（li から移動）*/
}
.l-onesoul .m-partnerGrid__logos > li img {
  width: 100%;                       /* li 内側 (content box) いっぱい */
  height: 100%;
  object-fit: contain;                /* アスペクト維持で枠内フィット */
  display: block;
}
/* 1行あたりの最大数（共通幅 1078px をこの数で均等割り）*/
.l-onesoul .m-partnerGrid__tier.-platinum .m-partnerGrid__logos { --cols: 4; }
.l-onesoul .m-partnerGrid__tier.-gold     .m-partnerGrid__logos { --cols: 5; }
.l-onesoul .m-partnerGrid__tier.-silver   .m-partnerGrid__logos { --cols: 6; }
.l-onesoul .m-partnerGrid__bronzeList {
  font-size: 14px;
  line-height: 2;
  color: var(--os-text-sub);
  text-align: center;
  padding-top: 20px;
  display: flex;              /* HTML 上の span 間空白を無効化し、間隔を CSS で厳密に制御 */
  flex-wrap: wrap;
  justify-content: center;
}
.l-onesoul .m-partnerGrid__bronzeList span {
  white-space: nowrap;        /* 会社名の途中で折り返さない */
}
/* 末尾以外の span に「/」セパレータを自動付与。/ は前の社名の box 内に居るので
   nowrap の効果で「社名 / 」がワンセット扱いとなり、改行は次の社名の手前で起きる */
.l-onesoul .m-partnerGrid__bronzeList span:not(:last-child)::after {
  content: "/";
  margin: 0 4px;
  color: #AAAAAA;
}
@media only screen and (max-width: 940px) {
  .l-onesoul .m-partnerGrid__tier {
    margin-bottom: calc(80 / 750 * 100vw);
  }
  .l-onesoul .m-partnerGrid__tierLabel {
    font-size: calc(24 / 750 * 100vw);
    margin-bottom: calc(40 / 750 * 100vw);
  }
  /* SP: --gap と --cols だけ上書き。li 幅の計算式 / flex 中央寄せは PC base をそのまま使う */
  .l-onesoul .m-partnerGrid__logos {
    --gap: calc(20 / 750 * 100vw);
  }
  .l-onesoul .m-partnerGrid__tier.-platinum .m-partnerGrid__logos { --cols: 1; }
  .l-onesoul .m-partnerGrid__tier.-gold     .m-partnerGrid__logos { --cols: 2; }
  .l-onesoul .m-partnerGrid__tier.-silver   .m-partnerGrid__logos { --cols: 3; }
  /* SP: 内側要素の padding を小さく（PC 14×16 → SP 7×8）。小さな cell で
     ロゴ表示エリアが圧迫されないように、PC のアスペクト比 7:8 ≈ 14:16 を維持 */
  .l-onesoul .m-partnerGrid__logos > li > a,
  .l-onesoul .m-partnerGrid__logos > li > span {
    padding: 7px 8px;
  }
  .l-onesoul .m-partnerGrid__bronzeList {
    font-size: 14px;
  }
}

/* ============================================================
   Page Sections
   ============================================================ */

/* ===== 1. KV / Hero ===== */
.l-onesoul .p-os-kv {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 100vh;                /* ファーストビュー全体を KV で埋める */
  min-height: 100svh;               /* モバイル Safari の URL バー表示時にも収める */
  background: var(--os-black);
  display: flex;
  align-items: center;
  text-align: center;
  color: #fff;
  padding: 0 0 80px;
}
.l-onesoul .p-os-kv__bg {
  position: absolute !important;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.l-onesoul .p-os-kv::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0,0,0,0.5), rgba(0,0,0,0.7));
}
.l-onesoul .p-os-kv__inner {
  width: 100%;
}
.l-onesoul .p-os-kv__category {
  margin-top: 60px;                 /* キャプション画像拡大に伴うファーストビュー収納のため -34px */
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s linear 0.1s, transform 0.6s var(--os-ease-out-cubic) 0.1s;
}
.l-onesoul .p-os-sb__logo {
  margin: 0 auto 16px;
  max-width: 248.6px;
  min-height: 21.12px;
}
.l-onesoul .p-os-kv__logo {
  margin: 0 auto 16px;
  max-width: 567px;
  min-height: 120px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s linear 0.25s, transform 0.7s var(--os-ease-out-cubic) 0.25s;
}
.l-onesoul .p-os-kv__copy {
  font-size: 34px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.05em;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s linear 0.55s, transform 0.7s var(--os-ease-out-cubic) 0.55s;
  margin-top: 24px;                 /* キャプション画像拡大に伴い -16px（ロゴ-画像間を詰める） */
}
/* キャプション画像（kv-cap.svg）はアスペクト比 2.65:1 なので
   max-width だけ与えて height は auto に任せる */
.l-onesoul .p-os-kv__caption {
  /* 縦長 viewport では 900px / 92vw、中間幅 viewport (940x959 等) では 84.8vh (= 32vh * 2.65) で抑える
     → 画像高さが常に 32vh 以内に収まり KV 縦溢れを防ぐ */
  max-width: min(900px, 92vw, calc(32vh * 2.65));
  width: 100%;
  height: auto;
  margin: 0 auto;
}
.l-onesoul .p-os-kv__copy .-accent {
  font-size: 36px;
  color: var(--os-red);
  margin-left: 6px;
}
.l-onesoul .p-os-kv__note {
  margin-top: -24px;        /* キャプション画像下部の余白に少し重ねて高さを節約 */
  font-size: 14px;
  line-height: calc(26 / 14);
  color: #fff;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s linear 0.7s, transform 0.7s var(--os-ease-out-cubic) 0.7s;
}
.l-onesoul .p-os-kv__copy2 {
  margin-top: 18px;                 /* キャプション画像拡大に伴い -13px */
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.06em;
  opacity: 0;
  color: #fff;
  transform: translateY(20px);
  transition: opacity 0.7s linear 0.85s, transform 0.7s var(--os-ease-out-cubic) 0.85s;
}
.l-onesoul .p-os-kv__cta {
  margin-top: 22px;                 /* キャプション画像拡大に伴い -8px */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s linear 1.0s, transform 0.7s var(--os-ease-out-cubic) 1.0s;
}
.l-onesoul .p-os-kv.-inview .p-os-kv__category,
.l-onesoul .p-os-kv.-inview .p-os-kv__logo,
.l-onesoul .p-os-kv.-inview .p-os-kv__subtitle,
.l-onesoul .p-os-kv.-inview .p-os-kv__copy,
.l-onesoul .p-os-kv.-inview .p-os-kv__note,
.l-onesoul .p-os-kv.-inview .p-os-kv__copy2,
.l-onesoul .p-os-kv.-inview .p-os-kv__cta {
  opacity: 1;
  transform: translateY(0);
}
@media only screen and (max-width: 940px) {
  /* SP の vw スケーリングは 750-base なので 940vw では 1.25 倍に膨らむ。
     各値を `min(calc(...), Npx)` で 750 設計値に上限ロックし、中間幅で KV が
     viewport 高さを突破しないようにする。〜750px 端末では従来通り vw が効く。 */
  .l-onesoul .p-os-kv {
    min-height: 100vh;                              /* 旧ブラウザ用フォールバック */
    min-height: 100svh;                             /* モバイルブラウザのバー表示時にも収める */
    padding: min(calc(60 / 750 * 100vw), 60px) 0;
  }
.l-onesoul .p-os-kv__inner {
  padding-inline: 5vw;
}
  .l-onesoul .p-os-kv__category {
    margin-top: 0;             /* PC の 94px を SP 用に縮小 */
    font-size: calc(22 / 750 * 100vw);
    margin-bottom: min(calc(28 / 750 * 100vw), 28px);
  }
  .l-onesoul .p-os-kv__logo {
    max-width: min(calc(560 / 750 * 100vw), 560px);
    min-height: min(calc(180 / 750 * 100vw), 180px);
    margin-bottom: min(calc(28 / 750 * 100vw), 28px);
  }
  .l-onesoul .p-os-kv__subtitle {
    font-size: calc(24 / 750 * 100vw);
    margin-bottom: calc(64 / 750 * 100vw);
  }
  .l-onesoul .p-os-kv__copy {
    font-size: calc(34 / 750 * 100vw);
    line-height: 2;
    margin-top: min(calc(60 / 750 * 100vw), 60px);
    /* inner の padding-inline 5vw を打ち消して、内側の caption 画像を 100vw 幅にする */
    margin-left: -5vw;
    margin-right: -5vw;
  }
  /* SP では caption を 100vw 幅で表示（高さは 32vh の vh-cap がそのまま生きる） */
  .l-onesoul .p-os-kv__caption {
    max-width: min(100vw, calc(32vh * 2.65));
    transform: scale(1.35);
  }
  .l-onesoul .p-os-kv__note {
    margin-top: min(calc(36 / 750 * 100vw), 36px);
    font-size: calc(22 / 750 * 100vw);
  }
  .l-onesoul .p-os-kv__copy2 {
    font-size: calc(30 / 750 * 100vw);
    margin-top: min(calc(28 / 750 * 100vw), 28px);
  }
  .l-onesoul .p-os-kv__cta {
    margin-top: min(calc(56 / 750 * 100vw), 56px);
  }
  /* KV 内の CTA ボタン高さも 940 で膨らみすぎないようにキャップ（他箇所には影響しない） */
  .l-onesoul .p-os-kv .m-button-red {
    min-height: min(calc(120 / 750 * 100vw), 120px);
  }
}

/* ===== 2. About (ダーク) ===== */
.l-onesoul .p-os-about {
  background: var(--os-white);
  color: #000;
  padding-block-start: 94px;
  padding-block-end: 120px;
}
.l-onesoul .p-os-about__inner {
  display: flex;
  gap: 64px;
  align-items: start;
  justify-content: space-between;
}
.l-onesoul .p-os-about__title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 28px;
  line-height: 1.5;
  margin-top: 20px;
}
.l-onesoul .p-os-about__titlelogo {
  height: 40px;
  width: auto;
  flex: 0 0 auto;
}
.l-onesoul .p-os-about__title .-en {
  font-family: var(--os-font-en);
  color: var(--os-red);
  margin-right: 8px;
}
.l-onesoul .p-os-about__lead {
  font-size: 34px;
  font-weight: 700;
  margin-bottom: 24px;
  line-height: 1.75;
  letter-spacing: -0.00166em;
}
.l-onesoul .p-os-about__lead .-accent {
  font-size: 34px;
  color: var(--os-red);
  margin-left: 6px;
}
.l-onesoul .p-os-about__text p + p {
  margin-top: 10px;
  line-height: 2;
  font-size: 14px;
  max-width: 479px;
}
.l-onesoul .p-os-about__photo {
  width: 500px;
  height: 580px;
  flex: 0 0 auto;        /* flex 親（p-os-about__inner）で縮まないように固定 */
  object-fit: cover;
}
.l-onesoul .p-os-about__caption {
  margin-top: 24px;
  font-size: 14px;
  line-height: 2;
  letter-spacing: 0;
}
.l-onesoul .p-os-about__captionMark {
  background-color: var(--os-red-dark);
  color: #fff;
  padding: 2px 6px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* KV note 用の黒帯マーカー（captionMark と同パターン・色だけ黒）*/
.l-onesoul .p-os-kv__noteMark {
  background-color: #010000;
  color: #fff;
  padding: 2px 6px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
@media only screen and (max-width: 940px) {
  .l-onesoul .p-os-about {
    padding-top: calc(120 / 750 * 100vw);
    padding-bottom: 0;
  }
  .l-onesoul .p-os-about__inner {
    flex-direction: column;
    align-items: stretch;   /* PC の `align-items: start` をデフォルトに戻し、子を container 幅まで伸ばす */
  }
  .l-onesoul .p-os-about__title {
    font-size: calc(48 / 750 * 100vw);
    margin-bottom: calc(40 / 750 * 100vw);
  }
  .l-onesoul .p-os-about__lead {
    font-size: calc(34 / 750 * 100vw);
    margin-bottom: calc(32 / 750 * 100vw);
  }
  .l-onesoul .p-os-about__text {
    padding-inline: 5vw;
  }
  /* lead / caption はそれぞれ専用ルールで font-size を指定するので、本文段落ルールから除外 */
  .l-onesoul .p-os-about__text p:not(.p-os-about__lead):not(.p-os-about__caption) {
    font-size: calc(26 / 750 * 100vw);
  }
  /* SP: PC の `p + p { max-width: 479px }` を解除して本文をコンテナ幅まで使う */
  .l-onesoul .p-os-about__text p + p {
    max-width: none;
  }
  .l-onesoul .p-os-about__photo {
    width: 100%;
    height: 100%;
  }
  .l-onesoul .p-os-about__caption {
    font-size: calc(20 / 750 * 100vw);
  }
}

/* ===== 3. Concept (ダーク) ===== */
.l-onesoul .p-os-concept {
  background: var(--os-black);
  color: #fff;
  padding-block-start: 60px;
  padding-block-end: 76px;
  overflow-x: hidden;   /* gridBg の transform: scale(1.1) や gridItem の margin-left % で viewport を越えた分をクリップ */
}
.l-onesoul .p-os-concept__inner {
  display: grid;
  grid-template-columns: 0.9fr 1.3fr;
  gap: 64px;
  align-items: center;
}
.l-onesoul .p-os-concept__title {
  font-size: 34px;
  font-weight: 700;
  line-height: calc(60 / 34);
  letter-spacing: 0.05em;
  margin-bottom: 24px;
  color: #fff;
}
.l-onesoul .p-os-concept__text p {
  font-size: 14px;
  line-height: 2;
  color: rgba(255, 255, 255, 0.78);
}
.l-onesoul .p-os-concept__text p + p {
  margin-top: 12px;
}
.l-onesoul .p-os-concept__caption {
  margin-top: 24px;
  font-size: 14px;
  line-height: 2;
  letter-spacing: 0;
}
.l-onesoul .p-os-concept__captionMark {
  background-color: var(--os-red-dark);
  color: #fff;
  padding: 2px 6px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.l-onesoul .p-os-concept__cta {
  margin-top: 34px;
}
.l-onesoul .p-os-concept__ctabutton {
  position: relative;
  display: inline-block;
  border: 1px solid var(--os-red-dark);
  padding: 16px 70px 16px 44px;
  color: #fff;
}
.l-onesoul .p-os-concept__ctabutton::after {
  content: "";
  position: absolute;
  inset: 0 42px 0 auto;
  margin: auto 0;
  width: 12px;
  height: 16px;
  background-image: url("../image/onesoul/icon-download.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.l-onesoul .p-os-concept__grid {
  position: relative;
  isolation: isolate;          /* z-index をこのブロック内でスコープ */
  display: flex;
  align-items: flex-start;
  gap: 0;
}
.l-onesoul .p-os-concept__gridBg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: -1;                 /* 全画像の背後 */
  transform: scale(1.1);
}
.l-onesoul .p-os-concept__gridCol {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;                     /* 3 カラム等分 */
}
.l-onesoul .p-os-concept__gridCol.left {
  margin-left: 10%;
}
.l-onesoul .p-os-concept__gridItem {
  position: relative;          /* z-index を効かせるため必須 */
  width: 100%;
}
/* z-index = 画像番号（小 = 後ろ、大 = 前）*/
.l-onesoul .p-os-concept__gridItem.-n0 { z-index: 0; }
.l-onesoul .p-os-concept__gridItem.-n1 { z-index: 1; }
.l-onesoul .p-os-concept__gridItem.-n2 { z-index: 2; }
.l-onesoul .p-os-concept__gridItem.-n3 { z-index: 3; }
.l-onesoul .p-os-concept__gridItem.-n4 { z-index: 4; }
.l-onesoul .p-os-concept__gridItem.-n5 { z-index: 5; }
.l-onesoul .p-os-concept__gridItem.-n6 { z-index: 6; }

/* ----- サイズ調整（transform: scale でレイアウトは崩さず視覚的にだけ大きく）----- */
.l-onesoul .p-os-concept__gridItem.-n0 {
  transform: scale(1.10);
  margin-left: 11%;
  margin-top: -2%;
}
.l-onesoul .p-os-concept__gridItem.-n1 {
  transform: scale(1.35);
  /* margin-top: 11%; */
  margin-left: 20%;
}
.l-onesoul .p-os-concept__gridItem.-n2 {
  transform: scale(1.1);
  margin-top: -7%;
}
.l-onesoul .p-os-concept__gridItem.-n3 { }
.l-onesoul .p-os-concept__gridItem.-n4 {
  transform: scale(0.95);
  margin-left: 16%;
}
.l-onesoul .p-os-concept__gridItem.-n5 {
  transform: scale(1.17);
  margin-left: -3%;
  margin-top: -2%;
}
.l-onesoul .p-os-concept__gridItem.-n6 { 
  transform: scale(1.3);
  margin-top: 7%;
  margin-left: 18%;
}

/* ============================================================
   Concept リビールアニメーション
   p-os-concept__grid が -inview を取得したら、n0 から n6 まで
   順次フェードイン。下記 3 変数で速度・イージング・間隔を制御。
   ============================================================ */
.l-onesoul .p-os-concept__grid {
  --concept-reveal-duration: 1.2s;
  --concept-reveal-easing: cubic-bezier(0.215, 0.61, 0.355, 1);
  --concept-reveal-step: 400ms;
}
/* 初期状態：各画像は不可視（opacity のみアニメ。scale 等の transform と衝突しない）*/
.l-onesoul .p-os-concept__grid .p-os-concept__gridItem {
  opacity: 0;
  transition: opacity var(--concept-reveal-duration) var(--concept-reveal-easing);
}
/* -inview 状態で表示 ON */
.l-onesoul .p-os-concept__grid.-inview .p-os-concept__gridItem {
  opacity: 1;
}
/* 順次ディレイ：n0 → n6 の番号順 */
.l-onesoul .p-os-concept__grid.-inview .p-os-concept__gridItem.-n0 { transition-delay: calc(var(--concept-reveal-step) * 0); }
.l-onesoul .p-os-concept__grid.-inview .p-os-concept__gridItem.-n1 { transition-delay: calc(var(--concept-reveal-step) * 1); }
.l-onesoul .p-os-concept__grid.-inview .p-os-concept__gridItem.-n2 { transition-delay: calc(var(--concept-reveal-step) * 2); }
.l-onesoul .p-os-concept__grid.-inview .p-os-concept__gridItem.-n3 { transition-delay: calc(var(--concept-reveal-step) * 3); }
.l-onesoul .p-os-concept__grid.-inview .p-os-concept__gridItem.-n4 { transition-delay: calc(var(--concept-reveal-step) * 4); }
.l-onesoul .p-os-concept__grid.-inview .p-os-concept__gridItem.-n5 { transition-delay: calc(var(--concept-reveal-step) * 5); }
.l-onesoul .p-os-concept__grid.-inview .p-os-concept__gridItem.-n6 { transition-delay: calc(var(--concept-reveal-step) * 6); }
@media only screen and (max-width: 940px) {
  .l-onesoul .p-os-concept {
    padding-block: calc(120 / 750 * 100vw);
  }
  .l-onesoul .p-os-concept__inner {
    grid-template-columns: 1fr;
    gap: calc(60 / 750 * 100vw);
  }
  .l-onesoul .p-os-concept__title {
    font-size: calc(44 / 750 * 100vw);
    margin-bottom: calc(32 / 750 * 100vw);
  }
  .l-onesoul .p-os-concept__text {
    padding-inline: 5vw;
  }
  .l-onesoul .p-os-concept__text p {
    font-size: calc(26 / 750 * 100vw);
  }
  .l-onesoul .p-os-concept__cta {
    display: flex;
    justify-content: center;
  }
  .l-onesoul .p-os-concept__ctabutton {
    padding: 16px 70px 16px 40px;
  }
  .l-onesoul .p-os-concept__grid {
    transform: scale(0.85);
  }
}

/* ===== 4. Plan (白) ===== */
.l-onesoul .p-os-plan {
  background: #fff;
  padding-top: 120px;
}
.l-onesoul .p-os-plan__lead {
  text-align: center;
  font-size: 15px;
  line-height: 2;
  color: var(--os-text-sub);
}
.l-onesoul .p-os-plan__tableWrap {
  margin-top: 28px;
}
/* ------------------------------------------------------------
   Scroll Hint オーバーライド — m-priceTable 用
   ・bubble を日本語 8 文字 + padding 余裕で 1 行表示できるサイズに拡張
   ・指アニメを継続再生（scroll-hint.css のデフォルト 2 回 → infinite）
   スコープを .p-os-plan__tableWrap 配下に限定。
   ------------------------------------------------------------ */
.l-onesoul .p-os-plan__tableWrap .scroll-hint-icon {
  width: 180px;
  height: 96px;
  left: calc(50% - 90px);   /* 元の calc(50% - 60px) を新幅 180px の中心に再センター */
  top: calc(50% - 48px);    /* 元の calc(50% - 25px) を新高 96px の中心に再センター */
}
.l-onesoul .p-os-plan__tableWrap .scroll-hint-text {
  white-space: nowrap;      /* 日本語 8 文字を 1 行で保証 */
}
.l-onesoul .p-os-plan__tableWrap .scroll-hint-icon::before {
  animation-iteration-count: infinite;  /* 指の左右スワイプを継続 */
}
.l-onesoul .p-os-plan__closing {
  text-align: center;
  margin-top: 22px;
  font-size: 14px;
  line-height: 2;
  color: var(--os-text-sub);
  margin-bottom: 28px;
  display: flex;  
  align-items: center;
  gap: 40px;
}
.l-onesoul .p-os-plan__closingGrid {
  display: flex;
  box-shadow: 0 4px 20px #AAAAAA;
}
.l-onesoul .p-os-plan__closingPhoto {
  width: 100%;
  height: 180px;
  object-fit: contain;
}
.l-onesoul .p-os-plan__closingNote {
  padding-top: 23px;
  padding-left: 44px;
  padding-right: 52px;
  font-size: 13px;
  text-align: left;
  line-height: calc(24 / 13);
}
.l-onesoul .p-os-plan__closingNote p.-strong {
  font-weight: 600;
  font-size: 18px;
  margin-top: 5px;
}
.l-onesoul .p-os-plan__closingNote p.-text {
  margin-top: 12px;
  font-size: 13px;
}
.l-onesoul .p-os-plan__closingNote p.-little {
  margin-top: 0;
  font-size: 11px;
  color: var(--os-text-sub);
}
.l-onesoul .p-os-plan__closingClosing {
  text-align: center;
  margin-top: 44px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: calc(32 / 18);
}
.l-onesoul .p-os-plan__cta {
  text-align: center;
  margin-top: 90px;
}
.l-onesoul .p-os-plan__note {
  margin-top: 20px;
  font-size: 12px;
}
/* ※ 始まりの注記をぶら下げインデント化（折り返し時に 2 行目以降が※の右に揃う）*/
.l-onesoul .p-os-plan__note p.-asterisk {
  padding-left: 1em;
  text-indent: -1em;
}
@media only screen and (max-width: 940px) {
  .l-onesoul .p-os-plan {
    padding-block: calc(120 / 750 * 100vw);
    padding-inline: 5vw;
  }
  .l-onesoul .p-os-plan__lead {
    font-size: calc(26 / 750 * 100vw);
    margin-bottom: calc(60 / 750 * 100vw);
  }
  .l-onesoul .p-os-plan__tableWrap {
    margin-bottom: calc(60 / 750 * 100vw);
  }
  .l-onesoul .p-os-plan__closing {
    font-size: calc(26 / 750 * 100vw);
    margin-bottom: calc(40 / 750 * 100vw);
    flex-direction: column;
    align-items: stretch;        /* PC の align-items: center を解除し 2 つの closingGrid を同幅に */
  }
  .l-onesoul .p-os-plan__closingGrid {
    flex-direction: column;
    padding-block: 5vw;
  }
  .l-onesoul .p-os-plan__closingNote {
    padding: 20px 5vw;
  }
}

/* ===== 5. Flow (白) ===== */
.l-onesoul .p-os-flow {
  background: var(--os-white);
  padding-top: 120px;
}
.l-onesoul .p-os-flow__closing {
  text-align: center;
  font-size: 13px;
  color: var(--os-text-sub);
  line-height: 2;
  margin-top: 56px;
}
@media only screen and (max-width: 940px) {
  .l-onesoul .p-os-flow {
    padding-block: calc(120 / 750 * 100vw);
  }
  .l-onesoul .p-os-flow__closing {
    margin-top: calc(80 / 750 * 100vw);
    font-size: calc(24 / 750 * 100vw);
  }
}

/* ===== 6. FAQ (白) ===== */
.l-onesoul .p-os-faq {
  background: var(--os-white);
  padding-top: 120px;
}
.l-onesoul .p-os-faq__closing {
  text-align: center;
  font-size: 13px;
  color: var(--os-text-sub);
  margin: 56px auto 28px;
}
.l-onesoul .p-os-faq__cta {
  text-align: center;
  margin-top: 27px;
}
@media only screen and (max-width: 940px) {
  .l-onesoul .p-os-faq {
    padding-block: calc(120 / 750 * 100vw);
  }
  .l-onesoul .p-os-faq__closing {
    font-size: calc(24 / 750 * 100vw);
    margin: calc(80 / 750 * 100vw) auto calc(40 / 750 * 100vw);
  }
}

/* ===== 7. Experience (白) ===== */
.l-onesoul .p-os-experience {
  background: var(--os-white);
  padding-top: 120px;
}
.l-onesoul .p-os-experience__lead {
  text-align: center;
  font-size: 15px;
  color: var(--os-text-sub);
  line-height: 2;
  margin-bottom: 56px;
}
.l-onesoul .p-os-experience__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.l-onesoul .p-os-experience__card {
  box-shadow: 0 4px 20px #AAAAAA;
  overflow: hidden;
  padding: 28px 28px;
}
.l-onesoul .p-os-experience__card .m-placeholder {
  aspect-ratio: 4 / 3;
  border: 0;
  border-bottom: 1px solid var(--os-gray-border);
}
.l-onesoul .p-os-experience__cardPhoto {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 157px;
}
.l-onesoul .p-os-experience__cardPhoto img {
  max-width: 220px;
  max-height: 157px;
  object-fit: cover;
}
.l-onesoul .p-os-experience__cardBody {
  text-align: center;
  margin-top: 40px;
}
.l-onesoul .p-os-experience__cardEn {
}
.l-onesoul .p-os-experience__cardEn img {
  height: 8px;
  width: auto;
}
.l-onesoul .p-os-experience__cardTitle {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 12px;
}
.l-onesoul .p-os-experience__cardDesc {
  font-size: 13px;
  line-height: 1.9;
  color: var(--os-text-sub);
  text-align: left;
}
@media only screen and (max-width: 940px) {
  .l-onesoul .p-os-experience {
    padding-block: calc(120 / 750 * 100vw);
    padding-inline: 5vw;
  }
  .l-onesoul .p-os-experience__lead {
    font-size: calc(26 / 750 * 100vw);
    margin-bottom: calc(60 / 750 * 100vw);
  }
  .l-onesoul .p-os-experience__grid {
    grid-template-columns: 1fr;
    gap: calc(40 / 750 * 100vw);
  }
  .l-onesoul .p-os-experience__card {
    padding: calc(50 / 750 * 100vw) calc(50 / 750 * 100vw);
  }
  .l-onesoul .p-os-experience__cardBody {
    margin-top: calc(50 / 750 * 100vw) 
  }
  .l-onesoul .p-os-experience__cardEn {
    font-size: calc(22 / 750 * 100vw);
  }
  .l-onesoul .p-os-experience__cardTitle {
    font-size: calc(36 / 750 * 100vw);
    margin-bottom: calc(20 / 750 * 100vw);
  }
  .l-onesoul .p-os-experience__cardDesc {
    font-size: calc(26 / 750 * 100vw);
  }
  .l-onesoul .p-os-experience__cardPhoto {
    min-height: auto;
  }
  .l-onesoul .p-os-experience__cardPhoto img {
    height: calc(140 / 750 * 100vw);
    margin-bottom: calc(24 / 750 * 100vw);
  }
}

/* ===== 8. Partners (白) ===== */
.l-onesoul .p-os-partners {
  background: var(--os-white);
  padding-block: 120px;
}
.l-onesoul .p-os-partners__lead {
  text-align: center;
  font-size: 14px;
  color: var(--os-text-sub);
  line-height: 2;
  margin-bottom: 56px;
}
.l-onesoul .p-os-partners__closing {
  text-align: center;
  font-size: 13px;
  color: var(--os-text-sub);
  margin: 56px auto 28px;
}
.l-onesoul .p-os-partners__cta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 35px;
  font-size: 14px;
}
@media only screen and (max-width: 940px) {
  .l-onesoul .p-os-partners {
    padding-block: calc(120 / 750 * 100vw);
    padding-inline: 5vw;
  }
  .l-onesoul .p-os-partners__lead {
    font-size: calc(26 / 750 * 100vw);
    margin-bottom: calc(60 / 750 * 100vw);
  }
  .l-onesoul .p-os-partners__closing {
    font-size: calc(24 / 750 * 100vw);
    margin: calc(80 / 750 * 100vw) auto calc(40 / 750 * 100vw);
  }
}

/* ===== 9. Footer CTA (ダーク) ===== */
.l-onesoul .p-os-footerCta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 540px;
  background: var(--os-black);
  color: var(--os-black);
  text-align: center;
  padding: 100px 0;
  display: flex;
  align-items: center;
}
.l-onesoul .p-os-footerCta__bg {
  position: absolute !important;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.l-onesoul .p-os-footerCta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.7);
}
.l-onesoul .p-os-footerCta__inner {
  width: 100%;
}
.l-onesoul .p-os-footerCta__category {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.05em;
  margin-bottom: 40px;
  color: var(--os-black);
}
.l-onesoul .p-os-footerCta__logo {
  margin: 16px auto 0;
  max-width: 460px;
  min-height: 100px;
}
.l-onesoul .p-os-footerCta__copy {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.8;
  margin-top: 37px;
}
.l-onesoul .p-os-footerCta__cta {
  margin-top: 37px;
}
.l-onesoul .p-os-footerCta__download {
  margin-top: 20px;
}
@media only screen and (max-width: 940px) {
  .l-onesoul .p-os-footerCta {
    padding: calc(140 / 750 * 100vw) 0;
    min-height: auto;
  }
  .l-onesoul .p-os-footerCta__logo {
    max-width: calc(500 / 750 * 100vw);
    min-height: calc(160 / 750 * 100vw);
    margin-bottom: calc(28 / 750 * 100vw);
  }
  .l-onesoul .p-os-footerCta__subtitle {
    font-size: calc(22 / 750 * 100vw);
    margin-bottom: calc(56 / 750 * 100vw);
  }
  .l-onesoul .p-os-footerCta__copy {
    font-size: calc(34 / 750 * 100vw);
    margin-bottom: calc(20 / 750 * 100vw);
  }
  .l-onesoul .p-os-footerCta__note {
    font-size: calc(22 / 750 * 100vw);
    margin-bottom: calc(48 / 750 * 100vw);
  }
}

/* ============================================================
   Small phone tweaks (existing theme uses 581px / 480px)
   ============================================================ */
@media only screen and (max-width: 581px) {
  .l-onesoul .m-section-title__jp {
    font-size: calc(54 / 750 * 100vw);
  }
  .l-onesoul .p-os-kv__copy {
    font-size: calc(36 / 750 * 100vw);
  }
}