@charset "UTF-8";
:root {
  /* Colors */
  --color-primary: #1E3A8A;
  /* Deep Navy: Trust, Medical */
  --color-secondary: #8D6E63;
  /* Brown: Leather, Warmth */
  --color-accent: #D4AC0D;
  /* Gold: Authority */
  --color-accent-light: #FEF9E7;
  /* Light Yellow for Evidence */
  --color-green: #06C755;
  /* LINE Green */
  --color-orange: #F59E0B;
  /* CTA Orange */
  --color-text: #333333;
  --color-text-light: #666666;
  --color-white: #ffffff;
  --color-bg-light: #F9FAFB;
  /* Light Blue Grey */
  --color-bg-section: #eff1f3;
  /* Visible Gray/Beige for contrast rhythm (#eff1f3 is a cool gray, let's try a warmer one if requested, but user suggested #f3f4f6. Let's go with a solid neutral grey-beige for 'visible level') */
  --color-bg-section-warm: #F5F5F0;
  /* Warm Greige for "Medical/Craftsman" feel */
  --color-bg-risk: #FFF5F5;
  --color-bg-brown-light: #FDF8F5;
  --color-brown-dark: #3E2723;
  /* シネマティック・モード用: 濃い茶色 */
  --color-highlight: #FFD700;
  /* Yellow Marker */
  /* Typography */
  --font-serif: "Noto Serif JP", serif;
  --font-sans: "Noto Sans JP", sans-serif;
  --size-base: 16px;
  --height-line: 1.8;
  /* Spacing */
  --width-container: 1000px;
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 32px;
  --space-lg: 64px;
  --space-xl: 100px;
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Reset & Base */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: var(--size-base);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  color: var(--color-text);
  line-height: var(--height-line);
  /* No global padding */
}

a {
  text-decoration: none;
  color: inherit;
  transition: opacity 0.3s;
}

a:hover {
  opacity: 0.8;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

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

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.3;
  font-weight: 800;
  /* Extra bold for main headings */
}

h4,
h5,
h6 {
  margin: 0;
  line-height: 1.4;
  font-weight: 700;
  /* Bold for sub-headings */
}

/* Emphasis text */
strong,
b {
  font-weight: 700;
}

.font-bold {
  font-weight: 700 !important;
}

.font-extra-bold {
  font-weight: 800 !important;
}

/* Utilities */
.container {
  width: 90%;
  max-width: var(--width-container);
  margin: 0 auto;
}

.section {
  padding: 100px 0;
  /* Increased from 64px for PC */
}

.font-serif {
  font-family: var(--font-serif);
}

.text-navy {
  color: var(--color-primary);
}

.text-brown {
  color: var(--color-secondary);
}

.text-gold {
  color: var(--color-accent);
}

.text-white {
  color: var(--color-white);
}

.text-dark {
  color: var(--color-text);
}

/* Added for visibility */
.text-center {
  text-align: center;
}

.bg-gray {
  background-color: var(--color-bg-light);
}

.bg-navy {
  background-color: var(--color-primary);
}

.bg-brown-light {
  background-color: var(--color-bg-brown-light);
}

.bg-accent {
  background-color: #FFF8E1;
}

/* Light Gold BG */
.sp-only {
  display: none !important;
}

.pc-only {
  display: block !important;
}

@media (max-width: 768px) {
  .sp-only {
    display: block !important;
  }
  .pc-only {
    display: none !important;
  }
  .section {
    padding: 70px 0;
    /* Unified spacing for SP */
  }
  .hero {
    min-height: auto;
    /* Disable full height constraint */
    height: auto;
    padding: 120px 0 80px;
    /* Adjust top padding for header clearance */
  }
  .copy-main {
    font-size: 1.8rem;
    line-height: 1.4;
  }
  .copy-advice {
    font-size: 0.9rem;
  }
  .copy-sub {
    font-size: 0.9rem;
  }
  /* Moved to lower media query block */
  /* Stack buttons in sticky footer */
  .sticky-footer {
    display: flex;
  }
}
/* Buttons */
.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 16px 32px;
  border-radius: 50px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.btn-green {
  background-color: var(--color-green);
  color: var(--color-white);
}

.btn-white {
  background-color: var(--color-white);
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

.btn-hero {
  font-size: 1.25rem;
  padding: 20px 40px;
  box-shadow: 0 8px 16px rgba(6, 199, 85, 0.3);
}

/* Animations */
@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(6, 199, 85, 0.7);
  }
  70% {
    transform: scale(1.03);
    box-shadow: 0 0 0 15px rgba(6, 199, 85, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(6, 199, 85, 0);
  }
}
.animate-pulse {
  animation: pulse 2s infinite;
}

.btn-xl {
  width: 100%;
  max-width: 600px;
  font-size: 1.5rem;
  padding: 24px;
}

.btn-hero {
  min-height: 60px;
  padding: 18px 30px;
  font-size: 1.2rem;
  box-shadow: 0 8px 16px rgba(6, 199, 85, 0.4);
  border: 2px solid #fff;
  /* Shine effect enhancement */
}

.font-bold-lg {
  font-size: 1.1em;
  font-weight: 800;
}

.hero-micro-copy {
  font-size: 0.85rem;
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.btn-sub {
  font-size: 0.9rem;
  font-weight: normal;
  margin-top: 4px;
}

.btn-micro {
  font-size: 0.85rem;
  font-weight: normal;
  margin-top: 8px;
  display: block;
}

.btn-micro-dark {
  font-size: 0.85rem;
  font-weight: normal;
  margin-top: 4px;
  color: var(--color-text-light);
}

/* Header styles moved to _nav_style.scss */
/* Logo */
.logo {
  font-family: var(--font-serif);
  width: auto;
  height: 48px;
  display: flex;
  align-items: center;
}

.logo-link {
  display: flex;
  align-items: center;
  /* Center logo and text vertically */
  gap: 12px;
  /* Space between logo and text */
  text-decoration: none;
  color: var(--color-primary);
}

.logo-main-row {
  display: none;
  /* Deprecated, ensure no conflict if html lags */
}

.logo-img {
  display: none;
}

/* ロゴアイコン画像 */
.logo-icon {
  height: 48px;
  width: auto;
  object-fit: contain;
  margin-right: 8px;
  display: block;
}

.logo-text-group {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.1;
}

.logo-main {
  font-size: 25px;
  font-weight: 800;
  color: var(--color-primary);
  letter-spacing: 0.02em;
  padding: 0;
}

.logo-sub {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-primary);
  opacity: 0.9;
  margin-top: 2px;
  margin-left: 0;
}

/* Header CTA */
.header-cta {
  font-size: 0.9rem;
  padding: 10px 24px;
  border-radius: 9999px;
  /* rounded-full */
  background-color: var(--color-green);
  color: white;
  font-weight: bold;
  display: flex;
  align-items: center;
}

.header-cta i {
  font-size: 1.2rem;
}

/* Hero - シネマティック・モード */
/* 
 * 画像を無理に引き伸ばさず、中央に配置し、
 * 余白部分を濃い茶色で埋める高級感のあるレイアウト
 */
.hero {
  position: relative;
  /* PC Height */
  height: 700px;
  min-height: 600px;
  max-height: 800px;
  padding: 0;
  color: var(--color-white);
  text-align: center;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* シネマティック・モード: 濃い茶色の背景 */
  background-color: var(--color-brown-dark);
}

/* ヒーロー背景画像コンテナ */
.hero-bg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  /* 画像を中央配置 */
  width: 100%;
  max-width: var(--width-container);
  /* コンテナ幅で制限 */
  height: 100%;
  z-index: 0;
}

/* ヒーローメイン画像 */
.hero-img {
  width: 100%;
  height: 100%;
  /* アスペクト比を維持し、コンテナ内に収まるよう調整 */
  object-fit: contain;
  /* coverからcontainに変更: 画像が歪まない */
  object-position: center;
}

/* 画像の上に被せるオーバーレイ（テキスト可読性のため） */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--width-container);
  /* 画像と同じ幅に制限 */
  height: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.2) 100%);
  /* テキスト可読性を確保 */
}

/* PC Specific for Text Width */
@media (min-width: 769px) {
  /* Center alignment default, no specific override needed for center layout */
}
.authority-badge {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-bottom: 30px;
  flex-wrap: wrap;
  position: relative;
  z-index: 10;
}

.authority-badge span {
  background: linear-gradient(135deg, #FDB931 0%, #F59E0B 100%);
  color: var(--color-primary);
  /* Navy text on Gold */
  padding: 8px 20px;
  border-radius: 4px;
  /* Standard tag style */
  font-size: 0.95rem;
  font-weight: 700;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  border: 1px solid #FFF8E1;
  display: inline-block;
}

.hero-copy {
  margin-bottom: 40px;
  text-shadow: 0 4px 10px rgba(0, 0, 0, 0.9);
  position: relative;
  z-index: 10;
}

.copy-advice {
  display: inline-block;
  background: rgba(255, 255, 255, 0.15);
  padding: 8px 24px;
  border-radius: 30px;
  font-size: 1.1rem;
  margin-bottom: 20px;
  font-weight: 500;
  backdrop-filter: blur(4px);
  letter-spacing: 0.02em;
}

.copy-main {
  font-family: var(--font-serif);
  font-size: 2.8rem;
  /* PC size */
  display: block;
  margin-bottom: 24px;
  line-height: 1.35;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.highlight-yellow {
  color: #FFD700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
  text-decoration: none;
  border-bottom: 3px solid #FFD700;
}

.copy-sub {
  display: block;
  font-size: 1.15rem;
  font-weight: 500;
  font-family: var(--font-sans);
  line-height: 1.8;
  max-width: 700px;
  margin: 0 auto;
  /* Center the text block */
}

/* Problem */
/* Problem */
.problem.section {
  background-color: #FEFDF5;
  /* Warm light beige */
  padding: 80px 0;
}

.problem .section-title {
  /* Font styles handled by Unified Block */
  text-align: center;
  /* margin-bottom removed to inherit unified 70px */
  position: relative;
  padding-bottom: 20px;
  display: inline-block;
  width: 100%;
  /* Ensure block width for centering text */
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  /* Improve visibility against light backgrounds */
}

/* Wavy underline effect */
.problem .section-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 98%;
  height: 6px;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='6' viewBox='0 0 20 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 6C2.5 6 2.5 0 5 0C7.5 0 7.5 6 10 6C12.5 6 12.5 0 15 0C17.5 0 17.5 6 20 6' stroke='%23D4AC0D' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: contain;
  background-color: transparent;
  /* Override previous underline */
}

.checklist-box {
  background: transparent;
  /* Removed container bg */
  border: none;
  box-shadow: none;
  padding: 0;
  max-width: 900px;
  margin: 0 auto 70px;
  /* Increased from 50px */
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 769px) {
  .checklist-box {
    grid-template-columns: 1fr 1fr;
  }
}
.checklist-box li {
  font-size: 1.1rem;
  padding: 24px 24px 24px 16px;
  /* Left padding reduced as icon is flex item */
  font-weight: 500;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--color-white);
  border-radius: 12px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  /* shadow-sm equivalent */
  line-height: 1.8;
  margin-bottom: 0;
  /* Reset margin as we use grid gap */
  transition: transform 0.3s ease;
}

.checklist-box li:hover {
  transform: translateY(-2px);
}

.check-icon {
  color: #27AE60;
  font-size: 2rem;
  flex-shrink: 0;
  margin-top: -2px;
  /* Visual alignment */
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Animation class for JS to trigger */
.check-icon.animate-pop {
  animation: popCheck 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes popCheck {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.4);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
/* Bold keywords styling */
.checklist-box strong {
  font-weight: 700;
  color: var(--color-primary);
  /* Optional: add slight color emphasis */
}

/* Commitment Box (Problem Closing) - Redesigned (Split Background) */
.closing-box-styled {
  position: relative;
  background: transparent;
  border: 2px solid var(--color-primary);
  /* Match Evidence Box */
  border-radius: 12px;
  padding: 0;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  /* Slightly stronger shadow */
}

.closing-deco-top {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 4px;
  background: var(--color-primary);
  /* Match border */
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  z-index: 1;
}

/* Agitation Part (Top - White) */
.closing-section-agitation {
  background: #ffffff;
  padding: 32px 20px;
  position: relative;
}

.closing-msg-strong {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.6;
}

.highlight-bg-subtle {
  background: rgba(254, 243, 199, 0.8);
  padding: 4px 12px;
  border-radius: 4px;
  display: inline-block;
  margin-top: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

@media (max-width: 768px) {
  .highlight-bg-subtle {
    padding: 12px 2px;
    margin-top: 20px;
  }
  .closing-msg-strong,
  .highlight-head {
    font-size: 1rem;
  }
}
.num-highlight {
  font-size: 1.3em;
  color: #C62828;
  font-family: var(--font-sans);
  margin: 0 2px;
}

/* Solution Part (Bottom - White for Max Contrast) */
.closing-section-solution {
  background: #ffffff;
  border-top: 1px dashed rgba(30, 58, 138, 0.3);
  /* Navy dashed divider */
  padding: 32px 20px;
}

.closing-lead {
  font-size: 1.05rem;
  color: #000000;
  /* Pure Black */
  line-height: 2;
  font-weight: 600;
  /* Bolder */
  letter-spacing: 0.05em;
  margin-bottom: 24px;
}

.closing-note {
  display: block;
  margin-top: 8px;
  font-size: 0.9rem;
  color: #666;
  font-weight: 400;
}

.closing-main {
  font-size: 1.2rem;
  color: var(--color-primary);
  font-weight: 700;
  line-height: 1.6;
  margin-top: 16px;
}

.highlight-underline-simple {
  display: inline-block;
  border-bottom: 2px solid rgba(220, 38, 38, 0.3);
  /* Red-accent/30 */
  padding-bottom: 4px;
}

/* Responsive PC */
@media (min-width: 769px) {
  .closing-section-agitation {
    padding: 40px;
  }
  .closing-section-solution {
    padding: 40px;
  }
  .closing-msg-strong {
    font-size: 1.5rem;
    line-height: 1.8;
  }
  .highlight-bg-subtle {
    margin-top: 0;
  }
  .closing-lead {
    font-size: 1.15rem;
  }
  .closing-note {
    font-size: 1rem;
  }
  .closing-main {
    font-size: 1.5rem;
    line-height: 1.8;
  }
}
/* Agitation (Risk) */
/* .risk-title handled by Unified Block */
.highlight-risk {
  color: #C62828;
  /* Deep red for risk emphasis */
  border-bottom: 4px solid #FFCDD2;
  display: inline-block;
}

/* Evidence Column Box - The key component */
.evidence-column-box {
  border: 2px solid var(--color-primary);
  background-color: var(--color-accent-light);
  /* #FEF9E7 */
  border-radius: 12px;
  padding: 40px;
  margin: 0 auto 70px;
  /* Increased spacing */
  position: relative;
  box-shadow: var(--shadow-md);
}
@media (max-width: 768px) {
  .evidence-column-box {
    padding: 32px 20px;
  }
}

.evidence-label {
  position: absolute;
  top: -16px;
  left: 20px;
  background: var(--color-primary);
  color: #fff;
  padding: 6px 20px;
  border-radius: 50px;
  font-weight: bold;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.evidence-label .material-icons-round {
  font-size: 1.2rem;
  color: #FFD700;
}

.evidence-lead {
  font-size: 1.1rem;
  line-height: 1.8;
  margin-bottom: 24px;
}

/* Highlight Area inside Evidence Box */
.highlight-area {
  background: #fff;
  border-left: 5px solid #F59E0B;
  /* Orange accent */
  padding: 24px;
  margin: 20px 0;
  border-radius: 4px;
  box-shadow: var(--shadow-sm);
}

.highlight-head {
  font-size: 1.25rem;
  font-weight: 700;
  color: #D97706;
  /* Darker orange text */
  margin-bottom: 12px;
}

.marker-yellow {
  background: linear-gradient(transparent 60%, #FFEB3B 60%);
  font-weight: 700;
}

.evidence-sub {
  font-size: 1rem;
  color: var(--color-text);
  text-align: center;
  font-weight: 500;
  margin-top: 20px;
}

/* Risk Grid Layout */
.risk-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  margin-top: 40px;
}

@media (min-width: 769px) {
  .risk-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.risk-item {
  background: var(--color-white);
  padding: 0 0 20px 0;
  /* Bottom padding for text area */
  border-radius: 12px;
  overflow: hidden;
  /* For image corners */
  text-align: left;
  /* Emphasis styling */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
  border-left: 4px solid var(--color-accent);
  /* Gold accent */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.risk-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12), 0 4px 10px rgba(0, 0, 0, 0.06);
}

/* Internal padding for text content */
.risk-head,
.risk-desc {
  padding: 0 20px;
}
@media (max-width: 768px) {
  .risk-head,
  .risk-desc {
    padding: 0 10px;
  }
}

.risk-img-wrapper {
  position: relative;
  width: 100%;
  height: 200px;
  background: #f0f0f0;
  margin-bottom: 16px;
}

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

/* Pain Point Marker */
.pain-point {
  position: absolute;
  width: 20px;
  height: 20px;
  background: rgba(231, 76, 60, 0.6);
  border: 2px solid #E74C3C;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: pulseRed 2s infinite;
}

.pain-point::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  background: rgba(231, 76, 60, 0.2);
  border-radius: 50%;
}

@keyframes pulseRed {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}
.risk-head {
  font-size: 1.15rem;
  margin: 0 20px 10px;
  color: var(--color-text);
}

.font-sans-bold {
  font-family: var(--font-sans);
  font-weight: 700;
}

.risk-desc {
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 20px 24px;
  color: var(--color-text-light);
}

.note-link {
  font-size: 0.75rem;
  vertical-align: super;
  color: var(--color-primary);
  text-decoration: underline;
  cursor: pointer;
}

/* Solution (Indoor) */
/* Solution (Indoor) */
/* Typography Adjustments (Unified Section Titles) */
.section-title,
.risk-title,
.tech-title,
.indoor-title,
.cta-title {
  font-size: 2.5rem;
  /* Unified size */
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-primary);
  /* Default to Navy, can be overridden */
  margin-bottom: 70px;
}

/* ==========================
   Self Check Section Styles
   ========================== */
.self-check-section {
  background-color: #f5f8fa;
}

.self-check-header {
  margin-bottom: 50px;
}

/* チェックリストボックス */
.check-list-box {
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  border-left: 5px solid var(--color-primary);
  box-shadow: var(--shadow-sm);
  margin-bottom: 40px;
}

.check-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.check-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid #eee;
}

.check-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.check-item:first-child {
  padding-top: 0;
}

.check-icon {
  font-size: 1.4rem;
  color: var(--color-primary);
  flex-shrink: 0;
}

.check-content {
  flex: 1;
}

.check-title {
  font-size: 1.05rem;
  font-weight: bold;
  color: var(--color-primary);
  margin: 0 0 6px 0;
  line-height: 1.4;
}

.check-desc {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text);
  margin: 0;
}

/* 警告ボックス */
.alert-important-box {
  background-color: #fff5f5;
  border: 2px solid #ffcccc;
  border-radius: 12px;
  padding: 30px;
  margin-bottom: 40px;
}

.alert-important-title {
  color: #C62828;
  font-size: 1.3rem;
  font-weight: bold;
  margin-bottom: 20px;
  line-height: 1.5;
}

.alert-icon {
  margin-right: 8px;
}

.alert-important-text {
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 16px;
}

.alert-reason-list {
  padding-left: 20px;
  margin-bottom: 20px;
}

.alert-reason-list li {
  margin-bottom: 16px;
  font-size: 0.95rem;
  line-height: 1.7;
}

.alert-reason-list li:last-child {
  margin-bottom: 0;
}

.alert-important-conclusion {
  font-size: 1.05rem;
  font-weight: bold;
  color: #C62828;
  margin: 0;
  padding-top: 10px;
  border-top: 1px dashed #ffcccc;
}

/* 解決策ボックス */
.solution-box {
  background: #fff;
  padding: 40px 30px;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  border-top: 5px solid var(--color-primary);
}

.solution-title {
  font-size: 1.5rem;
  color: var(--color-primary);
  margin-bottom: 24px;
  line-height: 1.5;
}

.solution-intro {
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 30px;
  text-align: center;
}

.solution-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}

.solution-card {
  background: #f9fafa;
  padding: 24px;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
}

.solution-card-title {
  font-size: 1.1rem;
  font-weight: bold;
  color: var(--color-primary);
  margin-bottom: 12px;
}

.solution-card-desc {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text-light);
  margin: 0;
}

/* 4つの壁カード */
.wall-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 40px;
}

.wall-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: linear-gradient(135deg, #fff 0%, #f9fafa 100%);
  padding: 24px;
  border-radius: 12px;
  border: 1px solid #e0e0e0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.wall-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
  border-color: var(--color-primary);
}

.wall-number {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--color-primary) 0%, #1a3a5c 100%);
  color: #fff;
  font-size: 1.2rem;
  font-weight: bold;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
}

.wall-content {
  flex: 1;
}

.wall-card-title {
  font-size: 1.1rem;
  font-weight: bold;
  color: var(--color-primary);
  margin-bottom: 8px;
  line-height: 1.4;
}

.wall-card-desc {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--color-text-light);
  margin: 0;
}

/* マルエ解決策ボックス */
.solution-marue {
  background: linear-gradient(135deg, #e8f4fd 0%, #d4edfc 100%);
  border: 2px solid var(--color-primary);
  border-radius: 12px;
  padding: 30px;
  margin-bottom: 24px;
  text-align: center;
}

.solution-marue-title {
  font-size: 1.3rem;
  font-weight: bold;
  color: var(--color-primary);
  margin-bottom: 16px;
  line-height: 1.5;
}

.solution-marue-text {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--color-text);
  margin: 0;
}

/* チェック結果 */
.check-result {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 2px dashed #e0e0e0;
  font-size: 1.05rem;
  line-height: 1.6;
  text-align: center;
}

/* 警告リード文 */
.alert-important-lead {
  font-size: 1.1rem;
  font-weight: 500;
  color: #333;
  margin-bottom: 16px;
  line-height: 1.6;
}

.solution-closing {
  background: linear-gradient(135deg, #fffef0 0%, #fff8dc 100%);
  border: 2px dashed var(--color-secondary);
  border-radius: 12px;
  padding: 24px;
  text-align: center;
}

.solution-closing-text {
  font-size: 1rem;
  line-height: 1.9;
  margin: 0;
  color: var(--color-text);
}

/* SP対応 */
@media (max-width: 768px) {
  .check-list-box {
    padding: 20px;
  }
  .alert-important-box {
    padding: 20px;
  }
  .alert-important-title {
    font-size: 1.1rem;
  }
  .solution-box {
    padding: 24px 20px;
  }
  .solution-title {
    font-size: 1.3rem;
  }
  .solution-cards {
    grid-template-columns: 1fr;
  }
  .solution-intro {
    text-align: left;
  }
  .wall-card {
    padding: 20px;
  }
  .wall-number {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }
  .wall-card-title {
    font-size: 1rem;
  }
  .solution-marue {
    padding: 24px 20px;
  }
  .solution-marue-title {
    font-size: 1.1rem;
  }
  .solution-closing-text {
    text-align: left;
  }
}
/* SP用セクションタイトルは後方の統合ブロックで定義 */
.indoor-data-box {
  background: #ffffff;
  border: 2px solid var(--color-secondary);
  padding: 30px;
  border-radius: 8px;
  margin: 60px 0;
  /* Increased from 40px */
  position: relative;
  box-shadow: var(--shadow-md);
  color: var(--color-text);
}

.indoor-data-box::before {
  content: "見落としがちな事実";
  position: absolute;
  top: -14px;
  left: 20px;
  background: var(--color-secondary);
  color: #fff;
  padding: 4px 16px;
  font-size: 0.9rem;
  font-weight: bold;
  border-radius: 4px;
}

.data-title {
  font-size: 1.5rem;
  margin-bottom: 16px;
  display: none;
  /* Replaced by pseudo element */
}

.logic-area {
  margin-bottom: 60px;
}

.logic-title {
  font-size: 1.8rem;
  margin-bottom: 30px;
  color: var(--color-primary);
}

.analogy-flex {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  /* Increased from 20px */
  margin-top: 40px;
  margin-bottom: 30px;
}

.analogy-item {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  width: 300px;
  box-shadow: var(--shadow-sm);
}

.analogy-img-box {
  height: auto;
  /* height: 140px; removed to fit 150px image */
  padding: 20px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  position: relative;
}

.analogy-img-box img {
  width: 150px;
  height: 150px;
  object-fit: contain;
}

.bg-blue-light {
  background: #E3F2FD;
}

.bg-red-light {
  background: #FFEBEE;
}

.cross-mark,
.shock-mark {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 2rem;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2));
}

.analogy-desc {
  font-weight: 700;
  margin-bottom: 8px;
  line-height: 1.5;
}

.analogy-status {
  color: #C62828;
  font-weight: bold;
  font-size: 1.1rem;
}

.analogy-equals {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--color-accent);
}

.equals-sign {
  font-size: 3rem;
  font-weight: 900;
  line-height: 1;
}

.equals-text {
  font-weight: bold;
  white-space: nowrap;
}

.logic-conclusion-wr.data-box {
  background: #fff;
  padding: 40px;
  border-radius: 12px;
  text-align: center;
  position: relative;
  border: 3px solid var(--color-secondary);
  margin-bottom: 50px;
  /* Increased spacing */
}

.logic-conclusion-text {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}

.marker-strong {
  background: linear-gradient(to bottom, transparent 60%, rgb(255, 235, 59) 60%);
}

/* Home Risks */
.home-risks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  /* Increased from 30px */
  max-width: 1000px;
  /* consistent-width */
  margin: 0 auto 60px auto;
  list-style: none;
  /* override default ul */
  padding: 0;
}

.home-risks li {
  background: transparent;
  text-align: center;
}

.risk-icon-circle {
  font-size: 3rem;
  margin-bottom: 12px;
  display: inline-block;
  filter: drop-shadow(0 4px 0 #ddd);
}

.risk-info strong {
  display: block;
  font-size: 1.2rem;
  color: var(--color-primary);
  margin-bottom: 8px;
}

.risk-info p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text-light);
}

/* Product Card */
.product-card {
  background: #fff;
  border-radius: 12px;
  border: 4px double var(--color-accent);
  /* Double border premium feel */
  padding: 30px;
  box-shadow: var(--shadow-lg);
}

.product-card-inner {
  display: flex;
  gap: 40px;
  align-items: center;
}

.product-photo {
  flex: 1;
  text-align: center;
}

.product-photo img {
  width: 100%;
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
}

.product-caption {
  display: block;
  font-size: 0.8rem;
  color: #999;
  margin-top: 8px;
}

.product-details {
  flex: 1;
  text-align: left;
}

.brand-label {
  background: var(--color-primary);
  color: #fff;
  display: inline-block;
  padding: 4px 12px;
  font-size: 0.85rem;
  border-radius: 4px;
  margin-bottom: 12px;
}

.product-title {
  font-size: 1.8rem;
  color: var(--color-text);
  margin-bottom: 16px;
  line-height: 1.3;
}

.product-desc {
  margin-bottom: 24px;
  line-height: 1.8;
}

.btn-product-detail {
  display: inline-block;
  color: var(--color-primary);
  font-weight: bold;
  text-decoration: none;
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: 2px;
  transition: all 0.2s;
}

.btn-product-detail:hover {
  opacity: 0.7;
}

/* Technology & Products */
.technology.section {
  background: #fff;
  padding: 80px 0;
}

.tech-header {
  margin-bottom: 60px;
}

.tech-title {
  /* Font size handled by unified Typography Adjustments (2.5rem) */
  margin-bottom: 24px;
  /* Removed border and padding for simple center style */
  display: inline-block;
  /* Keep inline-block if needed for spacing, or block */
  /* text-align: left; <-- Removed to allow center alignment from parent */
}

.tech-lead {
  font-size: 1rem;
  font-family: var(--font-sans);
  color: var(--color-text-light);
  line-height: 1.8;
}

/* Technology Blocks (Zig-zag) */
.tech-blocks {
  display: flex;
  flex-direction: column;
  gap: 80px;
  margin-bottom: 80px;
}

.tech-block {
  display: flex;
  align-items: center;
  gap: 50px;
}

.tech-block.reverse {
  flex-direction: row-reverse;
}

.tech-content {
  flex: 1;
  position: relative;
}

.tech-visual {
  flex: 1;
  position: relative;
  text-align: center;
}

.rounded-shadow {
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  width: 100%;
  height: auto;
  object-fit: cover;
}

.comparison-caption {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  padding: 0 4px;
  font-size: 0.85rem;
  color: #666;
  font-weight: 700;
}

.tech-watermark {
  font-family: var(--font-serif);
  font-size: 8rem;
  font-weight: 900;
  color: rgba(30, 58, 138, 0.05);
  /* Navy tint */
  position: absolute;
  top: -60px;
  left: -20px;
  line-height: 1;
  z-index: -1;
}

.tech-head {
  font-size: 1.6rem;
  color: var(--color-navy);
  margin-bottom: 20px;
  line-height: 1.4;
  position: relative;
}

.tech-desc {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--color-text);
  margin-bottom: 20px;
}

/* Specific Block Styles */
.tech-alert {
  background: #FEF2F2;
  border: 2px dashed #F87171;
  padding: 20px;
  border-radius: 12px;
  color: #991B1B;
  font-size: 0.95rem;
}

.overlay-arrow-curve {
  position: absolute;
  bottom: 20px;
  right: 20px;
  font-size: 5rem;
  color: var(--color-accent);
  text-shadow: 2px 2px 0 #fff;
  transform: rotate(-10deg);
  font-weight: bold;
}

/* Core Value Column (Refined) */
.core-value.section {
  padding: 0;
}

.core-sub-head {
  font-size: 1rem;
  margin-bottom: 10px;
}

@media (max-width: 768px) {
  .core-sub-head {
    font-size: 0.9rem;
    margin-bottom: 8px;
  }
}
.core-main-head {
  font-size: 2.5rem;
  margin-bottom: 60px;
  line-height: 1.4;
}

@media (max-width: 768px) {
  .core-main-head {
    font-size: 1.6rem;
    margin-bottom: 30px;
  }
}
.core-value-column {
  background: #FFF8E1;
  padding: 60px 20px;
  border-top: 4px solid #8D6E63;
  border-bottom: 4px solid #8D6E63;
  width: 100%;
  /* Ensure full width */
}

.column-inner {
  max-width: 900px;
  margin: 0 auto;
}

.core-comparison {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 30px;
  margin: 40px 0;
}

.core-col {
  flex: 1;
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  text-align: center;
  box-shadow: var(--shadow-md);
  position: relative;
}

.core-icon {
  font-size: 3rem;
  display: block;
  margin-bottom: 10px;
}

.core-divider {
  align-self: stretch;
  width: 1px;
  border-left: 1px dashed #bbb;
  font-size: 0;
  margin: 0 10px;
  flex-shrink: 0;
}

.core-conclusion {
  background: #fff;
  padding: 20px;
  border-radius: 50px;
  display: inline-block;
  border: 2px solid var(--color-primary);
  width: 100%;
  margin-bottom: 20px;
}

.conclusion-text {
  font-size: 1.25rem;
  font-weight: bold;
  color: var(--color-navy);
}

.bring-in-note-box {
  text-align: center;
  margin-top: 20px;
}

.note-text-sm {
  background: #fff;
  display: inline-block;
  padding: 6px 16px;
  border-radius: 4px;
  font-size: 0.85rem;
  color: #666;
  border: 1px solid #ddd;
}

/* Recommended Products (Select Shop Style) */
.handwritten-bubble {
  font-family: "Comic Sans MS", cursive;
  /* Fallback */
  background: var(--color-accent);
  color: #fff;
  padding: 5px 15px;
  border-radius: 20px;
  font-size: 1rem;
  position: relative;
  top: -10px;
  display: inline-block;
}

.handwritten-bubble::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 20px;
  border-top: 6px solid var(--color-accent);
  border-right: 6px solid transparent;
}

.products-title {
  font-size: 2.2rem;
  line-height: 1.5;
  margin-bottom: 40px;
  font-weight: 700;
  color: var(--color-primary);
}

@media (max-width: 768px) {
  .products-title {
    font-size: 1.6rem;
    margin-bottom: 30px;
  }
}
.products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  row-gap: 60px;
  /* Increase vertical gap */
  margin-bottom: 50px;
}

.product-item {
  background: #f9fafb;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
  height: 100%;
  padding: 20px;
  /* Unified internal spacing */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.product-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.product-item-img {
  margin-bottom: 16px;
}

.product-item-img img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 8px;
}

.product-catch {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 8px;
}

.product-brand {
  font-size: 0.85rem;
  color: #666;
  display: block;
  margin-bottom: 0;
  font-weight: normal;
}

.product-desc-text {
  font-size: 0.9rem;
  color: var(--color-text);
  line-height: 1.7;
}

.tech-alert h5 {
  color: #C62828;
  /* Red text */
  font-size: 1.1rem;
  margin-bottom: 10px;
  margin-top: 0;
  /* Remove top margin */
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-request-area {
  background: #fff;
  border: 2px dashed #ccc;
  padding: 30px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  max-width: 700px;
  margin: 0 auto;
}

.shop-owner-icon img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid #eee;
}

@media (max-width: 768px) {
  .tech-blocks {
    gap: 60px;
  }
  .tech-block,
  .tech-block.reverse {
    flex-direction: column-reverse;
    /* Image Top (visual first) */
  }
  .tech-visual {
    margin-bottom: 20px;
    width: 100%;
  }
  .core-comparison {
    flex-direction: column;
    gap: 10px;
  }
  .core-vs {
    transform: rotate(90deg);
    margin: 10px 0;
  }
  /* Product Horizontal Scroll */
  .products-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 20px;
    grid-template-columns: none;
    gap: 16px;
  }
  .product-item {
    min-width: 85%;
    scroll-snap-align: center;
  }
  .product-request-area {
    flex-direction: column;
    text-align: center;
    padding: 30px 20px;
  }
}
/* Pricing Section */
.price-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  max-width: 1000px;
  margin: 0 auto;
  align-items: flex-start;
}

@media (min-width: 769px) {
  .price-grid {
    grid-template-columns: 1fr 1.1fr 1fr;
    /* Center slightly wider */
    gap: 32px;
    align-items: flex-start;
    padding-top: 20px;
    /* Space for pop-up effect */
  }
}
.price-card {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  border: 1px solid #e5e7eb;
  position: relative;
  height: 100%;
}

/* Recommended Card Styling */
.price-card.recommended {
  border: 3px solid #FBC02D;
  /* Gold/Yellow-400 */
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  z-index: 10;
  padding: 32px;
  /* Larger padding */
}

@media (min-width: 769px) {
  .price-card.recommended {
    transform: translateY(-16px);
    /* Pop up effect */
  }
}
/* Badge (Corner) */
.badge-ribbon-corner {
  position: absolute;
  top: -25px;
  right: -10px;
  background: #FBC02D;
  /* Gold */
  color: var(--color-navy);
  padding: 6px 16px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
  border: 2px solid #fff;
  /* Clear separation */
  white-space: nowrap;
}

/* Indoor Model Card Styling (The Knight) */
.price-card.indoor-model {
  background-color: #eff6ff;
  /* bg-blue-50 */
  border: 2px solid #bfdbfe;
  /* border-blue-200 */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Badge (Left Corner) */
.badge-corner-left {
  position: absolute;
  top: -25px;
  left: -10px;
  background: #3b82f6;
  /* Blue-500 */
  color: #fff;
  padding: 6px 16px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 0.85rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
  border: 2px solid #fff;
  white-space: nowrap;
  z-index: 5;
}

/* Typography & Content */
.price-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 12px;
  border-bottom: 2px solid #f3f4f6;
  padding-bottom: 8px;
}

.recommended .price-name {
  font-size: 1.3rem;
  color: var(--color-navy);
  border-bottom-color: #FBC02D;
}

.price-val {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 8px;
  line-height: 1.2;
}

.price-val .unit {
  font-size: 1rem;
}

.price-val .sub-text {
  font-size: 1rem;
  color: #4b5563;
  font-weight: normal;
}

.text-red {
  color: #C62828 !important;
}

.price-breakdown {
  font-size: 0.85rem;
  color: #6b7280;
  background: #f9fafb;
  padding: 8px;
  border-radius: 4px;
  margin-bottom: 16px;
  line-height: 1.5;
}

/* Descriptions & Benefits */
.price-description p {
  font-size: 0.9rem;
  margin-bottom: 6px;
}

.note-highlight {
  font-size: 0.8rem;
  background: #f3f4f6;
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-block;
}

.price-benefits {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

.price-benefits li {
  font-size: 0.95rem;
  margin-bottom: 8px;
  font-weight: 600;
  display: flex;
  align-items: center;
}

.check-mark {
  color: #FBC02D;
  font-size: 1.2rem;
  margin-right: 8px;
}

/* Alert Box */
.price-alert-box {
  background: #fef2f2;
  border: 1px solid #fee2e2;
  padding: 8px;
  border-radius: 4px;
  margin-top: 12px;
}

.price-alert-text {
  font-size: 0.8rem;
  color: #dc2626;
  font-weight: 700;
}

/* Footer & CTA */
.price-footer {
  margin-top: 48px;
  text-align: center;
}

.price-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #d1d5db;
  color: #374151;
  padding: 16px 32px;
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.3s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.price-cta-btn:hover {
  background: #f9fafb;
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.price-cta-btn .icon {
  font-size: 1.5rem;
  margin-right: 8px;
}

.price-cta-btn .text {
  font-size: 1.1rem;
  font-weight: 700;
}

.price-note {
  font-size: 0.75rem;
  color: #9ca3af;
  margin-top: 16px;
}

/* Flow */
.flow-tabs-control {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 65px;
}

/* Close .flow-tabs-control */
.tab-btn {
  padding: 12px 30px;
  border: 2px solid #e5e5e5;
  background: #f0f0f0;
  /* Clearly inactive gray */
  color: #777;
  /* Muted text */
  border-radius: 50px;
  font-weight: bold;
  cursor: pointer;
  font-size: 1.1rem;
  transition: all 0.3s;
}

.tab-btn:hover {
  background: #e0e0e0;
  color: #444;
}

.tab-btn.active {
  background: #1e3a8a;
  /* Deep Navy Blue */
  color: #ffffff;
  /* Pure White */
  border-color: #1e3a8a;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.flow-horizontal {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
}

/* Connector Line for PC */
.flow-horizontal::before {
  content: "";
  position: absolute;
  top: 30px;
  left: 40px;
  right: 40px;
  height: 3px;
  background: #e0e0e0;
  z-index: 0;
}

.flow-step-item {
  position: relative;
  z-index: 1;
  text-align: center;
  flex: 1;
  padding: 0 10px;
}

.step-icon {
  width: 60px;
  height: 60px;
  background: #fff;
  border: 3px solid var(--color-navy);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  font-size: 1.8rem;
  /* transition: transform 0.3s; */
}

.step-text strong {
  display: block;
  margin-bottom: 6px;
  color: var(--color-navy);
  font-size: 1rem;
}

.step-text p {
  font-size: 0.85rem;
  color: #666;
  /* Improved readability */
  text-align: left;
  line-height: 1.6;
  margin-top: 8px;
}

.badge-free {
  position: absolute;
  top: -25px;
  /* Moved up slightly */
  right: 50%;
  /* Center relative to parent */
  transform: translateX(50%) translateX(25px);
  /* Offset to the right of center */
  background: #FF7043;
  color: #fff;
  font-size: 0.7rem;
  padding: 3px 10px;
  border-radius: 20px;
  font-weight: bold;
  z-index: 2;
  white-space: nowrap;
}

/* Warranty */
.warranty-certificate {
  background: #FFFBF0;
  /* Creamy */
  border: 4px double #D4AC0D;
  /* Gold-ish */
  padding: 40px;
  text-align: center;
  border-radius: 12px;
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .warranty-certificate {
    padding: 20px;
  }
}
.warranty-icon {
  font-size: 3.5rem;
  margin-bottom: 20px;
}

.warranty-title {
  font-size: 1.8rem;
  margin-bottom: 20px;
  color: #5D4037;
  /* Brown */
}

@media (max-width: 768px) {
  .warranty-title {
    font-size: 1.6rem;
  }
}
.warranty-text {
  font-size: 1.1rem;
  line-height: 1.8;
  margin-bottom: 20px;
}

.warranty-sign {
  font-family: "Kaushan Script", cursive, serif;
  /* Or similar handwriting font */
  font-size: 1.5rem;
  text-align: right;
  margin-top: 30px;
  color: #5D4037;
  margin-right: 40px;
}

@media (max-width: 768px) {
  .warranty-sign {
    margin-right: 0px;
  }
}
/* FAQ */
.faq-list {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-item {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.faq-item summary {
  list-style: none;
  /* Hide default triangle */
  padding: 20px;
  font-weight: bold;
  cursor: pointer;
  position: relative;
  padding-right: 50px;
  display: flex;
  align-items: center;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.q-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--color-navy);
  color: #fff;
  border-radius: 4px;
  margin-right: 12px;
  font-size: 0.9rem;
  flex-shrink: 0;
}

/* Chevron */
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  color: #ccc;
  font-weight: normal;
}

.faq-item[open] summary::after {
  content: "−";
}

.faq-ans {
  background: #fafafa;
  border-top: 1px solid #f0f0f0;
  padding: 20px 20px 20px 60px;
  /* Indent under question text */
  font-size: 0.95rem;
  line-height: 1.8;
}

/* Section Backgrounds */
/* Section Backgrounds - Updated for Contrast Rhythm */
.problem.section {
  background-color: var(--color-bg-section-warm);
  /* Distinct Greige */
}

.risk.section {
  background-color: #ffffff;
  /* White (Contrast against Problem/Indoor) */
}

/* Add top border/separator via HTML instead of baked in wave */
.indoor.section {
  background-color: var(--color-bg-section-warm);
  /* Distinct Greige */
}

.technology.section {
  background-color: #ffffff;
}

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

.flow.section {
  background-color: #ffffff;
}

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

.faq.section {
  background-color: #ffffff;
}

.cta.section {
  background: var(--color-primary);
  /* Navy Impact - inherits .section padding */
}

.cta.section .section-title,
.cta.section .cta-title {
  color: #fff !important;
}

/* General separator wrapper to add padding around the line */
.section-separator-container {
  padding: 60px 0;
  /* Breathable space */
  width: 100%;
  /* Background color should be handled by the parent or context, 
     often it sits between sections. 
     Actually, putting it INSIDE sections at the top or bottom is easier. 
     Let's assume it is placed BETWEEN sections in HTML.
  */
}

.cta-title {
  font-size: 2.2rem;
  margin-bottom: 60px;
  /* Increased spacing */
}

.cta-button-area {
  margin: 0 0 60px;
  /* Removed top margin as requested */
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 600px;
}

.cta-sub {
  margin-bottom: 80px;
  /* Increased spacing to separate phone button from map */
}

.cta-balloon {
  position: relative;
  /* Changed from absolute to relative to take up space */
  top: auto;
  left: auto;
  transform: none;
  margin: 0 auto 20px;
  /* Center and add gap below */
  display: inline-block;
  background: #fff;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  padding: 10px 24px;
  border-radius: 30px;
  font-weight: bold;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  font-size: 1.05rem;
}

.cta-balloon::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  border-top: 8px solid var(--color-primary);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
}

.btn-line-green {
  background: #06C755;
  color: #fff;
  width: 100%;
  border-radius: 50px;
  box-shadow: 0 10px 20px rgba(6, 199, 85, 0.3);
}

.btn-line-green:hover {
  background: #05b54c;
  transform: translateY(-2px);
}

.btn-tel {
  background: #fff;
  color: #333;
  border: 2px solid #ddd;
  width: 100%;
  max-width: 600px;
  border-radius: 50px;
}

.shop-access-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  max-width: 600px;
  margin: 50px auto 0;
  box-shadow: var(--shadow-md);
  display: flex;
  gap: 20px;
  text-align: left;
  height: 200px;
}

.access-info {
  flex: 1;
}

.shop-name {
  font-size: 1.2rem;
  margin-bottom: 8px;
  font-weight: bold;
}

.shop-address {
  font-size: 0.9rem;
  margin-bottom: 12px;
  line-height: 1.5;
}

.parking-info {
  background: #E3F2FD;
  color: #1565C0;
  display: inline-block;
  padding: 4px 8px;
  font-size: 0.8rem;
  border-radius: 4px;
  font-weight: bold;
}

.map-container {
  flex: 1;
  border-radius: 8px;
  overflow: hidden;
  background: #eee;
}

/* Evidence */
.evidence-accordion {
  border-top: 1px solid #eee;
  padding-top: 20px;
}

.evidence-summary {
  cursor: pointer;
  color: #888;
  font-size: 0.9rem;
  list-style: none;
  text-align: center;
}

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

.evidence-content {
  margin-top: 20px;
  padding: 20px;
  background: #f9f9f9;
  font-size: 0.8rem;
  color: #666;
  border-radius: 8px;
}

.ref-list li {
  margin-bottom: 6px;
}

.ref-list a {
  color: #666;
  text-decoration: none;
}

.ref-list a:hover {
  text-decoration: underline;
}

/* ==========================
   Access Section Styles
   ========================== */
.access-section {
  background-color: #f9f9f9;
}

.access-header {
  margin-bottom: 50px;
}

.access-lead {
  font-size: 1.1rem;
  color: var(--color-text-light);
}

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

@media (min-width: 769px) {
  .access-grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}
.access-info-box {
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}

.shop-name-large {
  font-size: 1.6rem;
  color: var(--color-primary);
  border-bottom: 2px solid var(--color-secondary);
  padding-bottom: 12px;
  margin-bottom: 16px;
}

.shop-address {
  font-size: 1rem;
  margin-bottom: 8px;
}

.shop-hours {
  font-size: 0.95rem;
  color: var(--color-text-light);
  margin-bottom: 24px;
}

.access-detail-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.access-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.access-icon {
  font-size: 1.6rem;
  flex-shrink: 0;
}

.access-text strong {
  display: block;
  margin-bottom: 6px;
  color: var(--color-primary);
}

.station-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.station-list li {
  font-size: 0.95rem;
  margin-bottom: 4px;
  padding-left: 1em;
  text-indent: -1em;
}

.station-list li::before {
  content: "・";
}

.access-desc {
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

.text-note {
  font-size: 0.85rem;
  color: #666;
}

/* 駐車場ハイライト */
.parking-highlight {
  background-color: #eef5f9;
  padding: 20px;
  border-radius: 8px;
  border-left: 5px solid var(--color-primary);
}

.badge-parking {
  background-color: var(--color-primary);
  color: #fff;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: bold;
  display: inline-block;
}

.parking-desc {
  margin-top: 12px;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* ビジュアル（マップ・写真） */
.access-visuals {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.map-wrapper iframe {
  width: 100%;
  height: 300px;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}

.parking-photo-area {
  margin-top: 10px;
}

.parking-figure {
  margin: 0;
}

.parking-figure img {
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid #eee;
}

.parking-caption {
  text-align: center;
  font-size: 0.85rem;
  color: #666;
  margin-top: 10px;
}

/* アクセスCTAボックス */
.access-cta-box {
  margin-top: 50px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  padding: 30px;
  border-radius: 12px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.access-cta-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.access-cta-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.access-cta-link:hover {
  opacity: 1;
}

.access-cta-text {
  color: #fff;
  font-size: 1.1rem;
  line-height: 1.8;
  margin: 0;
}

.access-cta-text strong {
  color: #fff;
}

/* SPレスポンシブ */
@media (max-width: 768px) {
  .access-info-box {
    padding: 20px;
  }
  .shop-name-large {
    font-size: 1.4rem;
  }
  .access-icon {
    font-size: 1.4rem;
  }
  .access-cta-box {
    padding: 20px;
  }
  .access-cta-text {
    font-size: 1rem;
  }
}
/* Sticky Footer (Mobile Only) */
.sticky-footer {
  display: none;
  /* Hidden on PC */
}

@media (max-width: 768px) {
  .sticky-footer {
    /* ... existing properties ... */
    /* display: flex is already inside, which overrides none */
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    display: flex;
    flex-wrap: nowrap;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  }
  .sticky-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 14px 0;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.95rem;
    /* Increased from 0.85rem for better readability */
    white-space: nowrap;
    overflow: hidden;
  }
  .tel-btn {
    flex: 35;
    /* Ratio based width */
    background: var(--color-white);
    color: var(--color-text);
    border-top: 1px solid #ccc;
  }
  .line-btn {
    flex: 65;
    /* Ratio based width */
    background: var(--color-green);
    color: var(--color-white);
  }
  /* Extra small screens adjustment handled within this scope or nested */
}
@media (max-width: 768px) and (max-width: 370px) {
  .sticky-btn {
    font-size: 0.75rem;
    padding: 10px 0;
  }
}
/* Mobile Responsive */
@media (max-width: 768px) {
  :root {
    --size-base: 15px;
  }
  .hero-copy .copy-main {
    font-size: 1.7rem;
  }
  .hero .hero-copy .copy-sub {
    font-size: 1rem;
  }
  .hero .authority-badge {
    gap: 6px;
    margin-bottom: 16px;
    justify-content: center;
  }
  .hero .authority-badge span {
    font-size: 0.7rem;
    padding: 4px 8px;
    border-width: 1px;
  }
  .risk-grid {
    grid-template-columns: 1fr;
  }
  /* Unified Section Title Adjustment for SP */
  .section-title,
  .risk-title,
  .tech-title,
  .indoor-title {
    font-size: 2rem;
    margin-bottom: 40px;
  }
  .cta-title {
    font-size: 1.85rem;
    margin-bottom: 40px;
  }
  /* Reduced sub-headings by ~0.2rem */
  .tech-head {
    font-size: 1.4rem;
  }
  /* Core Comparison Divider (SP) */
  .core-comparison {
    flex-direction: column;
    gap: 0;
  }
  .core-divider {
    width: 100%;
    height: auto;
    border: none;
    font-size: 12px;
    color: #888;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
  }
  .core-divider::before,
  .core-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #ccc;
  }
  .core-divider::before {
    margin-right: 12px;
  }
  .core-divider::after {
    margin-left: 12px;
  }
  .closing-main {
    font-size: 1rem;
  }
  .risk-head {
    font-size: 1.1rem;
  }
  .product-title {
    font-size: 1.6rem;
  }
  .logic-area {
    margin-bottom: 40px;
  }
  .logic-title {
    font-size: 1.6rem;
  }
  .price-cta-btn .icon {
    display: none;
  }
  .price-cta-btn .text {
    font-size: 1rem;
  }
  .product-body {
    flex-direction: column-reverse;
  }
  /* .analogy-flex と .home-risks は下部で定義済み */
  .price-grid {
    flex-direction: column;
    align-items: center;
  }
  .price-card {
    width: 100%;
    max-width: 100%;
  }
  .header-cta {
    display: none;
  }
  /* Hide header CTA on mobile to avoid clutter */
  /* Section 4 Responsive */
  .analogy-flex {
    flex-direction: column;
    gap: 20px;
  }
  .equals-sign {
    transform: rotate(90deg);
    margin: 10px 0;
  }
  .home-risks {
    grid-template-columns: 1fr;
  }
  .product-card-inner {
    flex-direction: column;
  }
  .product-details {
    text-align: center;
  }
  .data-highlight {
    font-size: 2.5rem;
  }
  /* Price */
  .price-grid {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }
  .price-card.recommended {
    order: -1;
    transform: scale(1);
    margin-top: 10px;
  }
  /* Recommended First */
  /* Flow - Vertical Timeline */
  .flow-horizontal {
    flex-direction: column;
    padding-left: 20px;
  }
  .flow-horizontal::before {
    left: 29px;
    /* Align with icon center (icon is 60px, so center ~30) usually needs tweaking */
    top: 0;
    bottom: 0;
    width: 3px;
    height: auto;
  }
  .flow-step-item {
    display: flex;
    align-items: center;
    text-align: left;
    margin-bottom: 30px;
    width: 100%;
    padding: 0;
  }
  .step-icon {
    margin: 0 20px 0 0;
    width: 50px;
    height: 50px;
    font-size: 1.4rem;
    flex-shrink: 0;
  }
  .badge-free {
    top: -10px;
    right: auto;
    left: 30px;
    /* Above icon */
  }
  .flow-step-item:last-child {
    margin-bottom: 0;
  }
  /* Access Map */
  .shop-access-card {
    flex-direction: column;
    height: auto;
    text-align: center;
  }
  .map-container {
    height: 200px;
    width: 100%;
  }
  /* FAQ */
  .faq-ans {
    padding-left: 20px;
  }
}
/* FAQ Updates */
.faq-group-title {
  font-size: 1.3rem;
  /* Slightly larger */
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 2px solid var(--color-bg-brown-light);
  /* Softer border */
  padding-bottom: 12px;
  margin-top: 20px;
  /* Default top margin */
}

/* Override for larger spacing */
.mt-lg {
  margin-top: 64px;
}

.mt-md {
  margin-top: 32px;
}

.note-box {
  display: block;
  background: #f8f9fa;
  padding: 12px 16px;
  border-radius: 8px;
  margin-top: 16px;
  font-size: 0.95rem;
  color: #444;
  border-left: 4px solid var(--color-secondary);
}

.highlight-text {
  background: linear-gradient(transparent 60%, rgba(255, 215, 0, 0.3) 60%);
  /* Gold/Yellow highlight */
  font-weight: bold;
  padding: 0 2px;
}

.icon-text {
  display: inline-block;
  font-size: 1.2rem;
  vertical-align: middle;
  margin-right: 6px;
}

/* Responsive adjustments for FAQ headers */
@media (max-width: 768px) {
  .faq-group-title {
    font-size: 1.1rem;
    padding-bottom: 10px;
    margin-bottom: 20px;
  }
  .mt-lg {
    margin-top: 48px;
  }
}
/* -------------------------------------
   Flow Section Enhancements
------------------------------------- */
/* Step Numbers */
/* Step Numbers */
.step-num {
  font-size: 1.5rem;
  font-weight: 900;
  color: #4a5568;
  /* Darker gray for visibility */
  line-height: 1;
  margin-bottom: 8px;
  font-family: var(--font-serif);
}

/* Highlighted Step (Step 02) */
.special-step {
  border: 3px solid #FF7043 !important;
  /* Orange border */
  background: #fff7ed;
  /* Subtle orange tint for cohesion with border */
  border-radius: 12px;
  padding: 20px 10px;
  /* Add internal padding */
  box-shadow: 0 4px 15px rgba(255, 112, 67, 0.2);
  /* Orange glow */
  position: relative;
  z-index: 10;
}

@media (min-width: 769px) {
  .special-step {
    transform: scale(1.05);
    margin-top: -10px;
    /* Pop out */
  }
}
.step-text strong {
  display: block;
  margin-bottom: 6px;
  color: var(--color-navy);
  font-size: 1rem;
}

.step-text p {
  font-size: 0.85rem;
  color: #666;
  line-height: 1.6;
}

/* Mail Intro Box */
.mail-intro-box {
  background: #f0f9ff;
  /* Lightest Blue */
  border: 1px solid #bae6fd;
  padding: 24px;
  border-radius: 8px;
  margin-bottom: 40px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.mail-intro-box h4 {
  font-size: 1.2rem;
  color: var(--color-primary);
  margin-bottom: 12px;
  font-weight: 700;
}

.mail-intro-box p {
  font-size: 0.95rem;
  line-height: 1.8;
}

/* Payment Box */
.payment-box {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 32px;
  margin-top: 60px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.payment-title {
  text-align: center;
  font-size: 1.1rem;
  color: var(--color-text);
  margin-bottom: 24px;
  position: relative;
  display: inline-block;
  left: 50%;
  transform: translateX(-50%);
  padding-bottom: 8px;
  border-bottom: 2px solid #ddd;
}

.payment-methods {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px 40px;
}

.pay-item {
  display: flex;
  align-items: center;
  font-weight: 700;
  color: var(--color-navy);
  font-size: 1rem;
}

.pay-icon {
  font-size: 1.8rem;
  margin-right: 8px;
}

.pay-sub {
  display: block;
  font-size: 0.75rem;
  color: #888;
  font-weight: normal;
  margin-left: 8px;
}

.pay-item.note {
  align-items: flex-start;
}

.pay-item.note .pay-sub {
  margin-left: 0;
}

/* Warranty Updates */
.warranty-body {
  max-width: 700px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.6);
  padding: 30px;
  border-radius: 8px;
  box-shadow: inset 0 0 20px rgba(212, 172, 13, 0.1);
}

.warranty-lead {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 20px;
}

.text-sm {
  font-size: 0.85rem;
  color: #666;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .payment-methods {
    flex-direction: column;
    align-items: flex-start;
    padding-left: 20px;
  }
  .pay-item {
    margin-bottom: 10px;
  }
  .warranty-body {
    padding: 10px;
  }
  .warranty-lead {
    font-size: 1.1rem;
  }
}
/* =========================================
   SCROLL REVEAL ANIMATIONS (Fade Up)
   ========================================= */
/* Default state: hidden and slightly shifted down */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  will-change: opacity, transform;
}

/* Active state: visible and in original position */
.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered delays for children elements if needed */
.delay-100 {
  transition-delay: 0.1s;
}

.delay-200 {
  transition-delay: 0.2s;
}

.delay-300 {
  transition-delay: 0.3s;
}

.delay-400 {
  transition-delay: 0.4s;
}

/* =========================================
   Navigation & Hamburger
   ========================================= */
/* Header - All header styles consolidated here */
.header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  z-index: 50;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
}

.header-inner {
  height: 70px;
  /* Restore fixed height for top bar */
  width: 100%;
  /* Ensure container width */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Hamburger Button (SP Only) */
.hamburger-btn {
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  cursor: pointer;
  position: relative;
  display: none;
  /* PC: hidden */
  z-index: 60;
}

.hamburger-btn .bar {
  position: absolute;
  left: 50%;
  width: 24px;
  height: 2px;
  background-color: var(--color-primary);
  border-radius: 2px;
  transform: translateX(-50%);
  transition: all 0.3s ease;
}

.hamburger-btn .bar:nth-child(1) {
  top: 14px;
}

.hamburger-btn .bar:nth-child(2) {
  top: 21px;
}

.hamburger-btn .bar:nth-child(3) {
  top: 28px;
}

/* Hamburger Open Elements */
.hamburger-btn.is-active .bar:nth-child(1) {
  top: 21px;
  transform: translateX(-50%) rotate(45deg);
}

.hamburger-btn.is-active .bar:nth-child(2) {
  opacity: 0;
}

.hamburger-btn.is-active .bar:nth-child(3) {
  top: 21px;
  transform: translateX(-50%) rotate(-45deg);
}

/* Global Navigation */
.global-nav {
  width: 100%;
  background-color: #ffffff;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.nav-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-link {
  display: block;
  text-decoration: none;
  color: var(--color-text);
  font-size: 0.95rem;
  font-weight: 500;
  transition: all 0.3s;
  position: relative;
}

/* External Link Icon */
.ext-icon {
  font-size: 0.8em;
  margin-left: 4px;
  color: #999;
}

/* PC View */
@media (min-width: 769px) {
  .hamburger-btn {
    display: none;
  }
  .nav-container {
    max-width: var(--width-container);
    margin: 0 auto;
  }
  .nav-list {
    justify-content: center;
    gap: 2vw;
  }
  .nav-link {
    padding: 12px 10px;
  }
  /* Hover & Active Highlight (Scrollspy) */
  .nav-link:hover,
  .nav-link.active {
    color: var(--color-primary);
    font-weight: 700;
  }
  /* Underline animation */
  .nav-link::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background-color: var(--color-primary);
    transition: width 0.3s ease;
  }
  .nav-link:hover::after,
  .nav-link.active::after {
    width: 80%;
  }
  /* SP Only reset */
  .sp-only {
    display: none !important;
  }
}
/* SP View */
@media (max-width: 768px) {
  .hamburger-btn {
    display: block;
  }
  .global-nav {
    position: fixed;
    top: 70px;
    /* Below header */
    right: 0;
    width: 100%;
    height: calc(100vh - 70px);
    background: rgba(255, 255, 255, 0.98);
    transform: translateX(100%);
    /* Hidden by default */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 50;
    overflow-y: auto;
    padding: 20px 0;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.05);
  }
  .global-nav.is-open {
    transform: translateX(0);
  }
  .nav-container {
    width: 100%;
    padding: 0 20px;
  }
  .nav-list {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
  .nav-item {
    width: 100%;
    border-bottom: 1px solid #eee;
  }
  .nav-link {
    padding: 20px 0;
    text-align: center;
    font-size: 1rem;
    width: 100%;
  }
  .nav-link.nav-external {
    color: var(--color-primary);
    font-weight: 700;
  }
}/*# sourceMappingURL=style.css.map */