/* デザインMD: 株式会社PROST/HP試作/PROST_HP試作_デザインMD_20261019.md（動画版の追記あり） */
:root {
  --c-bg: #0A0A0A;
  --c-text: #FFFFFF;
  --c-header-bg: rgba(255, 255, 255, 0.72); /* ヘッダーの半透明の白 */
  --c-header-text: #1A1A1A;
  --c-brand: #42B032;                         /* ロゴの緑（ナビの下線） */
  --c-accent: #0A0A0A;
  /* 動画の上に重ねる黒（multiply で重ねるので、灰色が濃いほど暗くなる） */
  --c-shade: #404040;        /* 全体：動画を約75%暗く */
  --c-shade-bottom: #141414; /* 下側：約92%暗く */

  --ff-en: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --ff-ja: "Noto Sans JP", sans-serif;

  --copy-w: 1100px;          /* 筆文字画像の最大幅（1920px幅のとき） */
  --dur-copy: 0.9s;
  --fs-nav: 20px;
  --fs-caption: 19px;
  --lh-caption: 1.1;

  --pad-x: clamp(20px, 2.9vw, 56px);
  --header-top: 20px;       /* 画面上端からヘッダーまで */
  --header-w: 66.667%;      /* ヘッダーの幅（画面の2/3・中央寄せ） */
  --header-h: 72px;         /* ヘッダーの高さ（角丸は高さの半分＝完全なピル型） */
  --header-center: 56px;    /* ヘッダーの縦の中心（20＋72÷2） */
  --pad-bottom: 56px;

  --logo-h: 30px;
  --nav-gap: 32px;
  --fs-nav: 15px;
  --contact-h: 44px;
  --menu-size: 52px;
  --menu-dot: 7px;
  --menu-dot-gap: 3px;

  --caption-top: 160px;
  --caption-right: 136px;
  --caption-h: 320px;

  --radius-nav: 0px;
  --radius-menu: 50%;

  --ease-out: cubic-bezier(0.33, 1, 0.68, 1);
  --delay-headline: 1.11s;
  --dur-video-fade: 1s;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--ff-en);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }

/* ヘッダー：半透明の白のピル型（参考：左にロゴ、右にメニュー、端に丸いボタン） */
.header {
  position: fixed;
  top: var(--header-top);
  left: 0;
  right: 0;
  width: var(--header-w);
  margin: 0 auto;
  height: var(--header-h);
  z-index: 10;
  display: flex;
  align-items: center;
  padding: 0 calc((var(--header-h) - var(--menu-size)) / 2) 0 28px;
  border-radius: calc(var(--header-h) / 2);
  background: var(--c-header-bg);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
  color: var(--c-header-text);
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.logo img { height: var(--logo-h); width: auto; display: block; }
.logo span {
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.12em;
  line-height: 1;
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--nav-gap);
  margin-left: auto;
}
.nav a {
  position: relative;
  font-family: var(--ff-ja);
  font-size: var(--fs-nav);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1;
  padding: 8px 0;
}
/* マウスを乗せたら緑の下線がのびる */
.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--c-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease-out);
}
.nav a:hover::after,
.nav a[aria-current="page"]::after { transform: scaleX(1); }

.contact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--contact-h);
  padding: 0 22px;
  margin-left: 32px;
  border-radius: calc(var(--contact-h) / 2);
  background: var(--c-accent);
  color: #fff;
  font-family: var(--ff-ja);
  font-size: var(--fs-nav);
  font-weight: 500;
  letter-spacing: 0.04em;
  white-space: nowrap;
  transition: opacity 0.2s;
}
.contact svg { width: 18px; height: 18px; display: block; }
.contact:hover { opacity: 0.8; }

.menu {
  flex-shrink: 0;
  width: var(--menu-size);
  height: var(--menu-size);
  margin-left: 12px;
  border: 0;
  border-radius: 50%;
  background: var(--c-accent);
  display: grid;
  grid-template-columns: repeat(2, var(--menu-dot));
  grid-template-rows: repeat(2, var(--menu-dot));
  gap: var(--menu-dot-gap);
  place-content: center;
  cursor: pointer;
  padding: 0;
}
.menu span { background: #fff; }
/* メニューボタン：開いているときは4つの四角が「×」に変わる */
.menu span { transition: transform 0.3s var(--ease-out), opacity 0.2s; }
.menu.is-open span:nth-child(1) { transform: translate(5px, 5px) rotate(45deg) scaleX(2.2); }
.menu.is-open span:nth-child(4) { transform: translate(-5px, -5px) rotate(45deg) scaleX(2.2); }
.menu.is-open span:nth-child(2) { transform: translate(-5px, 5px) rotate(-45deg) scaleX(2.2); }
.menu.is-open span:nth-child(3) { transform: translate(5px, -5px) rotate(-45deg) scaleX(2.2); }
.menu.is-open span { height: 2px; align-self: center; }

/* スマホ・タブレット用メニュー：ヘッダーのすぐ下に、同じ半透明の白のパネルで開く */
.sp-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  padding: 8px 24px 24px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.25s, transform 0.25s var(--ease-out), visibility 0s 0.25s;
}
.sp-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.25s, transform 0.25s var(--ease-out);
}
.sp-menu a:not(.sp-menu__contact) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 4px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  font-family: var(--ff-ja);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--c-header-text);
}
.sp-menu a:not(.sp-menu__contact)::after {
  content: "";
  width: 8px;
  height: 8px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.sp-menu__contact {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  margin-top: 20px;
  border-radius: 26px;
  background: var(--c-accent);
  color: #fff;
  font-family: var(--ff-ja);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.06em;
}
.sp-menu__contact svg { width: 18px; height: 18px; }

/* PC（ナビが全部見える幅）ではメニューボタンは出さない（押しても何も起きないため） */
@media (min-width: 1321px) {
  .menu, .sp-menu { display: none; }
  .contact { margin-right: calc((var(--header-h) - var(--contact-h)) / 2 - 10px); }
}

/* ヒーロー */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--c-bg);
}

/* 動画：3本を重ね、表示中の1本だけ不透明にする */
.hero__media { position: absolute; inset: 0; }
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--dur-video-fade) ease;
}
.hero__video.is-active { opacity: 1; }

/* 黒の重ね（multiply：灰色が濃いほど暗くなる） */
.hero__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, var(--c-shade-bottom) 0%, var(--c-shade) 55%),
    var(--c-shade);
  mix-blend-mode: multiply;
}

/* 細かいノイズ（低画質を目立たなくする） */
.hero__grain {
  position: absolute;
  inset: 0;
  opacity: 0.12;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  pointer-events: none;
}

/* 装飾：筆の線・墨のしぶき・漂う光の粒（main.js で描く） */
.hero__fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* 見出し：筆文字の画像を画面の真ん中に（上下はヘッダーと同じだけ空けて、画面の中心に合わせる） */
.hero__copy {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: calc(var(--header-center) * 2) var(--pad-x);
}
.hero__title {
  margin: 0;
  width: min(var(--copy-w), 100%);
}
.hero__title img {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100svh - var(--header-center) * 4);
  object-fit: contain;
  /* 左から右へ、筆で書くようにあらわれる */
  clip-path: inset(0 100% 0 0);
  animation: brushIn var(--dur-copy) var(--ease-out) var(--delay-headline) forwards;
}
@keyframes brushIn { to { clip-path: inset(0 0 0 0); } }

/* スクロールボタン（参考コードの値をそのまま使用。文字の書体だけサイトの英字に合わせる）
   右端の縦書き英文と同じ列（中心をそろえる）の、画面の下端に置く */
.scroll {
  position: absolute;
  bottom: 0;
  right: calc(var(--caption-right) + var(--fs-caption) * var(--lh-caption) * 1.5 - 20px);
  width: 40px;
  height: 160px;
  z-index: 2;
}
.scroll__text {
  display: inline-block;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 10px 110px;
  color: #fff;
  font-family: var(--ff-en);
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  writing-mode: vertical-lr;
}
.scroll__bar {
  position: absolute;
  left: 50%;
  bottom: 1px;
  transform: translateX(-50%);
}
/* 線（長さ100px） */
.scroll__bar::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 100px;
  background: #fff;
}
/* 上から下へ動くドット（直径8px・3秒でくり返し） */
.scroll__bar::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  animation: circlemove 3s ease-in-out infinite, circlemovehide 3s ease-out infinite;
}
@keyframes circlemove {
  0% { bottom: 95px; }
  100% { bottom: 0; }
}
@keyframes circlemovehide {
  0% { opacity: 0; }
  50% { opacity: 1; }
  80% { opacity: 0.9; }
  100% { opacity: 0; }
}

/* 縦書きキャプション */
.hero__caption {
  position: absolute;
  top: var(--caption-top);
  right: var(--caption-right);
  height: var(--caption-h);
  margin: 0;
  writing-mode: vertical-rl;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  word-break: break-all;
}

/* 1文字ずつランダム表示 */
.js-shuffle .ch { opacity: 0; }
.js-shuffle .ch.is-on { opacity: 1; }

/* ===== お知らせ ===== */
.news {
  background: #E7EBED;     /* 事業内容の下側と同じグレーで続ける */
  padding: 40px 0 160px;
  color: #111;
}
.news__inner {
  width: 88.4%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}
.news__en {
  margin: 0 0 12px;
  font-family: var(--ff-en);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--c-brand);
}
.news__title {
  margin: 0;
  font-family: var(--ff-ja);
  font-size: 44px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.2;
}
.news__more {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
  height: 50px;
  padding: 0 28px;
  border-radius: 25px;
  background: #0A0A0A;
  color: #fff;
  font-family: var(--ff-ja);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.06em;
  transition: background 0.3s;
}
.news__more svg { width: 20px; height: 20px; }
.news__more:hover { background: var(--c-brand); }

.news__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid #111;
}
.news__list li { border-bottom: 1px solid #111; }
.news__item {
  display: grid;
  grid-template-columns: 130px auto minmax(0, 1fr) 50px;
  align-items: center;
  gap: 28px;
  padding: 36px 8px;
  transition: background 0.3s;
}
.news__item:hover { background: rgba(255, 255, 255, 0.6); }
.news__date {
  font-family: var(--ff-en);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.06em;
}
.news__tag {
  display: inline-block;
  padding: 6px 16px;
  border: 1px solid #111;
  border-radius: 999px;
  font-family: var(--ff-ja);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
.news__text {
  font-family: var(--ff-ja);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.7;
  word-break: auto-phrase;
}
.news__arrow {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #0A0A0A;
  color: #fff;
  transition: background 0.3s, transform 0.3s var(--ease-out);
}
.news__arrow svg { width: 20px; height: 20px; }
.news__item:hover .news__arrow { background: var(--c-brand); transform: translateX(4px); }

@media (max-width: 1100px) {
  .news__inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 767px) {
  .news { padding: 24px 0 96px; }
  .news__inner { width: calc(100% - 32px); }
  .news__title { font-size: 32px; }
  .news__more { margin-top: 24px; }
  .news__item {
    grid-template-columns: auto minmax(0, 1fr) 40px;
    grid-template-areas: "date tag arrow" "text text arrow";
    gap: 12px 16px;
    padding: 24px 4px;
  }
  .news__date { grid-area: date; font-size: 15px; }
  .news__tag { grid-area: tag; justify-self: start; }
  .news__text { grid-area: text; font-size: 16px; }
  .news__arrow { grid-area: arrow; width: 40px; height: 40px; }
}

/* ===== コンセプトメッセージ ===== */
.concept {
  position: relative;
  overflow: hidden;
  background: #E7EBED;      /* お知らせと同じグレーで続ける（参考も #E7EBED） */
  padding: 40px 0 160px;
  color: #111;
  text-align: center;
}
/* 背景の大きく薄い文字（参考の「獅子」の代わり） */
.concept__bgword {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -54%);
  margin: 0;
  font-family: var(--ff-en);
  font-size: clamp(140px, 26vw, 500px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  color: #F4F5F6;           /* 背景よりほんの少し白い */
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.concept__inner {
  position: relative;
  width: min(1100px, calc(100% - 32px));
  margin: 0 auto;
}
.concept__title {
  position: relative;
  margin: 64px 0 0;
  font-family: var(--ff-ja);
  font-size: 46px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.06em;
  word-break: auto-phrase;
}
.concept__quote {
  position: absolute;
  left: -48px;
  top: -40px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 96px;
  line-height: 1;
  color: var(--c-brand);
}
.concept__body {
  margin: 56px auto 0;
  max-width: 980px;
  text-align: left;
  word-break: auto-phrase;   /* 言葉の区切りで折り返す */
  font-family: var(--ff-ja);
  font-size: 17px;
  line-height: 2.3;
  letter-spacing: 0.08em;
  color: #222;
}
.concept__body p { margin: 0 0 1.6em; }
.concept__body p:last-child { margin-bottom: 0; }
.concept__em {
  font-size: 19px;
  font-weight: 700;
  color: #111;
}
.sp { display: none; }

@media (max-width: 767px) {
  .concept { padding: 24px 0 96px; }
  .concept__title { font-size: 24px; margin-top: 44px; }
  .concept__quote { left: -4px; top: -44px; font-size: 64px; }
  .concept__body { margin-top: 36px; font-size: 15px; line-height: 2.1; letter-spacing: 0.04em; }
  .concept__em { font-size: 16px; }
  .sp { display: inline; }
}

/* ===== お悩み別（参考：灰色の角丸パネルに白いカード） ===== */
.worry {
  background: #E7EBED;       /* コンセプトから続くグレー */
  padding: 40px 0 160px;
}
.worry__panel {
  width: 88.4%;
  margin: 0 auto;
  padding: 72px 64px 80px;
  border-radius: 16px;
  background: #D9DDE0;       /* 背景より一段濃いグレーのパネル */
}
.worry__title {
  margin: 0;
  text-align: center;
  font-family: var(--ff-ja);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.4;
  color: #222;
  word-break: auto-phrase;
}
.worry__list {
  list-style: none;
  margin: 56px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
}
.worry__list li { display: flex; }
.worry__card {
  position: relative;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 36px 24px 28px;
  border-radius: 12px;
  background: #fff;
  color: #222;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  transition:
    opacity 0.8s var(--ease-out),
    transform 0.8s var(--ease-out),
    scale 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    background-color 0.3s,
    color 0.3s,
    box-shadow 0.3s;
}
.worry__text {
  margin: 0;
  text-align: center;
  font-family: var(--ff-ja);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.04em;
  word-break: auto-phrase;   /* 言葉の区切りで折り返す */
}
.worry__img {
  display: block;
  width: 100%;
  max-width: 220px;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  margin: 16px 0 8px;
  border-radius: 50%;
  transition: background 0.3s, padding 0.3s var(--ease-out);
}
.worry__go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding: 9px 22px;
  border: 1px solid #222;
  border-radius: 999px;
  font-family: var(--ff-ja);
  font-size: 16px;
  font-weight: 700;
  font-weight: 500;
  letter-spacing: 0.04em;
  white-space: nowrap;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
/* 押せることが分かる矢印（カードの右下。PCはマウスを乗せたときだけ表示） */
.worry__more {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #0A0A0A;
  color: #fff;
  transition: background 0.3s, transform 0.3s var(--ease-out);
}
.worry__more svg { width: 16px; height: 16px; }

@media (hover: hover) {
  /* PCではタグ（行き先のサービス名）は普段は隠し、マウスを乗せたときだけ下からふわっと出す（場所は空けておく） */
  .worry__go { opacity: 0; transform: translateY(8px); transition: opacity 0.3s, transform 0.3s var(--ease-out), background 0.3s, color 0.3s, border-color 0.3s; }
  .worry__card:hover .worry__go { opacity: 1; transform: none; }
  /* 右下の矢印も、普段は隠してマウスを乗せたときだけ左からすっと出す */
  .worry__more { opacity: 0; transform: translateX(-8px); transition: opacity 0.3s, transform 0.3s var(--ease-out), background 0.3s; }
  .worry__card:hover {
    scale: 1.04;
    z-index: 1;
    background: #0A0A0A;
    color: #fff;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.24);
  }
  /* 黒地でもイラストが見えるよう、後ろに白い丸を敷く */
  .worry__card:hover .worry__img { background: #fff; padding: 14px; }
  .worry__card:hover .worry__go { background: var(--c-brand); border-color: var(--c-brand); color: #fff; }
  .worry__card:hover .worry__more { opacity: 1; background: var(--c-brand); transform: translateX(3px); }
}
/* 事業内容のカードへ移動したとき、固定ヘッダーに隠れないように */
.card[id] { scroll-margin-top: 130px; }

@media (max-width: 1320px) {
  .worry__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .worry { padding: 24px 0 96px; }
  .worry__panel { width: calc(100% - 32px); padding: 44px 14px 20px; }
  .worry__title { font-size: 24px; }
  .worry__list { gap: 12px; margin-top: 32px; }
  .worry__card { padding: 20px 10px 16px; border-radius: 10px; }
  .worry__text { font-size: 13px; line-height: 1.55; letter-spacing: 0; }
  .worry__text br { display: none; }   /* 幅が狭いので自動で折り返す */
  .worry__img { max-width: 120px; margin: 10px 0 6px; }
  /* スマホ：タグを黒いボタンにして押せることを示す（右下の矢印は重なるので出さない） */
  .worry__go { font-size: 11px; padding: 6px 10px; letter-spacing: 0; background: #0A0A0A; border-color: #0A0A0A; color: #fff; }
  .worry__more { display: none; }
  .card[id] { scroll-margin-top: 90px; }
}

/* ===== 代表挨拶（参考：左に文章、右の写真が背景に溶けこむ） ===== */
/* 外側：灰色の地＋左上の黒いブロック。中身は白い角丸のパネル（縁）に入れる */
.ceo {
  position: relative;
  overflow: hidden;
  background: #E7EBED;
  padding: 80px 40px 120px;
  color: #222;
}
.ceo::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 30%;
  height: 56%;
  background: #0A0A0A;
}
.ceo__frame {
  position: relative;
  z-index: 1;
  max-width: 1760px;
  margin: 0 auto;
  padding: 120px 0 140px;
  border-radius: 24px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
}
.ceo__photo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 46%;
  pointer-events: none;
}
.ceo__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  /* 左側と下側を白い背景へなじませる */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 38%), linear-gradient(to top, transparent 0%, #000 18%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0%, #000 38%), linear-gradient(to top, transparent 0%, #000 18%);
  mask-composite: intersect;
  opacity: 0.92;
}
.ceo__inner {
  position: relative;
  width: 88.4%;
  margin: 0 auto;
}
.ceo__text { max-width: 860px; }
.ceo__en {
  margin: 0 0 12px;
  font-family: var(--ff-en);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--c-brand);
}
.ceo__title {
  position: relative;
  margin: 0;
  padding-bottom: 22px;
  font-family: var(--ff-ja);
  font-size: 44px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.3;
}
/* 見出しの下の短い線 */
.ceo__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 56px;
  height: 3px;
  background: var(--c-brand);
}
.ceo__catch {
  margin: 48px 0 0;
  font-family: var(--ff-ja);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.06em;
}
.ceo__body {
  margin-top: 40px;
  font-family: var(--ff-ja);
  font-size: 16px;
  line-height: 2.2;
  letter-spacing: 0.06em;
  word-break: auto-phrase;
}
.ceo__body p { margin: 0 0 1.4em; }
.ceo__body p:last-child { margin-bottom: 0; }
.ceo__em { font-size: 18px; font-weight: 700; }
.ceo__sign {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  gap: 4px 16px;
  margin: 56px 0 0;
  font-family: var(--ff-ja);
  font-size: 15px;
  letter-spacing: 0.08em;
}
.ceo__name {
  font-family: "Yuji Syuku", var(--ff-ja);
  font-size: 36px;
  letter-spacing: 0.12em;
}

@media (max-width: 1100px) {
  .ceo__photo { width: 58%; opacity: 0.55; }
}
@media (max-width: 767px) {
  .ceo { padding: 32px 12px 72px; }
  .ceo::before { width: 45%; height: 40%; }
  .ceo__frame { padding: 0 0 64px; border-radius: 16px; }
  /* スマホは写真を上に置き、下側を白へなじませる */
  .ceo__photo { position: relative; width: 100%; height: 420px; opacity: 1; }
  .ceo__photo img {
    -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 40%);
    mask-image: linear-gradient(to top, transparent 0%, #000 40%);
  }
  .ceo__inner { width: calc(100% - 40px); margin-top: -40px; }
  .ceo__title { font-size: 32px; }
  .ceo__catch { font-size: 24px; margin-top: 32px; }
  .ceo__body { font-size: 15px; line-height: 2.1; letter-spacing: 0.04em; }
  .ceo__em { font-size: 16px; }
  .ceo__sign { margin-top: 40px; }
  .ceo__name { font-size: 30px; }
}

/* ===== お問い合わせ（黒岩電気工業のフォームと同じ作り） ===== */
.inquiry {
  background: #fff;
  padding: 140px 0 160px;
  color: #111;
  scroll-margin-top: 40px;
}
.inquiry__inner { width: min(880px, calc(100% - 40px)); margin: 0 auto; }
.inquiry__heading { text-align: center; }
.inquiry__en {
  margin: 0 0 12px;
  font-family: var(--ff-en);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--c-brand);
}
.inquiry__title {
  margin: 0;
  font-family: var(--ff-ja);
  font-size: 44px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.3;
}
.inquiry__lead {
  margin: 32px 0 0;
  font-family: var(--ff-ja);
  font-size: 16px;
  line-height: 2;
  letter-spacing: 0.04em;
  word-break: auto-phrase;
}
.inquiry__mail {
  margin: 12px 0 0;
  font-family: var(--ff-ja);
  font-size: 14px;
  letter-spacing: 0.04em;
}
.inquiry__mail a { color: var(--c-brand); text-decoration: underline; text-underline-offset: 3px; }

.contact-form { margin: 72px 0 0; padding: 72px 0 0; border-top: 1px solid #DFE3E4; }
.contact-form h3 { margin: 0 0 36px; text-align: center; font-family: var(--ff-ja); font-size: 24px; font-weight: 700; }
.form-rows { display: grid; gap: 24px; }
.form-rows[hidden] { display: none; } /* 送信完了後は入力欄ごと隠す（display: grid が hidden を打ち消すため） */
.form-row { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 20px; align-items: center; }
.form-row > label, .form-row > legend { font-family: var(--ff-ja); font-size: 14px; font-weight: 700; line-height: 1.55; }
.form-row > legend { display: block; float: left; width: 170px; padding: 0; }
.required {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  margin-left: 7px;
  padding: 1px 6px;
  border: 1px solid #111;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  vertical-align: middle;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 0;
  background: #F1F2F6;
  color: #111;
  font-family: var(--ff-ja);
  font-size: 16px;
}
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form input[type="tel"] { min-height: 56px; padding: 14px 16px; }
.contact-form textarea { min-height: 180px; padding: 16px; resize: vertical; line-height: 1.8; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #9CA5AD; opacity: 1; }
.contact-form input:focus, .contact-form textarea:focus { outline: 0; border-color: var(--c-brand); box-shadow: 0 0 0 3px rgba(66, 176, 50, 0.2); }
.contact-form .is-invalid { border-color: #E5322D !important; }
.form-row--choices { margin: 0; padding: 0; border: 0; }
.choice-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; padding: 18px 20px; background: #F1F2F6; }
.choice-panel label { display: flex; gap: 9px; align-items: flex-start; font-family: var(--ff-ja); font-size: 14px; font-weight: 500; line-height: 1.5; cursor: pointer; }
.choice-panel input, .consent input { flex: 0 0 auto; width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--c-brand); }
.form-row--message { align-items: start; }
.form-row--message > label { padding-top: 14px; }
.form-actions { display: flex; flex-direction: column; align-items: center; margin-top: 16px; }
.consent { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 24px; font-family: var(--ff-ja); font-size: 14px; font-weight: 500; line-height: 1.6; cursor: pointer; }
.consent .text-link { color: var(--c-brand); text-decoration: underline; text-underline-offset: 3px; }
.form-error { margin: 0 0 16px; font-family: var(--ff-ja); font-size: 13px; color: #E5322D; }
.contact-form .submit {
  width: min(320px, 100%);
  min-height: 56px;
  border: 0;
  border-radius: 0;
  background: #0A0A0A;
  color: #fff;
  font-family: var(--ff-ja);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: background 0.3s;
}
.contact-form .submit:hover, .contact-form .submit:focus-visible { background: var(--c-brand); }
.form-done { padding: 48px 24px; text-align: center; background: #F1F2F6; font-family: var(--ff-ja); font-size: 15px; line-height: 2; }
.form-done__title { margin: 0 0 8px; font-size: 22px; font-weight: 700; }
.form-done small { color: #6B737A; }

@media (max-width: 767px) {
  .inquiry { padding: 88px 0 96px; }
  .inquiry__inner { width: calc(100% - 32px); }
  .inquiry__title { font-size: 32px; }
  .inquiry__lead { font-size: 15px; }
  .inquiry__lead br { display: none; }
  .contact-form { margin-top: 48px; padding-top: 48px; }
  .contact-form h3 { margin-bottom: 28px; font-size: 20px; }
  .form-rows { gap: 22px; }
  .form-row { grid-template-columns: 1fr; gap: 8px; }
  .form-row > legend { float: none; width: auto; margin-bottom: 8px; }
  .choice-panel { grid-template-columns: 1fr; padding: 16px; }
  .form-row--message > label { padding-top: 0; }
  .contact-form .submit { width: 100%; }
}

/* ===== フッター（会社情報） ===== */
.footer {
  background: #0A0A0A;
  color: #fff;
  padding: 112px 0 32px;
  scroll-margin-top: 0;
}
.footer__inner {
  width: 88.4%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) 180px;
  gap: 64px;
  align-items: start;
}
.footer__logo { display: inline-flex; align-items: center; gap: 12px; }
.footer__logo img { height: 34px; width: auto; display: block; }
.footer__logo span { font-family: var(--ff-en); font-size: 28px; font-weight: 700; letter-spacing: 0.12em; }
.footer__tagline { margin: 20px 0 0; font-family: var(--ff-ja); font-size: 15px; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.7); }
.footer__contact {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 32px;
  height: 48px;
  padding: 0 24px;
  border-radius: 24px;
  background: #fff;
  color: #0A0A0A;
  font-family: var(--ff-ja);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  transition: background 0.3s, color 0.3s;
}
.footer__contact svg { width: 18px; height: 18px; }
.footer__contact:hover { background: var(--c-brand); color: #fff; }
.footer__heading {
  margin: 0 0 24px;
  font-family: var(--ff-ja);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.footer__heading span {
  display: block;
  margin-bottom: 8px;
  font-family: var(--ff-en);
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--c-brand);
}
.footer__info { margin: 0; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.footer__info > div {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  font-family: var(--ff-ja);
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.04em;
}
.footer__info dt { color: rgba(255, 255, 255, 0.6); }
.footer__info dd { margin: 0; word-break: auto-phrase; }
.footer__info a { text-decoration: underline; text-underline-offset: 3px; }
.footer__nav { display: flex; flex-direction: column; gap: 16px; padding-top: 4px; }
.footer__nav a { font-family: var(--ff-ja); font-size: 14px; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.85); transition: color 0.2s; }
.footer__nav a:hover { color: var(--c-brand); }
.footer__copy {
  width: 88.4%;
  margin: 80px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-family: var(--ff-en);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 1100px) {
  .footer__inner { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .footer__nav { flex-direction: row; flex-wrap: wrap; gap: 14px 24px; }
}
@media (max-width: 767px) {
  .footer { padding: 72px 0 24px; }
  .footer__inner, .footer__copy { width: calc(100% - 32px); }
  .footer__info > div { grid-template-columns: 1fr; gap: 2px; }
  .footer__copy { margin-top: 48px; }
}

/* ===== 下層ページ（お知らせ一覧・記事） ===== */
.subpage { background: #fff; color: #111; }
.page { padding-top: 112px; }
.page__inner { width: min(1100px, calc(100% - 40px)); margin: 0 auto; }
.page-head { padding: 72px 0 48px; }
.page-head__en { margin: 0 0 12px; font-family: var(--ff-en); font-size: 16px; font-weight: 700; letter-spacing: 0.2em; color: var(--c-brand); }
.page-head__title { margin: 0; font-family: var(--ff-ja); font-size: 44px; font-weight: 700; letter-spacing: 0.08em; }
.page-body { padding: 0 0 140px; }

.article { padding: 72px 0 140px; }
.article__inner { width: min(860px, calc(100% - 40px)); margin: 0 auto; }
.article__back { display: inline-block; font-family: var(--ff-ja); font-size: 14px; color: #555; text-decoration: underline; text-underline-offset: 3px; }
.article__back:hover { color: var(--c-brand); }
.article__back--bottom { margin-top: 72px; }
.article__meta { display: flex; align-items: center; gap: 16px; margin-top: 40px; font-family: var(--ff-en); font-size: 16px; font-weight: 500; letter-spacing: 0.06em; }
.article__title { margin: 16px 0 0; font-family: var(--ff-ja); font-size: 32px; font-weight: 700; line-height: 1.6; letter-spacing: 0.04em; word-break: auto-phrase; }
.article__banner { display: block; width: 100%; height: auto; margin-top: 40px; border-radius: 12px; }
.article__notice {
  margin-top: 32px;
  padding: 24px 28px;
  border: 2px solid #0A0A0A;
  border-radius: 12px;
  background: #F1F2F6;
  text-align: center;
  font-family: var(--ff-ja);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.9;
  letter-spacing: 0.04em;
}
.article__notice p { margin: 0; }
.article__body { margin-top: 56px; font-family: var(--ff-ja); font-size: 17px; line-height: 2.1; letter-spacing: 0.04em; color: #222; word-break: auto-phrase; }
.article__body p { margin: 0 0 1.4em; }
.article__body h2 { margin: 2.4em 0 0.8em; padding-left: 16px; border-left: 4px solid var(--c-brand); font-size: 24px; line-height: 1.5; color: #111; }
.article__lead { font-size: 20px; font-weight: 700; color: #111; line-height: 1.9; }
.article__voices { list-style: none; margin: 0 0 1.6em; padding: 24px 28px; background: #F1F2F6; border-radius: 8px; }
.article__voices li { padding: 4px 0; font-weight: 500; }
.article__list { margin: 0 0 1.4em; padding-left: 1.4em; }
.article__list li { margin: 0.2em 0; }
.article__list li::marker { color: var(--c-brand); }
.article__em { font-weight: 700; color: #111; }
.article__cta { text-align: center; margin: 2em 0 !important; }
.article__btn { display: inline-flex; align-items: center; justify-content: center; min-width: 320px; height: 60px; padding: 0 32px; border-radius: 30px; background: #0A0A0A; color: #fff; font-weight: 700; letter-spacing: 0.08em; transition: background 0.3s; }
.article__btn:hover { background: var(--c-brand); }
.article__table { margin: 0; border-top: 1px solid #DFE3E4; }
.article__table > div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; padding: 18px 0; border-bottom: 1px solid #DFE3E4; }
.article__table dt { font-weight: 700; }
.article__table dd { margin: 0; }
.article__formnote { margin: -16px 0 32px; text-align: center; font-family: var(--ff-ja); font-size: 14px; line-height: 1.9; color: #444; word-break: auto-phrase; }
.article .contact-form { margin-top: 80px; }
.article .contact-form, #apply { scroll-margin-top: 110px; }

@media (max-width: 767px) {
  .page { padding-top: 84px; }
  .page__inner, .article__inner { width: calc(100% - 32px); }
  .page-head { padding: 48px 0 32px; }
  .page-head__title { font-size: 32px; }
  .page-body { padding-bottom: 96px; }
  .article { padding: 40px 0 96px; }
  .article__title { font-size: 22px; }
  .article__body { font-size: 15px; line-height: 2; }
  .article__body br { display: none; }
  .article__body h2 { font-size: 19px; }
  .article__lead { font-size: 17px; }
  .article__voices { padding: 18px 18px; }
  .article__btn { min-width: 0; width: 100%; }
  .article__table > div { grid-template-columns: 1fr; gap: 2px; }
  .article__formnote br { display: none; }
}

/* ===== コラム（一覧・記事） ===== */
.page-head__lead { margin: 20px 0 0; font-family: var(--ff-ja); font-size: 16px; line-height: 1.9; color: #444; }
.col-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.col-filter__btn { padding: 9px 18px; border: 1px solid #111; border-radius: 999px; background: #fff; color: #111; font-family: var(--ff-ja); font-size: 14px; font-weight: 500; cursor: pointer; transition: background 0.2s, color 0.2s; }
.col-filter__btn:hover { background: #F1F2F6; }
.col-filter__btn.is-on { background: #0A0A0A; color: #fff; }
.col-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.col-list > li { display: flex; }
.col-card { display: flex; flex-direction: column; width: 100%; padding: 28px 26px 24px; border: 1px solid #DFE3E4; border-radius: 12px; background: #fff; transition: border-color 0.2s, box-shadow 0.3s, transform 0.3s var(--ease-out); }
.col-card:hover { border-color: #111; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08); transform: translateY(-3px); }
.col-card__meta { display: flex; align-items: center; gap: 12px; font-family: var(--ff-en); font-size: 13px; color: #6B737A; }
.col-card__tag { padding: 3px 10px; border-radius: 999px; background: var(--c-brand); color: #fff; font-family: var(--ff-ja); font-size: 12px; font-weight: 700; }
.col-card__title { margin: 14px 0 0; font-family: var(--ff-ja); font-size: 17px; font-weight: 700; line-height: 1.6; letter-spacing: 0.02em; color: #111; word-break: auto-phrase; }
.col-card__desc { margin: 10px 0 0; font-family: var(--ff-ja); font-size: 13px; line-height: 1.8; color: #555; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.col-card__read { margin-top: auto; padding-top: 16px; font-family: var(--ff-ja); font-size: 12px; color: #6B737A; }

.col-author { font-family: var(--ff-ja); font-size: 13px; color: #6B737A; letter-spacing: 0.02em; }
.col-toc { margin-top: 40px; padding: 24px 28px; border-radius: 12px; background: #F1F2F6; font-family: var(--ff-ja); }
.col-toc__title { margin: 0 0 12px; font-size: 15px; font-weight: 700; }
.col-toc ol { margin: 0; padding-left: 1.4em; font-size: 14px; line-height: 2; }
.col-toc li::marker { color: var(--c-brand); font-weight: 700; }
.col-toc a { color: #333; }
.col-toc a:hover { color: var(--c-brand); text-decoration: underline; }
.col-body { margin-top: 48px; font-family: var(--ff-ja); font-size: 17px; line-height: 2.05; letter-spacing: 0.03em; color: #222; word-break: auto-phrase; overflow-wrap: anywhere; }
.col-body p { margin: 0 0 1.3em; }
.col-body h2 { margin: 2.6em 0 0.9em; padding: 0 0 0 16px; border-left: 4px solid var(--c-brand); font-size: 24px; line-height: 1.5; color: #111; scroll-margin-top: 110px; }
.col-body h3 { margin: 2em 0 0.7em; padding-bottom: 8px; border-bottom: 1px solid #DFE3E4; font-size: 19px; line-height: 1.6; color: #111; scroll-margin-top: 110px; }
.col-body h4 { margin: 1.6em 0 0.5em; font-size: 17px; }
.col-body ul, .col-body ol { margin: 0 0 1.4em; padding-left: 1.4em; }
.col-body li { margin: 0.3em 0; }
.col-body li::marker { color: var(--c-brand); }
.col-body strong { background: linear-gradient(transparent 62%, rgba(66, 176, 50, 0.25) 62%); }
.col-body a { color: var(--c-brand); text-decoration: underline; text-underline-offset: 3px; }
.col-body hr { margin: 2.4em 0; border: 0; border-top: 1px solid #DFE3E4; }
.col-body blockquote { margin: 0 0 1.4em; padding: 16px 20px; border-left: 4px solid #DFE3E4; background: #F7F8FA; }
.col-body table { width: 100%; margin: 0 0 1.6em; border-collapse: collapse; font-size: 15px; line-height: 1.7; display: block; overflow-x: auto; }
.col-body th, .col-body td { padding: 10px 12px; border: 1px solid #DFE3E4; text-align: left; vertical-align: top; }
.col-body th { background: #F1F2F6; font-weight: 700; white-space: nowrap; }
.col-cta { margin-top: 64px; padding: 40px 24px; border-radius: 16px; background: #0A0A0A; color: #fff; text-align: center; }
.col-cta__title { margin: 0 0 20px; font-family: var(--ff-ja); font-size: 20px; font-weight: 700; }
.col-cta .article__btn { background: #fff; color: #0A0A0A; }
.col-cta .article__btn:hover { background: var(--c-brand); color: #fff; }
.col-related { margin-top: 72px; }
.col-related__title { margin: 0 0 24px; font-family: var(--ff-ja); font-size: 22px; font-weight: 700; }
.col-list--related { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.col-list--related .col-card { padding: 20px; }
.col-list--related .col-card__title { font-size: 15px; }

@media (max-width: 1100px) {
  .col-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .page-head__lead { font-size: 14px; }
  .col-filter { gap: 8px; margin-bottom: 28px; }
  .col-filter__btn { padding: 7px 14px; font-size: 13px; }
  .col-list, .col-list--related { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .col-card { padding: 22px 20px 20px; }
  .col-toc { padding: 20px; }
  .col-body { font-size: 15px; line-height: 2; }
  .col-body h2 { font-size: 20px; }
  .col-body h3 { font-size: 17px; }
  .col-cta__title { font-size: 17px; }
}

/* ===== サービス詳細ページ（/service/ai）v2：参考＝メディカルネットのサービスページ =====
   白ベース＋淡い緑の帯、中央の小見出し→緑の大見出し、左右交互の「文章＋イラスト」、中央円＋4ボックスの図、ピル型ボタン */
.sv { --sv-green: #2E8F22; --sv-tint: #F2F8F0; --sv-line: #DCE5D8; padding-top: 0; font-family: var(--ff-ja); color: #333; word-break: auto-phrase; }
.sv__inner { width: min(1080px, calc(100% - 40px)); margin: 0 auto; }
.sv .svc-ico { width: 28px; height: 28px; }
.sv img { display: block; max-width: 100%; height: auto; }

/* ヒーロー：左に文字・右にイラスト */
.sv-hero { padding: 150px 0 40px; background: linear-gradient(180deg, #fff 0%, var(--sv-tint) 100%); }
.sv-hero__inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 40px; align-items: center; }
.sv-hero__en { margin: 0; font-family: var(--ff-en); font-size: 16px; font-weight: 700; letter-spacing: 0.24em; color: var(--c-brand); }
.sv-hero__title { margin: 8px 0 0; font-size: 64px; font-weight: 700; letter-spacing: 0.1em; color: #111; }
.sv-hero__q { margin: 32px 0 0; font-size: 24px; font-weight: 700; color: var(--sv-green); }
.sv-hero__catch { margin: 8px 0 0; white-space: nowrap; font-size: 38px; font-weight: 700; line-height: 1.6; letter-spacing: 0.06em; color: #111; }
.sv-hero__img img { width: min(100%, 460px); margin-left: auto; }

/* 導入：中央見出し＋4つの丸（線でつなぐ）＋下に箱 */
.sv-intro { padding: 96px 0 104px; background: var(--sv-tint); text-align: center; }
.sv-intro__title { margin: 0; font-size: 32px; font-weight: 700; line-height: 1.7; letter-spacing: 0.06em; color: #111; }
.sv-intro__title em { font-style: normal; color: var(--sv-green); background: linear-gradient(transparent 65%, rgba(66, 176, 50, 0.22) 65%); }
.sv-intro__lead { margin: 28px 0 0; font-size: 18px; line-height: 2.1; }
.sv-flow { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 64px 0 0; padding: 0; list-style: none; }
.sv-flow::before { content: ""; position: absolute; top: 70px; left: 12.5%; right: 12.5%; border-top: 2px dotted #B9CDB2; }
.sv-flow__item { position: relative; display: flex; flex-direction: column; }
.sv-flow__circle { display: grid; place-items: center; align-content: center; gap: 6px; width: 140px; height: 140px; margin: 0 auto; border-radius: 50%; background: var(--c-brand); color: #fff; box-shadow: 0 0 0 8px #fff; }
.sv-flow__circle .svc-ico { width: 36px; height: 36px; }
.sv-flow__circle b { font-size: 18px; line-height: 1.3; text-align: center; }
.sv-flow__box { flex: 1; display: flex; flex-direction: column; margin-top: 24px; border: 1px solid var(--sv-line); border-radius: 6px; background: #fff; overflow: hidden; }
.sv-flow__head { margin: 0; padding: 8px; background: #5A6B55; color: #fff; font-family: var(--ff-en); font-size: 15px; font-weight: 700; letter-spacing: 0.16em; }
.sv-flow__box ul { flex: 1; display: grid; align-content: center; margin: 0; padding: 16px 12px; list-style: none; font-size: 16px; line-height: 1.8; }
/* ゴール：上に下向き矢印、GOALのタブ、緑の二重枠、両脇にきらめき */
.sv-intro__goal { position: relative; margin: 72px auto 0; max-width: 980px; padding: 40px 64px 32px; border: 2px solid var(--c-brand); border-radius: 14px; background: #fff; box-shadow: 0 0 0 6px rgba(66, 176, 50, 0.12), 0 12px 32px rgba(46, 80, 40, 0.12); }
.sv-intro__goal::before { content: ""; position: absolute; left: 50%; top: -58px; translate: -50% 0; border: 16px solid transparent; border-top: 18px solid #B9CDB2; }
.sv-intro__goal-label { position: absolute; left: 50%; top: 0; translate: -50% -50%; display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 6px 22px; border-radius: 30px; background: var(--c-brand); color: #fff; font-family: var(--ff-en); font-size: 16px; font-weight: 700; letter-spacing: 0.2em; }
.sv-intro__goal-label .svc-ico { width: 18px; height: 18px; }
.sv-intro__goal-text { margin: 0; font-size: 24px; line-height: 1.7; letter-spacing: 0.06em; }
.sv-intro__goal-text b { color: var(--sv-green); background: linear-gradient(transparent 68%, rgba(66, 176, 50, 0.22) 68%); }
.sv-intro__goal-text { position: relative; }
.sv-intro__goal-text::before, .sv-intro__goal-text::after { content: "✦"; position: absolute; top: 50%; translate: 0 -50%; font-size: 20px; color: var(--c-brand); }
.sv-intro__goal-text::before { left: -40px; }
.sv-intro__goal-text::after { right: -40px; }

/* セクション */
.sv-sec { padding: 104px 0; background: #fff; }
.sv-sec--tint { background: var(--sv-tint); }
.sv-label { margin-bottom: 64px; text-align: center; }
.sv-label__icon { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto; border-radius: 50%; background: var(--sv-tint); color: var(--c-brand); }
.sv-sec--tint .sv-label__icon { background: #fff; }
.sv-label__en { margin: 12px 0 0; font-size: 16px; font-weight: 700; letter-spacing: 0.12em; color: #666; }
.sv-label__en span { margin-right: 10px; font-family: var(--ff-en); color: var(--c-brand); }
.sv-label__title { margin: 8px 0 0; font-size: 34px; font-weight: 700; line-height: 1.5; letter-spacing: 0.06em; color: var(--sv-green); }

/* 左右交互の行 */
.sv-row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 56px; align-items: center; }
.sv-row + .sv-row { margin-top: 88px; }
.sv-row--rev { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
.sv-row--rev .sv-row__text { order: 2; }
.sv-row__img img { width: 100%; max-width: 420px; margin: 0 auto; }
.sv-row--box { padding: 48px 56px; border: 1px solid #E2E4E0; border-radius: 12px; background: #F5F6F4; }
.sv-row--box .sv-row__img img { max-width: 340px; mix-blend-mode: multiply; }
.sv-row--round .sv-row__img img { max-width: 320px; border-radius: 50%; }
.sv-row--logo .sv-row__img img { max-width: 220px; }
.sv-row--logo .sv-row__img { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 8px; background: #fff; }
.sv-row__kicker { margin: 0 0 6px; font-size: 15px; font-weight: 700; letter-spacing: 0.08em; color: #777; }
.sv-row__title { margin: 0; padding-bottom: 14px; border-bottom: 2px solid var(--c-brand); font-size: 26px; font-weight: 700; line-height: 1.5; color: var(--sv-green); }
.sv-row__sub { margin: 16px 0 0; font-size: 18px; font-weight: 700; color: #222; }
.sv-row__name { margin: 20px 0 0; font-size: 22px; font-weight: 700; color: #111; }
.sv-row__name small { display: block; margin-top: 6px; font-size: 13px; font-weight: 400; line-height: 1.8; color: #777; }
.sv-row__text-p { margin: 24px 0 0; font-size: 17px; line-height: 2; }
.sv-row__text-p b { color: var(--sv-green); }

.sv-check { margin: 20px 0 0; padding: 0; list-style: none; }
.sv-check li { position: relative; padding: 12px 0 12px 32px; border-bottom: 1px dashed var(--sv-line); }
.sv-check li::before { content: ""; position: absolute; left: 4px; top: 19px; width: 14px; height: 8px; border-left: 2px solid var(--c-brand); border-bottom: 2px solid var(--c-brand); rotate: -45deg; }
.sv-check b { display: block; font-size: 18px; color: #111; }
.sv-check span { display: block; margin-top: 2px; font-size: 16px; color: #666; }
.sv-x { margin: 20px 0 0; padding: 0; list-style: none; }
.sv-x li { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 12px 0 12px 32px; border-bottom: 1px dashed var(--sv-line); position: relative; font-size: 17px; font-weight: 700; color: #111; }
.sv-x li::before, .sv-x li::after { content: ""; position: absolute; left: 6px; top: 22px; width: 14px; height: 2px; background: #B0B0B0; rotate: 45deg; }
.sv-x li::after { rotate: -45deg; }
.sv-x__but { font-weight: 400; color: var(--sv-green); }

.sv-list { margin: 20px 0 0; }
.sv-list > div { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px dashed var(--sv-line); font-size: 17px; }
.sv-list dt { white-space: nowrap; font-weight: 700; color: #111; }
.sv-list dt::before { content: "●"; margin-right: 8px; font-size: 10px; vertical-align: 2px; color: var(--c-brand); }
.sv-list dd { margin: 0; color: #555; }

.sv-stats { margin: 20px 0 0; }
.sv-stats > div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; padding: 10px 0; border-bottom: 1px dashed var(--sv-line); }
.sv-stats dt { font-size: 16px; color: #666; }
.sv-stats dd { margin: 0; font-size: 22px; font-weight: 700; color: var(--sv-green); }

/* 訪問付きプラン（オプション） */
.sv-visit { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 32px; align-items: center; margin-top: 64px; padding: 36px 48px; border: 2px solid var(--c-brand); border-radius: 12px; background: #fff; }
.sv-visit__icon { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; background: var(--sv-tint); color: var(--c-brand); }
.sv-visit__icon .svc-ico { width: 44px; height: 44px; }
/* 「★人気プラン」バッジ：目立つオレンジのピル */
.sv-visit__label { display: inline-flex; align-items: center; gap: 4px; margin: 0; padding: 4px 16px 4px 12px; border-radius: 999px; background: #F28C1E; color: #fff; font-size: 14px; font-weight: 700; letter-spacing: 0.08em; box-shadow: 0 3px 0 #D2700A; }
.sv-visit__label span { color: #FFE45C; font-size: 15px; }
.sv-visit__title { margin: 10px 0 0; font-size: 24px; font-weight: 700; color: var(--sv-green); }
.sv-visit__text { margin: 10px 0 0; font-size: 17px; line-height: 1.9; }

/* 中央円＋4ボックス（AI活用の例） */
.sv-map, .sv-plan { margin-top: 104px; }
.sv-map__title { margin: 0 0 40px; text-align: center; font-size: 24px; font-weight: 700; color: #111; }
.sv-map__title::after { content: ""; display: block; width: 40px; height: 3px; margin: 14px auto 0; background: var(--c-brand); }
.sv-map__grid { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 200px; }
.sv-map__box { border: 1px solid var(--sv-line); border-radius: 6px; background: #fff; overflow: hidden; }
.sv-map__head { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0; padding: 12px; background: var(--c-brand); color: #fff; font-size: 19px; font-weight: 700; }
.sv-map__head .svc-ico { width: 22px; height: 22px; }
.sv-map__box--2 .sv-map__head, .sv-map__box--3 .sv-map__head { background: #5A6B55; }
.sv-map__box ul { margin: 0; padding: 18px 24px; list-style: none; font-size: 17px; line-height: 2; }
.sv-map__box li::before { content: "・"; color: var(--c-brand); }
.sv-map__center { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center; align-content: center; width: 200px; height: 200px; border: 6px solid var(--sv-tint); border-radius: 50%; background: #fff; box-shadow: 0 6px 24px rgba(46, 80, 40, 0.12); text-align: center; }
.sv-map__center span { font-size: 15px; color: #666; }
.sv-map__center b { font-size: 20px; color: var(--sv-green); }
.sv-note { margin: 24px 0 0; font-size: 13px; line-height: 1.8; color: #777; text-align: center; }

/* 支援の流れ（横並びの行） */
.sv-plan__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: plan; }
.sv-plan__list li { position: relative; padding: 20px 14px; background: #fff; border-top: 4px solid #9DB495; font-size: 15px; line-height: 1.8; }
.sv-plan__list li.is-6 { border-top-color: var(--c-brand); }
.sv-plan__list b { display: block; margin-bottom: 6px; font-size: 18px; color: #111; }
.sv-plan__list .is-6 b { color: var(--sv-green); }
.sv-plan__list span { color: #555; }
.sv-plan__goals { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.sv-plan__goals > div:first-child { grid-column: span 4; } /* 3ヶ月プラン＝キックオフ〜3ヶ月目 */
.sv-plan__goals > div { padding: 16px 20px; background: #E3EEDF; font-size: 16px; line-height: 1.8; }
.sv-plan__goals > div.is-6 { grid-column: 1 / -1; background: var(--c-brand); color: #fff; }
.sv-plan__goals p { margin: 0; }
.sv-plan__term { font-weight: 700; }

.sv-price { margin: 72px auto 0; max-width: 760px; padding: 32px; border: 1px solid var(--sv-line); border-radius: 8px; background: #fff; text-align: center; }
.sv-price__title { margin: 0; font-size: 20px; font-weight: 700; color: #111; }
.sv-price__text { margin: 12px 0 0; font-size: 17px; line-height: 2; }

/* ピル型ボタン（中央） */
.sv-pill-wrap { margin: 64px 0 0; text-align: center; }
.sv-pill-wrap--left { margin-top: 28px; text-align: left; }
.sv-pill { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-width: 300px; padding: 16px 32px; border-radius: 40px; background: var(--c-brand); color: #fff; font-size: 18px; font-weight: 700; letter-spacing: 0.06em; box-shadow: 0 4px 0 #2E7A22; transition: translate 0.2s, box-shadow 0.2s, background 0.3s; }
.sv-pill__arrow { width: 18px; height: 18px; }
@media (hover: hover) {
  .sv-pill:hover { translate: 0 2px; box-shadow: 0 2px 0 #2E7A22; background: #4CC23A; }
}

/* 導入事例 */
.sv-case { margin: 16px 0 0; }
.sv-case > div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; align-items: start; padding: 10px 0; border-bottom: 1px dashed var(--sv-line); }
.sv-case dt { padding: 2px 0; border-radius: 3px; background: #5A6B55; color: #fff; text-align: center; font-size: 13px; font-weight: 700; }
.sv-case > div:last-child dt { background: var(--c-brand); }
.sv-case dd { margin: 0; font-size: 17px; line-height: 1.8; }
.sv-case__voice { margin: 16px 0 0; padding: 14px 18px; border-radius: 6px; background: #fff; font-size: 17px; font-weight: 700; color: var(--sv-green); }
.sv-check--simple li { padding-top: 10px; padding-bottom: 10px; }

/* ご契約までの流れ */
.sv-cflow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin: 0; padding: 0; list-style: none; }
.sv-cflow li { position: relative; text-align: center; font-size: 16px; line-height: 1.8; color: #555; }
.sv-cflow li:not(:last-child)::after { content: ""; position: absolute; top: 44px; right: -22px; border: 7px solid transparent; border-left: 10px solid #B9CDB2; }
.sv-cflow__icon { display: grid; place-items: center; width: 96px; height: 96px; margin: 0 auto; border-radius: 50%; background: var(--sv-tint); color: var(--c-brand); }
.sv-cflow__icon .svc-ico { width: 38px; height: 38px; }
.sv-cflow__no { margin: 16px 0 0; font-family: var(--ff-en); font-size: 13px; font-weight: 700; letter-spacing: 0.16em; color: var(--c-brand); }
.sv-cflow b { display: block; margin: 4px 0 6px; font-size: 19px; color: #111; }
.sv-cflow__note { margin: 40px 0 0; text-align: center; font-size: 18px; font-weight: 700; color: var(--sv-green); }

/* 最後：イラスト＋メッセージ */
.sv-end { padding: 88px 0; background: var(--sv-tint); }
.sv-end__inner { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 56px; align-items: center; }
.sv-end__title { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: 0.06em; color: var(--sv-green); }
.sv-end__text { margin: 16px 0 0; font-size: 18px; line-height: 2; }

/* その他のサービス */
.sv-others { padding: 80px 0 112px; background: #fff; }
.sv-others__title { margin: 0 0 32px; text-align: center; font-size: 22px; font-weight: 700; color: #111; }
.sv-others__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sv-other { position: relative; display: block; padding: 28px 56px 28px 24px; border: 1px solid var(--sv-line); border-radius: 8px; background: #fff; transition: border-color 0.3s, background 0.3s; }
.sv-other__no { font-family: var(--ff-en); font-size: 15px; font-weight: 700; color: var(--c-brand); }
.sv-other b { display: block; margin: 4px 0; font-size: 18px; color: #111; }
.sv-other > span:not(.sv-other__no) { font-size: 15px; color: #666; }
.sv-other__arrow { position: absolute; right: 20px; top: 50%; translate: 0 -50%; width: 20px; height: 20px; color: var(--c-brand); transition: right 0.3s; }
@media (hover: hover) {
  .sv-other:hover { border-color: var(--c-brand); background: var(--sv-tint); }
  .sv-other:hover .sv-other__arrow { right: 14px; }
}

@media (max-width: 1100px) {
  .sv-map__grid { gap: 200px 24px; }
  .sv-plan__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-plan__list li.is-6 { grid-column: 1 / -1; }
  .sv-plan__goals { grid-template-columns: minmax(0, 1fr); }
  .sv-plan__goals > div:first-child { grid-column: auto; }
}
@media (max-width: 767px) {
  .sv__inner { width: calc(100% - 32px); }
  .sv-hero { padding: 110px 0 24px; }
  .sv-hero__inner { grid-template-columns: minmax(0, 1fr); gap: 16px; text-align: center; }
  .sv-hero__title { font-size: 44px; }
  .sv-hero__q { margin-top: 20px; font-size: 18px; }
  .sv-hero__catch { font-size: 25px; }
  .sv-hero__img img { width: 80%; margin: 0 auto; }
  .sv-intro { padding: 64px 0 72px; }
  .sv-intro__title { font-size: 22px; }
  .sv-intro__lead { font-size: 15px; text-align: left; }
  .sv-intro__lead br { display: none; }
  .sv-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 12px; margin-top: 40px; }
  .sv-flow::before { display: none; }
  .sv-flow__circle { width: 112px; height: 112px; }
  .sv-flow__circle b { font-size: 15px; }
  .sv-flow__box ul { font-size: 14px; padding: 12px 8px; }
  .sv-intro__goal { margin-top: 64px; padding: 34px 16px 22px; }
  .sv-intro__goal-text { font-size: 18px; }
  .sv-intro__goal-text::before, .sv-intro__goal-text::after { display: none; }
  .sv-sec { padding: 72px 0; }
  .sv-label { margin-bottom: 40px; }
  .sv-label__title { font-size: 24px; }
  .sv-row, .sv-row--rev { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .sv-row--rev .sv-row__text { order: 0; }
  .sv-row__img { order: -1; }
  .sv-row__img img { max-width: 260px; }
  .sv-row--round .sv-row__img img { max-width: 200px; }
  .sv-row--logo .sv-row__img { aspect-ratio: auto; padding: 24px; }
  .sv-row--logo .sv-row__img img { max-width: 140px; }
  .sv-row + .sv-row { margin-top: 64px; }
  .sv-row--box { padding: 28px 18px; }
  .sv-row__title { font-size: 21px; }
  .sv-row__sub { font-size: 16px; }
  .sv-row__text-p { font-size: 15px; }
  .sv-row__text-p br { display: none; }
  .sv-list > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .sv-list dt { white-space: normal; }
  .sv-visit { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 48px; padding: 28px 18px; text-align: center; }
  .sv-visit__icon { width: 72px; height: 72px; margin: 0 auto; }
  .sv-visit__title { font-size: 20px; }
  .sv-visit__text { font-size: 15px; text-align: left; }
  .sv-visit__text br { display: none; }
  .sv-stats dd { font-size: 18px; }
  .sv-map, .sv-plan { margin-top: 72px; }
  .sv-map__title { font-size: 20px; margin-bottom: 28px; }
  .sv-map__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .sv-map__center { position: static; translate: none; order: -1; width: 150px; height: 150px; margin: 0 auto 12px; }
  .sv-map__center b { font-size: 17px; }
  .sv-note { text-align: left; }
  .sv-plan__list { grid-template-columns: minmax(0, 1fr); }
  .sv-plan__goals { grid-template-columns: minmax(0, 1fr); }
  .sv-price { margin-top: 56px; padding: 24px 16px; }
  .sv-price__text { font-size: 15px; text-align: left; }
  .sv-price__text br { display: none; }
  .sv-pill-wrap { margin-top: 48px; }
  .sv-pill { min-width: 0; width: 100%; }
  .sv-case > div { grid-template-columns: 72px minmax(0, 1fr); gap: 10px; }
  .sv-case dd { font-size: 15px; }
  .sv-cflow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 12px; }
  .sv-cflow li::after { display: none; }
  .sv-cflow__icon { width: 76px; height: 76px; }
  .sv-cflow b { font-size: 16px; }
  .sv-cflow li { font-size: 14px; }
  .sv-end { padding: 64px 0; }
  .sv-end__inner { grid-template-columns: minmax(0, 1fr); gap: 16px; text-align: center; }
  .sv-end__img img { width: 220px; margin: 0 auto; }
  .sv-end__title { font-size: 24px; }
  .sv-end__text { font-size: 15px; }
  .sv-end__text br { display: none; }
  .sv-pill-wrap--left { text-align: center; }
  .sv-others { padding: 56px 0 80px; }
  .sv-others__list { grid-template-columns: minmax(0, 1fr); }
}

/* マーケティング支援（/service/marketing）：自社ツール紹介の2枚カード */
.sv-tools__lead { margin: 40px 0 0; font-size: 17px; line-height: 2; text-align: center; color: #333; }
.sv-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 48px; }
.sv-tool { position: relative; display: flex; flex-direction: column; padding: 44px 40px 40px; border: 3px solid transparent; border-radius: 28px; background: #F2F8EE; transition: transform 0.35s var(--ease-out), background-color 0.35s, border-color 0.35s, box-shadow 0.35s; }
.sv-tool__price { margin: 10px 0 0; font-size: 15px; font-weight: 700; color: #111; }
.sv-tool__price b { margin: 0 2px 0 6px; font-family: var(--ff-en, inherit); font-size: 30px; color: var(--sv-green); letter-spacing: 0.02em; }
.sv-tool__price small { font-size: 13px; font-weight: 500; color: #555; }
.sv-tool__tag { align-self: flex-start; margin: 0 0 14px; padding: 4px 14px; border-radius: 999px; background: var(--c-brand); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; transition: background-color 0.35s, color 0.35s; }
.sv-tool__sub { margin: 0; font-size: 15px; font-weight: 700; color: var(--sv-green); letter-spacing: 0.06em; transition: color 0.35s; }
.sv-tool__name { margin: 6px 0 0; font-size: 30px; font-weight: 700; color: #111; letter-spacing: 0.04em; transition: color 0.35s; }
.sv-tool__text { margin: 16px 0 0; font-size: 16px; line-height: 1.9; color: #333; transition: color 0.35s; }
.sv-tool__list { margin: 22px 0 0; padding: 0; list-style: none; }
.sv-tool__list li { position: relative; margin-top: 8px; padding: 10px 16px 10px 42px; border-radius: 12px; background: #fff; font-size: 16px; line-height: 1.7; transition: background-color 0.35s, color 0.35s; }
.sv-tool__list li::before { content: ""; position: absolute; left: 18px; top: 19px; width: 12px; height: 7px; border-left: 2.5px solid var(--c-brand); border-bottom: 2.5px solid var(--c-brand); transform: rotate(-45deg); }
.sv-tool__link { margin: auto 0 0; padding-top: 24px; }
.sv-tool__link a { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--sv-green); border-bottom: 1px solid currentColor; transition: color 0.35s; }
.sv-tool__link .sv-pill__arrow { width: 16px; height: 16px; }
/* マウスを乗せると少し大きく＆緑の枠・白地に */
@media (hover: hover) {
  .sv-tool:hover { transform: scale(1.04); border-color: var(--c-brand); background: #fff; box-shadow: 0 18px 40px rgba(66, 176, 50, 0.18); z-index: 1; }
  .sv-tool:hover .sv-tool__list li { background: #F2F8EE; }
}
.sv-note--center { text-align: center; }
/* マーケティング支援：サービスは一連の流れではなく別々のメニュー → つなぎの点線を消す */
.sv-flow--menu::before { display: none; }
.sv-menu-note { margin: 28px 0 0; font-size: 17px; font-weight: 700; text-align: center; color: var(--sv-green); }
@media (max-width: 767px) { .sv-menu-note { font-size: 15px; text-align: left; } }
.sv-label__title { word-break: keep-all; }  /* 見出しを言葉の途中で折り返さない */
@media (max-width: 767px) { .pc-br { display: none; } }
/* 長いサービス名（マーケティング支援）は1行に収まるよう少し小さく */
.sv-hero__title--long { font-size: clamp(40px, 4.2vw, 58px); letter-spacing: 0.04em; word-break: keep-all; }
@media (max-width: 1100px) { .sv-tools { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) {
  .sv-tools__lead { margin-top: 28px; font-size: 15px; text-align: left; }
  .sv-tools { gap: 20px; margin-top: 28px; }
  .sv-tool { padding: 32px 20px 28px; border-radius: 20px; }
  .sv-tool__list li { padding: 9px 12px 9px 38px; }
  .sv-tool__list li::before { left: 15px; top: 17px; }
  .sv-tool__name { font-size: 24px; }
  .sv-hero__title--long { font-size: 34px; }
  .sv-tool__text, .sv-tool__list li { font-size: 15px; }
}

/* 2/3幅にナビが入りきらない幅（〜1320px）ではナビを隠す */
/* ===== 事業内容 ===== */
.service {
  --svc-gray: #E7EBED;      /* 下側の薄いグレー（参考の実測値） */
  --svc-w: 88.4%;           /* カードの並びの幅（参考：1917px幅で1696px） */
  --svc-gap-x: 23px;        /* カードの横のすき間 */
  --svc-gap-y: 30px;        /* カードの縦のすき間 */
  --card-pad: 44px 56px 52px 56px;
  --fs-card-title: 40px;
  --fs-card-lead: 18px;
  --fs-card-text: 18px;
  --lh-card-text: 2.1;
  --btn-w: 90px;
  --btn-h: 50px;
  --fs-marquee: 176px;
  --dur-marquee: 60s;
  position: relative;
  overflow: hidden;
  background: var(--svc-gray);
  padding: 120px 0 140px;
  color: #111;
}
/* 上は黒、右下がりの斜めの線で薄いグレーに切り替わる（傾き約5.8°） */
.service__bg {
  position: absolute;
  inset: 0;
  background: var(--c-bg);
  clip-path: polygon(0 0, 100% 0, 100% 52%, 0 calc(52% - 10vw));
}
.service__inner {
  position: relative;
  width: var(--svc-w);
  margin: 0 auto;
}
.service__heading { color: #fff; }
.service__en {
  margin: 0 0 12px;
  font-family: var(--ff-en);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--c-brand);
}
.service__title {
  margin: 0;
  font-family: var(--ff-ja);
  font-size: 44px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.2;
}

/* 後ろの抜き文字：左から右へずっと流れる */
.service__marquee {
  position: relative;
  margin-top: 24px;
  overflow: hidden;
  pointer-events: none;
}
.service__track {
  display: flex;
  width: max-content;
  animation: marquee var(--dur-marquee) linear infinite;
}
.service__track span {
  padding-right: 0.45em;
  font-family: var(--ff-en);
  font-size: var(--fs-marquee);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 2px rgba(255, 255, 255, 0.4);
}
@keyframes marquee {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

/* カード：2列。1行目は流れる文字の下半分に重ねる */
.service__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--svc-gap-y) var(--svc-gap-x);
  margin-top: calc(var(--fs-marquee) * -0.45);
}
.card {
  position: relative;
  padding: var(--card-pad);
  background: #fff;
  border: 1px solid #111;
  border-radius: 8px;
}
.card__lead {
  margin: 0;
  font-family: var(--ff-ja);
  font-size: var(--fs-card-lead);
  font-weight: 500;
  letter-spacing: 0.06em;
}
.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 10px;
}
.card__title {
  margin: 0;
  font-family: var(--ff-ja);
  font-size: var(--fs-card-title);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.3;
  display: flex;
  align-items: baseline;
  gap: 20px;
  min-width: 0;
}
/* 番号：タイトルの左に並べる */
.card__num {
  flex-shrink: 0;
  font-family: var(--ff-en);
  font-size: var(--fs-card-title);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  color: var(--c-brand);
}
.card__name {
  min-width: 0;
  word-break: auto-phrase;  /* 日本語を言葉の区切りで折り返す */
  overflow-wrap: anywhere;  /* 入りきらないときは途中でも折り返す（はみ出し防止） */
}
.card__btn {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: var(--btn-w);
  height: var(--btn-h);
  border-radius: calc(var(--btn-h) / 2);
  background: #0A0A0A;
  color: #fff;
  transition: transform 0.3s var(--ease-out), background 0.3s;
}
.card__btn svg { width: 22px; height: 22px; transition: transform 0.3s var(--ease-out); }
.card__btn:hover { background: var(--c-brand); }
.card__btn:hover svg { transform: translateX(4px); }
/* カードの四角のどこを押しても、矢印ボタンのリンク先へ飛ぶ（ページがあるカードだけ） */
.card__btn:not([href="#"])::after { content: ""; position: absolute; inset: 0; border-radius: 8px; }
.card:has(.card__btn:not([href="#"])) { cursor: pointer; }
.card__text {
  margin: 30px 0 0;
  font-family: var(--ff-ja);
  font-size: var(--fs-card-text);
  line-height: var(--lh-card-text);
  letter-spacing: 0.06em;
  color: #222;
  word-break: auto-phrase;  /* 言葉の区切りで折り返す（「す。」だけ次の行に残るのを防ぐ） */
}

/* カード内のお知らせ（赤字） */
.card__note {
  margin: 12px 0 0;
  font-family: var(--ff-ja);
  font-size: var(--fs-card-text);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.6;
  color: #E5322D;
}

.nowrap { white-space: nowrap; }  /* 「♪」だけ次の行に落ちないように */

/* スクロールで下からふわっと出る */
.js-reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
.js-reveal.is-in { opacity: 1; transform: none; }

/* カードのホバー：ぐいんっと少し大きくなり（行き過ぎて戻るばね感）、黒地に白文字へ切り替わる
   ※ 出てくる動き（transform）とぶつからないよう、拡大は scale で行う */
.card {
  transition:
    opacity 0.8s var(--ease-out),
    transform 0.8s var(--ease-out),
    scale 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    background-color 0.3s,
    color 0.3s,
    border-color 0.3s,
    box-shadow 0.3s;
}
.card__lead, .card__text { transition: color 0.3s; }
@media (hover: hover) {
  .card:hover {
    scale: 1.04;
    z-index: 1;
    background: #0A0A0A;
    border-color: #0A0A0A;
    color: #fff;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.28);
  }
  .card:hover .card__text { color: rgba(255, 255, 255, 0.85); }
  .card:hover .card__btn { background: #fff; color: #0A0A0A; }
  .card:hover .card__btn:hover,
  .card:has(.card__btn:not([href="#"])):hover .card__btn { background: var(--c-brand); color: #fff; }
  .card:has(.card__btn:not([href="#"])):hover .card__btn svg { transform: translateX(4px); }
}

@media (max-width: 1100px) {
  .service__cards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .service {
    --svc-w: calc(100% - 32px);
    --card-pad: 28px 24px 32px 24px;
    --fs-card-title: 26px;
    --fs-card-lead: 15px;
    --fs-card-text: 16px;
    --lh-card-text: 2;
    --btn-w: 64px;
    --btn-h: 40px;
    --fs-marquee: 88px;
    padding: 88px 0 96px;
  }
  .service__title { font-size: 32px; }
}

@media (max-width: 1320px) {
  .nav { display: none; }
  .contact { margin-left: auto; }
}
@media (max-width: 767px) {
  :root { --header-top: 12px; --header-w: calc(100% - 24px); --header-h: 60px; --header-center: 42px; --menu-size: 44px; --pad-bottom: 40px; }
  .header { padding-left: 20px; }
  .logo span { font-size: 18px; }
  .logo img { height: 24px; }
  .contact { display: none; }
  .menu { margin-left: auto; }
  .hero__caption { display: none; }
  .scroll { right: 8px; }  /* 英文を出さないスマホは右下に */
}

@media (prefers-reduced-motion: reduce) {
  .sp-menu, .sp-menu.is-open, .menu span { transition: none; }
  .worry__card { transition: none; }
  .worry__card:hover { scale: 1; }
  .card { transition: none; }
  .card:hover { scale: 1; }
  html { scroll-behavior: auto; }
  .scroll__bar::before { animation: none; bottom: 0; }
  .service__track { animation: none; }
  .js-reveal { opacity: 1; transform: none; transition: none; }
  .hero__title img { animation: none; clip-path: none; }
  .js-shuffle .ch { opacity: 1; }
  .hero__video { transition: none; }
}

/* CTA前のひとこと（マーケティング支援） */
.sv-cta-lead { margin: 72px 0 0; font-size: 24px; font-weight: 700; line-height: 1.6; text-align: center; color: #111; letter-spacing: 0.04em; word-break: keep-all; }
.sv-cta-lead + .sv-pill-wrap { margin-top: 24px; }
@media (max-width: 767px) { .sv-cta-lead { margin-top: 48px; font-size: 19px; } }

/* 経営支援・コミュニティ（/service/community）：できること6枚・会員の声 */
.sv-items { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin-top: 56px; }
.sv-item { flex: 0 1 calc((100% - 48px) / 3); }
.sv-item { padding: 36px 28px 32px; border: 3px solid transparent; border-radius: 24px; background: #F2F8EE; text-align: center; transition: transform 0.35s var(--ease-out), background-color 0.35s, border-color 0.35s; }
.sv-item__icon { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #fff; color: var(--c-brand); }
.sv-item__icon svg { width: 32px; height: 32px; }
.sv-item__name { margin: 16px 0 0; font-size: 21px; font-weight: 700; color: #111; letter-spacing: 0.04em; }
.sv-item__text { margin: 10px 0 0; font-size: 15px; line-height: 1.9; color: #333; text-align: left; }
@media (hover: hover) { .sv-item:hover { transform: scale(1.04); border-color: var(--c-brand); background: #fff; } }
.sv-score { font-family: var(--ff-en); font-size: 1.5em; font-style: normal; color: var(--sv-green); letter-spacing: 0.02em; }
.sv-score__of { font-size: 0.6em; color: #555; }
.sv-voices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 40px 0 0; }
.sv-voice { position: relative; margin: 0; padding: 32px 32px 28px 56px; border-radius: 20px; background: #fff; }
.sv-voice::before { content: "“"; position: absolute; left: 20px; top: 10px; font-family: Georgia, serif; font-size: 56px; line-height: 1; color: var(--c-brand); }
.sv-voice blockquote { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.9; color: #111; }
.sv-voice figcaption { margin-top: 12px; font-size: 14px; color: #666; }
@media (max-width: 1100px) { .sv-item { flex-basis: calc((100% - 24px) / 2); } }
@media (max-width: 767px) {
  .sv-voices { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 32px; }
  .sv-items { gap: 16px; margin-top: 32px; }
  .sv-item { flex-basis: 100%; }
  .sv-item { padding: 28px 20px 24px; }
  .sv-voice { padding: 24px 20px 20px 48px; }
  .sv-voice::before { left: 14px; }
  .sv-voice blockquote { font-size: 15px; }
}
/* めんたるサロンの月額料金 */
.sv-fee { margin: 8px 0 0; font-size: 18px; font-weight: 700; color: #111; }
.sv-fee b { margin: 0 4px 0 8px; font-family: var(--ff-en); font-size: 44px; color: var(--sv-green); letter-spacing: 0.02em; }
.sv-fee small { font-size: 15px; font-weight: 500; color: #555; }
#voice .sv-price { margin-top: 56px; }
@media (max-width: 767px) { .sv-fee b { font-size: 36px; } #voice .sv-price { margin-top: 40px; } }

/* コミュニティページ：ヒーロー（1行のタイトル・緑のキャッチ） */
.sv-hero__title--xl { font-size: clamp(36px, 3.6vw, 52px); letter-spacing: 0.04em; white-space: nowrap; }
.sv-hero__catch--green { margin-top: 28px; color: var(--sv-green); }
@media (max-width: 767px) { .sv-hero__title--xl { font-size: 29px; letter-spacing: 0.02em; } .sv-hero__catch--green { margin-top: 16px; } }
/* できること：回数バッジと動画教材の中身 */
.sv-item__freq { display: inline-block; margin: 8px 0 0; padding: 2px 14px; border-radius: 999px; background: var(--c-brand); color: #fff; font-size: 14px; font-weight: 700; letter-spacing: 0.06em; }
.sv-item__list { margin: 12px 0 0; padding: 0; list-style: none; text-align: left; }
.sv-item__list li { position: relative; padding: 2px 0 2px 18px; font-size: 14px; font-weight: 700; color: #333; }
.sv-item__list li::before { content: "└"; position: absolute; left: 0; color: var(--c-brand); }
/* 料金：月額＋1回あたりの金額 */
.sv-fee-box { margin: 56px auto 0; max-width: 760px; padding: 36px 32px 32px; border: 3px solid var(--c-brand); border-radius: 24px; background: #fff; text-align: center; }
.sv-fee-box__title { margin: 0; font-size: 20px; font-weight: 700; color: #111; }
.sv-fee-box__calc { margin-top: 24px; padding: 24px 24px 20px; border-radius: 16px; background: #F2F8EE; }
.sv-fee-box__lead { margin: 0; font-size: 16px; font-weight: 700; color: #111; }
.sv-fee-box__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.sv-fee-box__list li { display: flex; flex-direction: column; gap: 2px; padding: 12px 8px; border-radius: 12px; background: #fff; }
.sv-fee-box__list b { font-size: 14px; color: #333; }
.sv-fee-box__list span { font-size: 18px; font-weight: 700; color: var(--sv-green); }
.sv-fee-box__per { margin: 20px 0 0; font-size: 17px; font-weight: 700; color: #111; }
.sv-fee-box__per b { margin: 0 2px 0 6px; font-family: var(--ff-en); font-size: 34px; color: var(--sv-green); }
.sv-fee-box__per small { display: block; font-size: 13px; font-weight: 500; color: #666; }
@media (max-width: 767px) {
  .sv-fee-box { margin-top: 40px; padding: 28px 16px 24px; }
  .sv-fee-box__calc { padding: 20px 12px 16px; }
  .sv-fee-box__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-fee-box__per { font-size: 15px; }
  .sv-fee-box__per b { font-size: 28px; }
}

/* ===== コミュニティページ 2026-10-27：満足度の星・会員の声（参考画像の形）・料金を開くボタン ===== */
/* 満足度：グレーの星5つの上に、金色の星を満足度の分（--rate）だけ重ねる。表示されたら左から塗られる */
.sv-rating { display: flex; align-items: center; justify-content: center; gap: 24px; margin: -24px 0 0; }
.sv-rating__stars { position: relative; display: inline-block; font-size: 52px; line-height: 1; letter-spacing: 0.06em; }
.sv-rating__base { color: #DCE6D6; }
.sv-rating__fill { position: absolute; left: 0; top: 0; width: 0; overflow: hidden; white-space: nowrap; color: #F5B301; text-shadow: 0 2px 10px rgba(245, 179, 1, 0.45); transition: width 1.6s cubic-bezier(.2,.8,.2,1) 0.3s; }
.sv-rating.is-in .sv-rating__fill { width: var(--rate); }
.sv-rating__spark { position: absolute; font-style: normal; color: #FFD23F; opacity: 0; pointer-events: none; }
.sv-rating__spark--1 { top: -18px; left: 8%; font-size: 20px; }
.sv-rating__spark--2 { top: -26px; right: 22%; font-size: 26px; }
.sv-rating__spark--3 { bottom: -16px; right: -4%; font-size: 18px; }
.sv-rating.is-in .sv-rating__spark { animation: sv-twinkle 2.4s ease-in-out 1.8s infinite; }
.sv-rating.is-in .sv-rating__spark--2 { animation-delay: 2.4s; }
.sv-rating.is-in .sv-rating__spark--3 { animation-delay: 3s; }
@keyframes sv-twinkle { 0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); } 40% { opacity: 1; transform: scale(1.15) rotate(20deg); } 70% { opacity: 0; transform: scale(0.6) rotate(40deg); } }
.sv-rating__num { margin: 0; font-weight: 700; color: #111; }
.sv-rating__num b { font-family: var(--ff-en); font-size: 64px; line-height: 1; color: var(--sv-green); letter-spacing: 0.02em; }
.sv-rating__num small { margin-left: 4px; font-size: 20px; color: #555; }
#voice .sv-note--center { margin-top: 16px; }

/* 会員の声：上にラベル、アイコン＋属性＋星、その下に本文 */
.sv-voices { gap: 48px 24px; margin-top: 64px; }
.sv-voice { position: relative; padding: 40px 28px 28px; border-radius: 20px; background: #fff; }
.sv-voice::before { content: none; }
.sv-voice__tag { position: absolute; top: 0; left: 50%; margin: 0; padding: 6px 28px; border-radius: 999px; background: var(--c-brand); color: #fff; font-size: 15px; font-weight: 700; letter-spacing: 0.06em; white-space: nowrap; transform: translate(-50%, -50%); }
.sv-voice__head { display: flex; align-items: center; gap: 14px; }
.sv-voice__avatar { flex: none; width: 56px; height: 56px; }
.sv-voice__avatar svg { width: 100%; height: 100%; display: block; }
.sv-voice figcaption { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.sv-voice figcaption b { font-size: 16px; color: #111; }
.sv-voice__stars { font-size: 18px; letter-spacing: 0.08em; color: #F5B301; }
.sv-voice blockquote { margin: 16px 0 0; font-size: 16px; font-weight: 500; line-height: 1.9; color: #333; }

/* 料金：参加できる内容を先に見せて、ボタンで月額を開く */
.sv-fee-box { padding: 36px 32px; }
.sv-fee-box__lead { margin: 0; font-size: 20px; font-weight: 700; color: #111; }
.sv-fee-box__open { display: inline-flex; align-items: center; justify-content: center; min-width: 300px; margin-top: 28px; padding: 16px 32px; border: 3px solid var(--c-brand); border-radius: 40px; background: #fff; color: var(--sv-green); font: inherit; font-size: 17px; font-weight: 700; letter-spacing: 0.06em; cursor: pointer; transition: background-color 0.3s, color 0.3s; }
.sv-fee-box__open:hover { background: var(--c-brand); color: #fff; }
.sv-fee-box__detail { margin-top: 24px; padding: 24px 16px 20px; border-radius: 16px; background: #F2F8EE; animation: sv-fee-in 0.5s var(--ease-out); }
.sv-fee-box__detail .sv-fee { margin: 0; }
@keyframes sv-fee-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (max-width: 767px) {
  .sv-rating { flex-direction: column; gap: 8px; margin-top: -16px; }
  .sv-rating__stars { font-size: 40px; }
  .sv-rating__num b { font-size: 48px; }
  .sv-voices { gap: 40px; margin-top: 48px; }
  .sv-voice { padding: 36px 20px 22px; }
  .sv-voice blockquote { font-size: 15px; }
  .sv-fee-box { padding: 28px 16px 24px; }
  .sv-fee-box__open { min-width: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .sv-rating__fill { transition: none; } .sv-rating.is-in .sv-rating__spark { animation: none; } }
.sv-fee-box__list li { background: #F2F8EE; }
.sv-fee-box__open[hidden] { display: none; }

/* 2026-10-27 追加修正：星は最初から塗っておく／動画教材の中身は★／月額ボタンはオレンジで目立たせる */
.sv-rating__fill { width: var(--rate); transition: none; }
.sv-item__list li::before { content: "★"; color: #F5B301; font-size: 13px; top: 3px; }
.sv-fee-box__open { position: relative; gap: 10px; border: none; background: linear-gradient(135deg, #FF9F2E, #F27A12); color: #fff; box-shadow: 0 5px 0 #C85E05, 0 10px 24px rgba(242, 122, 18, 0.35); animation: sv-fee-pulse 2.2s ease-in-out infinite; transition: translate 0.2s, box-shadow 0.2s, filter 0.2s; }
.sv-fee-box__open:hover { background: linear-gradient(135deg, #FF9F2E, #F27A12); color: #fff; filter: brightness(1.06); translate: 0 2px; box-shadow: 0 3px 0 #C85E05, 0 8px 18px rgba(242, 122, 18, 0.35); }
.sv-fee-box__arrow { width: 22px; height: 22px; animation: sv-fee-bounce 1.2s ease-in-out infinite; }
@keyframes sv-fee-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes sv-fee-bounce { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .sv-fee-box__open, .sv-fee-box__arrow { animation: none; } }

/* コミュニティページ：めんたるサロンの想い（イントロのすぐ下） */
.sv-thought { position: relative; max-width: 860px; margin: 64px auto 0; padding: 56px 48px 48px; border-radius: 28px; background: #F2F8EE; text-align: center; }
.sv-thought__label { position: absolute; top: 0; left: 50%; margin: 0; padding: 8px 28px; border-radius: 999px; background: var(--c-brand); color: #fff; font-size: 16px; font-weight: 700; letter-spacing: 0.08em; white-space: nowrap; transform: translate(-50%, -50%); }
.sv-thought__title { margin: 0; font-size: 30px; font-weight: 700; line-height: 1.6; letter-spacing: 0.06em; color: var(--sv-green); word-break: keep-all; }
.sv-thought__text { margin: 24px 0 0; font-size: 17px; line-height: 2.1; color: #333; }
.sv-thought__text + .sv-thought__text { margin-top: 16px; }
@media (max-width: 767px) {
  .sv-thought { margin-top: 48px; padding: 44px 20px 32px; border-radius: 20px; }
  .sv-thought__title { font-size: 22px; }
  .sv-thought__text { font-size: 15px; text-align: left; }
  .sv-thought__text br { display: none; }
}
.sv-thought { background: #fff; border: 2px solid var(--c-brand); box-shadow: 0 12px 32px rgba(66, 176, 50, 0.12); }

/* ===== Webサイト制作（/service/web）：ボタン2つ・5ステップ・比較表・よくある質問 ===== */
.sv-pill-wrap--pair { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 40px; }
.sv-pill-wrap--pair.sv-pill-wrap--left { justify-content: flex-start; }
.sv-pill--ghost { background: #fff; color: var(--sv-green); box-shadow: inset 0 0 0 2px var(--c-brand), 0 4px 0 #2E7A22; }
.sv-pill--ghost:hover { background: #F2F8EE; }
.sv-intro .sv-note--center { margin-top: 16px; }
.sv-row__sub--after { margin-top: 24px; }
.sv-cflow--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.sv-compare { max-width: 980px; margin: 40px auto 0; overflow-x: auto; }
.sv-compare table { width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0; background: #fff; border-radius: 20px; overflow: hidden; font-size: 16px; line-height: 1.8; }
.sv-compare th, .sv-compare td { padding: 18px 20px; border-bottom: 1px solid var(--sv-line); text-align: left; vertical-align: top; }
.sv-compare thead th { background: #F4F4F4; font-size: 15px; color: #555; }
.sv-compare thead th.is-us { background: var(--c-brand); color: #fff; }
.sv-compare tbody th { width: 120px; font-weight: 700; color: #111; white-space: nowrap; }
.sv-compare tbody td:last-child { background: #F2F8EE; font-weight: 700; color: #111; }
.sv-compare tbody tr:last-child th, .sv-compare tbody tr:last-child td { border-bottom: none; }
.sv-faqs { max-width: 880px; margin: 0 auto; }
.sv-faq { margin-top: 16px; border: 1px solid var(--sv-line); border-radius: 16px; background: #fff; }
.sv-faq summary { position: relative; padding: 22px 56px 22px 60px; font-size: 17px; font-weight: 700; color: #111; cursor: pointer; list-style: none; }
.sv-faq summary::-webkit-details-marker { display: none; }
.sv-faq summary::before { content: "Q"; position: absolute; left: 22px; top: 18px; font-family: var(--ff-en); font-size: 24px; color: var(--c-brand); }
.sv-faq summary::after { content: "+"; position: absolute; right: 24px; top: 16px; font-size: 26px; font-weight: 400; color: var(--c-brand); transition: rotate 0.3s; }
.sv-faq[open] summary::after { rotate: 45deg; }
.sv-faq p { position: relative; margin: 0; padding: 0 28px 24px 60px; font-size: 16px; line-height: 1.9; color: #333; }
.sv-faq p::before { content: "A"; position: absolute; left: 22px; top: -4px; font-family: var(--ff-en); font-size: 24px; font-weight: 700; color: #F27A12; }
@media (max-width: 1100px) { .sv-cflow--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .sv-pill-wrap--pair { flex-direction: column; gap: 14px; }
  .sv-cflow--5 { grid-template-columns: minmax(0, 1fr); }
  .sv-compare table { font-size: 14px; }
  .sv-faq summary { padding: 18px 44px 18px 48px; font-size: 15px; }
  .sv-faq summary::before { left: 16px; top: 14px; }
  .sv-faq p { padding: 0 18px 20px 48px; font-size: 15px; }
  .sv-faq p::before { left: 16px; }
}
/* 見出し直下にキャッチだけを置くとき（Webサイト制作） */
.sv-hero__catch--solo { margin-top: 28px; }
@media (max-width: 767px) { .sv-hero__catch--solo { margin-top: 16px; } }

/* ===== Webサイト制作（無料ホームページ制作版）2026-10-27 ===== */
.sv-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 28px 0 0; padding: 0; list-style: none; }
.sv-badges li { padding: 6px 18px; border-radius: 999px; background: #fff; border: 2px solid var(--c-brand); color: var(--sv-green); font-size: 15px; font-weight: 700; }
/* 無料の中身：3枚 */
.sv-frees { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 48px; }
.sv-free { padding: 32px 28px; border-radius: 24px; background: #fff; }
.sv-free__icon { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #F2F8EE; color: var(--c-brand); }
.sv-free__icon svg { width: 26px; height: 26px; }
.sv-free--1 .sv-free__icon { background: #F4F4F4; color: #888; }
.sv-free--2 .sv-free__icon { background: #FFF1E3; color: #F27A12; }
.sv-free__name { margin: 14px 0 0; font-size: 20px; font-weight: 700; color: #111; }
.sv-free__list { margin: 14px 0 0; padding: 0; list-style: none; }
.sv-free__list li { position: relative; padding: 8px 0 8px 22px; border-top: 1px dashed var(--sv-line); font-size: 15px; line-height: 1.8; color: #333; }
.sv-free__list li::before { content: "●"; position: absolute; left: 2px; top: 8px; font-size: 9px; color: var(--c-brand); }
/* 料金プラン：4枚（無料を強調） */
.sv-plans2 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 48px; }
.sv-plan2 { position: relative; display: flex; flex-direction: column; padding: 32px 24px 28px; border: 2px solid var(--sv-line); border-radius: 24px; background: #fff; text-align: center; }
.sv-plan2.is-free { border: 3px solid var(--c-brand); background: #F2F8EE; }
.sv-plan2__badge { position: absolute; top: 0; left: 50%; margin: 0; padding: 4px 16px; border-radius: 999px; background: #F27A12; color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; transform: translate(-50%, -50%); }
.sv-plan2__name { margin: 0; font-size: 20px; font-weight: 700; color: #111; }
.sv-plan2__price { margin: 10px 0 0; font-size: 14px; font-weight: 700; color: #111; }
.sv-plan2__price b { margin: 0 2px 0 4px; font-family: var(--ff-en); font-size: 34px; color: var(--sv-green); }
.sv-plan2__price small { display: block; font-size: 12px; font-weight: 500; color: #666; }
.sv-plan2__text { margin: 14px 0 0; padding-top: 14px; border-top: 1px dashed var(--sv-line); font-size: 14px; line-height: 1.8; color: #333; text-align: left; }
/* 実績：正直な失敗談 */
.sv-honest { margin-top: 24px; padding: 20px 22px; border-left: 4px solid #F27A12; border-radius: 0 12px 12px 0; background: #FFF6EC; }
.sv-honest__title { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: #C85E05; }
.sv-honest p:last-child { margin: 0; font-size: 15px; line-height: 1.9; color: #333; }
/* AIデモの小さな案内 */
.sv-demo { max-width: 880px; margin: 40px auto 0; padding: 20px 24px; border-radius: 16px; background: #F4F4F4; font-size: 15px; line-height: 1.8; text-align: center; color: #333; }
.sv-demo a { margin-left: 8px; font-weight: 700; color: var(--sv-green); text-decoration: underline; }
@media (max-width: 1100px) { .sv-frees { grid-template-columns: minmax(0, 1fr); } .sv-plans2 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; } }
@media (max-width: 767px) {
  .sv-badges li { font-size: 13px; padding: 5px 14px; }
  .sv-frees { gap: 16px; margin-top: 32px; }
  .sv-free { padding: 24px 20px; }
  .sv-plans2 { grid-template-columns: minmax(0, 1fr); margin-top: 36px; }
  .sv-demo { padding: 16px; text-align: left; }
}
.sv-pill[aria-disabled="true"] { cursor: default; }

/* Webサイト制作：無料ヒアリングの申し込みフォーム（トップのお問い合わせフォームの見た目を流用） */
.contact-form--card { max-width: 820px; margin: 40px auto 0; padding: 48px 48px 40px; border: 0; border-radius: 24px; background: #F2F8EE; }
.contact-form--card .form-actions { text-align: center; }
.contact-form--card .form-error { color: #E5322D; font-size: 14px; font-weight: 700; }
.form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 767px) { .contact-form--card { padding: 28px 16px 24px; } }

/* 「無料」の中身：上に2枚、「お約束すること」は下に横長 */
.sv-frees { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sv-free--2 { grid-column: 1 / -1; }
@media (max-width: 1100px) { .sv-frees { grid-template-columns: minmax(0, 1fr); } }
.sv-free--0 { background: #fff; border: 2px solid var(--c-brand); }
.sv-free--1 { background: #EDEDED; }
.sv-free--1 .sv-free__icon { background: #fff; }
.sv-free--1 .sv-free__list li { border-top-color: #CFCFCF; }
.sv-free--1 .sv-free__list li::before { color: #999; }
/* 箇条の点を1行目の文字の高さの真ん中にそろえる */
.sv-free__list li::before { content: ""; font-size: inherit; top: calc(8px + 0.9em - 3.5px); left: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--c-brand); }
.sv-free--1 .sv-free__list li::before { background: #999; }
.sv-free--2 .sv-free__name { margin-top: 0; }
.sv-free-promise { margin: 40px 0 0; text-align: center; font-size: 20px; line-height: 1.8; color: #111; }
.sv-free-promise strong { text-decoration: underline; text-decoration-color: var(--c-brand); text-decoration-thickness: 2px; text-underline-offset: 6px; }
@media (max-width: 767px) { .sv-free-promise { margin-top: 28px; font-size: 17px; } }
/* 人気プラン（スタンダード） */
.sv-plan2.is-popular { border: 3px solid #F27A12; background: #FFF6EC; }
.sv-plan2.is-popular .sv-plan2__price b { color: #F27A12; }
.sv-plan2__text b { font-weight: 700; color: #111; white-space: nowrap; }
.sv-row__text .sv-note { text-align: left; }

/* コラム一覧：1コラム1行の横長リスト（2026-10-27） */
.col-list > li[hidden] { display: none; }
.col-list { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.col-card { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; grid-template-areas: "meta title read" "meta desc read"; column-gap: 32px; align-items: center; padding: 22px 28px; }
.col-card__meta { grid-area: meta; flex-direction: column; align-items: flex-start; gap: 8px; }
.col-card__title { grid-area: title; margin: 0; }
.col-card__desc { grid-area: desc; margin: 4px 0 0; -webkit-line-clamp: 1; }
.col-card__read { grid-area: read; margin: 0; padding: 0; white-space: nowrap; }
@media (max-width: 767px) {
  .col-card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "meta" "title" "desc" "read"; padding: 20px; }
  .col-card__meta { flex-direction: row; align-items: center; }
  .col-card__title { margin-top: 10px; font-size: 16px; }
  .col-card__desc { -webkit-line-clamp: 2; }
  .col-card__read { margin-top: 10px; }
}
/* コラム：関連記事も1行ずつ・「もっと見る」ボタン */
.col-list--related { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.col-list--related .col-card { grid-template-areas: "meta title read"; }
.col-more { margin: 40px 0 0; text-align: center; }
.col-more[hidden] { display: none; }
.col-more__btn { padding: 14px 48px; border: 1px solid #111; border-radius: 999px; background: #fff; color: #111; font-family: var(--ff-ja); font-size: 15px; font-weight: 700; cursor: pointer; transition: background 0.2s, color 0.2s; }
.col-more__btn:hover { background: #0A0A0A; color: #fff; }
@media (max-width: 767px) { .col-list--related .col-card { grid-template-areas: "meta" "title" "read"; } }
/* プライバシーポリシー */
.privacy { margin-top: 0; font-size: 16px; }
.privacy h2 { font-size: 20px; }
.privacy__date { margin-top: 3em; text-align: right; color: #666; font-size: 14px; }
.form-privacy { margin: 0 0 12px; font-size: 13px; color: #555; }
.footer__copy a { margin-right: 20px; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* ===== AI導入支援：選ばれる理由・比較表・料金表 2026-10-28 ===== */
.sv-reasons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 48px 0 0; padding: 0; list-style: none; }
.sv-reason { padding: 32px 32px 28px; border-radius: 24px; background: #fff; }
.sv-reason__no { margin: 0; font-family: var(--ff-en); font-size: 13px; font-weight: 700; letter-spacing: 0.2em; color: var(--c-brand); }
.sv-reason__no b { margin-left: 6px; font-size: 28px; letter-spacing: 0.04em; }
.sv-reason__title { margin: 8px 0 0; font-size: 22px; font-weight: 700; line-height: 1.5; color: var(--sv-green); }
.sv-reason__text { margin: 14px 0 0; padding-top: 14px; border-top: 1px dashed var(--sv-line); font-size: 16px; line-height: 1.9; color: #333; }
.sv-vs { margin: 48px 0 0; overflow-x: auto; }
.sv-vs table, .sv-fee-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.sv-vs thead th:first-child { width: 120px; }
.sv-vs th, .sv-vs td { padding: 16px 18px; border-bottom: 1px dashed var(--sv-line); font-size: 16px; line-height: 1.7; text-align: left; background: #fff; }
.sv-vs thead th { border-bottom: 0; font-size: 15px; font-weight: 700; color: #666; background: #EEF1EC; }
.sv-vs thead th:first-child { background: transparent; }
.sv-vs thead th.is-prost { background: var(--c-brand); color: #fff; border-radius: 12px 12px 0 0; }
.sv-vs tbody th { width: 120px; font-weight: 700; color: #111; white-space: nowrap; }
.sv-vs td { color: #777; }
.sv-vs td.is-prost { font-weight: 700; color: var(--sv-green); background: #F7FCF5; border-left: 3px solid var(--c-brand); border-right: 3px solid var(--c-brand); }
.sv-vs tbody tr:last-child td.is-prost { border-bottom: 3px solid var(--c-brand); border-radius: 0 0 12px 12px; }
.sv-fee-box__list--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sv-fee-table { margin: 20px 0 0; }
.sv-fee-table th, .sv-fee-table td { padding: 14px 10px; border-bottom: 1px dashed var(--sv-line); text-align: center; }
.sv-fee-table thead th { font-size: 15px; color: #666; }
.sv-fee-table tbody th { font-size: 17px; font-weight: 700; color: #111; }
.sv-fee-table td { font-size: 16px; font-weight: 700; color: #111; }
.sv-fee-table td b { margin-right: 2px; font-family: var(--ff-en); font-size: 36px; color: var(--sv-green); letter-spacing: 0.02em; }
.sv-fee-table td small { display: block; font-size: 12px; font-weight: 500; color: #666; }
#price .sv-note { text-align: left; }
.sv-sec:not(.sv-sec--tint) .sv-case__voice { background: var(--sv-tint); }
@media (max-width: 767px) {
  .sv-reasons { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 32px; }
  .sv-reason { padding: 24px 20px 20px; }
  .sv-reason__title { font-size: 19px; }
  .sv-reason__text { font-size: 15px; }
  .sv-vs { margin-top: 32px; }
  .sv-vs { margin-left: -8px; margin-right: -8px; }
  .sv-vs th, .sv-vs td { padding: 10px 8px; font-size: 13px; }
  .sv-vs thead th { font-size: 12px; }
  .sv-vs tbody th { white-space: normal; }
  .sv-vs thead th:first-child { width: 64px; }
  .sv-fee-table td b { font-size: 28px; }
}
/* ===== お客様の声（/voice）2026-10-28：クリーム背景・白カード4列・オレンジの強調 ===== */
.vc { --vc-bg: #EEF6E9; --vc-orange: #F27A12; font-family: var(--ff-ja); color: #333; }
.vc__body { padding: 72px 0 112px; background: var(--vc-bg); }
.vc__inner { width: min(1080px, calc(100% - 40px)); margin: 0 auto; }
.vc__lead { margin: 0; font-size: 17px; line-height: 2; text-align: center; color: #333; word-break: auto-phrase; }
.vc-rating { margin: 32px auto 0; max-width: 520px; padding: 20px 24px; border-radius: 20px; background: #fff; text-align: center; }
.vc-rating p { margin: 0; font-size: 15px; font-weight: 700; color: #555; }
.vc-rating__num { margin-top: 4px !important; color: #111 !important; }
.vc-rating__num b { font-family: var(--ff-en); font-size: 48px; line-height: 1.1; color: var(--vc-orange); }
.vc-rating__num small { margin-left: 4px; font-size: 18px; }
.vc-rating__note { margin-top: 4px !important; font-size: 12px !important; font-weight: 500 !important; color: #888 !important; }
.vc-group { margin-top: 88px; }
.vc-group__title { display: flex; justify-content: center; align-items: baseline; gap: 12px; margin: 0; font-size: 22px; font-weight: 700; letter-spacing: 0.04em; color: #555; }
.vc-group__title em { font-style: normal; font-size: 28px; color: var(--vc-orange); }
.vc-group__title span { font-weight: 400; color: #555; }
.vc-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 40px 0 0; padding: 0; list-style: none; }
.vc-card { padding: 28px 22px 28px; border-radius: 24px; background: #fff; }
.vc-card__face { display: block; width: 72px; height: 72px; margin: 0 auto; }
.vc-card__who { margin: 10px 0 0; font-size: 13px; line-height: 1.5; text-align: center; color: #333; }
.vc-card__text { margin: 18px 0 0; font-size: 15px; font-weight: 700; line-height: 1.9; color: #111; }
.vc-card__text em { font-style: normal; color: var(--vc-orange); }
.vc .sv-note { margin-top: 56px; }
@media (max-width: 1100px) { .vc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .vc__body { padding: 48px 0 80px; }
  .vc__lead { font-size: 15px; }
  .vc-group { margin-top: 64px; }
  .vc-group__title { flex-wrap: wrap; gap: 4px 8px; font-size: 18px; }
  .vc-group__title em { font-size: 22px; }
  .vc-cards { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 28px; }
  .vc-card { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 16px; padding: 22px 20px; }
  .vc-card__face { grid-row: span 2; width: 64px; height: 64px; }
  .vc-card__who { margin: 0; text-align: left; font-weight: 700; color: #666; }
  .vc-card__text { margin: 6px 0 0; font-size: 14px; }
}
/* メニューに「お客様の声」を足して6項目になったので、狭めのPC幅では間隔を詰めて折り返さないようにする */
.nav a { white-space: nowrap; }
@media (min-width: 1321px) and (max-width: 1500px) { :root { --nav-gap: 18px; } }
/* お客様の声：受講したサービスのタグ（2026-10-28） */
.vc-card__tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 12px 0 0; }
.vc-card__tags span { padding: 3px 12px; border-radius: 999px; background: #EAF5E5; color: var(--sv-green, #2E8F22); font-size: 12px; font-weight: 700; line-height: 1.6; white-space: nowrap; }
@media (max-width: 767px) {
  .vc-card__tags { justify-content: flex-start; margin: 0; }
}
/* お客様の声：インタビュー動画のスライダー（真ん中を大きく・左右を小さく） 2026-10-28 */
.vc-movie { position: relative; margin: 0 0 72px; }
.vc-movie__stage { position: relative; aspect-ratio: 100 / 37; }
.vc-movie__item { position: absolute; left: 50%; top: 0; width: 58%; margin: 0; transform: translateX(-50%); transition: transform 0.5s var(--ease-out, ease), opacity 0.5s; cursor: pointer; }
.vc-movie__item video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; background: #000; object-fit: cover; box-shadow: 0 10px 30px rgba(30, 60, 25, 0.18); }
.vc-movie__item figcaption { margin-top: 12px; font-size: 16px; font-weight: 700; text-align: center; color: #111; }
.vc-movie__item figcaption span { margin-right: 8px; font-size: 13px; font-weight: 500; color: #555; }
.vc-movie__item[data-pos="0"] { z-index: 2; cursor: auto; }
.vc-movie__item[data-pos="-1"] { z-index: 1; opacity: 0.55; transform: translateX(-110%) scale(0.5); transform-origin: center 40%; }
.vc-movie__item[data-pos="1"] { z-index: 1; opacity: 0.55; transform: translateX(10%) scale(0.5); transform-origin: center 40%; }
.vc-movie__item:not([data-pos="0"]) video { pointer-events: none; }
.vc-movie__item:not([data-pos="0"]) figcaption { visibility: hidden; }
.vc-movie__arrow { position: absolute; top: calc(58% * 9 / 16 * 100 / 37 * 0.5); z-index: 3; display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: var(--c-brand); box-shadow: 0 4px 14px rgba(30, 60, 25, 0.18); cursor: pointer; transform: translateY(-50%); transition: background 0.2s, color 0.2s; }
.vc-movie__arrow svg { width: 22px; height: 22px; }
.vc-movie__arrow--prev { left: 0; }
.vc-movie__arrow--next { right: 0; }
.vc-movie__dots { display: flex; justify-content: center; gap: 10px; margin-top: 8px; }
.vc-movie__dots button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: #C9DCC2; cursor: pointer; }
.vc-movie__dots button[aria-current="true"] { background: var(--c-brand); }
@media (hover: hover) {
  .vc-movie__arrow:hover { background: var(--c-brand); color: #fff; }
  .vc-movie__item:not([data-pos="0"]):hover { opacity: 0.8; }
}
@media (max-width: 767px) {
  .vc-movie { margin-bottom: 48px; }
  .vc-movie__stage { aspect-ratio: 100 / 56; }
  .vc-movie__item { width: 80%; }
  .vc-movie__item[data-pos="-1"] { transform: translateX(-122%) scale(0.6); }
  .vc-movie__item[data-pos="1"] { transform: translateX(22%) scale(0.6); }
  .vc-movie__item figcaption { font-size: 14px; }
  .vc-movie__arrow { top: calc(80% * 9 / 16 * 100 / 56 * 0.5); width: 40px; height: 40px; }
  .vc-movie__arrow--prev { left: -8px; }
  .vc-movie__arrow--next { right: -8px; }
}
@media (max-width: 767px) {
  .sv-fee-table thead th:first-child { width: 52px; }
  .sv-fee-table tbody th { white-space: nowrap; font-size: 14px; }
  .sv-fee-table th, .sv-fee-table td { padding: 12px 4px; }
  .sv-fee-table td { white-space: nowrap; font-size: 13px; }
  .sv-fee-table td b { font-size: 26px; }
}