/* =========================================================
   株式会社Rimz コーポレートサイト
   色はロゴから抽出しています。変更するときは :root の値を変えてください
   ========================================================= */
/*
  キャッチコピー・「声優コールセンター」の大見出し用の明朝体（Noto Serif JP 太字、SIL Open Font License）
  ・使う文字だけを収めたファイル（fonts/noto-serif-jp-700-catch.woff2）。index.html で先読みしている
  ・収録している文字：現在のキャッチコピー、以前のコピー、候補③④、「声優コールセンター」
  ・【文言を変えるとき】新しい文字が含まれる場合は、Google Fonts の「text=」指定で作り直してください
    https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@700&text=（使う文字すべて）
    → 表示されたCSSの中の woff2 のURLを開いて保存し、このファイルと差し替える
    （収録されていない文字は、通常の明朝体で表示されます）
*/
@font-face {
  font-family: "Rimz Catch Serif";
  src: url("../fonts/noto-serif-jp-700-catch.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: block;
}

:root {
  /* メイン：ロゴの青 */
  --color-navy: #002569;         /* ロゴの最も濃い青：見出し・フッター・背景 */
  --color-navy-deep: #001a4d;    /* フッター最下部など、さらに濃い部分 */
  --color-blue: #003e95;         /* ロゴの青：アイコン・リンク */
  --color-blue-light: #105cba;   /* ロゴの明るい青：グラデーション用 */

  /* アクセント：ロゴの金 */
  --color-gold: #e6a726;         /* ロゴの金：ボタン */
  --color-gold-light: #fbd165;   /* ロゴの金のハイライト：紺背景の上の強調 */
  --color-gold-dark: #ce8600;    /* ロゴの金の影：グラデーションの終点 */
  --color-gold-text: #9d5a03;    /* ロゴの最も濃い金：白背景の上の金色の文字 */
  --gradient-gold: linear-gradient(135deg, #fbd165 0%, #e6a726 55%, #ce8600 100%);

  /* サブ：ロゴのシルバー */
  --color-silver: #cfced3;       /* ロゴのシルバー：線・枠 */
  --color-silver-light: #e2e1e6; /* ロゴの明るいシルバー：区切り線 */
  --color-bg-silver: #f4f5f8;    /* セクションの背景 */

  --color-text: #1c2740;
  --color-text-sub: #5a6478;
  --color-bg: #ffffff;

  --font-base: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --font-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-en: "Cormorant Garamond", "Times New Roman", serif;

  --header-height: 76px;
  --header-height-compact: 62px; /* スクロール後のヘッダーの高さ */
  --radius: 10px;
  --shadow: 0 6px 24px rgba(0, 37, 105, .07);
}

/* ---------- リセット・基本 ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}

body {
  margin: 0;
  font-family: var(--font-base);
  font-size: 16px;
  line-height: 1.85;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--color-blue);
}

h1, h2, h3, p, ul, ol, dl, dd {
  margin: 0;
}

ul, ol {
  padding: 0;
  list-style: none;
}

.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

.container--narrow {
  max-width: 860px;
}

.sp-only {
  display: none;
}

/* ---------- ボタン ---------- */
.btn {
  display: inline-block;
  padding: 14px 32px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: inherit;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .04em;
  line-height: 1.5;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: box-shadow .25s, transform .25s, background-color .25s, color .25s, border-color .25s, filter .25s;
}

/* 金のボタン：文字は紺にして読みやすさを確保（コントラスト比 4.8以上） */
.btn--gold {
  background: var(--color-gold);
  background-image: var(--gradient-gold);
  color: var(--color-navy);
  box-shadow: 0 4px 14px rgba(206, 134, 0, .25);
}

.btn--gold:hover {
  filter: brightness(1.05);
  box-shadow: 0 6px 20px rgba(206, 134, 0, .35);
  transform: translateY(-1px);
}

.btn--outline-light {
  border-color: rgba(255, 255, 255, .6);
  color: #fff;
}

.btn--outline-light:hover {
  background: #fff;
  color: var(--color-navy);
}

.btn--small {
  padding: 9px 22px;
  font-size: 14px;
}

.btn--large {
  min-width: 280px;
  padding: 17px 40px;
  font-size: 16px;
}

/* ---------- ヘッダー ---------- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--header-height);
  background: rgba(255, 255, 255, .97);
  border-bottom: 1px solid var(--color-silver-light);
  transition: height .3s ease, box-shadow .3s ease;
}

/* ヘッダーは固定表示なので、その分だけ本文を下げる */
main {
  padding-top: var(--header-height);
}

.header__inner {
  max-width: 1240px;
  height: 100%;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--color-navy);
}

.logo__mark {
  width: 44px;
  height: 44px;
  transition: width .3s ease, height .3s ease;
}

/* 「株式会社Rimz」を1行で、ロゴの中央の高さにそろえる */
.logo__text {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 21px;
  line-height: 1;
  letter-spacing: .06em;
  white-space: nowrap;
}

.nav ul {
  display: flex;
  align-items: center;
  gap: 30px;
}

.nav a:not(.btn) {
  position: relative;
  display: inline-block;
  padding: 4px 0;
  color: var(--color-navy);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color .2s;
}

/* マウスを乗せると金の下線が左から伸びる */
.nav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background: var(--gradient-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}

.nav a:not(.btn):hover::after,
.nav a.is-active:not(.btn)::after {
  transform: scaleX(1);
}

.nav a.is-active:not(.btn) {
  color: var(--color-blue);
}

/* スマホ用メニュー（チェックボックスで開閉） */
.nav-toggle,
.nav-toggle__btn {
  display: none;
}

/* ---------- ファーストビュー ---------- */
.hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: var(--color-navy);
}

/*
  画像（images/hero-voice.jpg）は画面幅いっぱいに表示する
  左奥の声優と右手前のオペレーター、2人の顔が切れずに見えるようにする
  ※ .hero__visual ははみ出し防止の枠。ズームの動きは .hero__bg に付けている
*/
/*
  ファーストビューの画像の枠
  ・高さは「画面の高さ − ヘッダーの高さ」ちょうど（svh：スマホのツールバーが出ている状態の高さ）
  ・枠が画像より低いときは、画像の上端をそろえて下側（机のあたり）を切り取る（人物の頭は切れない）
  ・枠が画像より高いとき（画像を画面幅で表示した高さ＝幅の56.28％より高いとき）は、
    画像を少し拡大して左右を切り取る。ただし拡大は1.15倍まで（それ以上は枠の下に紺の余白）
  ・スマホの表示は下の「スマートフォン」で指定
  ・人物の顔（髪の上〜あご）の位置（画像の高さ・横幅に対して）：
      左奥の声優 高さ約15〜38％・横幅約14〜28％／右手前のオペレーター 高さ約3〜42.5％・横幅約51〜73％
*/
.hero__visual {
  --hero-h: min(calc(56.28vw * 1.15), calc(100vh - var(--header-height)));
  --hero-h: min(calc(56.28vw * 1.15), calc(100svh - var(--header-height)));
  --img-h: max(56.28vw, var(--hero-h)); /* 枠の中で実際に表示される画像の高さ */
  position: relative;
  height: var(--hero-h);
  overflow: hidden;
  background: var(--color-navy);
}

.hero__bg {
  height: 100%;
}

/* WebP用の <picture> は枠を作らず、中の画像を .hero__bg の直下にあるものとして扱う */
.hero__bg picture {
  display: contents;
}

.hero__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* 文字は画像の下、紺の背景の上に配置 */
.hero__inner {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  padding: 64px 24px 96px;
}

/* 「声優コールセンター」の大見出しが1行に収まる幅 */
.hero__text {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.hero__points {
  display: inline-block;
  text-align: left;
}

/* このエリアの大見出し「声優コールセンター」：上に小さな英字、左右に細い金の線 */
.hero__brand {
  margin-bottom: 32px;
  text-align: center;
}

.hero__brand-en {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .32em;
  color: var(--color-gold-light);
  margin-bottom: 4px;
}

.hero__brand-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  margin: 0;
  font-family: "Rimz Catch Serif", var(--font-serif);
  font-weight: 700;
  font-size: clamp(40px, 4.6vw, 76px);
  line-height: 1.35;
  letter-spacing: .08em;
}

.hero__brand-title::before,
.hero__brand-title::after {
  content: "";
  flex: 0 0 1.4em;
  height: 1px;
  background: linear-gradient(90deg, rgba(251, 209, 101, 0), var(--color-gold-light));
}

.hero__brand-title::after {
  background: linear-gradient(90deg, var(--color-gold-light), rgba(251, 209, 101, 0));
}

/* 文字はロゴの金のグラデーション。折り返さず1行で表示 */
.hero__brand-title span {
  white-space: nowrap;
  color: var(--color-gold);
  background: linear-gradient(180deg, #fde7a6 0%, #fbd165 32%, #e6a726 68%, #ce8600 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/*
  キャッチコピー（h1）：画像の下寄り（譜面台・マイクスタンド〜机のあたり）に大きく重ねる
  ・画像は画面幅いっぱいに表示しているので、位置と文字サイズを画面幅（vw）に対する割合で指定し、
    どの画面幅でも画像の同じ場所に収まるようにしている
  ・人物の顔（あご）はいずれも画像の上から約43％より上にある → 文字がそれより下に収まるよう調整
  ・読みやすさのため、画像の下部だけに紺のグラデーションを重ね、文字には柔らかい影を付ける（四角い背景は置かない）
    （画像の下部は白いブラウス・明るい机で明るいため、グラデーションと影はやや濃いめ）
*/
.hero__visual::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  /*
    左奥の声優のあご（画像の上から約38％）より下だけに重ねる。上端はぼかして透明にするので、顔は暗くならない
    ・下から上へ透明になる紺 ＋ 1行目の後ろ（左側）だけ少し濃くする紺
  */
  top: calc(var(--img-h) * .41);
  background:
    linear-gradient(0deg,
      rgba(0, 37, 105, .92) 0%,
      rgba(0, 37, 105, .75) 35%,
      rgba(0, 37, 105, .3) 75%,
      rgba(0, 37, 105, 0) 100%),
    linear-gradient(90deg,
      rgba(0, 37, 105, .5) 0%,
      rgba(0, 37, 105, .25) 35%,
      rgba(0, 37, 105, 0) 56%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%);
  mask-image: linear-gradient(180deg, transparent 0, #000 18%);
  pointer-events: none;
}

/*
  文字の大きさの決め方（2行目の大きさ＝ --catch-size、1行目はその --l1 倍）
  次のうち一番小さい値を使うので、どの画面サイズでも「顔に重ならない」「画面の下にはみ出さない」範囲で最大になる
  ・--catch-target：以前の大きさ（--catch-prev）を基準にした目標値
  ・--catch-max：横幅の上限。2行目の一番長い行（--line2-em 文字分）が、左右の余白（--catch-side）の内側に収まる大きさ
  ・--fit-a：2行目（傍点を含む）の上端が --face-a（オペレーターのあご＝画像の約42.5％＋余裕）より下になる大きさ
  ・--fit-b：1行目の文字の上端が --face-b（左奥の声優のあご＝画像の約38％＋余裕）より下になる大きさ
    （全体の高さ ＝ 1行目 --l1×1.45 ＋ 傍点の余白 --dot-space ＋ 2行目 1.15×行数。1行目の文字の上にある余白分 0.1 を差し引いて計算）
*/
.hero__catch {
  /*
    文字の柔らかい影
    ・filter（drop-shadow）だと動きの間に毎フレーム影を描き直して重くなるため、text-shadow で付ける
      （text-shadow は一度描けば、あとは位置と透明度を動かすだけで済む）
  */
  --catch-shadow: 0 .05em .14em rgba(0, 15, 50, .75), 0 0 .45em rgba(0, 15, 50, .55);
  --catch-gap: max(12px, calc(var(--hero-h) * .025));
  --l1: .7;             /* 1行目の大きさ（2行目に対する倍率） */
  --dot-space: .2;      /* 2行目の上に取る傍点用の余白（2行目の文字の大きさに対する倍率） */
  --line2-em: 12.5;     /* 2行目の一番長い行の幅（文字数。「声の力」に投資する時代へ＝13文字。行頭の「は左に寄せる分を引く） */
  --line2-rows: 1;      /* 2行目の行数（スマホでは2行） */
  --catch-side: 4vw;    /* 左右の余白 */
  --face-a: calc(var(--img-h) * .46);
  --face-b: calc(var(--img-h) * .41);
  --prev-max: 11vw;
  --catch-prev: max(2.6vw, min(var(--prev-max), calc((var(--hero-h) - max(28.5vw, calc(var(--hero-h) * .505)) - var(--hero-h) * .05) / 1.75)));
  --catch-target: calc(var(--catch-prev) * 1.25 * 1.15);
  --catch-max: calc((100vw - var(--catch-side) * 2) / var(--line2-em));
  --fit-a: calc((var(--hero-h) - var(--catch-gap) - var(--face-a)) / (1.15 * var(--line2-rows) + var(--dot-space)));
  --fit-b: calc((var(--hero-h) - var(--catch-gap) - var(--face-b)) / (var(--l1) * 1.45 + var(--dot-space) + 1.15 * var(--line2-rows) - .1));
  --catch-size: max(3vw, min(var(--catch-target), var(--catch-max), var(--fit-a), var(--fit-b)));
  position: absolute;
  left: var(--catch-side);
  bottom: var(--catch-gap);
  z-index: 2;
  margin: 0;
  font-family: "Rimz Catch Serif", var(--font-serif);
  font-weight: 700;
  color: #fff;
  pointer-events: none;
}

.hero__catch-line {
  display: block;
}

/* 1行目「今だからこそ」：白で、2行目より小さめ */
.hero__catch-line--1 {
  font-size: calc(var(--catch-size) * var(--l1));
  line-height: 1.45;
  letter-spacing: 0;
  text-shadow: var(--catch-shadow);
}

/* 2行目「「声の力」に投資する時代へ」：主役として最大に。自動では折り返さない（スマホは <br class="sp-only"> の位置だけで折り返す） */
.hero__catch-line--2 {
  font-size: var(--catch-size);
  line-height: 1.15;
  letter-spacing: 0;
  padding-top: calc(var(--dot-space) * 1em);
  white-space: nowrap;
  text-shadow: var(--catch-shadow);
}

/* 「「声の力」」（かぎかっこ含む）：ロゴの金のグラデーション。「に投資する時代へ」は白 */
.hero__catch-gold {
  position: relative;
  color: var(--color-gold);
  background: linear-gradient(180deg, #fde7a6 0%, #fbd165 32%, #e6a726 68%, #ce8600 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}

/* 行頭の「は文字の右側に描かれているため、左に寄せて1行目と左端をそろえる */
.hero__catch-gold--open {
  margin-left: -.6em;
}

/*
  金のグラデーション文字には text-shadow を直接付けられない（影が金の上に重なってくすむ）ため、
  同じ文字（data-text）を影だけの層として金の文字の後ろに重ねる。読み上げソフトには読ませない（/ ""）
*/
.hero__catch-gold::before {
  content: attr(data-text);
  content: attr(data-text) / "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  -webkit-text-fill-color: transparent;
  text-shadow: var(--catch-shadow);
  pointer-events: none;
}

/* 「声の力」の傍点：1文字ずつ、文字の上の中央に金の丸 */
.hero__catch-dot {
  position: relative;
}

.hero__catch-dot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -.07em;
  width: .15em;
  height: .15em;
  margin-left: -.075em;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fde7a6 0%, #fbd165 40%, #e6a726 75%, #ce8600 100%);
  box-shadow: 0 .02em .06em rgba(0, 15, 50, .5);
}

.hero__lead {
  color: rgba(255, 255, 255, .85);
  font-size: 17px;
  margin-bottom: 28px;
}

.hero__points {
  margin-bottom: 40px;
}

.hero__points li {
  position: relative;
  padding-left: 30px;
  margin-top: 8px;
  font-weight: 500;
}

.hero__points li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .45em;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gradient-gold);
}

.hero__points li::after {
  content: "";
  position: absolute;
  left: 8px;
  top: calc(.45em + 5px);
  width: 6px;
  height: 4px;
  border-left: 2px solid var(--color-navy);
  border-bottom: 2px solid var(--color-navy);
  transform: rotate(-45deg);
}

.hero__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* ボタン上の一言 */
.hero__actions-note {
  color: rgba(255, 255, 255, .8);
  font-size: 14px;
  letter-spacing: .06em;
}

/* ファーストビュー下の「運営サービス」ボタン：一回り大きく、乗せると浮き上がり光沢が左から右へ走る */
.btn--hero {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-width: 360px;
  padding: 22px 56px;
  font-size: 19px;
  letter-spacing: .08em;
  box-shadow: 0 8px 24px rgba(206, 134, 0, .3);
  transition: box-shadow .35s ease, transform .35s ease, filter .35s ease;
}

.btn--hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0));
  transform: skewX(-20deg);
  pointer-events: none;
}

.btn--hero .btn__arrow {
  display: inline-block;
  transition: transform .35s ease;
}

.btn--hero:hover {
  filter: brightness(1.04);
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(206, 134, 0, .42);
}

.btn--hero:hover::before {
  left: 125%;
  transition: left .8s ease;
}

.btn--hero:hover .btn__arrow {
  transform: translateX(5px);
}

.btn--hero:focus-visible {
  outline: 3px solid var(--color-gold-light);
  outline-offset: 4px;
}

/* ---------- セクション共通 ---------- */
.section {
  position: relative;
  padding: 104px 0;
}

.section--compact {
  padding: 80px 0;
}

.section--silver {
  background: var(--color-bg-silver);
}

.section--navy {
  background: var(--color-navy);
  color: #fff;
}

/* ロゴの曲線をモチーフにした控えめな背景装飾 */
.section--curve {
  overflow: hidden;
}

.section--curve::before,
.section--curve::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.section--curve::before {
  width: 720px;
  height: 720px;
  right: -360px;
  top: -200px;
  border: 60px solid rgba(207, 206, 211, .22);
}

.section--curve::after {
  width: 520px;
  height: 520px;
  left: -300px;
  bottom: -260px;
  border: 1px solid rgba(230, 167, 38, .35);
}

/* 曲線の装飾がカードの上に重ならないよう、中身を前面に */
.section--curve .container {
  position: relative;
  z-index: 1;
}

.section__head {
  text-align: center;
  margin-bottom: 60px;
}

.section__en {
  font-family: var(--font-en);
  color: var(--color-gold-text);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .24em;
  margin-bottom: 4px;
}

.section__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.5;
  color: var(--color-navy);
  letter-spacing: .06em;
}

/* 見出し下の金の飾り線 */
.section__title::after {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  margin: 20px auto 0;
  background: var(--gradient-gold);
}

.section__desc {
  margin-top: 24px;
  color: var(--color-text-sub);
}

.section__head--light .section__en {
  color: var(--color-gold-light);
}

.section__head--light .section__title {
  color: #fff;
}

.section__head--light .section__desc {
  color: rgba(255, 255, 255, .82);
}

/*
  電話番号のリンク（tel:）
  ・スマホではタップで発信できる
  ・マウスで操作するPCではクリックしても何も起きないよう、普通の文字として表示する
*/
.tel-link {
  color: inherit;
}

@media (hover: hover) and (pointer: fine) {
  a[href^="tel:"] {
    pointer-events: none;
    cursor: text;
    text-decoration: none;
  }
}

/* ---------- 対応業務 ---------- */
.service {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.service__card {
  position: relative;
  padding: 40px 32px 36px;
  background: #fff;
  border: 1px solid var(--color-silver-light);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* カード上部の金の細線 */
.service__card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 32px;
  right: 32px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--gradient-gold);
}

.service__icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--color-bg-silver);
  border: 1px solid var(--color-silver-light);
  display: grid;
  place-items: center;
  margin-bottom: 20px;
}

.service__icon svg {
  width: 28px;
  height: 28px;
  fill: var(--color-blue);
}

.service__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 21px;
  color: var(--color-navy);
  margin-bottom: 12px;
}

.service__card > p {
  color: var(--color-text-sub);
  font-size: 15px;
  margin-bottom: 20px;
}

.check-list {
  padding-top: 16px;
  border-top: 1px solid var(--color-silver-light);
}

.check-list li {
  position: relative;
  padding-left: 24px;
  margin-top: 6px;
  font-size: 14px;
  font-weight: 500;
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: .55em;
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--color-gold);
  border-bottom: 2px solid var(--color-gold);
  transform: rotate(-45deg);
}

/* ---------- Rimzの特徴 ---------- */
/* PCでは2列×2段 */
.features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  max-width: 1040px;
  margin: 0 auto;
}

.feature {
  padding: 40px 40px 36px;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* 番号は金のグラデーション文字 */
.feature__num {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 64px;
  font-variant-numeric: lining-nums; /* 「01」が「OI」に見えないよう、数字をそろった形に */
  line-height: 1;
  margin-bottom: 16px;
  color: var(--color-gold);
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.feature__body {
  padding-top: 20px;
  border-top: 1px solid var(--color-silver-light);
}

.feature__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.6;
  color: var(--color-navy);
  margin-bottom: 12px;
}

.feature__body p {
  color: var(--color-text-sub);
  font-size: 15px;
}

/* 特徴04の箇条書き（区切り線は不要） */
.feature__list {
  margin-top: 12px;
  padding-top: 0;
  border-top: none;
}

.feature__list li {
  font-weight: 400;
  line-height: 1.7;
  margin-top: 8px;
}

/* ---------- 声優コールセンターとは ---------- */
/* 「声のプロ × コールセンター」の式 */
.concept__formula {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 20px;
  margin-bottom: 36px;
}

.concept__term {
  padding: 10px 28px;
  border: 1px solid var(--color-gold);
  border-radius: 999px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 22px;
  color: var(--color-navy);
  letter-spacing: .06em;
}

.concept__times {
  font-family: var(--font-en);
  font-size: 34px;
  line-height: 1;
  color: var(--color-gold-text);
}

.concept__lead {
  max-width: 900px;
  margin: 0 auto 56px;
  text-align: center;
}

.concept__points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.concept__point {
  position: relative;
  padding: 36px 30px 32px;
  background: var(--color-bg-silver);
  border-radius: var(--radius);
}

/* 上部の金の細線（対応業務のカードとそろえる） */
.concept__point::before {
  content: "";
  position: absolute;
  top: 0;
  left: 30px;
  width: 40px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--gradient-gold);
}

.concept__en {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .2em;
  color: var(--color-gold-text);
  margin-bottom: 4px;
}

.concept__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.6;
  color: var(--color-navy);
  margin-bottom: 12px;
}

.concept__point p:last-child {
  color: var(--color-text-sub);
  font-size: 15px;
}

/* 働きやすい環境：紺の左線で区切ったひとこと */
.concept__note {
  max-width: 860px;
  margin: 48px auto 0;
  padding: 24px 32px;
  border-left: 3px solid var(--color-navy);
  background: #fff;
  box-shadow: var(--shadow);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.concept__note-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 18px;
  color: var(--color-navy);
  margin-bottom: 6px;
}

.concept__note p {
  color: var(--color-text-sub);
  font-size: 15px;
}

/* ---------- 代表メッセージ（写真なし・文章中心） ---------- */
.message {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
  padding: 64px 64px 52px;
  background: var(--color-bg-silver);
  border-radius: var(--radius);
}

/* 左上の大きな引用符 */
.message::before {
  content: "\201C";
  position: absolute;
  top: -34px;
  left: 40px;
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 140px;
  line-height: 1;
  color: var(--color-gold);
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.message__catch {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 30px;
  line-height: 1.7;
  color: var(--color-navy);
  letter-spacing: .04em;
  text-align: center;
}

/* 「心が通う」：金色で強調（明るい背景でも読めるよう、TOPより少し濃い金のグラデーション） */
.message__catch-gold {
  color: #c98a0c;
  background: linear-gradient(180deg, #e6a726 0%, #c98a0c 55%, #a86c00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 見出しの下の金の飾り線 */
.message__catch::after {
  content: "";
  display: block;
  width: 72px;
  height: 2px;
  margin: 28px auto 32px;
  background: var(--gradient-gold);
}

.message__body p {
  line-height: 2;
}

.message__body p + p {
  margin-top: 1.6em;
}

/* 締めの言葉：左に金の線、文字は紺で少しだけ強調 */
.message__body .message__closing {
  margin-top: 2.2em;
  padding-left: 1.2em;
  border-left: 3px solid var(--color-gold);
  color: var(--color-navy);
  font-weight: 500;
}

/* 署名：右寄せ、左に金の短い線 */
.message__sign {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 1em;
  margin-top: 40px;
}

.message__sign::before {
  content: "";
  align-self: center;
  width: 40px;
  height: 1px;
  background: var(--color-gold);
}

.message__role {
  font-size: 14px;
  color: var(--color-text-sub);
  letter-spacing: .08em;
}

.message__name {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 24px;
  color: var(--color-navy);
  letter-spacing: .14em;
}

/* ---------- 運営サービス（BLUE COLOR） ---------- */
/* 横長のバナーカード。カード全体がリンク */
.biz-card {
  display: grid;
  grid-template-columns: 44% 1fr;
  max-width: 1040px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--color-silver-light);
  box-shadow: var(--shadow);
  text-decoration: none;
  color: #fff;
  transition: transform .35s cubic-bezier(.2, .6, .2, 1), box-shadow .35s ease;
}

.biz-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0, 37, 105, .18);
}

.biz-card:focus-visible {
  outline: 3px solid rgba(230, 167, 38, .6);
  outline-offset: 4px;
}

/* ロゴは白い面の上に置き、縦横比を保ったまま表示 */
.biz-card__logo {
  display: grid;
  place-items: center;
  padding: 48px 40px;
  background:
    radial-gradient(circle at 0% 100%, rgba(16, 92, 186, .08) 0%, rgba(16, 92, 186, 0) 55%),
    #fff;
}

.biz-card__logo img {
  width: 100%;
  max-width: 380px;
  height: auto;
}

.biz-card__body {
  position: relative;
  overflow: hidden;
  padding: 44px 48px;
  background:
    radial-gradient(circle at 100% 0%, rgba(16, 92, 186, .65) 0%, rgba(16, 92, 186, 0) 55%),
    var(--color-navy);
}

/* 右下に、ロゴの曲線をイメージした金の細い弧 */
.biz-card__body::after {
  content: "";
  position: absolute;
  right: -120px;
  bottom: -160px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 1px solid rgba(251, 209, 101, .35);
  pointer-events: none;
}

.biz-card__label {
  display: inline-block;
  padding: 2px 14px;
  margin-bottom: 14px;
  border: 1px solid rgba(251, 209, 101, .6);
  border-radius: 999px;
  color: var(--color-gold-light);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
}

.biz-card__name {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 34px;
  line-height: 1.2;
  letter-spacing: .08em;
  margin-bottom: 14px;
}

.biz-card__kana {
  display: block;
  margin-top: 4px;
  font-family: var(--font-base);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .7);
}

.biz-card__text {
  color: rgba(255, 255, 255, .85);
  font-size: 15px;
  margin-bottom: 26px;
}

/* ボタン風の表示（リンクはカード全体） */
.biz-card__btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 26px;
  border-radius: 999px;
  background: var(--gradient-gold);
  color: var(--color-navy);
  font-weight: 700;
  font-size: 15px;
  box-shadow: 0 4px 14px rgba(206, 134, 0, .25);
}

.biz-card__arrow {
  transition: transform .3s ease;
}

.biz-card:hover .biz-card__arrow {
  transform: translateX(4px);
}

/* 画面には表示せず、読み上げソフトだけに伝える */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- ご依頼の流れ ---------- */
.flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px;
}

.flow__item {
  position: relative;
  padding: 32px 22px 28px;
  background: #fff;
  border: 1px solid var(--color-silver-light);
  border-radius: var(--radius);
  text-align: center;
}

/* ステップ間の矢印 */
.flow__item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -24px;
  width: 12px;
  height: 12px;
  border-top: 2px solid var(--color-gold);
  border-right: 2px solid var(--color-gold);
  transform: translateY(-50%) rotate(45deg);
}

.flow__step {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .16em;
  color: var(--color-gold-text);
  line-height: 1.2;
  margin-bottom: 12px;
}

.flow__step span {
  display: block;
  font-variant-numeric: lining-nums;
  font-size: 40px;
  letter-spacing: .04em;
  color: var(--color-navy);
}

.flow__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 18px;
  color: var(--color-navy);
  margin-bottom: 10px;
}

.flow__item p:last-child {
  font-size: 14px;
  color: var(--color-text-sub);
  text-align: left;
}

.note {
  margin-top: 36px;
  text-align: center;
  font-size: 14px;
  color: var(--color-text-sub);
}

/* ---------- よくある質問 ---------- */
.faq {
  display: grid;
  gap: 24px;
}

.faq__item dt,
.faq__item dd {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 28px;
}

/* 質問：紺の帯＋下向きの吹き出し */
.faq__item dt {
  position: relative;
  background: var(--color-navy);
  color: #fff;
  font-weight: 700;
  border-radius: var(--radius) var(--radius) 0 0;
}

.faq__item dt::after {
  content: "";
  position: absolute;
  left: 40px;
  bottom: -10px;
  border-style: solid;
  border-width: 10px 9px 0;
  border-color: var(--color-navy) transparent transparent;
}

/* 回答：白い箱 */
.faq__item dd {
  background: #fff;
  color: var(--color-text);
  border: 1px solid var(--color-silver-light);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  padding-top: 24px;
}

.faq__mark {
  flex-shrink: 0;
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.1;
  width: 24px;
}

.faq__item dt .faq__mark {
  color: var(--color-gold-light);
}

.faq__item dd .faq__mark {
  color: var(--color-gold-text);
}

/* ---------- 会社概要 ---------- */
.company-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-top: 2px solid var(--color-navy);
}

.company-table th,
.company-table td {
  padding: 22px 24px;
  border-bottom: 1px solid var(--color-silver-light);
  text-align: left;
  vertical-align: top;
}

.company-table th {
  width: 28%;
  color: var(--color-navy);
  font-weight: 700;
  background: var(--color-bg-silver);
  white-space: nowrap;
}

/* ---------- 電子公告 ---------- */
.notice__intro {
  text-align: center;
  margin-bottom: 24px;
  color: var(--color-text-sub);
}

.notice {
  background: #fff;
  border: 1px solid var(--color-silver-light);
  border-radius: var(--radius);
  padding: 32px;
}

.notice__empty {
  text-align: center;
}

.notice__list li {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-silver-light);
}

.notice__list li:last-child {
  border-bottom: none;
}

.notice__list time {
  color: var(--color-text-sub);
  font-size: 15px;
}

/* ---------- お問い合わせフォーム ---------- */
.form {
  background: #fff;
  color: var(--color-text);
  border-radius: 16px;
  padding: 52px;
  box-shadow: 0 20px 50px rgba(0, 10, 40, .25);
}

.form__row {
  margin-bottom: 24px;
}

.form__row label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 15px;
  color: var(--color-navy);
  margin-bottom: 8px;
}

.req,
.opt {
  display: inline-block;
  padding: 0 8px;
  border-radius: 4px;
  font-size: 11px;
  line-height: 1.8;
  font-weight: 700;
}

.req {
  background: var(--color-navy);
  color: #fff;
}

.opt {
  background: var(--color-silver-light);
  color: var(--color-text-sub);
}

.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form select,
.form textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--color-silver);
  border-radius: 6px;
  font-family: inherit;
  font-size: 16px; /* iPhoneで入力時に拡大されないよう16px */
  color: var(--color-text);
  background: #fcfcfd;
}

.form input:focus,
.form select:focus,
.form textarea:focus {
  outline: none;
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px rgba(230, 167, 38, .2);
  background: #fff;
}

.form__agree {
  text-align: center;
  margin: 32px 0 24px;
  font-size: 15px;
}

.form__agree input {
  margin-right: 6px;
  transform: scale(1.2);
  accent-color: var(--color-navy);
}

.form__agree a {
  color: var(--color-blue);
  text-decoration: underline;
}

.form__submit {
  text-align: center;
}

.form button[disabled] {
  opacity: .6;
  cursor: wait;
}

/* 迷惑メール対策の欄（画面外に置いて、人には見えないようにする） */
.form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* 送信結果のメッセージ */
.form__status {
  margin-top: 28px;
  padding: 18px 22px;
  border-radius: 8px;
  font-size: 15px;
  line-height: 1.8;
}

.form__status.is-success {
  background: #eef6ee;
  border: 1px solid #9cc89c;
  color: #1f4d1f;
}

.form__status.is-error {
  background: #fdf0ef;
  border: 1px solid #e3a49c;
  color: #8a2418;
}

.form__status.is-info {
  background: var(--color-bg-silver);
  border: 1px solid var(--color-silver);
  color: var(--color-text);
}

.form__status-title {
  font-weight: 700;
  margin-bottom: 4px;
}

.form__status ul {
  list-style: disc;
  padding-left: 1.4em;
}

/* ---------- フッター ---------- */
.footer {
  position: relative;
  background: var(--color-navy-deep);
  color: rgba(255, 255, 255, .75);
  font-size: 14px;
}

/* フッター上端の金の細線 */
.footer::before {
  content: "";
  display: block;
  height: 2px;
  background: var(--gradient-gold);
  opacity: .8;
}

.footer__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 56px 24px 40px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 32px;
}

.footer__logo {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #fff;
  text-decoration: none;
  margin-bottom: 16px;
}

/* 紺の背景の上なので、ロゴは白い円の中に入れる */
.footer__logo-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 1px rgba(251, 209, 101, .5), 0 0 0 5px rgba(251, 209, 101, .12);
}

.footer__logo-circle img {
  width: 44px;
  height: 44px;
}

.footer__logo-text {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 22px;
  line-height: 1;
  letter-spacing: .06em;
  white-space: nowrap;
}

.footer__nav {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 8px 40px;
}

.footer__nav a {
  color: rgba(255, 255, 255, .8);
  text-decoration: none;
  transition: color .2s;
}

.footer__nav a:hover {
  color: var(--color-gold-light);
}

.footer__copy {
  text-align: center;
  padding: 18px 24px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .5);
}

/* ---------- スマホ用：画面下に固定するお問い合わせボタン ---------- */
.sp-cta {
  display: none;
}

/* =========================================================
   タブレット
   ========================================================= */
@media (max-width: 1320px) {
  .nav ul {
    gap: 20px;
  }
}

/* メニュー項目が多いため、1200px以下でハンバーガーメニューに */
@media (max-width: 1200px) {
  /* ナビをハンバーガーメニューに */
  .nav-toggle__btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    padding: 10px;
    cursor: pointer;
  }

  .nav-toggle__btn span {
    display: block;
    height: 2px;
    background: var(--color-navy);
    border-radius: 1px;
    transition: transform .2s, opacity .2s;
  }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid var(--color-silver-light);
    box-shadow: 0 12px 24px rgba(0, 37, 105, .1);
    display: none;
  }

  .nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 24px 24px;
  }

  .nav li {
    border-bottom: 1px solid var(--color-silver-light);
  }

  .nav li.nav__cta {
    border-bottom: none;
    padding-top: 20px;
  }

  .nav a:not(.btn) {
    display: block;
    padding: 15px 4px;
    font-size: 15px;
  }

  /* スマホでは下線ではなく文字色だけで示す */
  .nav a:not(.btn)::after {
    display: none;
  }

  .nav .btn--small {
    display: block;
    padding: 14px;
    font-size: 15px;
  }

  .nav-toggle:checked ~ .nav {
    display: block;
  }

  .nav-toggle:checked + .nav-toggle__btn span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .nav-toggle:checked + .nav-toggle__btn span:nth-child(2) {
    opacity: 0;
  }

  .nav-toggle:checked + .nav-toggle__btn span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }
}

@media (max-width: 960px) {
  .hero__inner {
    padding: 48px 24px 80px;
  }

  .concept__points {
    grid-template-columns: 1fr;
    max-width: 600px;
    margin: 0 auto;
  }

  .biz-card {
    grid-template-columns: 1fr;
    max-width: 600px;
  }

  .biz-card__logo {
    padding: 36px 32px;
  }

  .service {
    grid-template-columns: 1fr;
    max-width: 600px;
    margin: 0 auto;
  }

  .flow {
    grid-template-columns: repeat(2, 1fr);
  }

  .flow__item:not(:last-child)::after {
    display: none;
  }
}

/* =========================================================
   スマートフォン
   ========================================================= */
@media (max-width: 640px) {
  :root {
    --header-height: 64px;
    --header-height-compact: 56px;
  }

  body {
    font-size: 15px;
  }

  .pc-only {
    display: none;
  }

  .sp-only {
    display: inline;
  }

  .container {
    padding: 0 18px;
  }

  .logo__mark {
    width: 38px;
    height: 38px;
  }

  .logo__text {
    font-size: 18px;
    letter-spacing: .04em;
  }

  .hero__inner {
    padding: 36px 18px 64px;
  }

  /* スマホでは文字を左揃えにして読みやすく */
  .hero__text {
    text-align: left;
  }

  /*
    スマホ：ファーストビュー（ヘッダー＋画像の枠）を画面の高さの約8割に
    ・画像は横幅の1.5倍に拡大し、上端をそろえて表示（2人の顔が左右に余裕をもって収まる大きさ。2人の顔の中心＝画像の横43.5％を画面の中央に）
    ・顔は枠の上半分に、キャッチコピーは下半分（画像の下端から続く紺のグラデーションの上）に置く
  */
  .hero__visual {
    --hero-h: calc(80vh - var(--header-height));
    --hero-h: calc(80svh - var(--header-height));
    --img-w: 150vw;
    --img-h: calc(var(--img-w) * .5628);
  }

  .hero__bg {
    height: auto;
  }

  .hero__photo {
    width: var(--img-w);
    max-width: none;
    height: auto;
    margin-left: calc(50vw - var(--img-w) * .435);
  }

  /* 画像の上から55％のあたり（顔より下）から下端にかけて紺に溶け込ませ、その下は紺の背景につなげる */
  .hero__visual::after {
    top: calc(var(--img-h) * .55);
    bottom: auto;
    height: calc(var(--img-h) * .45 + 1px);
    background: linear-gradient(180deg,
      rgba(0, 37, 105, 0) 0%,
      rgba(0, 37, 105, .35) 40%,
      rgba(0, 37, 105, .8) 75%,
      var(--color-navy) 100%);
  }

  /*
    キャッチコピーは「今だからこそ／「声の力」に／投資する時代へ」の3行
    ・2行目と3行目は同じ大きさ（一番長い「投資する時代へ」7文字が左右16px以上の余白の内側に収まる大きさ）、1行目はその6割
    ・文字の下端と枠の下端の余白は24px（文字の下の小さな余白と合わせて、見た目で約28px）
    ・上端は「顔の下（画像の約47％）」と「枠の高さの半分」の低い方より下になる大きさに自動で調整
  */
  .hero__catch {
    --catch-gap: 24px;
    --l1: .6;
    --line2-em: 7;
    --line2-rows: 2;
    --catch-side: max(16px, 4vw);
    --catch-target: 100vw;
    --face-a: max(calc(var(--img-h) * .47), calc(var(--hero-h) * .5));
    --face-b: var(--face-a);
  }

  .hero__lead {
    font-size: 15px;
  }

  /* 「声優コールセンター」は1行に収まる範囲で大きく */
  .hero__brand {
    margin-bottom: 24px;
  }

  .hero__brand-en {
    font-size: 12px;
    letter-spacing: .24em;
  }

  .hero__brand-title {
    gap: .4em;
    font-size: 7.2vw;
    letter-spacing: .04em;
  }

  .hero__brand-title::before,
  .hero__brand-title::after {
    flex-basis: .8em;
  }

  .hero__points {
    margin-bottom: 32px;
  }

  .hero__points li {
    font-size: 14px;
  }

  .hero__actions .btn,
  .btn--large {
    width: 100%;
    min-width: 0;
  }

  .hero__actions {
    align-items: stretch;
  }

  .hero__actions-note {
    font-size: 13px;
    text-align: center;
  }

  .btn--hero {
    padding: 20px 24px;
    font-size: 18px;
  }

  .section {
    padding: 72px 0;
  }

  .section--compact {
    padding: 64px 0;
  }

  .section__head {
    margin-bottom: 40px;
  }

  .section__title {
    font-size: 25px;
  }

  .service__card {
    padding: 32px 24px 28px;
  }

  .concept__term {
    padding: 8px 18px;
    font-size: 18px;
  }

  .concept__times {
    font-size: 26px;
  }

  .concept__lead {
    margin-bottom: 40px;
    text-align: left;
  }

  .concept__points {
    gap: 16px;
  }

  .concept__point {
    padding: 30px 22px 26px;
  }

  .concept__note {
    margin-top: 32px;
    padding: 20px 20px;
  }

  .message {
    padding: 48px 22px 36px;
  }

  .message::before {
    top: -26px;
    left: 18px;
    font-size: 104px;
  }

  /* 見出しは2行目「「心が通う」言葉と声が必要です。」（16文字）が1行に収まる範囲で大きく */
  .message__catch {
    font-size: clamp(16px, calc((100vw - 84px) / 16.4), 21px);
    letter-spacing: 0;
  }

  .message__body .message__closing {
    padding-left: 1em;
  }

  .message__catch::after {
    margin: 22px auto 24px;
  }

  .message__name {
    font-size: 21px;
  }

  .biz-card__logo {
    padding: 28px 24px;
  }

  .biz-card__body {
    padding: 32px 24px;
  }

  .biz-card__name {
    font-size: 28px;
  }

  .biz-card__btn {
    display: flex;
    justify-content: center;
  }

  .features {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .feature {
    padding: 32px 24px 28px;
  }

  .feature__num {
    font-size: 52px;
    margin-bottom: 12px;
  }

  .feature__title {
    font-size: 19px;
  }

  .flow {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .faq__item dt,
  .faq__item dd {
    padding: 14px 18px;
    gap: 12px;
  }

  .faq__item dd {
    padding-top: 20px;
  }

  .faq__item dt::after {
    left: 26px;
  }

  .company-table th,
  .company-table td {
    display: block;
    width: 100%;
  }

  .company-table th {
    padding: 12px 16px 6px;
    border-bottom: none;
    font-size: 14px;
  }

  .company-table td {
    padding: 8px 16px 16px;
  }

  .notice {
    padding: 24px 16px;
  }

  .form {
    padding: 30px 20px;
  }

  .footer__inner {
    flex-direction: column;
  }

  /* 画面下の固定ボタンに、コピーライトが隠れないようにする */
  .footer__copy {
    padding-bottom: 120px;
  }

  .sp-cta {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 95;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(0, 26, 77, .94);
    box-shadow: 0 -4px 16px rgba(0, 10, 40, .2);
    transition: transform .3s ease;
  }

  .sp-cta__btns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .sp-cta .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 13px 8px;
    font-size: 15px;
  }

  .sp-cta__tel svg {
    width: 18px;
    height: 18px;
    fill: var(--color-gold-light);
  }

  .sp-cta__hours {
    margin-top: 6px;
    font-size: 11px;
    line-height: 1.4;
    text-align: center;
    color: rgba(255, 255, 255, .75);
  }
}

/* =========================================================
   動き（js/main.js と連動）
   ・<html> に .js が付いたときだけ「隠した初期状態」にする
     → JavaScriptが動かない環境では、すべてそのまま表示される
   ========================================================= */

/* ---------- ヘッダー：スクロール後に影を付けてコンパクトに ---------- */
.header.is-scrolled {
  height: var(--header-height-compact);
  box-shadow: 0 4px 18px rgba(0, 37, 105, .08);
}

.header.is-scrolled .logo__mark {
  width: 36px;
  height: 36px;
}

/* ジャンプ先のセクションに付くフォーカス枠は表示しない */
[tabindex="-1"]:focus {
  outline: none;
}

/* ---------- ファーストビュー：背景が少しズームしながら表示 ---------- */
/*
  ・上端を基準に拡大するので、ズーム中も画像の上側（人物の頭）が切れない
  ・キャッチコピーの動きと重なっても重くならないよう、拡大は控えめ（3％）・短め（1.6秒）にしている
*/
.js .hero__bg {
  opacity: 0;
  transform: scale(1.03);
  transform-origin: center top;
  transition: opacity .8s ease, transform 1.6s cubic-bezier(.22, 1, .36, 1);
  will-change: transform, opacity;
}

.js .is-loaded .hero__bg {
  opacity: 1;
  transform: none;
}

/* ---------- ファーストビュー：キャッチコピーが約0.8秒後に、下からゆっくり表示 ---------- */
/*
  ・透明＋30px下の状態から、1.2秒で定位置へ（なめらかに減速して、最後にゆっくり止まる）
  ・1行目 → 2行目の順に0.4秒の時間差。一度表示されたらそのまま残る
  ・表示を始めるのは js/main.js が .is-catch-ready を付けたとき
    （開いてから0.8秒後。キャッチ用の明朝体の読み込みが終わっていなければ、終わるのを待つ＝途中で書体が切り替わらない）
  ・動かすのは透明度と位置だけ（ぼかし・拡大縮小は大きな文字だと描画が重くなるため使わない）
  ・画像下部の紺のグラデーションも、文字に合わせて現れる（開いた直後は画像だけ）
*/
.js .hero__catch-line {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.2s cubic-bezier(.25, 1, .5, 1), transform 1.2s cubic-bezier(.25, 1, .5, 1);
  will-change: transform, opacity;
}

.js .is-catch-ready .hero__catch-line {
  opacity: 1;
  transform: none;
}

.js .is-catch-ready .hero__catch-line--2 { transition-delay: .4s; }

/* 傍点：2行目が表示された後に、1文字ずつ少し遅れてポンと現れる（控えめに、小さく弾むだけ） */
.js .hero__catch-dot::after {
  opacity: 0;
  transform: scale(0);
  transition: opacity .3s ease, transform .45s cubic-bezier(.34, 1.56, .64, 1);
}

.js .is-catch-ready .hero__catch-dot::after {
  opacity: 1;
  transform: none;
  transition-delay: 1.5s;
}

.js .is-catch-ready .hero__catch-dot:nth-child(2)::after { transition-delay: 1.62s; }
.js .is-catch-ready .hero__catch-dot:nth-child(3)::after { transition-delay: 1.74s; }

.js .hero__visual::after {
  opacity: 0;
  transition: opacity .8s ease;
}

.js .is-catch-ready .hero__visual::after {
  opacity: 1;
}

/* ---------- ファーストビュー：文字とボタンが順番に表示 ---------- */
.js [data-hero] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.2, .6, .2, 1);
}

.js [data-hero="1"] { transition-delay: .3s; }
.js [data-hero="2"] { transition-delay: .45s; }
.js [data-hero="3"] { transition-delay: .6s; }
.js [data-hero="4"] { transition-delay: .75s; }

.js .is-loaded [data-hero] {
  opacity: 1;
  transform: none;
}

/* ---------- 各セクション：スクロールでふわっと表示 ---------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.2, .6, .2, 1);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- スマホ固定ボタン：フォームが見えている間は隠す ---------- */
.sp-cta.is-hidden {
  transform: translateY(110%);
}

/* ---------- ページ上部へ戻るボタン ---------- */
.to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(251, 209, 101, .6);
  border-radius: 50%;
  background: var(--color-navy);
  box-shadow: 0 4px 14px rgba(0, 37, 105, .25);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s, background-color .2s, bottom .3s ease;
}

.to-top::before {
  content: "";
  position: absolute;
  top: 56%;
  left: 50%;
  width: 11px;
  height: 11px;
  border-top: 2px solid var(--color-gold-light);
  border-left: 2px solid var(--color-gold-light);
  transform: translate(-50%, -50%) rotate(45deg);
}

.to-top:hover {
  background: var(--color-blue);
}

.to-top:focus-visible {
  outline: 3px solid rgba(230, 167, 38, .6);
  outline-offset: 3px;
}

.to-top.is-shown {
  opacity: 1;
  visibility: visible;
  transform: none;
}

@media (max-width: 640px) {
  /* 画面下の固定ボタンと重ならない位置に */
  .to-top {
    right: 14px;
    bottom: calc(104px + env(safe-area-inset-bottom));
    width: 42px;
    height: 42px;
  }

  .to-top.is-low {
    bottom: 14px;
  }
}

/* ---------- PC用：画面右下に固定する電話番号＋お問い合わせボタン ---------- */
/* ファーストビューを過ぎたら表示（.is-shown）。フォームが見えている間は隠す。「上部へ戻る」ボタンの上に置く */
.pc-cta {
  position: fixed;
  right: 20px;
  bottom: 80px;
  z-index: 90;
  width: 200px;
  padding: 14px 16px 16px;
  border-radius: 12px;
  background: var(--color-navy);
  border: 1px solid rgba(251, 209, 101, .45);
  box-shadow: 0 8px 24px rgba(0, 37, 105, .25);
  color: #fff;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s;
}

.pc-cta.is-shown {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.pc-cta__label {
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--color-gold-light);
}

.pc-cta__tel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .03em;
  color: #fff;
  text-decoration: none;
}

.pc-cta__tel svg {
  width: 18px;
  height: 18px;
  fill: var(--color-gold-light);
}

.pc-cta__hours {
  font-size: 11px;
  color: rgba(255, 255, 255, .7);
  margin-bottom: 10px;
}

.pc-cta__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--gradient-gold);
  color: var(--color-navy);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: filter .2s;
}

.pc-cta__btn:hover {
  filter: brightness(1.06);
}

.pc-cta__btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.pc-cta__btn:focus-visible {
  outline: 3px solid rgba(230, 167, 38, .6);
  outline-offset: 2px;
}

/* スマホでは画面下の固定ボタンを使うので非表示 */
@media (max-width: 640px) {
  .pc-cta {
    display: none;
  }
}

/* ---------- 下層ページ（プライバシーポリシー・送信完了） ---------- */
.header__back {
  white-space: nowrap;
}

.page-head {
  padding: 72px 24px 64px;
  text-align: center;
  color: #fff;
  background:
    radial-gradient(circle at 100% 0%, rgba(16, 92, 186, .6) 0%, rgba(16, 92, 186, 0) 50%),
    var(--color-navy);
}

.page-head .section__en {
  color: var(--color-gold-light);
}

.page-head__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 32px;
  letter-spacing: .06em;
}

.legal h2 {
  margin: 48px 0 14px;
  padding-left: 14px;
  border-left: 3px solid var(--color-gold);
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.6;
  color: var(--color-navy);
}

.legal p + p,
.legal p + ul,
.legal ul + p {
  margin-top: 12px;
}

.legal ul {
  list-style: disc;
  padding-left: 1.5em;
}

.legal li + li {
  margin-top: 4px;
}

.legal__info {
  margin-top: 12px;
  padding: 20px 24px;
  background: var(--color-bg-silver);
  border-radius: 8px;
}

.legal__date {
  margin-top: 56px;
  text-align: right;
  color: var(--color-text-sub);
  font-size: 14px;
}

.thanks {
  text-align: center;
}

.thanks p + p {
  margin-top: 12px;
}

.thanks .btn {
  margin-top: 40px;
}

@media (max-width: 640px) {
  .page-head {
    padding: 52px 18px 44px;
  }

  .page-head__title {
    font-size: 26px;
  }

  .thanks {
    text-align: left;
  }

  .thanks .btn {
    display: block;
  }
}

/* ---------- 「視差効果を減らす」がオンの人には動きを止める ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .btn--hero,
  .btn--hero:hover,
  .btn--hero .btn__arrow,
  .btn--hero:hover .btn__arrow {
    transform: none;
  }

  .btn--hero::before {
    display: none;
  }

  .js .hero__bg,
  .js [data-hero],
  .js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* キャッチコピーは待たずに最初から表示 */
  .js .hero__catch-line,
  .js .hero__catch-dot::after {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .hero__visual::after {
    opacity: 1;
    transition: none;
  }

  .header,
  .logo__mark,
  .btn,
  .nav a:not(.btn)::after,
  .to-top,
  .pc-cta,
  .biz-card,
  .sp-cta,
  .nav-toggle__btn span {
    transition: none;
  }

  .btn--gold:hover {
    transform: none;
  }
}