/* =========================================================
   style.css
   機能目的：料金表LP全体の共通レイアウト、余白、基本部品、テーマ別JS補助表示を管理する
   ========================================================= */

/* 機能目的：全要素の余白計算を安定させ、表示崩れを防ぐ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 機能目的：ページ内リンクの移動をなめらかにする */
html {
  scroll-behavior: smooth;
}

/* 機能目的：LP全体の基本文字、背景、横スクロール防止を設定する */
body {
  margin: 0;
  min-width: 320px;
  color: #111827;
  background: #ffffff;
  font-family:
    "Noto Sans JP",
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    Meiryo,
    sans-serif;
  line-height: 1.8;
  overflow-x: hidden;
}

/* 機能目的：画像が親要素からはみ出さないようにする */
img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* 機能目的：リンクの下線と色継承を整える */
a {
  color: inherit;
  text-decoration: none;
}

/* 機能目的：ボタンの標準装飾差をなくし、テーマ側で制御しやすくする */
button {
  font: inherit;
  cursor: pointer;
}

/* 機能目的：フォーカス時に操作位置が分かるようにする */
a:focus-visible,
button:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 4px;
}

/* 機能目的：背景装飾を画面固定で配置する */
.tplp-bg-decoration {
  position: fixed;
  inset: 0;
  z-index: -5;
  pointer-events: none;
  overflow: hidden;
}

/* 機能目的：共通の光の玉を背景に表示する */
.tplp-bg-orb {
  position: absolute;
  width: 360px;
  height: 360px;
  border-radius: 999px;
  filter: blur(20px);
  opacity: 0.42;
}

/* 機能目的：背景装飾1つ目の位置を設定する */
.tplp-bg-orb-01 {
  top: -140px;
  left: -120px;
}

/* 機能目的：背景装飾2つ目の位置を設定する */
.tplp-bg-orb-02 {
  top: 26%;
  right: -160px;
}

/* 機能目的：背景装飾3つ目の位置を設定する */
.tplp-bg-orb-03 {
  bottom: -180px;
  left: 20%;
}

/* 機能目的：ヘッダーを上部に固定し、全テーマで共通の土台にする */
.tplp-header {
  position: sticky;
  top: 0;
  z-index: 50;
  overflow: hidden;
}

/* 機能目的：ヘッダー内に横切る光を出すための疑似要素を用意する */
.tplp-header::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -50%;
  width: 40%;
  pointer-events: none;
  transform: skewX(-20deg);
  animation: tplpHeaderShine 8s ease-in-out infinite;
}

/* 機能目的：ヘッダー内の要素を横並びで整列する */
.tplp-header-inner {
  position: relative;
  z-index: 1;
  width: min(1180px, calc(100% - 32px));
  min-height: 82px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
}

/* 機能目的：ロゴを横並びで表示する */
.tplp-logo-link,
.tplp-footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  font-weight: 800;
  letter-spacing: 0.04em;
}

/* 機能目的：ロゴ画像の横伸びを防ぎ、全ページで同じサイズにする */
.tplp-logo-image {
  width: 48px;
  height: 48px;
  object-fit: contain;
  flex: 0 0 auto;
}

/* 機能目的：ロゴ文字の折り返し崩れを防ぐ */
.tplp-logo-text {
  white-space: nowrap;
}

/* 機能目的：ナビゲーションを中央寄せの横並びにする */
.tplp-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-left: auto;
}

/* 機能目的：ナビゲーションリンクのクリック範囲を確保する */
.tplp-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 13px;
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
}

/* 機能目的：ヘッダー右側の操作要素を横並びにする */
.tplp-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 機能目的：問い合わせボタンとCTAボタンの共通形状を設定する */
.tplp-contact-btn,
.tplp-cta-button,
.tplp-secondary-button {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0.03em;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    opacity 0.25s ease;
}

/* 機能目的：ボタンホバー時に少し浮かせる */
.tplp-contact-btn:hover,
.tplp-cta-button:hover,
.tplp-secondary-button:hover {
  transform: translateY(-2px);
}

/* 機能目的：問い合わせボタン上に流れる光を表示する */
.tplp-contact-btn::after,
.tplp-cta-button::after {
  content: "";
  position: absolute;
  inset: -40% auto -40% -55%;
  width: 38%;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.5),
    transparent
  );
  transform: skewX(-18deg);
  animation: tplpButtonShine 4.6s ease-in-out infinite;
}

/* 機能目的：テーマ切替ボタンの外枠を整える */
.tplp-theme-switcher {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
}

/* 機能目的：テーマ切替ボタンの基本形状を統一する */
.tplp-theme-button {
  border: 0;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-size: 0.82rem;
  font-weight: 800;
}

/* 機能目的：メイン領域の重なり順を安定させる */
.tplp-main {
  position: relative;
  z-index: 1;
}

/* 機能目的：ファーストビューの基本余白を設定する */
.tplp-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(72px, 9vw, 128px) 0 clamp(58px, 7vw, 96px);
  isolation: isolate;
}

/* 機能目的：TOP背景画像を絶対配置で差し込み、既存レイアウトの余白や配置を変えずに表示する */
.tplp-hero-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: right center;
  background-size: contain;
  opacity: var(--tplp-hero-bg-opacity, 0.28);
  filter: var(--tplp-hero-bg-filter, none);
  transform: translateZ(0);
}

/* 機能目的：TOP背景画像の上に薄い保護レイヤーを重ね、文字の読みやすさを維持する */
.tplp-hero-background::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--tplp-hero-bg-overlay, transparent);
}

/* 機能目的：ファーストビュー中央コンテンツの最大幅を設定する */
.tplp-hero-inner {
  position: relative;
  z-index: 2;
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
}

/* 機能目的：小見出しを全テーマ共通のアクセントとして表示する */
.tplp-kicker {
  margin: 0 0 12px;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* 機能目的：ファーストビュータイトルの基本サイズを設定する */
.tplp-hero-title {
  margin: 0;
  font-size: clamp(2.5rem, 6vw, 5.2rem);
  line-height: 1.08;
  letter-spacing: 0.02em;
}

/* 機能目的：ファーストビュー説明文の読みやすさを整える */
.tplp-hero-lead {
  max-width: 620px;
  margin: 22px 0 0;
  font-size: clamp(1rem, 1.7vw, 1.22rem);
  font-weight: 600;
}

/* 機能目的：ファーストビューのボタンを横並びにする */
.tplp-hero-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 34px;
}

/* 機能目的：サブボタンの境界線を共通設定する */
.tplp-secondary-button {
  border: 1px solid currentColor;
  background: transparent;
}

/* 機能目的：ヒーロー料金パネルの基本形状を設定する */
.tplp-hero-panel {
  position: relative;
}

/* 機能目的：ヒーローパネルのラベルを整える */
.tplp-panel-label {
  margin: 0 0 20px;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* 機能目的：ヒーロー料金行を左右配置にする */
.tplp-hero-price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid currentColor;
}

/* 機能目的：ヒーロー料金の項目名を太字にする */
.tplp-hero-price-row span {
  font-weight: 800;
}

/* 機能目的：ヒーロー料金の金額を目立たせる */
.tplp-hero-price-row strong {
  font-size: clamp(1.55rem, 3vw, 2.4rem);
  line-height: 1;
  white-space: nowrap;
}

/* 機能目的：ヒーローパネル注記の余白を整える */
.tplp-panel-note {
  margin: 22px 0 0;
  font-size: 0.96rem;
}

/* 機能目的：各セクションの基本余白を統一する */
.tplp-section {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: clamp(56px, 7vw, 92px) 0;
}

/* 機能目的：セクション見出し周辺の余白を統一する */
.tplp-section-head {
  margin-bottom: clamp(28px, 4vw, 46px);
}

/* 機能目的：セクションタイトルの基本サイズを設定する */
.tplp-section-title {
  position: relative;
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.16;
  letter-spacing: 0.03em;
}

/* 機能目的：セクションタイトル下に共通のアクセント線を表示する */
.tplp-section-title::after {
  content: "";
  display: block;
  width: 78px;
  height: 4px;
  margin-top: 18px;
  border-radius: 999px;
}

/* 機能目的：セクション説明文の横幅を制御する */
.tplp-section-lead {
  max-width: 720px;
  margin: 22px 0 0;
  font-size: 1rem;
  font-weight: 600;
}

/* 機能目的：カードの基本余白と角丸を設定する */
.tplp-card,
.tplp-maintenance-card,
.tplp-feature-card,
.tplp-cta {
  position: relative;
  padding: clamp(22px, 3vw, 34px);
}

/* 機能目的：カードのはみ出しを抑え、疑似要素の装飾をカード内に収める */
.tplp-card,
.tplp-maintenance-card,
.tplp-feature-card {
  overflow: hidden;
}

/* 機能目的：カードのホバーアニメーションを共通化する */
.tplp-card,
.tplp-maintenance-card,
.tplp-feature-card {
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

/* 機能目的：カードホバー時に少し浮かせる */
.tplp-card:hover,
.tplp-maintenance-card:hover,
.tplp-feature-card:hover {
  transform: translateY(-5px);
}

/* 機能目的：カード上部のラベルを整える */
.tplp-card-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 12px;
  margin-bottom: 16px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* 機能目的：カードタイトルの基本形を設定する */
.tplp-card-title {
  margin: 0;
  font-size: clamp(1.22rem, 2.3vw, 1.75rem);
  line-height: 1.35;
}

/* 機能目的：カード価格の基本形を設定する */
.tplp-card-price {
  margin: 20px 0 0;
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1.1;
  font-weight: 950;
  letter-spacing: 0.02em;
}

/* 機能目的：カード本文の基本形を設定する */
.tplp-card-text {
  margin: 18px 0 0;
  font-weight: 600;
}

/* 機能目的：カード内リストの表示を整える */
.tplp-card-list {
  display: grid;
  gap: 8px;
  padding: 0;
  margin: 22px 0 0;
  list-style: none;
}

/* 機能目的：カード内リストにチェック風の装飾を付ける */
.tplp-card-list li {
  position: relative;
  padding-left: 1.4em;
  font-weight: 700;
}

/* 機能目的：カード内リストの先頭装飾を表示する */
.tplp-card-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 900;
}

/* 機能目的：基本プランのカードを通常は2列で表示する */
.tplp-basic-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 28px);
}

/* 機能目的：オプションカードを通常は2列で表示する */
.tplp-option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 26px);
}

/* 機能目的：備考カードを通常は3列で表示する */
.tplp-note-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 24px);
}

/* 機能目的：対応内容カードを通常は4列で表示する */
.tplp-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 22px);
}

/* 機能目的：対応内容カードのアイコンを、絵文字ではなく上質なアイコンフレームで表示する */
.tplp-feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin-bottom: 18px;
  border-radius: 22px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(241, 245, 249, 0.92));
  box-shadow:
    0 14px 32px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
  color: currentColor;
}

/* 機能目的：対応内容カードのSVGアイコンを統一感のある線画で表示する */
.tplp-feature-icon svg {
  width: 34px;
  height: 34px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 機能目的：SVGアイコン内の塗り要素を現在色で表示する */
.tplp-feature-icon .tplp-feature-icon-fill {
  fill: currentColor;
  stroke: none;
}

/* 機能目的：対応内容カードのタイトル余白を整える */
.tplp-feature-card h3 {
  margin: 0;
  font-size: 1.15rem;
}

/* 機能目的：対応内容カードの本文余白を整える */
.tplp-feature-card p {
  margin: 12px 0 0;
  font-weight: 600;
}

/* 機能目的：保守・運用の正式名称を少し強調する */
.tplp-support-name {
  margin: 18px 0 0;
  font-weight: 900;
}

/* 機能目的：CTAセクションの横幅と余白を整える */
.tplp-cta-section {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: clamp(54px, 7vw, 92px) 0 clamp(70px, 8vw, 110px);
}

/* 機能目的：CTA内の要素を中央寄せにする */
.tplp-cta {
  overflow: hidden;
  text-align: center;
}

/* 機能目的：CTAタイトルのサイズを設定する */
.tplp-cta-title {
  margin: 0;
  font-size: clamp(2rem, 4.5vw, 3.8rem);
  line-height: 1.16;
}

/* 機能目的：CTA本文の読みやすさを整える */
.tplp-cta-text {
  max-width: 720px;
  margin: 20px auto 0;
  font-weight: 600;
}

/* 機能目的：CTAボタンの上余白を確保する */
.tplp-cta .tplp-cta-button {
  margin-top: 30px;
}

/* 機能目的：フッターの基本余白を設定する */
.tplp-footer {
  padding: 34px 0;
}

/* 機能目的：フッター内の要素を左右配置にする */
.tplp-footer-inner {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* 機能目的：フッターリンクを横並びにする */
.tplp-footer-links {
  display: flex;
  align-items: center;
  gap: 18px;
  font-weight: 700;
}

/* 機能目的：スクロール表示前の要素を自然に隠す */
.tplp-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

/* 機能目的：スクロール表示後の要素をふわっと表示する */
.tplp-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   テーマ別JS補助
   機能目的：JSで追加されるテーマ専用演出を安全に表示・非表示する
   ========================================================= */

/* 機能目的：高級感テーマ以外では高級感用キラキラレイヤーを表示しない */
body:not(.tplp-theme-luxury):not(.theme-luxury):not([data-theme="luxury"]) .tplp-luxury-sparkle-layer {
  display: none !important;
}

/* 機能目的：モダン・上品テーマでは高級感用キラキラレイヤーを明示的に非表示にする */
body.tplp-theme-modern .tplp-luxury-sparkle-layer,
body.theme-modern .tplp-luxury-sparkle-layer,
body[data-theme="modern"] .tplp-luxury-sparkle-layer,
body.tplp-theme-elegant .tplp-luxury-sparkle-layer,
body.theme-elegant .tplp-luxury-sparkle-layer,
body[data-theme="elegant"] .tplp-luxury-sparkle-layer {
  display: none !important;
}

/* 機能目的：古いモダン粒子レイヤーが残っても表示しない */
.tplp-modern-particle-layer {
  display: none !important;
}

/* 機能目的：古い上品金粉レイヤーが残っても表示しない */
.tplp-elegant-dust-layer {
  display: none !important;
}

/* 機能目的：高級感テーマ専用のキラキラ背景レイヤーを画面全体に固定する */
.tplp-luxury-sparkle-layer {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
}

/* 機能目的：高級感テーマ専用の黒×ゴールド用キラキラを表示する */
.tplp-luxury-sparkle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: rgba(214, 177, 92, 0.9);
  box-shadow:
    0 0 8px rgba(214, 177, 92, 0.8),
    0 0 18px rgba(214, 177, 92, 0.45);
  animation: tplpLuxurySparkleFloat ease-in-out infinite;
}

/* 機能目的：モダンテーマのカード光はキラキラではなく管理画面風の薄いハイライトに限定する */
.tplp-modern-js-active .is-modern-hover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    circle at var(--tplp-pointer-x, 50%) var(--tplp-pointer-y, 50%),
    rgba(37, 99, 235, 0.16),
    transparent 34%
  );
}

/* 機能目的：モダンテーマのカード内要素をハイライトより前面に出す */
.tplp-modern-js-active .is-modern-hover > * {
  position: relative;
  z-index: 1;
}

/* 機能目的：上品テーマのカード表示を静かな案内状風にする */
.tplp-elegant-soft-entry {
  animation: tplpElegantSoftEntry 0.75s ease both;
  animation-delay: var(--tplp-elegant-delay, 0s);
}

/* 機能目的：高級感テーマ専用の有効状態で重厚感を補助する */
.tplp-luxury-js-active .tplp-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.28;
  background:
    linear-gradient(
      135deg,
      transparent,
      rgba(214, 177, 92, 0.08),
      transparent
    );
}

/* =========================================================
   アニメーション
   機能目的：共通部品とテーマ別補助演出の動きを定義する
   ========================================================= */

/* 機能目的：ヘッダーの光を横切らせる */
@keyframes tplpHeaderShine {
  0% {
    transform: translateX(0) skewX(-20deg);
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  70% {
    opacity: 1;
  }

  100% {
    transform: translateX(420%) skewX(-20deg);
    opacity: 0;
  }
}

/* 機能目的：ボタンの光を横切らせる */
@keyframes tplpButtonShine {
  0% {
    transform: translateX(0) skewX(-18deg);
    opacity: 0;
  }

  25% {
    opacity: 1;
  }

  100% {
    transform: translateX(450%) skewX(-18deg);
    opacity: 0;
  }
}

/* 機能目的：高級感テーマ専用のキラキラをゆっくり光らせる */
@keyframes tplpLuxurySparkleFloat {
  0% {
    transform: translate3d(0, 12px, 0) scale(0.7);
    opacity: 0;
  }

  30% {
    opacity: 1;
  }

  70% {
    opacity: 0.9;
  }

  100% {
    transform: translate3d(22px, -70px, 0) scale(1.15);
    opacity: 0;
  }
}

/* 機能目的：上品テーマのカードを静かに表示する */
@keyframes tplpElegantSoftEntry {
  0% {
    opacity: 0;
    transform: translateY(14px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================================
   HEROタイトル折り返し調整
   機能目的：ホームページ制作料金表の文字が「制 / 作」のように不自然な位置で折り返されるのを防ぐ
   ========================================================= */

/* 機能目的：HERO（ヒーロー）タイトル全体の日本語折り返しを安定させる */
.tplp-hero-title {
  max-width: 100%;
  word-break: keep-all;
  overflow-wrap: normal;
  line-break: strict;
  text-wrap: balance;
}

/* 機能目的：HERO（ヒーロー）タイトルを必要なテーマで「ホームページ」「制作料金表」の2行に固定する */
.tplp-hero-title-line {
  display: block;
  width: max-content;
  max-width: 100%;
  white-space: nowrap;
}

/* 機能目的：モダン・高級感テーマの2行目を少し右へ寄せ、指定の「ホームページ / 制作料金表」バランスに整える */
body.tplp-theme-modern .tplp-hero-title-line:nth-child(2),
body.theme-modern .tplp-hero-title-line:nth-child(2),
body[data-theme="modern"] .tplp-hero-title-line:nth-child(2),
body.tplp-theme-luxury .tplp-hero-title-line:nth-child(2),
body.theme-luxury .tplp-hero-title-line:nth-child(2),
body[data-theme="luxury"] .tplp-hero-title-line:nth-child(2) {
  transform: translateX(0.46em);
}

/* 機能目的：モダンテーマのHERO（ヒーロー）タイトルを2行固定でも収まりやすいサイズにする */
body.tplp-theme-modern .tplp-hero-title,
body.theme-modern .tplp-hero-title,
body[data-theme="modern"] .tplp-hero-title {
  line-height: 1.02;
}

/* 機能目的：上品テーマのHERO（ヒーロー）タイトルを1行中央で整える */
body.tplp-theme-elegant .tplp-hero-title,
body.theme-elegant .tplp-hero-title,
body[data-theme="elegant"] .tplp-hero-title {
  line-height: 1.14;
  text-align: center;
}

/* 機能目的：上品テーマではHERO（ヒーロー）タイトルを1行表示にし、現状の中央バランスを維持する */
body.tplp-theme-elegant .tplp-hero-title-line,
body.theme-elegant .tplp-hero-title-line,
body[data-theme="elegant"] .tplp-hero-title-line {
  display: inline;
  width: auto;
  transform: none;
}

/* 機能目的：高級感テーマのHERO（ヒーロー）タイトルを大きさを維持したまま自然な2行に整える */
body.tplp-theme-luxury .tplp-hero-title,
body.theme-luxury .tplp-hero-title,
body[data-theme="luxury"] .tplp-hero-title {
  line-height: 1.06;
}

/* =========================================================
   レスポンシブ
   機能目的：画面幅に応じて列数と余白を調整し、表示崩れを防ぐ
   ========================================================= */

/* 機能目的：タブレット幅では列数を減らして表示崩れを防ぐ */
@media (max-width: 960px) {
  .tplp-header-inner {
    flex-wrap: wrap;
    padding: 14px 0;
  }

  /* 機能目的：タブレット幅ではページ内ナビゲーションを4列に収め、横スクロールを発生させず全項目を表示する */
  .tplp-nav {
    order: 3;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    justify-content: stretch;
    gap: 6px;
    overflow: visible;
    padding-bottom: 0;
  }

  /* 機能目的：タブレット幅のナビゲーション文字を各列内で折り返し可能にし、画面外へのはみ出しを防ぐ */
  .tplp-nav a {
    width: 100%;
    min-width: 0;
    padding: 4px 8px;
    text-align: center;
    white-space: normal;
    line-height: 1.35;
  }

  .tplp-header-actions {
    margin-left: auto;
  }

  .tplp-basic-grid,
  .tplp-option-grid,
  .tplp-note-grid,
  .tplp-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tplp-footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* 機能目的：スマホ幅ではすべて1列化して横崩れを防ぐ */
@media (max-width: 640px) {
  .tplp-header-inner,
  .tplp-section,
  .tplp-cta-section,
  .tplp-footer-inner {
    width: min(100% - 24px, 1180px);
  }

  .tplp-header-inner {
    gap: 14px;
  }

  /* 機能目的：スマホ幅ではページ内ナビゲーションを2列2段に配置し、横スクロールなしで全項目を読みやすく表示する */
  .tplp-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  /* 機能目的：スマホ幅のナビゲーションボタンに十分な高さを確保し、文字切れと押しにくさを防ぐ */
  .tplp-nav a {
    min-height: 40px;
    padding: 5px 8px;
    font-size: 0.82rem;
  }

  .tplp-logo-text {
    font-size: 0.9rem;
  }

  .tplp-header-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    margin-left: 0;
  }

  .tplp-contact-btn,
  .tplp-cta-button,
  .tplp-secondary-button {
    width: 100%;
  }

  .tplp-theme-switcher {
    width: 100%;
    justify-content: center;
  }

  .tplp-theme-button {
    flex: 1;
    padding: 0 8px;
  }

  .tplp-hero {
    padding-top: 56px;
  }

  /* 機能目的：スマホ幅ではテーマ側の中央配置指定より優先してTOP背景画像を上端へ固定し、画像がHERO下部へ埋もれるのを防ぐ */
  html body.tplp-body .tplp-hero .tplp-hero-background {
    background-position: center top;
    background-size: contain;
    opacity: var(--tplp-hero-bg-mobile-opacity, 0.18);
  }

  .tplp-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .tplp-basic-grid,
  .tplp-option-grid,
  .tplp-note-grid,
  .tplp-feature-grid {
    grid-template-columns: 1fr;
  }

  .tplp-hero-price-row {
    flex-direction: column;
    gap: 8px;
  }

  .tplp-hero-price-row strong {
    white-space: normal;
  }

  /* 機能目的：スマホ幅では2行目の右寄せ量を抑え、タイトルの画面外はみ出しを防ぐ */
  body.tplp-theme-modern .tplp-hero-title-line:nth-child(2),
  body.theme-modern .tplp-hero-title-line:nth-child(2),
  body[data-theme="modern"] .tplp-hero-title-line:nth-child(2),
  body.tplp-theme-luxury .tplp-hero-title-line:nth-child(2),
  body.theme-luxury .tplp-hero-title-line:nth-child(2),
  body[data-theme="luxury"] .tplp-hero-title-line:nth-child(2) {
    transform: translateX(0.22em);
  }

  .tplp-footer-links {
    flex-direction: column;
    align-items: flex-start;
  }
}



/* =========================================================
   追加セクション
   機能目的：添付資料の戦略項目をLPに追加し、既存テーマのカードデザインを崩さず表示する
   ========================================================= */

/* 機能目的：選ばれる理由カードを4列で表示し、既存の対応内容カードと見た目を合わせる */
.tplp-reason-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 22px);
}

/* 機能目的：選ばれる理由の番号を小さなラベルとして表示する */
.tplp-reason-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 12px;
  margin-bottom: 16px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  border: 1px solid currentColor;
  opacity: 0.82;
}

/* 機能目的：比較表の前に自社メリットを3点で表示し、価格以外の強みを先に伝える */
.tplp-comparison-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 20px);
  margin-bottom: clamp(18px, 3vw, 28px);
}

/* 機能目的：自社メリットカードを既存デザインに馴染ませ、比較表の前段として読みやすくする */
.tplp-comparison-point {
  position: relative;
  overflow: hidden;
  padding: clamp(18px, 2.4vw, 26px);
  border-radius: 24px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(255, 255, 255, 0.52);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.06);
}

/* 機能目的：自社メリット番号を小さく表示し、カードの読み始めを分かりやすくする */
.tplp-comparison-point span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  opacity: 0.82;
}

/* 機能目的：自社メリットの見出しを強調して、比較前に強みが伝わるようにする */
.tplp-comparison-point strong {
  display: block;
  margin-top: 14px;
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  line-height: 1.45;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 機能目的：自社メリット本文の行間を整え、枠から文字がはみ出ないようにする */
.tplp-comparison-point p {
  margin: 10px 0 0;
  font-size: 0.93rem;
  line-height: 1.85;
  font-weight: 600;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 機能目的：比較表カード内の余白と横スクロール領域を安定させる */
.tplp-comparison-card {
  padding: 0;
}

/* 機能目的：スマホ幅で比較表が画面外にはみ出さないよう横スクロールを許可する */
.tplp-comparison-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 機能目的：比較表を読みやすい表形式で表示し、セルの文字崩れを防ぐ */
.tplp-comparison-table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
  table-layout: fixed;
}

/* 機能目的：比較表の見出しと本文セルの余白を統一する */
.tplp-comparison-table th,
.tplp-comparison-table td {
  padding: 18px 16px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.24);
  vertical-align: top;
  text-align: left;
  font-size: 0.94rem;
  line-height: 1.75;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 機能目的：比較表の見出し行を強調する */
.tplp-comparison-table thead th {
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.06em;
}

/* 機能目的：比較表の項目列を太字にして見やすくする */
.tplp-comparison-table tbody th {
  font-weight: 900;
}

/* 機能目的：比較表の自社列を控えめに強調し、他列よりメリットが伝わりやすい見た目にする */
.tplp-comparison-table .tplp-comparison-main {
  position: relative;
  font-weight: 700;
  border-left: 1px solid rgba(148, 163, 184, 0.22);
  border-right: 1px solid rgba(148, 163, 184, 0.22);
}

/* 機能目的：おすすめラベルを自社列見出し内に表示し、比較時の視線を誘導する */
.tplp-comparison-recommend {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 10px;
  margin-right: 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #ffffff;
  background: rgba(15, 23, 42, 0.86);
  box-shadow: none;
}

/* 機能目的：比較表の自社列内で一番伝えたいメリットを太字で表示する */
.tplp-comparison-cell-title {
  display: block;
  font-weight: 900;
  line-height: 1.55;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 機能目的：比較表の自社列内で補足説明を小さめに表示し、情報量を増やしても崩れないようにする */
.tplp-comparison-cell-sub {
  display: block;
  margin-top: 6px;
  font-size: 0.84rem;
  line-height: 1.7;
  font-weight: 700;
  opacity: 0.82;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 機能目的：モダンテーマでは自社列を青系で自然に強調する */
body.tplp-theme-modern .tplp-comparison-table .tplp-comparison-main,
body.theme-modern .tplp-comparison-table .tplp-comparison-main,
body[data-theme="modern"] .tplp-comparison-table .tplp-comparison-main,
body.tplp-theme-modern .tplp-comparison-point,
body.theme-modern .tplp-comparison-point,
body[data-theme="modern"] .tplp-comparison-point {
  background: rgba(37, 99, 235, 0.07);
}

/* 機能目的：上品テーマでは自社列をベージュゴールド系で自然に強調する */
body.tplp-theme-elegant .tplp-comparison-table .tplp-comparison-main,
body.theme-elegant .tplp-comparison-table .tplp-comparison-main,
body[data-theme="elegant"] .tplp-comparison-table .tplp-comparison-main,
body.tplp-theme-elegant .tplp-comparison-point,
body.theme-elegant .tplp-comparison-point,
body[data-theme="elegant"] .tplp-comparison-point {
  background: rgba(185, 138, 61, 0.1);
}

/* 機能目的：高級感テーマでは自社列を黒金系で自然に強調する */
body.tplp-theme-luxury .tplp-comparison-table .tplp-comparison-main,
body.theme-luxury .tplp-comparison-table .tplp-comparison-main,
body[data-theme="luxury"] .tplp-comparison-table .tplp-comparison-main,
body.tplp-theme-luxury .tplp-comparison-point,
body.theme-luxury .tplp-comparison-point,
body[data-theme="luxury"] .tplp-comparison-point {
  background: rgba(214, 177, 92, 0.1);
}

/* 機能目的：おすすめラベルをテーマごとの背景色で見やすくする */
body.tplp-theme-modern .tplp-comparison-recommend,
body.theme-modern .tplp-comparison-recommend,
body[data-theme="modern"] .tplp-comparison-recommend {
  color: #ffffff;
  background: #2563eb;
  box-shadow: none;
}

/* 機能目的：上品テーマのおすすめラベルをゴールドで見やすくする */
body.tplp-theme-elegant .tplp-comparison-recommend,
body.theme-elegant .tplp-comparison-recommend,
body[data-theme="elegant"] .tplp-comparison-recommend {
  color: #ffffff;
  background: #9b722f;
  box-shadow: none;
}

/* 機能目的：高級感テーマのおすすめラベルを黒金で見やすくする */
body.tplp-theme-luxury .tplp-comparison-recommend,
body.theme-luxury .tplp-comparison-recommend,
body[data-theme="luxury"] .tplp-comparison-recommend {
  color: #0b0804;
  background: #d6b15c;
  box-shadow: none;
}

/* 機能目的：比較表の注意書きをカード内に収める */
.tplp-comparison-note {
  margin: 0;
  padding: 18px clamp(18px, 3vw, 30px) clamp(20px, 3vw, 30px);
  font-size: 0.86rem;
  line-height: 1.75;
  opacity: 0.78;
}

/* 機能目的：制作の流れを6ステップのカードで表示する */
.tplp-flow-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 22px);
}

/* 機能目的：制作の流れカードを縦積みで読みやすくする */
.tplp-flow-card {
  min-height: 210px;
}

/* 機能目的：制作ステップ番号をカード上部で強調する */
.tplp-flow-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 12px;
  margin-bottom: 16px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  border: 1px solid currentColor;
  opacity: 0.82;
}

/* 機能目的：FAQを縦並びにして読みやすくする */
.tplp-faq-list {
  display: grid;
  gap: 14px;
  width: min(920px, 100%);
}

/* 機能目的：FAQ項目の開閉操作を分かりやすくする */
.tplp-faq-item {
  padding: 0;
}

/* 機能目的：FAQ質問文のクリック範囲を広げ、操作しやすくする */
.tplp-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 68px;
  padding: 18px clamp(20px, 3vw, 30px);
  font-weight: 900;
  line-height: 1.6;
  cursor: pointer;
  list-style: none;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 機能目的：ブラウザ標準の開閉マーカーを非表示にする */
.tplp-faq-item summary::-webkit-details-marker {
  display: none;
}

/* 機能目的：FAQの開閉状態をプラス記号で表示する */
.tplp-faq-item summary::after {
  content: "+";
  flex: 0 0 auto;
  font-size: 1.45rem;
  line-height: 1;
  font-weight: 900;
}

/* 機能目的：FAQが開いている時に記号を変更する */
.tplp-faq-item[open] summary::after {
  content: "−";
}

/* 機能目的：FAQ回答文をカード内に収めて読みやすくする */
.tplp-faq-item p {
  margin: 0;
  padding: 0 clamp(20px, 3vw, 30px) 22px;
  font-weight: 600;
  line-height: 1.9;
}

/* 機能目的：追加セクションをタブレット幅で2列化し、横崩れを防ぐ */
@media (max-width: 960px) {
  .tplp-reason-grid,
  .tplp-flow-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tplp-comparison-points {
    grid-template-columns: 1fr;
  }
}

/* 機能目的：追加セクションをスマホ幅で1列化し、読みやすさを保つ */
@media (max-width: 640px) {
  .tplp-reason-grid,
  .tplp-flow-grid {
    grid-template-columns: 1fr;
  }

  .tplp-comparison-table {
    min-width: 760px;
  }

  .tplp-comparison-table th,
  .tplp-comparison-table td {
    padding: 15px 12px;
    font-size: 0.88rem;
  }
}

/* =========================================================
   モーション配慮
   機能目的：動きを減らす設定の利用者にはアニメーションを抑制する
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .tplp-reveal,
  .tplp-reveal.is-visible {
    opacity: 1;
    transform: none;
  }

  .tplp-luxury-sparkle,
  .tplp-elegant-soft-entry {
    animation: none !important;
  }
}