/*
  SOILABO 統合スタイルシート
  全ページはこの css/style.css だけを読み込みます。

  調整メモ
  - 文字サイズ: 各ページの .page-title / 見出し / 本文の font-size
  - 文字色: color または --ink / --muted などの色変数
  - 行間: line-height
  - 字間: letter-spacing
  - ページ別の指定は、以下の各ページ用セクション内で調整してください。
  - 下部固定メニューの幅・高さ・色・アイコンは「共通MENU」セクションを調整してください。
  - 以前の個別CSSファイルは、控えとして残しています。
*/
/* 共通の基本設定 */
*, *::before, *::after { box-sizing: border-box; font-family: "Aldrich", sans-serif; }


/* ===== TOPページ ===== */
/*
  SOILABO トップページ用スタイル
  HTML の <link rel="stylesheet" href="css/style.css"> に対応する CSS です。

  調整するときの目安
  - 動画の暗さ : --video-dim（0.5 = 黒を50%重ねる）
  - メニューの色・横幅 : --menu-bg / --menu-width
  - タイトルの大きさ : h1 の font-size
  - 動画の見せる位置 : video の object-position
*/

body.home-page{
  --video-dim: 0.5;
  --menu-bg: #e6edf7;
  --menu-ink: #1d2b51;
  --frame-color: rgba(217, 157, 85, 0.62);
  --menu-width: 680px;
}

/* ブラウザーごとの余白を消し、トップページを1画面に収めます。 */
body.home-page *, body.home-page *::before, body.home-page *::after{
  box-sizing: border-box;
  font-family: "Aldrich", sans-serif; /* ページ内の文字をすべて Aldrich に統一 */
}

body.home-page, body.home-page{
  width: 100%;
  min-height: 100%;
  margin: 0;
}

body.home-page{
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: #101217;
  color: #fff;
  font-family: "Aldrich", sans-serif;
}

/*
  main 全体を画面いっぱいにします。
  スマートフォンでは動画の高さを画面に合わせ、中央を基準に左右を切り取ります。
*/
body.home-page main{
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100vh; /* svh 非対応ブラウザー用 */
  height: 100svh;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: #101217;
}

/* 背景動画。object-fit: cover で画面を埋め、中央を表示します。 */
body.home-page main > video{
  position: absolute;
  z-index: -2;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center; /* 動画の表示位置を変える場合はここを調整 */
}

/* 動画の上に黒を重ねて暗くし、白い文字を読みやすくします。 */
body.home-page main::before{
  position: absolute;
  z-index: -1;
  inset: 0;
  background: rgba(0, 0, 0, var(--video-dim));
  content: "";
  pointer-events: none;
}

/* 画像の細い額縁を再現する枠線。不要ならこの main::after を削除できます。
main::after {
  position: absolute;
  z-index: 0;
  inset: clamp(20px, 4.8vh, 54px) clamp(16px, 2vw, 40px)
    calc(clamp(20px, 4.8vh, 54px) + env(safe-area-inset-bottom));
  border: 1px solid var(--frame-color);
  content: "";
  pointer-events: none;
} */

/* 事業所名とサブタイトルを動画の中央に重ねます。 */
body.home-page main > div{
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: min(92vw, 1000px);
  transform: translate(-50%, -50%);
  text-align: center;
}

body.home-page main h1{
  margin: 0;
  color: #fff;
  font-size: clamp(3.25rem, 8vw, 7.5rem); /* タイトルの大きさ */
  font-weight: 500;
  letter-spacing: 0.19em;
  line-height: 1.05;
  text-indent: 0.19em; /* letter-spacing 分の見た目のズレを補正 */
  text-transform: uppercase;
}

body.home-page main h2{
  margin: 0.7rem 0 0;
  color: #fff;
  font-size: clamp(0.8rem, 1.55vw, 1.25rem);
  font-weight: 400;
  letter-spacing: 0.2em;
  line-height: 1.6;
}

/* 左上のロゴ文字と、その下を横切る細いラインです。 */
body.home-page header{
  position: fixed;
  z-index: 3;
  top: max(22px, env(safe-area-inset-top));
  right: clamp(24px, 3vw, 56px);
  left: clamp(24px, 3vw, 56px);
  color: #fff;
}

body.home-page header p{
  margin: 0;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
}

/* header::after {
  position: absolute;
  top: 31px;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--frame-color);
  content: "";
} */

/*
  フッターを常に画面下に固定し、中央に丸みのあるメニューを置きます。
  現在の HTML は div なので、見た目のスタイルです。リンクとして使うには
  各メニュー項目を <a href="..."> で囲んでください。
  各メニュー項目はリンクです。リンク先は index.html と同じ階層に置きます。
*/
body.home-page footer{
  position: fixed;
  z-index: 3;
  right: 0;
  bottom: max(10px, env(safe-area-inset-bottom));
  left: 0;
  display: flex;
  justify-content: center;
  padding: 0 16px;
}

body.home-page footer > div{
  display: flex;
  width: min(100%, var(--menu-width));
  min-height: 70px;
  align-items: center;
  justify-content: space-around;
  padding: 7px 12px 5px;
  border-radius: 0;
  background: var(--menu-bg);
  color: var(--menu-ink);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.16);
}

body.home-page footer > div > a, body.home-page footer > div > div{
  display: flex;
  min-width: 0;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: inherit;
  text-decoration: none;
  text-align: center;
}

body.home-page footer > div > a{
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

body.home-page footer > div > a:hover{
  opacity: 0.72;
  transform: translateY(-2px);
}

body.home-page footer > div > a:focus-visible{
  border-radius: 0;
  outline: 2px solid var(--menu-ink);
  outline-offset: 2px;
}

body.home-page footer img{
  display: block;
  width: 28px;
  height: 28px;
  object-fit: contain;
}

body.home-page footer p{
  margin: 0;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
}

/* スマートフォンでは文字間とメニューの高さを少し詰めます。 */
@media (max-width: 600px) {
  body.home-page main h1{
    font-size: clamp(2.8rem, 13vw, 5rem);
    letter-spacing: 0.14em;
    text-indent: 0.14em;
  }

  body.home-page main h2{
    margin-top: 0.6rem;
    font-size: clamp(0.68rem, 3vw, 0.95rem);
    letter-spacing: 0.12em;
  }

  body.home-page footer > div{
    min-height: 64px;
    padding: 6px 8px 4px;
  }

  body.home-page footer img{
    width: 24px;
    height: 24px;
  }

  body.home-page footer p{
    font-size: 0.7rem;
  }
}


/* ===== ABOUTページ ===== */
/*
  ABOUTページ専用スタイル
  このページではトップページ用 style.css と分けて使います。
  HTML の stylesheet は css/about.css を指定してください。

  ── まずここを調整 ─────────────────────────────────────
  背景色・文字色       : --page-bg / --text-color
  小見出しなどの色     : --muted-color / --accent-color
  文字サイズ           : --size-... の各変数
  行間                 : --line-... の各変数
  文字の間隔（字間）   : --tracking-... の各変数
  ページ全体の横幅     : --content-width
  写真とサムネイル間隔 : プロフィール画像レイアウト内の column-gap
*/

body.about-page{
  /* ページの配色。好みの色に変えるとページ全体へ反映されます。 */
  --page-bg: #f0f5fb;
  --text-color: #29385f;
  --muted-color: #6fa9df;
  --accent-color: #b9cde3;
  --menu-bg: #e2ebf6;

  /* Google Fonts の Aldrich を使い、日本語は環境にあるゴシック体で補います。 */
  --font-main: "Aldrich", "Noto Sans JP", sans-serif;

  /* 文字サイズ。clamp(最小, 画面に応じた大きさ, 最大) の順です。 */
  --size-kicker: 0.65rem;
  --size-page-title: clamp(1.25rem, 2vw, 1.65rem);
  --size-name: clamp(1.2rem, 2vw, 1.55rem);
  --size-section-title: clamp(1rem, 1.6vw, 1.25rem);
  --size-body: clamp(0.72rem, 1vw, 0.88rem);
  --size-small: 0.68rem;

  /* 行間。数値を大きくすると、複数行の文章がゆったりします。 */
  --line-body: 1.9;
  --line-list: 1.75;

  /* 字間。em は文字サイズに連動します。0.1em = 文字サイズの10%ほど。 */
  --tracking-kicker: 0.55em;
  --tracking-title: 0.28em;
  --tracking-name: 0.16em;
  --tracking-body: 0.12em;
  --tracking-small: 0.24em;

  /* 内容の最大横幅。大きくすると本文や各セクションを横に広げます。 */
  --content-width: 1000px;
}

/* 全体の初期余白をなくし、サイズ計算を分かりやすくします。 */
body.about-page *, body.about-page *::before, body.about-page *::after{
  box-sizing: border-box;
  font-family: var(--font-main);
}

body.about-page{
  min-width: 320px;
  scroll-behavior: smooth;
  background: var(--page-bg);
}

body.about-page{
  min-width: 320px;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  overflow-x: hidden;
  background: var(--page-bg); /* ページ背景色 */
  color: var(--text-color);   /* 標準の文字色 */
  font-family: var(--font-main);
  -webkit-font-smoothing: antialiased;
}

/* 左上のサイト名。位置や字間はここで調整できます。 */
body.about-page header{
  position: absolute;
  z-index: 5;
  top: 20px;
  left: clamp(20px, 3vw, 44px);
  color: var(--text-color);
}

body.about-page header p{
  margin: 0;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.13em; /* ヘッダーの字間 */
  line-height: 1.4;       /* ヘッダーの行間 */
  text-transform: uppercase;
}

/*
  メイン領域は縦に伸びてスクロールします。
  下の padding は固定フッターに文章が隠れないための余白です。
*/
body.about-page main{
  display: flex;
  width: min(100%, var(--content-width));
  min-height: 100vh;
  min-height: 100svh;
  flex-direction: column;
  align-items: center;
  margin-inline: auto;
  padding: 78px 24px calc(120px + env(safe-area-inset-bottom));
  text-align: center;
}

/* 上部の -Profile- 表記 */
body.about-page main > p:first-of-type{
  margin: 0;
  color: var(--muted-color);
  font-size: var(--size-kicker);
  font-weight: 600;
  letter-spacing: var(--tracking-kicker);
  line-height: 1.5; /* この小見出しの行間 */
}

/* ページタイトル ABOUT */
body.about-page main > h1{
  margin: 16px 0 0;
  color: var(--text-color);
  font-size: var(--size-page-title);
  font-weight: 500;
  letter-spacing: var(--tracking-title); /* ABOUT の字間 */
  line-height: 1.4;                     /* ABOUT の行間 */
  text-transform: uppercase;
}

/*
  プロフィール画像の並び。
  1枚目の大きな画像と、右側の小さな画像3枚を配置します。
  写真の大きさは grid-template-columns、間隔は column-gap で調整します。
*/
body.about-page main > div:first-of-type{
  display: grid;
  width: max-content;
  max-width: 100%;
  grid-template-columns: minmax(0, 320px) 110px;
  align-items: start;
  column-gap: 54px; /* 大きな画像とサムネイル列の横の間隔 */
  margin: 54px auto 0;
}

/* メインの立ち絵。高さを変えたいときは max-height を調整します。 */
body.about-page main > div:first-of-type > img{
  display: block;
  width: 100%;
  max-height: 530px;
  object-fit: contain;
  object-position: center top;
}

/* 右側のサムネイル3枚 */
body.about-page main > div:first-of-type > div{
  display: grid;
  gap: 12px; /* サムネイル同士の縦の間隔 */
  padding-top: 16px;
}

body.about-page main > div:first-of-type > div > img{
  display: block;
  width: 110px;
  aspect-ratio: 1 / 1;
  border: 1px solid rgba(92, 129, 174, 0.12);
  object-fit: cover;
}

/* プロフィール名 */
body.about-page main > h2:first-of-type{
  margin: 18px 0 0;
  color: var(--text-color);
  font-size: var(--size-name);
  font-weight: 500;
  letter-spacing: var(--tracking-name); /* 名前の字間 */
  line-height: 1.6;                     /* 名前の行間 */
}

/* 名前のローマ字表記 */
body.about-page main > p:nth-of-type(2){
  margin: 2px 0 0;
  color: var(--text-color);
  font-size: var(--size-small);
  font-weight: 500;
  letter-spacing: var(--tracking-small); /* ローマ字の字間 */
  line-height: 1.8;
}

/* 自己紹介文。横幅、文字色、サイズ、行間、字間を個別に変更できます。 */
body.about-page main > h3{
  max-width: 760px;
  margin: 24px 0 0;
  color: var(--text-color);
  font-size: var(--size-body);
  font-weight: 400;
  letter-spacing: var(--tracking-body); /* 自己紹介文の字間 */
  line-height: var(--line-body);        /* 自己紹介文の行間 */
}

/* 自己紹介の下に表示するSNSリンク */
body.about-page .about-socials{
  width: 100%;
  margin: 24px auto 0;
}

body.about-page .about-socials h2{
  margin: 0 0 10px;
  color: var(--text-color);
  font-size: var(--size-section-title);
  font-weight: 500;
  letter-spacing: var(--tracking-name);
  line-height: 1.6;
}

body.about-page .about-socials__links{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

body.about-page .about-socials__links a{
  display: inline-flex;
  min-width: 110px;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  padding: 7px 14px;
  border: 1px solid var(--muted-color);
  background: #fff;
  color: var(--text-color);
  font-size: var(--size-small);
  letter-spacing: var(--tracking-body);
  line-height: 1.4;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

body.about-page .about-socials__links a:hover{
  background: var(--muted-color);
  color: #fff;
}

body.about-page .about-socials__links a:focus-visible{
  outline: 2px solid var(--text-color);
  outline-offset: 2px;
}

/* 各情報ブロックの見出し。後ろの nth-of-type 指定で間隔を調整します。 */
body.about-page main > h2:not(:first-of-type){
  margin: 26px 0 6px;
  color: var(--text-color);
  font-size: var(--size-section-title);
  font-weight: 500;
  letter-spacing: var(--tracking-name); /* セクション見出しの字間 */
  line-height: 1.6;                     /* セクション見出しの行間 */
}

/* 「得意なデザイン」の前は、プロフィール文との間を広めにします。 */
body.about-page main > h2:nth-of-type(2){
  margin-top: 36px;
}

/*
  得意・苦手・受付不可の項目は横並びにします。
  gap の1つ目は縦、2つ目は横の間隔です。
*/
body.about-page main > div:nth-of-type(2), body.about-page main > div:nth-of-type(3), body.about-page main > div:nth-of-type(4){
  display: flex;
  max-width: 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 48px; /* 項目間の縦・横の間隔 */
}

body.about-page main > div:nth-of-type(2) > p, body.about-page main > div:nth-of-type(3) > p, body.about-page main > div:nth-of-type(4) > p{
  margin: 0;
  color: var(--text-color);
  font-size: var(--size-body);
  font-weight: 500;
  letter-spacing: var(--tracking-body); /* 項目テキストの字間 */
  line-height: var(--line-list);        /* 項目テキストの行間 */
}

/* 苦手なデザイン・受付不可は、ひとつ前の項目との間隔を整えます。 */
body.about-page main > h2:nth-of-type(3), body.about-page main > h2:nth-of-type(4){
  margin-top: 24px;
}

/* DATA は少し余白をあけ、1行ずつ中央揃えにします。 */
body.about-page main > h2:nth-of-type(5){
  margin-top: 78px;
}

body.about-page main > div:nth-of-type(5){
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

body.about-page main > div:nth-of-type(5) > p{
  margin: 0;
  color: var(--text-color);
  font-size: var(--size-body);
  font-weight: 400;
  letter-spacing: var(--tracking-body); /* DATA 各行の字間 */
  line-height: var(--line-list);        /* DATA 各行の行間 */
}

/* GALLERY と準備中の案内 */
body.about-page main > h2:nth-of-type(6){
  margin-top: 70px;
}

body.about-page main > div:nth-of-type(6) > p{
  margin: 0;
  color: var(--text-color);
  font-size: var(--size-body);
  letter-spacing: var(--tracking-body);
  line-height: var(--line-body);
}

/*
  画面下の固定メニュー。
  項目のリンク範囲はアイコンと文字全体です。
*/
body.about-page footer{
  position: fixed;
  z-index: 10;
  right: 0;
  bottom: max(10px, env(safe-area-inset-bottom));
  left: 0;
  display: flex;
  justify-content: center;
  padding: 0 16px;
}

body.about-page footer > div{
  display: flex;
  width: min(100%, 500px);
  min-height: 54px;
  align-items: center;
  justify-content: space-around;
  padding: 5px 10px 3px;
  border-radius: 0;
  background: var(--menu-bg);
  color: var(--text-color);
  box-shadow: 0 3px 16px rgba(41, 56, 95, 0.06);
}

body.about-page footer > div > a{
  display: flex;
  min-width: 0;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: 0;
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

body.about-page footer > div > a:hover{
  opacity: 0.7;
  transform: translateY(-2px);
}

body.about-page footer > div > a:focus-visible{
  outline: 2px solid var(--text-color);
  outline-offset: 2px;
}

body.about-page footer img{
  display: block;
  width: 22px;
  height: 22px;
  object-fit: contain;
}

body.about-page footer p{
  margin: 0;
  color: var(--text-color);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-transform: uppercase;
}

/* スマートフォン用。写真列をコンパクトにし、文字や項目を折り返します。 */
@media (max-width: 600px) {
  body.about-page main{
    padding: 72px 18px calc(108px + env(safe-area-inset-bottom));
  }

  body.about-page main > div:first-of-type{
    width: min(100%, 330px);
    grid-template-columns: minmax(0, 1fr) 58px;
    column-gap: 14px;
    margin-top: 38px;
  }

  body.about-page main > div:first-of-type > img{
    max-height: min(430px, 52svh);
  }

  body.about-page main > div:first-of-type > div{
    gap: 8px;
    padding-top: 10px;
  }

  body.about-page main > div:first-of-type > div > img{
    width: 58px;
  }

  body.about-page main > h3{
    max-width: 38rem;
    font-size: 0.75rem;
    letter-spacing: 0.07em;
    line-height: 1.9;
  }

  body.about-page .about-socials__links{
    gap: 8px;
  }

  body.about-page .about-socials__links a{
    min-width: 88px;
    padding-inline: 10px;
  }

  body.about-page main > h2:nth-of-type(2){
    margin-top: 30px;
  }

  body.about-page main > div:nth-of-type(2), body.about-page main > div:nth-of-type(3), body.about-page main > div:nth-of-type(4){
    column-gap: 20px;
  }

  body.about-page main > h2:nth-of-type(5){
    margin-top: 58px;
  }

  body.about-page main > h2:nth-of-type(6){
    margin-top: 56px;
  }

  body.about-page footer > div{
    min-height: 52px;
  }
}

/* かなり狭い画面では、サムネイルをさらに小さくして横幅に収めます。 */
@media (max-width: 360px) {
  body.about-page main > div:first-of-type{
    grid-template-columns: minmax(0, 1fr) 48px;
    column-gap: 10px;
  }

  body.about-page main > div:first-of-type > div > img{
    width: 48px;
  }

  body.about-page main > div:nth-of-type(2), body.about-page main > div:nth-of-type(3), body.about-page main > div:nth-of-type(4){
    column-gap: 14px;
  }
}

/* 動きが苦手な人の設定では、リンクのホバー演出をなくします。 */
@media (prefers-reduced-motion: reduce) {
  body.about-page{
    scroll-behavior: auto;
  }

  body.about-page footer > div > a{
    transition: none;
  }
}


/* ===== WORKSページ ===== */
/*
  WORKSページ専用スタイル
  HTML の <link rel="stylesheet" href="css/works.css"> から読み込みます。

  調整したいときは、まず下の変数を変更してください。
  - 背景・文字・アクセント色 : --page-bg / --text-color / --accent-color
  - 見出しや本文の大きさ     : --size-... の各変数
  - 行間・字間               : --line-... / --tracking-... の各変数
  - 作品一覧の横幅           : --content-width
  - サムネイルの角丸         : --thumbnail-radius
*/

body.works-page{
  /* サイト全体で使う色。既存ページに合わせた淡いブルー系です。 */
  --page-bg: #f0f5fb;
  --card-bg: #e5edf7;
  --text-color: #29385f;
  --muted-color: #7182a4;
  --accent-color: #5a9bd0;
  --tab-color: #5a9bd0;
  --tab-active: #29385f;
  --line-color: #bdc9d9;
  --menu-bg: #e2ebf6;

  /* Aldrichは英数字に適用し、日本語は端末のゴシック体で表示します。 */
  --font-main: "Aldrich", "Noto Sans JP", sans-serif;

  /* 文字サイズ。clamp(最小, 画面幅に応じた値, 最大) の順です。 */
  --size-eyebrow: 0.62rem;
  --size-page-title: clamp(1.35rem, 2.2vw, 1.75rem);
  --size-tab: clamp(0.7rem, 1.15vw, 0.95rem);
  --size-card-title: clamp(0.82rem, 1vw, 1rem);
  --size-card-meta: 0.68rem;

  /* 行間。数値を大きくすると、行と行の間が広がります。 */
  --line-title: 1.5;
  --line-body: 1.65;
  --line-small: 1.5;

  /* 字間。0.1emなら文字サイズの10%分、文字同士に間隔を空けます。 */
  --tracking-eyebrow: 0.5em;
  --tracking-heading: 0.2em;
  --tracking-tab: 0.22em;
  --tracking-body: 0.08em;
  --tracking-small: 0.1em;

  /* 一覧の最大幅、サムネイルの角丸、固定メニューの横幅です。 */
  --content-width: 1500px;
  --thumbnail-radius: 0;
  --menu-width: 500px;
}

body.works-page *, body.works-page *::before, body.works-page *::after{
  box-sizing: border-box;
}

body.works-page{
  min-width: 320px;
  scroll-behavior: smooth;
  background: var(--page-bg);
}

body.works-page{
  min-width: 320px;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  overflow-x: hidden;
  background: var(--page-bg);
  color: var(--text-color);
  font-family: var(--font-main);
  -webkit-font-smoothing: antialiased;
}

/* このページ内の英数字・記号も含めてフォントを統一します。 */
body.works-page, body.works-page *{
  font-family: var(--font-main);
}

/* 左上のサイト名 */
body.works-page .site-header{
  position: absolute;
  z-index: 5;
  top: 18px;
  left: clamp(18px, 3vw, 42px);
  color: var(--text-color);
}

body.works-page .site-header p{
  margin: 0;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em; /* サイト名の字間 */
  line-height: 1.4;       /* サイト名の行間 */
  text-transform: uppercase;
}

/* 固定メニューと重ならないよう、mainの下側に余白を確保します。 */
body.works-page .works-main{
  width: min(calc(100% - 48px), var(--content-width));
  min-height: 100vh;
  min-height: 100svh;
  margin-inline: auto;
  padding: 104px 0 calc(112px + env(safe-area-inset-bottom));
  text-align: center;
}

/* ページタイトル上の小さな英字 */
body.works-page .page-eyebrow{
  margin: 0;
  color: var(--accent-color);
  font-size: var(--size-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  line-height: var(--line-small);
}

/* WORKS見出し */
body.works-page .page-title{
  margin: 16px 0 0;
  color: var(--text-color);
  font-size: var(--size-page-title);
  font-weight: 500;
  letter-spacing: var(--tracking-heading); /* 見出しの字間 */
  line-height: var(--line-title);           /* 見出しの行間 */
}

/* カテゴリータブと一覧の外枠 */
body.works-page .works-filter{
  position: relative;
  min-inline-size: 0;
  margin: 20px 0 0;
  padding: 0;
  border: 0;
}

/* ラジオボタン本体は見た目から隠し、ラベルをクリックして選びます。 */
body.works-page .visually-hidden, body.works-page .filter-radio{
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 青い横長カテゴリー */
body.works-page .works-tabs{
  display: flex;
  min-height: 34px;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  padding: 0;
  border-radius: 0;
  background: var(--tab-color);
  color: #fff;
}

body.works-page .works-tabs label{
  display: flex;
  min-height: 34px;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border-radius: 0;
  color: #fff;
  cursor: pointer;
  font-size: var(--size-tab);
  letter-spacing: var(--tracking-tab); /* タブ文字の字間 */
  line-height: var(--line-title);
  white-space: nowrap;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}

body.works-page .works-tabs label:hover{
  opacity: 0.78;
}

body.works-page .works-tabs__divider{
  align-self: stretch;
  flex: 0 0 1px;
  width: 1px;
  background: rgba(255, 255, 255, 0.82);
}

/* プレイリストの自動読み込み件数や、読み込みエラーを控えめに案内します。 */
body.works-page .works-status{
  margin: 12px 0 -94px;
  color: var(--muted-color);
  font-size: var(--size-card-meta);
  letter-spacing: var(--tracking-small);
  line-height: var(--line-small);
}

body.works-page .works-status:empty{
  display: none;
}

/* 選択中のタブを濃いネイビーにします。 */
body.works-page .works-filter:has(#filter-all:checked) .works-tabs label[for="filter-all"], body.works-page .works-filter:has(#filter-mv:checked) .works-tabs label[for="filter-mv"], body.works-page .works-filter:has(#filter-teaser:checked) .works-tabs label[for="filter-teaser"], body.works-page .works-filter:has(#filter-other:checked) .works-tabs label[for="filter-other"], body.works-page .works-filter:has(#filter-cover:checked) .works-tabs label[for="filter-cover"], body.works-page .works-filter:has(#filter-original:checked) .works-tabs label[for="filter-original"]{
  background: var(--tab-active);
}

body.works-page .works-filter:has(#filter-all:focus-visible) .works-tabs label[for="filter-all"], body.works-page .works-filter:has(#filter-mv:focus-visible) .works-tabs label[for="filter-mv"], body.works-page .works-filter:has(#filter-teaser:focus-visible) .works-tabs label[for="filter-teaser"], body.works-page .works-filter:has(#filter-other:focus-visible) .works-tabs label[for="filter-other"], body.works-page .works-filter:has(#filter-cover:focus-visible) .works-tabs label[for="filter-cover"], body.works-page .works-filter:has(#filter-original:focus-visible) .works-tabs label[for="filter-original"]{
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* 作品カードをPCでは4列、画像の縦横比はYouTube標準の16:9にします。 */
body.works-page .works-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  gap: 30px clamp(24px, 5.5vw, 90px);
  margin-top: 108px;
  text-align: left;
}

body.works-page .work-card{
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--text-color);
  border-radius: 0;
  background: var(--card-bg);
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

/* サムネイルURLはHTMLのimg srcで変更します。 */
body.works-page .work-card__thumbnail{
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: 0;
  background: var(--card-bg);
  color: #fff;
}

body.works-page .work-card__thumbnail img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease, opacity 0.2s ease;
}

body.works-page .work-card__play{
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 48px;
  height: 34px;
  place-items: center;
  transform: translate(-50%, -50%);
  border-radius: 0;
  background: rgba(41, 56, 95, 0.84);
  color: #fff;
  font-size: 0.9rem;
  opacity: 0;
  transition: opacity 0.2s ease;
}

body.works-page .work-card__thumbnail:hover img, body.works-page .work-card__thumbnail:focus-visible img{
  transform: scale(1.04);
}

body.works-page .work-card__thumbnail:hover .work-card__play, body.works-page .work-card__thumbnail:focus-visible .work-card__play{
  opacity: 1;
}

body.works-page .work-card__thumbnail:focus-visible{
  outline: 3px solid var(--accent-color);
  outline-offset: 3px;
}

/* すべての作品カードに、公開時期・作品名・タグを常時表示します。 */
body.works-page .work-card__info{
  display: block;
  padding: 9px 10px 11px;
  color: var(--text-color);
}

body.works-page .work-card__date{
  margin: 0 0 4px;
  color: var(--muted-color);
  font-size: var(--size-card-meta);
  letter-spacing: var(--tracking-small); /* 公開時期の字間 */
  line-height: var(--line-small);
}

body.works-page .work-card__info h2{
  margin: 0;
  color: var(--text-color);
  font-size: var(--size-card-title);
  font-weight: 500;
  letter-spacing: var(--tracking-body); /* 作品名の字間 */
  line-height: var(--line-body);        /* 作品名の行間 */
}

body.works-page .work-card__tags{
  margin: 4px 0 0;
  color: var(--text-color);
  font-size: var(--size-card-meta);
  letter-spacing: var(--tracking-small); /* タグの字間 */
  line-height: var(--line-small);
}

body.works-page .work-card:hover{
  transform: translateY(-2px);
}

/* 選んだカテゴリーに合わないカードを隠します。 */
body.works-page #filter-mv:checked ~ .works-grid .work-card:not([data-category~="mv"]), body.works-page #filter-teaser:checked ~ .works-grid .work-card:not([data-category~="teaser"]), body.works-page #filter-other:checked ~ .works-grid .work-card:not([data-category~="other"]), body.works-page #filter-cover:checked ~ .works-grid .work-card:not([data-tags~="cover"]), body.works-page #filter-original:checked ~ .works-grid .work-card:not([data-tags~="original"]){
  display: none;
}

/* OTHER作品がないため、OTHERタブを選ぶと案内を表示します。 */
body.works-page .works-empty{
  display: none;
  margin: 56px 0 0;
  color: var(--muted-color);
  font-size: var(--size-card-title);
  letter-spacing: var(--tracking-body);
  line-height: var(--line-body);
}

body.works-page #filter-other:checked ~ .works-empty{
  display: block;
}

/* プレイリストにはカード未掲載分を含むすべての動画が入っています。 */
body.works-page .playlist-link{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 58px;
  padding: 12px 20px;
  border: 1px solid var(--accent-color);
  border-radius: 0;
  color: var(--text-color);
  font-size: 0.76rem;
  letter-spacing: var(--tracking-body);
  line-height: var(--line-body);
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

body.works-page .playlist-link:hover, body.works-page .playlist-link:focus-visible{
  background: var(--accent-color);
  color: #fff;
}

body.works-page .playlist-link:focus-visible{
  outline: 2px solid var(--text-color);
  outline-offset: 3px;
}

/* 画面下に固定する共通メニュー */
body.works-page .site-footer{
  position: fixed;
  z-index: 10;
  right: 0;
  bottom: max(10px, env(safe-area-inset-bottom));
  left: 0;
  display: flex;
  justify-content: center;
  padding: 0 16px;
  pointer-events: none;
}

body.works-page .site-footer nav{
  display: flex;
  width: min(100%, var(--menu-width));
  min-height: 58px;
  align-items: center;
  justify-content: space-around;
  padding: 5px 10px 3px;
  border-radius: 0;
  background: var(--menu-bg);
  box-shadow: 0 3px 16px rgba(41, 56, 95, 0.06);
  pointer-events: auto;
}

body.works-page .site-footer nav a{
  display: flex;
  min-width: 0;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: 0;
  color: var(--text-color);
  text-decoration: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

body.works-page .site-footer nav a:hover{
  opacity: 0.7;
  transform: translateY(-2px);
}

body.works-page .site-footer nav a:focus-visible{
  outline: 2px solid var(--text-color);
  outline-offset: 2px;
}

body.works-page .site-footer nav img{
  display: block;
  width: 22px;
  height: 22px;
  object-fit: contain;
}

body.works-page .site-footer nav span{
  color: var(--text-color);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

body.works-page .site-footer nav a[aria-current="page"] span{
  font-weight: 700;
}

/* タブレットでは3列、スマートフォンでは2列に並べます。 */
@media (max-width: 980px) {
  body.works-page .works-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px clamp(18px, 4vw, 48px);
    margin-top: 76px;
  }
}

@media (max-width: 680px) {
  body.works-page .works-main{
    width: min(calc(100% - 32px), 560px);
    padding-top: 78px;
  }

  body.works-page .works-filter{
    margin-top: 20px;
  }

  body.works-page .works-status{
    margin-bottom: -34px;
  }

  /* スマホではタブを横スクロールできるようにします。 */
  body.works-page .works-tabs{
    justify-content: flex-start;
    gap: 0;
    overflow-x: auto;
    padding-inline: 0;
    scrollbar-width: none;
  }

  body.works-page .works-tabs::-webkit-scrollbar{
    display: none;
  }

  body.works-page .works-tabs label{
    min-height: 34px;
    flex: 0 0 auto;
    padding-inline: 10px;
    font-size: 0.66rem;
    letter-spacing: 0.14em;
  }

  body.works-page .works-tabs__divider{
    margin-inline: 2px;
  }

  body.works-page .works-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 14px;
    margin-top: 46px;
  }

  /* スマホではカード内の余白を少し小さくし、作品名を読みやすくします。 */
  body.works-page .work-card__info{
    display: block;
    padding: 7px 7px 9px;
  }

  body.works-page .work-card__date, body.works-page .work-card__tags{
    font-size: 0.58rem;
  }

  body.works-page .work-card__info h2{
    font-size: 0.72rem;
    letter-spacing: 0.03em;
  }

  body.works-page .playlist-link{
    margin-top: 38px;
  }

  body.works-page .site-footer nav{
    min-height: 54px;
  }

  body.works-page .site-footer nav img{
    width: 20px;
    height: 20px;
  }
}

@media (max-width: 390px) {
  body.works-page .works-grid{
    grid-template-columns: 1fr;
    max-width: 340px;
    margin-inline: auto;
  }

  body.works-page .work-card__info{
    padding-inline: 10px;
  }

  body.works-page .work-card__info h2{
    font-size: 0.84rem;
  }
}

/* Reduce Motionを選んでいる端末ではアニメーションを止めます。 */
@media (prefers-reduced-motion: reduce) {
  body.works-page{
    scroll-behavior: auto;
  }

  body.works-page *, body.works-page *::before, body.works-page *::after{
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}



/* ===== PRICEページ ===== */
/*
  PRICEページ専用スタイル
  HTML の <link rel="stylesheet" href="css/price.css"> から読み込みます。
  MV / TEASER PV / その他 のタブ切り替えもこのCSSで行います。

  ── よく調整する場所 ──────────────────────────────────
  ページ背景、文字、アクセントの色 : --page-bg / --text-color / --accent-color
  文字のサイズ                     : --size-... の各変数
  行間                             : --line-... の各変数
  字間                             : --tracking-... の各変数
  メインコンテンツの横幅           : --content-width
  価格カードの横幅                 : --price-list-width
*/

body.price-page{
  /* ページ配色。好みの色へ変更すると全体に反映されます。 */
  --page-bg: #f0f5fb;
  --band-bg: #e3edf7;
  --card-bg: #e7eef7;
  --text-color: #29385f;
  --muted-color: #7182a4;
  --accent-color: #5a9bd0;
  --line-color: #bdc9d9;
  --tab-active: #29385f;
  --tab-inactive: #5a9bd0;
  --menu-bg: #e2ebf6;

  /* Aldrichを英数字に使い、日本語は端末のゴシック体で表示します。 */
  --font-main: "Aldrich", "Noto Sans JP", sans-serif;

  /* 文字サイズ。clamp(最小, 画面に応じたサイズ, 最大) の順です。 */
  --size-eyebrow: 0.62rem;
  --size-page-title: clamp(1.25rem, 2.2vw, 1.65rem);
  --size-tab: 0.75rem;
  --size-item-title: clamp(1.35rem, 2.6vw, 2rem);
  --size-price: clamp(1.45rem, 2.5vw, 1.9rem);
  --size-section-title: clamp(0.95rem, 1.5vw, 1.15rem);
  --size-body: 0.78rem;
  --size-small: 0.66rem;

  /* 行間。本文や小さい注意書きの詰まり具合を調整します。 */
  --line-body: 1.8;
  --line-small: 1.65;

  /* 字間。数字を大きくすると文字同士の間隔が広がります。 */
  --tracking-eyebrow: 0.5em;
  --tracking-heading: 0.2em;
  --tracking-body: 0.1em;
  --tracking-small: 0.08em;

  /* 各コンテンツの最大横幅 */
  --content-width: 1100px;
  --price-list-width: 900px;
}

/* 初期余白を整え、幅や余白の計算を簡単にします。 */
body.price-page *, body.price-page *::before, body.price-page *::after{
  box-sizing: border-box;
  font-family: var(--font-main);
}

body.price-page{
  min-width: 320px;
  scroll-behavior: smooth;
  background: var(--page-bg);
}

body.price-page{
  min-width: 320px;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  overflow-x: hidden;
  background: var(--page-bg);
  color: var(--text-color);
  font-family: var(--font-main);
  -webkit-font-smoothing: antialiased;
}

/* 左上のサイト名 */
body.price-page .site-header{
  position: absolute;
  z-index: 5;
  top: 18px;
  left: clamp(18px, 3vw, 42px);
  color: var(--text-color);
}

body.price-page .site-header p{
  margin: 0;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em; /* ヘッダーの字間 */
  line-height: 1.4;       /* ヘッダーの行間 */
  text-transform: uppercase;
}

/* メインのページ枠。下側は固定フッターに隠れないよう余白を取ります。 */
body.price-page .price-main{
  width: min(100%, var(--content-width));
  min-height: 100vh;
  min-height: 100svh;
  margin-inline: auto;
  padding: 64px 24px calc(120px + env(safe-area-inset-bottom));
  text-align: center;
}

/* 小さな - commission - 表記 */
body.price-page .page-eyebrow{
  margin: 0;
  color: var(--accent-color);
  font-size: var(--size-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  line-height: 1.5;
}

/* MENU & PRICE 見出し */
body.price-page .page-title{
  margin: 12px 0 0;
  color: var(--text-color);
  font-size: var(--size-page-title);
  font-weight: 500;
  letter-spacing: var(--tracking-heading); /* ページ見出しの字間 */
  line-height: 1.5;                       /* ページ見出しの行間 */
}

/* タブと各パネルの外枠 */
body.price-page .price-switcher{
  position: relative;
  width: 100%;
  margin: 20px 0 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}

/* 視覚的には隠しつつ、キーボードで選べるラジオボタンにします。 */
body.price-page .visually-hidden, body.price-page .tab-radio{
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 3つのタブ。列幅や全体幅はここで調整できます。 */
body.price-page .price-tabs{
  display: grid;
  width: min(100%, 360px);
  min-height: 34px;
  grid-template-columns: 0.8fr 1.5fr 1fr;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 0;
  background: var(--tab-inactive);
}

body.price-page .price-tabs label{
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  background: var(--tab-inactive);
  color: #fff;
  cursor: pointer;
  font-size: var(--size-tab);
  font-weight: 500;
  letter-spacing: var(--tracking-body); /* タブ文字の字間 */
  line-height: 1.3;
  transition: background-color 0.2s ease;
}

/* 選択中タブは濃い色にします。 */
body.price-page #tab-mv:checked ~ .price-tabs label[for="tab-mv"], body.price-page #tab-teaser:checked ~ .price-tabs label[for="tab-teaser"], body.price-page #tab-other:checked ~ .price-tabs label[for="tab-other"]{
  background: var(--tab-active);
}

/* キーボード操作時に、選択中のタブへフォーカス枠を表示します。 */
body.price-page #tab-mv:focus-visible ~ .price-tabs label[for="tab-mv"], body.price-page #tab-teaser:focus-visible ~ .price-tabs label[for="tab-teaser"], body.price-page #tab-other:focus-visible ~ .price-tabs label[for="tab-other"]{
  position: relative;
  z-index: 1;
  outline: 2px solid #fff;
  outline-offset: -4px;
}

/* パネルは選択されたタブのものだけ表示します。 */
body.price-page .price-panels{
  margin-top: 24px;
  text-align: left;
}

body.price-page .price-panel{
  display: none;
}

body.price-page #tab-mv:checked ~ .price-panels #panel-mv, body.price-page #tab-teaser:checked ~ .price-panels #panel-teaser, body.price-page #tab-other:checked ~ .price-panels #panel-other{
  display: block;
}

/* 料金カード一覧 */
body.price-page .price-list{
  width: min(100%, var(--price-list-width));
  margin-inline: auto;
}

body.price-page .price-card{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px minmax(150px, 0.72fr);
  align-items: center;
  gap: 26px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line-color);
}

body.price-page .price-card:first-child{
  padding-top: 16px;
}

body.price-page .price-card__description h2{
  margin: 0 0 4px;
  color: var(--text-color);
  font-size: var(--size-item-title);
  font-weight: 500;
  letter-spacing: 0.16em; /* 各プラン名の字間 */
  line-height: 1.4;
}

body.price-page .price-card__description > p{
  margin: 0;
  color: var(--text-color);
  font-size: var(--size-body);
  letter-spacing: var(--tracking-small); /* 説明文の字間 */
  line-height: var(--line-body);         /* 説明文の行間 */
}

body.price-page .price-card__description > .price-card__edit{
  margin-top: 12px;
  color: var(--muted-color);
  font-size: var(--size-small);
  letter-spacing: var(--tracking-small);
  line-height: var(--line-small);
}

/* YouTube動画のサムネイル。画像URLはprice.htmlのimg srcで変更できます。 */
body.price-page .price-card__preview{
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #dfe8f3;
  text-decoration: none;
}

body.price-page .price-card__preview img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

body.price-page .price-card__preview:hover img,
body.price-page .price-card__preview:focus-visible img{
  transform: scale(1.03);
  opacity: 0.9;
}

body.price-page .price-card__preview:focus-visible{
  outline: 2px solid var(--accent-color);
  outline-offset: 3px;
}

/* 価格、納期、contactへの相談ボタン */
body.price-page .price-card__quote{
  min-width: 0;
}

body.price-page .price-card__amount{
  margin: 0;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--muted-color);
  color: var(--text-color);
  font-size: var(--size-price);
  font-weight: 500;
  letter-spacing: 0.04em; /* 金額の字間 */
  line-height: 1.35;
  white-space: nowrap;
}

body.price-page .price-card__delivery{
  margin: 6px 0 15px;
  color: var(--muted-color);
  font-size: var(--size-small);
  letter-spacing: var(--tracking-small);
  line-height: var(--line-small);
}

body.price-page .consult-button{
  display: inline-block;
  min-width: 90px;
  padding: 4px 12px;
  background: var(--accent-color);
  color: #fff;
  font-size: var(--size-small);
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

body.price-page .consult-button:hover, body.price-page .consult-button:focus-visible{
  background: var(--tab-active);
}

/* 横幅いっぱいの淡い色の帯。項目ごとに破線で区切ります。 */
body.price-page .info-band{
  width: 100vw;
  margin: 24px 0 0 calc(50% - 50vw);
  padding: 4px 24px;
  background: var(--band-bg);
  text-align: center;
}

body.price-page .info-block{
  padding: 18px 0 16px;
  border-bottom: 1px dashed var(--line-color);
}

body.price-page .info-block:last-child{
  border-bottom: 0;
}

body.price-page .info-block h2, body.price-page .text-section > h2{
  margin: 0 0 8px;
  color: var(--text-color);
  font-size: var(--size-section-title);
  font-weight: 500;
  letter-spacing: var(--tracking-heading); /* 小見出しの字間 */
  line-height: 1.6;                       /* 小見出しの行間 */
}

body.price-page .inline-list{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 6px 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.price-page .inline-list li{
  color: var(--text-color);
  font-size: var(--size-body);
  letter-spacing: var(--tracking-small);
  line-height: var(--line-body);
}

body.price-page .inline-list strong{
  margin-left: 8px;
  font-weight: 500;
}

body.price-page .fine-print{
  margin: 5px 0 0;
  color: var(--muted-color);
  font-size: var(--size-small);
  letter-spacing: var(--tracking-small);
  line-height: var(--line-small);
}

/* 割引やオプションの説明カード */
body.price-page .discount-eligibility{
  margin: 30px 0 0;
  padding: 11px 14px;
  border-left: 3px solid var(--accent-color);
  background: var(--band-bg);
  color: var(--text-color);
  font-size: var(--size-small);
  letter-spacing: var(--tracking-small);
  line-height: var(--line-body);
}

body.price-page .discount-cards{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 5vw, 54px);
  margin: 44px auto 0;
}

body.price-page .discount-card{
  min-height: 190px;
  padding: 22px 16px;
  border: 1px solid var(--muted-color);
  border-radius: 0;
  background: var(--card-bg);
  color: var(--text-color);
  text-align: center;
}

body.price-page .discount-card h2{
  margin: 0;
  font-size: var(--size-section-title);
  font-weight: 500;
  letter-spacing: var(--tracking-body);
  line-height: 1.6;
}

body.price-page .discount-card__price{
  margin: 3px 0 12px !important;
  color: var(--muted-color);
  font-size: var(--size-small) !important;
}

body.price-page .discount-card p, body.price-page .discount-card li{
  font-size: var(--size-small);
  letter-spacing: var(--tracking-small);
  line-height: var(--line-small);
}

body.price-page .discount-card p{
  margin: 8px 0 0;
}

body.price-page .discount-card ul{
  display: inline-block;
  margin: 8px auto 0;
  padding-left: 1.2em;
  text-align: left;
}

/* 素材、受付条件、納品、クレジット、注意事項の各説明ブロック */
body.price-page .text-section{
  margin: 42px auto 0;
  text-align: center;
}

body.price-page .text-section > p{
  margin: 4px 0;
  color: var(--text-color);
  font-size: var(--size-body);
  letter-spacing: var(--tracking-small);
  line-height: var(--line-body);
}
/* MV制作の流れをPCでは2列、スマートフォンでは1列で読みやすく表示します。 */
body.price-page .workflow-list{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 980px;
  margin: 14px auto 0;
  padding: 0;
  list-style: none;
  counter-reset: workflow-step;
  text-align: left;
}

body.price-page .workflow-list > li{
  position: relative;
  min-width: 0;
  padding: 14px 16px 14px 52px;
  border: 1px solid var(--line-color);
  background: var(--card-bg);
  counter-increment: workflow-step;
}

body.price-page .workflow-list > li::before{
  position: absolute;
  top: 14px;
  left: 16px;
  color: var(--accent-color);
  content: counter(workflow-step, decimal-leading-zero);
  font-weight: 600;
}

body.price-page .workflow-list h3{
  margin: 0 0 4px;
  color: var(--text-color);
  font-size: var(--size-body);
  font-weight: 600;
  line-height: var(--line-body);
}

body.price-page .workflow-list p{
  margin: 0;
  color: var(--text-color);
  font-size: var(--size-body);
  letter-spacing: var(--tracking-small);
  line-height: var(--line-body);
}

body.price-page .price-calculation-note{
  width: min(100%, 760px);
  margin: 14px auto 0;
  padding: 12px 18px;
  background: var(--band-bg);
  text-align: left;
}

body.price-page .price-calculation-formula{
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
  margin: 10px 0 8px;
}

body.price-page .price-calculation-term{
  display: flex;
  min-width: 0;
  min-height: 48px;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 7px 9px;
  border: 1px solid var(--line-color);
  background: var(--card-bg);
  color: var(--text-color);
  font-size: var(--size-body);
  letter-spacing: var(--tracking-small);
  line-height: var(--line-body);
  text-align: center;
}

body.price-page .price-calculation-term small{
  color: var(--muted-color);
  font-size: var(--size-small);
  letter-spacing: 0.02em;
}

body.price-page .price-calculation-term--result{
  border-color: var(--text-color);
  background: var(--text-color);
  color: #fff;
}

body.price-page .price-calculation-operator{
  display: flex;
  align-items: center;
  color: var(--accent-color);
  font-size: 1rem;
  font-weight: 600;
}

body.price-page .price-calculation-note > p{
  margin: 4px 0 0;
}

body.price-page .materials-list{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 34px;
  margin: 18px 0 12px;
  padding: 0;
  list-style: none;
}

body.price-page .materials-list li{
  color: var(--text-color);
  font-size: var(--size-body);
  letter-spacing: var(--tracking-small);
  line-height: var(--line-body);
}

body.price-page .fine-print--list{
  display: grid;
  gap: 3px;
  margin-top: 12px;
  padding: 0;
  list-style: none;
}

body.price-page .compact-section{
  margin-top: 38px;
}

body.price-page .credit-links{
  margin-top: 12px !important;
  line-height: 1.9 !important;
  overflow-wrap: anywhere;
}

body.price-page .credit-links a{
  color: var(--text-color);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* teaser PV の必要素材説明を項目ごとにまとめます。 */
body.price-page .material-details{
  display: grid;
  max-width: 820px;
  gap: 24px;
  margin: 28px auto 0;
}

body.price-page .material-details article h3{
  margin: 0 0 6px;
  color: var(--text-color);
  font-size: var(--size-body);
  font-weight: 500;
  letter-spacing: var(--tracking-body);
  line-height: var(--line-body);
}

body.price-page .material-details article p{
  margin: 3px 0;
  color: var(--text-color);
  font-size: var(--size-small);
  letter-spacing: var(--tracking-small);
  line-height: var(--line-small);
}

/* 「その他」タブのご案内 */
body.price-page .price-panel--other{
  display: none;
  min-height: 48vh;
  place-content: center;
}

body.price-page #tab-other:checked ~ .price-panels #panel-other{
  display: grid;
}

body.price-page .other-message{
  max-width: 700px;
  margin: 0 auto;
  padding: 36px 24px;
  color: var(--text-color);
  text-align: center;
}

body.price-page .other-message p{
  margin: 4px 0;
  font-size: clamp(0.9rem, 1.5vw, 1.1rem);
  letter-spacing: var(--tracking-body);
  line-height: var(--line-body);
}

body.price-page .other-message a{
  color: var(--accent-color);
  text-underline-offset: 4px;
}

/* ページ下部に固定するメニュー */
body.price-page .site-footer{
  position: fixed;
  z-index: 10;
  right: 0;
  bottom: max(10px, env(safe-area-inset-bottom));
  left: 0;
  display: flex;
  justify-content: center;
  padding: 0 16px;
  pointer-events: none;
}

body.price-page .site-footer nav{
  display: flex;
  width: min(100%, 500px);
  min-height: 54px;
  align-items: center;
  justify-content: space-around;
  padding: 5px 10px 3px;
  border-radius: 0;
  background: var(--menu-bg);
  box-shadow: 0 3px 16px rgba(41, 56, 95, 0.06);
  pointer-events: auto;
}

body.price-page .site-footer nav a{
  display: flex;
  min-width: 0;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: 0;
  color: var(--text-color);
  text-decoration: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

body.price-page .site-footer nav a:hover{
  opacity: 0.7;
  transform: translateY(-2px);
}

body.price-page .site-footer nav a:focus-visible{
  outline: 2px solid var(--text-color);
  outline-offset: 2px;
}

body.price-page .site-footer nav img{
  display: block;
  width: 22px;
  height: 22px;
  object-fit: contain;
}

body.price-page .site-footer nav span{
  color: var(--text-color);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

body.price-page .site-footer nav a[aria-current="page"] span{
  font-weight: 700;
}

/* タブレットやスマートフォンでは価格カードを2段に組み替えます。 */
@media (max-width: 760px) {
  body.price-page .price-main{
    padding: 64px 20px calc(112px + env(safe-area-inset-bottom));
  }

  body.price-page .price-card{
    grid-template-columns: minmax(0, 1fr) 150px;
    gap: 12px 20px;
  }

  body.price-page .price-card__quote{
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
  }

  body.price-page .price-card__amount{
    width: max-content;
    max-width: 100%;
  }

  body.price-page .price-card__delivery{
    margin: 0;
  }

  body.price-page .discount-cards{
    gap: 16px;
  }

  body.price-page .discount-card{
    padding: 18px 12px;
  }
}

@media (max-width: 640px) {
  body.price-page .workflow-list{
    grid-template-columns: 1fr;
  }

  body.price-page .price-calculation-formula{
    flex-direction: column;
    gap: 4px;
  }

  body.price-page .price-calculation-term small br{
    display: none;
  }

  body.price-page .price-calculation-operator{
    min-height: 14px;
    justify-content: center;
  }
}

/* 狭いスマートフォンではカードを縦並びにして読みやすくします。 */
@media (max-width: 520px) {
  body.price-page .price-main{
    padding: 62px 16px calc(104px + env(safe-area-inset-bottom));
  }

  body.price-page .price-tabs{
    min-height: 36px;
  }

  body.price-page .price-tabs label{
    padding-inline: 7px;
    font-size: 0.68rem;
  }

  body.price-page .price-panels{
    margin-top: 18px;
  }

  body.price-page .price-card{
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 20px 0;
  }

  body.price-page .price-card__description h2{
    font-size: 1.35rem;
  }

  body.price-page .price-card__preview{
    width: min(100%, 300px);
    justify-self: center;
  }

  body.price-page .price-card__quote{
    grid-template-columns: 1fr auto;
    gap: 8px 12px;
  }

  body.price-page .price-card__amount{
    grid-column: 1 / -1;
    width: 100%;
    font-size: 1.45rem;
  }

  body.price-page .price-card__delivery{
    margin: 0;
  }

  body.price-page .info-band{
    padding-inline: 18px;
  }

  body.price-page .inline-list{
    gap: 6px 18px;
  }

  body.price-page .discount-cards{
    grid-template-columns: 1fr;
    max-width: 360px;
    gap: 14px;
    margin-top: 28px;
  }

  body.price-page .discount-card{
    min-height: 0;
    padding: 20px 16px;
  }

  body.price-page .materials-list{
    gap: 6px 16px;
  }

  body.price-page .credit-links a{
    font-size: 0.62rem;
  }
}

/* Reduce Motion 設定の利用者にはスクロールやホバーの動きを止めます。 */
@media (prefers-reduced-motion: reduce) {
  body.price-page{
    scroll-behavior: auto;
  }

  body.price-page .price-tabs label, body.price-page .consult-button, body.price-page .site-footer nav a{
    transition: none;
  }
}



/* ===== CONTACTページ ===== */
/*
  CONTACTページ専用CSS
  文字・色・間隔を調整するときは、まず :root の変数を変更してください。

  - 背景と文字の色       : --page-bg / --text-color / --accent-color
  - 文字サイズ           : --size-... の各変数
  - 行間と字間           : --line-... / --tracking-... の各変数
  - ページの横幅         : --content-width
  - 固定フッターメニュー : --menu-width
*/

body.contact-page{
  --page-bg: #f0f5fb;
  --card-bg: #fff;
  --soft-bg: #e5edf7;
  --text-color: #29385f;
  --muted-color: #7182a4;
  --accent-color: #5a9bd0;
  --tab-active: #29385f;
  --line-color: #bdc9d9;
  --menu-bg: #e2ebf6;
  --font-main: "Aldrich", "Noto Sans JP", sans-serif;

  /* 文字サイズ。clamp(最小, 画面幅に応じた値, 最大) の順です。 */
  --size-brand: 0.68rem;
  --size-eyebrow: 0.64rem;
  --size-title: clamp(1.35rem, 2.4vw, 1.8rem);
  --size-lead: 0.82rem;
  --size-section: clamp(0.92rem, 1.4vw, 1.08rem);
  --size-label: 0.76rem;
  --size-input: 0.88rem;
  --size-small: 0.68rem;

  /* 行間。数値を大きくすると、行と行の間隔が広がります。 */
  --line-heading: 1.5;
  --line-body: 1.8;
  --line-small: 1.55;

  /* 字間。0.1em は文字サイズの10%分の間隔です。 */
  --tracking-brand: 0.12em;
  --tracking-eyebrow: 0.48em;
  --tracking-title: 0.2em;
  --tracking-body: 0.12em;
  --tracking-label: 0.08em;

  --content-width: 820px;
  --menu-width: 410px;
  --control-radius: 0;
}

body.contact-page *, body.contact-page *::before, body.contact-page *::after{
  box-sizing: border-box;
}

body.contact-page{
  min-width: 320px;
  scroll-behavior: smooth;
  background: var(--page-bg);
}

body.contact-page, body.contact-page *{
  font-family: var(--font-main);
}

body.contact-page{
  min-width: 320px;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  overflow-x: hidden;
  background: var(--page-bg);
  color: var(--text-color);
  -webkit-font-smoothing: antialiased;
}

/* 左上に固定するサイト名 */
body.contact-page .site-header{
  position: absolute;
  z-index: 5;
  top: 18px;
  left: clamp(18px, 3vw, 42px);
}

body.contact-page .site-header a{
  color: var(--text-color);
  font-size: var(--size-brand);
  letter-spacing: var(--tracking-brand);
  line-height: var(--line-heading);
  text-decoration: none;
  text-transform: uppercase;
}

/* 固定メニューと重ならないよう、ページ下側に余白を確保します。 */
body.contact-page .contact-main{
  width: min(calc(100% - 40px), var(--content-width));
  margin-inline: auto;
  padding: 58px 0 calc(120px + env(safe-area-inset-bottom));
  text-align: center;
}

body.contact-page .page-eyebrow{
  margin: 0;
  color: var(--accent-color);
  font-size: var(--size-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  line-height: var(--line-small);
}

body.contact-page .page-heading h1{
  margin: 9px 0 0;
  color: var(--text-color);
  font-size: var(--size-title);
  font-weight: 500;
  letter-spacing: var(--tracking-title); /* CONTACT見出しの字間 */
  line-height: var(--line-heading);      /* CONTACT見出しの行間 */
}

body.contact-page .page-lead{
  margin: 14px 0 0;
  color: var(--text-color);
  font-size: var(--size-lead);
  letter-spacing: var(--tracking-body); /* 説明文の字間 */
  line-height: var(--line-body);        /* 説明文の行間 */
}

body.contact-page .x-form-note{
  margin: 8px 0 0;
  color: var(--muted-color);
  font-size: var(--size-small);
  letter-spacing: var(--tracking-label);
  line-height: var(--line-body);
}

body.contact-page .x-form-note a{
  color: var(--text-color);
  text-underline-offset: 0.2em;
}

/* 料金ページへ移動する濃紺の横長リンク */
body.contact-page .price-link{
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  margin-top: 18px;
  padding: 5px 24px;
  background: var(--text-color);
  color: #fff;
  font-size: var(--size-label);
  letter-spacing: var(--tracking-body);
  line-height: var(--line-heading);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

body.contact-page .price-link:hover{
  opacity: 0.8;
}
/* お問い合わせ前に支払い方法と時期を確認できる案内です。 */
body.contact-page .payment-notice{
  width: min(100%, 620px);
  margin: 18px auto 0;
  padding: 16px 20px;
  border: 1px solid var(--muted-color);
  background: var(--band-bg);
  text-align: left;
}

body.contact-page .payment-notice h2{
  margin: 0 0 6px;
  color: var(--text-color);
  font-size: var(--size-section-title);
  font-weight: 600;
  letter-spacing: var(--tracking-heading);
}

body.contact-page .payment-notice p{
  margin: 0;
  line-height: var(--line-body);
}

body.contact-page .payment-notice ul{
  display: grid;
  gap: 4px;
  margin: 8px 0 0;
  padding-left: 1.25em;
  line-height: var(--line-body);
}

/* 仲介サイトの案内ボックス */
body.contact-page .referral-box{
  width: min(100%, 500px);
  margin: 18px auto 0;
  padding: 10px 16px 12px;
  border: 1px solid var(--muted-color);
  border-radius: 0;
  background: var(--card-bg);
}

body.contact-page .referral-box > p{
  margin: 0;
  font-size: var(--size-small);
  letter-spacing: var(--tracking-label);
  line-height: var(--line-body);
}

body.contact-page .referral-box small{
  color: var(--muted-color);
  font-size: 0.9em;
}

body.contact-page .referral-links{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 8vw, 72px);
  margin-top: 5px;
}

body.contact-page .referral-link{
  display: inline-flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  width: min(36%, 170px);
  height: 46px;
  text-decoration: none;
}

body.contact-page .referral-link:hover{
  opacity: 0.75;
}

body.contact-page .referral-link img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

body.contact-page .form-section{
  margin-top: 18px;
}

body.contact-page .form-section > h2{
  margin: 0;
  color: var(--text-color);
  font-size: var(--size-section);
  font-weight: 500;
  letter-spacing: var(--tracking-title); /* セクション見出しの字間 */
  line-height: var(--line-heading);
}

body.contact-page .contact-form{
  margin-top: 22px;
  text-align: left;
}

body.contact-page .request-type{
  min-inline-size: 0;
  margin: 0 auto 34px;
  padding: 0;
  border: 0;
}

body.contact-page .request-type > input{
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

body.contact-page .request-tabs{
  display: flex;
  width: min(100%, 430px);
  min-height: 38px;
  align-items: stretch;
  margin-inline: auto;
  overflow: hidden;
  border-radius: 0;
  background: var(--accent-color);
  color: #fff;
}

body.contact-page .request-tabs label{
  display: flex;
  min-width: 0;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  border-radius: 0;
  color: #fff;
  cursor: pointer;
  font-size: var(--size-label);
  letter-spacing: 0.18em;
  line-height: var(--line-heading);
  text-align: center;
  transition: background-color 0.2s ease;
}

body.contact-page .request-tabs label:hover{
  background: rgba(41, 56, 95, 0.45);
}

body.contact-page #type-mv:checked ~ .request-tabs label[for="type-mv"], body.contact-page #type-teaser:checked ~ .request-tabs label[for="type-teaser"], body.contact-page #type-other:checked ~ .request-tabs label[for="type-other"]{
  background: var(--tab-active);
}

body.contact-page #type-mv:focus-visible ~ .request-tabs label[for="type-mv"], body.contact-page #type-teaser:focus-visible ~ .request-tabs label[for="type-teaser"], body.contact-page #type-other:focus-visible ~ .request-tabs label[for="type-other"]{
  outline: 2px solid #fff;
  outline-offset: -4px;
}

body.contact-page .form-fields{
  width: min(100%, 680px);
  margin-inline: auto;
}

body.contact-page .form-row{
  display: grid;
  grid-template-columns: minmax(155px, 0.38fr) minmax(0, 1fr);
  align-items: center;
  gap: 10px 16px;
  margin: 0 0 18px;
}

body.contact-page .form-row[hidden]{
  display: none;
}

body.contact-page .budget-note{
  grid-column: 2;
  margin: -2px 0 0;
  color: var(--muted-color);
  font-size: var(--size-small);
  letter-spacing: 0.04em;
  line-height: var(--line-body);
}

body.contact-page .form-row > label, body.contact-page .choice-row legend{
  color: var(--text-color);
  font-size: var(--size-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label); /* 項目名の字間 */
  line-height: var(--line-body);        /* 項目名の行間 */
}

body.contact-page .required{
  display: inline-block;
  margin-left: 3px;
  color: var(--muted-color);
  font-size: 0.72em;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

body.contact-page .form-row input, body.contact-page .form-row textarea{
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line-color);
  border-radius: 0;
  background: var(--card-bg);
  color: var(--text-color);
  font-size: var(--size-input);
  letter-spacing: 0.04em;
  line-height: var(--line-body);
}

body.contact-page .form-row input{
  min-height: 38px;
  padding: 6px 10px;
}

body.contact-page .form-row textarea{
  min-height: 92px;
  padding: 9px 10px;
  resize: vertical;
}

body.contact-page .form-row input::placeholder, body.contact-page .form-row textarea::placeholder{
  color: #9aa6bc;
  opacity: 1;
}

/* 出演人数の入力欄の右側に単位「名」を表示します。 */
body.contact-page .input-with-unit{
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
  color: var(--text-color);
  font-size: var(--size-input);
  letter-spacing: var(--tracking-label);
}

body.contact-page .input-with-unit input{
  flex: 1 1 auto;
}

body.contact-page .form-row input:focus-visible, body.contact-page .form-row textarea:focus-visible, body.contact-page .choice-row input:focus-visible, body.contact-page .consent-row input:focus-visible{
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}

body.contact-page .form-row--stacked{
  grid-template-columns: 1fr;
  gap: 7px;
}

body.contact-page .discount-eligibility{
  margin: 2px 0 14px;
  padding: 9px 12px;
  border-left: 3px solid var(--accent-color);
  background: var(--soft-bg);
  color: var(--text-color);
  font-size: var(--size-small);
  letter-spacing: 0.04em;
  line-height: var(--line-body);
}

body.contact-page .choice-row{
  display: flex;
  min-inline-size: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px 20px;
  margin: 0 0 18px;
  padding: 0;
  border: 0;
}

body.contact-page .choice-row legend{
  float: left;
  width: 155px;
  margin-right: 16px;
}

body.contact-page .choice-row label{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-color);
  font-size: var(--size-small);
  letter-spacing: 0.04em;
  line-height: var(--line-body);
  cursor: pointer;
}

body.contact-page .choice-row input, body.contact-page .consent-row input{
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  accent-color: var(--accent-color);
}

body.contact-page .consent-row{
  display: flex;
  width: fit-content;
  max-width: 100%;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  margin: 38px auto 0;
  color: var(--text-color);
  font-size: var(--size-small);
  letter-spacing: 0.05em;
  line-height: var(--line-body);
  cursor: pointer;
}

body.contact-page .consent-row input{
  margin-top: 3px;
}

body.contact-page .submit-button{
  display: block;
  width: min(100%, 430px);
  min-height: 46px;
  margin: 20px auto 0;
  padding: 10px 16px;
  border: 0;
  border-radius: 0;
  background: var(--accent-color);
  color: #fff;
  font-size: var(--size-label);
  letter-spacing: 0.18em;
  line-height: var(--line-heading);
}

body.contact-page .submit-button:disabled{
  cursor: not-allowed;
  opacity: 0.7;
}

body.contact-page .form-notice{
  margin: 10px 0 0;
  color: var(--muted-color);
  font-size: var(--size-small);
  letter-spacing: 0.04em;
  line-height: var(--line-body);
  text-align: center;
}

body.contact-page .visually-hidden{
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 画面下部に固定する全ページ共通メニュー */
body.contact-page .site-footer{
  position: fixed;
  z-index: 10;
  right: 0;
  bottom: max(10px, env(safe-area-inset-bottom));
  left: 0;
  display: flex;
  justify-content: center;
  padding: 0 16px;
  pointer-events: none;
}

body.contact-page .site-footer nav{
  display: flex;
  width: min(100%, var(--menu-width));
  min-height: 64px;
  align-items: center;
  justify-content: space-around;
  padding: 5px 10px;
  border-radius: 0;
  background: var(--menu-bg);
  box-shadow: 0 4px 24px rgba(41, 56, 95, 0.1);
  pointer-events: auto;
}

body.contact-page .site-footer a{
  display: flex;
  min-width: 0;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--text-color);
  font-size: 0.62rem;
  line-height: 1.2;
  text-decoration: none;
  text-transform: uppercase;
}

body.contact-page .site-footer a:hover{
  opacity: 0.68;
}

body.contact-page .site-footer a:focus-visible{
  border-radius: 0;
  outline: 2px solid var(--text-color);
  outline-offset: 2px;
}

body.contact-page .site-footer img{
  display: block;
  width: 23px;
  height: 23px;
  object-fit: contain;
}

@media (max-width: 640px) {
  body.contact-page{
    --size-label: 0.72rem;
    --size-input: 0.86rem;
    --size-small: 0.64rem;
  }

  body.contact-page .contact-main{
    width: min(calc(100% - 32px), var(--content-width));
    padding-top: 62px;
  }

  body.contact-page .page-lead{
    font-size: 0.75rem;
    line-height: 1.9;
  }

  body.contact-page .price-link{
    max-width: 100%;
    padding-inline: 16px;
  }

  body.contact-page .request-tabs{
    min-height: 36px;
  }

  body.contact-page .request-tabs label{
    padding-inline: 5px;
    font-size: 0.66rem;
    letter-spacing: 0.1em;
  }

  body.contact-page .form-row{
    grid-template-columns: 1fr;
    gap: 6px;
    margin-bottom: 16px;
  }

  body.contact-page .budget-note{
    grid-column: 1;
  }

  body.contact-page .form-row input{
    min-height: 40px;
  }

  body.contact-page .form-row--stacked{
    gap: 6px;
  }

  body.contact-page .choice-row{
    gap: 8px 14px;
  }

  body.contact-page .choice-row legend{
    float: none;
    width: 100%;
    margin: 0 0 1px;
  }

  body.contact-page .consent-row{
    margin-top: 28px;
  }

  body.contact-page .site-footer nav{
    min-height: 60px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.contact-page{
    scroll-behavior: auto;
  }

  body.contact-page *, body.contact-page *::before, body.contact-page *::after{
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}



/* ===== 共通MENU（全ページに表示） ===== */
/*
  全ページ共通の固定フッターメニュー
  メニューの幅・高さ・色・アイコンサイズは、ここを変更すると全ページに反映されます。
*/
:root{
  --site-menu-width: 600px;
  --site-menu-height: 60px;
  --site-menu-bg: #e2ebf6;
  --site-menu-color: #29385f;
}

body.home-page .site-footer, body.about-page .site-footer, body.works-page .site-footer, body.price-page .site-footer, body.contact-page .site-footer{
  position: fixed;
  z-index: 20;
  right: 0;
  bottom: max(10px, env(safe-area-inset-bottom));
  left: 0;
  display: flex;
  justify-content: center;
  padding: 0 16px;
  pointer-events: none;
}

body.home-page .site-footer nav, body.about-page .site-footer nav, body.works-page .site-footer nav, body.price-page .site-footer nav, body.contact-page .site-footer nav{
  display: flex;
  width: min(100%, var(--site-menu-width));
  min-height: var(--site-menu-height);
  align-items: center;
  justify-content: space-around;
  padding: 5px 10px 3px;
  border-radius: 0;
  background: var(--site-menu-bg);
  box-shadow: 0 3px 16px rgba(41, 56, 95, 0.08);
  pointer-events: auto;
}

body.home-page .site-footer nav a, body.about-page .site-footer nav a, body.works-page .site-footer nav a, body.price-page .site-footer nav a, body.contact-page .site-footer nav a{
  display: flex;
  min-width: 0;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--site-menu-color);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

body.home-page .site-footer nav a:hover, body.about-page .site-footer nav a:hover, body.works-page .site-footer nav a:hover, body.price-page .site-footer nav a:hover, body.contact-page .site-footer nav a:hover{
  opacity: 0.72;
  transform: translateY(-2px);
}

body.home-page .site-footer nav a:focus-visible, body.about-page .site-footer nav a:focus-visible, body.works-page .site-footer nav a:focus-visible, body.price-page .site-footer nav a:focus-visible, body.contact-page .site-footer nav a:focus-visible{
  border-radius: 0;
  outline: 2px solid var(--site-menu-color);
  outline-offset: 2px;
}

body.home-page .site-footer nav img, body.about-page .site-footer nav img, body.works-page .site-footer nav img, body.price-page .site-footer nav img, body.contact-page .site-footer nav img{
  display: block;
  width: 22px;
  height: 22px;
  object-fit: contain;
}

body.home-page .site-footer nav span, body.about-page .site-footer nav span, body.works-page .site-footer nav span, body.price-page .site-footer nav span, body.contact-page .site-footer nav span{
  color: var(--site-menu-color);
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

body.home-page .site-footer nav a[aria-current="page"] span, body.about-page .site-footer nav a[aria-current="page"] span, body.works-page .site-footer nav a[aria-current="page"] span, body.price-page .site-footer nav a[aria-current="page"] span, body.contact-page .site-footer nav a[aria-current="page"] span{
  font-weight: 700;
}

@media (max-width: 600px) {
  :root{
    --site-menu-width: 440px;
    --site-menu-height: 56px;
  }

  body.home-page .site-footer nav, body.about-page .site-footer nav, body.works-page .site-footer nav, body.price-page .site-footer nav, body.contact-page .site-footer nav{
    padding: 4px 8px 3px;
  }

  body.home-page .site-footer nav img, body.about-page .site-footer nav img, body.works-page .site-footer nav img, body.price-page .site-footer nav img, body.contact-page .site-footer nav img{
    width: 21px;
    height: 21px;
  }

  body.home-page .site-footer nav a, body.about-page .site-footer nav a, body.works-page .site-footer nav a, body.price-page .site-footer nav a, body.contact-page .site-footer nav a{
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.home-page .site-footer nav a, body.about-page .site-footer nav a, body.works-page .site-footer nav a, body.price-page .site-footer nav a, body.contact-page .site-footer nav a{
    transition: none;
  }
}


/* ===== 共通ヘッダーとページ見出しの位置 =====
   全ページの左上ロゴを同じ基準位置に固定します。
   HOME以外の英字ラベル・大見出しは、上端位置と間隔を揃えます。
*/
body.home-page > header,
body.about-page > header,
body.works-page > .site-header,
body.price-page > .site-header,
body.contact-page > .site-header{
  position: fixed;
  z-index: 30;
  top: max(18px, env(safe-area-inset-top));
  right: auto;
  bottom: auto;
  left: clamp(18px, 3vw, 42px);
  margin: 0;
}

body.home-page > header p,
body.about-page > header p,
body.works-page > .site-header p,
body.price-page > .site-header p,
body.contact-page > .site-header a{
  margin: 0;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  line-height: 1.4;
  text-transform: uppercase;
}

body.about-page main,
body.works-page .works-main,
body.price-page .price-main,
body.contact-page .contact-main{
  padding-top: 78px;
}

body.about-page main > h1,
body.works-page .page-title,
body.price-page .page-title,
body.contact-page .page-heading h1{
  margin-top: 12px;
}

@media (max-width: 600px){
  body.about-page main,
  body.works-page .works-main,
  body.price-page .price-main,
  body.contact-page .contact-main{
    padding-top: 68px;
  }
}

/* 全ページの角を直角に統一 */
*,
*::before,
*::after {
  border-radius: 0;
}