@charset "UTF-8";
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default padding */
ul,
ol {
  padding: 0;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a class attribute */
ul,
ol {
  list-style: none;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img {
  display: block;
  max-width: 100%;
  width: 100%;
}

/* Natural flow and rhythm in articles by default */
article > * + * {
  margin-top: 1em;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Blur images when they have no alt attribute */
img:not([alt]) {
  filter: blur(10px);
}

/* フォームリセット */
input,
button,
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
  font: inherit;
  outline: none;
}

textarea {
  resize: vertical;
}

input[type=checkbox],
input[type=radio] {
  display: none;
}

input[type=submit],
input[type=button],
label,
button,
select {
  cursor: pointer;
}

select::-ms-expand {
  display: none;
}

/* リキッドレイアウト対応 */
/* =========================================================
   デザイントークン（:root）
   色は用途ベース命名（config.md準拠）。HEX直書き禁止・var()経由で参照。
   抽出元: Figma 2608_ナノポアシーケンス解析_LP（figma-bridge）
   ========================================================= */
:root {
  /* Colors */
  --color-main: #0c3c66; /* ブランド基調のネイビー（見出し・主要テキスト） */
  --color-text: #0c3c66; /* 基本本文テキスト */
  --color-text-sub: #0163b8; /* サブ/リードテキスト（青） */
  --color-text-inverse: #ffffff; /* 濃色・グラデ上の白抜き文字 */
  --color-accent: #0084ff; /* アクセント青（CTA基調・グラデ始点） */
  --color-accent-light: #47d4ff; /* アクセント青（グラデ終点） */
  --color-bg: #ffffff; /* ページ基本背景 */
  --color-bg-sub: #e8eff4; /* 補助背景（カード・帯・セクション地） */
  --color-border: #e8eff4; /* 罫線・区切り線 */
  --color-ink: #1e1c1c; /* イラスト/アイコンの濃色（装飾ベクター） */
  --color-line: #0099ff; /* ハンバーガー/罫線などの明るい青ライン */
  /* Gradients */
  --gradient-cta: linear-gradient(90deg, #0084ff 0%, #47d4ff 100%); /* CTAボタン */
  --gradient-cta-hover: linear-gradient(90deg, #0084ff 0%, #00afff 100%); /* CTAボタン hover（濃いめ・アニメ指示書準拠） */
  --gradient-step-1: linear-gradient(90deg, #0084ff 0%, #00afff 100%); /* フロー配色1 */
  --gradient-step-1-sp: linear-gradient(180deg, #0084ff 0%, #00afff 100%); /* フロー配色1 SP */
  --gradient-step-2: linear-gradient(90deg, #00afff 0%, #00c6ff 100%); /* フロー配色2 */
  --gradient-step-2-sp: linear-gradient(180deg, #00afff 0%, #00c6ff 100%); /* フロー配色2 SP */
  --gradient-step-3: linear-gradient(90deg, #00c6ff 0%, #00dbde 100%); /* フロー配色3 */
  --gradient-step-3-sp: linear-gradient(180deg, #00c6ff 0%, #00dbde 100%); /* フロー配色3 SP */
  /* Fonts */
  --font-primary: "Zen Kaku Gothic New", sans-serif; /* 日本語 */
  --font-en: "Mona Sans", "Zen Kaku Gothic New", sans-serif; /* 英数字（Mona Sans未読込時は日本語書体にフォールバック） */
}

html {
  font-size: 16px;
}
@media screen and (min-width: 768px) {
  html {
    font-size: 1.28vw;
  }
}
@media (min-width: 1250px) {
  html {
    font-size: 16px;
  }
}
@media (max-width: 375px) {
  html {
    font-size: 4.2666666667vw;
  }
}

/* pcの電話番号発信対応 */
@media screen and (min-width: 768px) {
  a[href^="tel:"] {
    pointer-events: none;
  }
}

a {
  -webkit-text-decoration: none;
  color: inherit;
  text-decoration: none;
  transition: opacity 0.3s;
}

/* hover指定できるPCを想定したスタイル */
@media (any-hover: hover) {
  a:hover {
    opacity: 0.7;
  }
}
/* hoverが使えないタッチ端末を想定した装飾 */
@media (hover: none) {
  a:active {
    opacity: 0.7;
  }
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.625rem; /* SP: 固定ヘッダー高76 + 余白 */
}
@media screen and (min-width: 768px) {
  html {
    scroll-padding-top: 6.875rem; /* PC: ヘッダー上端33 + 高60 + 余白 */
  }
}

/* =========================================================
   Lenis 慣性スクロール（参考=modellista sienta のスクロール余韻）
   Lenis推奨CSS。Lenis有効時は scroll-behavior:smooth を無効化して競合回避。
   ========================================================= */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

body {
  display: flex;
  flex-direction: column;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-family: var(--font-primary);
  line-height: 1.5;
  min-height: 100vh;
  text-rendering: optimizeSpeed;
}

main {
  flex: 1;
}

/* スクロール余韻は Lenis の慣性スクロールで表現（フェードイン演出は使用しない）。
   指示書「ページスクロール後の動きに余韻をもたせてください」に準拠。 */
.l-drawer {
  bottom: 0;
  left: 0;
  overflow-y: auto;
  position: fixed;
  right: 0;
  top: 0;
  transform: translateX(100%);
  transition: transform 0.3s ease-out;
  z-index: 900;
}
@media screen and (min-width: 768px) {
  .l-drawer {
    display: none;
  }
}

.l-drawer[aria-hidden=false] {
  transform: translateX(0);
}

.l-footer {
  margin-top: 80px;
  margin-top: 5rem;
}
@media screen and (min-width: 768px) {
  .l-footer {
    margin-top: 100px;
    margin-top: 6.25rem;
  }
}

.l-header {
  bottom: auto;
  height: 76px;
  height: 4.75rem;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 1000;
}
@media screen and (min-width: 768px) {
  .l-header {
    height: 60px;
    height: 3.75rem;
    top: 33px;
    top: 2.0625rem;
  }
}

.l-inner {
  margin-left: auto;
  margin-right: auto;
  max-width: 600px;
  max-width: 37.5rem;
  padding-left: 20px;
  padding-left: 1.25rem;
  padding-right: 20px;
  padding-right: 1.25rem;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .l-inner {
    max-width: 1250px;
    max-width: 78.125rem;
    padding-left: 25px;
    padding-left: 1.5625rem;
    padding-right: 25px;
    padding-right: 1.5625rem;
  }
}

/* =========================================================
   c-button（青グラデpillのCTAボタン, 汎用コンポーネント）
   使用箇所: .p-fv__cta / .p-cta__button
   静的デザイン(Figma 44:811): テキスト左 / 矢印円 右 / 青グラデpill / 外周に白リング
   hover: 参考サイト dna-chip.co.jp/recruit の実挙動に準拠。
     ・背景がフィル反転（青グラデ→白 / 白→青グラデ）
     ・テキスト/矢印が色反転
     ・矢印円がボタン内を横断（右→左）、テキストは右へ寄る＝左右入れ替わり
     すべて 0.9s cubic-bezier(0.35, 0.85, 0.36, 1)
   ========================================================= */
.c-button {
  --track: 229px;
  --track: 14.3125rem; /* SP: コンテンツ幅 = min-width260 - padding(20+11) */
  align-items: center;
  background: linear-gradient(90deg, #0084ff 0%, #47d4ff 100%);
  background: var(--gradient-cta);
  border-radius: 6.25rem;
  display: flex;
  gap: 12px;
  gap: 0.75rem;
  justify-content: space-between;
  min-height: 60px;
  min-height: 3.75rem;
  min-width: 260px;
  min-width: 16.25rem;
  padding-bottom: 6px;
  padding-bottom: 0.375rem;
  padding-left: 20px;
  padding-left: 1.25rem;
  padding-right: 11px;
  padding-right: 0.6875rem;
  padding-top: 5px;
  padding-top: 0.3125rem;
  position: relative;
  transition: transform 0.9s cubic-bezier(0.35, 0.85, 0.36, 1), box-shadow 0.9s cubic-bezier(0.35, 0.85, 0.36, 1);
  width: -moz-fit-content;
  width: fit-content;
  z-index: 0;
}
@media screen and (min-width: 768px) {
  .c-button {
    --track: 233px;
    --track: 14.5625rem; /* PC: min-width264 - padding(20+11) */
    min-height: 61px;
    min-height: 3.8125rem;
    min-width: 264px;
    min-width: 16.5rem;
  }
}

.c-button:focus-visible {
  outline: 2px solid #ffffff;
  outline: 2px solid var(--color-text-inverse);
  outline-offset: 2px;
}

/* テキスト（左寄せ） ------------------------------ */
.c-button__text {
  color: #ffffff;
  color: var(--color-text-inverse);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-family: var(--font-primary);
  font-size: max(14px, 10px);
  font-size: max(0.875rem, 10px);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  position: relative;
  text-align: left;
  transition: transform 0.9s cubic-bezier(0.35, 0.85, 0.36, 1), color 0.9s cubic-bezier(0.35, 0.85, 0.36, 1);
  z-index: 2;
}

/* 矢印円（右, hoverで左へ横断） ------------------------------
   デザイン(Frame41): 40x40 / 完全円 / 白グラデ枠 / 薄いフロスト地 / blur */
.c-button__icon {
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
  background: linear-gradient(113deg, rgba(255, 255, 255, 0.2) 3.51%, rgba(255, 255, 255, 0) 111.71%);
  border-radius: 50%;
  box-shadow: 50px 60px 100px 0 rgba(0, 0, 0, 0.05);
  display: block;
  flex-shrink: 0;
  height: 40px;
  height: 2.5rem;
  position: relative;
  transition: transform 0.9s cubic-bezier(0.35, 0.85, 0.36, 1), background-color 0.9s cubic-bezier(0.35, 0.85, 0.36, 1);
  width: 40px;
  width: 2.5rem;
  z-index: 2;
}

/* 枠線を線形グラデ(白100%→白23%)にする。角丸＋半透明＋blurのため border-image/背景clipは不可。
   疑似要素をグラデで塗り、mask(content-box除外)で1pxのリングだけ残す方式。 */
.c-button__icon::after {
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
  -webkit-mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000);
  -webkit-mask-clip: content-box, border-box;
  -webkit-mask-composite: xor;
  background: linear-gradient(113deg, #ffffff 0%, rgba(255, 255, 255, 0.23) 100%);
  background: linear-gradient(113deg, var(--color-text-inverse) 0%, rgba(255, 255, 255, 0.23) 100%);
  border-radius: inherit;
  bottom: 0;
  content: "";
  left: 0;
          mask-clip: content-box, border-box;
          mask-composite: exclude;
          mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000);
  padding: 1px; /* リング(枠)の太さ = 旧border 1px相当 */
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
}

.c-button__icon::before {
  -webkit-mask-image: url("../images/fv/fv-icon-arrow.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  background-color: #ffffff;
  background-color: var(--color-text-inverse);
  bottom: 0;
  content: "";
  height: 14px;
  height: 0.875rem;
  left: 0;
  margin: auto;
  mask-image: url("../images/fv/fv-icon-arrow.svg");
          mask-position: center;
          mask-repeat: no-repeat;
          mask-size: contain;
  position: absolute;
  right: 0;
  top: 0;
  transition: background-color 0.9s cubic-bezier(0.35, 0.85, 0.36, 1);
  width: 14px;
  width: 0.875rem;
}

/* =========================================================
   c-button--light（白pillの反転バリアント。青グラデ帯の上で使用: CTA帯）
   ========================================================= */
.c-button--light {
  background: #ffffff;
  background: var(--color-bg);
}

.c-button--light .c-button__text {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(90deg, #0084ff 0%, #47d4ff 100%);
  background: var(--gradient-cta);
  background-clip: text;
  color: transparent;
}

/* Firefox対策: background-clip:text の要素に transform がかかると切り抜き背景の描画が壊れ、
   hover時に文字(透明)が消える既知バグ。Firefoxのみグラデを解除し単色(アクセント青)にフォールバック。
   （WebKitはグラデ維持。gradient-ctaは#0084ff→#47d4ffの近い青同士のため見た目差は僅か） */
@supports (-moz-appearance: none) {
  .c-button--light .c-button__text {
    -webkit-text-fill-color: initial;
    background: none;
    color: #0084ff;
    color: var(--color-accent);
  }
}
.c-button--light .c-button__icon {
  backdrop-filter: blur(30px);
  background: linear-gradient(113deg, rgba(36, 219, 255, 0.17) 3.51%, rgba(57, 120, 255, 0.1) 111.71%);
  box-shadow: 50px 60px 100px 0 rgba(0, 0, 0, 0.05);
}

/* --lightの枠グラデ: 青(#3978FF 10%)→白(#FFFFFF 23%)。mask/padding等はベース::afterから継承し背景のみ上書き */
.c-button--light .c-button__icon::after {
  background: linear-gradient(113deg, rgba(57, 120, 255, 0.1) 0%, rgba(255, 255, 255, 0.23) 100%);
}

.c-button--light .c-button__icon::before {
  background: linear-gradient(90deg, #0084FF 0%, #47D4FF 100%);
}

/* =========================================================
   hover（アニメ指示書 182:345 準拠）
   矢印円とテキストが横断して左右に入れ替わるのみ。
   ※指示書では色・背景は変化しないため、色/背景の変更は行わない。
   ========================================================= */
@media (any-hover: hover) {
  .c-button:hover {
    box-shadow: 0 0.625rem 1.5rem rgba(0, 132, 255, 0.25);
    opacity: 1;
    transform: translateY(-2px);
  }
  /* テキストは右端へ、矢印円は左端へ（＝横断して入れ替わる） */
  /* 指示書: hover時のテキスト右端〜ボタン右端の余白は20px。右paddingが11pxのため、
     差分9px(=20-11)ぶん手前で止めて20pxを確保（左側の矢印円は既に20pxで左右対称）。 */
  .c-button:hover .c-button__text {
    transform: translateX(calc(var(--track) - 100% - 0.5625rem));
  }
  .c-button:hover .c-button__icon {
    transform: translateX(calc(-1 * (var(--track) - 100%)));
  }
}
.p-about {
  padding-bottom: 120px;
  padding-bottom: 7.5rem;
  padding-top: 100px;
  padding-top: 6.25rem;
}
@media screen and (min-width: 768px) {
  .p-about {
    padding-bottom: 174px;
    padding-bottom: 10.875rem;
    padding-top: 199px;
    padding-top: 12.4375rem;
  }
}

/* ラベル + 見出し ------------------------------ */
.p-about__label {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(90deg, #0084ff 0%, #47d4ff 100%);
  background: var(--gradient-cta);
  background-clip: text;
  color: transparent;
  font-family: "Mona Sans", "Zen Kaku Gothic New", sans-serif;
  font-family: var(--font-en);
  font-size: max(14px, 10px);
  font-size: max(0.875rem, 10px);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 2.286;
  margin: 0;
  width: -moz-fit-content;
  width: fit-content; /* グラデ文字: 要素幅をテキスト幅に合わせ、90degグラデをテキスト全体に効かせる */
}
@media screen and (min-width: 768px) {
  .p-about__label {
    font-size: max(24px, 10px);
    font-size: max(1.5rem, 10px);
    line-height: 2.083;
  }
}

.p-about__label::after {
  background-color: #e8eff4;
  background-color: var(--color-border);
  content: "";
  display: block;
  height: 2px;
  margin-top: 2px;
  margin-top: 0.125rem;
  width: 30px;
  width: 1.875rem;
}

.p-about__heading {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(90deg, #0084ff 0%, #47d4ff 100%);
  background: var(--gradient-cta);
  background-clip: text;
  color: transparent;
  font-size: max(26px, 10px);
  font-size: max(1.625rem, 10px);
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1.615;
  margin: 0;
  margin-top: 12px;
  margin-top: 0.75rem;
  width: -moz-fit-content;
  width: fit-content; /* グラデ文字: テキスト幅に合わせる */
}
@media screen and (min-width: 768px) {
  .p-about__heading {
    font-size: max(40px, 10px);
    font-size: max(2.5rem, 10px);
    line-height: 1.25;
    margin-top: 16px;
    margin-top: 1rem;
  }
}

/* block1: 本文 + DNAらせんイラスト ------------------------------ */
.p-about__block1 {
  margin-top: 15px;
  margin-top: 0.9375rem;
}
@media screen and (min-width: 768px) {
  .p-about__block1 {
    grid-column-gap: 0;
    -moz-column-gap: 0;
    align-items: start;
         column-gap: 0;
    display: grid;
    grid-template-areas: "body illust";
    grid-template-columns: 645fr 696fr;
    margin-top: 73px;
    margin-top: 4.5625rem;
  }
}

/* フルブリードは 100vw を使わず、JS実測の l-inner ガター(px)で塗り足す。
   （100vw はブラウザによりスクロールバー幅の扱いが異なり、横スクロールや
    クリップでの画像消失の原因になるため）。--about-bleed-l/-r は script.js が設定。
   JS未実行時は 0（＝l-inner内に収まる）にフォールバックし、画像は必ず表示される。 */
.p-about__illust {
  margin: 0;
  margin-left: calc(-1 * 0px);
  margin-left: calc(-1 * var(--about-bleed-l, 0px));
  margin-right: calc(-1 * 0px);
  margin-right: calc(-1 * var(--about-bleed-r, 0px)); /* SP: 両端フルブリード */
  width: auto;
}
@media screen and (min-width: 768px) {
  .p-about__illust {
    grid-area: illust;
    justify-self: end;
    margin-left: 0;
    margin-right: 0;
    margin-right: calc(-1 * 0px);
    margin-right: calc(-1 * var(--about-bleed-r, 0px)); /* PC(〜1500px): 右端フルブリード（画面右端に接地） */
    margin-top: -107px;
    margin-top: -6.6875rem;
    max-width: 696px;
    max-width: 43.5rem;
    width: auto;
  }
}
.p-about__illust {
  /* 1600px超: ブリードを止め、画像をl-inner内（右端揃え）に収める（テキストとの余白が広がり続けないように） */
}
@media (min-width: 1600px) {
  .p-about__illust {
    margin-right: 0;
  }
}

.p-about__illust picture,
.p-about__illust img {
  aspect-ratio: 390/306.5;
  display: block;
  height: auto;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .p-about__illust picture,
  .p-about__illust img {
    aspect-ratio: 696/484;
  }
}

.p-about__block1Body {
  margin-top: -16px;
  margin-top: -1rem;
}
@media screen and (min-width: 768px) {
  .p-about__block1Body {
    grid-area: body;
    margin-top: 0;
  }
}

.p-about__subheading {
  color: #0c3c66;
  color: var(--color-text);
  font-size: max(18px, 10px);
  font-size: max(1.125rem, 10px);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.778;
  margin: 0;
}
@media screen and (min-width: 768px) {
  .p-about__subheading {
    font-size: max(24px, 10px);
    font-size: max(1.5rem, 10px);
    line-height: 2.083;
  }
}

.p-about__text {
  color: #0c3c66;
  color: var(--color-text);
  font-size: max(14px, 10px);
  font-size: max(0.875rem, 10px);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 2;
  margin-top: 12px;
  margin-top: 0.75rem;
  text-align: justify;
}
@media screen and (min-width: 768px) {
  .p-about__text {
    font-size: max(16px, 10px);
    font-size: max(1rem, 10px);
    letter-spacing: 0.02em;
    line-height: 2.125;
    margin-top: 18px;
    margin-top: 1.125rem;
  }
}

.p-about__productName {
  white-space: nowrap;
}

/* block2: 本文 + 機器写真 + 出典リンク ------------------------------ */
.p-about__block2 {
  margin-top: 60px;
  margin-top: 3.75rem;
}
@media screen and (min-width: 768px) {
  .p-about__block2 {
    margin-top: 80px;
    margin-top: 5rem;
  }
}

.p-about__block2 .p-about__text {
  text-align: left;
}
@media screen and (min-width: 768px) {
  .p-about__block2 .p-about__text {
    text-align: justify;
  }
}

.p-about__figure {
  margin-top: 30px;
  margin-top: 1.875rem;
  position: relative;
}
@media screen and (min-width: 768px) {
  .p-about__figure {
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    margin-top: 3.125rem;
    width: min(100%, 672px);
    width: min(100%, 42rem);
  }
}

.p-about__figure picture,
.p-about__figure img {
  aspect-ratio: 350/269;
  border-radius: 0.625rem;
  display: block;
  height: auto;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .p-about__figure picture,
  .p-about__figure img {
    aspect-ratio: 672/383.83;
  }
}

.p-about__caption {
  color: #0c3c66;
  color: var(--color-text);
  font-size: max(14px, 10px);
  font-size: max(0.875rem, 10px);
  font-weight: 400;
  left: 10px;
  left: 0.625rem;
  letter-spacing: 0;
  line-height: 2;
  margin: 0;
  position: absolute;
  top: 3px;
  top: 0.1875rem;
}
@media screen and (min-width: 768px) {
  .p-about__caption {
    font-size: max(16px, 10px);
    font-size: max(1rem, 10px);
    left: 20px;
    left: 1.25rem;
    letter-spacing: 0.02em;
    line-height: 2.125;
    top: 8px;
    top: 0.5rem;
  }
}

.p-about__source {
  -webkit-text-decoration: underline;
  color: #0c3c66;
  color: var(--color-text);
  display: block;
  font-size: max(12px, 10px);
  font-size: max(0.75rem, 10px);
  font-weight: 300;
  letter-spacing: 0.02em;
  line-height: 1.833;
  margin-top: 0;
  text-decoration: underline;
}
@media screen and (min-width: 768px) {
  .p-about__source {
    font-size: max(14px, 10px);
    font-size: max(0.875rem, 10px);
    letter-spacing: 0.04em;
    line-height: 2.571;
    margin-left: auto;
    margin-right: auto;
    width: min(100%, 672px);
    width: min(100%, 42rem);
  }
}

.p-about__source:focus-visible {
  outline: 2px solid #0c3c66;
  outline: 2px solid var(--color-main);
  outline-offset: 2px;
}

.p-cta {
  background: linear-gradient(90deg, #0084ff 0%, #47d4ff 100%);
  background: var(--gradient-cta);
  border-radius: 1.875rem;
  margin-top: 58px;
  margin-top: 3.625rem;
  padding-bottom: 60px;
  padding-bottom: 3.75rem;
  padding-top: 60px;
  padding-top: 3.75rem;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .p-cta {
    border-radius: 2.5rem;
    margin-top: 120px;
    margin-top: 7.5rem;
    padding-bottom: 57px;
    padding-bottom: 3.5625rem;
    padding-top: 60px;
    padding-top: 3.75rem;
  }
}

.p-cta__inner {
  text-align: center;
}
@media screen and (min-width: 768px) {
  .p-cta__inner {
    max-width: 915px;
    max-width: 57.1875rem;
  }
}

/* 見出し + divider ------------------------------ */
.p-cta__heading {
  color: #ffffff;
  color: var(--color-text-inverse);
  font-size: max(26px, 10px);
  font-size: max(1.625rem, 10px);
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1.615;
  margin: 0;
}
@media screen and (min-width: 768px) {
  .p-cta__heading {
    font-size: max(36px, 10px);
    font-size: max(2.25rem, 10px);
    line-height: 1.389;
  }
}

.p-cta__heading::after {
  background-color: #e8eff4;
  background-color: var(--color-border);
  content: "";
  display: block;
  height: 2px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 14px;
  margin-top: 0.875rem;
  width: 48px;
  width: 3rem;
}

/* リード文 ------------------------------ */
.p-cta__lead {
  color: #ffffff;
  color: var(--color-text-inverse);
  font-size: max(14px, 10px);
  font-size: max(0.875rem, 10px);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 2;
  margin: 0;
  margin-top: 14px;
  margin-top: 0.875rem;
}
@media screen and (min-width: 768px) {
  .p-cta__lead {
    font-size: max(16px, 10px);
    font-size: max(1rem, 10px);
    letter-spacing: 0.02em;
    line-height: 2.125;
  }
}

/* CTAボタン（見た目は.c-button共通, ここではCTA帯内での配置のみ） ------------------------------ */
.p-cta__button {
  margin-left: auto;
  margin-right: auto;
  margin-top: 26px;
  margin-top: 1.625rem;
}
@media screen and (min-width: 768px) {
  .p-cta__button {
    margin-top: 30px;
    margin-top: 1.875rem;
  }
}

/* =========================================================
   p-drawer（SPドロワーメニューの中身。開閉レイアウトは l-drawer）
   ========================================================= */
.p-drawer {
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.1));
  box-shadow: 50px 60px 100px rgba(0, 0, 0, 0.05);
  min-height: 100%;
  padding-bottom: 40px;
  padding-bottom: 2.5rem;
  padding-left: 20px;
  padding-left: 1.25rem;
  padding-right: 20px;
  padding-right: 1.25rem;
}

.p-drawer__inner {
  margin-left: auto;
  margin-right: auto;
  max-width: 300px;
  max-width: 18.75rem;
  padding-top: 126px;
  padding-top: 7.875rem;
}
@media screen and (min-width: 500px) {
  .p-drawer__inner {
    max-width: 400px;
    max-width: 25rem;
  }
}

.p-drawer__navList {
  display: flex;
  flex-direction: column;
  gap: 30px;
  gap: 1.875rem;
}

.p-drawer__navLink {
  border-bottom: 2px solid #ffffff;
  border-bottom: 2px solid var(--color-text-inverse);
  color: #0c3c66;
  color: var(--color-main);
  display: block;
  font-family: "Mona Sans", "Zen Kaku Gothic New", sans-serif;
  font-family: var(--font-en);
  font-size: max(16px, 10px);
  font-size: max(1rem, 10px);
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 3.125;
  padding-bottom: 3px;
  padding-bottom: 0.1875rem;
  width: 100%;
}

.p-drawer__navLink:focus-visible {
  outline: 2px solid #0c3c66;
  outline: 2px solid var(--color-main);
  outline-offset: 2px;
}

.p-drawer__contact {
  align-items: center;
  background: linear-gradient(90deg, #0084ff 0%, #47d4ff 100%);
  background: var(--gradient-cta);
  border-radius: 0.25rem;
  color: #ffffff;
  color: var(--color-text-inverse);
  display: flex;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-family: var(--font-primary);
  font-size: max(16px, 10px);
  font-size: max(1rem, 10px);
  font-weight: 700;
  height: 60px;
  height: 3.75rem;
  justify-content: center;
  letter-spacing: 0.02em;
  line-height: 1;
  margin-top: 74px;
  margin-top: 4.625rem;
  width: 100%;
}

.p-drawer__contact:focus-visible {
  outline: 2px solid #0c3c66;
  outline: 2px solid var(--color-main);
  outline-offset: 2px;
}

/* 背景の三角テクスチャ（水色ブロック下側）。下寄せで下部の密パターンを見せ、上側の .p-service と
   合わせてブロック全体を1枚のテクスチャに見せる。PC/SPで画像出し分け。詳細は _p-service.scss のコメント参照。 */
.p-flow {
  background-color: #e8eff4;
  background-color: var(--color-bg-sub);
  background-image: url("../images/service/service-bg-sp.png?2026-09-30");
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: 100% auto;
  border-radius: 0 0 1.875rem 1.875rem;
  padding-bottom: 120px;
  padding-bottom: 7.5rem;
  padding-top: 60px;
  padding-top: 3.75rem;
}
@media screen and (min-width: 768px) {
  .p-flow {
    background-image: url("../images/service/service-bg-pc.png?2026-09-30");
    border-radius: 0 0 2.5rem 2.5rem;
    padding-bottom: 198px;
    padding-bottom: 12.375rem;
    padding-top: 80px;
    padding-top: 5rem;
  }
}

/* 見出し + リード文 ------------------------------ */
.p-flow__heading {
  color: #0c3c66;
  color: var(--color-main);
  font-size: max(18px, 10px);
  font-size: max(1.125rem, 10px);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.778;
  margin: 0;
}
@media screen and (min-width: 768px) {
  .p-flow__heading {
    font-size: max(24px, 10px);
    font-size: max(1.5rem, 10px);
    line-height: 2.083;
  }
}

.p-flow__text {
  color: #0c3c66;
  color: var(--color-text);
  font-size: max(14px, 10px);
  font-size: max(0.875rem, 10px);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 2;
  margin: 0;
  margin-top: 12px;
  margin-top: 0.75rem;
}
@media screen and (min-width: 768px) {
  .p-flow__text {
    font-size: max(16px, 10px);
    font-size: max(1rem, 10px);
    letter-spacing: 0.02em;
    line-height: 2.125;
    margin-top: 16px;
    margin-top: 1rem;
    text-align: justify;
  }
}

/* ステップリスト ------------------------------ */
.p-flow__list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  gap: 1.5rem;
  margin-left: auto;
  margin-right: auto;
  margin-top: 30px;
  margin-top: 1.875rem;
  max-width: 450px;
  max-width: 28.125rem;
}
@media screen and (min-width: 768px) {
  .p-flow__list {
    grid-column-gap: 2.25rem;
    -moz-column-gap: 2.25rem;
    grid-gap: 36px;
         column-gap: 2.25rem;
    display: grid;
    gap: 36px;
    gap: 2.25rem;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 55px;
    margin-top: 3.4375rem;
    max-width: 100%;
  }
}

.p-flow__item {
  position: relative;
}

/* カード間コネクタ（丸型フロストガラス + 矢印icon-arrow.svg。SPは下向きに回転して流用）
   円の枠線は白100%→白23%の線形グラデ。半透明フィル＋blurのため枠を背景clipやborder-imageで
   出すとフロスト感が濁る/角丸で破綻するため、枠は別レイヤー(::before)をグラデで塗りmaskで
   リング化して重ねる（::after=フロスト地+矢印 / ::before=グラデ枠リング）。 */
.p-flow__item:not(:last-child)::before,
.p-flow__item:not(:last-child)::after {
  border-radius: 50%;
  box-sizing: border-box;
  content: "";
  height: 82px;
  height: 5.125rem;
  left: 50%;
  position: absolute;
  top: 100%;
  transform: translate(-50%, -50%) rotate(90deg);
  width: 82px;
  width: 5.125rem;
  z-index: 10;
}
@media screen and (min-width: 768px) {
  .p-flow__item:not(:last-child)::before,
  .p-flow__item:not(:last-child)::after {
    height: 104px;
    height: 6.5rem;
    left: 105%;
    top: 65%;
    transform: translate(-50%, -50%) rotate(0deg);
    width: 104px;
    width: 6.5rem;
  }
}

/* フロスト地 + 矢印 */
.p-flow__item:not(:last-child)::after {
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  background-image: url("../images/flow/icon-arrow.svg"), linear-gradient(113deg, rgba(255, 255, 255, 0.2) 3.51%, rgba(255, 255, 255, 0) 111.71%);
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-size: 1rem 1rem, cover;
  box-shadow: 50px 60px 100px rgba(0, 0, 0, 0.05);
}
@media screen and (min-width: 768px) {
  .p-flow__item:not(:last-child)::after {
    background-size: 1.25rem 1.25rem, cover;
  }
}

/* グラデ枠リング（白100%→白23%）: 円周1pxだけ残す。::afterの上に重ねる */
.p-flow__item:not(:last-child)::before {
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
  -webkit-mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000);
  -webkit-mask-clip: content-box, border-box;
  -webkit-mask-composite: xor;
  background: linear-gradient(113deg, #ffffff 0%, rgba(255, 255, 255, 0.23) 100%);
  background: linear-gradient(113deg, var(--color-text-inverse) 0%, rgba(255, 255, 255, 0.23) 100%);
          mask-clip: content-box, border-box;
          mask-composite: exclude;
          mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000);
  padding: 1px;
  pointer-events: none;
  z-index: 11;
}

/* カード共通 ------------------------------ */
.p-flow__card {
  border-radius: 1rem;
  overflow: hidden;
  padding: 17px 15px 30px;
  padding: 1.0625rem 0.9375rem 1.875rem;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .p-flow__card {
    border-radius: 1.25rem;
    height: 100%;
    padding: 12px 9px 24px 10px;
    padding: 0.75rem 0.5625rem 1.5rem 0.625rem;
  }
}

.p-flow__item--step1 .p-flow__card {
  background: linear-gradient(180deg, #0084ff 0%, #00afff 100%);
  background: var(--gradient-step-1-sp);
}
@media screen and (min-width: 768px) {
  .p-flow__item--step1 .p-flow__card {
    background: linear-gradient(90deg, #0084ff 0%, #00afff 100%);
    background: var(--gradient-step-1);
  }
}

.p-flow__item--step2 .p-flow__card {
  background: linear-gradient(180deg, #00afff 0%, #00c6ff 100%);
  background: var(--gradient-step-2-sp);
}
@media screen and (min-width: 768px) {
  .p-flow__item--step2 .p-flow__card {
    background: linear-gradient(90deg, #00afff 0%, #00c6ff 100%);
    background: var(--gradient-step-2);
  }
}

.p-flow__item--step3 .p-flow__card {
  background: linear-gradient(180deg, #00c6ff 0%, #00dbde 100%);
  background: var(--gradient-step-3-sp);
}
@media screen and (min-width: 768px) {
  .p-flow__item--step3 .p-flow__card {
    background: linear-gradient(90deg, #00c6ff 0%, #00dbde 100%);
    background: var(--gradient-step-3);
  }
}

/* カードタイトル（アイコンは装飾のため::beforeで実装） ------------------------------ */
.p-flow__cardTitle {
  align-items: center;
  color: #ffffff;
  color: var(--color-text-inverse);
  display: flex;
  font-size: max(18px, 10px);
  font-size: max(1.125rem, 10px);
  font-weight: 700;
  gap: 10px;
  gap: 0.625rem;
  justify-content: center;
  letter-spacing: 0.04em;
  line-height: 1.778;
  margin: 0;
}
@media screen and (min-width: 768px) {
  .p-flow__cardTitle {
    font-size: max(20px, 10px);
    font-size: max(1.25rem, 10px);
    line-height: 2.5;
  }
}

.p-flow__cardTitle::before {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  display: block;
  flex-shrink: 0;
  height: 50px;
  height: 3.125rem;
  width: 62px;
  width: 3.875rem;
}
@media screen and (min-width: 768px) {
  .p-flow__cardTitle::before {
    height: 62px;
    height: 3.875rem;
    width: 62px;
    width: 3.875rem;
  }
}

.p-flow__item--step1 .p-flow__cardTitle::before {
  background-image: url("../images/flow/flow-01_sp.png");
  background-image: -webkit-image-set(url("../images/flow/flow-01_sp.webp") type("image/webp"), url("../images/flow/flow-01_sp.png") type("image/png"));
  background-image: image-set(url("../images/flow/flow-01_sp.webp") type("image/webp"), url("../images/flow/flow-01_sp.png") type("image/png"));
}
@media screen and (min-width: 768px) {
  .p-flow__item--step1 .p-flow__cardTitle::before {
    background-image: url("../images/flow/flow-01.png");
    background-image: -webkit-image-set(url("../images/flow/flow-01.webp") type("image/webp"), url("../images/flow/flow-01.png") type("image/png"));
    background-image: image-set(url("../images/flow/flow-01.webp") type("image/webp"), url("../images/flow/flow-01.png") type("image/png"));
  }
}

.p-flow__item--step2 .p-flow__cardTitle::before {
  background-image: url("../images/flow/flow-02_sp.png");
  background-image: -webkit-image-set(url("../images/flow/flow-02_sp.webp") type("image/webp"), url("../images/flow/flow-02_sp.png") type("image/png"));
  background-image: image-set(url("../images/flow/flow-02_sp.webp") type("image/webp"), url("../images/flow/flow-02_sp.png") type("image/png"));
}
@media screen and (min-width: 768px) {
  .p-flow__item--step2 .p-flow__cardTitle::before {
    background-image: url("../images/flow/flow-02.png");
    background-image: -webkit-image-set(url("../images/flow/flow-02.webp") type("image/webp"), url("../images/flow/flow-02.png") type("image/png"));
    background-image: image-set(url("../images/flow/flow-02.webp") type("image/webp"), url("../images/flow/flow-02.png") type("image/png"));
  }
}

.p-flow__item--step3 .p-flow__cardTitle::before {
  background-image: url("../images/flow/flow-03_sp.png");
  background-image: -webkit-image-set(url("../images/flow/flow-03_sp.webp") type("image/webp"), url("../images/flow/flow-03_sp.png") type("image/png"));
  background-image: image-set(url("../images/flow/flow-03_sp.webp") type("image/webp"), url("../images/flow/flow-03_sp.png") type("image/png"));
}
@media screen and (min-width: 768px) {
  .p-flow__item--step3 .p-flow__cardTitle::before {
    background-image: url("../images/flow/flow-03.png");
    background-image: -webkit-image-set(url("../images/flow/flow-03.webp") type("image/webp"), url("../images/flow/flow-03.png") type("image/png"));
    background-image: image-set(url("../images/flow/flow-03.webp") type("image/webp"), url("../images/flow/flow-03.png") type("image/png"));
  }
}

/* カード説明文 ------------------------------ */
.p-flow__cardDesc {
  color: #ffffff;
  color: var(--color-text-inverse);
  font-size: max(14px, 10px);
  font-size: max(0.875rem, 10px);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 2;
  margin: 0;
  margin-top: 18px;
  margin-top: 1.125rem;
}
@media screen and (min-width: 768px) {
  .p-flow__cardDesc {
    font-size: max(16px, 10px);
    font-size: max(1rem, 10px);
    letter-spacing: 0;
    line-height: 1.875;
    margin-top: 5px;
    margin-top: 0.3125rem;
  }
}

@media screen and (min-width: 768px) {
  .p-flow__item--step2 .p-flow__cardDesc {
    letter-spacing: 0;
  }
}

/* フロストガラスパネル（バッジ+リスト） ------------------------------ */
.p-flow__cardPanel {
  background-color: rgba(255, 255, 255, 0.15);
  border: 1px solid #ffffff;
  border: 1px solid var(--color-text-inverse);
  border-radius: 0.75rem;
  margin-top: 43px;
  margin-top: 2.6875rem;
  min-height: 150px;
  min-height: 9.375rem;
  padding-bottom: 16px;
  padding-bottom: 1rem;
  padding-left: 10px;
  padding-left: 0.625rem;
  padding-right: 12px;
  padding-right: 0.75rem;
  padding-top: 40px;
  padding-top: 2.5rem;
  position: relative;
}

@supports (color: color-mix(in lch, red, blue)) and (top: var(--f)){
.p-flow__cardPanel {
  background-color: color-mix(in srgb, var(--color-text-inverse) 15%, transparent);
}
}
@media screen and (min-width: 768px) {
  .p-flow__cardPanel {
    align-content: center;
    border-radius: 0.875rem;
    display: grid;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
    margin-top: 2.5rem;
    min-height: 246px;
    min-height: 15.375rem;
    padding-bottom: 20px;
    padding-bottom: 1.25rem;
    padding-left: 16px;
    padding-left: 1rem;
    padding-left: 13px;
    padding-left: 0.8125rem;
    padding-right: 16px;
    padding-right: 1rem;
    padding-top: 24px;
    padding-top: 1.5rem;
    place-content: center;
    width: 92.9971988796%;
  }
}

.p-flow__item--step2 .p-flow__cardPanel {
  min-height: 173px;
  min-height: 10.8125rem;
  padding-top: 34px;
  padding-top: 2.125rem;
}
@media screen and (min-width: 768px) {
  .p-flow__item--step2 .p-flow__cardPanel {
    min-height: 246px;
    min-height: 15.375rem;
    padding-top: 24px;
    padding-top: 1.5rem;
  }
}

.p-flow__cardPanel--double {
  margin-top: 45px;
  margin-top: 2.8125rem;
  padding-top: 28px;
  padding-top: 1.75rem;
}
@media screen and (min-width: 768px) {
  .p-flow__cardPanel--double {
    grid-template-columns: minmax(0, 1fr); /* トラックを内容ボックス全幅に固定（区切り線を枠まで伸ばすため。place-content:centerの横方向中央寄せによるトラック縮小を無効化） */
    margin-top: 30px;
    margin-top: 1.875rem;
    padding-top: 24px;
    padding-top: 1.5rem;
  }
}

/* トラック全幅化後もリストは従来どおり中央寄せ（見た目を維持） */
@media screen and (min-width: 768px) {
  .p-flow__cardPanel--double .p-flow__cardList {
    justify-self: center;
  }
}

.p-flow__cardBadge {
  border: 1px solid #ffffff;
  border: 1px solid var(--color-text-inverse);
  border-radius: 6.25rem;
  color: #ffffff;
  color: var(--color-text-inverse);
  font-size: max(14px, 10px);
  font-size: max(0.875rem, 10px);
  font-weight: 700;
  left: 50%;
  letter-spacing: 0.04em;
  line-height: 1;
  margin: 0;
  padding-bottom: 13px;
  padding-bottom: 0.8125rem;
  padding-top: 11px;
  padding-top: 0.6875rem;
  position: absolute;
  text-align: center;
  top: 0;
  transform: translate(-50%, -50%);
  width: min(100%, 260px);
  width: min(100%, 16.25rem);
}
@media screen and (min-width: 768px) {
  .p-flow__cardBadge {
    font-size: max(16px, 10px);
    font-size: max(1rem, 10px);
    padding-bottom: 11px;
    padding-bottom: 0.6875rem;
    padding-top: 10px;
    padding-top: 0.625rem;
  }
}

.p-flow__item--step1 .p-flow__cardBadge {
  background: linear-gradient(90deg, #0084ff 0%, #00afff 100%);
  background: var(--gradient-step-1);
}

.p-flow__item--step2 .p-flow__cardBadge {
  background: linear-gradient(90deg, #00afff 0%, #00c6ff 100%);
  background: var(--gradient-step-2);
}

.p-flow__item--step3 .p-flow__cardBadge {
  background: linear-gradient(90deg, #00c6ff 0%, #00dbde 100%);
  background: var(--gradient-step-3);
}
@media screen and (min-width: 768px) {
  .p-flow__item--step3 .p-flow__cardBadge {
    padding-bottom: 10px;
    padding-bottom: 0.625rem;
    padding-top: 9px;
    padding-top: 0.5625rem;
  }
}

.p-flow__cardList {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
}

.p-flow__cardListItem {
  color: #ffffff;
  color: var(--color-text-inverse);
  font-size: max(14px, 10px);
  font-size: max(0.875rem, 10px);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 2;
  padding-left: 1.1em;
  position: relative;
}
@media screen and (min-width: 768px) {
  .p-flow__cardListItem {
    font-size: max(16px, 10px);
    font-size: max(1rem, 10px);
  }
}

.p-flow__cardListItem::before {
  content: "・";
  left: 0;
  position: absolute;
  top: 0;
}

@media screen and (min-width: 768px) {
  .p-flow__item--step1 .p-flow__cardListItem {
    line-height: 2.5;
  }
}

@media screen and (min-width: 768px) {
  .p-flow__item--step2 .p-flow__cardListItem {
    line-height: 2.5;
  }
}

@media screen and (min-width: 768px) {
  .p-flow__item--step3 .p-flow__cardListItem {
    line-height: 1.625;
  }
}

/* step3のみ: 主な解析／主な納品物の2段構成 ------------------------------ */
.p-flow__cardPanel--double .p-flow__cardBadge + .p-flow__cardList {
  margin-top: 4px;
  margin-top: 0.25rem;
}
@media screen and (min-width: 768px) {
  .p-flow__cardPanel--double .p-flow__cardBadge + .p-flow__cardList {
    margin-top: 6px;
    margin-top: 0.375rem;
  }
}

.p-flow__cardPanel--double .p-flow__cardBadge:nth-of-type(2) + .p-flow__cardList {
  margin-top: 12px;
  margin-top: 0.75rem;
}
@media screen and (min-width: 768px) {
  .p-flow__cardPanel--double .p-flow__cardBadge:nth-of-type(2) + .p-flow__cardList {
    margin-left: -15px;
    margin-left: -0.9375rem;
    margin-top: 13px;
    margin-top: 0.8125rem;
  }
}

.p-flow__cardDivider {
  border: 0;
  border-top: 1px solid #ffffff;
  border-top: 1px solid var(--color-text-inverse);
  margin: 0;
  margin-left: -10px;
  margin-left: -0.625rem;
  margin-right: -12px;
  margin-right: -0.75rem; /* SP: パネルpadding(左10/右12)を相殺し、線端をフロストパネルの枠に接地 */
  margin-top: 30px;
  margin-top: 1.875rem;
}
@media screen and (min-width: 768px) {
  .p-flow__cardDivider {
    margin-left: -13px;
    margin-left: -0.8125rem;
    margin-right: -16px;
    margin-right: -1rem; /* PC: パネルpadding(左13/右16)を相殺 */
    margin-top: 35px;
    margin-top: 2.1875rem;
  }
}

.p-flow__cardDivider + .p-flow__cardBadge {
  margin-top: -20px;
  margin-top: -1.25rem;
  position: relative;
  top: 0;
  transform: translateX(-50%);
}
@media screen and (min-width: 768px) {
  .p-flow__cardDivider + .p-flow__cardBadge {
    margin-top: -18px;
    margin-top: -1.125rem;
  }
}

/* =========================================================
   p-footer（フッターの中身。外側の余白レイアウトは l-footer）
   ========================================================= */
.p-footer__inner {
  text-align: center;
}

/* ロゴ ------------------------------ */
.p-footer__logo {
  margin-left: auto;
  margin-right: auto;
  width: 294px;
  width: 18.375rem;
}
@media screen and (min-width: 768px) {
  .p-footer__logo {
    width: 369px;
    width: 23.0625rem;
  }
}

.p-footer__logoLink {
  display: block;
}

.p-footer__logo picture,
.p-footer__logo img {
  aspect-ratio: 294/51;
  display: block;
  height: auto;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .p-footer__logo picture,
  .p-footer__logo img {
    aspect-ratio: 369/63;
  }
}

/* 社名・住所 ------------------------------ */
.p-footer__company {
  color: #0c3c66;
  color: var(--color-text);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-family: var(--font-primary);
  font-size: max(14px, 10px);
  font-size: max(0.875rem, 10px);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 2;
  margin-top: 40px;
  margin-top: 2.5rem;
}
@media screen and (min-width: 768px) {
  .p-footer__company {
    font-size: max(16px, 10px);
    font-size: max(1rem, 10px);
    line-height: 2.25;
    margin-top: 58px;
    margin-top: 3.625rem;
  }
}

.p-footer__address {
  color: #0c3c66;
  color: var(--color-text);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-family: var(--font-primary);
  font-size: max(14px, 10px);
  font-size: max(0.875rem, 10px);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 2;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  margin-top: 0.625rem;
  max-width: 300px;
  max-width: 18.75rem;
}
@media screen and (min-width: 768px) {
  .p-footer__address {
    font-size: max(16px, 10px);
    font-size: max(1rem, 10px);
    letter-spacing: 0.02em;
    line-height: 2.125;
    margin-top: 8px;
    margin-top: 0.5rem;
    max-width: none;
  }
}

/* コピーライト帯 ------------------------------ */
.p-footer__copyright {
  background: linear-gradient(90deg, #0084ff 0%, #47d4ff 100%);
  background: var(--gradient-cta);
  margin-top: 40px;
  margin-top: 2.5rem;
  padding-bottom: 5px;
  padding-bottom: 0.3125rem;
  padding-top: 5px;
  padding-top: 0.3125rem;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .p-footer__copyright {
    margin-top: 58px;
    margin-top: 3.625rem;
  }
}

.p-footer__copyrightText {
  color: #ffffff;
  color: var(--color-text-inverse);
  font-family: "Mona Sans", "Zen Kaku Gothic New", sans-serif;
  font-family: var(--font-en);
  font-size: max(12px, 10px);
  font-size: max(0.75rem, 10px);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 2.33;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .p-footer__copyrightText {
    font-size: max(13px, 10px);
    font-size: max(0.8125rem, 10px);
    letter-spacing: 0.1em;
    line-height: 2.15;
  }
}

.p-fv {
  border-radius: 0 0 1.875rem 1.875rem;
  overflow: hidden;
  position: relative;
  z-index: 0;
}
@media screen and (min-width: 768px) {
  .p-fv {
    border-radius: 0 0 2.5rem 2.5rem;
  }
}

/* 背景イラスト ------------------------------ */
.p-fv__bg {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}

.p-fv__bg picture,
.p-fv__bg img {
  -o-object-fit: cover;
  aspect-ratio: 390/690;
  display: block;
  height: 100%;
     object-fit: cover;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .p-fv__bg picture,
  .p-fv__bg img {
    aspect-ratio: 1440/760;
  }
}

/* コンテンツ ------------------------------ */
.p-fv__inner {
  padding-bottom: 38px;
  padding-bottom: 2.375rem;
  padding-top: 99px;
  padding-top: 6.1875rem;
  position: relative;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  .p-fv__inner {
    padding-bottom: 110px;
    padding-bottom: 6.875rem;
    padding-top: 265px;
    padding-top: 16.5625rem;
  }
}

/* 見出し（h1）+ フロストバッジ ------------------------------ */
.p-fv__heading {
  margin: 0;
}

.p-fv__badgeGroup {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 12px;
  gap: 0.75rem;
}
@media screen and (min-width: 768px) {
  .p-fv__badgeGroup {
    gap: 16px;
    gap: 1rem;
  }
}

.p-fv__badge {
  -o-border-image: linear-gradient(135deg, #ffffff, rgba(255, 255, 255, 0.23)) 1;
  -o-border-image: linear-gradient(135deg, var(--color-text-inverse), rgba(255, 255, 255, 0.23)) 1;
  -webkit-backdrop-filter: blur(30px);
  align-items: center;
  backdrop-filter: blur(30px);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
  border: 2px solid transparent;
     border-image: linear-gradient(135deg, #ffffff, rgba(255, 255, 255, 0.23)) 1;
     border-image: linear-gradient(135deg, var(--color-text-inverse), rgba(255, 255, 255, 0.23)) 1;
  border-radius: 0.375rem;
  box-shadow: 50px 60px 100px rgba(0, 0, 0, 0.05);
  display: inline-flex;
  padding-bottom: 4px;
  padding-bottom: 0.25rem;
  padding-left: 12px;
  padding-left: 0.75rem;
  padding-right: 12px;
  padding-right: 0.75rem;
  padding-top: 4px;
  padding-top: 0.25rem;
}
@media screen and (min-width: 768px) {
  .p-fv__badge {
    border-radius: 0.5rem;
    padding: 18px 0 13px 20px;
    padding: 1.125rem 0 0.8125rem 1.25rem;
  }
}

.p-fv__badgeText {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(90deg, #0084ff 0%, #47d4ff 100%);
  background: var(--gradient-cta);
  background-clip: text;
  color: transparent;
  display: block;
  font-size: max(24px, 10px);
  font-size: max(1.5rem, 10px);
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.417;
  white-space: nowrap;
}
@media screen and (min-width: 768px) {
  .p-fv__badgeText {
    font-size: max(34px, 10px);
    font-size: max(2.125rem, 10px);
    letter-spacing: 0.16em;
    line-height: 1;
  }
}

/* リード文 ------------------------------ */
.p-fv__lead {
  color: #0163b8;
  color: var(--color-text-sub);
  font-size: max(14px, 10px);
  font-size: max(0.875rem, 10px);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 2.286;
  margin-top: 185px;
  margin-top: 11.5625rem;
  max-width: 280px;
  max-width: 17.5rem;
  text-align: justify;
}
@media screen and (min-width: 768px) {
  .p-fv__lead {
    font-size: max(16px, 10px);
    font-size: max(1rem, 10px);
    line-height: 2.125;
    margin-top: 25px;
    margin-top: 1.5625rem;
    max-width: 500px;
    max-width: 31.25rem;
  }
}

/* CTAボタン（見た目は.c-button共通, ここではFV内での配置のみ） ------------------------------ */
.p-fv__cta {
  margin-left: auto;
  margin-right: auto;
  margin-top: 18px;
  margin-top: 1.125rem;
}
@media screen and (min-width: 768px) {
  .p-fv__cta {
    margin-left: 0;
    margin-right: 0;
    margin-top: 41px;
    margin-top: 2.5625rem;
  }
}

/* =========================================================
   p-header（ヘッダーの中身。外枠レイアウトは l-header）
   PC: 右側フロストガラスパネル（nav + Contact）
   SP: ロゴ + ハンバーガー（開閉は l-drawer を制御）
   ========================================================= */
.p-header__inner {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: space-between;
  padding-left: 16px;
  padding-left: 1rem;
  padding-right: 10px;
  padding-right: 0.625rem;
}
@media screen and (min-width: 768px) {
  .p-header__inner {
    padding-left: 34px;
    padding-left: 2.125rem;
    padding-right: 34px;
    padding-right: 2.125rem;
  }
}

/* ロゴ ------------------------------ */
.p-header__logo {
  width: 176px;
  width: 11rem;
}
@media screen and (min-width: 768px) {
  .p-header__logo {
    width: 274px;
    width: 17.125rem;
  }
}

.p-header__logoLink {
  display: block;
}

.p-header__logo picture,
.p-header__logo img {
  aspect-ratio: 176/31;
  display: block;
  height: auto;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .p-header__logo picture,
  .p-header__logo img {
    aspect-ratio: 274/47;
  }
}

/* PC: フロストガラスnavパネル ------------------------------ */
.p-header__panel {
  display: none;
}
@media screen and (min-width: 768px) {
  .p-header__panel {
    -o-border-image: linear-gradient(135deg, #ffffff, rgba(255, 255, 255, 0.23)) 1;
    -o-border-image: linear-gradient(135deg, var(--color-text-inverse), rgba(255, 255, 255, 0.23)) 1;
    -webkit-backdrop-filter: blur(30px);
    align-items: center;
    backdrop-filter: blur(30px);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
    border: 2px solid transparent;
       border-image: linear-gradient(135deg, #ffffff, rgba(255, 255, 255, 0.23)) 1;
       border-image: linear-gradient(135deg, var(--color-text-inverse), rgba(255, 255, 255, 0.23)) 1;
    border-radius: 0.5rem;
    box-shadow: 50px 60px 100px rgba(0, 0, 0, 0.05);
    display: flex;
    height: 60px;
    height: 3.75rem;
    padding: 9px 10px 9px 4px;
    padding: 0.5625rem 0.625rem 0.5625rem 0.25rem;
  }
}

.p-header__nav {
  align-items: center;
  display: flex;
  height: 100%;
}

.p-header__navList {
  align-items: center;
  display: flex;
  height: 100%;
}

.p-header__navItem {
  height: 100%;
}

.p-header__navLink {
  align-items: center;
  color: #0c3c66;
  color: var(--color-main);
  display: flex;
  font-family: "Mona Sans", "Zen Kaku Gothic New", sans-serif;
  font-family: var(--font-en);
  font-size: max(14px, 10px);
  font-size: max(0.875rem, 10px);
  font-weight: 500;
  height: 100%;
  letter-spacing: 0.1em;
  line-height: 1;
  padding-left: 29px;
  padding-left: 1.8125rem;
  padding-right: 29px;
  padding-right: 1.8125rem;
}

.p-header__navLink:focus-visible {
  outline: 2px solid #0c3c66;
  outline: 2px solid var(--color-main);
  outline-offset: 2px;
}

.p-header__contact {
  align-items: center;
  background: linear-gradient(90deg, #0084ff 0%, #47d4ff 100%);
  background: var(--gradient-cta);
  border-radius: 0.25rem;
  color: #ffffff;
  color: var(--color-text-inverse);
  display: inline-flex;
  font-family: "Mona Sans", "Zen Kaku Gothic New", sans-serif;
  font-family: var(--font-en);
  font-size: max(14px, 10px);
  font-size: max(0.875rem, 10px);
  font-weight: 700;
  height: 42px;
  height: 2.625rem;
  justify-content: center;
  letter-spacing: 0.02em;
  line-height: 1;
  margin-left: 30px;
  margin-left: 1.875rem;
  min-width: 148px;
  min-width: 9.25rem;
  padding-left: 20px;
  padding-left: 1.25rem;
  padding-right: 20px;
  padding-right: 1.25rem;
}

.p-header__contact:focus-visible {
  outline: 2px solid #0c3c66;
  outline: 2px solid var(--color-main);
  outline-offset: 2px;
}

/* SP: ハンバーガーボタン ------------------------------ */
.p-header__toggle {
  -webkit-backdrop-filter: blur(15px);
  align-items: center;
  backdrop-filter: blur(15px);
  background: linear-gradient(113deg, rgba(255, 255, 255, 0.2) 3.51%, rgba(255, 255, 255, 0) 111.71%);
  border-radius: 0.375rem;
  box-shadow: 50px 60px 100px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 9px;
  height: 56px;
  height: 3.5rem;
  justify-content: center;
  padding: 0;
  position: relative;
  width: 89px;
  width: 5.5625rem;
}
@media screen and (min-width: 768px) {
  .p-header__toggle {
    display: none;
  }
}

/* 枠線を線形グラデ(白100%→白23%)化。角丸＋半透明＋blurのため、::afterをグラデで塗り
   maskで角丸に沿った1pxリングだけ残す（単色borderは撤去）。 */
.p-header__toggle::after {
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
  -webkit-mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000);
  -webkit-mask-clip: content-box, border-box;
  -webkit-mask-composite: xor;
  background: linear-gradient(113deg, #ffffff 0%, rgba(255, 255, 255, 0.23) 100%);
  background: linear-gradient(113deg, var(--color-text-inverse) 0%, rgba(255, 255, 255, 0.23) 100%);
  border-radius: inherit;
  bottom: 0;
  content: "";
  left: 0;
          mask-clip: content-box, border-box;
          mask-composite: exclude;
          mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000);
  padding: 1px;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
}

.p-header__toggle:focus-visible {
  outline: 2px solid #0c3c66;
  outline: 2px solid var(--color-main);
  outline-offset: 2px;
}

.p-header__toggleLine {
  background-color: #0099ff;
  background-color: var(--color-line);
  display: block;
  height: 2px;
  transition: transform 0.3s, opacity 0.3s;
  width: 41px;
  width: 2.5625rem;
}

/* 開いた状態：デザインは中央1本の横線（×ではない） */
.p-header__toggle[aria-expanded=true] .p-header__toggleLine:nth-child(1),
.p-header__toggle[aria-expanded=true] .p-header__toggleLine:nth-child(3) {
  opacity: 0;
}

.p-header__toggle[aria-expanded=true] .p-header__toggleLine:nth-child(2) {
  opacity: 1;
}

.p-order {
  background-color: #ffffff;
  background-color: var(--color-bg);
  padding-bottom: 60px;
  padding-bottom: 3.75rem;
  padding-top: 97px;
  padding-top: 6.0625rem;
}
@media screen and (min-width: 768px) {
  .p-order {
    padding-bottom: 80px;
    padding-bottom: 5rem;
    padding-top: 180px;
    padding-top: 11.25rem;
  }
}

/* ラベル + 見出し（about/service/flowと同一コンポーネント） ------------------------------ */
.p-order__label {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(90deg, #0084ff 0%, #47d4ff 100%);
  background: var(--gradient-cta);
  background-clip: text;
  color: transparent;
  font-family: "Mona Sans", "Zen Kaku Gothic New", sans-serif;
  font-family: var(--font-en);
  font-size: max(14px, 10px);
  font-size: max(0.875rem, 10px);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 2.286;
  margin: 0;
  width: -moz-fit-content;
  width: fit-content; /* グラデ文字: テキスト幅に合わせる */
}
@media screen and (min-width: 768px) {
  .p-order__label {
    font-size: max(24px, 10px);
    font-size: max(1.5rem, 10px);
    line-height: 2.083;
  }
}

.p-order__label::after {
  background-color: #e8eff4;
  background-color: var(--color-border);
  content: "";
  display: block;
  height: 2px;
  margin-top: 2px;
  margin-top: 0.125rem;
  width: 30px;
  width: 1.875rem;
}

.p-order__heading {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(90deg, #0084ff 0%, #47d4ff 100%);
  background: var(--gradient-cta);
  background-clip: text;
  color: transparent;
  font-size: max(26px, 10px);
  font-size: max(1.625rem, 10px);
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1.615;
  margin: 0;
  margin-top: 12px;
  margin-top: 0.75rem;
  width: -moz-fit-content;
  width: fit-content; /* グラデ文字: テキスト幅に合わせる */
}
@media screen and (min-width: 768px) {
  .p-order__heading {
    font-size: max(40px, 10px);
    font-size: max(2.5rem, 10px);
    line-height: 1.25;
    margin-top: 16px;
    margin-top: 1rem;
  }
}

/* フロー図（画像） ------------------------------ */
.p-order__figure {
  margin-top: 24px;
  margin-top: 1.5rem;
}
@media screen and (min-width: 768px) {
  .p-order__figure {
    margin-top: 50px;
    margin-top: 3.125rem;
  }
}

.p-order__figure picture,
.p-order__figure img {
  aspect-ratio: 350/802;
  display: block;
  height: auto;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .p-order__figure picture,
  .p-order__figure img {
    aspect-ratio: 1200/1201;
  }
}

/* 背景の三角テクスチャ（Figma bg_ob-02 / 不透明度30%は画像に焼き込み済み・単色地#e8eff4込みの合成画像）。
   水色ブロックは .p-service（上・角丸上）＋ .p-flow（下・角丸下）の2セクションで1枚。
   デザインは上端から密・中間が疎・下部が密の配置。上側の .p-service は上寄せで上端の密パターンを見せ、
   下側の .p-flow は下寄せで下部の密パターンを見せる（中間の疎な部分で継ぎ目が目立たない）。
   模様の配置がPC/SPで異なるため背景画像を出し分ける。背景は角丸で自動クリップされる。 */
.p-service {
  background-color: #e8eff4;
  background-color: var(--color-bg-sub);
  background-image: url("../images/service/service-bg-sp.png?2026-09-30");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% auto;
  border-radius: 1.875rem 1.875rem 0 0;
  padding-top: 98px;
  padding-top: 6.125rem;
}
@media screen and (min-width: 768px) {
  .p-service {
    background-image: url("../images/service/service-bg-pc.png?2026-09-30");
    border-radius: 2.5rem 2.5rem 0 0;
    padding-top: 100px;
    padding-top: 6.25rem;
  }
}

/* ラベル + 見出し（aboutの型と同一。下線色のみ白: グレー地の上に乗るため） ------------------------------ */
.p-service__label {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(90deg, #0084ff 0%, #47d4ff 100%);
  background: var(--gradient-cta);
  background-clip: text;
  color: transparent;
  font-family: "Mona Sans", "Zen Kaku Gothic New", sans-serif;
  font-family: var(--font-en);
  font-size: max(14px, 10px);
  font-size: max(0.875rem, 10px);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 2.286;
  margin: 0;
  width: -moz-fit-content;
  width: fit-content; /* グラデ文字: テキスト幅に合わせる */
}
@media screen and (min-width: 768px) {
  .p-service__label {
    font-size: max(24px, 10px);
    font-size: max(1.5rem, 10px);
    line-height: 2.083;
  }
}

.p-service__label::after {
  background-color: #ffffff;
  background-color: var(--color-text-inverse);
  content: "";
  display: block;
  height: 2px;
  margin-top: 2px;
  margin-top: 0.125rem;
  width: 30px;
  width: 1.875rem;
}

.p-service__heading {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(90deg, #0084ff 0%, #47d4ff 100%);
  background: var(--gradient-cta);
  background-clip: text;
  color: transparent;
  font-size: max(26px, 10px);
  font-size: max(1.625rem, 10px);
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1.615;
  margin: 0;
  margin-top: 12px;
  margin-top: 0.75rem;
  width: -moz-fit-content;
  width: fit-content; /* グラデ文字: テキスト幅に合わせる */
}
@media screen and (min-width: 768px) {
  .p-service__heading {
    font-size: max(40px, 10px);
    font-size: max(2.5rem, 10px);
    line-height: 1.25;
    margin-top: 16px;
    margin-top: 1rem;
  }
}

/* 仕様スペック表 ------------------------------
   HTMLはtable/tbody/tr/th/tdのまま固定し、displayのみ切り替える
   （SP: 縦積みの2段カード / PC: 2列の通常テーブル。構造は1つ・css.md準拠） */
.p-service__table {
  border-collapse: collapse;
  border-radius: 0.25rem;
  margin-top: 24px;
  margin-top: 1.5rem;
  overflow: hidden; /* 角丸クリップ（gradient th の角は自動的にクリップされる） */
  width: 100%;
}
@media screen and (min-width: 768px) {
  .p-service__table {
    margin-top: 60px;
    margin-top: 3.75rem;
  }
}

.p-service__table,
.p-service__table tbody {
  display: block;
}

.p-service__row {
  display: block;
  margin-top: 2px;
  margin-top: 0.125rem; /* SP: 行間の隙間からセクション地色が覗く実測値 */
}

.p-service__row:first-child {
  margin-top: 0;
}

@media screen and (min-width: 768px) {
  .p-service__table,
  .p-service__table tbody {
    display: table;
  }
  .p-service__table tbody {
    display: table-row-group;
  }
  .p-service__row {
    border-bottom: 1px solid #e8eff4;
    border-bottom: 1px solid var(--color-border);
    display: table-row;
    margin-top: 0;
  }
  .p-service__row:last-child {
    border-bottom: 0;
  }
}
.p-service__th {
  background: linear-gradient(90deg, #0084ff 0%, #47d4ff 100%);
  background: var(--gradient-cta);
  color: #ffffff;
  color: var(--color-text-inverse);
  display: block;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-family: var(--font-primary);
  font-size: max(14px, 10px);
  font-size: max(0.875rem, 10px);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 2;
  margin: 0;
  padding-bottom: 5px;
  padding-bottom: 0.3125rem;
  padding-left: 14px;
  padding-left: 0.875rem;
  padding-right: 14px;
  padding-right: 0.875rem;
  padding-top: 5px;
  padding-top: 0.3125rem;
  text-align: left;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .p-service__th {
    display: table-cell;
    font-size: max(16px, 10px);
    font-size: max(1rem, 10px);
    letter-spacing: 0.05em;
    line-height: 1.25;
    min-width: 280px;
    min-width: 17.5rem; /* auto table-layoutでth列を280pxに固定（td内容が長くても圧縮されない） */
    padding: 12px 18px 17px 2px;
    padding: 0.75rem 1.125rem 1.0625rem 0.125rem;
    text-align: center;
    vertical-align: middle;
    width: 280px;
    width: 17.5rem;
  }
}

.p-service__td {
  background-color: #ffffff;
  background-color: var(--color-bg);
  color: #0c3c66;
  color: var(--color-text);
  display: block;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-family: var(--font-primary);
  font-size: max(14px, 10px);
  font-size: max(0.875rem, 10px);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 2;
  padding: 16px 14px;
  padding: 1rem 0.875rem;
  text-align: left;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .p-service__td {
    display: table-cell;
    font-size: max(16px, 10px);
    font-size: max(1rem, 10px);
    letter-spacing: 0.02em;
    line-height: 2.125;
    padding: 12px 24px 17px;
    padding: 0.75rem 1.5rem 1.0625rem;
    vertical-align: middle;
  }
}

/* アクセシビリティ用キャプション（視覚的には非表示） */
.p-service__caption {
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* 注記 ------------------------------ */
.p-service__note {
  color: #0c3c66;
  color: var(--color-text);
  font-size: max(12px, 10px);
  font-size: max(0.75rem, 10px);
  font-weight: 300;
  letter-spacing: 0.02em;
  line-height: 1.833;
  margin: 0;
  margin-top: 12px;
  margin-top: 0.75rem;
}
@media screen and (min-width: 768px) {
  .p-service__note {
    font-size: max(14px, 10px);
    font-size: max(0.875rem, 10px);
    letter-spacing: 0.04em;
    line-height: 2.571;
    margin-top: 12px;
    margin-top: 0.75rem;
  }
}

.u-pc {
  display: none;
}
@media screen and (min-width: 768px) {
  .u-pc {
    display: block;
  }
}

@media screen and (min-width: 768px) {
  .u-sp {
    display: none;
  }
}
/*# sourceMappingURL=style.css.map */