@charset "UTF-8";
/* ==========================================================================
   atelier CUVIC | style.css
   看板デザイン・製作 / モバイルファースト
   --------------------------------------------------------------------------
   目次
   00. 変数・基本設定
   01. 汎用ユーティリティ / 共通パーツ
   02. ナビゲーションバー
   03. ヒーローセクション
   04. CONCEPT
   05. WORKS（施工事例 + フィルタ + モーダル）
   06. SERVICE（看板の種類）
   07. FLOW（制作の流れ）
   08. VOICE（お客様の声）
   09. ABOUT（私たちについて）
   10. CTA帯
   11. フッター
   12. ページトップへ戻るボタン
   13. CONTACT ページ
   14. スクロールアニメーション
   ========================================================================== */

/* ==========================================================================
   00. 変数・基本設定
   ========================================================================== */
:root {
  /* カラーパレット */
  --color-pink: #d4a5a5;          /* メイン：くすみピンク */
  --color-pink-light: #f0e2e0;    /* 淡いピンク（帯・背景用） */
  --color-pink-pale: #faf1ef;     /* さらに淡いピンク */
  --color-offwhite: #faf7f5;      /* サブ：オフホワイト */
  --color-warmgray: #6b6b6b;      /* サブ：ウォームグレー */
  --color-gold: #c9a96e;          /* アクセント：ゴールド */
  --color-gold-dark: #b08f52;     /* ゴールド（濃） */
  --color-text: #3a2e2e;          /* テキスト：ダークブラウン */
  --color-white: #ffffff;
  --color-border: #e6ded9;
  --overlay-hero: rgba(0, 0, 0, 0.35);

  /* フォント */
  --font-en: "Cormorant Garamond", "Times New Roman", serif;
  --font-serif: "Noto Serif JP", "Yu Mincho", "YuMincho", serif;
  --font-sans: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;

  /* レイアウト */
  --container: 1200px;
  --header-h: 72px;
  /* ティッカー1件分の高さ（日付・カテゴリ行＋見出し行の2段ぶん） */
  --ticker-h: 62px;

  /* 効果 */
  --shadow-soft: 0 10px 30px rgba(58, 46, 46, 0.08);
  --shadow-hover: 0 20px 45px rgba(58, 46, 46, 0.16);
  --radius: 14px;
  --radius-lg: 24px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

html {
  scroll-behavior: smooth;
  /* 固定ヘッダー分のアンカーオフセット */
  scroll-padding-top: var(--header-h);
}

body {
  font-family: var(--font-sans);
  color: var(--color-text);
  background-color: var(--color-white);
  font-size: 15px;
  letter-spacing: 0.06em;
  line-height: 2;
  overflow-x: hidden;
}

/* スクロールロック（モバイルメニュー / モーダル表示中） */
body.is-locked {
  overflow: hidden;
}

/* ==========================================================================
   01. 汎用ユーティリティ / 共通パーツ
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}

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

.section {
  padding-block: 88px;
  position: relative;
}

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

.section--pale {
  background-color: var(--color-pink-pale);
}

/* --- セクションタイトル（英字大文字 + 日本語サブ） --- */
.section-title {
  text-align: center;
  margin-bottom: 48px;
}

.section-title__en {
  display: block;
  font-family: var(--font-en);
  font-weight: 300;
  font-size: 2.25rem;
  line-height: 1.2;
  letter-spacing: 0.22em;
  text-indent: 0.22em; /* letter-spacing 由来の右寄りを補正 */
  color: var(--color-text);
}

.section-title__ja {
  display: block;
  margin-top: 14px;
  font-family: var(--font-serif);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  color: var(--color-pink);
}

/* タイトル文中で特に目立たせたい語句 */
.section-title__highlight {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-gold-dark);
}

/* タイトル下の細い装飾線 */
.section-title::after {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  margin: 26px auto 0;
  background-color: var(--color-gold);
}

/* 左寄せ版（お問い合わせページのフォーム見出しなど） */
.section-title--left {
  text-align: left;
}

.section-title--left .section-title__en {
  font-size: 1.75rem;
}

.section-title--left::after {
  margin-inline: 0;
}

.section-lead {
  text-align: center;
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  line-height: 2.4;
  color: var(--color-warmgray);
  margin-bottom: 48px;
}

/* --- ボタン --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 240px;
  padding: 17px 36px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  cursor: pointer;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease),
    background-color 0.4s var(--ease), color 0.4s var(--ease);
}

.btn--gold {
  background-color: var(--color-gold);
  color: var(--color-white);
  box-shadow: 0 8px 20px rgba(201, 169, 110, 0.3);
}

.btn--gold:hover,
.btn--gold:focus-visible {
  background-color: var(--color-gold-dark);
  transform: translateY(-4px);
  box-shadow: 0 16px 30px rgba(201, 169, 110, 0.4);
}

.btn--outline-white {
  border: 1px solid rgba(255, 255, 255, 0.8);
  color: var(--color-white);
}

.btn--outline-white:hover,
.btn--outline-white:focus-visible {
  background-color: var(--color-white);
  color: var(--color-text);
  transform: translateY(-4px);
}

.btn--outline-gold {
  border: 1px solid var(--color-gold);
  background-color: transparent;
  color: var(--color-gold-dark);
}

.btn--outline-gold:hover,
.btn--outline-gold:focus-visible {
  background-color: var(--color-gold);
  color: var(--color-white);
  transform: translateY(-4px);
}

.btn--block {
  display: flex;
  width: 100%;
  min-width: 0;
}

/* --- 波型 / カーブのSVG区切り線 --- */
.wave-divider {
  display: block;
  width: 100%;
  height: 60px;
  line-height: 0;
}

.wave-divider svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* スクリーンリーダー専用テキスト */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* キーボード操作時のフォーカス表示 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}

/* 本文へスキップ */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 2000;
  padding: 12px 20px;
  background-color: var(--color-white);
  color: var(--color-text);
  border-radius: 0 0 8px 8px;
  transition: top 0.3s var(--ease);
}

.skip-link:focus {
  top: 0;
}

/* ==========================================================================
   02. ナビゲーションバー
   ========================================================================== */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  background-color: transparent;
  transition: background-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--header-h);
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}

/* --- ヘッダーロゴ --- */
.header__logo {
  font-family: var(--font-en);
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  line-height: 1.2;
  color: var(--color-white);
  transition: color 0.5s var(--ease);
  white-space: nowrap;
}

.header__logo small {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.5rem;
  letter-spacing: 0.32em;
  opacity: 0.75;
}

/* --- PCナビ（モバイルでは非表示） --- */
.nav {
  display: none;
}

.nav__list {
  display: flex;
  /* center ではなく stretch にして各 <li> をヘッダーの高さいっぱいに広げる。
     SERVICE のドロップダウン（.nav__submenu）を top: 100% でヘッダー下端に
     ぴったり合わせるための土台（.nav__item 側）に必要。
     height: 100% は .nav 側の align-self: stretch とセットで効く */
  align-items: stretch;
  height: 100%;
  gap: 34px;
}

/* ナビの各項目。position: relative がドロップダウンの基準になる */
.nav__item {
  position: relative;
  display: flex;
  align-items: center;
}

.nav__link {
  position: relative;
  display: inline-block;
  font-family: var(--font-en);
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  color: var(--color-white);
  transition: color 0.5s var(--ease), opacity 0.3s var(--ease);
}

/* 下線アニメーション */
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--ease);
}

.nav__link:hover::after,
.nav__link:focus-visible::after,
.nav__link[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* --- SERVICE のドロップダウン（看板の種類・テキストのみ） ---
   .nav__item を hover / focus-within（キーボード操作用）したときに表示する。
   SERVICE のリンク自体は通常どおり service.html へ遷移する（JSでの制御なし） */
.nav__submenu {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 2px 6px;
  width: max-content;
  max-width: 800px;
  margin: 0;
  padding: 18px;
  list-style: none;
  background-color: rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: var(--shadow-hover);
  text-align: left;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity 0.3s var(--ease), visibility 0.3s var(--ease);
}

.nav__item--service:hover .nav__submenu,
.nav__item--service:focus-within .nav__submenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.nav__submenu a {
  display: block;
  border-radius: 4px;
  padding: 10px 14px;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-indent: 0;
  line-height: 1.5;
  color: var(--color-text);
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}

.nav__submenu a:hover,
.nav__submenu a:focus-visible {
  background-color: rgba(158, 122, 122, 0.4);
  color: var(--color-white);
}

.nav__submenu a.is-active {
  color: var(--color-gold);
}

/* --- ヘッダー内CTA --- */
.header__cta {
  display: none;
  padding: 11px 26px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  font-family: var(--font-en);
  font-size: 0.875rem;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  color: var(--color-white);
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease),
    border-color 0.5s var(--ease), transform 0.4s var(--ease);
}

.header__cta:hover,
.header__cta:focus-visible {
  background-color: var(--color-white);
  color: var(--color-text);
  transform: translateY(-2px);
}

/* --- スクロール後 / 下層ページ：白背景・暗色文字 --- */
.header.is-scrolled,
.header--solid {
  background-color: rgba(255, 255, 255, 0.96);
  box-shadow: 0 2px 20px rgba(58, 46, 46, 0.07);
}

.header.is-scrolled .header__logo,
.header--solid .header__logo,
.header.is-scrolled .nav__link,
.header--solid .nav__link {
  color: var(--color-text);
}

.header.is-scrolled .header__cta,
.header--solid .header__cta {
  border-color: var(--color-gold);
  color: var(--color-gold);
}

.header.is-scrolled .header__cta:hover,
.header--solid .header__cta:hover,
.header.is-scrolled .header__cta:focus-visible,
.header--solid .header__cta:focus-visible {
  background-color: var(--color-gold);
  color: var(--color-white);
}

.header.is-scrolled .hamburger__bar,
.header--solid .hamburger__bar {
  background-color: var(--color-text);
}

/* --- ハンバーガーボタン --- */
.hamburger {
  position: relative;
  z-index: 1200;
  width: 40px;
  height: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.hamburger__bar {
  display: block;
  width: 24px;
  height: 1px;
  background-color: var(--color-white);
  transition: transform 0.4s var(--ease), opacity 0.3s var(--ease),
    background-color 0.5s var(--ease);
}

/* メニューオープン時：×印へ */
.hamburger.is-open .hamburger__bar {
  background-color: var(--color-text);
}

.hamburger.is-open .hamburger__bar:nth-child(1) {
  transform: translateY(4px) rotate(45deg);
}

.hamburger.is-open .hamburger__bar:nth-child(2) {
  opacity: 0;
}

.hamburger.is-open .hamburger__bar:nth-child(3) {
  transform: translateY(-4px) rotate(-45deg);
}

/* --- 全画面オーバーレイメニュー（モバイル） --- */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: var(--color-offwhite);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  /* モーダルと同様、開くときは即座に visible にする */
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease),
    visibility 0s linear 0.5s;
}

.drawer.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease),
    visibility 0s linear 0s;
}

.drawer__close {
  position: absolute;
  top: 16px;
  right: 24px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.drawer__close svg {
  width: 22px;
  height: 22px;
  stroke: var(--color-text);
  stroke-width: 1.5;
}

.drawer__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-top: 30px;
  margin-bottom: 44px;
}

.drawer__link {
  font-family: var(--font-en);
  font-size: 1.5rem;
  font-weight: 300;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: var(--color-text);
}

.drawer__link small {
  display: block;
  font-family: var(--font-serif);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  color: var(--color-pink);
  /* display:block になった時点で親（英字部分）の幅いっぱいのボックスになり、
     text-align を指定しないと左寄せで表示されてしまうため中央揃えにする */
  text-align: center;
}

.drawer__cta {
  min-width: 220px;
  padding: 15px 32px;
  border-radius: 999px;
  background-color: var(--color-gold);
  color: var(--color-white);
  font-size: 0.8125rem;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-align: center;
}

.drawer__info {
  margin-top: 34px;
  text-align: center;
  font-size: 0.75rem;
  line-height: 2;
  color: var(--color-warmgray);
}

/* ==========================================================================
   03. ヒーローセクション
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  /* 高さは「1画面目（100vh）」＋「ストーリー」＋「ティッカー」の積み上げで決まる。
     下端の padding はティッカーが端に貼り付かないための余白 */
  padding-bottom: 10vh;
}

/* --- 背景画像レイヤー（クロスフェード + パララックス） --- */
.hero__slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* パララックス：スクロールしても背景は視点に対して静止する */
  background-attachment: fixed;
  opacity: 0;
  transition: opacity 2s var(--ease);
  will-change: opacity;
}

.hero__slide.is-active {
  opacity: 1;
}

/* ダークオーバーレイ（白文字の視認性確保） */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: var(--overlay-hero);
}

/* --- 1画面目：サイト名とキャッチコピー ---
   画面ぴったり1枚分。ここまでが最初に見える範囲になる */
.hero__content {
  position: relative;
  z-index: 3;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-inline: 28px;
  color: var(--color-white);
}

.hero__mark {
  width: 46px;
  margin: 0 auto 22px;
  opacity: 0.9;
  overflow: visible;
}

/* 山型のマークを描いてから「atelier CUVIC」を書き始める */
.hero__mark-path {
  stroke-dasharray: 80;
  stroke-dashoffset: 80;
  animation: hero-handwrite-stroke 0.8s 0.2s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

@media (prefers-reduced-motion: reduce) {
  .hero__mark-path {
    stroke-dashoffset: 0;
    animation: none;
  }
}

.hero__logo {
  line-height: 1.1;
}

/* --- 「atelier CUVIC」を一文字ずつ手書き風に描画するアニメーション ---
   1文字＝1 tspan とし、stroke-dasharray / dashoffset でペン書きのような
   輪郭描画をしたのち塗りつぶす。--i（文字の並び順）ぶんだけ順番に
   ディレイをずらすことで、一文字ずつ書いていくように見せている。 */
.hero__logo-svg {
  display: block;
  width: clamp(280px, 82vw, 620px);
  height: auto;
  margin-inline: auto;
  overflow: visible;
}

.hero__logo-text {
  font-family: var(--font-en);
  font-weight: 300;
  font-size: 84px;
  letter-spacing: 0.1em;
}

.hero__logo-char {
  fill: var(--color-white);
  fill-opacity: 0;
  stroke: var(--color-white);
  stroke-width: 1.4;
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  filter: drop-shadow(0 2px 24px rgba(0, 0, 0, 0.28));
  animation:
    hero-handwrite-stroke 0.55s cubic-bezier(0.65, 0, 0.35, 1) forwards,
    hero-handwrite-fill 0.3s ease forwards;
  animation-delay:
    calc(var(--i) * 0.18s + 1.1s),
    calc(var(--i) * 0.18s + 1.6s);
}

@keyframes hero-handwrite-stroke {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes hero-handwrite-fill {
  to {
    fill-opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__logo-char {
    stroke-dashoffset: 0;
    fill-opacity: 1;
    animation: none;
  }
}

.hero__sub {
  display: block;
  margin-top: 18px;
  font-family: var(--font-sans);
  font-size: 0.625rem;
  font-weight: 300;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  opacity: 0;
  transform: translateY(16px);
  animation: hero-fade-up-sub 0.8s ease forwards;
  animation-delay: 4.2s;
}

/* ロゴ下の細い区切り線 */
.hero__rule {
  width: 1px;
  height: 40px;
  margin: 30px auto;
  background-color: rgba(255, 255, 255, 0.6);
  opacity: 0;
  transform: translateY(16px);
  animation: hero-fade-up 0.8s ease forwards;
  animation-delay: 4.4s;
}

/* キャッチコピー（ロゴとブランドストーリーの中間の大きさ） */
.hero__catch {
  margin-bottom: 22px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.0625rem, 4.6vw, 1.5rem);
  line-height: 1.7;
  letter-spacing: 0.24em;
  /* letter-spacing で右に寄るぶんを補正して中央に見せる */
  text-indent: 0.24em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateY(16px);
  animation: hero-fade-up 0.8s ease forwards;
  animation-delay: 4.6s;
}

/* atelier CUVIC を書き終えたあと、上から順にふわっと表示 */
@keyframes hero-fade-up {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hero-fade-up-sub {
  to {
    opacity: 0.9;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__sub,
  .hero__rule,
  .hero__catch {
    animation: none;
    transform: none;
    opacity: 1;
  }

  .hero__sub {
    opacity: 0.9;
  }
}

/* --- 2画面目：スクロールして現れるブランドストーリー ---
   この下にティッカーが続き、さらに .hero の padding-bottom で
   白グラデーションぶんの余白が取られる */
.hero__story-block {
  position: relative;
  z-index: 3;
  min-height: 46vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vh 28px;
  text-align: center;
  color: var(--color-white);
}

.hero__story {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 0.8125rem;
  line-height: 2.4;
  letter-spacing: 0.14em;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.35);
}

.hero__story span {
  display: block;
}

/* --- 右サイドの縦書きテキスト --- */
.hero__vertical {
  display: none;
  position: absolute;
  /* ヒーロー全体ではなく「1画面目」の中央に合わせる */
  top: 50vh;
  right: 34px;
  z-index: 3;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-family: var(--font-en);
  font-weight: 300;
  font-size: 0.75rem;
  letter-spacing: 0.4em;
  color: var(--color-white);
  opacity: 0.85;
}

/* --- SCROLLインジケーター ---
   ヒーロー下端ではなく「1画面目の下端」に置き、
   次にストーリーがあることを示す。暗い画像上に乗るため白文字 */
.hero__scroll {
  position: absolute;
  left: 50%;
  top: calc(100vh - 26px);
  z-index: 4;
  transform: translate(-50%, -100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-family: var(--font-en);
  font-size: 0.625rem;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
}

.hero__scroll-line {
  position: relative;
  display: block;
  width: 1px;
  height: 56px;
  background-color: rgba(255, 255, 255, 0.28);
  overflow: hidden;
}

.hero__scroll-line::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background-color: var(--color-white);
  animation: scroll-line 2.2s var(--ease) infinite;
}

@keyframes scroll-line {
  0% {
    transform: translateY(-100%);
  }
  55% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100%);
  }
}

/* ==========================================================================
   04. CONCEPT
   ========================================================================== */
.concept {
  padding-block: 110px 96px;
  text-align: center;
}

/* 装飾写真の位置の基準にする（画像は本文と重ならない左右の余白に置く） */
.concept .container--narrow {
  position: relative;
}

.concept__catch {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.25rem, 6vw, 1.875rem);
  line-height: 2;
  letter-spacing: 0.14em;
  margin-bottom: 40px;
}

.concept__catch em {
  font-style: normal;
  color: var(--color-pink);
}

.concept__text {
  font-family: var(--font-serif);
  font-size: 0.875rem;
  line-height: 2.6;
  color: var(--color-warmgray);
}

.concept__text + .concept__text {
  margin-top: 26px;
}

.concept__sign {
  margin-top: 46px;
  font-family: var(--font-en);
  font-size: 1.125rem;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  color: var(--color-gold);
}

/* --- 装飾写真4枚（本文の左右に大きさを変えて配置） ---
   本文は中央寄せで行ごとに長さが違うため、860px幅の同じ列の中でも
   左右に十分な余白がある。その余白の中に写真を絶対配置で置く。
   すべて横向き・傾きなし・静止（動きなし）で統一している。
   狭い画面では文章の可読性を優先し、タブレット以上でのみ表示する */
.concept__deco {
  display: none;
  position: absolute;
  z-index: 1;
  margin: 0;
  
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  /* 装飾のため、クリックやテキスト選択の邪魔をしない */
  pointer-events: none;
}

.concept__deco img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 縦位置は4枚とも別々の高さに散らし、左右で「上段・下段」が
   揃わないようにしている（1と3、2と4が同じ高さにならないよう調整） */
.concept__deco--1 {
  top: -4%;
  left: -11%;
  width: 190px;
  aspect-ratio: 4 / 3;
}

.concept__deco--2 {
  top: 66%;
  left: -8%;
  width: 148px;
  aspect-ratio: 3 / 2;
}

.concept__deco--3 {
  top: 24%;
  right: -10%;
  width: 214px;
  aspect-ratio: 4 / 3;
}

.concept__deco--4 {
  top: 84%;
  right: -6%;
  width: 164px;
  aspect-ratio: 3 / 2;
}

/* ==========================================================================
   05. WORKS（施工事例）
   ========================================================================== */
/* --- フィルタボタン --- */
.filter__group-label {
  text-align: center;
  font-family: var(--font-serif);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-warmgray);
  margin-bottom: 16px;
}

.filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 44px;
}

.filter__btn {
  padding: 9px 20px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background-color: var(--color-white);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  color: var(--color-warmgray);
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease),
    border-color 0.35s var(--ease), transform 0.35s var(--ease);
}

.filter__btn:hover {
  transform: translateY(-2px);
  border-color: var(--color-pink);
  color: var(--color-pink);
}

.filter__btn.is-active {
  background-color: var(--color-pink);
  border-color: var(--color-pink);
  color: var(--color-white);
}

/* --- カードグリッド --- */
.works__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}

.work-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  text-align: left;
  font-family: inherit;
  letter-spacing: inherit;
  background-color: var(--color-white);
  /* ホバーで枠線を出しても位置がずれないよう、あらかじめ透明の枠を持たせる */
  border: 1px solid transparent;
  border-radius: 0;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease),
    opacity 0.4s var(--ease);
}

.work-card:hover,
.work-card:focus-visible {
  transform: translateY(-8px);
  border-color: var(--color-pink);
}

/* フィルタで非表示 */
.work-card.is-hidden {
  display: none;
}

.work-card__thumb {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background-color: var(--color-offwhite);
}

.work-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease), opacity 0.5s var(--ease);
}

.work-card:hover .work-card__thumb img {
  transform: scale(1.06);
  opacity: 0.88;
}

.work-card__body {
  padding: 22px 24px 28px;
}

.work-card__tag {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 999px;
  background-color: var(--color-pink-pale);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  color: var(--color-pink);
  margin-bottom: 12px;
}

.work-card__name {
  display: block;
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.6;
  margin-bottom: 8px;
}

.work-card__comment {
  display: block;
  font-size: 0.8125rem;
  line-height: 1.9;
  color: var(--color-warmgray);
}

.work-card__more {
  display: block;
  margin-top: 16px;
  font-family: var(--font-en);
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  color: var(--color-gold);
}

/* --- モーダル --- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  /* 閉じるときだけ visibility の切り替えをフェード終了まで遅らせる。
     開くときは即座に visible になるため、直後の focus() が確実に効く */
  transition: opacity 0.4s var(--ease), visibility 0s linear 0.4s;
}

.modal.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s var(--ease), visibility 0s linear 0s;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(58, 46, 46, 0.6);
  backdrop-filter: blur(3px);
}

.modal__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 860px;
  max-height: 88vh;
  overflow-y: auto;
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hover);
  transform: translateY(18px) scale(0.98);
  transition: transform 0.5s var(--ease);
}

.modal.is-open .modal__panel {
  transform: translateY(0) scale(1);
}

.modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-soft);
  font-size: 1.25rem;
  line-height: 1;
  color: var(--color-text);
  transition: background-color 0.3s var(--ease), transform 0.3s var(--ease);
}

.modal__close:hover {
  background-color: var(--color-pink);
  color: var(--color-white);
  transform: rotate(90deg);
}

.modal__image {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background-color: var(--color-offwhite);
}

.modal__body {
  padding: 28px 26px 36px;
}

.modal__tag {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 999px;
  background-color: var(--color-pink-pale);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  color: var(--color-pink);
  margin-bottom: 14px;
}

.modal__title {
  font-family: var(--font-serif);
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.6;
  margin-bottom: 16px;
}

.modal__text {
  font-size: 0.875rem;
  line-height: 2.2;
  color: var(--color-warmgray);
}

.modal__meta {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
  font-size: 0.8125rem;
  color: var(--color-warmgray);
}

.modal__meta dt {
  font-family: var(--font-en);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  color: var(--color-gold);
}

.modal__meta dd {
  margin: 2px 0 12px;
}

/* ==========================================================================
   06. SERVICE（看板の種類）
   ========================================================================== */
.service__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.service-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 0;
  overflow: hidden;
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease);
}

/* ホバーでふわっと浮き上がり、枠線の色をメインカラーへ */
.service-card:hover,
.service-card:focus-visible {
  transform: translateY(-10px);
  border-color: var(--color-pink);
}

/* --- 看板の種類ごとの写真 --- */
.service-card__thumb {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background-color: var(--color-offwhite);
}

.service-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}

.service-card:hover .service-card__thumb img {
  transform: scale(1.06);
}

.service-card__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 22px 24px 24px;
}

.service-card__name {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
}

.service-card__desc {
  font-size: 0.8125rem;
  line-height: 1.95;
  color: var(--color-warmgray);
  flex-grow: 1;
}

.service-card__link {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  color: var(--color-text);
  transition: color 0.4s var(--ease);
}

.service-card:hover .service-card__link {
  color: var(--color-pink);
}

.service-card__link .arrow {
  display: inline-block;
  transition: transform 0.4s var(--ease);
}

.service-card:hover .arrow {
  transform: translateX(6px);
}

.service__note {
  margin-top: 34px;
  text-align: center;
  font-size: 0.75rem;
  line-height: 2;
  color: var(--color-warmgray);
}

/* ==========================================================================
   07. FLOW（制作の流れ）
   ========================================================================== */
.flow__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.flow__item {
  position: relative;
  padding: 0 0 42px;
  text-align: center;
}

.flow__item:last-child {
  padding-bottom: 0;
}

/* ステップ間の点線（モバイル：縦） */
.flow__item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 14px;
  width: 1px;
  height: 22px;
  border-left: 1px dashed var(--color-pink);
  transform: translateX(-50%);
}

.flow__num {
  display: block;
  font-family: var(--font-en);
  font-size: 0.6875rem;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: var(--color-gold);
  margin-bottom: 12px;
}

.flow__icon {
  width: 76px;
  height: 76px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-pink);
  border-radius: 50%;
  background-color: var(--color-white);
  transition: background-color 0.5s var(--ease);
}

.flow__icon svg {
  width: 30px;
  height: 30px;
  stroke: var(--color-pink);
  fill: none;
  stroke-width: 1.2;
  transition: stroke 0.5s var(--ease);
}

.flow__item:hover .flow__icon {
  background-color: var(--color-pink);
}

.flow__item:hover .flow__icon svg {
  stroke: var(--color-white);
}

.flow__title {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}

.flow__desc {
  font-size: 0.8125rem;
  line-height: 1.95;
  color: var(--color-warmgray);
}

/* ==========================================================================
   08. VOICE（お客様の声）
   ========================================================================== */
.voice__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
}

.voice-card {
  position: relative;
  padding: 46px 26px 30px;
  background-color: var(--color-white);
  /* ホバーで枠線を出しても位置がずれないよう、あらかじめ透明の枠を持たせる */
  border: 1px solid transparent;
  border-radius: 0;
  box-shadow: var(--shadow-soft);
  text-align: center;
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease);
}

.voice-card:hover {
  transform: translateY(-6px);
  border-color: var(--color-pink);
}

/* 装飾の引用符 */
.voice-card::before {
  content: "“";
  position: absolute;
  top: 8px;
  left: 24px;
  font-family: var(--font-en);
  font-size: 4rem;
  line-height: 1;
  color: var(--color-pink-light);
}

.voice-card__photo {
  width: 82px;
  height: 82px;
  margin: 0 auto 18px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--color-pink-pale);
}

.voice-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.voice-card__text {
  font-family: var(--font-serif);
  font-size: 0.875rem;
  line-height: 2.2;
  color: var(--color-text);
  margin-bottom: 20px;
}

.voice-card__name {
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
}

.voice-card__job {
  display: block;
  margin-top: 4px;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  color: var(--color-pink);
}

/* ==========================================================================
   09. ABOUT（私たちについて）
   ========================================================================== */
.about__message {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
  margin-bottom: 76px;
}

.about__photo {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.about__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about__label {
  font-family: var(--font-en);
  font-size: 0.75rem;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  color: var(--color-gold);
  margin-bottom: 14px;
}

.about__title {
  font-family: var(--font-serif);
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: 0.1em;
  margin-bottom: 22px;
}

.about__text {
  font-size: 0.875rem;
  line-height: 2.3;
  color: var(--color-warmgray);
}

.about__text + .about__text {
  margin-top: 18px;
}

.about__name {
  margin-top: 26px;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
}

.about__name strong {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 500;
  margin-left: 8px;
}

/* --- 3つのバリュー --- */
.values__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}

.value {
  text-align: center;
  padding: 34px 22px;
  background-color: var(--color-white);
  /* ホバーで枠線を出しても位置がずれないよう、あらかじめ透明の枠を持たせる */
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease);
}

.value:hover {
  transform: translateY(-6px);
  border-color: var(--color-pink);
}

.value__icon {
  width: 62px;
  height: 62px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-pink-pale), var(--color-pink-light));
}

.value__icon svg {
  width: 26px;
  height: 26px;
  stroke: var(--color-pink);
  fill: none;
  stroke-width: 1.2;
}

.value__title {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  margin-bottom: 10px;
}

.value__text {
  font-size: 0.8125rem;
  line-height: 2;
  color: var(--color-warmgray);
}

/* ==========================================================================
   10. CTA帯
   ========================================================================== */
.cta {
  position: relative;
  padding-block: 78px;
  text-align: center;
  background: linear-gradient(
    135deg,
    var(--color-pink) 0%,
    #dcb6ae 45%,
    var(--color-gold) 100%
  );
  color: var(--color-white);
  overflow: hidden;
}

/* 淡い光の装飾 */
.cta__inner {
  position: relative;
  z-index: 1;
}

.cta__en {
  font-family: var(--font-en);
  font-size: 0.8125rem;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  opacity: 0.9;
  margin-bottom: 18px;
}

.cta__catch {
  font-family: var(--font-serif);
  font-size: clamp(1.125rem, 5.4vw, 1.75rem);
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.1em;
  margin-bottom: 14px;
}

.cta__text {
  font-size: 0.8125rem;
  line-height: 2;
  opacity: 0.92;
  margin-bottom: 34px;
}

.cta__tel {
  margin-top: 26px;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  opacity: 0.92;
}

.cta__tel a {
  font-family: var(--font-en);
  font-size: 1.375rem;
  letter-spacing: 0.1em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

/* ==========================================================================
   11. フッター
   ========================================================================== */
.footer {
  background-color: var(--color-text);
  color: rgba(255, 255, 255, 0.82);
  padding-block: 62px 28px;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 42px;
  margin-bottom: 46px;
}

.footer__logo {
  font-family: var(--font-en);
  font-size: 1.5rem;
  font-weight: 300;
  letter-spacing: 0.2em;
  color: var(--color-white);
  margin-bottom: 10px;
}

.footer__logo small {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.5625rem;
  letter-spacing: 0.32em;
  opacity: 0.7;
  margin-top: 4px;
}

.footer__heading {
  font-family: var(--font-en);
  font-size: 0.8125rem;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  color: var(--color-gold);
  margin-bottom: 18px;
}

.footer__nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 16px;
}

.footer__nav a {
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  opacity: 0.85;
  transition: opacity 0.3s var(--ease), color 0.3s var(--ease);
}

.footer__nav a:hover {
  opacity: 1;
  color: var(--color-pink);
}

.footer__info {
  font-size: 0.8125rem;
  line-height: 2.1;
}

.footer__info dt {
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  color: var(--color-gold);
  margin-top: 12px;
}

.footer__info dt:first-child {
  margin-top: 0;
}

.footer__info dd {
  opacity: 0.85;
}

/* --- SNSアイコン --- */
.footer__sns {
  display: flex;
  gap: 14px;
}

.footer__sns a {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease),
    transform 0.4s var(--ease);
}

.footer__sns a:hover {
  background-color: var(--color-pink);
  border-color: var(--color-pink);
  transform: translateY(-3px);
}

.footer__sns svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.3;
}

.footer__sns-img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.footer__sns svg.footer__sns-x {
  width: 16px;
  height: 16px;
  fill: currentColor;
  stroke: none;
}

.footer__sns-note {
  margin-top: 20px;
  font-size: 0.75rem;
  line-height: 2;
  opacity: 0.8;
}

.footer__copyright {
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  text-align: center;
  font-family: var(--font-en);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  opacity: 0.6;
}

/* ==========================================================================
   12. ページトップへ戻るボタン
   ========================================================================== */
.to-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 900;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--color-white);
  color: var(--color-gold);
  box-shadow: var(--shadow-soft);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease),
    visibility 0.4s var(--ease), background-color 0.4s var(--ease),
    color 0.4s var(--ease);
}

.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

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

.to-top svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
}

/* ==========================================================================
   13. CONTACT ページ
   ========================================================================== */
/* 固定ヘッダー分のスペーサー */
.page-header {
  padding-block: calc(var(--header-h) + 56px) 56px;
  background: linear-gradient(
    180deg,
    var(--color-pink-light) 0%,
    var(--color-pink-pale) 100%
  );
  text-align: center;
}

.page-header__en {
  display: block;
  font-family: var(--font-en);
  font-weight: 300;
  font-size: clamp(2.5rem, 12vw, 4rem);
  line-height: 1.1;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  color: var(--color-text);
}

.page-header__ja {
  display: block;
  margin-top: 12px;
  font-family: var(--font-serif);
  font-size: 0.8125rem;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  color: var(--color-pink);
}

.page-header__text {
  margin-top: 26px;
  font-size: 0.8125rem;
  line-height: 2.1;
  color: var(--color-warmgray);
}

/* --- パンくず --- */
.breadcrumb {
  padding-block: 16px;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  color: var(--color-warmgray);
}

.breadcrumb ol {
  /* reset.css の list-style: none は ol[class] にしか効かず、
     class を持たないこの <ol> には既定の番号（1. 2. ...）が
     残ってしまうため、ここで明示的に打ち消す */
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.breadcrumb li + li::before {
  content: ">";
  margin-right: 8px;
  opacity: 0.5;
}

.breadcrumb a {
  transition: color 0.3s var(--ease);
}

.breadcrumb a:hover {
  color: var(--color-pink);
}

.breadcrumb [aria-current="page"] {
  color: var(--color-text);
}

/* --- 2カラムレイアウト --- */
.contact__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: start;
}

/* --- フォーム --- */
.form__group {
  margin-bottom: 26px;
}

.form__label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.1em;
}

.form__required {
  padding: 2px 9px;
  border-radius: 3px;
  background-color: var(--color-pink);
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--color-white);
}

.form__optional {
  padding: 2px 9px;
  border-radius: 3px;
  background-color: var(--color-border);
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--color-warmgray);
}

.form__control {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background-color: var(--color-white);
  font-size: 0.9375rem;
  line-height: 1.7;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.form__control::placeholder {
  color: #bdb3ae;
}

.form__control:focus {
  outline: none;
  border-color: var(--color-pink);
  box-shadow: 0 0 0 3px rgba(212, 165, 165, 0.18);
}

.form__control:focus-visible {
  outline: none;
}

textarea.form__control {
  min-height: 170px;
  resize: vertical;
}

/* セレクトボックスに矢印を付ける */
select.form__control {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-warmgray) 50%),
    linear-gradient(135deg, var(--color-warmgray) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 42px;
}

/* エラー表示 */
.form__control.is-error {
  border-color: #d05b5b;
  background-color: #fdf6f6;
}

.form__error {
  display: none;
  margin-top: 8px;
  font-size: 0.75rem;
  line-height: 1.7;
  color: #c94f4f;
}

.form__error.is-visible {
  display: block;
}

/* --- 添付ファイル（任意） ---
   ネイティブの input[type="file"] は visually-hidden で見た目上隠し、
   .form__dropzone 全体をドラッグ＆ドロップの受け皿にする。
   for 属性で結びついた label（.form__file-btn）はクリックでの選択用。
   選択・ドロップされたファイル名は js/main.js（initFileUpload）で表示する */
.form__dropzone {
  padding: 30px 20px;
  border: 1.5px dashed var(--color-border);
  border-radius: 10px;
  background-color: var(--color-offwhite);
  text-align: center;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}

/* ファイルをドラッグして重ねているあいだの強調表示 */
.form__dropzone.is-dragover {
  border-style: solid;
  border-color: var(--color-gold);
  background-color: var(--color-pink-pale);
}

/* input 自体は visually-hidden で不可視のため、キーボード操作時の
   フォーカスリングはドロップゾーン全体に出す */
.form__dropzone:focus-within {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}

.form__dropzone-icon {
  width: 26px;
  height: 26px;
  margin: 0 auto 10px;
  stroke: var(--color-gold);
  fill: none;
  stroke-width: 1.4;
}

.form__dropzone-text {
  font-size: 0.8125rem;
  line-height: 1.9;
  color: var(--color-warmgray);
}

.form__file-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 4px;
  padding: 6px 16px;
  border: 1px solid var(--color-gold);
  border-radius: 999px;
  background-color: transparent;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--color-gold);
  cursor: pointer;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}

.form__file-btn:hover {
  background-color: var(--color-gold);
  color: var(--color-white);
}

.form__file-name {
  margin-top: 14px;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--color-text);
  word-break: break-all;
}

.form__file-name.is-empty {
  color: var(--color-warmgray);
}

.form__file-name .form__file-rejected {
  display: block;
  margin-top: 4px;
  color: #c94f4f;
}

.form__file-help {
  margin-top: 10px;
  font-size: 0.75rem;
  line-height: 1.9;
  color: var(--color-warmgray);
}

.form__privacy {
  margin-bottom: 26px;
  padding: 18px 20px;
  border-radius: 10px;
  background-color: var(--color-offwhite);
  font-size: 0.75rem;
  line-height: 1.9;
  color: var(--color-warmgray);
}

.form__submit {
  text-align: center;
}

.form__submit .btn {
  width: 100%;
}

/* 送信完了メッセージ */
.form__success {
  display: none;
  padding: 40px 26px;
  border-radius: 0;
  background-color: var(--color-pink-pale);
  text-align: center;
}

.form__success.is-visible {
  display: block;
}

.form__success-icon {
  width: 62px;
  height: 62px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--color-white);
}

.form__success-icon svg {
  width: 26px;
  height: 26px;
  stroke: var(--color-gold);
  fill: none;
  stroke-width: 1.6;
}

.form__success-title {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  margin-bottom: 12px;
}

.form__success-text {
  font-size: 0.8125rem;
  line-height: 2;
  color: var(--color-warmgray);
}

/* --- 右カラム：連絡先情報 --- */
.contact-info {
  padding: 32px 26px;
  background-color: var(--color-offwhite);
  border-radius: 0;
}

.contact-info__heading {
  font-family: var(--font-en);
  font-size: 1.125rem;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  color: var(--color-text);
  margin-bottom: 6px;
}

.contact-info__sub {
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  color: var(--color-pink);
  margin-bottom: 24px;
}

.contact-info__item {
  padding-block: 16px;
  border-top: 1px solid var(--color-border);
}

.contact-info__item dt {
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  color: var(--color-gold);
  margin-bottom: 4px;
}

.contact-info__item dd {
  font-size: 0.875rem;
  line-height: 1.9;
}

.contact-info__tel {
  font-family: var(--font-en);
  font-size: 1.75rem;
  letter-spacing: 0.06em;
  color: var(--color-text);
}

.contact-info__promise {
  margin-top: 24px;
  padding: 18px 20px;
  border-radius: 10px;
  background-color: var(--color-white);
  font-size: 0.8125rem;
  line-height: 1.9;
  text-align: center;
}

.contact-info__promise strong {
  display: block;
  color: var(--color-pink);
  font-weight: 500;
  margin-bottom: 4px;
}

/* Google Maps 埋め込みプレースホルダー */
.map {
  margin-top: 24px;
  border-radius: var(--radius);
  overflow: hidden;
  background-color: var(--color-border);
}

.map iframe {
  display: block;
  width: 100%;
  height: 240px;
  border: 0;
}

.map__caption {
  padding: 12px 16px;
  background-color: var(--color-white);
  font-size: 0.6875rem;
  line-height: 1.8;
  color: var(--color-warmgray);
}

/* --- FAQ（お問い合わせページ下部） --- */
.faq__list {
  max-width: 780px;
  margin-inline: auto;
}

.faq__item {
  border-bottom: 1px solid var(--color-border);
  padding-block: 22px;
}

.faq__q {
  display: flex;
  gap: 14px;
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}

.faq__a {
  display: flex;
  gap: 14px;
  font-size: 0.8125rem;
  line-height: 2;
  color: var(--color-warmgray);
}

.faq__mark {
  flex-shrink: 0;
  font-family: var(--font-en);
  font-size: 1.125rem;
  line-height: 1.4;
  color: var(--color-pink);
}

.faq__a .faq__mark {
  color: var(--color-gold);
}

/* ==========================================================================
   14. スクロールアニメーション（Intersection Observer）
   ========================================================================== */
.fade-in {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}

.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 連続要素のディレイ */
.fade-in.delay-1 { transition-delay: 0.12s; }
.fade-in.delay-2 { transition-delay: 0.24s; }
.fade-in.delay-3 { transition-delay: 0.36s; }

/* prefers-reduced-motion 時は最初から表示 */
@media (prefers-reduced-motion: reduce) {
  .fade-in {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   ブレイクポイント：タブレット（768px〜）
   ========================================================================== */
@media (min-width: 768px) {
  :root {
    --header-h: 84px;
  }

  body {
    font-size: 16px;
  }

  .container {
    padding-inline: 40px;
  }

  .section {
    padding-block: 110px;
  }

  .section-title__en {
    font-size: 2.75rem;
  }

  .section-title {
    margin-bottom: 60px;
  }

  .wave-divider {
    height: 80px;
  }

  /* ヒーロー */
  .hero__vertical {
    display: block;
  }

  .hero__story {
    font-size: 0.875rem;
  }

  /* CONCEPT：本文の左右に写真を表示する */
  .concept__deco {
    display: block;
  }

  /* WORKS：2列 */
  .works__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }

  /* SERVICE：2列 */
  .service__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  /* FLOW：4列（横並び） */
  .flow__list {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }

  /* FLOW：3ステップの場合は3列 */
  .flow__list--three {
    grid-template-columns: repeat(3, 1fr);
  }

  /* FLOW：5ステップの場合は5列 */
  .flow__list--five {
    grid-template-columns: repeat(5, 1fr);
  }

  .flow__item {
    padding-bottom: 0;
  }

  /* 横並び時の点線は「横方向」に引き直す */
  .flow__item:not(:last-child)::after {
    top: 74px;
    bottom: auto;
    left: auto;
    right: -10px;
    width: 20px;
    height: 1px;
    border-left: 0;
    border-top: 1px dashed var(--color-pink);
    transform: none;
  }

  /* VOICE：3列 */
  .voice__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* ABOUT：2カラム */
  .about__message {
    grid-template-columns: 5fr 6fr;
    gap: 52px;
  }

  .values__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* フッター：3カラム */
  .footer__grid {
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 40px;
  }

  /* モーダル */
  .modal__body {
    padding: 36px 40px 44px;
  }

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

  /* CONTACT：2カラム */
  .contact__layout {
    grid-template-columns: 1.35fr 1fr;
    gap: 56px;
  }

  .form__submit .btn {
    width: auto;
    min-width: 300px;
  }

  /* 添付ファイル：横幅に余裕が出るので「ドラッグ＆ドロップ／または」を1行に */
  .form__dropzone-break {
    display: none;
  }

  .contact-info {
    padding: 38px 32px;
  }

  .to-top {
    right: 32px;
    bottom: 32px;
    width: 52px;
    height: 52px;
  }
}

/* ==========================================================================
   ブレイクポイント：デスクトップ（1024px〜）
   ========================================================================== */
@media (min-width: 1024px) {
  .section {
    padding-block: 130px;
  }

  .section-title__en {
    font-size: 3.25rem;
  }

  /* CONCEPT：余白に余裕が出るぶん、写真も一回り大きく */
  .concept__deco--1 {
    width: 240px;
  }

  .concept__deco--2 {
    width: 188px;
  }

  .concept__deco--3 {
    width: 268px;
  }

  .concept__deco--4 {
    width: 206px;
  }

  /* ナビをPC表示に切り替え、ハンバーガーを隠す */
  .nav {
    display: block;
    margin-left: auto;
    /* .header__inner は align-items: center のため、.nav は本来
       中身の高さ（文字の高さ）ぶんしかない。SERVICE のドロップダウンを
       ヘッダー下端にぴったり合わせられるよう、ここでヘッダーの高さいっぱいに
       伸ばす（.nav__list 側の height: 100% と対になる） */
    align-self: stretch;
  }

  .header__cta {
    display: inline-block;
    margin-left: 30px;
  }

  .hamburger {
    display: none;
  }

  .drawer {
    display: none !important;
  }

  /* WORKS：3列 */
  .works__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* SERVICE：4列 */
  .service__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* ヒーロー */
  .hero__vertical {
    right: 48px;
    font-size: 0.8125rem;
  }

  .hero__story {
    font-size: 0.9375rem;
  }

  .concept {
    padding-block: 150px 130px;
  }
}

/* ==========================================================================
   タッチデバイス向けフォールバック
   background-attachment: fixed が iOS 等で正しく動作しないため scroll に戻す
   ========================================================================== */
@media (hover: none) and (pointer: coarse) {
  .hero__slide,
  .page-hero__bg {
    background-attachment: scroll;
  }
}

/* ==========================================================================
   印刷用
   ========================================================================== */
@media print {
  .header,
  .drawer,
  .to-top,
  .hero__scroll {
    display: none !important;
  }

  body {
    color: #000;
  }
}

/* ==========================================================================
   ==========================================================================
   ここから下層ページ用の追記（マルチページ化にともなう拡張）
   --------------------------------------------------------------------------
   15. ページヒーロー（下層ページ共通）
   16. 「もっと見る」ボタン
   17. ナビのアクティブ表示
   18. SERVICE 総合ページ
   19. 看板種類 特集ページ
   20. ABOUT ページ
   21. FAQ アコーディオン
   22. WORKS フィルタのアニメーション
   23. 下層ページ用ブレイクポイント
   ==========================================================================
   ========================================================================== */

/* ==========================================================================
   15. ページヒーロー（下層ページ共通）
   トップのフルスクリーンヒーローより低い、40〜50vh のコンパクト版。
   background-attachment: fixed でトップページと同じ質感を保つ。
   ========================================================================== */
.page-hero {
  position: relative;
  height: 38vh;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* 背景画像レイヤー（パララックス） */
.page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* ダークオーバーレイ（トップと同じトーン） */
.page-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: var(--overlay-hero);
}

.page-hero__content {
  position: relative;
  z-index: 3;
  text-align: center;
  padding-inline: 24px;
  /* 固定ヘッダーに重ならないよう、その分だけ下げて中央に見せる */
  padding-top: var(--header-h);
  color: var(--color-white);
}

/* ページヒーロー内の小さな線画マーク */
.page-hero__mark {
  width: 40px;
  margin: 0 auto 16px;
  opacity: 0.85;
}

.page-hero__en {
  display: block;
  font-family: var(--font-en);
  font-weight: 300;
  font-size: clamp(2rem, 9vw, 3.75rem);
  line-height: 1.1;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.page-hero__ja {
  display: block;
  margin-top: 16px;
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

/* ==========================================================================
   16. 「もっと見る」ボタン
   既存のゴールド塗りCTAとは差別化した、控えめなゴースト型
   ========================================================================== */
.section__more {
  margin-top: 56px;
  text-align: center;
}

.btn--ghost {
  background-color: transparent;
  border: 1px solid var(--color-gold);
  color: var(--color-gold);
  font-family: var(--font-en);
  font-size: 0.8125rem;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  background-color: var(--color-gold);
  color: var(--color-white);
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(201, 169, 110, 0.28);
}

/* ボタン内の矢印：ホバーで少し右へスライド */
.btn__arrow {
  display: inline-block;
  transition: transform 0.4s var(--ease);
}

.btn:hover .btn__arrow,
.btn:focus-visible .btn__arrow {
  transform: translateX(6px);
}

/* テキストリンク型の「もっと見る」 */
.more-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 6px;
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  color: var(--color-text);
  transition: color 0.4s var(--ease);
}

.more-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-gold);
  transform: scaleX(1);
  transform-origin: left;
  transition: transform 0.45s var(--ease);
}

.more-link:hover {
  color: var(--color-gold);
}

.more-link:hover::after {
  transform: scaleX(0.4);
}

.more-link .btn__arrow {
  transition: transform 0.4s var(--ease);
}

.more-link:hover .btn__arrow {
  transform: translateX(6px);
}

/* ==========================================================================
   17. ナビのアクティブ表示
   現在のページに対応するナビ項目に .is-active を付与する
   ========================================================================== */
.nav__link.is-active::after {
  transform: scaleX(1);
  transform-origin: left;
}

.header.is-scrolled .nav__link.is-active,
.header--solid .nav__link.is-active {
  color: var(--color-gold);
}

.drawer__link.is-active {
  color: var(--color-gold);
}

.drawer__link.is-active small {
  color: var(--color-gold);
}

/* ==========================================================================
   18. SERVICE 総合ページ
   ========================================================================== */
/* --- 看板の種類：大きめカード --- */
.service-feature__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

.service-feature {
  /* グリッドは既定で行の高さを揃えるが（align-items: stretch）、
     中身も縦に伸ばして「詳しく見る」を必ずカード下端に揃えるため flex にする。
     説明文の長さがカードごとに違っても、リンクの位置がバラつかなくなる */
  display: flex;
  flex-direction: column;
  background-color: var(--color-white);
  /* ホバーで枠線を出しても位置がずれないよう、あらかじめ透明の枠を持たせる */
  border: 1px solid transparent;
  border-radius: 0;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease);
}

.service-feature:hover,
.service-feature:focus-visible {
  transform: translateY(-8px);
  border-color: var(--color-pink);
}

.service-feature__thumb {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background-color: var(--color-offwhite);
  /* flex 化した .service-feature の中で、画像の比率が潰れないようにする */
  flex-shrink: 0;
}

.service-feature__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}

/* ホバーで画像がわずかにズーム */
.service-feature:hover .service-feature__thumb img {
  transform: scale(1.06);
}

.service-feature__body {
  display: flex;
  flex-direction: column;
  /* カードの残り高さいっぱいに広がる。これで .service-feature__link の
     margin-top: auto が効き、常にカード下端に揃う */
  flex: 1 1 auto;
  padding: 28px 26px 32px;
}

.service-feature__en {
  display: block;
  font-family: var(--font-en);
  font-size: 0.75rem;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  color: var(--color-gold);
  margin-bottom: 8px;
}

.service-feature__name {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  margin-bottom: 14px;
}

.service-feature__desc {
  display: block;
  font-size: 0.8125rem;
  line-height: 2.1;
  color: var(--color-warmgray);
  /* リンクの margin-top: auto と合わせて、最低限の余白を確保しつつ
     カードの高さが余る分はリンク側に流れて下端で揃う */
  margin-bottom: 18px;
}

.service-feature__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* カード内の余った高さをここへ集め、常にカード下端に揃える
     （価格表示をやめたことで説明文の行数だけがカードごとに違うため） */
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
  width: 100%;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  color: var(--color-text);
  transition: color 0.4s var(--ease);
}

.service-feature:hover .service-feature__link {
  color: var(--color-pink);
}

.service-feature:hover .service-feature__link .btn__arrow {
  transform: translateX(6px);
}

/* --- 料金表 --- */
.price-table {
  width: 100%;
  max-width: 860px;
  margin-inline: auto;
  font-size: 0.875rem;
}

.price-table caption {
  caption-side: bottom;
  margin-top: 20px;
  font-size: 0.75rem;
  line-height: 2;
  color: var(--color-warmgray);
  text-align: center;
}

.price-table th,
.price-table td {
  padding: 16px 14px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

.price-table thead th {
  font-family: var(--font-en);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  color: var(--color-gold);
  border-bottom: 1px solid var(--color-gold);
}

.price-table tbody th {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.price-table__genre {
  white-space: normal;
}

.price-table__genre-tag {
  display: inline-block;
  padding: 4px 12px;
  margin: 2px 4px 2px 0;
  border-radius: 999px;
  background-color: var(--color-pink-pale);
  color: var(--color-gold-dark);
  font-family: var(--font-serif);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.price-table__note {
  font-size: 0.75rem;
  line-height: 1.9;
  color: var(--color-warmgray);
}

/* モバイルでは行をカード状に積む */
@media (max-width: 767px) {
  .price-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .price-table tbody tr {
    display: block;
    margin-bottom: 18px;
    padding: 18px 20px;
    background-color: var(--color-white);
    border-radius: 0;
    box-shadow: var(--shadow-soft);
  }

  .price-table tbody th,
  .price-table tbody td {
    display: block;
    padding: 4px 0;
    border-bottom: 0;
  }

  .price-table tbody th {
    font-size: 1rem;
    margin-bottom: 4px;
  }
}

/* ==========================================================================
   19. 看板種類 特集ページ
   ========================================================================== */
/* --- イントロ（画像＋テキストの2カラム） --- */
.intro__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
  align-items: center;
}

.intro__photo {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.intro__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.intro__label {
  font-family: var(--font-en);
  font-size: 0.75rem;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  color: var(--color-gold);
  margin-bottom: 14px;
}

.intro__title {
  font-family: var(--font-serif);
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: 0.1em;
  margin-bottom: 22px;
}

.intro__text {
  font-size: 0.875rem;
  line-height: 2.3;
  color: var(--color-warmgray);
}

.intro__text + .intro__text {
  margin-top: 18px;
}

.intro__text + .btn {
  margin-top: 28px;
}

/* ==========================================================================
   20. ABOUT ページ
   ========================================================================== */
.company-table {
  width: 100%;
  max-width: 820px;
  margin-inline: auto;
  font-size: 0.875rem;
}

.company-table th,
.company-table td {
  padding: 18px 14px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
  line-height: 2;
}

.company-table th {
  width: 30%;
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--color-text);
  white-space: nowrap;
}

.company-table td {
  color: var(--color-warmgray);
}

/* モバイルでは縦積み */
@media (max-width: 599px) {
  .company-table th,
  .company-table td {
    display: block;
    width: 100%;
  }

  .company-table th {
    padding-bottom: 4px;
    border-bottom: 0;
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    color: var(--color-gold);
  }
}

/* --- アクセス --- */
.access__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}

.access__map {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  background-color: var(--color-border);
}

.access__map iframe {
  display: block;
  width: 100%;
  height: 320px;
  border: 0;
}

.access__title {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  margin-bottom: 14px;
}

.access__text {
  font-size: 0.875rem;
  line-height: 2.2;
  color: var(--color-warmgray);
}

.access__steps {
  margin-top: 22px;
  display: grid;
  gap: 12px;
}

.access__steps li {
  position: relative;
  padding-left: 30px;
  font-size: 0.8125rem;
  line-height: 1.95;
  color: var(--color-warmgray);
  counter-increment: access-step;
}

.access__steps {
  counter-reset: access-step;
}

.access__steps li::before {
  content: counter(access-step);
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--color-pink-pale);
  font-family: var(--font-en);
  font-size: 0.6875rem;
  color: var(--color-pink);
}

/* ==========================================================================
   21. FAQ アコーディオン
   ========================================================================== */
.accordion {
  max-width: 820px;
  margin-inline: auto;
}

/* カテゴリ見出し */
.accordion__category {
  margin-top: 56px;
  margin-bottom: 8px;
  font-family: var(--font-en);
  font-size: 0.8125rem;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  color: var(--color-gold);
}

.accordion__category:first-child {
  margin-top: 0;
}

.accordion__category small {
  display: block;
  margin-top: 4px;
  font-family: var(--font-serif);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  color: var(--color-warmgray);
}

.accordion__item {
  border-bottom: 1px solid var(--color-border);
}

/* 質問（トグルボタン） */
.accordion__btn {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 24px 4px;
  text-align: left;
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: 0.08em;
  color: var(--color-text);
  transition: color 0.35s var(--ease);
}

.accordion__btn:hover {
  color: var(--color-pink);
}

.accordion__q {
  display: flex;
  gap: 14px;
}

.accordion__mark {
  flex-shrink: 0;
  font-family: var(--font-en);
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--color-pink);
}

/* ＋ / − アイコン（CSSのみで作成） */
.accordion__icon {
  position: relative;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-top: 0.55em;
}

.accordion__icon::before,
.accordion__icon::after {
  content: "";
  position: absolute;
  background-color: var(--color-gold);
  transition: transform 0.4s var(--ease), opacity 0.3s var(--ease);
}

/* 横棒（常に表示） */
.accordion__icon::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  transform: translateY(-50%);
}

/* 縦棒（開いたら回転して消え、「−」になる） */
.accordion__icon::after {
  left: 50%;
  top: 0;
  width: 1px;
  height: 100%;
  transform: translateX(-50%);
}

.accordion__item.is-open .accordion__icon::after {
  transform: translateX(-50%) rotate(90deg);
  opacity: 0;
}

/* 回答パネル（max-height でスライド） */
.accordion__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s var(--ease);
}

.accordion__inner {
  display: flex;
  gap: 14px;
  padding: 0 4px 26px;
  font-size: 0.8125rem;
  line-height: 2.2;
  color: var(--color-warmgray);
}

.accordion__inner .accordion__mark {
  color: var(--color-gold);
}

/* 解決しない場合の案内 */
.faq-help {
  max-width: 820px;
  margin: 64px auto 0;
  padding: 36px 26px;
  border-radius: 0;
  background-color: var(--color-pink-pale);
  text-align: center;
}

.faq-help__title {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  margin-bottom: 12px;
}

.faq-help__text {
  font-size: 0.8125rem;
  line-height: 2;
  color: var(--color-warmgray);
  margin-bottom: 26px;
}

/* ==========================================================================
   22. WORKS フィルタのアニメーション
   絞り込みで再表示されたカードをふわっと出す
   ========================================================================== */
@keyframes card-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.work-card.is-filtering {
  animation: card-in 0.5s var(--ease) both;
}

@media (prefers-reduced-motion: reduce) {
  .work-card.is-filtering {
    animation: none;
  }
}

/* 該当0件のときのメッセージ */
.works__empty {
  display: none;
  padding-block: 60px;
  text-align: center;
  font-size: 0.875rem;
  color: var(--color-warmgray);
}

.works__empty.is-visible {
  display: block;
}

/* ==========================================================================
   23. 下層ページ用ブレイクポイント
   ========================================================================== */
@media (min-width: 768px) {
  .page-hero {
    height: 42vh;
    min-height: 340px;
  }

  /* SERVICE 総合：大きめカードを2列 */
  .service-feature__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 36px;
  }

  /* 特集ページのイントロ：2カラム */
  .intro__grid {
    grid-template-columns: 6fr 5fr;
    gap: 52px;
  }

  /* アクセス：2カラム */
  .access__grid {
    grid-template-columns: 1.2fr 1fr;
    gap: 44px;
  }

  .accordion__btn {
    font-size: 1rem;
  }

  .accordion__inner {
    font-size: 0.875rem;
  }
}

@media (min-width: 1024px) {
  /* ナビ項目が5つになったため、1024〜1199px では間隔を詰める */
  .nav__list {
    gap: 24px;
  }

  .header__cta {
    margin-left: 24px;
  }
}

@media (min-width: 1200px) {
  .nav__list {
    gap: 34px;
  }

  .header__cta {
    margin-left: 30px;
  }
}

/* ==========================================================================
   24. ニュースティッカー（ヒーロー最下部・背景画像の上）
   お知らせが縦方向にスライドして切り替わるブロック。
   ヒーローの下端ではなく、白グラデーションより上（＝画像が見えている位置）
   に通常フローで置くため、.hero 側に padding-bottom を確保している。
   ========================================================================== */
.ticker {
  position: relative;
  z-index: 3;
  color: var(--color-white);
}

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

/* --- 「NEWS」ラベル（両脇に細い罫線） --- */
.ticker__label {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-en);
  font-size: 0.8125rem;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  color: var(--color-white);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
  transition: opacity 0.35s var(--ease);
}

.ticker__label::before,
.ticker__label::after {
  content: "";
  width: 26px;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.5);
}

.ticker__label:hover {
  opacity: 0.75;
}

/* --- 縦に流れる部分 --- */
.ticker__viewport {
  position: relative;
  width: 100%;
  max-width: 620px;
  /* 1件分の高さだけ見せ、はみ出した分は隠す */
  height: var(--ticker-h);
  overflow: hidden;
}

.ticker__list {
  transition: transform 0.7s var(--ease);
}

.ticker__item {
  height: var(--ticker-h);
}

.ticker__item a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 100%;
  transition: opacity 0.35s var(--ease);
}

.ticker__item a:hover {
  opacity: 0.75;
}

/* 日付とカテゴリ（1行目） */
.ticker__meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ticker__date {
  font-family: var(--font-en);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
}

.ticker__cat {
  padding: 2px 12px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.18);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  color: var(--color-white);
}

/* 見出し（2行目・長い場合は1行で省略） */
.ticker__title {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-serif);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
}

/* --- ニュースの下に置く一覧リンク --- */
.ticker__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  font-family: var(--font-en);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease);
}

.ticker__more:hover {
  color: var(--color-white);
  border-color: var(--color-white);
}

.ticker__more:hover .btn__arrow {
  transform: translateX(5px);
}

/* 動きを減らす設定では自動スライドを止める（JS側でも停止） */
@media (prefers-reduced-motion: reduce) {
  .ticker__list {
    transition: none;
  }
}

/* ==========================================================================
   25. NEWS ページ
   ========================================================================== */
/* --- カテゴリ絞り込み（.filter を流用） --- */
.news-list {
  max-width: 900px;
  margin-inline: auto;
}

.news-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding-block: 30px;
  border-bottom: 1px solid var(--color-border);
}

.news-item:first-child {
  border-top: 1px solid var(--color-border);
}

/* フィルタで非表示 */
.news-item.is-hidden {
  display: none;
}

.news-item__meta {
  display: flex;
  align-items: center;
  gap: 14px;
}

.news-item__date {
  font-family: var(--font-en);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  color: var(--color-gold);
}

.news-item__cat {
  padding: 3px 13px;
  border-radius: 999px;
  background-color: var(--color-pink-pale);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  color: var(--color-pink);
}

.news-item__title {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}

.news-item__text {
  font-size: 0.8125rem;
  line-height: 2.1;
  color: var(--color-warmgray);
}

/* 該当0件のときのメッセージ */
.news__empty {
  display: none;
  padding-block: 60px;
  text-align: center;
  font-size: 0.875rem;
  color: var(--color-warmgray);
}

.news__empty.is-visible {
  display: block;
}

/* ==========================================================================
   26. ニュース関連のブレイクポイント
   ========================================================================== */
@media (min-width: 768px) {
  :root {
    --ticker-h: 70px;
  }

  .ticker__inner {
    gap: 18px;
  }

  .ticker__title {
    font-size: 0.9375rem;
  }

  /* NEWS：日付列と本文列の2カラム */
  .news-item {
    grid-template-columns: 210px 1fr;
    gap: 0 24px;
    padding-block: 34px;
  }

  .news-item__meta {
    padding-top: 4px;
  }
}

/* ==========================================================================
   27. WORKS スライダー（トップページ）
   中央の写真を大きく見せつつ、左右にも前後の写真を覗かせるカルーセル。
   トラック全体を translateX で動かし、横へ流れるように送る。
   4秒ごとに自動送り。ホバー・フォーカス中は一時停止する
   （js/main.js: initWorksSlider）。
   ========================================================================== */
:root {
  /* 1枚あたりの幅とすき間。左右の写真がどれだけ覗くかを決める。
     縮小率も変数にしてあるのは、画面が狭いほど縮小を弱めないと
     左右の覗きが細くなりすぎて「並んでいる」ように見えないため */
  --works-slide-w: 68%;
  --works-slide-gap: 10px;
  --works-slide-scale: 0.9;
}

.works-slider {
  position: relative;
}

/* --- 見えている窓。はみ出した左右の写真はここで切り取る --- */
.works-slider__viewport {
  position: relative;
  overflow: hidden;
  /* 縮小した左右の写真とボックスシャドウが切れないよう、上下に逃げを取る */
  padding-block: 12px;
}

/* --- 横に並ぶトラック。これ自体を動かす --- */
.works-slider__track {
  display: flex;
  align-items: center;
  gap: var(--works-slide-gap);
  will-change: transform;
  transition: transform 0.9s var(--ease);
}

/* --- 1枚ごとの写真 --- */
.works-slider__slide {
  /* 幅を固定して、JS側が1枚ぶんの送り量を計算できるようにする */
  flex: 0 0 var(--works-slide-w);
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background-color: var(--color-offwhite);
  box-shadow: var(--shadow-soft);
  /* 中央以外は少し小さく、控えめに */
  opacity: 0.4;
  transform: scale(var(--works-slide-scale));
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}

.works-slider__slide.is-active {
  opacity: 1;
  transform: scale(1);
}

/* 中央の写真だけクリックで詳細が開くので、カーソルで区別する */
.works-slider__slide:not(.is-active) {
  cursor: pointer;
}

.works-slider__slide img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 5;
  object-fit: cover;
}

/* --- 前へ／次へ --- */
.works-slider__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-soft);
  color: var(--color-text);
  transform: translateY(-50%);
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease),
    transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.works-slider__arrow--prev {
  left: 12px;
}

.works-slider__arrow--next {
  right: 12px;
}

.works-slider__arrow:hover,
.works-slider__arrow:focus-visible {
  background-color: var(--color-pink);
  color: var(--color-white);
  transform: translateY(-50%) scale(1.08);
  box-shadow: var(--shadow-hover);
}

.works-slider__arrow svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- キャプション（中央の写真の情報。JSで文言を差し替える） --- */
.works-slider__caption {
  margin-top: 28px;
  text-align: center;
}

.works-slider__tag {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 999px;
  background-color: var(--color-pink-pale);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  color: var(--color-pink);
  margin-bottom: 14px;
}

.works-slider__name {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}

.works-slider__comment {
  font-size: 0.8125rem;
  line-height: 1.9;
  color: var(--color-warmgray);
}

/* --- ページネーション --- */
.works-slider__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 26px;
}

.works-slider__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background-color: var(--color-border);
  transition: width 0.4s var(--ease), background-color 0.4s var(--ease);
}

.works-slider__dot:hover {
  background-color: var(--color-pink);
}

.works-slider__dot.is-active {
  width: 28px;
  background-color: var(--color-gold);
}

/* 動きを減らす設定では、流れる動きをほぼ即時にする
   （自動送り自体はJS側で止める） */
@media (prefers-reduced-motion: reduce) {
  .works-slider__track,
  .works-slider__slide {
    transition-duration: 0.01ms;
  }
}

@media (min-width: 768px) {
  :root {
    /* 画面が広いほど左右の写真をしっかり見せる */
    --works-slide-w: 56%;
    --works-slide-gap: 24px;
    --works-slide-scale: 0.86;
  }

  .works-slider__viewport {
    padding-block: 20px;
  }

  .works-slider__arrow {
    width: 48px;
    height: 48px;
  }

  .works-slider__arrow--prev {
    left: 20px;
  }

  .works-slider__arrow--next {
    right: 20px;
  }

  .works-slider__arrow svg {
    width: 18px;
    height: 18px;
  }

  .works-slider__name {
    font-size: 1.25rem;
  }

  .works-slider__comment {
    font-size: 0.875rem;
  }
}

/* ==========================================================================
   28. 施工事例ギャラリー（看板種類 特集ページ）
   タグ・名前・コメント付きのカードではなく、画像のみを並べる。
   スマホ時は2×3、768px以上で3×2に切り替わる。
   works.html へのリンクは持たない（クリック不可の静止したギャラリー）。
   ========================================================================== */
.works-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

.works-gallery__item {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--color-offwhite);
}

.works-gallery__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 768px) {
  .works-gallery {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
}

/* ==========================================================================
   29. その他の看板種類（看板種類 特集ページ）
   スマホ時は2×4、768px以上で4×2のグリッドに切り替わる
   ========================================================================== */
.related-services__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

.related-services__item {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--color-offwhite);
}

.related-services__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.related-services__item:hover img,
.related-services__item:focus-visible img {
  transform: scale(1.06);
}

.related-services__label {
  position: absolute;
  inset: auto 0 0 0;
  padding: 10px 12px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
  color: var(--color-white);
  font-family: var(--font-serif);
  font-size: 0.8125rem;
  letter-spacing: 0.03em;
}

@media (min-width: 768px) {
  .related-services__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }
}

/* ==========================================================================
   30. atelier CUVICで製作するメリット（プレート看板ページ）
   写真付きの3カラムカード
   ========================================================================== */
.advantage__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}

.advantage {
  background-color: var(--color-white);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: transform 0.5s var(--ease);
}

.advantage:hover {
  transform: translateY(-6px);
}

.advantage__thumb {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--color-offwhite);
}

.advantage__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.advantage__body {
  padding: 26px 24px;
}

.advantage__title {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
  color: var(--color-text);
}

.advantage__text {
  font-size: 0.8125rem;
  line-height: 2;
  color: var(--color-warmgray);
}

@media (min-width: 768px) {
  .advantage__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
  }
}

/* ==========================================================================
   31. ラミネート加工について（プレート看板ページ）
   写真＋使用材料リストの2カラム
   ========================================================================== */
.material-list {
  background-color: var(--color-white);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.material-list__heading {
  padding: 18px 22px;
  background-color: var(--color-gold);
  color: var(--color-white);
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.material-list__rows {
  list-style: none;
}

.material-list__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.875rem;
  color: var(--color-text);
}

.material-list__row:last-child {
  border-bottom: none;
}

.material-list__badge {
  flex-shrink: 0;
  padding: 5px 14px;
  border-radius: 999px;
  background-color: var(--color-pink-pale);
  color: var(--color-pink);
  font-size: 0.6875rem;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* --- 2枚並びのカードグリッド（advantage の2カラム版） --- */
.advantage__grid--pair {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .advantage__grid--pair {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- Before / After 比較（デザイン作成カード用） --- */
.design-compare {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
}

.design-compare__item {
  aspect-ratio: 4 / 3;
}

/* --- このページのみ縦長にしたい場合の修飾子（プレート看板ページのBEFORE/AFTER用） --- */
.design-compare--portrait .design-compare__item {
  aspect-ratio: 3 / 4;
}

/* --- design-compare--portraitと高さを揃えたい単体サムネイル用（プレート看板ページのデータ入稿） --- */
.advantage__thumb--match-portrait {
  aspect-ratio: 3 / 2;
}

/* --- サムネイル高さを design-compare--wide と揃えたい場合の修飾子 --- */
.advantage__thumb--wide {
  aspect-ratio: 8 / 3;
}

.design-compare__item {
  position: relative;
  overflow: hidden;
  background-color: var(--color-offwhite);
}

.design-compare__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.design-compare__label {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 12px;
  border-radius: 999px;
  background-color: var(--color-white);
  color: var(--color-pink);
  font-family: var(--font-en);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  box-shadow: var(--shadow-soft);
}

/* --- アプリアイコン風サムネイル（データ入稿カード：Illustrator） --- */
.advantage__thumb--icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-pink-pale), var(--color-pink-light));
}

.app-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: 20px;
  background-color: var(--color-text);
  box-shadow: var(--shadow-soft);
}

.app-icon__label {
  font-family: var(--font-en);
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-gold);
}

/* ==========================================================================
   31.5. ご要望に合わせて選べるタイプ（ウィンドウサインページ）
   バッジ付きサムネイル＋仕様表のカードグリッド
   ========================================================================== */
.type-card__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}

@media (min-width: 768px) {
  .type-card__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.type-card {
  position: relative;
  background-color: var(--color-white);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: transform 0.5s var(--ease);
}

.type-card:hover {
  transform: translateY(-6px);
}

.type-card__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 1;
  padding: 6px 18px;
  border-radius: 999px;
  background-color: var(--color-pink-pale);
  color: var(--color-pink);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  box-shadow: var(--shadow-soft);
}

.type-card__thumb {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--color-offwhite);
}

.type-card__thumb--small {
  width: 94%;
  margin: 24px auto 0;
}

/* --- 横長の構造図などをそのまま掲載する画像ブロック --- */
.diagram-image {
  max-width: 900px;
  margin: 0 auto;
}

.diagram-image img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: var(--shadow-soft);
}

/* --- 取り付け方法（裏面加工）カード：左ゴールドボーダーの見出し --- */
.mount-card__title {
  padding-left: 14px;
  border-left: 3px solid var(--color-gold);
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 18px;
}

.mount-card__text {
  font-size: 0.875rem;
  line-height: 2;
  color: var(--color-warmgray);
  margin-bottom: 16px;
}

.mount-card__text:last-child {
  margin-bottom: 0;
}

.mount-card__note {
  font-size: 0.8125rem;
  line-height: 1.9;
  font-weight: 600;
  color: var(--color-gold-dark);
}

/* --- 1文字あたりの概算価格（ステンレス切り文字ページ） --- */
.price-highlight {
  background-color: #faf3e7;
  border: 1px solid var(--color-gold);
  border-radius: 8px;
  padding: 28px 30px;
  margin-bottom: 34px;
  text-align: center;
}

.price-highlight__text {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-text);
}

.price-notes {
  list-style: none;
  text-align: center;
  font-size: 0.875rem;
  line-height: 2.2;
  color: var(--color-warmgray);
  margin-bottom: 30px;
}

.price-note--warning {
  text-align: center;
  font-size: 0.8125rem;
  line-height: 2;
  font-weight: 600;
  color: var(--color-gold-dark);
  max-width: 860px;
  margin: 0 auto 34px;
}

/* ==========================================================================
   35.8. 各仕様別の概算価格（ステンレス切り文字ページ）
   画像タブで切り替わる価格表
   ========================================================================== */
.price-tabs__nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 40px;
}

@media (min-width: 700px) {
  .price-tabs__nav {
    grid-template-columns: repeat(4, 1fr);
  }
}

.price-tabs__btn {
  display: block;
  width: 100%;
  padding: 0;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
  font: inherit;
}

.price-tabs__btn:hover {
  transform: translateY(-4px);
}

.price-tabs__btn.is-active {
  border-color: var(--color-gold);
}

.price-tabs__thumb {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--color-offwhite);
}

.price-tabs__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.price-tabs__label {
  display: block;
  padding: 14px 10px;
  text-align: center;
  font-family: var(--font-serif);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
}

.price-tabs__panel {
  display: none;
}

.price-tabs__panel.is-active {
  display: block;
}

.spec-price {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.spec-price th,
.spec-price td {
  padding: 16px 14px;
  text-align: center;
  white-space: nowrap;
}

.spec-price thead th {
  background-color: var(--color-gold-dark);
  color: var(--color-white);
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.spec-price thead th:first-child {
  text-align: left;
}

.spec-price tbody th {
  text-align: left;
  font-weight: 600;
  color: var(--color-text);
}

.spec-price tbody td {
  color: var(--color-text);
}

.spec-price tbody tr:nth-child(odd) {
  background-color: var(--color-offwhite);
}

.spec-price__wrap {
  overflow-x: auto;
}

.spec-price__note {
  margin-top: 20px;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--color-warmgray);
}

/* --- テキストのみのタブ切り替え（種類別価格表など） --- */
.text-tabs__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 30px;
}

.text-tabs__btn {
  padding: 12px 28px;
  background-color: var(--color-pink-pale);
  color: var(--color-text);
  border: none;
  border-radius: 4px 4px 0 0;
  font-family: var(--font-serif);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}

.text-tabs__btn.is-active {
  background-color: var(--color-gold);
  color: var(--color-white);
}

.type-card__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.type-card__body {
  padding: 26px 24px;
}

.type-card__title {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.6;
  color: var(--color-text);
  margin-bottom: 12px;
}

.type-card__num {
  color: var(--color-gold);
  margin-right: 2px;
}

.type-card__text {
  font-size: 0.8125rem;
  line-height: 2.2;
  color: var(--color-warmgray);
  margin-bottom: 20px;
}

.type-card__spec {
  border-top: 1px solid var(--color-border);
}

.type-card__spec-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 2px;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.8125rem;
}

.type-card__spec-row dt {
  flex-shrink: 0;
  color: var(--color-warmgray);
}

.type-card__spec-row dd {
  text-align: right;
  color: var(--color-text);
}

.type-card__spec-row--price dd {
  color: var(--color-gold-dark);
  font-weight: 600;
  font-size: 0.9375rem;
}

/* ==========================================================================
   31.6. シートの素材について（ウィンドウサインページ）
   画像1枚＋英字ラベル＋素材名＋説明文の4カラムカード
   ========================================================================== */
.material-card__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 560px) {
  .material-card__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .material-card__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.material-card {
  background-color: var(--color-white);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: transform 0.5s var(--ease);
}

.material-card:hover {
  transform: translateY(-6px);
}

.material-card__thumb {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--color-offwhite);
}

.material-card__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.material-card__body {
  padding: 22px 20px;
}

.material-card__title {
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.5;
  color: var(--color-text);
}

.material-card__num {
  color: var(--color-gold);
  margin-right: 2px;
}

.material-card__sub {
  font-family: var(--font-en);
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  color: var(--color-gold-dark);
  margin: 6px 0 14px;
}

.material-card__title--nosub {
  margin-bottom: 14px;
}

.material-card__text {
  font-size: 0.8125rem;
  line-height: 1.9;
  color: var(--color-warmgray);
}

/* ==========================================================================
   31.7. 貼り方・剥がし方の手順（ウィンドウサインページ）
   丸番号バッジ＋画像＋説明のステップカード
   ========================================================================== */
.step-card__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 560px) {
  .step-card__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .step-card__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.step-card__grid--three {
  max-width: 900px;
  margin: 0 auto;
}

@media (min-width: 1000px) {
  .step-card__grid--three {
    grid-template-columns: repeat(3, 1fr);
  }
}

.step-card {
  position: relative;
  background-color: var(--color-white);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: transform 0.5s var(--ease);
}

.step-card:hover {
  transform: translateY(-6px);
}

.step-card__num {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 1;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-pink), var(--color-gold));
  color: var(--color-white);
  font-family: var(--font-en);
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: var(--shadow-soft);
}

.step-card__thumb {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--color-offwhite);
}

.step-card__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.step-card__body {
  padding: 22px 20px;
}

.step-card__title {
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.5;
  color: var(--color-text);
  margin-bottom: 10px;
}

.step-card__text {
  font-size: 0.8125rem;
  line-height: 1.9;
  color: var(--color-warmgray);
}

/* ==========================================================================
   32. ポスター差し替えタイプ（スタンド看板ページ）
   メリット・おすすめ使用シーンの2枚を縦に並べ、隣に画像を1枚配置
   ========================================================================== */
.poster-info__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
  align-items: start;
}

.poster-cards {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.poster-card {
  background-color: var(--color-white);
  box-shadow: var(--shadow-soft);
  padding: 30px 28px;
}

.poster-card__label {
  display: inline-block;
  padding: 6px 18px;
  border-radius: 999px;
  background-color: var(--color-gold);
  color: var(--color-white);
  font-family: var(--font-serif);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  margin-bottom: 18px;
}

.poster-card__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.poster-card__list li {
  position: relative;
  padding-left: 20px;
  font-size: 0.875rem;
  line-height: 1.9;
  color: var(--color-warmgray);
}

.poster-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-pink);
}

.poster-card__list strong {
  font-weight: 600;
  color: var(--color-text);
}

@media (min-width: 768px) {
  .poster-info__grid {
    grid-template-columns: 6fr 5fr;
    gap: 52px;
  }
}

/* --- 商品ラインナップ（ポスター差し替えタイプ） ---
   スマホ時は2×4、768px以上で4×2のグリッドに切り替わる */
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.product-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-white);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

.product-card__thumb {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--color-offwhite);
}

.product-card__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-card__body {
  padding: 16px 16px 20px;
}

.product-card__name {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--color-text);
  margin-bottom: 10px;
}

.product-card__price {
  font-family: var(--font-en);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-gold-dark);
}

.product-card__price small {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 400;
  color: var(--color-warmgray);
  margin-left: 4px;
}

@media (min-width: 768px) {
  .product-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
}

/* 直前のセクションと詰めて配置したいときの上余白調整
   （.section のブレークポイント上書きより後ろに置いて確実に効かせる） */
.section--tight-top {
  padding-top: 32px;
}

/* ==========================================================================
   33. 形状比較（丸型 vs 正方形突き出し看板）
   ========================================================================== */
.compare__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start;
}

.compare__col {
  display: block;
  text-align: center;
  padding: 40px 28px;
  background-color: var(--color-white);
  box-shadow: var(--shadow-soft);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.compare__col:hover,
.compare__col:focus-visible {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
}

.compare__shape {
  width: 64px;
  height: 64px;
  margin: 0 auto 22px;
}

.compare__shape svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke-width: 1.3;
}

.compare__col--round .compare__shape svg {
  stroke: var(--color-pink);
}

.compare__col--square .compare__shape svg {
  stroke: var(--color-gold);
}

.compare__title {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 26px;
  color: var(--color-text);
}

.compare__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
}

.compare__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background-color: var(--color-offwhite);
  font-size: 0.8125rem;
  line-height: 1.6;
  text-align: left;
  color: var(--color-text);
}

.compare__list li svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  fill: none;
  stroke-width: 1.6;
}

.compare__col--round .compare__list li svg {
  stroke: var(--color-pink);
}

.compare__col--square .compare__list li svg {
  stroke: var(--color-gold-dark);
}

.compare__note {
  padding-top: 22px;
  border-top: 1px solid var(--color-border);
  font-size: 0.8125rem;
  line-height: 1.9;
  color: var(--color-warmgray);
  text-align: left;
}

.compare__vs {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 52px;
  height: 52px;
  margin: 0 auto;
  border-radius: 50%;
  background-color: var(--color-text);
  color: var(--color-white);
  font-family: var(--font-en);
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
}

@media (min-width: 768px) {
  .compare__grid {
    grid-template-columns: 1fr 60px 1fr;
    gap: 0;
  }

  .compare__col {
    padding: 44px 36px;
  }
}

/* ==========================================================================
   34. サイズ別ラインナップ（丸型突き出し看板など）
   タブ（サイズ）をクリックすると該当カードのみ表示する
   ========================================================================== */
.size-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 44px;
}

.size-filter__btn {
  padding: 12px 22px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background-color: var(--color-white);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--color-warmgray);
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease),
    border-color 0.35s var(--ease), transform 0.35s var(--ease);
}

.size-filter__btn:hover {
  transform: translateY(-2px);
  border-color: var(--color-gold);
  color: var(--color-gold-dark);
}

.size-filter__btn:focus {
  outline: none;
}

.size-filter__btn:focus-visible {
  outline: 2px solid var(--color-pink);
  outline-offset: 2px;
}

.size-filter__btn.is-active {
  background-color: var(--color-text);
  border-color: var(--color-text);
  color: var(--color-white);
}

/* --- 人物と円形看板の大きさ比較図 --- */
.size-scale {
  overflow-x: auto;
  margin-bottom: 44px;
  padding: 32px 24px 20px;
  background-color: var(--color-white);
  box-shadow: var(--shadow-soft);
}

.size-scale__caption {
  font-family: var(--font-serif);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-align: center;
  color: var(--color-gold-dark);
  margin-bottom: 22px;
}

.size-scale svg {
  display: block;
  width: 100%;
  max-width: 560px;
  min-width: 420px;
  margin-inline: auto;
  height: auto;
}

/* --- 横に長い比較図（複数サイズを一列に並べる場合）は大きく表示し、
     入りきらない分は .size-scale の overflow-x で横スクロールさせる --- */
.size-scale--wide svg {
  max-width: none;
  min-width: 0;
  width: 100%;
  margin-inline: 0;
}

/* 円・四角をクリック/タップすると size-filter__btn と同じ絞り込みが働く */
.size-scale__item {
  cursor: pointer;
}

.size-scale__item circle,
.size-scale__item rect {
  /* fill:none のままだと図形の内側が当たり判定に含まれず、
     線の上でしかホバーが反応しないため、内側も含めて反応させる */
  pointer-events: all;
  transition: stroke 0.25s var(--ease), fill 0.25s var(--ease);
}

.size-scale__item:hover circle,
.size-scale__item:focus-visible circle,
.size-scale__item:hover rect,
.size-scale__item:focus-visible rect {
  fill: var(--color-pink-pale);
  stroke: var(--color-pink);
}

.size-scale__item:hover text,
.size-scale__item:focus-visible text {
  fill: var(--color-pink);
}

.size-scale__item:focus {
  outline: none;
}

.size-scale__item:focus-visible {
  outline: 2px solid var(--color-pink);
  outline-offset: 4px;
}

.size-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.size-card {
  display: flex;
  flex-direction: column;
  padding: 28px 26px;
  background-color: var(--color-white);
  box-shadow: var(--shadow-soft);
}

.size-card.is-hidden {
  display: none;
}

.size-card__thumb {
  margin: -28px -26px 22px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--color-offwhite);
}

.size-card__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.size-card__brand {
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--color-warmgray);
  margin-bottom: 6px;
}

.size-card__name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-text);
  margin-bottom: 8px;
}

.size-card__tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background-color: var(--color-pink-pale);
  color: var(--color-pink);
  font-family: var(--font-sans);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.size-card__desc {
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--color-warmgray);
  margin-bottom: 22px;
}

.size-card__specs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--color-border);
}

.size-card__spec {
  display: flex;
  gap: 14px;
  font-size: 0.8125rem;
  line-height: 1.6;
}

.size-card__spec dt {
  flex-shrink: 0;
  width: 52px;
  color: var(--color-gold-dark);
  font-weight: 500;
}

.size-card__spec dd {
  color: var(--color-text);
}

.size-card__price-label {
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--color-warmgray);
  margin-bottom: 6px;
}

.size-card__price {
  font-family: var(--font-en);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 20px;
}

.size-card__price small {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--color-warmgray);
  margin-left: 4px;
}

.size-card .btn + .btn {
  margin-top: 10px;
}

@media (min-width: 768px) {
  .size-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }
}

/* ==========================================================================
   35. 施工の流れ（突き出し看板ページ）
   丸番号をラインでつないだステップ型の説明
   ========================================================================== */
.process {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  counter-reset: process;
}

.process__step {
  position: relative;
  text-align: center;
}

.process__num {
  position: relative;
  z-index: 1;
  width: 60px;
  height: 60px;
  margin: 0 auto 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-pink), var(--color-gold));
  color: var(--color-white);
  font-family: var(--font-en);
  font-size: 1.25rem;
  font-weight: 600;
  box-shadow: var(--shadow-soft);
}

.process__title {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 10px;
}

.process__text {
  font-size: 0.8125rem;
  line-height: 1.9;
  color: var(--color-warmgray);
}

.process__note {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 48px;
  padding: 26px 28px;
  background-color: var(--color-pink-pale);
  border: 1px solid var(--color-pink-light);
  font-size: 0.875rem;
  line-height: 1.9;
  color: var(--color-text);
}

.process__note svg {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  stroke: var(--color-gold);
  fill: none;
  stroke-width: 1.4;
}

@media (min-width: 768px) {
  .process {
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
  }

  .process__step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 30px;
    left: 50%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--color-pink), var(--color-gold));
  }
}

/* ==========================================================================
   35.5. お見積り依頼のチェックリスト（ウィンドウサインページ）
   ご記載いただきたい項目を2カラムでまとめたリスト
   ========================================================================== */
.order-checklist {
  margin-top: 48px;
  padding: 36px 30px;
  background-color: var(--color-offwhite);
}

.order-checklist__title {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 600;
  text-align: center;
  color: var(--color-text);
  margin-bottom: 26px;
}

.order-checklist__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  background-color: var(--color-border);
}

@media (min-width: 640px) {
  .order-checklist__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.order-checklist__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 22px;
  background-color: var(--color-white);
  font-size: 0.875rem;
  color: var(--color-text);
}

.order-checklist__dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-gold);
}

.order-checklist__note {
  margin-top: 26px;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--color-warmgray);
}

/* ==========================================================================
   35.6. 貼付・施工費について（ウィンドウサインページ）
   価格の目安カード＋補足カードの2カラム
   ========================================================================== */
.cost__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 768px) {
  .cost__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.cost-card {
  background-color: var(--color-white);
  box-shadow: var(--shadow-soft);
  padding: 34px 30px;
}

.cost-card--price {
  border-top: 3px solid var(--color-gold);
}

.cost-card__label {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-gold-dark);
  margin-bottom: 20px;
}

.cost-card__price-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.cost-card__price-title {
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text);
}

.cost-card__price-value {
  font-family: var(--font-en);
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--color-text);
}

.cost-card__price-value small {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--color-warmgray);
  margin-left: 2px;
}

.cost-card__plus {
  text-align: center;
  color: var(--color-gold);
  font-size: 1.125rem;
  margin: 10px 0;
}

.cost-card__divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 24px 0 16px;
}

.cost-card__notes {
  list-style: none;
  font-size: 0.75rem;
  line-height: 1.9;
  color: var(--color-warmgray);
}

.cost-card__title {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-text);
  padding-bottom: 18px;
  margin-bottom: 20px;
  border-bottom: 1px dotted var(--color-pink);
}

.cost-card__text {
  font-size: 0.875rem;
  line-height: 2;
  color: var(--color-warmgray);
}

/* ==========================================================================
   36. カルプ文字の仕様・構造（カルプ文字ページ）
   セクション内小見出しのピルラベル／土台素材カード／表面仕上げカード
   ========================================================================== */
.subsection-label {
  display: block;
  width: max-content;
  margin: 0 auto 22px;
  padding: 9px 22px;
  border-radius: 999px;
  background-color: var(--color-gold);
  color: var(--color-white);
  font-family: var(--font-en);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
}

.subsection-label--spaced {
  margin-top: 70px;
}

.subsection-heading {
  font-family: var(--font-serif);
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-align: center;
  color: var(--color-text);
  margin-bottom: 16px;
}

.subsection-heading--spaced {
  margin-top: 70px;
}

.subsection-lead {
  max-width: 640px;
  margin: 0 auto 40px;
  text-align: center;
  font-size: 0.875rem;
  line-height: 2;
  color: var(--color-warmgray);
}

.finish-card__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}

@media (min-width: 768px) {
  .finish-card__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.finish-card {
  background-color: var(--color-white);
  box-shadow: var(--shadow-soft);
  border-top: 3px solid var(--color-gold);
  padding: 34px 30px;
}

.finish-card__title {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 14px;
}

.finish-card__badge {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 12px;
  border-radius: 999px;
  background-color: var(--color-pink-pale);
  color: var(--color-pink);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  vertical-align: middle;
}

.finish-card__text {
  font-size: 0.875rem;
  line-height: 2;
  color: var(--color-warmgray);
  margin-bottom: 22px;
}

.finish-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.finish-card__tag {
  padding: 6px 16px;
  border-radius: 999px;
  background-color: var(--color-pink-pale);
  color: var(--color-gold-dark);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* ==========================================================================
   37. 選ばれる理由（カルプ文字ページ）
   ゴールドの通し番号付き2×2カード
   ========================================================================== */
.reason-card__num {
  font-family: var(--font-en);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--color-gold);
  margin-bottom: 28px;
}

.reason-card__title {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 14px;
}

.reason-card__text {
  font-size: 0.875rem;
  line-height: 2;
  color: var(--color-warmgray);
}

/* ==========================================================================
   38. プロの施工にお任せ（カルプ文字ページ）
   チェック付きピル3つ＋下部の横長画像
   ========================================================================== */
.check-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-bottom: 44px;
}

.check-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  background-color: var(--color-white);
  box-shadow: var(--shadow-soft);
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
}

.check-pill__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: var(--color-gold);
}

.check-pill__icon svg {
  width: 13px;
  height: 13px;
  stroke: var(--color-white);
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ==========================================================================
   39. 見た目で選ぶ5つの仕様（アクリルプレート看板ページ）
   通し番号＋見出し、画像2枚＋説明文を横並びにした縦積みリスト
   ========================================================================== */
.spec-row__list {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.spec-row {
  background-color: var(--color-white);
  box-shadow: var(--shadow-soft);
  padding: 36px 32px;
}

.spec-row__header {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: 22px;
}

.spec-row__num {
  font-family: var(--font-en);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-gold);
}

.spec-row__title {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text);
}

.spec-row__divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin-bottom: 28px;
}

.spec-row__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
}

@media (min-width: 860px) {
  .spec-row__body {
    grid-template-columns: minmax(0, 480px) 1fr;
    gap: 40px;
    align-items: center;
  }
}

.spec-row__text {
  font-size: 0.875rem;
  line-height: 2;
  color: var(--color-warmgray);
  margin-bottom: 18px;
}

.spec-row__text:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   40. オーダーサイズ販売の案内バナー（アクリルプレート看板ページ）
   グラデーション帯＋テキスト＋外部リンクボタン
   ========================================================================== */
.promo-banner {
  padding: 56px 40px;
  background: linear-gradient(
    135deg,
    var(--color-pink) 0%,
    #dcb6ae 45%,
    var(--color-gold) 100%
  );
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  gap: 30px;
}

@media (min-width: 860px) {
  .promo-banner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
  }
}

.promo-banner__label {
  font-family: var(--font-en);
  font-size: 0.75rem;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  color: var(--color-white);
  opacity: 0.85;
  margin-bottom: 16px;
}

.promo-banner__title {
  font-family: var(--font-serif);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 20px;
}

.promo-banner__text {
  font-size: 0.875rem;
  line-height: 2;
  margin-bottom: 14px;
}

.promo-banner__text:last-of-type {
  margin-bottom: 0;
}

.promo-banner__cta {
  flex-shrink: 0;
}

/* ==========================================================================
   41. 素材の種類（店頭幕ページ）
   type-cardの3カラム版＋チェックリスト／ハイライト footer
   ========================================================================== */
.subsection-lead__num {
  font-family: var(--font-en);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-gold);
  margin-right: 12px;
}

.type-card__grid--three {
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .type-card__grid--three {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .type-card__grid--three {
    grid-template-columns: repeat(3, 1fr);
  }
}

.type-card__list {
  list-style: none;
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.type-card__list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  color: var(--color-text);
}

.type-card__list svg {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  stroke: var(--color-gold);
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.type-card__highlight {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 12px 16px;
  background-color: var(--color-pink-pale);
  color: var(--color-gold-dark);
  font-size: 0.8125rem;
  font-weight: 600;
}

.type-card__highlight svg {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  stroke: var(--color-gold-dark);
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ==========================================================================
   42. atelier CUVICの強み（他社比較表）
   印刷通販との違いを見せる比較テーブル
   ========================================================================== */
.compare-table__wrap {
  overflow-x: auto;
}

.compare-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.compare-table th,
.compare-table td {
  padding: 20px 24px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--color-border);
}

.compare-table thead th {
  background-color: var(--color-text);
  color: var(--color-white);
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.compare-table thead th:last-child {
  background-color: var(--color-gold-dark);
}

.compare-table tbody th {
  font-weight: 600;
  color: var(--color-text);
  background-color: var(--color-offwhite);
}

.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td {
  border-bottom: none;
}

.compare-table__no {
  color: var(--color-warmgray);
}

.compare-table__yes {
  color: var(--color-gold-dark);
  font-weight: 600;
  background-color: var(--color-pink-pale);
}

/* ==========================================================================
   43. 数量別価格表（のぼり旗ページ）
   規格キャプション＋価格表2種＋注意書きリスト
   ========================================================================== */
.price-spec-caption {
  font-size: 0.9375rem;
  line-height: 1.9;
  color: var(--color-text);
  margin-bottom: 20px;
}

.price-spec-caption strong {
  font-weight: 600;
  color: var(--color-gold-dark);
}

.price-qty-table {
  margin-bottom: 36px;
}

.price-qty-table:last-of-type {
  margin-bottom: 0;
}

.price-qty-table .spec-price th,
.price-qty-table .spec-price td {
  text-align: center;
  white-space: nowrap;
}

.price-qty-table .spec-price tbody th {
  font-size: 0.8125rem;
}

.price-qty-table .spec-price tbody td {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-gold-dark);
}

.price-qty-notes {
  margin-top: 40px;
  list-style: none;
  font-size: 0.8125rem;
  line-height: 2;
  color: var(--color-warmgray);
}

/* ==========================================================================
   44. のぼり旗の設置について（のぼり旗ページ）
   丸番号付きの縦積みカードリスト
   ========================================================================== */
.point-card__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 40px;
}

@media (min-width: 860px) {
  .point-card__list {
    grid-template-columns: repeat(3, 1fr);
  }
}

.point-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 30px 32px;
  background-color: var(--color-white);
  box-shadow: var(--shadow-soft);
}

.point-card__num {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-pink), var(--color-gold));
  color: var(--color-white);
  font-family: var(--font-en);
  font-size: 1.0625rem;
  font-weight: 600;
  box-shadow: var(--shadow-soft);
}

.point-card__body {
  flex: 1;
}

.point-card__title {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 12px;
}

.point-card__text {
  font-size: 0.875rem;
  line-height: 2;
  color: var(--color-warmgray);
}

/* ==========================================================================
   45. 発光の種類（ハイブリッドサインページ）
   ブリック調の暗い背景で発光の見え方を対比させるセクション
   ========================================================================== */
.section--dark {
  background-color: #1a1714;
  background-image:
    linear-gradient(rgba(15, 12, 10, 0.82), rgba(15, 12, 10, 0.82)),
    repeating-linear-gradient(0deg, #2a2320 0 46px, #221c19 46px 48px),
    repeating-linear-gradient(90deg, #2a2320 0 92px, #221c19 92px 94px);
}

.section--dark .section-title__en {
  color: var(--color-white);
}

.section--dark .section-title__ja {
  color: var(--color-gold);
}

.section--dark .section-title::after {
  background-color: var(--color-gold);
}

.section--dark .section-lead {
  color: rgba(255, 255, 255, 0.75);
}

.section--dark .intro__title {
  color: var(--color-white);
}

.section--dark .intro__text {
  color: rgba(255, 255, 255, 0.75);
}

.section--dark .value {
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: none;
}

.section--dark .value:hover {
  border-color: var(--color-gold);
}

.section--dark .value__title {
  color: var(--color-white);
}

.section--dark .value__text {
  color: rgba(255, 255, 255, 0.75);
}

/* --- パンくずリスト（ダーク版） --- */
.breadcrumb--dark {
  background-color: #1a1714;
  color: rgba(255, 255, 255, 0.6);
}

.breadcrumb--dark [aria-current="page"] {
  color: var(--color-white);
}

.glow-types__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

.glow-type__photo {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.06);
  margin-bottom: 22px;
}

.glow-type__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.glow-type__title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-gold);
  margin-bottom: 12px;
}

.glow-type__text {
  font-size: 0.875rem;
  line-height: 2;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 24px;
}

.glow-type__variant-labels {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 10px;
}

.glow-type__variant-label {
  display: block;
  text-align: center;
  font-family: var(--font-serif);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.6);
}

.glow-type__variant-photo {
  aspect-ratio: 4 / 3;
}

.glow-type__variant-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (min-width: 768px) {
  .glow-types__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 60px 40px;
  }
}

/* --- 発光の種類：詳細（正面発光／裏板側面発光） --- */
.glow-detail {
  max-width: 720px;
  margin: 0 auto;
}

.glow-detail + .glow-detail {
  margin-top: 72px;
}

.glow-detail__title {
  text-align: center;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  font-family: var(--font-serif);
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: 24px;
}

.glow-detail__lead {
  text-align: center;
  font-size: 0.875rem;
  line-height: 2;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 32px;
}

.glow-detail__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.glow-detail__item {
  margin: 0;
}

.glow-detail__photo {
  aspect-ratio: 4 / 3;
  background-color: rgba(255, 255, 255, 0.06);
  margin-bottom: 12px;
}

.glow-detail__label + .glow-detail__photo {
  background-color: transparent;
}

.glow-detail__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.glow-detail__label {
  display: block;
  text-align: center;
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  color: var(--color-white);
  margin-bottom: 12px;
}

/* --- ネオンタイプ（ハイブリッドサインページ） --- */
.neon-heading {
  text-align: center;
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: 26px;
}

.neon-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 48px;
}

.neon-gallery__item {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.06);
}

.neon-gallery__item--c,
.neon-gallery__item--d {
  background-color: transparent;
}

.neon-gallery__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 768px) {
  .neon-gallery {
    grid-template-columns: 9fr 4fr;
    grid-template-rows: 2fr 1fr;
  }

  .neon-gallery__item {
    aspect-ratio: auto;
  }

  .neon-gallery__item--a {
    grid-column: 1;
    grid-row: 1;
  }

  .neon-gallery__item--b {
    grid-column: 2;
    grid-row: 1;
  }

  .neon-gallery__item--c {
    grid-column: 1;
    grid-row: 2;
  }

  .neon-gallery__item--d {
    grid-column: 2;
    grid-row: 2;
  }
}

/* --- リアルネオンタイプ（ハイブリッドサインページ） --- */
.real-neon-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 48px;
}

.real-neon-gallery__item {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.06);
}

.real-neon-gallery__item:nth-child(2) {
  aspect-ratio: 4 / 3;
  background-color: transparent;
}

.real-neon-gallery__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 768px) {
  .real-neon-gallery {
    grid-template-columns: 3fr 4fr;
    align-items: stretch;
  }
}

/* --- ネオン管とLEDネオンサインの比較（ハイブリッドサインページ） --- */
.neon-compare-wrap {
  max-width: 900px;
  margin: 0 auto;
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.neon-compare-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.neon-compare-table__caption {
  caption-side: top;
  padding: 20px;
  color: var(--color-white);
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: 600;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.neon-compare-table th,
.neon-compare-table td {
  padding: 16px 14px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background-color: transparent;
}

.neon-compare-table thead th {
  color: var(--color-gold);
  font-family: var(--font-serif);
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.04em;
}

.neon-compare-table tbody th {
  color: var(--color-gold);
  font-family: var(--font-serif);
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}

.neon-compare-table tbody td {
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
  line-height: 1.7;
}

.neon-compare-table tbody td:last-child {
  text-align: left;
}

/* ==========================================================================
   46. atelier CUVICの強み（看板デザインページ）
   実績バナー＋画像左右交互のポイント紹介
   ========================================================================== */
.achievement {
  position: relative;
  max-width: 640px;
  margin: 0 auto 88px;
  padding: 8px 76px;
  text-align: center;
}

.achievement__label {
  font-family: var(--font-serif);
  font-size: 0.875rem;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  color: var(--color-text);
  margin-bottom: 10px;
}

.achievement__label::before,
.achievement__label::after {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  margin: 0 12px 4px;
  background-color: var(--color-gold);
  vertical-align: middle;
}

.achievement__number {
  font-family: var(--font-en);
  font-size: clamp(2.75rem, 8vw, 3.75rem);
  font-weight: 600;
  line-height: 1.1;
  color: var(--color-gold-dark);
}

.achievement__unit {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--color-text);
  margin: 0 6px;
}

.achievement__text {
  margin-top: 14px;
  font-size: 0.8125rem;
  line-height: 2;
  color: var(--color-warmgray);
}

@media (max-width: 639px) {
  .achievement {
    padding-inline: 44px;
  }
}

/* --- 強み一覧（画像左右交互配置） --- */
.strengths {
  display: flex;
  flex-direction: column;
  gap: 120px;
}

.strength {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
}

.strength__photo {
  border-radius: 0;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.strength__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.strength__num {
  display: block;
  font-family: var(--font-en);
  font-size: 2.25rem;
  font-weight: 300;
  color: var(--color-pink);
  line-height: 1;
  margin-bottom: 10px;
}

.strength__lead {
  font-family: var(--font-en);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  color: var(--color-gold-dark);
  margin-bottom: 10px;
}

.strength__title {
  font-family: var(--font-serif);
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.7;
  margin-bottom: 18px;
}

.strength__text {
  font-size: 0.875rem;
  line-height: 2;
  color: var(--color-warmgray);
  margin-bottom: 26px;
}

.strength__point {
  position: relative;
  padding: 30px 24px 22px;
  border: 1px solid var(--color-pink);
  border-radius: var(--radius-lg);
}

.strength__point-tag {
  position: absolute;
  top: -14px;
  left: 24px;
  padding: 6px 16px;
  border-radius: 999px;
  background-color: var(--color-pink);
  color: var(--color-white);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.strength__point-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.strength__point-list li {
  position: relative;
  padding-left: 26px;
  font-size: 0.8125rem;
  line-height: 1.9;
  color: var(--color-text);
}

.strength__point-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 14px;
  height: 8px;
  border-left: 2px solid var(--color-gold-dark);
  border-bottom: 2px solid var(--color-gold-dark);
  transform: rotate(-45deg);
}

@media (min-width: 768px) {
  .strength {
    grid-template-columns: 1fr 1fr;
    gap: 52px;
  }

  .strength--reverse .strength__photo {
    order: 2;
  }

  .strength--reverse .strength__body {
    order: 1;
  }
}

/* --- 自社工場での製作（看板デザインページ） --- */
.craft-heading {
  text-align: center;
  font-family: var(--font-serif);
  font-size: clamp(1.125rem, 4vw, 1.5rem);
  font-weight: 600;
  line-height: 1.8;
  color: var(--color-gold-dark);
  margin-bottom: 48px;
}

.craft-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

.craft-gallery__item {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.craft-gallery__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 768px) {
  .craft-gallery {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
}

/* --- ご注文の流れ（看板デザインページ） --- */
.order-flow {
  max-width: 760px;
  margin: 0 auto;
}

.order-flow__nav {
  justify-content: center;
}

.order-flow__panel {
  display: none;
}

.order-flow__panel.is-active {
  display: block;
}

.order-flow__steps {
  display: flex;
  flex-direction: column;
}

.order-flow__step {
  position: relative;
  display: flex;
  gap: 22px;
  padding-bottom: 34px;
}

.order-flow__step:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 40px;
  left: 19px;
  bottom: 4px;
  width: 1px;
  border-left: 1px dashed var(--color-pink);
}

.order-flow__num {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-pink), var(--color-gold));
  color: var(--color-white);
  font-family: var(--font-en);
  font-size: 1.0625rem;
  font-weight: 600;
  box-shadow: var(--shadow-soft);
  z-index: 1;
}

.order-flow__body {
  flex: 1;
  padding-top: 6px;
}

.order-flow__text {
  font-size: 0.875rem;
  line-height: 1.9;
  color: var(--color-text);
}

.order-flow__text a {
  color: var(--color-gold-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.order-flow__hint {
  margin-top: 10px;
  font-size: 0.8125rem;
  line-height: 1.8;
  color: var(--color-warmgray);
}

.order-flow__note {
  margin-top: 14px;
  padding: 16px 18px;
  background-color: var(--color-pink-pale);
  font-size: 0.8125rem;
  line-height: 1.8;
  color: var(--color-text);
}

.order-flow__delivery {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 8px;
  padding: 30px 28px;
  background-color: var(--color-white);
  box-shadow: var(--shadow-soft);
}

.order-flow__delivery-badge {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background-color: var(--color-gold);
  color: var(--color-white);
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.order-flow__delivery-body .order-flow__text {
  margin-bottom: 8px;
}

.order-flow__caveat {
  font-size: 0.75rem;
  line-height: 1.8;
  color: var(--color-warmgray);
}

@media (max-width: 479px) {
  .order-flow__delivery {
    flex-direction: column;
    text-align: center;
  }
}

/* --- ラフスケッチが無くてもご依頼可能（看板デザインページ） --- */
.request-way__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

.request-way__card {
  position: relative;
  margin: 0;
}

.request-way__photo {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--color-offwhite);
}

.request-way__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.request-way__badge {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  border: 4px solid var(--color-white);
  box-shadow: var(--shadow-soft);
  text-align: center;
  font-family: var(--font-serif);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-white);
}

.request-way__badge--text {
  background: linear-gradient(135deg, var(--color-gold-dark), var(--color-gold));
}

.request-way__badge--gallery {
  background: linear-gradient(135deg, var(--color-pink), var(--color-gold));
}

.request-way__text {
  margin-top: 18px;
  font-size: 0.8125rem;
  line-height: 1.9;
  color: var(--color-warmgray);
}

.request-way__cta {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}

@media (min-width: 768px) {
  .request-way__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }
}

/* --- 看板デザイン集（看板デザインページ） --- */
.design-gallery__panel {
  display: none;
}

.design-gallery__panel.is-active {
  display: block;
}

.design-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.design-gallery__tile {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.design-gallery__tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.design-gallery__num {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  padding: 4px 10px;
  background-color: var(--color-gold);
  color: var(--color-white);
  font-family: var(--font-serif);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
}

@media (min-width: 768px) {
  .design-gallery {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
}

/* --- データ作成料金の目安（看板デザインページ） --- */
.data-price {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  gap: 20px;
}

.data-price__scale {
  flex-shrink: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 50px 0 26px;
}

.data-price__scale-label {
  font-family: var(--font-serif);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-gold-dark);
}

.data-price__scale-line {
  flex: 1;
  width: 2px;
  margin: 12px 0;
  background: linear-gradient(var(--color-gold), var(--color-pink));
  position: relative;
}

.data-price__scale-line::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--color-pink);
  border-bottom: 2px solid var(--color-pink);
  transform: translateX(-50%) rotate(45deg);
}

.data-price__table {
  flex: 1;
  min-width: 0;
}

.data-price__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--color-gold);
}

.data-price__head-item {
  font-family: var(--font-serif);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text);
}

.data-price__head-item small {
  display: inline-block;
  margin-left: 6px;
  font-size: 0.6875rem;
  font-weight: 400;
  color: var(--color-warmgray);
}

.data-price__row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 0;
  border-bottom: 1px solid var(--color-border);
}

.data-price__row:last-of-type {
  border-bottom: none;
}

.data-price__label {
  display: inline-block;
  align-self: flex-start;
  padding: 9px 18px;
  background-color: var(--color-gold);
  color: var(--color-white);
  font-family: var(--font-serif);
  font-size: 0.8125rem;
  font-weight: 600;
}

.data-price__price {
  font-family: var(--font-en);
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--color-gold-dark);
}

.data-price__price small {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--color-warmgray);
  margin-left: 4px;
}

.data-price__note {
  margin-top: 20px;
  text-align: right;
  font-size: 0.75rem;
  color: var(--color-warmgray);
}

@media (min-width: 640px) {
  .data-price__row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

@media (min-width: 768px) {
  .data-price__scale {
    display: flex;
  }
}

/* --- 看板の種類や仕様の相談について（看板デザインページ） --- */
.consult-heading {
  text-align: center;
  font-family: var(--font-serif);
  font-size: clamp(1.125rem, 4vw, 1.5rem);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 40px;
}

.consult-heading::before,
.consult-heading::after {
  content: "";
  display: inline-block;
  width: 32px;
  height: 1px;
  margin: 0 16px 5px;
  background-color: var(--color-gold);
  vertical-align: middle;
}

.consult-text {
  font-size: 0.875rem;
  line-height: 2.2;
  color: var(--color-warmgray);
  text-align: center;
}

.consult-text p + p {
  margin-top: 26px;
}

.consult-text__quote {
  padding: 22px 28px;
  background-color: var(--color-offwhite);
  color: var(--color-text);
  font-family: var(--font-serif);
  font-weight: 500;
}

/* FAQ内「データ作成料金の目安」リンクの色 */
#faq-panel-1 a[href="#data-price-title"] {
  color: var(--color-pink);
}

/* --- 拠点マップ（会社概要ページ／ドット絵の日本列島） --- */
.japan-map-section {
  background-color: var(--color-pink-pale);
}

.japan-map {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
  justify-items: center;
}

.japan-map__figure {
  display: flex;
  justify-content: center;
}

.japan-map__svg {
  width: 100%;
  max-width: 420px;
  height: auto;
}

.japan-map__points {
  display: grid;
  gap: 18px;
  width: 100%;
  max-width: 420px;
}

.japan-map__point {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--color-text);
}

.japan-map__check {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  fill: none;
  stroke: var(--color-gold-dark);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.japan-map__dot--a {
  fill: rgba(58, 46, 46, 0.16);
}

.japan-map__dot--b {
  fill: rgba(58, 46, 46, 0.3);
}

.japan-map__halo {
  fill: var(--color-gold);
  opacity: 0.28;
}

.japan-map__pin {
  fill: var(--color-gold-dark);
  stroke: var(--color-white);
  stroke-width: 2;
}

/* text-anchor は SVG 側で拠点ごとに指定（ラベル同士の重なりを避けるため） */
.japan-map__pin-label {
  fill: var(--color-text);
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: 600;
}

@media (min-width: 768px) {
  /* 左：日本列島／右：対応ポイント */
  .japan-map {
    grid-template-columns: 460px 1fr;
    gap: 64px;
    justify-items: start;
    max-width: 920px;
    margin-inline: auto;
  }

  .japan-map__figure {
    width: 100%;
  }

  .japan-map__svg {
    max-width: 460px;
  }
}

/* --- 看板デザイン／施工事例への横長バナー（OTHER SIGNSの下） --- */
.link-banners {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  margin-top: 10px;
}

.link-banner {
  position: relative;
  display: block;
  aspect-ratio: 3 / 1;
  overflow: hidden;
}

.link-banner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}

.link-banner:hover img,
.link-banner:focus-visible img {
  transform: scale(1.06);
}

.link-banner__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px 28px;
  background: linear-gradient(90deg, rgba(58, 46, 46, 0.78), rgba(58, 46, 46, 0.2));
}

.link-banner__label {
  font-family: var(--font-en);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  color: var(--color-gold);
  margin-bottom: 8px;
}

.link-banner__title {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: 12px;
}

.link-banner__more {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--color-white);
}

@media (min-width: 640px) {
  .link-banners {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .link-banner {
    aspect-ratio: 16 / 7;
  }
}