/* スマホ共通：固定ヘッダー / ハンバーガー / 固定円 / ページ内メニュー
   デザイン基準: 864 × 1666 → --sp: 100vw/864
   本文タイプ: SE幅(375) で p=10 / h3=12 を基準に vw 比例（絶対pxを避ける） */

:root {
  --sp: calc(100vw / 864);
  --sp-header-h: calc(150 * var(--sp));
  --sp-drawer-h: calc(225 * var(--sp));
  /* SP col2 左右余白（ヘッダー px 60 と同値）。中身の left は Figma x − 60 */
  --sp-col-pad-x: calc(60 * var(--sp));
  /* Figma フッター: 透明地 / ボタン py11 px16 / gap 14×23 / 上余白 ≈42 */
  --sp-foot-pad-y: calc(42 * var(--sp));
  --sp-foot-pad-x: calc(16 * var(--sp));
  --sp-foot-gap-x: calc(14 * var(--sp));
  --sp-foot-gap-y: calc(23 * var(--sp));
  --sp-foot-h: 0px;
  /* 本文タイポ（375 で 10 / 12）。レイアウト用 --sp とは分離 */
  --sp-fs-p: calc(10 / 375 * 100vw);
  --sp-fs-h3: calc(12 / 375 * 100vw);
  --sp-lh: 1.6;
  /* テキスト間の縦リズムを従来比 1.5 倍 */
  --sp-stack: 1.5;
}

.c-sp-header,
.c-sp-drawer,
.c-sp-foot,
.c-sp-circle,
.c-sp-overlay {
  display: none;
}

@media (max-width: 720px) {
  body.has-sp-chrome {
    --sp-stage-h: calc(100dvh - var(--sp-header-h) - var(--sp-foot-h));
    padding-top: var(--sp-header-h);
    padding-bottom: var(--sp-foot-h);
    background: transparent;
  }

  body.has-sp-chrome.page-service,
  body.has-sp-chrome.page-top,
  body.has-sp-chrome.page-brand,
  body.has-sp-chrome.page-column,
  body.has-sp-chrome.page-culture {
    background: transparent;
  }

  body.has-sp-chrome .l-main {
    padding-top: 0;
    background: transparent;
  }

  /* 背景をフッター直下まで伸ばし、白い隙間を出さない */
  body.has-sp-chrome .p-sv__bg {
    position: fixed;
    top: var(--sp-header-h);
    right: 0;
    left: 0;
    z-index: 0;
    height: calc(100dvh - var(--sp-header-h));
    margin-bottom: 0;
  }

  body.has-sp-chrome .p-sv__scale {
    position: relative;
    z-index: 1;
  }

  body.has-sp-chrome .p-sv__col--1,
  body.has-sp-chrome .p-sv__col--3 {
    display: none;
  }

  body.has-sp-chrome .p-sv__col--2 {
    box-sizing: border-box;
    flex-basis: 100%;
    width: 100%;
    padding-inline: var(--sp-col-pad-x);
  }

  /* 中央カラム：ブロックは中央、テキストは左揃え（左右余白は col2 の padding-inline）
     固定円ありページは円下端より下から開始（文字拡大後も被らないよう余白を広めに） */
  body.has-sp-chrome .p-sv__section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    min-height: var(--sp-stage-h);
    padding: calc(0.14 * var(--sp-stage-h)) 0 !important;
    text-align: left;
    scroll-margin-top: var(--sp-header-h);
  }

  body.has-sp-chrome:not(.page-culture):not(.page-column):not(.page-contact) .p-sv__section {
    /*
     * 円の下端は幅（496.9sp）で決まる。余白を画面の高さ割合にすると、
     * 実機の短い表示域では本文の上がフェードの透明部分に入る。
     */
    padding-top: calc(346.9 * var(--sp) + 48px) !important;
    padding-bottom: calc(0.14 * var(--sp-stage-h)) !important;
  }

  body.has-sp-chrome:not(.page-culture):not(.page-column) .p-sv__section ~ .p-sv__section {
    padding-top: calc(24 * var(--sp) + 48px) !important;
  }

  /* 縦中央寄せだと、リンク先の上端が円下のフェードに隠れる */
  body.has-sp-chrome.page-service #sv-circle.p-sv__section--circle,
  body.has-sp-chrome.page-service #sv-life-skill.p-sv__section--skill {
    justify-content: flex-start;
  }

  /* ONEサークルの図形だけ、左右 5px 相当まで広げる */
  body.has-sp-chrome.page-service #sv-circle .p-sv__ring {
    width: calc(100% + 2 * var(--sp-col-pad-x) - 2 * (5 / 375 * 100vw));
    max-width: none;
    margin-left: calc((5 / 375 * 100vw) - var(--sp-col-pad-x));
    margin-right: calc((5 / 375 * 100vw) - var(--sp-col-pad-x));
  }

  body.has-sp-chrome .p-sv__section > * {
    margin-left: auto;
    margin-right: auto;
  }

  /* 本文左端とボタン左端を揃える（中央寄せマージンを打ち消し） */
  body.has-sp-chrome.page-top .p-sv__section > :is(.p-tp__copy, .p-tp__skill),
  body.has-sp-chrome.page-service #sv-sonota > :is(.p-sv__copy--sonota, .p-sv__brand) {
    margin-left: 0;
    margin-right: 0;
  }

  body.has-sp-chrome .p-sv__col--2 :is(h2, h3, p, span, a, li, label) {
    text-align: left;
  }

  /*
   * col2 本文タイポ統一（CULTURE は責任者確認まで従来サイズのまま＝ここでは拡大しない）
   * ページ個別の calc(*sp) より視認性を優先して上書き
   */
  body.has-sp-chrome:not(.page-culture) .p-sv__col--2 {
    font-size: var(--sp-fs-p);
    line-height: var(--sp-lh);
  }

  body.has-sp-chrome:not(.page-culture) .p-sv__col--2 :is(p, li, label, dd, dt, td, th, figcaption):not(.p-sv__ring-core, .p-sv__venn-name, .p-sv__venn-desc) {
    font-size: var(--sp-fs-p) !important;
    line-height: var(--sp-lh) !important;
  }

  /* iOS Safari: 16px未満の input フォーカスでページがズームするのを防ぐ */
  body.has-sp-chrome .p-sv__col--2 :is(input, textarea, select) {
    font-size: 16px !important;
    line-height: 1.4 !important;
  }

  body.has-sp-chrome:not(.page-culture) .p-sv__col--2 :is(h3, .p-pp__heading, .p-col__title, .p-sv__program h3, .p-sv__article-title, .p-sv__iv-title, .p-sv__lead) {
    font-size: var(--sp-fs-p) !important;
    line-height: var(--sp-lh) !important;
  }

  body.has-sp-chrome:not(.page-culture) .p-sv__col--2 :is(h1, h2, .p-pp__title) {
    font-size: calc(var(--sp-fs-h3) * 1.2) !important;
    line-height: var(--sp-lh) !important;
  }

  body.has-sp-chrome:not(.page-culture) .p-sv__col--2 :is(p, li, label, h1, h2, h3) :is(span, a, strong, em) {
    font-size: 9.8px !important;
    line-height: 1.6 !important;
    letter-spacing: -0.02rem;
  }

  /* テキスト間の margin / gap を従来比 1.5 倍（em 基準で相対指定） */
  body.has-sp-chrome:not(.page-culture) .p-sv__col--2 p + p:not(.p-sv__venn-name):not(.p-sv__venn-desc):not(.p-sv__iv-title) {
    margin-top: calc(1em * var(--sp-stack)) !important;
  }

  body.has-sp-chrome .p-sv__venn-name,
  body.has-sp-chrome .p-sv__venn-desc {
    margin-top: 0 !important;
  }

  body.has-sp-chrome:not(.page-culture) .p-sv__col--2 li + li {
    margin-top: calc(0.2em * var(--sp-stack)) !important;
  }

  body.has-sp-chrome:not(.page-culture) .p-sv__col--2 :is(h1, h2, h3, .p-pp__heading) {
    margin-top: calc(0.85em * var(--sp-stack)) !important;
    margin-bottom: calc(0.45em * var(--sp-stack)) !important;
  }

  body.has-sp-chrome:not(.page-culture) .p-sv__col--2 :is(h1, h2, h3, .p-pp__heading):first-child {
    margin-top: 0 !important;
    max-width: 80%;
  }

  body.has-sp-chrome:not(.page-culture) .p-sv__col--2 :is(.p-sv__copy, .p-sv__copy--sp, .p-tp__copy, .p-tp__fields, .p-pp__article, .p-pp__section, .p-sv__program, .p-sv__iv) {
    gap: calc(.5em * var(--sp-stack)) calc(1em * var(--sp-stack)) !important;
  }

  body.has-sp-chrome:not(.page-culture) .p-sv__col--2 :is(.p-pp__section, .p-sv__program, .p-sv__iv, .p-col__card) {
    margin-bottom: calc(1em * var(--sp-stack)) !important;
  }

  /* ボタン: 幅固定なし（ラベル折り返し防止）＋ 375幅で 10px。CTAは左寄せ／送信のみ中央 */
  body.has-sp-chrome :is(.p-tp__skill, .p-cu__all, .p-col__back, .p-sv__brand) {
    width: auto !important;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    white-space: nowrap;
    font-size: var(--sp-fs-p) !important;
  }

  body.has-sp-chrome .p-tp__send {
    width: auto !important;
    max-width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
    white-space: nowrap;
    font-size: var(--sp-fs-p) !important;
    gap: 8px;
  }

  body.has-sp-chrome :is(.p-tp__send, .p-tp__skill, .p-cu__all, .p-col__back, .p-sv__brand) :is(span, a) {
    font-size: inherit !important;
    white-space: nowrap;
  }

  /* Oneサークル中央ラベルは左右中央のまま */
  body.has-sp-chrome .p-sv__col--2 .p-sv__ring-core {
    text-align: center;
  }

  .c-sp-header {
    position: fixed;
    z-index: 200;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    width: 100%;
    height: var(--sp-header-h);
    padding: 0 calc(60 * var(--sp));
    background: #fff;
    box-shadow: 0 calc(4 * var(--sp)) calc(5 * var(--sp)) rgba(0, 0, 0, 0.15);
  }

  .c-sp-header__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(44 * var(--sp));
    height: calc(35 * var(--sp));
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
  }

  .c-sp-header__burger,
  .c-sp-header__close {
    display: block;
    width: 100%;
    height: auto;
  }

  .c-sp-header__close {
    display: none;
    width: calc(31 * var(--sp));
  }

  body.is-sp-nav-open .c-sp-header__burger {
    display: none;
  }

  body.is-sp-nav-open .c-sp-header__close {
    display: block;
  }

  .c-sp-header__logo {
    display: block;
    width: calc(108 * var(--sp));
    height: calc(50 * var(--sp));
    line-height: 0;
  }

  .c-sp-header__logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* 白 85% の全面オーバーレイ（ヘッダーの下から） */
  .c-sp-overlay {
    position: fixed;
    z-index: 185;
    top: var(--sp-header-h);
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    background: rgba(255, 255, 255, 0.85);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease, visibility 0.28s;
    pointer-events: none;
  }

  body.is-sp-nav-open .c-sp-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* ハンバーガー開放パネル（Figma: 薄青帯 + 2段ナビ） */
  .c-sp-drawer {
    position: fixed;
    z-index: 190;
    top: var(--sp-header-h);
    left: 0;
    display: block;
    visibility: hidden;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    padding: calc(100 * var(--sp)) calc(96 * var(--sp));
    overflow: hidden;
    background:
      linear-gradient(180deg, #eef4f8 0%, #dce7ef 48%, #cfdce6 100%);
    box-shadow: 0 calc(4 * var(--sp)) calc(10 * var(--sp)) rgba(0, 0, 0, 0.12);
    transform: translateY(-108%);
    transition: transform 0.28s ease, visibility 0.28s;
    pointer-events: none;
  }

  body.is-sp-nav-open .c-sp-drawer {
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  .c-sp-drawer__nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(40 * var(--sp));
    width: 100%;
  }

  .c-sp-drawer__row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: calc(39 * var(--sp));
  }

  .c-sp-drawer__nav a {
    flex: 0 0 auto;
    color: #000;
    font-family: Inter, "Zen Kaku Gothic New", sans-serif;
    font-size: calc(19.84 * var(--sp));
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.02em;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0.35;
  }

  .c-sp-drawer__nav a[aria-current="page"],
  .c-sp-drawer__nav a.is-active {
    opacity: 1;
  }

  body.is-sp-nav-open .c-sp-header {
    box-shadow: 0 calc(4 * var(--sp)) calc(10 * var(--sp)) rgba(0, 0, 0, 0.15);
  }

  body.is-sp-nav-open .c-sp-header__toggle {
    width: calc(31 * var(--sp));
    height: calc(31 * var(--sp));
  }

  /* ページ内メニュー（固定フッター）: 透明地・中央の白ボタン。active は紺地 */
  .c-sp-foot {
    position: fixed;
    z-index: 180;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    gap: var(--sp-foot-gap-y);
    margin: 0;
    padding: var(--sp-foot-pad-y) var(--sp-foot-pad-x);
    background: transparent;
    box-shadow: none;
    filter: drop-shadow(0 calc(-4 * var(--sp)) calc(10 * var(--sp)) rgba(0, 0, 0, 0.15));
  }

  .c-sp-foot__row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: var(--sp-foot-gap-x);
    width: 100%;
  }

  .c-sp-foot a {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: calc(44.49 * var(--sp));
    padding: calc(11 * var(--sp)) calc(16 * var(--sp));
    background: #fff;
    color: rgba(0, 25, 50, 0.35);
    font-family: Inter, "Zen Kaku Gothic New", sans-serif;
    font-size: calc(17.01 * var(--sp));
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    opacity: 1;
  }

  .c-sp-foot a.is-active,
  .c-sp-foot a[aria-current="true"] {
    background: #4f4f50;
    color: #fff;
    opacity: 1;
  }

  .c-sp-foot__tri {
    display: none;
  }

  body.is-sp-nav-open {
    overflow: hidden;
  }

  /* 固定円（Figma: top 9% + inner -50px → ヘッダー下に寄せて少し上へ） */
  .c-sp-circle {
    position: fixed;
    z-index: 120;
    top: calc(var(--sp-header-h) - 50 * var(--sp));
    left: 0;
    display: block;
    width: calc(389 * var(--sp));
    height: calc(375 * var(--sp));
    pointer-events: none;
  }

  .c-sp-circle__shape {
    position: absolute;
    top: calc(-148 * var(--sp));
    left: calc(-136 * var(--sp));
    display: block;
    box-sizing: border-box;
    width: calc(544.9 * var(--sp));
    height: calc(544.9 * var(--sp));
    border: calc(2 * var(--sp)) solid rgba(218, 218, 218, 0.5);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    box-shadow: none;
  }

  /* ブランドは背景が明るいので、白が分かるまで不透明度を上げる */
  body.page-brand .c-sp-circle__shape {
    background: rgba(255, 255, 255, 0.4);
  }

  .c-sp-circle__copy {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 calc(24 * var(--sp));
    opacity: 0;
    transition: opacity 0.34s ease;
  }

  .c-sp-circle__copy.is-on {
    opacity: 1;
  }

  .c-sp-circle__title,
  .c-sp-circle__title :is(p, span, .p-sv__circle-lead, .p-sv__circle-title, .p-sv__circle-body, .p-tp__circle-title, .p-tp__circle-sub) {
    margin: 0;
    color: #fff !important;
    font-family: Inter, "Zen Kaku Gothic New", sans-serif;
    font-size: calc(27.84 * var(--sp));
    font-weight: 400;
    line-height: calc(34 / 19.84);
    text-align: left;
  }

  body.page-brand .c-sp-circle__title,
  body.page-brand .c-sp-circle__title :is(p, span, .p-sv__circle-lead, .p-sv__circle-title, .p-sv__circle-body, .p-tp__circle-title, .p-tp__circle-sub) {
    color: #000 !important;
  }

  .c-sp-circle__title :is(.p-sv__circle-body, .p-tp__circle-sub) {
    margin-top: calc(8 * var(--sp));
    font-size: calc(14 * var(--sp));
    line-height: 1.45;
  }

  /* サービス・ブランド円: 見出し19.84 + 本文15.59 / 行間32、見出し下32 */
  body.page-service .c-sp-circle__title :is(.p-sv__circle-body),
  body.page-brand .c-sp-circle__title :is(.p-sv__circle-body) {
    margin-top: calc(16 * var(--sp));
    font-size: calc(18 * var(--sp));
    line-height: calc(32 / 15.59);
  }

  .c-sp-circle__title p + p {
    margin-top: 0;
  }

  /* 本文列だけ。円の下端でフェードアウト、フッター上端でフェードイン。
     お問い合わせはフェードなし。CULTURE は下端のフェードインだけ別指定。 */
  body.has-sp-chrome:not(.page-contact):not(.page-culture):not(.page-column) .p-sv__col--2:not(.p-sv__col--plain) {
    --fade-band: 48px;
    --fade-out-line: calc(496.9 * var(--sp));
    --fade-in-line: calc(100dvh - var(--sp-foot-h));
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0,
      transparent var(--fade-out-line),
      #000 calc(var(--fade-out-line) + var(--fade-band)),
      #000 calc(var(--fade-in-line) - var(--fade-band)),
      transparent var(--fade-in-line),
      transparent 100%
    );
    mask-image: linear-gradient(
      to bottom,
      transparent 0,
      transparent var(--fade-out-line),
      #000 calc(var(--fade-out-line) + var(--fade-band)),
      #000 calc(var(--fade-in-line) - var(--fade-band)),
      transparent var(--fade-in-line),
      transparent 100%
    );
    -webkit-mask-size: 100% 100dvh;
    mask-size: 100% 100dvh;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: 0 var(--content-mask-y, calc(-1 * var(--sp-header-h)));
    mask-position: 0 var(--content-mask-y, calc(-1 * var(--sp-header-h)));
  }

  body.has-sp-chrome.has-sp-chrome--no-circle .p-sv__col--2,
  body.has-sp-chrome.has-sp-chrome--no-circle.page-column--archive .p-col__scroll {
    --fade-out-line: var(--sp-header-h);
  }

  /* 空・惑星は本文列の中にある。列ごと上下マスクすると下端が白く抜ける */
  body.has-sp-chrome.page-column .p-sv__col--2 {
    -webkit-mask-image: none;
    mask-image: none;
  }

  /* CULTURE: 上端のフェードアウトは使わず、フッター手前のフェードインだけかける */
  body.has-sp-chrome.page-culture .p-sv__col--2 {
    --fade-band: 48px;
    --fade-in-line: calc(100dvh - var(--sp-foot-h));
    -webkit-mask-image: linear-gradient(
      to bottom,
      #000 0,
      #000 calc(var(--fade-in-line) - var(--fade-band)),
      transparent var(--fade-in-line),
      transparent 100%
    );
    mask-image: linear-gradient(
      to bottom,
      #000 0,
      #000 calc(var(--fade-in-line) - var(--fade-band)),
      transparent var(--fade-in-line),
      transparent 100%
    );
    -webkit-mask-size: 100% 100dvh;
    mask-size: 100% 100dvh;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: 0 calc(-1 * var(--sp-header-h));
    mask-position: 0 calc(-1 * var(--sp-header-h));
  }

  html:has(body.has-sp-chrome.page-contact),
  body.has-sp-chrome.page-contact {
    background: #0c204b;
  }

  /* お問い合わせはフェードしない。左上の円は出さない。
     フォームはヘッダー下の 100dvh 内で画面中央に置く。
     iOS は input を position:fixed より前に描くので、フォーム列に transform を付けて
     入力欄のレイヤーを列の中に閉じ込める。 */
  body.has-sp-chrome.page-contact .l-main,
  body.has-sp-chrome.page-contact .p-sv {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: calc(100dvh - var(--sp-header-h) - var(--sp-foot-h));
    min-height: 0;
  }

  body.has-sp-chrome.page-contact .p-sv__scale {
    display: flex;
    flex: 1 1 auto;
    align-items: stretch;
    min-height: 0;
    height: auto;
  }

  body.has-sp-chrome.page-contact .p-sv__col--2 {
    position: relative;
    z-index: 0;
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    min-height: 0;
    height: auto;
    transform: translate3d(0, 0, 0);
    -webkit-mask: none !important;
    mask: none !important;
  }

  body.has-sp-chrome.page-contact .c-sp-circle {
    display: none;
  }

  body.has-sp-chrome.page-contact .p-sv__section {
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    max-height: 100%;
    min-height: 0;
    padding: 0 !important;
  }

  body.has-sp-chrome.page-contact .p-ct__article,
  body.has-sp-chrome.page-contact .wpcf7,
  body.has-sp-chrome.page-contact .wpcf7-form,
  body.has-sp-chrome.page-contact .p-tp__form {
    width: 100%;
    max-height: 100%;
  }

  body.has-sp-chrome.page-contact .p-tp__fields {
    row-gap: 8px;
  }

  body.has-sp-chrome.page-contact .p-sv__col--2 textarea.wpcf7-form-control {
    height: 12dvh;
    min-height: 4.5rem;
    max-height: 7rem;
    resize: none;
  }

  body.has-sp-chrome.page-contact :is(input, select, textarea, button) {
    position: relative;
    z-index: 0;
  }

  body.has-sp-chrome.page-contact .p-sv__col--2 :is(p, li, label, h1, h2, h3),
  body.has-sp-chrome.page-contact .p-sv__col--2 :is(p, li, label, h1, h2, h3) :is(span, a, strong, em),
  body.has-sp-chrome.page-contact .p-sv__col--2 :is(input, textarea, select) {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }
  body.has-sp-chrome.page-contact .p-sv__col--2 .p-tp__field .wpcf7-form-control-wrap:not([data-name="your-message"]) {
    height: 32px;
  }
  /* 送信は PC の --u のままだと実機で極小になる。他CTAと同じ 864 基準にする */
  body.has-sp-chrome.page-contact .p-tp__send {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    width: fit-content !important;
    height: calc(50 * var(--sp));
    min-height: calc(50 * var(--sp));
    margin: calc(28 * var(--sp)) auto 0 !important;
    padding: 0 calc(24 * var(--sp));
    gap: calc(12 * var(--sp));
    font-size: var(--sp-fs-p) !important;
    line-height: 1 !important;
    white-space: nowrap;
  }

  body.has-sp-chrome.page-contact .p-tp__send span {
    font-size: inherit !important;
    line-height: 1 !important;
  }

  body.has-sp-chrome.page-contact .p-tp__send::after {
    margin-left: 0;
    border-width: calc(5 * var(--sp)) 0 calc(5 * var(--sp)) calc(7 * var(--sp));
  }

  body.has-sp-chrome.page-contact .p-sv__col--2 .wpcf7-form-control {
    height: 32px;
  }
  body.has-sp-chrome.page-contact .p-sv__col--2 span:not(.wpcf7-form-control-wrap),
  body.has-sp-chrome.page-contact .p-tp__agree label .wpcf7-list-item-label a {
    font-size: 12px !important;
    line-height: 1.6 !important;
  }
  body.has-sp-chrome.page-contact .p-tp__agree label input[type="checkbox"] {
    width: 14px;
    height: 14px;
    margin: 4px 4px 0 0;
  }
  body.has-sp-chrome .p-sv__section > .js-reveal {
    opacity: 1;
    transition: none;
  }

  /* プレーン列は円下のフェードを使わない */
  .p-sv__col--plain {
    -webkit-mask: none !important;
    mask: none !important;
  }
}

/* PC: ページ上端・下端でラバーバンドせず、端で止める */
@media (min-width: 721px) {
  html,
  body {
    overscroll-behavior-y: none;
  }
}