/* ========================================
   共通CSS（全セクション共通）
   ======================================== */

/* リセットCSSとフォントのインポート */
@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP:var(--subtitle-font-weight),900,var(--h-3-font-weight),700,var(--h-2-font-weight),var(--button-font-weight),var(--button-small-font-weight),var(--body-1-font-weight),500,400,var(--body-2-font-weight)|Geologica:500,700,900");

/* 基本スタイル */
* {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

html,
body {
  margin: 0px;
  min-height: 100vh;
  width: 100%;
  overflow-x: hidden;
}

/* a blue color as a generic focus style */
button:focus-visible,
a:focus-visible {
  outline: 2px solid #4a90e2 !important;
  outline: -webkit-focus-ring-color auto 5px !important;
  outline-offset: 2px;
}

a {
  text-decoration: none;
}

/* CSS変数定義（最も完全な定義を採用） */
:root {
  --primary: rgba(1, 132, 206, 1);
  --secondary: rgba(234, 248, 255, 1);
  --tertiary: rgba(245, 241, 0, 1);
  --baseblack: rgba(51, 51, 51, 1);
  --basewhite: rgba(255, 255, 255, 1);
  --basegrey-01: rgba(245, 245, 245, 1);

  /* Font Families */
  --h-1-font-family: "Noto Sans JP", Helvetica;
  --h-2-font-family: "Noto Sans JP", Helvetica;
  --h-3-font-family: "Noto Sans JP", Helvetica;
  --subtitle-font-family: "Noto Sans JP", Helvetica;
  --button-font-family: "Noto Sans JP", Helvetica;
  --button-small-font-family: "Noto Sans JP", Helvetica;
  --body-1-font-family: "Noto Sans JP", Helvetica;
  --body-2-font-family: "Noto Sans JP", Helvetica;

  /* Font Weights */
  --h-1-font-weight: 700;
  --h-2-font-weight: 700;
  --h-3-font-weight: 700;
  --subtitle-font-weight: 700;
  --button-font-weight: 700;
  --button-small-font-weight: 700;
  --body-1-font-weight: 500;
  --body-2-font-weight: 400;

  /* Font Sizes */
  --h-1-font-size: 50px;
  --h-2-font-size: 40px;
  --h-3-font-size: 30px;
  --subtitle-font-size: 24px;
  --button-font-size: 18px;
  --button-small-font-size: 16px;
  --body-1-font-size: 16px;
  --body-2-font-size: 12px;

  /* Letter Spacing */
  --h-1-letter-spacing: 2.5px;
  --h-2-letter-spacing: 2px;
  --h-3-letter-spacing: 1.5px;
  --subtitle-letter-spacing: 0px;
  --button-letter-spacing: 0px;
  --button-small-letter-spacing: 0px;
  --body-1-letter-spacing: 0px;
  --body-2-letter-spacing: 0px;

  /* Line Heights */
  --h-1-line-height: 120.00000476837158%;
  --h-2-line-height: 120.00000476837158%;
  --h-3-line-height: 139.9999976158142%;
  --subtitle-line-height: 139.9999976158142%;
  --button-line-height: 120.00000476837158%;
  --button-small-line-height: 120.00000476837158%;
  --body-1-line-height: 160.0000023841858%;
  --body-2-line-height: 160.0000023841858%;

  /* Font Styles */
  --h-1-font-style: normal;
  --h-2-font-style: normal;
  --h-3-font-style: normal;
  --subtitle-font-style: normal;
  --button-font-style: normal;
  --button-small-font-style: normal;
  --body-1-font-style: normal;
  --body-2-font-style: normal;

  /* Spacing */
  --size-space-0: 0px;
  --size-space-050: 2px;
  --size-space-100: 4px;
  --size-space-150: 6px;
  --size-space-200: 8px;
  --size-space-300: 12px;
  --size-space-400: 16px;
  --size-space-600: 24px;
  --size-space-800: 32px;
  --size-space-1200: 48px;

  /* Radius */
  --size-radius-full: 9999px;
  --size-radius-200: 8px;

  /* Card Shadow */
  --card: 0px 5px 10px 0px rgba(16, 16, 16, 0.1);

  /* Hero Section Specific Variables */
  --fs-title: clamp(16px, 2.22vw, 32px);
  --fs-button: clamp(14px, 1.25vw, 18px);
  --fs-tagline-base: clamp(42px, 5.56vw, 80px);
  --fs-tagline-number: clamp(90px, 12.5vw, 180px);
  --fs-tagline-unit: clamp(52px, 6.25vw, 90px);
  --fs-ultra: clamp(120px, 24.3vw, 350px);

  /* Causes Section Specific Variables */
  --headline-1-font-family: "Noto Sans JP", Helvetica;
  --headline-1-font-weight: 700;
  --headline-1-font-size: 40px;
  --headline-1-letter-spacing: 2px;
  --headline-1-line-height: 120.00000476837158%;
  --headline-1-font-style: normal;

  /* Why Important Section Specific Variables */
  --fs-h2: clamp(24px, 4vw, 40px);
  --fs-body1: 16px;
  --fs-body2: 12px;
  --fs-category: 36px;
  --fs-subtitle: clamp(14px, 2vw, 24px);
  --space-1200: clamp(32px, 5vw, 48px);
  --space-800: 32px;
  --space-600: 24px;
  --space-400: 16px;
  --space-300: 12px;
  --space-200: 8px;
  --radius-full: 9999px;

  /* Speed Diagnosis Section Specific Variables */
  --space-xs: 4px;
  --space-s: 8px;
  --space-m: 16px;
  --space-l: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
}

/* サイトコンテナ基本スタイル */
.site-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  background-color: #ffffff;
  width: 100%;
  padding-top: 80px;
  /* ヘッダー固定分のオフセット */
}

/* ========================================
   ヘッダーセクション
   ======================================== */

.site-container .header {
  justify-content: space-between;
  padding: var(--size-space-400) clamp(var(--size-space-400), 2.22vw, var(--size-space-800)) var(--size-space-200) clamp(var(--size-space-400), 2.22vw, var(--size-space-800));
  background-color: var(--basewhite);
  display: flex;
  width: 100%;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  flex: 0 0 auto;
  margin: 0 auto;
}

.site-container .header-logo {
  width: clamp(120px, 10vw, 150px);
  height: auto;
  position: relative;
}

.site-container .header-logo img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.site-container .header-nav {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  flex: 0 0 auto;
}

.site-container .header-nav-link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--size-space-050);
  padding: var(--size-space-400) var(--size-space-600) var(--size-space-400) var(--size-space-600);
  position: relative;
  flex: 0 0 auto;
}

.site-container .header-nav-link-text {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  margin-top: -1px;
  font-family: var(--body-1-font-family);
  font-weight: var(--body-1-font-weight);
  color: var(--baseblack);
  font-size: var(--body-1-font-size);
  text-align: center;
  letter-spacing: var(--body-1-letter-spacing);
  line-height: var(--body-1-line-height);
  font-style: var(--body-1-font-style);
}

/* ========================================
   PC版ドロップダウンメニュー
   ======================================== */
.site-container .header-nav-dropdown {
  position: relative;
  display: inline-flex;
}

.site-container .header-nav-dropdown .header-hover {
  cursor: pointer;
  transition: color 0.3s ease;
}

.site-container .header-nav-dropdown .header-hover:hover .header-nav-link-text {
  color: var(--primary);
}

/* ドロップダウンメニュー本体 */
.site-container .header-nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--basewhite);
  border: 2px solid var(--primary);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: var(--size-space-400);
  min-width: 320px;
  z-index: 1001;
  display: none;
  list-style: none;
  margin: 0;
}

/* ドロップダウンメニュー項目 */
.site-container .header-nav-dropdown-menu li {
  margin-bottom: 4px;
}

.site-container .header-nav-dropdown-menu li:last-child {
  margin-bottom: 0;
}

/* ドロップダウンメニューリンク */
.site-container .header-nav-dropdown-menu li a {
  display: block;
  padding: 4px var(--size-space-300);
  color: var(--baseblack);
  font-family: var(--body-1-font-family);
  font-size: var(--body-1-font-size);
  font-weight: var(--body-1-font-weight);
  line-height: var(--body-1-line-height);
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.site-container .header-nav-dropdown-menu li a:hover {
  background-color: var(--secondary);
  color: var(--primary);
}

/* レスポンシブ：768px以下では非表示 */
@media (max-width: 768px) {
  .site-container .header-nav-dropdown {
    display: none;
  }
}

.site-container .header-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--size-space-600);
  position: relative;
  flex: 0 0 auto;
}

.site-container .phone-info {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  flex: 0 0 auto;
  gap: var(--size-space-0);
}

.site-container .phone-button {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  gap: var(--size-space-200);
  position: relative;
  flex: 0 0 auto;
  border-radius: var(--size-radius-200);
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.site-container .header .icon {
  width: 24px;
  height: 24px;
  position: relative;
  aspect-ratio: 1;
}

.site-container .phone-number {
  font-size: clamp(20px, 1.94vw, 28px);
  line-height: 1.2;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin-top: -1px;
  font-family: "Geologica", Helvetica;
  font-weight: 700;
  color: var(--baseblack);
  text-align: center;
  letter-spacing: 0;
  white-space: nowrap;
}

.site-container .business-hours {
  font-weight: var(--body-2-font-weight);
  font-size: var(--body-2-font-size);
  line-height: var(--body-2-line-height);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  font-family: var(--body-2-font-family);
  color: var(--baseblack);
  text-align: center;
  letter-spacing: var(--body-2-letter-spacing);
  font-style: var(--body-2-font-style);
}

.site-container .contact-button {
  all: unset;
  box-sizing: border-box;
  display: flex;
  min-width: 160px;
  width: fit-content;
  max-width: 200px;
  gap: var(--size-space-300);
  padding: var(--size-space-400) var(--size-space-600) var(--size-space-400) var(--size-space-600);
  position: relative;
  background-color: var(--primary);
  border-radius: var(--size-radius-200);
  align-items: center;
  justify-content: center;
  border: 2px solid var(--primary);
  cursor: pointer;
}

.site-container .contact-button .icon {
  width: 20px;
  height: 20px;
  position: relative;
  aspect-ratio: 1;
  flex-shrink: 0;
}

.site-container .contact-button-text {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  margin-top: -1px;
  font-family: var(--button-font-family);
  font-weight: var(--button-font-weight);
  color: var(--basewhite);
  font-size: var(--button-font-size);
  text-align: center;
  letter-spacing: var(--button-letter-spacing);
  line-height: var(--button-line-height);
  font-style: var(--button-font-style);
  white-space: nowrap;
}

.site-container .header-menu-button {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
}

.site-container .header-menu-button:hover {
  opacity: 0.7;
}

.site-container .header-menu-button:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.site-container .header-menu-icon {
  width: 24px;
  height: 24px;
  position: relative;
  aspect-ratio: 1;
}

/* ハンバーガーアイコン: デフォルト表示、メニューオープン時は非表示 */
.site-container .header-menu-icon--hamburger {
  display: block;
}

body.open .site-container .header-menu-icon--hamburger {
  display: none;
}

/* Xアイコン: デフォルト非表示、メニューオープン時は表示 */
.site-container .header-menu-icon--close {
  display: none;
}

body.open .site-container .header-menu-icon--close {
  display: block;
}

.site-container .breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--size-space-100);
  padding: var(--size-space-200) clamp(var(--size-space-400), 15.28vw, 220px) var(--size-space-200) clamp(var(--size-space-400), 15.28vw, 220px);
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: var(--basegrey-01);
  margin: 0 auto;
}

.site-container .breadcrumb-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin-top: -0.5px;
  font-family: var(--body-2-font-family);
  font-weight: var(--body-2-font-weight);
  color: var(--primary);
  font-size: var(--body-2-font-size);
  letter-spacing: var(--body-2-letter-spacing);
  line-height: var(--body-2-line-height);
  text-decoration: underline;
  white-space: nowrap;
  font-style: var(--body-2-font-style);
}

.site-container .breadcrumb-separator {
  width: 20px;
  height: 20px;
  position: relative;
  aspect-ratio: 1;
  flex-shrink: 0;
}

.site-container .breadcrumb-current {
  position: relative;
  display: -webkit-box;
  align-items: center;
  justify-content: center;
  flex: 1;
  margin-top: -0.5px;
  font-family: var(--body-2-font-family);
  font-weight: var(--body-2-font-weight);
  color: var(--baseblack);
  font-size: var(--body-2-font-size);
  letter-spacing: var(--body-2-letter-spacing);
  line-height: var(--body-2-line-height);
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  font-style: var(--body-2-font-style);
}

/* SP版スタイル - メディアクエリ */
@media (max-width: 768px) {
  .site-container .header {
    padding: var(--size-space-300) var(--size-space-400) var(--size-space-200) var(--size-space-400);
  }

  .site-container .header-logo {}

  .site-container .header-nav {
    display: none;
  }

  .site-container .header-actions {
    display: none;
  }

  .site-container .header-menu-button {
    display: flex;
  }

  .site-container .breadcrumb {
    padding: var(--size-space-200) var(--size-space-400) var(--size-space-200) var(--size-space-400);
  }
}

/* PC版スタイル - メディアクエリ */
@media (min-width: 769px) {
  .site-container .header-menu-button {
    display: none;
  }
}

/* ========================================
   ヒーローセクション
   ======================================== */

/* ========================================
   Hero Section Animations
   ======================================== */

/* Keyframe Animations */
@keyframes slideInFromLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInFromRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInFromBottom {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Hero Section Container */
.site-container .hero {
  position: relative;
  width: 100%;
  min-height: 530px;
  height: auto;
  padding-bottom: 2rem;
  background-color: #ffffff;
  overflow: hidden;
}

@media (min-width: 769px) {
  .site-container .hero {
    min-height: 800px;
    height: 90vh;
    max-height: 1080px;
    padding-bottom: 0;
  }
}

/* Background / Decoration */
.site-container .hero-logo-text {
  position: absolute;
  font-family: "Geologica", Helvetica;
  color: var(--basegrey-01);
  font-size: var(--fs-ultra);
  line-height: 1.2;
  white-space: nowrap;
  font-weight: 700;
  z-index: 0;
  top: -5%;
  right: -3%;
  transform-origin: top right;
}

.site-container .hero-decoration {
  position: absolute;
  background: linear-gradient(90deg,
      rgba(234, 248, 255, 1) 0%,
      rgba(255, 255, 255, 1) 100%),
    linear-gradient(0deg,
      rgba(234, 248, 255, 1) 0%,
      rgba(234, 248, 255, 1) 100%);
  mix-blend-mode: multiply;
  z-index: 1;
}

/* PC Decoration Styles */
@media (min-width: 769px) {
  .site-container .hero-decoration {
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-40deg);
    width: 100%;
    max-width: 1448px;
    height: 94px;
  }

  .site-container .hero-logo-text {
    top: -10%;
    right: -4%;
  }
}

/* Main Visual (Image) */
.site-container .hero-image {
  position: absolute;
  width: clamp(280px, 30vw, 500px);
  height: auto;
  aspect-ratio: 0.68;
  object-fit: contain;
  z-index: 2;
}

@media (min-width: 769px) {
  .site-container .hero-image {
    top: 50%;
    left: 65%;
    transform: translateY(-50%);
    width: 27.78%;
    max-width: 450px;
  }
}

.hero-content-group {
  position: absolute;
  top: 50px;
  left: 6%;
  width: 90%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 20px;
  z-index: 3;
}

@media (min-width: 1000px) {
  .hero-content-group {
    top: 40%;
    left: 12%;
    transform: translateY(-40%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    width: 45%;
  }
}
@media (min-width: 1400px) {
  .hero-content-group {
    top: 38%;
    left: 12%;
    transform: translateY(-40%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    width: 45%;
  }

  .site-container .hero-main-title {
    top: 50px;
    white-space: nowrap;
    max-width: calc(65% - 12% - 48px);
  }
}

.site-container .hero-title {
  color: #333333;
  font-size: var(--fs-title);
  letter-spacing: 0.05em;
  line-height: 1.5;
  font-family: "Noto Sans JP", Helvetica;
  font-weight: 700;
  margin-bottom: 24px;
}

.site-container .hero-main-title {
  position: absolute;
  color: #333333;
  font-size: var(--fs-title);
  letter-spacing: 0.05em;
  line-height: 1.5;
  font-family: "Noto Sans JP", Helvetica;
  font-weight: 900;
  z-index: 3;
  left: 12%;
}

.site-container .hero-tagline-wrapper {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin-bottom: 32px;
}

.site-container .hero-tagline {
  font-family: "Noto Sans JP", Helvetica;
  font-weight: 400;
  color: var(--primary);
  line-height: 1.4;
  display: block;
}

/* Typography Spans */
.hero-tagline-char {
  font-size: 80px;
  font-weight: 700;
}

.hero-tagline-char-small {
  font-size: 80px;
  font-weight: 700;
  letter-spacing: -0.08em;
}

.hero-tagline-number {
  font-family: "Geologica", Helvetica;
  font-weight: 500;
  font-size: 180px;
  letter-spacing: 0.09em;
  line-height: 1;
  position: relative;
  top: 0.05em;
}

.hero-tagline-unit {
  font-size: 90px;
  font-weight: 700;
  letter-spacing: 0.045em;
}

.hero-tagline-punct {
  font-size: 80px;
  font-weight: 700;
  letter-spacing: -0.28em;
  margin-right: 0.5em;
}

/* Decoration line under tagline */
.hero-tagline-decoration {
  position: absolute;
  z-index: -1;
  top: 100px;
  left: 160px;
  width: 320px;
  max-width: 320px;
  height: auto;
  transform: none;
}

/* CTA Button */
.site-container .hero-cta-button {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  height: 60px;
  padding: 0 40px;
  background-color: var(--primary);
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  gap: 12px;
  transition: opacity 0.2s;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border: 2px solid var(--primary);
}

.site-container .hero-cta-button:hover {
  opacity: 0.9;
}

.hero-cta-icon {
  width: 20px;
  height: 20px;
}

.hero-cta-text {
  font-family: var(--button-font-family);
  font-weight: var(--button-font-weight);
  color: var(--basewhite);
  font-size: var(--fs-button);
}

/* SP Specific Overrides (Mobile) */
@media (max-width: 768px) {
  .site-container .hero {
    display: block;
    min-height: 600px;
    padding: 0;
  }

  .site-container .hero-logo-text {
    font-size: 100px;
    top: -20px;
    right: -10px;
  }

  .site-container .hero-decoration {
    width: 140%;
    height: 50px;
    top: 350px;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-40deg);
  }

  .site-container .hero-tagline-wrapper {
    width: 100%;
    margin-bottom: 10px;
  }

  .hero-tagline {
    display: block;
  }

  .hero-tagline-decoration {
    top: 50px;
    left: 84px;
    width: 160px;
    z-index: -1;
  }

  .hero-tagline-char,
  .hero-tagline-char-small,
  .hero-tagline-punct {
    font-size: 42px;
  }

  .hero-tagline-number {
    font-size: 90px;
  }

  .hero-tagline-unit {
    font-size: 52px;
  }

  .site-container .hero-title {
    font-size: 14px;
    margin-bottom: 0px;
  }

  .site-container .hero-main-title {
    position: relative;
    top: 20px;
    left: 10px;
    font-size: 12px;
    margin-bottom: 16px;
    max-width: 100%;
  }

  .site-container .hero-cta-button {
    width: 100%;
    max-width: 260px;
    height: 50px;
    padding: 0 20px;
    margin-top: 10px;
  }

  .site-container .hero-image {
    position: absolute;
    bottom: 0%;
    right: -5%;
    top: auto;
    left: auto;
    transform: none;
    width: 60%;
    max-width: 250px;
    z-index: 2;
  }
}

/* Hero Animation Initial States */
.hero-animate-ready .hero-tagline-wrapper {
  opacity: 0;
  transform: translateX(-50px);
}

.hero-animate-ready .hero-title {
  opacity: 0;
  transform: translateX(-50px);
}

.hero-animate-ready .hero-cta-button {
  opacity: 0;
  transform: translateY(30px);
}

.hero-animate-ready .hero-image {
  opacity: 0;
  transform: translateX(50px);
}

.hero-animate-ready .hero-logo-text {
  opacity: 0;
}

.hero-animate-ready .hero-decoration {
  opacity: 0;
}

/* Hero Image Animation - PC (preserve translateY) */
@media (min-width: 769px) {
  .hero-animate-ready .hero-image {
    transform: translateX(50px) translateY(-50%);
  }
}

/* Hero Animation Classes */
.hero-animate-ready.hero-animate-start .hero-tagline-wrapper {
  animation: slideInFromLeft 0.8s ease-out forwards;
  animation-delay: 0s;
}

.hero-animate-ready.hero-animate-start .hero-title {
  animation: slideInFromLeft 0.8s ease-out forwards;
  animation-delay: 0.2s;
}

.hero-animate-ready.hero-animate-start .hero-cta-button {
  animation: slideInFromBottom 0.8s ease-out forwards;
  animation-delay: 0.4s;
}

.hero-animate-ready.hero-animate-start .hero-image {
  animation: slideInFromRight 0.8s ease-out forwards;
  animation-delay: 0.3s;
}

.hero-animate-ready.hero-animate-start .hero-logo-text {
  animation: fadeIn 0.8s ease-out forwards;
  animation-delay: 0.1s;
}

.hero-animate-ready.hero-animate-start .hero-decoration {
  animation: fadeIn 0.8s ease-out forwards;
  animation-delay: 0.1s;
}

/* Hero Image Animation - PC (preserve translateY after animation) */
@media (min-width: 769px) {
  .hero-animate-ready.hero-animate-start .hero-image {
    animation-name: slideInFromRightPC;
  }
}

@keyframes slideInFromRightPC {
  from {
    opacity: 0;
    transform: translateX(50px) translateY(-50%);
  }

  to {
    opacity: 1;
    transform: translateX(0) translateY(-50%);
  }
}

/* Tagline Block Logic */
.tagline-line-1 {
  display: inline-block;
  position: relative;
  z-index: 1;
}

.tagline-line-2 {
  display: block;
  margin-top: 0.2em;
}

/* ========================================
   フッターセクション
   ======================================== */

.site-container .footer {
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--size-space-800);
  padding: var(--size-space-800) var(--size-space-800) var(--size-space-400) var(--size-space-800);
  background-color: var(--basegrey-01);
  display: flex;
  width: 100%;
  align-items: center;
  position: relative;
  flex: 0 0 auto;
}

.site-container .footer-logo {
  width: 170px;
  height: 103.89px;
  position: relative;
  aspect-ratio: 1.64;
  background-size: cover;
  background-position: 50% 50%;
}

.site-container .footer-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.site-container .footer-services-nav {
  display: flex;
  flex-direction: row;
  width: 100%;
  max-width: 1000px;
  align-items: flex-start;
  gap: var(--size-space-1200);
  padding: var(--size-space-600) 0px var(--size-space-600) 0px;
  position: relative;
  flex: 0 0 auto;
  border-top-width: 1px;
  border-top-style: solid;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-color: var(--primary);
}

.site-container .footer-nav-title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin-top: -1.00px;
  font-family: var(--body-1-font-family);
  font-weight: var(--body-1-font-weight);
  color: #333333;
  font-size: var(--body-1-font-size);
  letter-spacing: var(--body-1-letter-spacing);
  line-height: var(--body-1-line-height);
  white-space: nowrap;
  font-style: var(--body-1-font-style);
}

.site-container .footer-services-list {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px 16px;
  position: relative;
  flex: 1;
  flex-grow: 1;
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-container .footer-services-item,
.site-container .footer-services-item-long {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 204px;
  width: fit-content;
  margin-top: -1.00px;
  font-family: var(--body-2-font-family);
  font-weight: var(--body-2-font-weight);
  color: #333333;
  font-size: var(--body-2-font-size);
  letter-spacing: var(--body-2-letter-spacing);
  line-height: var(--body-2-line-height);
  font-style: var(--body-2-font-style);
}

.site-container .footer-services-link {
  color: #333333;
  text-decoration: none;
}

.site-container .footer-services-link:hover {
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.site-container .footer-services-link:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.site-container .footer-main-nav {
  display: flex;
  flex-direction: row;
  width: 100%;
  max-width: 1000px;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  flex: 0 0 auto;
}

.site-container .footer-nav-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin-top: -1.00px;
  font-family: var(--body-1-font-family);
  font-weight: var(--body-1-font-weight);
  color: #333333;
  font-size: var(--body-1-font-size);
  letter-spacing: var(--body-1-letter-spacing);
  line-height: var(--body-1-line-height);
  white-space: nowrap;
  font-style: var(--body-1-font-style);
}

.site-container .footer-nav-link:hover {
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.site-container .footer-nav-link:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.site-container .footer-company-nav {
  display: flex;
  width: 100%;
  max-width: 1000px;
  align-items: center;
  justify-content: center;
  gap: var(--size-space-600);
  position: relative;
  flex: 0 0 auto;
}

.site-container .footer-company-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin-top: -1.00px;
  font-family: var(--body-2-font-family);
  font-weight: var(--body-2-font-weight);
  color: #333333;
  font-size: var(--body-2-font-size);
  letter-spacing: var(--body-2-letter-spacing);
  line-height: var(--body-2-line-height);
  white-space: nowrap;
  font-style: var(--body-2-font-style);
}

.site-container .footer-company-link:hover {
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.site-container .footer-company-link:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.site-container .footer-copyright {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  font-family: "Noto Sans JP", Helvetica;
  font-weight: 500;
  color: #333333;
  font-size: 10px;
  text-align: center;
  letter-spacing: 0;
  line-height: 16.0px;
  white-space: nowrap;
}

/* SP版スタイル - メディアクエリ */
@media (max-width: 768px) {
  .site-container .footer {
    width: 100%;
    padding: var(--size-space-800) var(--size-space-600) var(--size-space-400) var(--size-space-600);
    gap: var(--size-space-600);
  }

  .site-container .footer-services-nav {
    flex-direction: column;
    align-items: center;
    gap: var(--size-space-800);
    width: 100%;
    max-width: 100%;
  }

  .site-container .footer-services-list {
    justify-content: center;
    gap: var(--size-space-400);
  }

  .site-container .footer-services-item,
  .site-container .footer-services-item-long {
    width: fit-content;
    min-width: auto;
  }

  .site-container .footer-main-nav {
    flex-direction: column;
    align-items: center;
    gap: var(--size-space-400);
    width: 100%;
    max-width: 100%;
  }

  .site-container .footer-company-nav {
    width: 100%;
    max-width: 100%;
  }
}

/* ========================================
   サービス紹介セクション
   ======================================== */

.site-container .service-intro-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--size-space-1200);
  padding: clamp(24px, 5vw, 40px) clamp(32px, 15vw, 220px);
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: var(--basewhite);
}

.site-container .service-intro-container {
  gap: clamp(24px, 5vw, var(--size-space-1200));
  padding: var(--size-space-600) clamp(16px, 3vw, var(--size-space-1200));
  flex: 0 0 auto;
  border: 1px solid;
  border-color: var(--primary);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  position: relative;
  align-self: stretch;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  box-sizing: border-box;
}

.site-container .service-intro-content {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--size-space-800);
  flex: 1;
  flex-grow: 1;
  display: flex;
  position: relative;
}

.site-container .service-intro-title-wrapper {
  display: flex;
  gap: 10px;
  align-self: stretch;
  width: 100%;
  border-color: var(--primary);
  align-items: center;
  padding: 0px 0px var(--size-space-300) 0px;
  position: relative;
  flex: 0 0 auto;
  border-bottom-width: 2px;
  border-bottom-style: solid;
}

.site-container .service-intro-title {
  position: relative;
  display: inline-block;
  margin-top: -2.00px;
  font-family: var(--h-2-font-family);
  font-weight: var(--h-2-font-weight);
  color: transparent;
  font-size: var(--h-2-font-size);
  letter-spacing: var(--h-2-letter-spacing);
  line-height: var(--h-2-line-height);
  font-style: var(--h-2-font-style);
  white-space: nowrap;
}

.site-container .service-intro-title-suffix {
  color: #333333;
  letter-spacing: var(--h-2-letter-spacing);
  font-family: var(--h-2-font-family);
  font-style: var(--h-2-font-style);
  font-weight: var(--h-2-font-weight);
  line-height: var(--h-2-line-height);
  font-size: var(--h-2-font-size);
}

.site-container .service-intro-title-main {
  color: #0184ce;
  letter-spacing: var(--h-2-letter-spacing);
  font-family: var(--h-2-font-family);
  font-style: var(--h-2-font-style);
  font-weight: var(--h-2-font-weight);
  line-height: var(--h-2-line-height);
  font-size: var(--h-2-font-size);
}

.site-container .service-intro-description {
  align-self: stretch;
  font-weight: var(--body-1-font-weight);
  color: #333333;
  font-size: var(--body-1-font-size);
  letter-spacing: var(--body-1-letter-spacing);
  line-height: var(--body-1-line-height);
  position: relative;
  font-family: var(--body-1-font-family);
  font-style: var(--body-1-font-style);
  text-align: left;
}

.site-container .service-intro-image {
  position: relative;
  width: clamp(120px, 12vw, 182px);
  height: auto;
  aspect-ratio: 182 / 235;
  flex-shrink: 0;
}

.site-container .service-intro-image img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* SP版スタイル統合 - メディアクエリ */
@media (max-width: 768px) {
  .site-container .service-intro-section {
    padding: clamp(24px, 5vw, 40px) var(--size-space-800);
  }

  .site-container .service-intro-container {
    flex-direction: column;
    padding: var(--size-space-600);
    gap: var(--size-space-800);
  }

  .site-container .service-intro-content {
    width: 100%;
    align-items: flex-start;
  }

  .site-container .service-intro-title {
    width: 100%;
    display: block;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: break-word;
  }

  .site-container .service-intro-title-main,
  .site-container .service-intro-title-suffix {
    display: inline;
  }

  .site-container .service-intro-image {
    width: clamp(120px, 40vw, 182px);
    height: auto;
    aspect-ratio: 182 / 235;
    max-width: 100%;
  }
}

/* ========================================
   なぜ重要なのかセクション
   ======================================== */

.why-important-section {
  background-color: var(--basegrey-01);
  padding: 60px clamp(24px, 10vw, 220px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1200);
  position: relative;
  width: 100%;
}

/* Header */
.why-important-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-800);
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

.why-important-title-container {
  border-bottom: 2px solid var(--primary);
  padding-bottom: var(--space-300);
}

.why-important-title {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--baseblack);
  white-space: nowrap;
}

.why-important-title-highlight {
  color: var(--primary);
}

.why-important-description {
  font-size: var(--fs-body1);
  line-height: 1.6;
  text-align: center;
  color: var(--baseblack);
  font-weight: 500;
}

/* Content Area */
.why-important-content {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: var(--space-1200);
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
  justify-content: center;
}

/* Card */
.why-important-card {
  background-color: var(--basewhite);
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-800);
  gap: var(--space-600);
  box-shadow: 0px 5px 10px rgba(16, 16, 16, 0.1);
  z-index: 1;
}

.why-important-card-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-200);
}

.why-important-card-category {
  font-family: "Geologica", sans-serif;
  font-weight: 700;
  font-size: var(--fs-category);
  color: var(--baseblack);
  line-height: 1;
}

.why-important-card-subtitle {
  font-size: var(--fs-body2);
  color: var(--primary);
  font-weight: 400;
}

.why-important-card-icon-wrapper {
  width: 130px;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--baseblack);
  border-radius: var(--radius-full);
}

.why-important-card-icon {
  width: 72px;
  height: 72px;
  object-fit: contain;
}

.why-important-card-description {
  font-size: var(--fs-body1);
  line-height: 1.6;
  text-align: center;
  color: var(--baseblack);
}

.why-important-card-description strong {
  font-weight: 700;
}

.why-important-link {
  color: #000;
}

/* Decoration "X" / Arrows */
.why-important-decoration {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  z-index: 2;
  pointer-events: none;
}

.why-important-decoration img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Responsive Adjustment */
@media (max-width: 768px) {
  .why-important-section {
    padding: 60px 24px;
  }

  .why-important-content {
    flex-direction: column;
    align-items: center;
    gap: var(--space-1200);
  }

  .why-important-card {
    width: 100%;
  }

  .why-important-title {
    white-space: normal;
  }
}

/* ========================================
   表示速度を低下させる主な原因セクション
   ======================================== */

.causes-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--size-space-1200);
  padding: 60px 0;
  position: relative;
  align-self: stretch;
  width: 100%;
  height: fit-content;
  flex: 0 0 auto;
  background-color: var(--basewhite);
  overflow: hidden;
  z-index: 0;
}

.causes-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--size-space-1200);
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  z-index: 1;
}

.solution-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--size-space-1200);
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  min-height: 800px;
  z-index: 1;
}

.solution-block>*:not(.causes-bg-decoration) {
  position: relative;
  z-index: 1;
}

.causes-bg-decoration {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1400px;
  background-color: var(--secondary);
  border-radius: 0 0 50% 50% / 0 0 100px 100px;
  z-index: -1;
}

.causes-bg-decoration img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

.causes-title-wrapper {
  align-items: center;
  gap: 20px;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 850px;
  padding: 0 20px;
  position: relative;
  flex: 0 0 auto;
}

.causes-title {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--headline-1-font-family);
  font-weight: var(--headline-1-font-weight);
  color: #000000;
  font-size: var(--headline-1-font-size);
  text-align: center;
  letter-spacing: var(--headline-1-letter-spacing);
  line-height: var(--headline-1-line-height);
  font-style: var(--headline-1-font-style);
}

.causes-title-text {
  color: #000000;
  font-family: var(--headline-1-font-family);
  font-size: var(--headline-1-font-size);
  font-weight: var(--headline-1-font-weight);
  letter-spacing: var(--headline-1-letter-spacing);
  line-height: var(--headline-1-line-height);
  font-style: var(--headline-1-font-style);
}

.causes-title-emphasis {
  color: var(--primary);
  font-family: var(--headline-1-font-family);
  font-size: var(--headline-1-font-size);
  font-weight: var(--headline-1-font-weight);
  letter-spacing: var(--headline-1-letter-spacing);
  line-height: var(--headline-1-line-height);
  font-style: var(--headline-1-font-style);
}

.causes-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--size-space-600);
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  max-width: 1000px;
  padding: 0 20px;
}

.causes-row {
  display: flex;
  width: 100%;
  max-width: 1000px;
  align-items: stretch;
  gap: var(--size-space-600);
  position: relative;
  flex: 0 0 auto;
}

.cause-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--size-space-400);
  padding: var(--size-space-800);
  position: relative;
  flex: 1;
  flex-grow: 1;
  background-color: var(--basewhite);
}

.cause-card-icon-wrapper {
  display: flex;
  width: 100px;
  height: 100px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: var(--size-space-400);
  position: relative;
  background-color: var(--basegrey-01);
  border-radius: var(--size-radius-full);
  aspect-ratio: 1;
}

.cause-card-icon {
  width: 56px;
  height: 56px;
  position: relative;
  aspect-ratio: 1;
}

.cause-card-icon-wrapper picture {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.cause-card-icon-wrapper img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  display: block;
}

.cause-card-title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  font-family: var(--subtitle-font-family);
  font-weight: var(--subtitle-font-weight);
  color: #333333;
  font-size: var(--subtitle-font-size);
  text-align: center;
  letter-spacing: var(--subtitle-letter-spacing);
  line-height: var(--subtitle-line-height);
  font-style: var(--subtitle-font-style);
}

.cause-card-description {
  position: relative;
  align-self: stretch;
  font-family: var(--body-2-font-family);
  font-weight: var(--body-2-font-weight);
  color: #333333;
  font-size: var(--body-2-font-size);
  text-align: center;
  letter-spacing: var(--body-2-letter-spacing);
  line-height: var(--body-2-line-height);
  font-style: var(--body-2-font-style);
}

/* 解決策オーバーレイ */
.cause-card-solution-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--size-space-400);
  padding: var(--size-space-800);
  background-color: rgba(1, 132, 206, 0.9);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 10;
}

.cause-card:hover .cause-card-solution-overlay {
  opacity: 1;
  visibility: visible;
}

.cause-card.is-active .cause-card-solution-overlay {
  opacity: 1;
  visibility: visible;
}

.cause-card-solution-header {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--size-space-200);
  position: relative;
  flex: 0 0 auto;
}

.cause-card-solution-label {
  width: fit-content;
  margin-top: -1px;
  font-family: var(--body-2-font-family);
  font-weight: var(--subtitle-font-weight);
  font-size: var(--body-2-font-size);
  line-height: var(--body-2-line-height);
  white-space: nowrap;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--basewhite);
  text-align: center;
  letter-spacing: var(--body-2-letter-spacing);
  font-style: var(--body-2-font-style);
}

.cause-card-solution-icon {
  position: relative;
  width: 24px;
  height: 24px;
  aspect-ratio: 1;
}

.cause-card-solution-title {
  align-self: stretch;
  font-family: var(--subtitle-font-family);
  font-weight: var(--subtitle-font-weight);
  font-size: var(--subtitle-font-size);
  line-height: var(--subtitle-line-height);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--basewhite);
  text-align: center;
  letter-spacing: var(--subtitle-letter-spacing);
  font-style: var(--subtitle-font-style);
}

.cause-card-solution-description {
  align-self: stretch;
  font-family: var(--body-1-font-family);
  font-weight: var(--body-1-font-weight);
  font-size: var(--body-1-font-size);
  line-height: var(--body-1-line-height);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--basewhite);
  text-align: center;
  letter-spacing: var(--body-1-letter-spacing);
  font-style: var(--body-1-font-style);
}

.causes-decoration-line {
  position: relative;
  width: 2px;
  height: 80px;
}

.causes-decoration-line img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.causes-solution-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.causes-solution-message-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.causes-solution-icon {
  position: absolute;
  width: 120%;
  z-index: 0;
  pointer-events: none;
  top: 20px;
}

.causes-solution-icon picture,
.causes-solution-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.causes-solution-company {
  position: relative;
  width: fit-content;
  font-family: var(--subtitle-font-family);
  font-weight: var(--subtitle-font-weight);
  color: #333333;
  font-size: var(--subtitle-font-size);
  letter-spacing: var(--subtitle-letter-spacing);
  line-height: var(--subtitle-line-height);
  white-space: nowrap;
  font-style: var(--subtitle-font-style);
}

.causes-solution-company-name {
  color: #333333;
  font-family: var(--subtitle-font-family);
  font-size: var(--subtitle-font-size);
  font-weight: var(--subtitle-font-weight);
  letter-spacing: var(--subtitle-letter-spacing);
  line-height: var(--subtitle-line-height);
  font-style: var(--subtitle-font-style);
}

.causes-solution-company-particle {
  color: #333333;
  font-family: var(--subtitle-font-family);
  font-size: var(--subtitle-font-size);
  font-weight: var(--subtitle-font-weight);
  letter-spacing: var(--subtitle-letter-spacing);
  line-height: var(--subtitle-line-height);
  font-style: var(--subtitle-font-style);
}

.causes-solution-message {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin: 0;
  text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 2px 2px 0 #fff, -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff;
  font-family: "Noto Sans JP", Helvetica;
  font-weight: 900;
  color: var(--primary);
  font-size: 80px;
  text-align: center;
  letter-spacing: 4px;
  line-height: 96px;
  white-space: nowrap;
  z-index: 1;
}

.causes-bg-image {
  position: relative;
  width: 300px;
  height: 323.02px;
  aspect-ratio: 0.93;
}

.causes-bg-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.causes-description {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  font-family: var(--body-1-font-family);
  font-weight: var(--body-1-font-weight);
  color: #000000;
  font-size: var(--body-1-font-size);
  text-align: center;
  letter-spacing: var(--body-1-letter-spacing);
  line-height: var(--body-1-line-height);
  font-style: var(--body-1-font-style);
  padding: 0 20px;
}

.coverage-grid {
  display: flex;
  width: 100%;
  max-width: 1000px;
  align-items: stretch;
  justify-content: center;
  gap: var(--size-space-400);
  position: relative;
  flex: 0 0 auto;
  flex-direction: row;
  flex-wrap: wrap;
}

.coverage-row {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: var(--size-space-400);
  position: relative;
  flex: 1;
  flex-grow: 1;
  flex-direction: row;
  min-width: 300px;
}

.coverage-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--size-space-600);
  padding: var(--size-space-800) var(--size-space-600) var(--size-space-600) var(--size-space-600);
  position: relative;
  flex: 1;
  align-self: stretch;
  flex-grow: 1;
  background-color: var(--basegrey-01);
}

.coverage-card-title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  height: 70px;
  margin-top: -1px;
  font-family: var(--subtitle-font-family);
  font-weight: var(--subtitle-font-weight);
  color: var(--primary);
  font-size: var(--subtitle-font-size);
  text-align: center;
  letter-spacing: var(--subtitle-letter-spacing);
  line-height: var(--subtitle-line-height);
  font-style: var(--subtitle-font-style);
}

.coverage-card-list {
  flex: 1;
  align-self: stretch;
  font-family: var(--body-1-font-family);
  font-weight: var(--body-1-font-weight);
  color: #333333;
  font-size: var(--body-1-font-size);
  line-height: var(--body-1-line-height);
  position: relative;
  letter-spacing: var(--body-1-letter-spacing);
  font-style: var(--body-1-font-style);
}

.coverage-card-suffix {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  margin-top: auto;
  font-family: var(--body-2-font-family);
  font-weight: var(--body-2-font-weight);
  color: #333333;
  font-size: var(--body-2-font-size);
  text-align: right;
  letter-spacing: var(--body-2-letter-spacing);
  line-height: var(--body-2-line-height);
  font-style: var(--body-2-font-style);
}

.coverage-card-large {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--size-space-600);
  padding: var(--size-space-800) var(--size-space-600) var(--size-space-600) var(--size-space-600);
  position: relative;
  flex: 1;
  flex-grow: 1;
  background-color: var(--basegrey-01);
}

.coverage-card-list-long {
  flex: 1;
  position: relative;
  align-self: stretch;
  font-family: var(--body-1-font-family);
  font-weight: var(--body-1-font-weight);
  color: #333333;
  font-size: var(--body-1-font-size);
  letter-spacing: var(--body-1-letter-spacing);
  line-height: var(--body-1-line-height);
  font-style: var(--body-1-font-style);
}

/* SP版スタイル */
@media (max-width: 768px) {
  .causes-section {
    padding: 60px 0;
    gap: var(--size-space-800);
  }

  .causes-block,
  .solution-block {
    gap: var(--size-space-800);
  }

  .solution-block {
    min-height: fit-content;
  }

  .causes-bg-decoration {
    height: 1900px;
    border-radius: 0 0 50% 50% / 0 0 60px 60px;
  }

  .causes-title-wrapper {
    width: 100%;
    gap: 10px;
    padding: 0px 0px var(--size-space-300) 0px;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-color: var(--primary);
  }

  .causes-title {
    font-family: var(--h-2-font-family);
    font-weight: var(--h-2-font-weight);
    font-size: var(--h-2-font-size);
    letter-spacing: var(--h-2-letter-spacing);
    line-height: var(--h-2-line-height);
    color: transparent;
    margin-top: -2px;
  }

  .causes-title-text {
    color: #333333;
    font-family: var(--h-2-font-family);
    font-size: var(--h-2-font-size);
    font-weight: var(--h-2-font-weight);
    letter-spacing: var(--h-2-letter-spacing);
    line-height: var(--h-2-line-height);
  }

  .causes-title-emphasis {
    color: var(--primary);
    font-family: var(--h-2-font-family);
    font-size: var(--h-2-font-size);
    font-weight: var(--h-2-font-weight);
    letter-spacing: var(--h-2-letter-spacing);
    line-height: var(--h-2-line-height);
  }

  .causes-grid {
    width: 100%;
    gap: var(--size-space-400);
  }

  .causes-row {
    flex-direction: column;
    width: 100%;
    gap: var(--size-space-400);
  }

  .cause-card {
    width: 100%;
    flex: 0 0 auto;
  }

  .cause-card-description {
    font-family: var(--body-1-font-family);
    font-weight: var(--body-1-font-weight);
    font-size: var(--body-1-font-size);
    letter-spacing: var(--body-1-letter-spacing);
    line-height: var(--body-1-line-height);
    color: var(--baseblack);
  }

  .cause-card-title {
    color: var(--baseblack);
  }

  /* モバイルではホバーを無効化し、タップのみで表示 */
  .cause-card:hover .cause-card-solution-overlay {
    opacity: 0;
    visibility: hidden;
  }

  .cause-card.is-active .cause-card-solution-overlay {
    opacity: 1;
    visibility: visible;
  }

  .causes-solution-box {
    flex-direction: column;
    gap: var(--size-space-200);
    position: relative;
  }

  .causes-solution-message-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .causes-solution-icon {
    position: absolute;
    z-index: 0;
    width: 100%;
    top: 10px;
    pointer-events: none;
  }

  .causes-solution-company {
    font-family: "Noto Sans JP", Helvetica;
    font-weight: 700;
    font-size: 30px;
    letter-spacing: 1.50px;
    line-height: 36px;
    color: var(--baseblack);
  }

  .causes-solution-company-name {
    font-family: "Noto Sans JP", Helvetica;
    font-weight: 700;
    font-size: 30px;
    letter-spacing: 1.50px;
    line-height: 36px;
    color: var(--baseblack);
  }

  .causes-solution-company-particle {
    font-family: "Noto Sans JP", Helvetica;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.34px;
    line-height: 31.2px;
  }

  .causes-solution-message {
    font-size: 48px;
    letter-spacing: 2.40px;
    line-height: 67.2px;
    margin: 0;
    text-shadow: 1.5px 0 0 #fff, -1.5px 0 0 #fff, 0 1.5px 0 #fff, 0 -1.5px 0 #fff, 1.5px 1.5px 0 #fff, -1.5px -1.5px 0 #fff, 1.5px -1.5px 0 #fff, -1.5px 1.5px 0 #fff;
  }

  .causes-bg-image {
    width: 300px;
    height: auto;
    aspect-ratio: 0.93;
  }

  .coverage-grid {
    flex-direction: column;
    width: 100%;
    gap: var(--size-space-400);
    padding: 0px 20px;
  }

  .coverage-row {
    flex-direction: row;
    width: 100%;
    gap: var(--size-space-400);
    flex: 0 0 auto;
  }

  .coverage-card,
  .coverage-card-large {
    flex: 1;
    flex-grow: 1;
    padding: var(--size-space-600) var(--size-space-400) var(--size-space-400) var(--size-space-400);
  }

  .coverage-card-title {
    height: auto;
  }
}

/* ========================================
   お悩みセクション
   ======================================== */

.concerns-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--size-space-1200);
  padding: 60px 0;
  width: 100%;
  position: relative;
  background-color: var(--basewhite);
}

.concerns-bg-decoration {
  position: absolute;
  top: 474px;
  left: 0;
  width: 100%;
  height: 1700px;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(234, 248, 255, 1) 80%, rgba(245, 245, 245, 1) 100%);
}

.concerns-bg-decoration::before {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 150px;
  background-color: var(--basewhite);
  border-radius: 0 0 50% 50% / 0 0 70% 70%;
}

.concerns-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--size-space-800);
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  z-index: 1;
  padding: 0 20px;
}

.concerns-title-wrapper {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding-bottom: var(--size-space-300);
  border-bottom: 2px solid var(--primary);
}

.concerns-title {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--h-2-font-family);
  font-weight: var(--h-2-font-weight);
  font-size: var(--h-2-font-size);
  line-height: var(--h-2-line-height);
  letter-spacing: var(--h-2-letter-spacing);
  text-align: center;
}

.concerns-title-text {
  color: var(--baseblack);
}

.concerns-title-emphasis {
  color: var(--primary);
}

.concerns-list {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: 1000px;
  align-items: center;
  justify-content: center;
  gap: var(--size-space-400);
}

.concerns-list-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--size-space-150) var(--size-space-300);
  background-color: var(--basegrey-01);
}

.concerns-list-text {
  font-family: var(--body-1-font-family);
  font-weight: var(--body-1-font-weight);
  font-size: var(--body-1-font-size);
  color: var(--baseblack);
  letter-spacing: var(--body-1-letter-spacing);
  line-height: var(--body-1-line-height);
  text-align: center;
  white-space: nowrap;
}

.solution-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 48px;
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

.solution-box-bg {
  width: 168px;
  height: auto;
  aspect-ratio: 0.42;
}

.solution-box-bg img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.solution-box-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--size-space-200);
  position: relative;
}

.solution-box-icon {
  position: absolute;
  top: 50px;
  z-index: -1;
}

.solution-box-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.solution-company-text {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  color: var(--baseblack);
  font-size: 40px;
  letter-spacing: 2px;
  line-height: 1.2;
  text-align: center;
  width: 100%;
}

.solution-company-particle {
  font-size: 36px;
  letter-spacing: 0.65px;
  vertical-align: baseline;
}

.solution-message {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Noto Sans JP", sans-serif;
  color: transparent;
  font-size: 80px;
  line-height: 1.2;
  text-align: center;
}

.solution-message-main {
  font-weight: 900;
  color: #0184ce;
  letter-spacing: 3.2px;
  text-shadow:
    -2px -2px 0 #ffffff,
    2px -2px 0 #ffffff,
    -2px 2px 0 #ffffff,
    2px 2px 0 #ffffff,
    -2px 0 0 #ffffff,
    2px 0 0 #ffffff,
    0 -2px 0 #ffffff,
    0 2px 0 #ffffff,
    -3px -3px 0 #ffffff,
    3px -3px 0 #ffffff,
    -3px 3px 0 #ffffff,
    3px 3px 0 #ffffff,
    -4px 0 0 #ffffff,
    4px 0 0 #ffffff,
    0 -4px 0 #ffffff,
    0 4px 0 #ffffff;
}

.solution-message-sub {
  font-weight: 700;
  color: #333333;
  font-size: 56px;
  letter-spacing: 1.57px;
  line-height: 1.2;
  text-shadow:
    -2px -2px 0 #ffffff,
    2px -2px 0 #ffffff,
    -2px 2px 0 #ffffff,
    2px 2px 0 #ffffff,
    -2px 0 0 #ffffff,
    2px 0 0 #ffffff,
    0 -2px 0 #ffffff,
    0 2px 0 #ffffff,
    -3px -3px 0 #ffffff,
    3px -3px 0 #ffffff,
    -3px 3px 0 #ffffff,
    3px 3px 0 #ffffff,
    -4px 0 0 #ffffff,
    4px 0 0 #ffffff,
    0 -4px 0 #ffffff,
    0 4px 0 #ffffff;
}

.solution-message-final {
  font-weight: 700;
  color: #333333;
  font-size: 56px;
  letter-spacing: -4.39px;
  line-height: 1.2;
  text-shadow:
    -2px -2px 0 #ffffff,
    2px -2px 0 #ffffff,
    -2px 2px 0 #ffffff,
    2px 2px 0 #ffffff,
    -2px 0 0 #ffffff,
    2px 0 0 #ffffff,
    0 -2px 0 #ffffff,
    0 2px 0 #ffffff,
    -3px -3px 0 #ffffff,
    3px -3px 0 #ffffff,
    -3px 3px 0 #ffffff,
    3px 3px 0 #ffffff,
    -4px 0 0 #ffffff,
    4px 0 0 #ffffff,
    0 -4px 0 #ffffff,
    0 4px 0 #ffffff;
}

.concerns-description {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  font-family: var(--body-1-font-family);
  font-weight: var(--body-1-font-weight);
  font-size: var(--body-1-font-size);
  color: var(--baseblack);
  letter-spacing: var(--body-1-letter-spacing);
  line-height: var(--body-1-line-height);
  text-align: center;
  z-index: 1;
  padding: 0 20px;
}

.features-section {
  display: flex;
  flex-direction: column;
  gap: var(--size-space-400);
  width: 100%;
  max-width: 1440px;
  z-index: 1;
  align-items: center;
}

.features-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--size-space-400);
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

.features-row {
  display: none;
}

.feature-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--size-space-400);
  padding: var(--size-space-600);
  background-color: var(--basewhite);
  width: calc((100% - var(--size-space-400) * 2) / 3);
  box-sizing: border-box;
}

.feature-card:nth-child(n+4) {
  width: calc((100% - var(--size-space-400) * 3) / 4);
}

.feature-card-icon {
  width: 32px;
  height: 32px;
}

.feature-card-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.feature-card-title {
  font-family: var(--subtitle-font-family);
  font-weight: var(--subtitle-font-weight);
  font-size: var(--subtitle-font-size);
  color: var(--primary);
  letter-spacing: var(--subtitle-letter-spacing);
  line-height: var(--subtitle-line-height);
  text-align: center;
}

.performance-showcase {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--size-space-800);
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 32px 48px;
  border: 2px solid var(--primary);
  background-color: var(--basewhite);
  z-index: 1;
  box-sizing: border-box;
}

.performance-title {
  font-family: var(--h-3-font-family);
  font-weight: var(--h-3-font-weight);
  font-size: var(--h-3-font-size);
  color: var(--primary);
  letter-spacing: var(--h-3-letter-spacing);
  line-height: var(--h-3-line-height);
  text-align: center;
  border-bottom: 2px solid var(--baseblack);
  padding-bottom: var(--size-space-300);
  display: inline-block;
}

.performance-images {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 48px;
  width: 100%;
}

.performance-image {
  width: 420px;
  max-width: 100%;
  height: auto;
}

.performance-image img {
  width: 100%;
  height: auto;
}

.performance-image-sp {
  display: none;
}

/* SP Styles */
@media (max-width: 768px) {
  .concerns-section {
    padding: 60px 24px;
    gap: var(--size-space-800);
  }

  .concerns-bg-decoration {
    top: 650px;
  }

  .concerns-header {
    padding: 0;
    gap: 32px;
  }

  .concerns-title-wrapper {
    width: 100%;
    padding-bottom: 12px;
  }

  .concerns-title {
    font-size: var(--h-2-font-size);
    width: 100%;
    flex-wrap: wrap;
  }

  .concerns-list {
    flex-direction: column;
    gap: 8px;
    max-width: 100%;
  }

  .concerns-list-item {
    width: 100%;
    justify-content: center;
    display: flex;
    height: auto;
    white-space: normal;
  }

  .concerns-list-text {
    white-space: normal;
  }

  .solution-box {
    gap: 32px;
    padding: 0;
  }

  .solution-box-bg {
    width: 100px;
  }

  .solution-box-icon {
    width: 100%;
  }

  .solution-company-text {
    font-size: 30px;
    letter-spacing: 1.5px;
    flex-wrap: wrap;
  }

  .solution-company-particle {
    font-size: 26px;
  }

  .solution-message {
    font-size: 60px;
    flex-wrap: wrap;
  }

  .solution-message-sub,
  .solution-message-final {
    font-size: 41px;
  }

  .features-container {
    padding: 0;
    gap: 12px;
  }

  .feature-card {
    padding: 16px;
    width: calc((100% - 12px) / 2);
    flex: none;
  }

  .feature-card:nth-child(n+4) {
    width: calc((100% - 12px) / 2);
  }

  .feature-card:last-child {
    width: 100%;
  }

  .performance-showcase {
    padding: 24px;
    gap: 32px;
    border-width: 2px;
    width: 100%;
    max-width: 100%;
  }

  .performance-title {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .performance-images {
    flex-direction: column;
    gap: 24px;
  }

  .performance-image {
    display: none;
  }

  .performance-image-sp {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1.62;
    background-size: cover;
    background-position: center;
  }

  .performance-image-sp.iimg {
    background-image: url(../images/page-speed-improvement/sp/iimg.png);
  }

  .performance-image-sp.psiimg {
    background-image: url(../images/page-speed-improvement/sp/psiimg.png);
  }
}

/* ========================================
   他社サービスとの比較セクション
   ======================================== */

.comparison-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--size-space-1200);
  padding: 60px 0px;
  position: relative;
  width: 100%;
  background-color: var(--secondary);
}

.comparison-title-wrapper {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0px 0px var(--size-space-300) 0px;
  position: relative;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-color: var(--primary);
}

.comparison-title {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: fit-content;
  font-family: var(--h-2-font-family);
  font-weight: var(--h-2-font-weight);
  font-size: var(--h-2-font-size);
  text-align: center;
  letter-spacing: var(--h-2-letter-spacing);
  line-height: var(--h-2-line-height);
  white-space: nowrap;
  font-style: var(--h-2-font-style);
}

.comparison-title-text {
  color: #333333;
  letter-spacing: var(--h-2-letter-spacing);
  font-family: var(--h-2-font-family);
  font-style: var(--h-2-font-style);
  font-weight: var(--h-2-font-weight);
  line-height: var(--h-2-line-height);
  font-size: var(--h-2-font-size);
}

.comparison-title-emphasis {
  color: #0184ce;
  letter-spacing: var(--h-2-letter-spacing);
  font-family: var(--h-2-font-family);
  font-style: var(--h-2-font-style);
  font-weight: var(--h-2-font-weight);
  line-height: var(--h-2-line-height);
  font-size: var(--h-2-font-size);
}

.comparison-table {
  display: flex;
  align-items: flex-end;
  gap: var(--size-space-100);
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

.comparison-items-column {
  display: flex;
  flex-direction: column;
  width: 165px;
  align-items: center;
  justify-content: center;
  gap: var(--size-space-050);
  position: relative;
  flex-shrink: 0;
}

.comparison-item-row {
  display: flex;
  height: 86px;
  align-items: center;
  justify-content: center;
  padding: var(--size-space-300);
  position: relative;
  width: 100%;
  background-color: var(--basewhite);
}

.comparison-item-text {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  font-family: var(--body-1-font-family);
  font-weight: 700;
  color: #333333;
  font-size: var(--body-1-font-size);
  text-align: center;
  letter-spacing: var(--body-1-letter-spacing);
  line-height: var(--body-1-line-height);
  font-style: var(--body-1-font-style);
}

.comparison-shuwat-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--size-space-050);
  position: relative;
  flex: 1;
  flex-grow: 1;
  border: 4px solid;
  border-color: var(--primary);
}

.comparison-shuwat-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--size-space-100);
  padding: var(--size-space-400);
  position: relative;
  width: 100%;
  background-color: var(--primary);
}

.comparison-shuwat-icon {
  position: relative;
  width: 24px;
  height: 24px;
  aspect-ratio: 1;
}

.comparison-shuwat-name {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  font-family: var(--subtitle-font-family);
  font-weight: var(--subtitle-font-weight);
  color: var(--basewhite);
  font-size: var(--subtitle-font-size);
  text-align: center;
  letter-spacing: var(--subtitle-letter-spacing);
  line-height: var(--subtitle-line-height);
  white-space: nowrap;
  font-style: var(--subtitle-font-style);
}

.comparison-cell {
  display: flex;
  flex-direction: column;
  height: 86px;
  align-items: center;
  justify-content: center;
  gap: var(--size-space-100);
  padding: var(--size-space-300) var(--size-space-400);
  position: relative;
  width: 100%;
  background-color: var(--basewhite);
}

.comparison-cell-text-primary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  font-family: var(--body-1-font-family);
  font-weight: var(--body-1-font-weight);
  color: #333333;
  font-size: var(--body-1-font-size);
  text-align: center;
  letter-spacing: var(--body-1-letter-spacing);
  line-height: var(--body-1-line-height);
  white-space: nowrap;
  font-style: var(--body-1-font-style);
}

.comparison-cell-text-secondary {
  align-self: stretch;
  font-weight: var(--body-1-font-weight);
  color: #333333;
  font-size: var(--body-1-font-size);
  text-align: center;
  letter-spacing: var(--body-1-letter-spacing);
  line-height: var(--body-1-line-height);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--body-1-font-family);
  font-style: var(--body-1-font-style);
}

.comparison-icon {
  position: relative;
  width: 32px;
  height: 32px;
  aspect-ratio: 1;
  flex-shrink: 0;
}

.comparison-check-wrapper {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid var(--primary);
  box-sizing: border-box;
  aspect-ratio: 1;
  flex-shrink: 0;
}

.comparison-check-full {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 62.5%;
  height: 62.5%;
  border-radius: 50%;
  border: 3px solid var(--primary);
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  background-color: transparent;
}

.comparison-competitor-column {
  display: flex;
  flex-direction: column;
  width: 192px;
  align-items: center;
  justify-content: center;
  gap: var(--size-space-050);
  position: relative;
  flex-shrink: 0;
}

.comparison-competitor-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--size-space-100);
  padding: var(--size-space-300) var(--size-space-400);
  position: relative;
  width: 100%;
  background-color: #333333;
}

.comparison-competitor-name {
  font-family: var(--body-1-font-family);
  color: var(--basewhite);
  font-size: var(--body-1-font-size);
  line-height: var(--body-1-line-height);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  font-weight: 700;
  text-align: center;
  letter-spacing: var(--body-1-letter-spacing);
  font-style: var(--body-1-font-style);
}

.comparison-freelance-header {
  display: flex;
  flex-direction: column;
  height: 76px;
  align-items: center;
  justify-content: center;
  gap: var(--size-space-100);
  padding: var(--size-space-300) var(--size-space-400);
  position: relative;
  width: 100%;
  background-color: #333333;
}

.comparison-freelance-name {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  font-family: var(--body-1-font-family);
  font-weight: var(--body-1-font-weight);
  color: var(--basewhite);
  font-size: var(--body-1-font-size);
  text-align: center;
  letter-spacing: var(--body-1-letter-spacing);
  line-height: var(--body-1-line-height);
  white-space: nowrap;
  font-style: var(--body-1-font-style);
}

.comparison-check-triangle {
  top: calc(50.00% - 13px);
  left: calc(50.00% - 14px);
  width: 27px;
  height: 27px;
  border-radius: 13.5px;
  border-color: #333333;
  position: relative;
  border: 3px solid;
  aspect-ratio: 1;
}

/* SP版スタイル */
@media (max-width: 768px) {
  .comparison-section {
    padding: 60px var(--size-space-600);
  }

  .comparison-title-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .comparison-title {
    white-space: normal;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
  }

  .comparison-table {
    width: 390px;
    padding: 3px var(--size-space-600);
    margin-left: calc(-1 * var(--size-space-600));
    margin-right: calc(-1 * var(--size-space-600));
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .comparison-items-column {
    width: 80px;
  }

  .comparison-item-row {
    height: 110px;
    padding: var(--size-space-300) var(--size-space-200);
  }

  .comparison-shuwat-column {
    width: 130px;
    flex: 0 0 130px;
  }

  .comparison-cell {
    height: 110px;
    padding: var(--size-space-300) var(--size-space-200);
  }

  .comparison-competitor-column {
    width: 112px;
  }

  .comparison-competitor-header {
    height: 80px;
    min-height: 80px;
  }

  .comparison-freelance-header {
    height: 80px;
    min-height: 80px;
  }

  .comparison-cell-text-primary {
    white-space: normal;
    width: 100%;
    max-width: 100%;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .comparison-cell-text-secondary {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
  }
}

/* ========================================
   デュアルCTAセクション
   ======================================== */

.site-container .dual-cta-section {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--size-space-600);
  padding: var(--size-space-1200) clamp(var(--size-space-600), 15vw, 220px);
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: var(--baseblack);
}

.site-container .cta-phone {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--size-space-400);
  padding: var(--size-space-800) var(--size-space-1200);
  align-self: stretch;
  background-color: var(--basewhite);
  position: relative;
  flex: 0 0 auto;
}

.site-container .cta-email {
  justify-content: center;
  gap: var(--size-space-400);
  flex: 1;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--size-space-800) var(--size-space-1200);
  position: relative;
  background-color: var(--basewhite);
  max-width: 570px;
}

.site-container .cta-header {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--size-space-200);
  position: relative;
  flex: 0 0 auto;
}

.site-container .cta-icon {
  position: relative;
  width: 24px;
  height: 24px;
  object-fit: cover;
}

.site-container .cta-title-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--size-space-600);
  position: relative;
  flex: 0 0 auto;
}

.site-container .cta-title-decoration {
  position: relative;
  width: 12px;
  height: 1px;
  object-fit: cover;
}

.site-container .cta-title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin-top: -1.00px;
  font-family: var(--subtitle-font-family);
  font-weight: var(--subtitle-font-weight);
  color: var(--baseblack);
  font-size: var(--subtitle-font-size);
  text-align: center;
  letter-spacing: var(--subtitle-letter-spacing);
  line-height: var(--subtitle-line-height);
  white-space: nowrap;
  font-style: var(--subtitle-font-style);
}

.site-container .cta-phone-action {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  flex: 1;
  flex-grow: 1;
  gap: var(--size-space-0);
}

.site-container .cta-phone-button {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  gap: var(--size-space-200);
  position: relative;
  flex: 0 0 auto;
  border-radius: var(--size-radius-200);
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.site-container .cta-button-icon {
  width: 24px;
  height: 24px;
  position: relative;
  aspect-ratio: 1;
}

.site-container .cta-phone-number {
  font-size: 40px;
  line-height: 48.0px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin-top: -1.00px;
  font-family: "Geologica", Helvetica;
  font-weight: 700;
  color: var(--baseblack);
  text-align: center;
  letter-spacing: 0;
  white-space: nowrap;
}

.site-container .cta-phone-hours {
  align-self: stretch;
  font-weight: var(--body-1-font-weight);
  color: var(--baseblack);
  font-size: var(--body-1-font-size);
  text-align: center;
  letter-spacing: var(--body-1-letter-spacing);
  line-height: var(--body-1-line-height);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--body-1-font-family);
  font-style: var(--body-1-font-style);
}

.site-container .cta-email-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--size-space-200);
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.site-container .cta-email-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--size-space-200);
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.site-container .cta-email-message {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin-top: -1.00px;
  font-family: var(--body-1-font-family);
  font-weight: var(--body-1-font-weight);
  color: transparent;
  font-size: var(--body-1-font-size);
  letter-spacing: var(--body-1-letter-spacing);
  line-height: var(--body-1-line-height);
  white-space: nowrap;
  font-style: var(--body-1-font-style);
}

.site-container .cta-message-normal {
  color: var(--baseblack);
  font-family: var(--body-1-font-family);
  font-style: var(--body-1-font-style);
  font-weight: var(--body-1-font-weight);
  letter-spacing: var(--body-1-letter-spacing);
  line-height: var(--body-1-line-height);
  font-size: var(--body-1-font-size);
}

.site-container .cta-message-emphasis {
  color: var(--primary);
  font-family: var(--body-1-font-family);
  font-style: var(--body-1-font-style);
  font-weight: var(--body-1-font-weight);
  letter-spacing: var(--body-1-letter-spacing);
  line-height: var(--body-1-line-height);
  font-size: var(--body-1-font-size);
}

.site-container .cta-email-button {
  all: unset;
  box-sizing: border-box;
  display: flex;
  height: 60px;
  gap: var(--size-space-300);
  padding: var(--size-space-400) var(--size-space-600);
  position: relative;
  align-self: stretch;
  width: 100%;
  background-color: var(--primary);
  border-radius: var(--size-radius-200);
  align-items: center;
  justify-content: center;
  border: 2px solid var(--primary);
  cursor: pointer;
}

.site-container .cta-button-text {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  font-family: var(--button-font-family);
  font-weight: var(--button-font-weight);
  color: var(--basewhite);
  font-size: var(--button-font-size);
  text-align: center;
  line-height: var(--button-line-height);
  white-space: nowrap;
  position: relative;
  letter-spacing: var(--button-letter-spacing);
  font-style: var(--button-font-style);
}

.site-container .cta-badge {
  display: flex;
  width: 100px;
  height: 100px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: absolute;
  top: -16px;
  right: -16px;
  background-color: var(--secondary);
  border-radius: var(--size-radius-full);
  aspect-ratio: 1;
}

.site-container .cta-badge-text {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  font-family: var(--subtitle-font-family);
  font-weight: var(--subtitle-font-weight);
  color: var(--primary);
  font-size: var(--subtitle-font-size);
  letter-spacing: var(--subtitle-letter-spacing);
  line-height: var(--subtitle-line-height);
  white-space: nowrap;
  font-style: var(--subtitle-font-style);
}

/* SP版スタイル統合 - メディアクエリ */
@media (max-width: 768px) {
  .site-container .dual-cta-section {
    flex-direction: column;
    padding: var(--size-space-600);
    gap: var(--size-space-300);
  }

  .site-container .cta-phone {
    width: 100%;
    padding: var(--size-space-600) var(--size-space-800);
    gap: var(--size-space-300);
  }

  .site-container .cta-email {
    width: 100%;
    padding: var(--size-space-600) var(--size-space-800);
    gap: var(--size-space-300);
  }

  .site-container .cta-icon {
    width: 20px;
    height: 20px;
  }

  .site-container .cta-title-wrapper {
    gap: var(--size-space-300);
  }

  .site-container .cta-phone-number {
    font-size: 36px;
    line-height: 43.2px;
  }

  .site-container .cta-badge {
    width: 64px;
    height: 64px;
    top: -5px;
  }

  .site-container .cta-badge-text {
    font-size: 20px;
    line-height: 28.0px;
    font-family: "Noto Sans JP", Helvetica;
  }
}

/* ========================================
   よくある質問セクション
   ======================================== */

.site-container .faq-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--size-space-1200);
  padding: 60px clamp(var(--size-space-600), 5vw, 220px);
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: var(--basegrey-01);
}

.site-container .faq-title-wrapper {
  display: inline-flex;
  justify-content: center;
  gap: 10px;
  border-color: var(--primary);
  align-items: center;
  padding: 0px 0px var(--size-space-300) 0px;
  position: relative;
  flex: 0 0 auto;
  border-bottom-width: 2px;
  border-bottom-style: solid;
}

.site-container .faq-title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin-top: -2.00px;
  font-family: var(--h-2-font-family);
  font-weight: var(--h-2-font-weight);
  color: transparent;
  font-size: var(--h-2-font-size);
  text-align: center;
  letter-spacing: var(--h-2-letter-spacing);
  line-height: var(--h-2-line-height);
  white-space: nowrap;
  font-style: var(--h-2-font-style);
}

.site-container .faq-title-text {
  color: #333333;
  letter-spacing: var(--h-2-letter-spacing);
  font-family: var(--h-2-font-family);
  font-style: var(--h-2-font-style);
  font-weight: var(--h-2-font-weight);
  line-height: var(--h-2-line-height);
  font-size: var(--h-2-font-size);
}

.site-container .faq-title-emphasis {
  color: #0184ce;
  letter-spacing: var(--h-2-letter-spacing);
  font-family: var(--h-2-font-family);
  font-style: var(--h-2-font-style);
  font-weight: var(--h-2-font-weight);
  line-height: var(--h-2-line-height);
  font-size: var(--h-2-font-size);
}

.site-container .faq-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--size-space-200);
  position: relative;
  align-self: stretch;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  flex: 0 0 auto;
}

.site-container .faq-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: var(--size-space-400);
  padding: var(--size-space-400) var(--size-space-600) var(--size-space-400) var(--size-space-600);
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: var(--basewhite);
}

.site-container details {
  cursor: pointer;
}

.site-container summary {
  list-style: none;
  cursor: pointer;
}

.site-container summary::-webkit-details-marker {
  display: none;
}

.site-container details[open] summary .faq-toggle-icon img {
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}

.site-container summary .faq-toggle-icon img {
  transition: transform 0.3s ease;
}

.site-container summary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.site-container .faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--size-space-400);
  align-self: stretch;
  width: 100%;
  position: relative;
  cursor: pointer;
}

.site-container .faq-toggle-icon {
  width: 24px;
  height: 24px;
  position: relative;
  aspect-ratio: 1;
  flex-shrink: 0;
}

.site-container .faq-label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin-top: -1.00px;
  font-family: "Geologica", Helvetica;
  font-weight: 700;
  color: var(--primary);
  font-size: 24px;
  text-align: center;
  letter-spacing: 0;
  line-height: 33.6px;
  white-space: nowrap;
  flex-shrink: 0;
}

.site-container .faq-question-text {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 1;
  font-family: var(--body-1-font-family);
  font-weight: var(--body-1-font-weight);
  color: #333333;
  font-size: var(--body-1-font-size);
  letter-spacing: var(--body-1-letter-spacing);
  line-height: var(--body-1-line-height);
  font-style: var(--body-1-font-style);
}

.site-container .faq-answer {
  display: flex;
  align-items: flex-start;
  gap: var(--size-space-400);
  align-self: stretch;
  width: 100%;
  position: relative;
  flex: 0 0 auto;
}

.site-container .faq-answer-text {
  flex: 1;
  margin-top: -1.00px;
  font-family: var(--body-1-font-family);
  font-weight: var(--body-1-font-weight);
  color: #333333;
  font-size: var(--body-1-font-size);
  line-height: var(--body-1-line-height);
  position: relative;
  letter-spacing: var(--body-1-letter-spacing);
  font-style: var(--body-1-font-style);
}

/* レスポンシブ対応 - SP版スタイル */
@media (max-width: 768px) {
  .site-container .faq-section {
    padding: 60px var(--size-space-600);
  }

  .site-container .faq-title {
    font-size: clamp(28px, 8vw, var(--h-2-font-size));
  }

  .site-container .faq-label {
    font-size: clamp(20px, 6vw, 24px);
    line-height: 1.4;
  }

  .site-container .faq-question-text,
  .site-container .faq-answer-text {
    font-size: clamp(14px, 4vw, var(--body-1-font-size));
  }
}

/* ========================================
   ご契約までの流れセクション
   ======================================== */

.site-container .flow-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--size-space-1200);
  padding: clamp(60px, 8vw, 80px) clamp(24px, 5vw, 220px);
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: var(--basewhite);
}

.site-container .flow-title-wrapper {
  display: inline-flex;
  justify-content: center;
  gap: 10px;
  border-color: var(--primary);
  align-items: center;
  padding: 0px 0px var(--size-space-300) 0px;
  position: relative;
  flex: 0 0 auto;
  border-bottom-width: 2px;
  border-bottom-style: solid;
}

.site-container .flow-title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin-top: -2.00px;
  font-family: var(--h-2-font-family);
  font-weight: var(--h-2-font-weight);
  color: transparent;
  font-size: var(--h-2-font-size);
  text-align: center;
  letter-spacing: var(--h-2-letter-spacing);
  line-height: var(--h-2-line-height);
  white-space: nowrap;
  font-style: var(--h-2-font-style);
}

.site-container .flow-title-text {
  color: #333333;
  letter-spacing: var(--h-2-letter-spacing);
  font-family: var(--h-2-font-family);
  font-style: var(--h-2-font-style);
  font-weight: var(--h-2-font-weight);
  line-height: var(--h-2-line-height);
  font-size: var(--h-2-font-size);
}

.site-container .flow-title-emphasis {
  color: #0184ce;
  letter-spacing: var(--h-2-letter-spacing);
  font-family: var(--h-2-font-family);
  font-style: var(--h-2-font-style);
  font-weight: var(--h-2-font-weight);
  line-height: var(--h-2-line-height);
  font-size: var(--h-2-font-size);
}

.site-container .flow-steps-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  align-self: stretch;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  flex: 0 0 auto;
  gap: var(--size-space-0);
}

.site-container .flow-step-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--size-space-800);
  padding: var(--size-space-600) var(--size-space-800);
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  border: 1px solid;
  border-color: #333333;
}

.site-container .flow-step-label {
  width: 50px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: "Geologica", Helvetica;
  font-weight: 700;
  color: var(--primary);
  font-size: 20px;
  text-align: center;
  line-height: 22.0px;
}

.site-container .flow-step-label-text {
  letter-spacing: 0;
}

.site-container .flow-step-label-number {
  font-size: 40px;
  letter-spacing: -0.80px;
  line-height: 44.0px;
}

.site-container .flow-step-icon-01,
.site-container .flow-step-icon-02,
.site-container .flow-step-icon-03,
.site-container .flow-step-icon-04 {
  width: 160px;
  height: 160px;
  aspect-ratio: 1;
  position: relative;
  background-size: cover;
  background-position: 50% 50%;
}

/* PC版の背景画像 */
.site-container .flow-step-icon-01 {
  background-image: url(../images/page-speed-improvement/pc/point01-1.png);
}

.site-container .flow-step-icon-02 {
  background-image: url(../images/page-speed-improvement/pc/point01-2.png);
}

.site-container .flow-step-icon-03 {
  background-image: url(../images/page-speed-improvement/pc/point01-3.png);
}

.site-container .flow-step-icon-04 {
  background-image: url(../images/page-speed-improvement/pc/point01-4.png);
}

.site-container .flow-step-content {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--size-space-300);
  flex: 1;
  flex-grow: 1;
  display: flex;
  position: relative;
}

.site-container .flow-step-title {
  position: relative;
  display: flex;
  align-items: center;
  align-self: stretch;
  margin-top: -1.00px;
  font-family: var(--subtitle-font-family);
  font-weight: var(--subtitle-font-weight);
  color: #333333;
  font-size: var(--subtitle-font-size);
  letter-spacing: var(--subtitle-letter-spacing);
  line-height: var(--subtitle-line-height);
  font-style: var(--subtitle-font-style);
}

.site-container .text-wrapper-25 {
  position: relative;
  align-self: stretch;
  font-family: var(--body-1-font-family);
  font-weight: var(--body-1-font-weight);
  color: #333333;
  font-size: var(--body-1-font-size);
  letter-spacing: var(--body-1-letter-spacing);
  line-height: var(--body-1-line-height);
  font-style: var(--body-1-font-style);
}

.site-container .flow-step-buttons {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--size-space-400);
  position: relative;
  flex: 0 0 auto;
}

.site-container .flow-step-button-contact {
  all: unset;
  box-sizing: border-box;
  display: flex;
  width: 173px;
  height: 50px;
  gap: var(--size-space-200);
  padding: var(--size-space-400);
  position: relative;
  background-color: var(--primary);
  border-radius: var(--size-radius-200);
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.site-container .flow-step-button-contact:hover {
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.site-container .flow-step-button-contact:focus-visible {
  outline: 2px solid #4a90e2 !important;
  outline-offset: 2px;
}

.site-container .flow-button-icon {
  width: 20px;
  height: 20px;
  margin-top: -1.00px;
  margin-bottom: -1.00px;
  position: relative;
  aspect-ratio: 1;
}

.site-container .flow-button-text {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  margin-top: -1.50px;
  font-family: var(--button-small-font-family);
  font-weight: var(--button-small-font-weight);
  color: var(--basewhite);
  font-size: var(--button-small-font-size);
  text-align: center;
  letter-spacing: var(--button-small-letter-spacing);
  line-height: var(--button-small-line-height);
  font-style: var(--button-small-font-style);
}

.site-container .flow-step-button-phone {
  all: unset;
  box-sizing: border-box;
  display: flex;
  width: 173px;
  height: 50px;
  gap: var(--size-space-200);
  padding: var(--size-space-400);
  position: relative;
  background-color: #333333;
  border-radius: var(--size-radius-200);
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.site-container .flow-step-button-phone:hover {
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.site-container .flow-step-button-phone:focus-visible {
  outline: 2px solid #4a90e2 !important;
  outline-offset: 2px;
}

.site-container .flow-step-button-phone .flow-button-icon {
  margin-left: -5.50px;
}

.site-container .flow-step-button-phone .flow-button-text {
  width: fit-content;
  margin-top: -1.00px;
  margin-right: -5.50px;
  font-family: "Geologica", Helvetica;
  font-weight: 700;
  font-size: 18px;
  line-height: 18px;
  white-space: nowrap;
  letter-spacing: 0;
}

.site-container .flow-step-arrow {
  position: relative;
  width: 1px;
  height: 20px;
  object-fit: cover;
}

/* SP版スタイル - メディアクエリ */
@media (max-width: 768px) {
  .site-container .flow-section {
    padding: clamp(40px, 10vw, 60px) var(--size-space-600);
  }

  .site-container .flow-step-card {
    flex-direction: column;
    gap: var(--size-space-600);
    padding: var(--size-space-600);
  }

  .site-container .flow-step-icon-01 {
    background-image: url(../images/page-speed-improvement/sp/point01-1.png);
  }

  .site-container .flow-step-icon-02 {
    background-image: url(../images/page-speed-improvement/sp/point01-2.png);
  }

  .site-container .flow-step-icon-03 {
    background-image: url(../images/page-speed-improvement/sp/point01-3.png);
  }

  .site-container .flow-step-icon-04 {
    background-image: url(../images/page-speed-improvement/sp/point01-4.png);
  }

  .site-container .flow-step-buttons {
    flex-direction: column;
    width: 100%;
  }

  .site-container .flow-step-button-contact,
  .site-container .flow-step-button-phone {
    width: 100%;
  }
}

/* ========================================
   料金プランセクション
   ======================================== */

.site-container .pricing-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--size-space-1200);
  padding: 60px clamp(24px, 15vw, 220px);
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: var(--basewhite);
}

.site-container .pricing-title-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex: 0 0 auto;
}

.site-container .pricing-title {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--h-2-font-family);
  font-weight: var(--h-2-font-weight);
  color: transparent;
  font-size: var(--h-2-font-size);
  text-align: center;
  letter-spacing: var(--h-2-letter-spacing);
  line-height: var(--h-2-line-height);
  white-space: nowrap;
  font-style: var(--h-2-font-style);
}

.site-container .pricing-title-text {
  color: #333333;
  font-family: var(--h-2-font-family);
  font-size: var(--h-2-font-size);
  font-weight: var(--h-2-font-weight);
  letter-spacing: var(--h-2-letter-spacing);
  line-height: var(--h-2-line-height);
  font-style: var(--h-2-font-style);
}

.site-container .pricing-title-emphasis {
  color: var(--primary);
  font-family: var(--h-2-font-family);
  font-size: var(--h-2-font-size);
  font-weight: var(--h-2-font-weight);
  letter-spacing: var(--h-2-letter-spacing);
  line-height: var(--h-2-line-height);
  font-style: var(--h-2-font-style);
}

.site-container .pricing-container {
  flex-direction: column;
  gap: var(--size-space-600);
  padding: var(--size-space-800) var(--size-space-1200);
  flex: 0 0 auto;
  background-color: var(--basegrey-01);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  align-self: stretch;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

.site-container .pricing-amount-wrapper {
  display: flex;
  width: 100%;
  align-items: baseline;
  justify-content: center;
  padding: var(--size-space-0) 0px var(--size-space-400) 0px;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-color: var(--primary);
  position: relative;
  flex: 0 0 auto;
  gap: var(--size-space-0);
}

.site-container .pricing-amount {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin-top: -2px;
  font-family: "Geologica", Helvetica;
  font-weight: 900;
  color: #333333;
  font-size: 50px;
  text-align: center;
  letter-spacing: -1px;
  line-height: 60px;
}

.site-container .pricing-currency {
  letter-spacing: -0.5px;
}

.site-container .pricing-number {
  font-size: 72px;
  letter-spacing: -1.04px;
  line-height: 86.4px;
}

.site-container .pricing-suffix {
  font-size: 40px;
  letter-spacing: -0.32px;
  line-height: 48px;
}

.site-container .pricing-note {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  font-family: var(--body-1-font-family);
  font-weight: var(--body-1-font-weight);
  color: #333333;
  font-size: var(--body-1-font-size);
  text-align: center;
  letter-spacing: var(--body-1-letter-spacing);
  line-height: var(--body-1-line-height);
  white-space: nowrap;
  font-style: var(--body-1-font-style);
}

.site-container .pricing-services-list {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: auto;
  align-items: center;
  justify-content: center;
  gap: var(--size-space-400);
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-container .pricing-service-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: var(--size-space-150) var(--size-space-300) var(--size-space-150) var(--size-space-300);
  position: relative;
  flex: 0 0 auto;
  background-color: var(--basewhite);
}

.site-container .pricing-service-text {
  font-family: var(--body-1-font-family);
  font-weight: var(--body-1-font-weight);
  color: #333333;
  font-size: var(--body-1-font-size);
  letter-spacing: var(--body-1-letter-spacing);
  line-height: var(--body-1-line-height);
  font-style: var(--body-1-font-style);
}

.site-container .pricing-services-list .pricing-note {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  font-family: var(--body-1-font-family);
  font-weight: var(--body-1-font-weight);
  color: #333333;
  font-size: var(--body-1-font-size);
  text-align: center;
  letter-spacing: var(--body-1-letter-spacing);
  line-height: var(--body-1-line-height);
  white-space: nowrap;
  font-style: var(--body-1-font-style);
}

.site-container .pricing-description {
  position: relative;
  width: 100%;
  font-family: var(--body-1-font-family);
  font-weight: var(--body-1-font-weight);
  color: #333333;
  font-size: var(--body-1-font-size);
  text-align: center;
  letter-spacing: var(--body-1-letter-spacing);
  line-height: var(--body-1-line-height);
  font-style: var(--body-1-font-style);
}

.site-container .pricing-button {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  height: 60px;
  gap: var(--size-space-300);
  padding: var(--size-space-400) var(--size-space-600) var(--size-space-400) var(--size-space-600);
  position: relative;
  background-color: var(--primary);
  border-radius: var(--size-radius-200);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 2px solid var(--primary);
}

.site-container .pricing-button:hover {
  opacity: 0.9;
}

.site-container .pricing-button-icon {
  width: 20px;
  height: 20px;
  position: relative;
  aspect-ratio: 1;
}

.site-container .pricing-button-text {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  font-family: var(--button-font-family);
  font-weight: var(--button-font-weight);
  color: var(--basewhite);
  font-size: var(--button-font-size);
  letter-spacing: var(--button-letter-spacing);
  line-height: var(--button-line-height);
  font-style: var(--button-font-style);
}

/* SP版スタイル - メディアクエリ */
@media (max-width: 768px) {
  .site-container .pricing-section {
    gap: var(--size-space-800);
    padding: 60px var(--size-space-600);
  }

  .site-container .pricing-title-wrapper {
    display: inline-flex;
    justify-content: center;
    gap: 10px;
    border-color: var(--primary);
    padding: 0px 0px var(--size-space-300) 0px;
    border-bottom-width: 2px;
    border-bottom-style: solid;
  }

  .site-container .pricing-title-text {
    color: var(--primary);
  }

  .site-container .pricing-title-emphasis {
    color: #333333;
  }

  .site-container .pricing-container {
    padding: var(--size-space-800) var(--size-space-600);
  }

  .site-container .pricing-amount {
    font-size: 30px;
    letter-spacing: -0.6px;
    line-height: 36px;
  }

  .site-container .pricing-currency {
    font-size: 30px;
    letter-spacing: -0.18px;
  }

  .site-container .pricing-number {
    font-size: 50px;
    letter-spacing: -0.5px;
    line-height: 60px;
  }

  .site-container .pricing-suffix {
    font-size: 30px;
    letter-spacing: -0.18px;
    line-height: 36px;
  }

  .site-container .pricing-services-list {
    gap: var(--size-space-200);
  }
}

/* ========================================
   関連サービスセクション
   ======================================== */

.site-container .related-services-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--size-space-800);
  padding: 60px 0px;
  position: relative;
  align-self: stretch;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  flex: 0 0 auto;
  background-color: var(--basewhite);
}

.site-container .related-services-header {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--size-space-200);
  border-color: var(--primary);
  align-items: center;
  padding: 0px 0px var(--size-space-300) 0px;
  position: relative;
  flex: 0 0 auto;
  border-bottom-width: 2px;
  border-bottom-style: solid;
}

.site-container .related-services-subtitle {
  margin-top: -2.00px;
  font-weight: var(--body-1-font-weight);
  color: #333333;
  font-size: var(--body-1-font-size);
  line-height: var(--body-1-line-height);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  font-family: var(--body-1-font-family);
  letter-spacing: var(--body-1-letter-spacing);
  font-style: var(--body-1-font-style);
}

.site-container .related-services-title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  font-family: var(--h-2-font-family);
  font-weight: var(--h-2-font-weight);
  color: transparent;
  font-size: var(--h-2-font-size);
  letter-spacing: var(--h-2-letter-spacing);
  line-height: var(--h-2-line-height);
  font-style: var(--h-2-font-style);
}

.site-container .related-services-title-text {
  color: #333333;
}

.site-container .related-services-title-emphasis {
  color: var(--primary);
}

.site-container .related-services-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

.site-container .related-services-row {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: auto;
  align-items: flex-start;
  position: relative;
  margin-top: -1px;
}

.site-container .related-services-row.half-width {
  width: 50%;
}

.site-container .related-services-row:first-child {
  margin-top: 0;
}

.site-container .related-service-link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--size-space-400);
  padding: var(--size-space-400) var(--size-space-600) var(--size-space-400) var(--size-space-600);
  position: relative;
  flex: 1;
  background-color: var(--basewhite);
  border: 1px solid;
  border-color: var(--primary);
  margin-left: -1px;
  cursor: pointer;
}

.site-container .related-service-link:hover {
  background-color: var(--secondary);
  transition: background-color 0.3s ease;
}

.site-container .related-service-link:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.site-container .related-services-row .related-service-link:first-child {
  margin-left: 0;
}

.site-container .related-service-text {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 1;
  height: auto;
  margin-top: -1.00px;
  font-family: var(--body-1-font-family);
  font-weight: var(--body-1-font-weight);
  color: #333333;
  font-size: var(--body-1-font-size);
  letter-spacing: var(--body-1-letter-spacing);
  line-height: var(--body-1-line-height);
  white-space: nowrap;
  font-style: var(--body-1-font-style);
}

.site-container .related-service-icon {
  position: relative;
  width: 24px;
  height: 24px;
  aspect-ratio: 1;
  flex-shrink: 0;
}

/* SP版スタイル - メディアクエリ */
@media (max-width: 767px) {
  .site-container .related-services-section {
    padding: 60px var(--size-space-600);
  }

  .site-container .related-services-row {
    flex-direction: column;
    width: 100%;
    height: auto;
  }

  .site-container .related-service-link {
    width: 100%;
    margin-left: 0;
    margin-top: -1px;
    padding: var(--size-space-300) var(--size-space-400) var(--size-space-300) var(--size-space-400);
  }

  .site-container .related-services-row .related-service-link:first-child {
    margin-top: 0;
  }

  .site-container .related-services-row .related-service-link:not(:first-child) {
    margin-top: -1px;
  }

  .site-container .related-service-text {
    white-space: normal;
    height: auto;
  }

  .site-container .related-services-row.half-width {
    width: 100%;
  }
}

/* ========================================
   実績セクション
   ======================================== */

.site-container .results-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--size-space-800);
  padding: 60px clamp(24px, 5vw, 220px);
  position: relative;
  align-self: stretch;
  width: 100%;
  max-width: 100%;
  flex: 0 0 auto;
  background-color: var(--basegrey-01);
  box-sizing: border-box;
}

.site-container .results-title-wrapper {
  display: inline-flex;
  justify-content: center;
  gap: 10px;
  border-color: var(--primary);
  align-items: center;
  padding: 0px 0px var(--size-space-300) 0px;
  position: relative;
  flex: 0 0 auto;
  border-bottom-width: 2px;
  border-bottom-style: solid;
}

.site-container .results-title {
  position: relative;
  display: inline-block;
  width: fit-content;
  margin-top: -2.00px;
  font-family: var(--h-2-font-family);
  font-weight: var(--h-2-font-weight);
  color: transparent;
  font-size: var(--h-2-font-size);
  text-align: center;
  letter-spacing: var(--h-2-letter-spacing);
  line-height: var(--h-2-line-height);
  font-style: var(--h-2-font-style);
}

.site-container .results-title-text {
  color: #333333;
  letter-spacing: var(--h-2-letter-spacing);
  font-family: var(--h-2-font-family);
  font-style: var(--h-2-font-style);
  font-weight: var(--h-2-font-weight);
  line-height: var(--h-2-line-height);
  font-size: var(--h-2-font-size);
  display: inline;
  white-space: normal;
}

.site-container .results-title-emphasis {
  color: #0184ce;
  letter-spacing: var(--h-2-letter-spacing);
  font-family: var(--h-2-font-family);
  font-style: var(--h-2-font-style);
  font-weight: var(--h-2-font-weight);
  line-height: var(--h-2-line-height);
  font-size: var(--h-2-font-size);
  display: inline;
  white-space: normal;
}

.site-container .results-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: var(--size-space-800);
  position: relative;
  align-self: stretch;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  flex: 0 0 auto;
}

.site-container .result-card {
  display: flex;
  flex-direction: column;
  position: relative;
  flex: 1 1 calc(33.333% - calc(var(--size-space-800) * 2 / 3));
  min-width: 0;
  max-width: 333px;
}

.site-container .result-card-image {
  position: relative;
  align-self: stretch;
  width: 100%;
  aspect-ratio: 1.78;
  background-size: cover;
  background-position: 50% 50%;
}

.site-container .result-card-image picture,
.site-container .result-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.site-container .result-card-content {
  flex-direction: column;
  gap: var(--size-space-200);
  padding: var(--size-space-400);
  background-color: var(--basewhite);
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  position: relative;
  align-self: stretch;
  width: 100%;
  min-height: 137px;
}

.site-container .result-card-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  position: relative;
  align-self: stretch;
  margin-top: -2.00px;
  font-family: var(--body-1-font-family);
  font-weight: var(--body-1-font-weight);
  color: #333333;
  font-size: var(--body-1-font-size);
  letter-spacing: var(--body-1-letter-spacing);
  line-height: var(--body-1-line-height);
  font-style: var(--body-1-font-style);
  min-height: 77px;
  height: 77px;
}

.site-container .result-card-description {
  position: relative;
  align-self: stretch;
  font-family: var(--body-2-font-family);
  font-weight: var(--body-2-font-weight);
  color: #333333;
  font-size: var(--body-2-font-size);
  letter-spacing: var(--body-2-letter-spacing);
  line-height: var(--body-2-line-height);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 0;
  line-clamp: 0;
  -webkit-box-orient: vertical;
  font-style: var(--body-2-font-style);
}

.site-container .results-link-button {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  gap: var(--size-space-200);
  padding: var(--size-space-400) var(--size-space-300) var(--size-space-400) var(--size-space-400);
  position: relative;
  flex: 0 0 auto;
  border-radius: 99px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.site-container .results-link-button:hover {
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.site-container .results-link-button:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.site-container .results-link-text {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin-top: -1.50px;
  font-family: var(--button-small-font-family);
  font-weight: var(--button-small-font-weight);
  color: #333333;
  font-size: var(--button-small-font-size);
  text-align: center;
  line-height: var(--button-small-line-height);
  white-space: nowrap;
  position: relative;
  letter-spacing: var(--button-small-letter-spacing);
  font-style: var(--button-small-font-style);
}

.site-container .results-link-icon {
  width: 20px;
  height: 20px;
  position: relative;
  aspect-ratio: 1;
}

.site-container .results-link-icon picture,
.site-container .results-link-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* レスポンシブ対応 - SP版スタイル */
@media (max-width: 768px) {
  .site-container .results-section {
    padding: 60px var(--size-space-600);
  }

  .site-container .results-title-wrapper {
    width: 100%;
    display: flex;
  }

  .site-container .results-title {
    white-space: normal;
    width: 100%;
    text-align: center;
  }

  .site-container .results-title-text,
  .site-container .results-title-emphasis {
    display: inline;
    white-space: normal;
  }

  .site-container .result-card {
    width: 100%;
    flex: 1 1 100%;
  }

  .site-container .result-card-content {
    min-height: 137px;
  }

  .site-container .result-card-title {
    min-height: 77px;
    height: 77px;
  }
}

/* ========================================
   速度診断セクション
   ======================================== */

.site-container .speed-diagnosis-section {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: var(--space-xxl) 20px;
  background-color: #333333;
  position: relative;
  overflow-x: hidden;
  overflow-y: visible;
}

.site-container .speed-diagnosis-container {
  display: flex;
  width: 100%;
  max-width: 800px;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-l);
  padding: var(--space-xl) var(--space-xxl);
  background-color: var(--basewhite);
  position: relative;
}

/* Left Content Column */
.site-container .speed-diagnosis-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-m);
  flex: 1;
  z-index: 1;
}

.site-container .speed-diagnosis-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-s);
}

.site-container .speed-diagnosis-icon {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.site-container .speed-diagnosis-title-wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-l);
}

.site-container .speed-diagnosis-title {
  font-family: var(--subtitle-font-family);
  font-weight: var(--subtitle-font-weight);
  font-size: var(--subtitle-font-size);
  color: #333333;
  line-height: var(--subtitle-line-height);
}

.site-container .speed-diagnosis-title-decoration {
  width: 12px;
  height: auto;
}

.site-container .speed-diagnosis-description {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  font-family: var(--body-1-font-family);
  font-weight: var(--body-1-font-weight);
  font-size: var(--body-1-font-size);
  line-height: var(--body-1-line-height);
  color: #333333;
  white-space: normal;
  text-align: center;
}

.site-container .speed-diagnosis-text-highlight {
  color: var(--primary);
  font-weight: 700;
  margin: 0 2px;
}

.site-container .speed-diagnosis-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-m);
  padding: var(--space-m) var(--space-xl);
  background: linear-gradient(132deg, rgba(1, 132, 206, 1) 0%, rgba(51, 51, 51, 1) 100%);
  border-radius: var(--size-radius-200);
  color: var(--basewhite);
  font-family: var(--subtitle-font-family);
  font-weight: var(--subtitle-font-weight);
  font-size: 18px;
  line-height: 1.2;
  transition: opacity 0.3s;
  width: fit-content;
  border: 2px solid var(--primary);
  cursor: pointer;
}

.site-container .speed-diagnosis-button:hover {
  background: #ffffff;
}

.site-container .speed-diagnosis-button:hover .speed-diagnosis-button-text {
  color: var(--primary);
}

.site-container .speed-diagnosis-button:hover .speed-diagnosis-button-icon {
  filter: invert(34%) sepia(98%) saturate(1838%) hue-rotate(184deg) brightness(95%) contrast(101%);
}

.site-container .speed-diagnosis-button-icon {
  width: 24px;
  height: 24px;
}

/* Badge inside button for PC */
.site-container .speed-diagnosis-badge-in-button {
  background-color: var(--basewhite);
  color: #333;
  font-size: 12px;
  padding: 2px 10px;
  border-radius: 99px;
  font-weight: 500;
  margin-left: auto;
  white-space: nowrap;
}

/* Right Visuals Column */
.site-container .speed-diagnosis-visuals {
  position: relative;
  width: 280px;
  height: 200px;
  flex-shrink: 0;
}

.site-container .speed-diagnosis-phone-1 {
  position: absolute;
  width: 150px;
  top: 0;
  left: 20px;
  z-index: 1;
}

.site-container .speed-diagnosis-phone-1 img,
.site-container .speed-diagnosis-phone-2 img {
  width: 100%;
  height: auto;
  display: block;
}

.site-container .speed-diagnosis-phone-2 {
  position: absolute;
  width: 150px;
  top: 50px;
  left: 110px;
  z-index: 2;
}

/* Floating Free Badge */
.site-container .speed-diagnosis-free-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  background-color: var(--secondary);
  border-radius: 50%;
  color: var(--primary);
  font-family: var(--subtitle-font-family);
  font-weight: var(--subtitle-font-weight);
  font-size: var(--subtitle-font-size);
  position: absolute;
  top: -16px;
  left: -20px;
  z-index: 10;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Default Decoration Images (PC) */
.site-container .speed-diagnosis-decoration-1 {
  position: absolute;
  width: 86px;
  left: calc(50% + 293px);
  top: 117px;
  z-index: 20;
  pointer-events: none;
}

.site-container .speed-diagnosis-decoration-1 img,
.site-container .speed-diagnosis-decoration-2 img {
  width: 100%;
  height: auto;
  display: block;
}

.site-container .speed-diagnosis-decoration-2 {
  position: absolute;
  left: calc(50% + 51px);
  top: 142px;
  width: 100px;
  pointer-events: none;
  z-index: 20;
}

/* SP Media Query */
@media (max-width: 768px) {
  .site-container .speed-diagnosis-section {
    padding: var(--space-l);
  }

  .site-container .speed-diagnosis-container {
    flex-direction: column;
    padding: var(--space-l);
    gap: var(--space-xl);
    max-width: 100%;
  }

  .site-container .speed-diagnosis-content {
    width: 100%;
  }

  .site-container .speed-diagnosis-icon {
    width: 20px;
    height: 20px;
  }

  .site-container .speed-diagnosis-button {
    width: 100%;
    justify-content: center;
    padding: var(--space-m) var(--space-l);
  }

  .site-container .speed-diagnosis-free-badge {
    width: 80px;
    height: 80px;
    top: -16px;
    left: auto;
    right: -10px;
    font-size: 24px;
  }

  .site-container .speed-diagnosis-badge-in-button {
    display: none;
  }

  .site-container .speed-diagnosis-visuals {
    width: 100%;
    height: 200px;
    margin-top: var(--space-s);
    display: flex;
    justify-content: center;
  }

  .site-container .speed-diagnosis-phone-1 {
    left: calc(50% - 10px);
    top: 0;
  }

  .site-container .speed-diagnosis-phone-2 {
    left: calc(50% - 120px);
    top: 50px;
  }

  .site-container .speed-diagnosis-decoration-1 {
    display: block;
    width: 70px;
    top: auto;
    bottom: -10px;
    left: auto;
    right: -10px;
    transform: none;
  }

  .site-container .speed-diagnosis-decoration-2 {
    display: block;
    width: 25%;
    left: 0px;
    top: auto;
    bottom: -10px;
    transform: none;
  }
}

/* ========================================
   強みセクション
   ======================================== */

.site-container .strengths-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--size-space-1200);
  padding: clamp(40px, 10vw, 80px) clamp(24px, 15vw, 220px);
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: var(--basewhite);
  overflow: hidden;
}

.site-container .strengths-bg-decoration-1 {
  position: absolute;
  top: calc(50% - 60vh);
  left: calc(50% - 50vw);
  width: 100vw;
  height: clamp(300px, 30vh, 550px);
  transform: rotate(-40deg);
  mix-blend-mode: multiply;
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 1) 0%,
      rgba(234, 248, 255, 1) 100%);
}

.site-container .strengths-bg-decoration-2 {
  position: absolute;
  top: calc(50% + 10vh);
  left: calc(50% - 48vw);
  width: 100vw;
  height: clamp(300px, 30vh, 550px);
  transform: rotate(-40deg);
  mix-blend-mode: multiply;
  background: linear-gradient(90deg,
      rgba(234, 248, 255, 1) 0%,
      rgba(255, 255, 255, 1) 100%);
}

.site-container .strengths-title-wrapper {
  display: flex;
  justify-content: center;
  gap: 10px;
  border-color: var(--primary);
  align-items: center;
  padding: 0px 0px var(--size-space-300) 0px;
  position: relative;
  flex: 0 0 auto;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  width: 100%;
}

.site-container .strengths-title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin-top: -2px;
  font-family: var(--h-2-font-family);
  font-weight: var(--h-2-font-weight);
  color: transparent;
  font-size: var(--h-2-font-size);
  text-align: center;
  letter-spacing: var(--h-2-letter-spacing);
  line-height: var(--h-2-line-height);
  white-space: nowrap;
  font-style: var(--h-2-font-style);
}

.site-container .strengths-title-text {
  color: #333333;
  letter-spacing: var(--h-2-letter-spacing);
  font-family: var(--h-2-font-family);
  font-style: var(--h-2-font-style);
  font-weight: var(--h-2-font-weight);
  line-height: var(--h-2-line-height);
  font-size: var(--h-2-font-size);
}

.site-container .strengths-title-emphasis {
  color: #0184ce;
  letter-spacing: var(--h-2-letter-spacing);
  font-family: var(--h-2-font-family);
  font-style: var(--h-2-font-style);
  font-weight: var(--h-2-font-weight);
  line-height: var(--h-2-line-height);
  font-size: var(--h-2-font-size);
}

.site-container .strengths-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
  gap: var(--size-space-400);
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.site-container .strength-item {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.site-container .strength-image-wrapper {
  position: relative;
  align-self: stretch;
  width: clamp(200px, 20vw, 250px);
  flex-shrink: 0;
  overflow: hidden;
}

.site-container .strength-image-wrapper picture,
.site-container .strength-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.site-container .strength-image-wrapper img {
  aspect-ratio: 1;
  min-height: 200px;
}

.site-container .strength-content {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--size-space-800);
  padding: var(--size-space-800) 0px var(--size-space-800) var(--size-space-800);
  flex: 1;
  flex-grow: 1;
  display: flex;
  position: relative;
}

.site-container .strength-content-reverse {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--size-space-800);
  padding: var(--size-space-800) var(--size-space-800) var(--size-space-800) 0px;
  flex: 1;
  flex-grow: 1;
  display: flex;
  position: relative;
}

.site-container .strength-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--size-space-300);
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.site-container .strength-label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  margin-top: -1px;
  font-family: "Geologica", Helvetica;
  font-weight: 700;
  color: var(--primary);
  font-size: 20px;
  letter-spacing: 0;
  line-height: 20px;
}

.site-container .strength-label-text {
  font-family: "Geologica", Helvetica;
  font-weight: 700;
  color: #0184ce;
  font-size: 20px;
  letter-spacing: 0;
  line-height: 20px;
}

.site-container .strength-label-number {
  font-size: 24px;
  line-height: 24px;
}

.site-container .strength-title {
  align-self: stretch;
  font-weight: var(--h-2-font-weight);
  color: #333333;
  font-size: var(--h-2-font-size);
  letter-spacing: var(--h-2-letter-spacing);
  line-height: var(--h-2-line-height);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-family: var(--h-2-font-family);
  font-style: var(--h-2-font-style);
  text-align: left;
}

.site-container .strength-subtitle {
  position: relative;
  align-self: stretch;
  color: var(--primary);
  font-size: var(--subtitle-font-size);
  letter-spacing: var(--subtitle-letter-spacing);
  line-height: var(--subtitle-line-height);
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  font-family: var(--subtitle-font-family);
  font-weight: var(--subtitle-font-weight);
  font-style: var(--subtitle-font-style);
  text-align: left;
}

.site-container .strength-description {
  align-self: stretch;
  font-weight: var(--body-1-font-weight);
  color: #333333;
  font-size: var(--body-1-font-size);
  letter-spacing: var(--body-1-letter-spacing);
  line-height: var(--body-1-line-height);
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  font-family: var(--body-1-font-family);
  font-style: var(--body-1-font-style);
  text-align: left;
}

.site-container .strength-subtitle-nowrap {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  width: fit-content;
  font-family: var(--subtitle-font-family);
  font-weight: var(--subtitle-font-weight);
  color: var(--primary);
  font-size: var(--subtitle-font-size);
  letter-spacing: var(--subtitle-letter-spacing);
  line-height: var(--subtitle-line-height);
  white-space: nowrap;
  font-style: var(--subtitle-font-style);
  text-align: left;
}

/* SP版スタイル統合 - メディアクエリ */
@media (max-width: 768px) {
  .site-container .strengths-section {
    padding: 80px var(--size-space-600);
    gap: var(--size-space-800);
  }

  .site-container .strengths-bg-decoration-1 {
    top: calc(50% - 2254px);
    left: calc(50% - 489px);
    width: 975px;
    height: 550px;
  }

  .site-container .strengths-bg-decoration-2 {
    top: calc(50% + 1701px);
    left: calc(50% - 489px);
    width: 975px;
    height: 550px;
  }

  .site-container .strengths-title-wrapper {
    width: 100%;
  }

  .site-container .strengths-title {
    flex: 1;
    width: 100%;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
    display: block;
  }

  .site-container .strengths-title-text,
  .site-container .strengths-title-emphasis {
    display: inline;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .site-container .strength-item {
    flex-direction: row;
    align-items: flex-start;
  }

  .site-container .strength-image-wrapper {
    width: 100px;
    align-self: stretch;
    flex-shrink: 0;
  }

  .site-container .strength-image-wrapper img {
    width: 100%;
    height: 100%;
    min-height: auto;
    aspect-ratio: auto;
  }

  .site-container .strength-content {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--size-space-600);
    padding: var(--size-space-600) 0px var(--size-space-600) var(--size-space-600);
    flex: 1;
  }

  .site-container .strength-content-reverse {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--size-space-600);
    padding: var(--size-space-600) var(--size-space-600) var(--size-space-600) 0px;
    flex: 1;
  }

  .site-container .strength-content .strength-header {
    width: 216px;
    max-width: 100%;
    height: auto;
    min-height: 102px;
    align-items: flex-start;
  }

  .site-container .strength-content-reverse .strength-header {
    align-self: stretch;
    width: 100%;
  }

  .site-container .strength-content .strength-label {
    justify-content: center;
    white-space: normal;
    word-break: break-word;
  }

  .site-container .strength-content-reverse .strength-label {
    justify-content: center;
    white-space: normal;
    word-break: break-word;
  }

  .site-container .strength-content .strength-title {
    justify-content: flex-start;
    text-align: left;
    align-self: stretch;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .site-container .strength-content-reverse .strength-title {
    justify-content: flex-start;
    text-align: left;
    align-self: stretch;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .site-container .strength-content .strength-subtitle {
    width: 216px;
    max-width: 100%;
    justify-content: flex-start;
    text-align: left;
    display: flex;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .site-container .strength-content-reverse .strength-subtitle {
    align-self: stretch;
    justify-content: flex-start;
    text-align: left;
    display: flex;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .site-container .strength-content-reverse .strength-subtitle-nowrap {
    align-self: stretch;
    justify-content: flex-start;
    text-align: left;
    display: flex;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .site-container .strength-content .strength-description {
    width: 216px;
    max-width: 100%;
    justify-content: flex-start;
    text-align: left;
    display: flex;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .site-container .strength-content-reverse .strength-description {
    align-self: stretch;
    justify-content: flex-start;
    text-align: left;
    display: flex;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
  }
}

/* ========================================
   ULTRAブログセクション
   ======================================== */

.blog-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--size-space-800);
  position: relative;
  align-self: stretch;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  flex: 0 0 auto;
  background-color: var(--basewhite);
  padding: 60px 0px;
}

.blog-header {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--size-space-200);
  border-color: var(--primary);
  align-items: center;
  padding: 0px 0px var(--size-space-300) 0px;
  position: relative;
  flex: 0 0 auto;
  border-bottom-width: 2px;
  border-bottom-style: solid;
}

.blog-subtitle {
  margin-top: -2px;
  font-weight: var(--body-1-font-weight);
  color: var(--baseblack);
  font-size: var(--body-1-font-size);
  line-height: var(--body-1-line-height);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  font-family: var(--body-1-font-family);
  letter-spacing: var(--body-1-letter-spacing);
  font-style: var(--body-1-font-style);
}

.blog-title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  font-family: var(--h-2-font-family);
  font-weight: var(--h-2-font-weight);
  color: transparent;
  font-size: var(--h-2-font-size);
  letter-spacing: var(--h-2-letter-spacing);
  line-height: var(--h-2-line-height);
  font-style: var(--h-2-font-style);
}

.blog-title-text {
  color: var(--baseblack);
  letter-spacing: var(--h-2-letter-spacing);
  font-family: var(--h-2-font-family);
  font-style: var(--h-2-font-style);
  font-weight: var(--h-2-font-weight);
  line-height: var(--h-2-line-height);
  font-size: var(--h-2-font-size);
}

.blog-title-emphasis {
  color: var(--primary);
  letter-spacing: var(--h-2-letter-spacing);
  font-family: var(--h-2-font-family);
  font-style: var(--h-2-font-style);
  font-weight: var(--h-2-font-weight);
  line-height: var(--h-2-line-height);
  font-size: var(--h-2-font-size);
}

.blog-description {
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  font-family: var(--body-1-font-family);
  font-weight: var(--body-1-font-weight);
  color: var(--baseblack);
  font-size: var(--body-1-font-size);
  letter-spacing: var(--body-1-letter-spacing);
  line-height: var(--body-1-line-height);
  font-style: var(--body-1-font-style);
}

.blog-grid {
  display: flex;
  align-items: flex-start;
  gap: var(--size-space-800);
  position: relative;
  align-self: stretch;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  flex: 0 0 auto;
}

.blog-card {
  display: flex;
  flex-direction: column;
  position: relative;
  flex: 1 1 calc(25% - calc(var(--size-space-800) * 3 / 4));
  min-width: 0;
  max-width: 333px;
}

.blog-card-image-wrapper {
  position: relative;
  align-self: stretch;
  width: 100%;
  aspect-ratio: 1.78;
  overflow: hidden;
}

.blog-card-image-wrapper picture,
.blog-card-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-card-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: var(--size-space-100) var(--size-space-200) var(--size-space-100) var(--size-space-200);
  position: absolute;
  top: 4px;
  left: 4px;
  background-color: var(--secondary);
}

.blog-card-tag-text {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--body-2-font-family);
  font-weight: var(--body-2-font-weight);
  color: var(--baseblack);
  font-size: var(--body-2-font-size);
  text-align: center;
  letter-spacing: var(--body-2-letter-spacing);
  line-height: var(--body-2-line-height);
  white-space: nowrap;
  font-style: var(--body-2-font-style);
}

.blog-card-content {
  flex-direction: column;
  gap: var(--size-space-200);
  padding: var(--size-space-400);
  flex: 0 0 auto;
  background-color: var(--basewhite);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.blog-card-title {
  position: relative;
  align-self: stretch;
  margin-top: -2px;
  font-family: var(--body-1-font-family);
  font-weight: var(--body-1-font-weight);
  color: var(--baseblack);
  font-size: var(--body-1-font-size);
  letter-spacing: var(--body-1-letter-spacing);
  line-height: var(--body-1-line-height);
  font-style: var(--body-1-font-style);
}

.blog-card-date {
  position: relative;
  align-self: stretch;
  font-family: var(--body-2-font-family);
  font-weight: var(--body-2-font-weight);
  color: var(--baseblack);
  font-size: var(--body-2-font-size);
  letter-spacing: var(--body-2-letter-spacing);
  line-height: var(--body-2-line-height);
  font-style: var(--body-2-font-style);
}

.blog-link-button {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  gap: var(--size-space-200);
  padding: var(--size-space-400) var(--size-space-300) var(--size-space-400) var(--size-space-400);
  position: relative;
  flex: 0 0 auto;
  border-radius: 99px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.blog-link-button:hover {
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.blog-link-button:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.blog-link-text {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin-top: -1.5px;
  font-family: var(--button-small-font-family);
  font-weight: var(--button-small-font-weight);
  color: var(--baseblack);
  font-size: var(--button-small-font-size);
  text-align: center;
  line-height: var(--button-small-line-height);
  white-space: nowrap;
  position: relative;
  letter-spacing: var(--button-small-letter-spacing);
  font-style: var(--button-small-font-style);
}

.blog-link-icon {
  width: 20px;
  height: 20px;
  position: relative;
  aspect-ratio: 1;
}

/* SP版スタイル */
@media (max-width: 768px) {
  .blog-section {
    padding: 60px var(--size-space-600);
  }

  .blog-description {
    width: 100%;
  }

  .blog-grid {
    flex-direction: column;
    gap: var(--size-space-600);
    width: 342px;
    align-self: center;
  }

  .blog-card {
    width: 342px;
    flex: 0 0 auto;
  }
}

/* ========================================
   ハンバーガーメニュー
   ======================================== */

/* オーバーレイ */
.hamburger-menu-overlay {
  display: none;
  position: fixed;
  top: 60px;
  /* ヘッダーの下から開始 */
  left: 0;
  width: 100%;
  height: calc(100vh - 60px);
  background-color: rgba(51, 51, 51, 0.2);
  z-index: 9998;
  opacity: 0;
  transition: opacity 0.3s ease;
}

body.open .hamburger-menu-overlay {
  display: block;
  opacity: 1;
}

/* ハンバーガーメニュー本体 */
.hamburger-menu {
  position: fixed;
  top: 60px;
  /* ヘッダーの下から開始 */
  right: -260px;
  width: 260px;
  height: calc(100vh - 60px);
  background-color: var(--basegrey-01);
  z-index: 9999;
  transition: right 0.3s ease;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

body.open .hamburger-menu {
  right: 0;
}

/* 閉じるボタン */
.hamburger-menu-close {
  all: unset;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  cursor: pointer;
  display: none !important;
  /* デフォルト非表示 */
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: none;
  position: fixed;
  /* ヘッダー固定 */
  top: 18px;
  /* ヘッダー内中央調整 (60px高さの想定) */
  right: 16px;
  /* SP時のヘッダーpadding調整 */
  z-index: 10001;
  /* ヘッダーより上 */
}

@media (min-width: 769px) {
  .hamburger-menu-close {
    display: none !important;
  }
}

body.open .hamburger-menu-close {
  display: flex;
}

.hamburger-menu-close img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hamburger-menu-close:hover {
  opacity: 0.7;
}

.hamburger-menu-close:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* メニューナビゲーション */
.hamburger-menu-nav {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  gap: var(--size-space-800);
  padding: var(--size-space-600);
  flex: 1;
}

.hamburger-menu-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0;
}

.hamburger-menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: var(--size-space-400) var(--size-space-600);
}

.hamburger-menu-link {
  width: 100%;
  color: #333333;
  font-size: 16px;
  line-height: 1.6;
  font-family: var(--body-1-font-family);
  font-weight: 700;
  text-align: center;
  letter-spacing: 0;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hamburger-menu-link:hover {
  opacity: 0.7;
}

/* メニューアクション */
.hamburger-menu-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--size-space-400);
  width: 100%;
}

.hamburger-menu-button-primary {
  all: unset;
  box-sizing: border-box;
  height: 50px;
  padding: var(--size-space-400);
  background-color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--size-space-200);
  width: 100%;
  border-radius: var(--size-radius-200);
  cursor: pointer;
  text-decoration: none;
}

.hamburger-menu-button-primary:hover {
  opacity: 0.9;
}

.hamburger-menu-icon {
  width: 20px;
  height: 20px;
  aspect-ratio: 1;
  flex-shrink: 0;
}

.hamburger-menu-button-text {
  flex: 1;
  color: #ffffff;
  font-size: 16px;
  line-height: 1.2;
  font-family: var(--button-small-font-family);
  font-weight: 700;
  text-align: center;
  letter-spacing: 0;
}

.hamburger-menu-phone {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--size-space-100);
  width: 100%;
}

.hamburger-menu-button-secondary {
  all: unset;
  box-sizing: border-box;
  height: 50px;
  padding: var(--size-space-400);
  background-color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--size-space-200);
  width: 100%;
  border-radius: var(--size-radius-200);
  cursor: pointer;
  text-decoration: none;
}

.hamburger-menu-button-secondary:hover {
  opacity: 0.9;
}

.hamburger-menu-button-secondary .hamburger-menu-icon {
  filter: brightness(0) saturate(100%) invert(1);
}

.hamburger-menu-phone-number {
  color: #ffffff;
  font-family: "Geologica", Helvetica;
  font-weight: 700;
  font-size: 18px;
  text-align: center;
  letter-spacing: 0;
  line-height: 18px;
  white-space: nowrap;
}

.hamburger-menu-hours {
  width: 100%;
  color: #333333;
  font-size: var(--body-2-font-size);
  font-family: var(--body-2-font-family);
  font-weight: var(--body-2-font-weight);
  text-align: center;
  letter-spacing: var(--body-2-letter-spacing);
  line-height: var(--body-2-line-height);
  font-style: var(--body-2-font-style);
  margin: 0;
}

/* 速度診断セクション */
.hamburger-menu-diagnosis {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--size-space-200);
  padding: var(--size-space-400);
  width: 100%;
  background-color: #ffffff;
  border: 2px solid #333333;
}

.hamburger-menu-diagnosis-header {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--size-space-100);
}

.hamburger-menu-diagnosis-icon {
  width: 16px;
  height: 16px;
  aspect-ratio: 1;
}

.hamburger-menu-diagnosis-title-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--size-space-600);
}

.hamburger-menu-diagnosis-decoration {
  width: 12px;
  height: 1px;
  object-fit: cover;
}

.hamburger-menu-diagnosis-title {
  color: #333333;
  font-size: 24px;
  line-height: 1.4;
  font-family: var(--subtitle-font-family);
  font-weight: 700;
  text-align: center;
  letter-spacing: 0;
  white-space: nowrap;
  margin: 0;
}

.hamburger-menu-diagnosis-description {
  width: 100%;
  color: transparent;
  font-size: 16px;
  line-height: 1.6;
  font-family: var(--body-1-font-family);
  font-weight: 500;
  text-align: center;
  letter-spacing: 0;
  margin: 0;
}

.hamburger-menu-diagnosis-description span {
  color: #333333;
  font-weight: 700;
}

.hamburger-menu-diagnosis-highlight {
  color: #0184ce;
}

.hamburger-menu-diagnosis-button {
  padding: var(--size-space-300) var(--size-space-400);
  background: linear-gradient(132deg, rgba(1, 132, 206, 1) 0%, rgba(51, 51, 51, 1) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--size-space-200);
  width: 100%;
  border-radius: var(--size-radius-200);
  cursor: pointer;
  text-decoration: none;
}

.hamburger-menu-diagnosis-button:hover {
  opacity: 0.9;
}

.hamburger-menu-diagnosis-button-icon {
  width: 20px;
  height: 20px;
  aspect-ratio: 1;
}

.hamburger-menu-diagnosis-button-text {
  color: #ffffff;
  font-size: 18px;
  line-height: 1.2;
  font-family: var(--button-font-family);
  font-weight: 700;
  text-align: center;
  letter-spacing: 0;
  white-space: nowrap;
}

.hamburger-menu-diagnosis-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: var(--size-space-0) var(--size-space-200);
  background-color: #ffffff;
  border-radius: 99px;
}

.hamburger-menu-diagnosis-badge span {
  color: #333333;
  font-size: 16px;
  line-height: 1.6;
  font-family: var(--body-1-font-family);
  font-weight: 700;
  text-align: center;
  letter-spacing: 0;
  white-space: nowrap;
}

/* ========================================
   SP版ハンバーガーメニュー - アコーディオン
   ======================================== */
.hamburger-menu-dropdown {
  position: relative;
}

/* アコーディオントリガー */
.hamburger-menu-dropdown .header-hover {
  cursor: pointer;
  position: relative;
  padding: var(--size-space-400) 30px var(--size-space-400) 0;
  transition: color 0.3s ease;
  font-family: var(--body-1-font-family);
  font-size: var(--body-1-font-size);
  font-weight: var(--body-1-font-weight);
  line-height: var(--body-1-line-height);
  color: var(--baseblack);
  display: block;
}

/* アコーディオンアイコン（+記号の横線） */
.hamburger-menu-dropdown .header-hover::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  background-color: var(--baseblack);
  width: 16px;
  height: 2px;
  transform: translateY(-50%);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* アコーディオンアイコン（+記号の縦線） */
.hamburger-menu-dropdown .header-hover::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  background-color: var(--baseblack);
  width: 16px;
  height: 2px;
  transform: translateY(-50%) rotate(90deg);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* アコーディオン開閉時のアイコン変化（-記号へ） */
.hamburger-menu-dropdown .header-hover.active::after {
  transform: translateY(-50%) rotate(0deg);
  opacity: 0;
}

/* アコーディオンドロップダウンリスト */
.hamburger-menu-dropdown-list {
  list-style: none;
  padding: 0 0 0 var(--size-space-600);
  margin: 0;
  display: none;
}

.hamburger-menu-dropdown-list li {
  margin-bottom: var(--size-space-300);
}

.hamburger-menu-dropdown-list li:last-child {
  margin-bottom: var(--size-space-400);
}

/* アコーディオンドロップダウンリンク */
.hamburger-menu-dropdown-list li a {
  display: block;
  padding: var(--size-space-200) var(--size-space-300);
  color: var(--baseblack);
  font-family: var(--body-2-font-family);
  font-size: 14px;
  font-weight: var(--body-2-font-weight);
  line-height: var(--body-2-line-height);
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.hamburger-menu-dropdown-list li a:hover,
.hamburger-menu-dropdown-list li a:active {
  background-color: rgba(1, 132, 206, 0.1);
  color: var(--primary);
}

/* PC版では非表示 */
@media (min-width: 769px) {

  .hamburger-menu-overlay,
  .hamburger-menu {
    display: none !important;
  }
}

/* ========================================
   Hover Effects (Added)
   ======================================== */

/* Header Elements */
.site-container .header-logo {
  transition: opacity 0.3s;
}

.site-container .header-logo:hover {
  opacity: 0.7;
}

.site-container .header-nav-link {
  transition: opacity 0.3s;
}

.site-container .header-nav-link:hover .header-nav-link-text {
  color: var(--primary);
  opacity: 0.8;
}

.site-container .phone-button {
  transition: opacity 0.3s;
}

.site-container .phone-button:hover {
  opacity: 0.7;
}

.site-container .contact-button {
  transition: opacity 0.3s;
}

.site-container .contact-button:hover {
  opacity: 0.8;
}

/* Hamburger Menu Elements */
.hamburger-menu-link {
  transition: color 0.3s;
}

.hamburger-menu-link:hover {
  color: var(--primary);
}

.hamburger-menu-button-primary,
.hamburger-menu-button-secondary,
.hamburger-menu-diagnosis-button {
  transition: opacity 0.3s;
}

.hamburger-menu-button-primary:hover,
.hamburger-menu-button-secondary:hover,
.hamburger-menu-diagnosis-button:hover {
  opacity: 0.8;
}

/* Main Content Elements - Opacity only for non-primary buttons */
.results-link-button,
.cta-phone-button {
  transition: opacity 0.3s;
}

.results-link-button:hover,
.cta-phone-button:hover {
  opacity: 0.8;
}

/* Primary Buttons - Inverse Color Hover */
.hero-cta-button,
.speed-diagnosis-button,
.pricing-button,
.cta-email-button,
.contact-button {
  transition: all 0.3s ease;
}

.hero-cta-button:hover,
.speed-diagnosis-button:hover,
.pricing-button:hover,
.cta-email-button:hover,
.contact-button:hover {
  background-color: #ffffff;
  opacity: 1;
  /* Reset opacity change */
}

/* Text Color Change on Hover */
.hero-cta-button:hover .hero-cta-text,
.pricing-button:hover .pricing-button-text,
.cta-email-button:hover .cta-button-text,
.contact-button:hover .contact-button-text {
  color: var(--primary);
}

/* Icon Color Filter on Hover (White to Primary Blue) */
.hero-cta-button:hover .hero-cta-icon,
.pricing-button:hover .pricing-button-icon,
.cta-email-button:hover .cta-icon,
.contact-button:hover .icon {
  filter: invert(34%) sepia(98%) saturate(1838%) hue-rotate(184deg) brightness(95%) contrast(101%);
}


.result-card-link {
  transition: opacity 0.3s;
}

.result-card-link:hover {
  opacity: 0.8;
}