/* ═══════════════════════════════════════════
   RELATION LAB — styles.css
   ═══════════════════════════════════════════ */

:root {
  /* ── Brand palette ── */
  --navy:        #123B73;  /* 濃いネイビー：見出し・濃色背景・信頼感 */
  --blue:        #0865C6;  /* プライマリーブルー：CTA・リンク・数字・アイコン */
  --blue-dark:   #054F9B;  /* CTAホバー */
  --blue-deep:   #0a2f66;  /* 【今回範囲外】料金グラデ・フッター：既存値を据え置き */
  --blue-tint:   #EAF4FC;  /* 明るいブルー：セクション/カード背景 */
  --line:        #06C755;  /* LINE専用グリーン（他用途で使わない） */
  --line-dark:   #05a648;
  --orange:      #F28C28;  /* アクセント：料金・注目・ラベルに限定 */
  --text:        #26384A;  /* 本文 */
  --text-sub:    #64748B;  /* 補助文字 */
  --bg:          #FFFFFF;
  --bg-soft:     #F5F8FA;  /* 薄いグレー */
  --border:      #E2E8F0;

  /* ── 3本柱アクセント ── */
  --pillar-1:    #0865C6;  /* 集客・販促支援 */
  --pillar-2:    #6F42C1;  /* 採用・人材支援 */
  --pillar-3:    #1F8A5B;  /* 地域・暮らし支援 */

  /* ── Elevation ── */
  --shadow:      0 8px 24px rgba(18, 59, 115, .08);
  --shadow-hover:0 14px 32px rgba(18, 59, 115, .14);
  --shadow-sm:   0 4px 14px rgba(18, 59, 115, .06);

  /* ── Shape / Layout ── */
  --radius:      16px;
  --radius-sm:   12px;
  --maxw:        1200px;
  --gutter:      32px;   /* PC左右余白 */
  --sec-pad:     88px;   /* PCセクション上下余白 */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; }

body {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
               "Yu Gothic", "YuGothic", "BIZ UDPGothic", Meiryo, sans-serif;
  color: var(--text);
  background: var(--bg);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ── アクセシビリティ：フォーカス可視化 ── */
:focus-visible {
  outline: 3px solid rgba(8, 101, 198, .35);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── アニメーション抑制の尊重 ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

.hl { color: var(--blue); }
.hl-orange { color: var(--orange); }
.pc { display: inline; }

/* ── セクション共通の上下余白 ── */
.section { padding-top: var(--sec-pad); padding-bottom: var(--sec-pad); }

/* ── タイポグラフィ階層 ──
   PC: H1 48 / H2 36 / H3 24 / 本文 16 / 補助 14 */
h1, .h1 { font-size: 48px; line-height: 1.35; font-weight: 700; letter-spacing: .02em; color: var(--navy); }
h2, .h2 { font-size: 36px; line-height: 1.4;  font-weight: 700; letter-spacing: .02em; color: var(--navy); }
h3, .h3 { font-size: 24px; line-height: 1.5;  font-weight: 700; color: var(--navy); }
small, .text-sm { font-size: 14px; line-height: 1.8; }

/* ── Section titles ── */
.sec-title {
  text-align: center;
  font-size: 36px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--navy);
  margin-bottom: 1rem;
}
.sec-title--left { text-align: left; }
.sec-title--light { color: #fff; }

/* セクション補助文（見出し直下のリード文） */
.sec-lead {
  text-align: center;
  font-size: 16px;
  line-height: 1.9;
  color: var(--text-sub);
  max-width: 760px;
  margin: 0 auto 2.6rem;
}
.sec-lead--light { color: rgba(255,255,255,.9); }

.eyebrow {
  font-size: .82rem; font-weight: 700; letter-spacing: .18em;
  color: var(--blue); margin-bottom: .6rem;
}

.ribbon {
  text-align: center; color: var(--blue); font-weight: 700;
  letter-spacing: .05em; margin-bottom: .5rem; font-size: 1rem;
}

/* ═══════════ BUTTONS ═══════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  font-size: 16px; font-weight: 700; line-height: 1.3; text-align: center;
  border-radius: 999px; cursor: pointer; border: none;
  min-height: 54px; padding: 0 30px;
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn__arrow { font-size: 1.1em; transition: transform .25s ease; }
.btn:hover .btn__arrow { transform: translateX(3px); }
/* 最終CTA用（56px） */
.btn--lg { min-height: 56px; padding: 0 32px; }

.btn--primary { background: var(--blue); color: #fff; box-shadow: var(--shadow); }
.btn--primary:hover { background: var(--blue-dark); box-shadow: var(--shadow-hover); }

.btn--white { background: #fff; color: var(--blue); box-shadow: var(--shadow-sm); }
.btn--white:hover { background: #f2f8ff; box-shadow: var(--shadow-hover); }

/* ヘッダー内CTA（46px） */
.btn--nav { background: var(--blue); color: #fff; min-height: 46px; padding: 0 24px; font-size: 14px; }
.btn--nav:hover { background: var(--blue-dark); }

.btn--line { background: var(--line); color: #fff; padding: 0 28px; box-shadow: 0 8px 24px rgba(6,199,85,.20); }
.btn--line:hover { background: var(--line-dark); box-shadow: 0 14px 32px rgba(6,199,85,.28); }
.btn__line-ico {
  background: #fff; color: var(--line); font-weight: 800; font-size: .72rem;
  padding: .28em .5em; border-radius: 8px; letter-spacing: .02em;
}
.btn__line-txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; }
.btn__line-txt small { font-size: .72rem; font-weight: 500; opacity: .92; }

/* ═══════════ HEADER ═══════════ */
.header {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.header__inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter);
  height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.logo { display: flex; flex-direction: column; line-height: 1.1; }
.logo__name {
  font-weight: 800; font-size: 1.32rem; letter-spacing: .06em;
  color: var(--text); position: relative;
}
.logo__name::after {
  content: ""; position: absolute; top: .05em; right: -.5em;
  width: .28em; height: .28em; border-radius: 50%; background: var(--blue);
}
.logo__sub { font-size: .66rem; letter-spacing: .28em; color: var(--text-sub); margin-top: 2px; }

.gnav__list { display: flex; align-items: center; gap: 26px; }
.gnav__list a { font-size: 14px; font-weight: 600; transition: color .25s; }
/* 文字色はCTA以外に限定（CTAボタンは .btn--nav の白を優先） */
.gnav__list li:not(.gnav__cta) a { color: var(--text); }
.gnav__list li:not(.gnav__cta) a:hover { color: var(--blue); }
/* スマホメニュー内の連絡導線（PCでは非表示） */
.gnav__contact { display: none; }

.hamburger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; background: none; border: none; cursor: pointer;
}
.hamburger span {
  display: block; width: 26px; height: 2px; background: var(--text);
  transition: transform .25s ease, opacity .25s ease;
}
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ═══════════ HERO ═══════════ */
.hero { padding: 64px 0; background: var(--bg); }
.hero__inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter);
  min-height: 650px;
  display: grid; grid-template-columns: 52% 48%; gap: 40px; align-items: end;
}
/* 小見出しバッジ */
.hero__badge {
  display: inline-block; font-size: 14px; font-weight: 700; color: var(--blue);
  background: var(--blue-tint); border-radius: 999px; padding: 8px 14px;
  margin-bottom: 20px; line-height: 1.5;
}
.hero__title {
  font-size: 48px; font-weight: 700; line-height: 1.35;
  letter-spacing: .02em; color: var(--navy); margin-bottom: 20px;
}
.hero__title .hl { position: relative; padding: 0 .05em; color: var(--blue); }
.hero__title .hl::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .06em; height: .32em;
  background: rgba(8,101,198,.14); z-index: -1;
}
.hero__text { color: var(--text); font-size: 16px; line-height: 1.9; max-width: 600px; margin-bottom: 24px; }

/* 3つの特徴チェック */
.hero__points { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-bottom: 28px; }
.hero__points li {
  position: relative; padding-left: 26px; font-size: 14px; font-weight: 600; color: var(--text);
}
.hero__points li::before {
  content: ""; position: absolute; left: 0; top: .35em;
  width: 18px; height: 18px; border-radius: 50%; background: var(--blue-tint);
}
.hero__points li::after {
  content: ""; position: absolute; left: 6px; top: .6em;
  width: 5px; height: 9px; border: solid var(--blue); border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__note { font-size: 14px; color: var(--text-sub); margin-top: 12px; }

/* ── 飲食店向け 資料DLバナー ── */
.dl-banner {
  display: flex; align-items: stretch; margin-top: 24px;
  background: #fff; border: 1px solid #e4ebf3; border-radius: 16px; overflow: hidden;
  box-shadow: 0 14px 34px rgba(18,59,115,.12);
}
.dl-banner__figure {
  position: relative; flex: 0 0 138px;
  background: var(--navy);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.dl-banner__figure::after {
  content: ""; position: absolute; right: -14px; top: 0; bottom: 0; width: 28px;
  background: var(--navy); transform: skewX(-7deg);
}
.dl-banner__free {
  position: absolute; top: 12px; left: 12px; z-index: 1;
  background: var(--orange); color: #fff; font-size: 13px; font-weight: 700;
  padding: 3px 12px; border-radius: 999px; letter-spacing: .04em;
}
.dl-banner__illust { position: relative; z-index: 1; width: 100%; height: auto; }
.dl-banner__main { flex: 1 1 auto; padding: 22px 24px; }
.dl-banner__label {
  display: inline-block; margin-bottom: 12px; padding: 5px 14px;
  background: var(--blue-tint); color: var(--navy);
  font-size: 14px; font-weight: 700; border-radius: 999px;
}
.dl-banner__title { color: var(--navy); font-size: 24px; font-weight: 700; line-height: 1.45; margin: 0 0 10px; }
.dl-banner__text { color: var(--text); font-size: 15px; line-height: 1.85; margin: 0 0 18px; }
.dl-banner__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.dl-banner__btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 26px; border-radius: 11px;
  background: var(--orange); color: #fff;
  font-size: 17px; font-weight: 700; text-decoration: none;
  box-shadow: 0 8px 18px rgba(242,140,40,.35);
  transition: background .2s, transform .1s;
}
.dl-banner__btn svg { width: 20px; height: 20px; }
.dl-banner__btn:hover { background: #e07d1a; }
.dl-banner__btn:active { transform: scale(.98); }
.dl-banner__sub { color: var(--blue); font-size: 15px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.dl-banner__sub:hover { color: var(--navy); }
@media (max-width: 640px) {
  .dl-banner { flex-direction: column; }
  .dl-banner__figure { flex-basis: auto; flex-direction: row; gap: 12px; padding: 14px; }
  .dl-banner__figure::after { display: none; }
  .dl-banner__free { position: static; }
  .dl-banner__illust { width: 84px; }
  .dl-banner__title { font-size: 21px; }
  .dl-banner__btn { width: 100%; justify-content: center; }
  .dl-banner__actions { gap: 12px; }
}

.hero__gallery {
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto;
  gap: 12px; grid-template-areas: "main main" "b c" "d c";
}
.hero__pic { border-radius: 14px; overflow: hidden; box-shadow: 0 12px 30px rgba(18,59,115,.12); }
.hero__pic img { width: 100%; height: 100%; object-fit: cover; }
.hero__pic--main { grid-area: main; aspect-ratio: 16 / 9; border-radius: 20px; }
/* 人物が切れないよう個別調整 */
.hero__pic--main img { object-position: center 30%; }
.hero__gallery .hero__pic:nth-child(2) img { object-position: center 35%; }
.hero__gallery .hero__pic:nth-child(3) img { object-position: center 25%; }
.hero__gallery .hero__pic:nth-child(4) img { object-position: center 40%; }
.hero__gallery .hero__pic:nth-child(2) { grid-area: b; aspect-ratio: 4/3; }
.hero__gallery .hero__pic:nth-child(3) { grid-area: c; aspect-ratio: 3/4; }
.hero__gallery .hero__pic:nth-child(4) { grid-area: d; aspect-ratio: 4/3; }

/* ═══════════ 信頼情報の帯（FV直下） ═══════════ */
.trust { background: #fff; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.trust__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  min-height: 100px; align-items: center; padding: 18px 0;
}
.trust__item { text-align: center; }
.trust__ico { width: 32px; height: 32px; margin: 0 auto 8px; color: var(--blue); display: block; }
.trust__label { font-size: 16px; font-weight: 700; color: var(--navy); line-height: 1.5; }
.trust__sub { font-size: 14px; color: var(--text-sub); line-height: 1.6; margin-top: 2px; }

/* ═══════════ 3本柱 ═══════════ */
.pillars { background: var(--bg-soft); }
.pillars__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.pillar {
  --accent: var(--blue);
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
  display: flex; flex-direction: column; min-height: 540px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.pillar:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.pillar__bar { height: 6px; background: var(--accent); }
.pillar__body { padding: 28px; display: flex; flex-direction: column; flex: 1; }
.pillar__ico { width: 54px; height: 54px; color: var(--accent); margin-bottom: 14px; display: block; }
.pillar__ttl { font-size: 24px; font-weight: 700; color: var(--navy); margin-bottom: 10px; line-height: 1.5; }
.pillar__desc { font-size: 16px; line-height: 1.9; color: var(--text); margin-bottom: 18px; }
.pillar__list { display: grid; gap: 10px; margin-bottom: 20px; }
.pillar__list li { position: relative; padding-left: 20px; font-size: 16px; line-height: 1.7; }
.pillar__list li::before {
  content: ""; position: absolute; left: 0; top: .6em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}
/* 代表サービスへの詳細リンク（カード下部） */
.pillar__link {
  margin-top: auto; font-size: 16px; font-weight: 700; color: var(--accent);
  display: inline-flex; align-items: center; gap: .35em;
}
.pillar__link:hover { text-decoration: underline; }
.pillar__link .btn__arrow { font-size: 1.1em; }
.pillar--1 { --accent: var(--pillar-1); }
.pillar--2 { --accent: var(--pillar-2); }
.pillar--3 { --accent: var(--pillar-3); }

/* ═══════════ Before / After ═══════════ */
.ba { background: #fff; }
.ba__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ba__card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 28px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.ba__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.ba__label { font-size: 13px; font-weight: 700; letter-spacing: .08em; margin-bottom: 6px; }
.ba__before .ba__label { color: var(--text-sub); }
.ba__before p { font-size: 15px; line-height: 1.8; color: var(--text-sub); }
.ba__arrow { text-align: center; color: var(--blue); font-size: 20px; line-height: 1; margin: 14px 0; }
.ba__after { background: var(--blue-tint); border-radius: var(--radius-sm); padding: 18px 20px; }
.ba__after .ba__label { color: var(--blue); }
.ba__after p { font-size: 15px; line-height: 1.8; color: var(--navy); font-weight: 600; }

/* ═══════════ 中間CTA ═══════════ */
.midcta__box {
  background: var(--blue-tint); border-radius: 24px; padding: 36px 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
}
.midcta__lead { flex: 1 1 420px; }
.midcta__ttl { font-size: 24px; font-weight: 700; color: var(--navy); margin-bottom: 8px; line-height: 1.5; }
.midcta__txt { font-size: 16px; color: var(--text); line-height: 1.9; }
.midcta__btns { display: flex; gap: 12px; flex-wrap: wrap; }

/* ═══════════ 何でも屋 ═══════════ */
.nandemo { padding: clamp(3rem, 7vw, 5.5rem) 0; background: var(--bg-soft); }
.nandemo__grid {
  display: flex; flex-wrap: wrap; gap: 18px; justify-content: center;
}
.ncard {
  flex: 0 1 calc((100% - 54px) / 4);
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.7rem 1.1rem; text-align: center; transition: transform .2s, box-shadow .2s;
}
.ncard:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.ncard__ico { display: block; width: 56px; height: 56px; margin: 0 auto .9rem; object-fit: contain;
  /* ティール色の元アイコンを青系へ色相回転して統一 */
  filter: hue-rotate(40deg) saturate(1.15); }
/* インラインSVGアイコン（元から青のため色相回転はかけない） */
.ncard__ico--svg { filter: none; color: var(--blue); }
.ncard h3 { font-size: 1.02rem; font-weight: 700; margin-bottom: .5rem; }
.ncard p { font-size: .83rem; color: var(--text-sub); line-height: 1.7; }

/* ═══════════ 私たちについて ═══════════ */
.about { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.about__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.about__title { font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 800; line-height: 1.5; margin-bottom: 1.2rem; }
.about__text { color: var(--text-sub); margin-bottom: 1.6rem; }
.checklist { display: grid; gap: .8rem; }
.checklist li { position: relative; padding-left: 2rem; font-weight: 600; }
.checklist li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  width: 1.4rem; height: 1.4rem; background: var(--blue); color: #fff;
  border-radius: 50%; display: grid; place-items: center; font-size: .8rem; font-weight: 800;
}

/* orbit diagram */
.about__diagram { display: grid; place-items: center; }
.orbit {
  position: relative; width: min(100%, 440px); aspect-ratio: 1; margin: 0 auto;
}
.orbit__nodes { display: contents; }
.orbit__core {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 45%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, var(--blue), var(--blue-dark));
  color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; box-shadow: 0 14px 40px rgba(20,97,194,.35); padding: 1rem;
}
.orbit__brand { font-size: .82rem; font-weight: 800; letter-spacing: .06em; margin-bottom: .3rem; }
.orbit__cross { font-size: .82rem; font-weight: 700; line-height: 1.5; }
.orbit__node {
  position: absolute; background: #fff; border: 1px solid var(--border);
  box-shadow: var(--shadow-sm); border-radius: 999px; padding: .5em 1em;
  font-size: .82rem; font-weight: 700; white-space: nowrap;
}
.orbit__node--tl { top: 4%;  left: -4%; }
.orbit__node--tr { top: 4%;  right: -4%; }
.orbit__node--ml { top: 46%; left: -12%; transform: translateY(-50%); }
.orbit__node--mr { top: 46%; right: -12%; transform: translateY(-50%); }
.orbit__node--bl { bottom: 4%; left: -4%; }
.orbit__node--br { bottom: 4%; right: -4%; }

/* ═══════════ お困りごと ═══════════ */
.trouble { padding: clamp(3rem, 7vw, 5.5rem) 0; background: var(--bg-soft); }
.trouble__grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
.tcard { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 1.6rem; box-shadow: var(--shadow-sm); }
.tcard__head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.tcard__head img { width: 64px; height: 64px; object-fit: contain; flex: none; }
.tcard__head h3 { font-size: 1.2rem; font-weight: 800; }
.tcard__list { display: grid; gap: .6rem; }
.tcard__list li { position: relative; padding-left: 1.7rem; font-size: 16px; line-height: 1.7; }
.tcard__list li::before {
  content: "✓"; position: absolute; left: 0; top: .1em; color: var(--blue); font-weight: 800;
}
.tcard--note { background: linear-gradient(160deg, var(--blue), var(--blue-dark)); color: #fff; border: none; }
.tcard__note-head { font-weight: 800; font-size: 1.05rem; margin-bottom: .8rem; }
.tcard__note-body { font-size: .92rem; opacity: .95; margin-bottom: 1.1rem; }
.tcard__note-img { border-radius: 10px; width: 100%; aspect-ratio: 16/9; object-fit: cover; }

/* ═══════════ サービスメニュー ═══════════ */
.menu { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.menu__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.mcol { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.mcol__head { background: var(--blue); color: #fff; font-size: 1.02rem; font-weight: 700; padding: 1rem 1.2rem; text-align: center; }
.mcol__list { padding: 1.3rem 1.4rem; display: grid; gap: .9rem; flex: 1; }
.mcol__list li { display: flex; flex-direction: column; padding-left: 1.5rem; position: relative; }
.mcol__list li::before { content: ""; position: absolute; left: 0; top: .55em; width: .7rem; height: .7rem; border-radius: 3px; background: var(--blue-tint); border: 2px solid var(--blue); }
.mcol__list b { font-weight: 700; font-size: .96rem; }
.mcol__list small { color: var(--text-sub); font-size: .78rem; }
.mcol__pic { margin-top: auto; }
.mcol__pic img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.menu__note { text-align: center; color: var(--text-sub); font-size: .88rem; margin-top: 1.4rem; }

/* ═══════════ ご利用の流れ ═══════════ */
.flow { padding: clamp(3rem, 7vw, 5.5rem) 0; background: var(--bg-soft); }
.flow__list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.fstep { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem 1rem; text-align: center; position: relative; }
.fstep__num { display: inline-block; font-size: 1.5rem; font-weight: 800; color: var(--blue); letter-spacing: .05em; margin-bottom: .5rem; }
.fstep h3 { font-size: .96rem; font-weight: 700; margin-bottom: .5rem; }
.fstep p { font-size: .8rem; color: var(--text-sub); line-height: 1.6; }
.fstep:not(:last-child)::after {
  content: "›"; position: absolute; right: -11px; top: 50%; transform: translateY(-50%);
  font-size: 1.6rem; color: var(--blue); font-weight: 700; z-index: 1;
}

/* ═══════════ 料金プラン ═══════════ */
.pricing { padding: clamp(3.5rem, 8vw, 6rem) 0; background: linear-gradient(160deg, var(--blue), var(--blue-deep)); color: #fff; }
/* 対象サービス名（何の料金かを大きく明示） */
.pricing__target { text-align: center; font-size: clamp(1.3rem, 3.4vw, 1.9rem); font-weight: 800; color: #fff; margin-bottom: .5rem; line-height: 1.5; }
.pricing__target .pricing__target-sub { display: block; font-size: 15px; font-weight: 600; color: rgba(255,255,255,.85); margin-top: .3rem; }
.pricing__catch { text-align: center; font-size: clamp(1.1rem, 3vw, 1.5rem); font-weight: 800; margin-bottom: 2rem; }
.pricing__catch .hl-orange { background: #fff; padding: .1em .4em; border-radius: 8px; }
.price-card { max-width: 620px; margin: 0 auto; background: #fff; color: var(--text); border-radius: 20px; padding: 2rem clamp(1.2rem, 4vw, 2.5rem); box-shadow: 0 20px 50px rgba(0,0,0,.2); }
.price-card__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.price-card__label { background: var(--bg-soft); color: var(--text-sub); font-weight: 700; padding: .4em 1em; border-radius: 999px; font-size: .9rem; }
.price-card__label--now { background: var(--orange); color: #fff; }
.price-card__val { font-weight: 700; font-size: 1.1rem; }
.price-card__val .num { font-size: 2rem; font-weight: 900; color: var(--text-sub); }
.price-card__val small { display: block; font-size: 14px; color: var(--text-sub); font-weight: 500; }
.price-card__val--old { color: var(--text-sub); text-decoration: line-through; text-decoration-color: rgba(107,118,132,.5); }
.price-card__val--old small { text-decoration: none; }
.price-card__val--now .num { color: var(--orange); font-size: 2.8rem; }
.price-card__val--now { color: var(--text); }
.price-card__arrow { text-align: center; color: var(--orange); font-size: 1.4rem; margin: .6rem 0; }
.pricing__notes { max-width: 620px; margin: 1.4rem auto 0; display: grid; gap: .4rem; }
.pricing__notes li { font-size: 14px; opacity: .95; line-height: 1.7; }
.pricing__cta { text-align: center; margin-top: 2rem; }
.pricing .btn--primary { background: #fff; color: var(--blue); }
.pricing .btn--primary:hover { background: #f2fbfa; }

/* ═══════════ 実績 ═══════════ */
.works { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.works__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.works__list { display: grid; gap: 1rem; }
.works__list li { position: relative; padding-left: 1.9rem; font-weight: 600; font-size: 1.02rem; }
.works__list li::before { content: "✓"; position: absolute; left: 0; top: .05em; width: 1.4rem; height: 1.4rem; background: var(--blue); color: #fff; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; }
.works__pic { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.works__pic img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }

/* ═══════════ お客様の声 ═══════════ */
.voice { padding: clamp(3.5rem, 8vw, 6rem) 0; background: var(--bg-soft); }
.voice__viewport { overflow: hidden; }
.voice__track { display: flex; transition: transform .45s ease; }
.vcard { flex: 0 0 calc((100% - 3rem) / 3); margin-right: 1.5rem; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 1.8rem; box-shadow: var(--shadow-sm); }
.vcard:last-child { margin-right: 0; }
.vcard__text { font-size: 16px; line-height: 1.9; margin-bottom: 1rem; }
.vcard__name { font-size: 14px; font-weight: 700; color: var(--blue); }
.voice__dots { display: none; justify-content: center; gap: .6rem; margin-top: 1.5rem; }
.voice__dots button { width: 10px; height: 10px; border-radius: 50%; border: none; background: #cdd8d6; cursor: pointer; padding: 0; }
.voice__dots button[aria-selected="true"] { background: var(--blue); }

/* ═══════════ 最終CTA ═══════════ */
.cta { padding: clamp(3rem, 7vw, 5rem) 0; background: linear-gradient(135deg, var(--blue), var(--blue-dark)); color: #fff; }
.cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.cta__title { font-size: clamp(1.5rem, 3.6vw, 2.1rem); font-weight: 800; margin-bottom: .5rem; }
.cta__text { opacity: .95; }
.cta__btns { display: flex; gap: 1rem; flex-wrap: wrap; }

/* ═══════════ FUNNEL（ご相談のきっかけ→解決提案） ═══════════ */
.funnel { padding: clamp(3rem, 7vw, 5.5rem) 0; background: #fff; }
.container--wide { max-width: 1320px; }
.funnel__title { text-align: center; font-size: clamp(1.3rem, 3.4vw, 2.05rem); font-weight: 800; line-height: 1.5; margin-bottom: 2.4rem; }
.funnel__deco { color: var(--blue); font-weight: 700; }
.funnel__grid { display: grid; grid-template-columns: 4fr 1fr; gap: 14px; align-items: start; }
.funnel__main { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }

.fcard { --accent: var(--blue); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; background: #fff; box-shadow: var(--shadow-sm); }
.fcard__head { background: var(--accent); color: #fff; font-weight: 700; font-size: .88rem; text-align: center; padding: .85rem .6rem; line-height: 1.45; }
.fcard__body { padding: 1rem .8rem; display: flex; flex-direction: column; flex: 1; }
.fitem { text-align: center; padding: .3rem 0; }
.fitem__ico { width: 46px; height: 46px; margin: 0 auto .4rem; color: var(--accent); display: block; }
.fitem__ttl { font-weight: 700; font-size: .9rem; color: var(--accent); margin-bottom: .3rem; line-height: 1.35; }
.fitem__desc { font-size: .77rem; color: var(--text); line-height: 1.65; }
.farrow { display: block; text-align: center; color: var(--accent); font-size: 1.15rem; line-height: 1; margin: .35rem 0; }
.fcard__note { margin-top: auto; background: var(--accent); color: #fff; font-size: .75rem; line-height: 1.55; padding: .7rem .8rem; text-align: center; }

/* 【今回範囲外】ファネル5列：既存配色を据え置き */
.fcard--green  { --accent: #2e8b57; }
.fcard--blue   { --accent: #1f6fb2; }
.fcard--purple { --accent: #6b3fa0; }
.fcard--orange { --accent: #e07b1a; }
.fcard--red    { --accent: #c0392b; }

/* 会話フロー（倉庫作業→人材紹介） */
.chat { display: flex; flex-direction: column; gap: .5rem; }
.chat__row { display: flex; gap: .4rem; align-items: flex-start; }
.chat__row--me { flex-direction: row-reverse; }
.chat__ava { width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; margin-top: 14px; }
.chat__ava svg { width: 16px; height: 16px; }
.chat__bubble { background: #eef2f6; border-radius: 10px; padding: .5rem .6rem; font-size: .73rem; line-height: 1.55; }
.chat__row--me .chat__bubble { background: #e6f0fa; }
.chat__label { display: block; font-size: .62rem; color: var(--text-sub); margin-bottom: .15rem; }
.chat__divider { text-align: center; font-size: .68rem; color: var(--text-sub); margin: .1rem 0; }
.chat__result { margin-top: .7rem; background: #eef4fb; border: 1px dashed var(--accent); border-radius: 10px; padding: .8rem .7rem; text-align: center; }
.chat__result-ico { width: 40px; height: 40px; margin: 0 auto .3rem; color: var(--accent); display: block; }
.chat__result-ttl { color: var(--accent); font-weight: 800; font-size: .84rem; margin-bottom: .3rem; }
.chat__result-desc { font-size: .74rem; line-height: 1.6; color: var(--text); }

/* 下部の相談バー */
.funnel__cta { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.2rem 1.8rem; background: var(--bg-soft); border-radius: 16px; padding: 1.5rem 1.8rem; }
.funnel__cta-lead { flex: 1 1 320px; font-size: .95rem; line-height: 1.8; }
.funnel__cta-lead strong { color: var(--blue); }
.funnel__cta-btns { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ═══════════ 実績（課題・対応・改善） ═══════════ */
.case__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.case {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 28px; display: flex; flex-direction: column; gap: 16px;
}
.case__row { display: grid; gap: 6px; }
.case__label {
  display: inline-block; align-self: flex-start; font-size: 14px; font-weight: 700;
  padding: 3px 12px; border-radius: 999px; line-height: 1.5;
}
.case__row--problem  .case__label { background: var(--bg-soft); color: var(--text-sub); }
.case__row--action   .case__label { background: var(--blue-tint); color: var(--blue); }
.case__row--result   .case__label { background: var(--blue); color: #fff; }
.case__text { font-size: 16px; line-height: 1.85; color: var(--text); }
.case__divider { border: none; border-top: 1px dashed var(--border); margin: 0; }

/* ═══════════ FOOTER ═══════════ */
.footer { background: var(--blue-deep); color: rgba(255,255,255,.85); padding-top: clamp(2.5rem, 6vw, 4rem); }
.footer__inner { display: grid; grid-template-columns: 1.3fr 2fr; gap: clamp(2rem, 5vw, 4rem); padding-bottom: 2.5rem; }
.footer__logo { height: 40px; width: auto; margin-bottom: 1rem; }
.footer__name { font-weight: 700; color: #fff; margin-bottom: .8rem; font-size: .95rem; }
.footer__mission { font-size: .84rem; line-height: 1.9; }
.footer__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.fcol__head { color: #fff; font-weight: 700; font-size: .92rem; margin-bottom: .9rem; }
.fcol ul { display: grid; gap: .55rem; }
.fcol a { font-size: .82rem; transition: color .15s; }
.fcol a:hover { color: #fff; }
.fcol__contact li { font-size: .82rem; line-height: 1.7; margin-bottom: .2rem; }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.14); padding: 1.2rem 0; }
.footer__bottom-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .78rem; }
.footer__legal { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.footer__legal a:hover { color: #fff; }

/* ═══════════ SUB PAGES（会社概要・法的ページ等） ═══════════ */
.page-hero { background: linear-gradient(135deg, var(--blue), var(--blue-dark)); color: #fff; padding: clamp(2.4rem, 6vw, 4rem) 0; }
.breadcrumb { font-size: .8rem; opacity: .92; margin-bottom: .7rem; }
.breadcrumb a { text-decoration: underline; text-underline-offset: 2px; }
.breadcrumb a:hover { opacity: .8; }
.page-hero__title { font-size: clamp(1.6rem, 4.4vw, 2.4rem); font-weight: 800; letter-spacing: .02em; }
.page-hero__en { display: block; font-size: .78rem; letter-spacing: .2em; opacity: .85; margin-top: .5rem; }

.page-body { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.container--narrow { max-width: 880px; }
.page-lead { color: var(--text-sub); margin-bottom: 2rem; line-height: 1.9; }

/* 定義テーブル（会社概要・特商法） */
.info-table { width: 100%; border-collapse: collapse; border-top: 1px solid var(--border); }
.info-table th, .info-table td { text-align: left; padding: 1rem 1.1rem; border-bottom: 1px solid var(--border); vertical-align: top; font-size: .93rem; line-height: 1.8; }
.info-table th { width: 34%; background: var(--bg-soft); font-weight: 700; color: var(--text); }
.info-table td small { color: var(--text-sub); font-size: .82rem; display: block; margin-top: .2rem; }

/* 法的文書のセクション */
.legal-section { margin-bottom: 2.2rem; }
.legal-section > h2 { font-size: 1.12rem; font-weight: 800; margin-bottom: .7rem; padding-left: .7rem; border-left: 4px solid var(--blue); }
.legal-section p { color: var(--text); font-size: .93rem; line-height: 1.9; margin-bottom: .6rem; }
.legal-section ol, .legal-section ul { padding-left: 1.5rem; margin: .4rem 0 .6rem; }
.legal-section ol { list-style: decimal; }
.legal-section ul { list-style: disc; }
.legal-section li { font-size: .93rem; line-height: 1.9; margin-bottom: .3rem; }
.legal-updated { color: var(--text-sub); font-size: .85rem; margin-top: 1.5rem; text-align: right; }

/* 記事本文（代表メッセージ・理念） */
.prose h2 { font-size: 1.25rem; font-weight: 800; margin: 2rem 0 .8rem; }
.prose h2:first-child { margin-top: 0; }
.prose p { font-size: 1rem; line-height: 2; margin-bottom: 1.2rem; }
.prose .signature { text-align: right; font-weight: 700; margin-top: 2rem; }
.prose .signature small { display: block; font-weight: 500; color: var(--text-sub); font-size: .82rem; }

/* 未記入プレースホルダーの強調 */
.ph { background: #fff3cd; color: #8a6d00; padding: .05em .4em; border-radius: 5px; font-size: .92em; font-weight: 600; }

.back-home { display: inline-flex; align-items: center; gap: .4em; margin-top: 2.5rem; font-weight: 700; color: var(--blue); }
.back-home:hover { text-decoration: underline; }

/* サイトマップ */
.sitemap { display: grid; gap: 1.6rem; }
.sitemap > li { border-left: 4px solid var(--blue); padding-left: .9rem; }
.sitemap > li > a, .sitemap__group { font-weight: 800; font-size: 1.08rem; color: var(--blue); }
.sitemap ul { margin-top: .8rem; display: grid; gap: .55rem; padding-left: .3rem; }
.sitemap ul li { font-size: .95rem; }
.sitemap ul a { color: var(--text); position: relative; padding-left: 1.1rem; }
.sitemap ul a::before { content: "―"; position: absolute; left: 0; color: var(--blue); }
.sitemap ul a:hover { color: var(--blue); text-decoration: underline; }

/* ═══════════ サービス詳細ページ ═══════════ */
.svc-intro { font-size: 16px; line-height: 1.9; color: var(--text); max-width: 760px; margin: 0 auto 3rem; text-align: center; }
.svc-body-title { font-size: 24px; font-weight: 700; color: var(--navy); text-align: center; margin: 2.6rem 0 1.4rem; }
.svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.svc-card {
  --accent: var(--blue);
  background: #fff; border: 1px solid var(--border); border-left: 4px solid var(--accent);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px 26px;
}
.svc-card__ttl { font-size: 18px; font-weight: 700; color: var(--navy); margin-bottom: 8px; line-height: 1.5; }
.svc-card__desc { font-size: 16px; line-height: 1.85; color: var(--text); }
.svc-page--promotion .svc-card { --accent: var(--pillar-1); }
.svc-page--recruit   .svc-card { --accent: var(--pillar-2); }
.svc-page--local     .svc-card { --accent: var(--pillar-3); }

.svc-check { max-width: 720px; margin: 0 auto; display: grid; gap: 12px; }
.svc-check li { position: relative; padding-left: 30px; font-size: 16px; line-height: 1.7; }
.svc-check li::before {
  content: ""; position: absolute; left: 0; top: .28em; width: 20px; height: 20px;
  border-radius: 50%; background: var(--blue-tint);
}
.svc-check li::after {
  content: ""; position: absolute; left: 7px; top: .52em; width: 5px; height: 10px;
  border: solid var(--blue); border-width: 0 2px 2px 0; transform: rotate(45deg);
}

.svc-related { margin-top: 3rem; }
.svc-related__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 1rem; }
.svc-related__card {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 18px 22px; font-weight: 700; color: var(--navy); font-size: 16px;
  transition: background-color .25s ease, transform .25s ease;
}
.svc-related__card:hover { background: var(--blue-tint); transform: translateY(-2px); }
.svc-related__card .btn__arrow { color: var(--blue); }

/* サービス詳細ページ末尾のCTA（中間CTAスタイルを流用） */
.svc-cta { margin-top: 3rem; }

@media (max-width: 767px) {
  .svc-grid { grid-template-columns: 1fr; gap: 14px; }
  .svc-related__grid { grid-template-columns: 1fr; }
  .svc-body-title { font-size: 20px; }
}

/* PC：右ギャラリーを縦に拡大して左カラム（バナー）と下端を揃える */
@media (min-width: 1024px) {
  .hero__gallery { gap: 16px; }
  .hero__pic--main { aspect-ratio: 2 / 1; }
  .hero__gallery .hero__pic:nth-child(2) { aspect-ratio: 1 / 1; }
  .hero__gallery .hero__pic:nth-child(4) { aspect-ratio: 1 / 1; }
}

/* ═══════════════════════════════════════════
   RESPONSIVE
   BP: SP 〜767 / タブレット 768-1023 / PC 1024+ / ワイド 1280+
   ═══════════════════════════════════════════ */

/* ── タブレット：〜1023px ── */
@media (max-width: 1023px) {
  :root { --gutter: 24px; }
  h1, .h1 { font-size: 40px; }
  h2, .h2, .sec-title { font-size: 30px; }
  h3, .h3 { font-size: 22px; }
  .hero__title { font-size: 40px; }
  /* FVは縦積み：仕様どおり「文章を先、画像を後」 */
  .hero__inner { grid-template-columns: 1fr; min-height: 0; gap: 32px; }
  .hero__gallery { order: 0; }
  .hero__text { max-width: none; }
  .ba__grid { grid-template-columns: 1fr; }
  .midcta__box { padding: 32px; }
}

/* ── スマートフォン：〜767px ── */
@media (max-width: 767px) {
  :root { --gutter: 20px; --sec-pad: 56px; }
  html { scroll-padding-top: 68px; }
  body { font-size: 16px; line-height: 1.85; }

  h1, .h1 { font-size: 30px; line-height: 1.45; }
  h2, .h2, .sec-title { font-size: 26px; line-height: 1.5; }
  h3, .h3 { font-size: 20px; line-height: 1.5; }
  .hero { padding: 32px 0 40px; }
  /* 30pxを上限に、狭い端末では自動縮小して指定の3行を維持（孤立文字・画面外を防止） */
  .hero__title { font-size: clamp(23px, 7.2vw, 30px); line-height: 1.45; letter-spacing: .01em; }
  .hero__text { font-size: 15px; }
  .hero__points { flex-direction: column; gap: 8px; margin-bottom: 22px; }
  .hero__cta { flex-direction: column; }
  .hero__cta .btn { width: 100%; }
  .btn { font-size: 15px; }

  /* 信頼帯：2列×2行 */
  .trust__grid { grid-template-columns: 1fr 1fr; gap: 18px 12px; padding: 22px 0; }
  .trust__label { font-size: 14px; }

  /* 3本柱：1列 */
  .pillars__grid { grid-template-columns: 1fr; gap: 18px; }
  .pillar { min-height: 0; }
  .pillar__body { padding: 20px; }
  .pillar__ttl { font-size: 20px; }

  /* Before/After：1列 */
  .ba__grid { grid-template-columns: 1fr; gap: 16px; }
  .ba__card { padding: 20px; }

  /* 実績：スマホは1列 */
  .case__grid { grid-template-columns: 1fr; gap: 16px; }
  .case { padding: 20px; }

  /* 中間CTA：縦長 */
  .midcta__box { flex-direction: column; align-items: stretch; padding: 24px 20px; border-radius: 20px; }
  .midcta__ttl { font-size: 20px; }
  .midcta__btns { flex-direction: column; }
  .midcta__btns .btn { width: 100%; }

}

@media (max-width: 1100px) { .funnel__grid { grid-template-columns: repeat(3, 1fr); } .funnel__main { display: contents; } }
@media (max-width: 760px)  { .funnel__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .funnel__grid { grid-template-columns: 1fr; max-width: 380px; margin: 0 auto; } }

@media (max-width: 1024px) {
  .ncard { flex-basis: calc((100% - 36px) / 3); }
  .flow__list { grid-template-columns: repeat(3, 1fr); }
  .fstep:nth-child(3)::after { display: none; }
  .footer__inner { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  html { scroll-padding-top: 64px; }
  .header__inner { height: 64px; }

  /* mobile nav */
  .gnav {
    position: fixed; inset: 64px 0 auto 0; background: #fff;
    border-bottom: 1px solid var(--border); box-shadow: var(--shadow);
    transform: translateY(-120%); transition: transform .3s ease; visibility: hidden;
  }
  .gnav.is-open { transform: translateY(0); visibility: visible; }
  .gnav__list { flex-direction: column; align-items: stretch; gap: 0; padding: .5rem 24px 1.5rem; }
  .gnav__list li { border-bottom: 1px solid var(--border); }
  .gnav__list li:last-child { border-bottom: none; }
  .gnav__list a { display: block; padding: 1rem 0; }
  .gnav__cta { margin-top: 1rem; }
  .btn--nav { width: 100%; }
  .hamburger { display: flex; }

  /* スマホメニュー内：無料相談 / LINE / 電話 */
  .gnav__contact { display: grid; gap: 10px; padding: 0 var(--gutter) 1.5rem; }
  .gnav__contact .btn { width: 100%; }
  .gnav__tel {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 8px; font-weight: 700; color: var(--navy);
  }
  .gnav__tel span { font-size: 20px; letter-spacing: .02em; }
  .gnav__tel small { font-size: 12px; color: var(--text-sub); font-weight: 500; }

  .hero__inner { grid-template-columns: 1fr; }
  .hero__gallery { order: 0; } /* 仕様：文章を先、画像を後 */
  .pc { display: none; }

  .about__inner { grid-template-columns: 1fr; }
  .about__diagram { order: -1; }

  /* orbit: スマホでは絶対配置をやめ、コア円＋要素を折り返し配置（見切れ防止） */
  .orbit { position: static; aspect-ratio: auto; width: 100%; display: flex; flex-direction: column; align-items: center; }
  .orbit__core { position: static; transform: none; width: 180px; height: 180px; margin: 0 auto 1.2rem; }
  .orbit__nodes { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
  .orbit__node { position: static; transform: none; }

  .trouble__grid { grid-template-columns: 1fr; }
  .menu__grid { grid-template-columns: 1fr; }
  .works__inner { grid-template-columns: 1fr; }
  .works__pic { order: -1; }

  /* voice carousel: 1 per view */
  .vcard { flex: 0 0 100%; margin-right: 0; }
  .voice__track { transition: transform .45s ease; }
  .voice__dots { display: flex; }
}

@media (max-width: 560px) {
  .nandemo__grid { gap: 12px; }
  .ncard { flex-basis: calc((100% - 12px) / 2); }
  .flow__list { grid-template-columns: 1fr 1fr; }
  .fstep::after { display: none !important; }
  .hero__cta .btn, .cta__btns .btn, .pricing__cta .btn { width: 100%; }
  .cta__inner { flex-direction: column; align-items: stretch; text-align: center; }
  .footer__cols { grid-template-columns: 1fr 1fr; }
  .price-card__row { flex-direction: column; align-items: flex-start; text-align: left; }

  /* サブページ：定義テーブルを縦積みに */
  .info-table, .info-table tbody, .info-table tr, .info-table th, .info-table td { display: block; width: 100%; }
  .info-table th { border-bottom: none; padding-bottom: .3rem; }
  .info-table td { padding-top: .3rem; padding-bottom: 1.1rem; }
}