/*
Theme Name: Aircon LP
Description: エアコン修理業者専用ランディングページテーマ。デザイナー仕様書に基づいた実装。
Author: Claude Code
Version: 1.0.0
License: GPL v2 or later
Text Domain: aircon-lp
*/

/* Desktop Bottom Image */
.desktop-bottom-image {
  text-align: center;
  display: none;
}

.desktop-bottom-image img {
  max-width: 100%;
  height: auto;
}

/* Mobile Bottom Image */
.mobile-bottom-image {
  text-align: center;
  display: none;
}

.mobile-bottom-image img {
  max-width: 100%;
  height: auto;
}

@media (min-width: 1025px) {
  .desktop-bottom-image {
    display: block !important;
    position: absolute;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%) scale(1.2);
  }
  
  .desktop-icons {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

@media (max-width: 1024px) {
  .desktop-bottom-image {
    display: none !important;
  }
  
  .mobile-bottom-image {
    display: block !important;
    position: absolute;
    bottom: -330px;
    left: 50%;
    transform: translateX(-50%) scale(1.5);
  }
}

/* ==========================================================================
   CTA/COUPON SECTION STYLES
   ========================================================================== */

/* CTA Coupon Section Layout */
.cta-coupon-section {
  background: var(--color-primary);
  padding: var(--spacing-xl) 0;
  position: relative;
}

.cta-coupon-section .decorative-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.1) 10px,
    transparent 10px,
    transparent 20px
  );
  z-index: 1;
}


.cta-coupon-section .container {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
}

.rescue-banner-container {
  position: relative;
  text-align: center;
  display: inline-block;
  max-width: 1200px;
  width: 100%;
}

.rescue-banner-container img {
  width: 100%;
  height: auto;
  display: block;
}

/* CTA Overlay Button Effects */
.cta-overlay {
  transition: var(--transition-base);
}

.cta-overlay:hover {
  transform: translateY(-8px) scale(1.02);
}

.cta-overlay:active {
  transform: translateY(-4px) scale(0.98);
}

/* LINE CTA specific positioning */
.line-cta {
  position: absolute;
  top: 50%;
  left: 33%;
  transform: translateX(-50%);
  width: 70%;
  max-width: 700px;
  transition: var(--transition-base);
}

.line-cta:hover {
  transform: translateX(-50%) translateY(-8px) scale(1.02);
}

.line-cta:active {
  transform: translateX(-50%) translateY(-4px) scale(0.98);
}

/* Bottom CTA Row */
.bottom-cta-row {
  position: absolute;
  bottom: 5%;
  left: 33%;
  transform: translateX(-50%);
  width: 90%;
  display: flex;
  gap: 2%;
  justify-content: center;
}

.bottom-cta-row .cta-overlay {
  flex: 1;
  max-width: 350px;
  transition: all 0.3s ease;
}

.bottom-cta-row .cta-overlay img {
  width: 100%;
  height: auto;
}

/* PC版レイアウト: LINEボタンを上に、電話・お問い合わせボタンを横並びに */
@media (min-width: 1025px) {
  .rescue-banner-container {
    position: relative;
  }

  .line-cta {
    position: absolute !important;
    top: 56% !important;
    left: calc(50% - 160px) !important;
    transform: translate(-50%, -50%) !important;
    width: 60% !important;
    max-width: 500px !important;
    z-index: 10;
  }

  .bottom-cta-row {
    position: absolute !important;
    bottom: 15% !important;
    left: calc(50% - 160px) !important;
    transform: translateX(-50%) !important;
    width: 80% !important;
    max-width: 700px !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 20px !important;
    justify-content: center !important;
  }

  .bottom-cta-row .cta-overlay {
    flex: 1 !important;
    max-width: 320px !important;
  }

  .line-cta:hover {
    transform: translate(-50%, -50%) translateY(-8px) scale(1.02) !important;
  }

  .line-cta:active {
    transform: translate(-50%, -50%) translateY(-4px) scale(0.98) !important;
  }
}

/* PC版CTAセクション表示制御 */
.cta-coupon-section {
  display: block;
}

.cta-mobile-section {
  display: none;
}

/* モバイル・タブレット版CTAセクション表示制御 */
@media (max-width: 768px) {
  .cta-coupon-section {
    display: none;
  }
  
  .cta-mobile-section {
    display: block;
    text-align: center;
    padding: 20px 15px;
    background: #ffd600;
    position: relative;
  }
  
  .cta-mobile-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.2),
      rgba(255, 255, 255, 0.2) 6px,
      transparent 6px,
      transparent 12px
    );
    z-index: 1;
  }
  
  .cta-mobile-section > * {
    position: relative;
    z-index: 2;
  }
  
  .cta-mobile-section img {
    width: 95%;
    max-width: 800px;
    height: auto;
    display: block;
    margin: 10px auto;
  }
  
  .cta-mobile-section a {
    display: block;
    transition: all 0.3s ease;
    margin: 15px auto;
  }
  
  .cta-mobile-section a:hover {
    transform: translateY(-5px);
  }
}

/* ==========================================================================
   CSS CUSTOM PROPERTIES (CSS Variables)
   ========================================================================== */
:root {
  /* Colors */
  --color-primary: #ffd600;
  --color-secondary: #0057e7;
  --color-text: #333333;
  --color-bg: #ffffff;
  --color-bg-sub: #f0f4f8;

  /* Spacing */
  --spacing-xs: 5px;
  --spacing-sm: 10px;
  --spacing-md: 20px;
  --spacing-lg: 30px;
  --spacing-xl: 60px;
  --spacing-xxl: 80px;

  /* Animations */
  --transition-fast: all 0.2s ease;
  --transition-base: all 0.3s ease;
  --transition-slow: all 0.5s ease;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 15px;
  --radius-lg: 20px;
  --radius-circle: 50%;

  /* Shadows */
  --shadow-sm: 0 4px 8px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 12px 30px rgba(0, 0, 0, 0.2);

  /* Z-index */
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-fixed: 30;
  --z-modal: 40;
  --z-tooltip: 50;
}

/* Reset and Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

/* Layout Utilities */
.u-flex {
  display: flex;
}
.u-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.u-flex-column {
  display: flex;
  flex-direction: column;
}
.u-flex-wrap {
  display: flex;
  flex-wrap: wrap;
}
.u-grid {
  display: grid;
}
.u-relative {
  position: relative;
}
.u-absolute {
  position: absolute;
}
.u-fixed {
  position: fixed;
}

/* Spacing Utilities */
.u-p-xs {
  padding: var(--spacing-xs);
}
.u-p-sm {
  padding: var(--spacing-sm);
}
.u-p-md {
  padding: var(--spacing-md);
}
.u-p-lg {
  padding: var(--spacing-lg);
}
.u-p-xl {
  padding: var(--spacing-xl);
}
.u-p-xxl {
  padding: var(--spacing-xxl);
}

.u-m-xs {
  margin: var(--spacing-xs);
}
.u-m-sm {
  margin: var(--spacing-sm);
}
.u-m-md {
  margin: var(--spacing-md);
}
.u-m-lg {
  margin: var(--spacing-lg);
}
.u-m-xl {
  margin: var(--spacing-xl);
}
.u-m-auto {
  margin: 0 auto;
}

/* Text Utilities */
.u-text-center {
  text-align: center;
}
.u-text-left {
  text-align: left;
}
.u-text-right {
  text-align: right;
}

/* Background Utilities */
.u-bg-primary {
  background-color: var(--color-primary);
}
.u-bg-secondary {
  background-color: var(--color-secondary);
}
.u-bg-white {
  background-color: var(--color-bg);
}

/* Border Utilities */
.u-radius-sm {
  border-radius: var(--radius-sm);
}
.u-radius-md {
  border-radius: var(--radius-md);
}
.u-radius-lg {
  border-radius: var(--radius-lg);
}
.u-radius-circle {
  border-radius: var(--radius-circle);
}

/* Shadow Utilities */
.u-shadow-sm {
  box-shadow: var(--shadow-sm);
}
.u-shadow-md {
  box-shadow: var(--shadow-md);
}
.u-shadow-lg {
  box-shadow: var(--shadow-lg);
}

/* Transition Utilities */
.u-transition-fast {
  transition: var(--transition-fast);
}
.u-transition-base {
  transition: var(--transition-base);
}
.u-transition-slow {
  transition: var(--transition-slow);
}

/* ==========================================================================
   RESPONSIVE DESIGN BASE RULES (Best Practices)
   ========================================================================== */

/* 🖼 Flexible Images */
img {
  max-width: 100%;
  height: auto;
}

/* Responsive Media */
video,
iframe,
embed,
object {
  max-width: 100%;
  height: auto;
}

/* 🌊 Fluid Grid System */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Modern Responsive Typography with clamp() */
h1 {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  line-height: 1.2;
  margin-bottom: clamp(1rem, 3vw, 1.5rem);
}

h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.3;
  margin-bottom: clamp(0.8rem, 2.5vw, 1.2rem);
}

h3 {
  font-size: clamp(1.3rem, 2.5vw, 1.75rem);
  line-height: 1.4;
  margin-bottom: clamp(0.6rem, 2vw, 1rem);
}

h4 {
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  line-height: 1.4;
  margin-bottom: clamp(0.5rem, 1.5vw, 0.8rem);
}

p {
  font-size: clamp(0.9rem, 1.5vw, 1rem);
  line-height: 1.6;
  margin-bottom: clamp(0.8rem, 2vw, 1rem);
}

/* Modern container with CSS Grid */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2rem);
}

/* Modern aspect ratio boxes */
.aspect-ratio-16-9 {
  aspect-ratio: 16 / 9;
  width: 100%;
}

.aspect-ratio-1-1 {
  aspect-ratio: 1 / 1;
  width: 100%;
}

/* Modern logical properties */
.text-start {
  text-align: start;
}
.text-end {
  text-align: end;
}
.margin-inline-auto {
  margin-inline: auto;
}
.padding-block {
  padding-block: var(--spacing-md);
}
.padding-inline {
  padding-inline: var(--spacing-md);
}

/* ==========================================================================
   COMMON COMPONENT PATTERNS
   ========================================================================== */

/* Common card pattern */
.card {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transition: var(--transition-base);
}

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

/* Common button pattern */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border: none;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: var(--transition-base);
  cursor: pointer;
}

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

.btn--secondary {
  background: var(--color-secondary);
  color: var(--color-bg);
}

.btn:hover {
  transform: translateY(-2px);
}

/* Common overlay pattern */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-dropdown);
}

/* Common flex-center pattern */
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   STANDARDIZED BREAKPOINT SYSTEM
   ========================================================================== */
/* 
   Mobile:  max-width: 480px
   Tablet:  min-width: 481px and max-width: 768px
   Desktop: min-width: 769px
*/

/* 🧩 Simple 3-Breakpoint Media Queries */
/* スマホ (480px以下) */
@media (max-width: 480px) {
  .container {
    padding: 0 1rem;
  }

  /* Stack elements vertically on mobile */
  .reason-cards,
  .achievements-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
  }

  /* Header: Hide CTA buttons, show only hamburger menu */
  .header-cta-section {
    display: none !important;
  }

  .hamburger-menu {
    display: block;
  }

  /* Adjust header layout for mobile */
  .fixed-header .container {
    padding-top: 15px;
    padding-bottom: 15px;
  }

  .header-logo img {
    width: 120px;
  }

  /* First View Mobile Layout */
  .first-view {
    min-height: 100vh;
    padding: 70px 0 20px 0;
  }

  /* デスクトップ専用要素を非表示、モバイル要素を表示 */
  .desktop-icons,
  .desktop-icons img {
    display: none !important;
    visibility: hidden !important;
  }

  .mobile-layout {
    display: block;
  }

  /* 1. エリア対応文字: ヘッダーギリギリ + 小さく */
  .service-area-text {
    position: relative;
    top: 0;
    left: 0;
    text-align: center;
    margin-bottom: 5px;
    z-index: 25;
  }

  .service-area-text p {
    font-size: 10px;
    margin: 0;
    color: #333;
    font-weight: 500;
  }

  /* Main mobile container - 参考デザイン風レイアウト */
  .hero-content-layout {
    position: relative !important;
    height: calc(100vh - 90px) !important;
    display: block !important;
    padding: 0 10px !important;
  }

  /* 2. キャッチコピー: 無効化 */
  .main-catchcopy {
    /* 無効化: 768px設定を優先 */
  }

  /* 3. お兄さん画像: 横幅50%、画面の半分程度の高さ */
  .staff-group {
    position: absolute !important;
    top: 30px !important;
    right: 0 !important;
    width: 50% !important;
    height: 250px !important;
    z-index: 20 !important;
  }

  .staff-group img:first-child {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 10px !important;
  }

  /* 吹き出し調整 */
  .speech-bubble {
    position: absolute !important;
    top: 20px !important;
    left: -80% !important;
    width: 80px !important;
    height: auto !important;
    z-index: 22 !important;
  }

  /* 6. 価格表示: 5980円小さく、2980円ドーン */
  .pricing-mobile {
    position: absolute !important;
    bottom: 50px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
    text-align: center !important;
    z-index: 25 !important;
  }

  .old-price {
    position: relative !important;
    width: 80px !important;
    height: auto !important;
    display: inline-block !important;
    margin-right: 10px !important;
    z-index: 25 !important;
  }

  .new-price {
    position: relative !important;
    width: 300px !important;
    height: auto !important;
    display: inline-block !important;
    margin-left: 80px !important;
    z-index: 25 !important;
  }

  /* 4. 縦アイコン: スマホで縦並び、もう少し大きく */
  .mobile-icons-vertical {
    position: absolute !important;
    left: 5px !important;
    top: 100px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    z-index: 25 !important;
  }

  .mobile-icons-vertical img {
    width: 35px !important;
    height: 35px !important;
    border-radius: 50% !important;
    border: 2px solid #ffd600 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    background: white !important;
    padding: 2px !important;
  }

  /* 5. 見積り・24時間: お兄さんの下 */
  .mobile-bottom-icons {
    position: absolute !important;
    top: 290px !important;
    right: 0 !important;
    width: 50% !important;
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
    z-index: 25 !important;
  }

  .mobile-bottom-icons img {
    width: 60px !important;
    height: 40px !important;
    object-fit: contain !important;
  }
}

.mobile-bottom-icons img:last-child {
  width: 110px !important;
  height: auto !important;
}

/* Pricing section - 下部中央大きく */
.pricing-mobile {
  position: absolute !important;
  bottom: 40px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 90% !important;
  text-align: center !important;
}

.old-price {
  position: relative !important;
  width: 130px !important;
  margin: 0 auto 5px auto !important;
  opacity: 0.7 !important;
}

.new-price {
  position: relative !important;
  width: 85% !important;
  max-width: 270px !important;
  margin: 0 auto !important;
  margin: 0 auto 5px auto !important;
}

.new-price {
  width: 90% !important;
  max-width: 280px !important;
  margin: 0 auto !important;
}

/* Hide complex desktop positioning on mobile */
@media (max-width: 768px) {
  .speech-bubble {
    display: none !important;
  }
}

/* Show mobile layout, hide desktop icons */
.mobile-layout {
  display: block !important;
}

.desktop-icons {
  display: none !important;
  visibility: hidden !important;
}

/* CTA Overlays for mobile */
.line-cta {
  width: 90%;
  top: 40%;
}

.bottom-cta-row {
  bottom: 2%;
  flex-direction: column;
  gap: 10px;
}
/* End of mobile media query */

/* タブレット追加範囲 (769px - 1199px) */
@media (min-width: 769px) and (max-width: 1199px) {
  .header-contact-desktop-only {
    display: none !important;
  }
}

/* タブレット (481px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {
  .container {
    padding: 0 1.5rem;
  }

  /* 2-column layout for tablets */
  .reason-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }

  .reason-card {
    flex: 0 0 calc(50% - 10px);
  }

  /* Header: Show only 2 CTA buttons on tablet */
  .header-contact-desktop-only {
    display: none !important;
  }

  .header-cta-section {
    display: flex !important;
    gap: 15px;
  }

  .header-cta-btn {
    font-size: 13px;
    padding: 10px 16px;
    min-height: 48px;
    flex: 1;
    max-width: 180px;
  }

  .header-logo img {
    width: 130px;
  }

  /* Mobile layout: 横並びに変更 */
  .mobile-layout {
    display: block;
  }

  /* タブレット以上ではデスクトップアイコンを表示 */
  .desktop-icons {
    display: flex !important;
    flex-wrap: wrap;
    gap: 25px;
  }

  .desktop-icon {
    flex: 1;
    min-width: 150px;
    max-width: 200px;
  }

  .desktop-icon-24h {
    flex: 1.2;
    max-width: 250px;
  }

  .mobile-icons-vertical {
    display: none !important;
  }

  .mobile-icons-vertical img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 3px solid #ffd600;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    background: white;
    padding: 3px;
  }

  /* CTA Overlays for smaller tablets (481px-768px) */
  .line-cta {
    width: 80% !important;
    top: 45% !important;
  }

  .bottom-cta-row {
    width: 90% !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .bottom-cta-row .cta-overlay {
    max-width: 100% !important;
  }
}

/* タブレット大 (769px - 1024px) - PC版より少し小さいCTAボタンサイズ */
@media (min-width: 769px) and (max-width: 1024px) {
  /* CTA Overlays for large tablets - smaller than PC */
  .line-cta {
    width: 60% !important;
    max-width: 600px !important;
    top: 50% !important;
  }

  .bottom-cta-row {
    width: 60% !important;
    flex-direction: row !important;
    gap: 15px !important;
    bottom: 8% !important;
  }

  .bottom-cta-row .cta-overlay {
    flex: 1 !important;
    max-width: 300px !important;
  }
}

/* デスクトップ (769px以上) */
@media (min-width: 769px) {
  .container {
    padding: 0 2rem;
  }

  /* 3-column layout for desktop */
  .reason-cards {
    display: flex;
    justify-content: center;
    gap: 30px;
  }

  .reason-card {
    flex: 0 0 300px;
  }

  /* Mobile layout: デスクトップでも横並び */
  .mobile-layout {
    display: block;
  }

  /* デスクトップではデスクトップアイコンを表示 */
  .desktop-icons {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-wrap: nowrap;
    gap: 35px;
  }

  .desktop-icon {
    flex: 1;
    text-align: center;
  }

  .desktop-icon-24h {
    flex: 1.5;
  }

  /* PCサイズでの価格表示修正 */
  .pricing-display .new-price {
    margin-left: 80px !important;
    width: 300px !important;
  }

  .pricing-display .new-price img {
    transform: scale(1.5) !important;
  }

  .mobile-icons-vertical {
    display: none !important;
  }

  .mobile-icons-vertical img {
    width: 80px;
    height: 80px !important;
    border-radius: 50% !important;
    border: 3px solid #ffd600 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
    background: white !important;
    padding: 5px !important;
  }

  /* PC用の1行画像位置調整 */
  .mobile-center-info {
    display: none !important;
  }

  /* PC用の吹き出し表示設定 */
  .speech-bubble {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* Utility Classes */
.text-center {
  text-align: center;
}

@media (max-width: 768px) {
  .hide-mobile {
    display: none !important;
  }
  .show-mobile {
    display: block !important;
  }
}

/* ==========================================================================
   END RESPONSIVE BASE RULES
   ========================================================================== */

/* ==========================================================================
   FOOTER STYLES
   ========================================================================== */

.site-footer {
  background: #333333;
  color: white;
  padding: 40px 0;
  text-align: center;
}

.footer-logo {
  margin-bottom: 20px;
}

.footer-logo img {
  height: 60px;
  width: auto;
}

.footer-description {
  margin-bottom: 10px;
}

.footer-features {
  margin-bottom: 20px;
}

.footer-copyright {
  font-size: 14px;
  color: #ccc;
}

.footer-company {
  font-size: 13px;
  color: #bbb;
  margin-top: 5px;
}

/* ==========================================================================
   MOBILE FOOTER STYLES
   ========================================================================== */

.mobile-footer-fixed {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--main-yellow);
  z-index: 999;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

.mobile-footer-buttons {
  display: flex;
}

.mobile-footer-btn {
  flex: 1;
  padding: 15px;
  text-align: center;
  color: white;
  text-decoration: none;
  font-weight: 700;
}

.mobile-footer-phone {
  background: #e53e3e;
}

.mobile-footer-email {
  background: var(--accent-blue);
}

.mobile-cta-footer-new {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ffffff;
  border-top: 1px solid #e5e7eb;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1001;
  padding: 10px;
}

.mobile-cta-buttons {
  display: flex;
  gap: 8px;
  justify-content: space-between;
  max-width: 400px;
  margin: 0 auto;
}

.mobile-cta-btn {
  flex: 1;
  text-decoration: none;
}

.mobile-cta-btn img {
  width: 100%;
  height: auto;
}

@media (max-width: 768px) {
  .mobile-footer-fixed {
    display: block;
  }

  body {
    padding-bottom: 60px;
  }
}

/* ==========================================================================
   SIMPLE IMAGE SECTIONS
   ========================================================================== */

.why-cheap-section {
  background: var(--sub-bg);
  padding: 80px 0;
  position: relative;
}

.section-image-center {
  text-align: center;
}

.section-image-padding {
  padding: 40px 0;
}

.section-image-center img {
  width: 100%;
  max-width: 1200px;
  height: auto;
}

/* ==========================================================================
   PROBLEM IDENTIFICATION SECTION
   ========================================================================== */

.problem-identification-section {
  background: linear-gradient(
      rgba(255, 255, 255, 0.8),
      rgba(255, 255, 255, 0.8)
    ),
    url("assets/images/unused/Whisk_8688bd9087.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  padding: 80px 0;
  position: relative;
}

.problem-identification-section .container {
  position: relative;
  z-index: 1;
  text-align: center;
}

.problem-decoration {
  position: absolute;
  border-radius: 50%;
  z-index: 0;
}

.problem-decoration-topleft {
  top: -30px;
  left: -30px;
  width: 150px;
  height: 150px;
  background: rgba(255, 214, 0, 0.2);
}

.problem-decoration-bottomright {
  bottom: -30px;
  right: -30px;
  width: 120px;
  height: 120px;
  background: rgba(0, 87, 231, 0.2);
}

.problem-title {
  margin-bottom: 40px;
}

.problem-title img,
.problem-list img {
  max-width: 100%;
  height: auto;
}

.problem-list {
  margin-bottom: 40px;
}

/* ==========================================================================
   WORK ACHIEVEMENTS SECTION
   ========================================================================== */

.work-achievements-section {
  background: var(--sub-bg);
  padding: 80px 0;
  position: relative;
}

.work-achievements-section .container {
  position: relative;
  z-index: 1;
}

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

.achievements-decoration {
  position: absolute;
  z-index: 0;
}

.achievements-decoration-bottomright {
  bottom: -20px;
  right: -20px;
}

/* Achievement Card Styles - BEM Methodology */
.achievement-card {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  padding: 40px 30px;
  text-align: center;
  box-shadow: var(--shadow-md);
  transition: var(--transition-base);
  position: relative;
  overflow: hidden;
}

.achievement-card--warning {
  border: 3px solid #fff3cd;
}

.achievement-card--success {
  border: 3px solid #d1fae5;
}

.achievement-card__image {
  width: 100%;
  height: 180px;
  margin-bottom: 25px;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

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

.achievement-card__title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: var(--spacing-md);
}

.achievement-card__title--warning {
  color: #92400e;
}

.achievement-card__title--success {
  color: #065f46;
}

.achievement-card__details {
  margin-bottom: 25px;
}

.achievement-card__detail-item {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.achievement-card__detail-item:last-child {
  margin-bottom: 0;
}

.achievement-card__checkmark {
  color: var(--color-primary);
  margin-right: var(--spacing-xs);
  font-size: 16px;
}

.achievement-card__detail-text {
  font-size: 16px;
  color: #666;
}

.achievements-decoration-bottomright {
  width: 140px;
  height: 140px;

  background-size: cover;
  border-radius: 15px;
  opacity: 0.3;
}

.achievements-decoration-leftcircle {
  bottom: 10%;
  left: -30px;
  width: 80px;
  height: 80px;
  background-color: #ffd600;
  border-radius: 50%;
}

.achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
}

.achievement-card {
  background: white;
  border-radius: 20px;
  padding: 40px 30px;
  text-align: center;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
  border: 3px solid #e1f5fe;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.achievement-card-blue {
  border-color: #e1f5fe;
}

.achievement-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.achievement-image {
  width: 100%;
  height: 180px;
  margin-bottom: 25px;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

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

.achievement-title {
  font-size: 24px;
  font-weight: 700;
  color: #1e40af;
  margin-bottom: 20px;
}

.achievement-details {
  margin-bottom: 25px;
}

.achievement-feature {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.achievement-feature:last-child {
  margin-bottom: 0;
}

.feature-check {
  color: var(--main-yellow);
  margin-right: 8px;
  font-size: 16px;
}

.feature-text {
  font-size: 16px;
  color: #666;
}

/* ==========================================================================
   CONTACT SECTION
   ========================================================================== */

.contact-section {
  background: white;
  padding: 80px 0;
}

.contact-form-container {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 15px;
  padding: 40px;
  margin-bottom: 40px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/* PCサイズでフォームを2列レイアウトに */
@media (min-width: 769px) {
  .contact-form-container {
    padding: 50px 60px;
  }
  
  .contact-form-wrapper .wpcf7-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px 40px;
    align-items: start;
  }
  
  .contact-form-wrapper .wpcf7-form .form-group-full {
    grid-column: 1 / -1;
  }
}

/* プライバシーポリシー同意（強化版） */
.privacy-agreement-enhanced {
  margin-top: 30px;
  padding: 0;
}

.privacy-notice {
  background: #f8f9fa;
  border: 2px solid #e9ecef;
  border-radius: 12px;
  padding: 25px;
  margin-bottom: 20px;
}

.privacy-title {
  font-size: 18px;
  font-weight: 700;
  color: #0057E7;
  margin-bottom: 15px;
  border-bottom: 2px solid #FFD600;
  padding-bottom: 8px;
}

.privacy-description {
  font-size: 14px;
  color: #555;
  margin-bottom: 20px;
  line-height: 1.6;
}

.privacy-details {
  background: white;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

.privacy-details h4 {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
  padding-left: 12px;
  border-left: 3px solid #FFD600;
}

.privacy-details ul {
  margin: 0 0 20px 20px;
  padding: 0;
}

.privacy-details li {
  margin-bottom: 8px;
  font-size: 14px;
  color: #555;
  line-height: 1.5;
}

.privacy-details p {
  font-size: 14px;
  color: #555;
  line-height: 1.6;
  margin-bottom: 15px;
}

.privacy-contact {
  background: #f0f4f8;
  border-radius: 6px;
  padding: 15px;
  margin-top: 20px;
}

.privacy-contact p {
  margin-bottom: 5px;
  font-size: 13px;
  color: #333;
}

.privacy-links {
  text-align: center;
}

.privacy-link-detailed {
  display: inline-block;
  background: #0057E7;
  color: white;
  padding: 12px 25px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 87, 231, 0.3);
}

.privacy-link-detailed:hover {
  background: #004ab8;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 87, 231, 0.4);
}

/* Contact Form 7のacceptance フィールド調整 */
.wpcf7-form .privacy-section {
  margin-top: 25px;
  padding: 20px;
  background: #ffffff;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
}

.wpcf7-form .privacy-section .wpcf7-acceptance {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.6;
}

.wpcf7-form .privacy-section input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
  transform: scale(1.2);
}

.wpcf7-form .privacy-section label {
  cursor: pointer;
  color: #555;
  font-weight: 600;
}

.wpcf7-form .privacy-section .wpcf7-list-item {
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.wpcf7-form .privacy-section .wpcf7-list-item label {
  cursor: pointer;
  color: #555;
  font-weight: 600;
  line-height: 1.6;
}

/* Contact Form 7 全体のacceptance調整 */
.wpcf7-form .wpcf7-acceptance {
  margin: 20px 0;
  padding: 15px;
  background: #ffffff;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
}

.wpcf7-form .wpcf7-acceptance .wpcf7-list-item {
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.wpcf7-form .wpcf7-acceptance input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
  transform: scale(1.2);
}

.wpcf7-form .wpcf7-acceptance label {
  cursor: pointer;
  color: #555;
  font-weight: 600;
  line-height: 1.6;
  font-size: 14px;
}

/* Contact Form 7 - カスタム構成対応 */
.wpcf7-form .form-section {
  margin-bottom: 25px;
}

.wpcf7-form .form-section label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #374151;
  font-size: 14px;
}

/* チェックボックス（お困りの事象）*/
.wpcf7-form .form-section .wpcf7-checkbox {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 10px;
}

.wpcf7-form .form-section .wpcf7-checkbox .wpcf7-list-item {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f8fafc;
  padding: 10px 15px;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  transition: all 0.3s ease;
}

.wpcf7-form .form-section .wpcf7-checkbox .wpcf7-list-item:hover {
  background: #f0f4f8;
  border-color: #0057E7;
}

.wpcf7-form .form-section .wpcf7-checkbox input[type="checkbox"] {
  transform: scale(1.2);
  margin: 0;
}

.wpcf7-form .form-section .wpcf7-checkbox label {
  margin: 0;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  color: #555;
}

/* 住所フィールド */
.wpcf7-form .address-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 10px;
}

.wpcf7-form .address-fields .city-field {
  grid-column: 1 / -1;
}

.wpcf7-form .zip-field label,
.wpcf7-form .prefecture-field label,
.wpcf7-form .city-field label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #374151;
  font-size: 14px;
}

/* セレクトボックス */
.wpcf7-form select {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 16px;
  background: white;
  transition: border-color 0.3s ease;
}

.wpcf7-form select:focus {
  outline: none;
  border-color: #0057E7;
  box-shadow: 0 0 0 3px rgba(0, 87, 231, 0.1);
}

/* 送信ボタン */
.wpcf7-form .wpcf7-submit {
  background: #0057E7;
  color: white;
  padding: 15px 40px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: block;
  margin: 30px auto 0;
  min-width: 200px;
}

.wpcf7-form .wpcf7-submit:hover {
  background: #004ab8;
  transform: translateY(-2px);
}

/* PCサイズでのレイアウト調整 */
@media (min-width: 769px) {
  .wpcf7-form .address-fields {
    grid-template-columns: 200px 1fr 1fr;
  }
  
  .wpcf7-form .address-fields .city-field {
    grid-column: 3;
  }
  
  .wpcf7-form .form-section .wpcf7-checkbox {
    justify-content: flex-start;
  }
}

/* モバイルサイズでの調整 */
@media (max-width: 768px) {
  .wpcf7-form .address-fields {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .wpcf7-form .address-fields .city-field {
    grid-column: 1;
  }
  
  .wpcf7-form .form-section .wpcf7-checkbox {
    flex-direction: column;
    align-items: stretch;
  }
  
  .wpcf7-form .form-section .wpcf7-checkbox .wpcf7-list-item {
    justify-content: flex-start;
  }
}

/* reCAPTCHA調整 */
.wpcf7-form .g-recaptcha {
  margin: 20px 0;
  display: flex;
  justify-content: center;
}

/* Contact Form 7 スタイル調整 */
.wpcf7-form p {
  margin-bottom: 20px;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea,
.wpcf7-form select {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 16px;
  background: white;
  transition: border-color 0.3s ease;
}

.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
  outline: none;
  border-color: #0057E7;
  box-shadow: 0 0 0 3px rgba(0, 87, 231, 0.1);
}

.wpcf7-form textarea {
  min-height: 120px;
  resize: vertical;
}

.wpcf7-form .wpcf7-submit {
  background: #0057E7;
  color: white;
  padding: 15px 40px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: block;
  margin: 30px auto 0;
}

.wpcf7-form .wpcf7-submit:hover {
  background: #004ab8;
  transform: translateY(-2px);
}

.wpcf7-form .wpcf7-not-valid {
  border-color: #dc2626 !important;
}

.wpcf7-validation-errors {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
  padding: 15px;
  border-radius: 8px;
  margin: 20px 0;
}

/* プライバシーポリシーモーダル */
.privacy-modal {
  display: none;
  position: fixed;
  z-index: 10000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  overflow-y: auto;
}

.privacy-modal-content {
  background-color: white;
  margin: 50px auto;
  padding: 0;
  border-radius: 12px;
  width: 90%;
  max-width: 800px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  max-height: 90vh;
  overflow-y: auto;
}

.privacy-modal-header {
  background: linear-gradient(135deg, #0057E7 0%, #4fc3f7 100%);
  color: white;
  padding: 20px 30px;
  border-radius: 12px 12px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.privacy-modal-header h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
}

.privacy-modal-close {
  background: none;
  border: none;
  color: white;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.3s ease;
}

.privacy-modal-close:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.privacy-modal-body {
  padding: 30px;
  line-height: 1.6;
  color: #333;
}

.privacy-modal-body h3 {
  color: #0057E7;
  font-size: 18px;
  font-weight: 600;
  margin: 25px 0 15px 0;
  padding-left: 15px;
  border-left: 4px solid #FFD600;
}

.privacy-modal-body p {
  margin-bottom: 15px;
  font-size: 15px;
  color: #555;
}

.privacy-modal-body ul {
  margin-left: 20px;
  margin-bottom: 20px;
}

.privacy-modal-body li {
  margin-bottom: 8px;
  font-size: 14px;
  color: #555;
}

.privacy-modal-body .contact-info {
  background: #f0f4f8;
  padding: 20px;
  border-radius: 8px;
  margin: 20px 0;
}

.privacy-modal-body .contact-info p {
  margin-bottom: 8px;
  font-size: 14px;
  color: #333;
}

.privacy-modal-body .policy-date {
  text-align: right;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #e5e7eb;
  font-size: 13px;
  color: #666;
}

@media (max-width: 768px) {
  .contact-form-wrapper .wpcf7-form {
    display: block;
  }
  
  .privacy-agreement-enhanced {
    margin-top: 20px;
  }
  
  .privacy-notice {
    padding: 20px;
  }
  
  .privacy-modal-content {
    width: 95%;
    margin: 20px auto;
    max-height: 95vh;
  }
  
  .privacy-modal-header {
    padding: 15px 20px;
  }
  
  .privacy-modal-header h2 {
    font-size: 18px;
  }
  
  .privacy-modal-body {
    padding: 20px;
  }
  
  .privacy-modal-body h3 {
    font-size: 16px;
  }
}

.fallback-form {
  display: none;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #374151;
}

.required {
  color: #dc2626;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 16px;
  transition: border-color 0.3s ease;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-textarea {
  resize: vertical;
  min-height: 120px;
}

.form-submit {
  text-align: center;
  margin-top: 30px;
}

.form-submit-btn {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  color: white;
  padding: 15px 40px;
  border: none;
  border-radius: 25px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4);
}

.form-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(220, 38, 38, 0.5);
}

.form-submit-btn:active {
  transform: translateY(0);
}

/* Emergency Contact */
.emergency-contact {
  background: linear-gradient(135deg, #dbeafe, #bfdbfe);
  border: 1px solid #93c5fd;
  border-radius: 15px;
  padding: 30px;
  text-align: center;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.2);
}

.emergency-title {
  color: #1e40af;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 20px;
}

.emergency-phone {
  margin: 15px 0;
}

.emergency-phone-link {
  color: #dc2626;
  text-decoration: none;
  font-size: 28px;
  font-weight: 900;
  transition: all 0.3s ease;
}

.emergency-phone-link:hover {
  color: #b91c1c;
  transform: scale(1.05);
}

.emergency-hours {
  color: #1e40af;
  font-size: 16px;
  margin: 0;
}

/* Contact Section Responsive */
@media (max-width: 768px) {
  .contact-form-container {
    padding: 30px 20px;
  }

  .emergency-title {
    font-size: 20px;
  }

  .emergency-phone-link {
    font-size: 24px;
  }
}

@media (max-width: 480px) {
  .contact-form-container {
    padding: 20px 15px;
  }

  .form-submit-btn {
    padding: 12px 30px;
    font-size: 16px;
  }
}

/* ==========================================================================
   REASONS SECTION
   ========================================================================== */

.reasons-section {
  background: var(--sub-bg);
  padding: 80px 0;
  position: relative;
}

.reasons-section .container {
  position: relative;
  z-index: 1;
}

.reasons-decoration {
  position: absolute;
  z-index: 0;
}

.reasons-decoration-topleft {
  top: -30px;
  left: -30px;
  width: 150px;
  height: 150px;

  background-size: cover;
  border-radius: 15px;
  opacity: 0.4;
}

.reasons-decoration-bottomright {
  bottom: -30px;
  right: -30px;
  width: 120px;
  height: 120px;
  background-color: rgba(255, 214, 0, 0.3);
  border-radius: 15px;
}

.reasons-decoration-rightcircle {
  top: 50%;
  right: -60px;
  width: 100px;
  height: 100px;
  background-color: #ffd600;
  border-radius: 50%;
}

.reason-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
  margin-top: 60px;
}

.reason-card {
  background: white;
  border-radius: 20px;
  padding: 40px 30px;
  text-align: center;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  border: 3px solid #e5e7eb;
}

.reason-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.reason-image {
  width: 150px;
  height: 150px;
  margin: 0 auto 30px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

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

.reason-title {
  font-size: 24px;
  font-weight: 700;
  color: #1e40af;
  margin-bottom: 20px;
}

.reason-description {
  font-size: 16px;
  color: #666;
  line-height: 1.6;
  margin: 0;
}

/* Reasons Section Responsive */
@media (max-width: 768px) {
  .reason-cards {
    grid-template-columns: 1fr;
    gap: 30px;
    justify-items: center;
  }

  .reason-card {
    padding: 30px 20px;
    max-width: 400px;
    width: 100%;
  }

  .reason-image {
    height: 180px;
  }

  .reason-title {
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .reason-cards {
    justify-items: center;
  }

  .reason-card {
    padding: 25px 15px;
    max-width: 350px;
    width: 100%;
  }

  .reason-image {
    height: 160px;
  }

  .reason-title {
    font-size: 18px;
  }

  .reason-description {
    font-size: 14px;
  }
}

/* ==========================================================================
   FIXED HEADER
   ========================================================================== */

.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: transparent;
}

.fixed-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  padding-bottom: 10px;
}

.header-logo {
  flex-shrink: 0;
}

.header-logo img {
  width: 150px;
  height: auto;
}

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

.header-cta-section {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
}

.header-cta-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  text-decoration: none;
  border-radius: 12px;
  white-space: nowrap;
  min-height: 60px;
  text-align: center;
  transition: all 0.3s ease;
}

.header-line-btn {
  background: #00b900;
  color: white;
}

.header-phone-btn {
  background: #e91e63;
  color: white;
}

.header-contact-btn {
  background: #ffb000;
  color: #333;
}

.cta-content {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}

.line-icon {
  width: 20px;
  height: 20px;
}

.cta-main-text {
  font-weight: 700;
  font-size: 16px;
}

.cta-phone-number {
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 2px;
}

.cta-sub-text {
  font-size: 12px;
  opacity: 0.9;
}

.header-contact-btn .cta-sub-text {
  opacity: 0.8;
}

.cta-icon {
  font-size: 18px;
}

/* Hamburger Menu */
.hamburger-menu {
  margin-left: 10px;
  flex-shrink: 0;
}

.hamburger-btn {
  background: linear-gradient(135deg, #ffd600, #ffc107);
  border: none;
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(255, 214, 0, 0.3);
  transition: all 0.3s ease;
}

.hamburger-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 214, 0, 0.4);
}

.hamburger-icon {
  position: relative;
  width: 20px;
  height: 14px;
}

.hamburger-icon span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: #333;
  border-radius: 1px;
  opacity: 1;
  left: 0;
  transform: rotate(0deg);
  transition: 0.25s ease-in-out;
}

.hamburger-icon span:nth-child(1) {
  top: 0;
}

.hamburger-icon span:nth-child(2) {
  top: 6px;
}

.hamburger-icon span:nth-child(3) {
  top: 12px;
}

/* Navigation Menu */
.nav-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 350px;
  height: 100vh;
  background: linear-gradient(135deg, #ffffff, #f8fafc);
  box-shadow: -5px 0 20px rgba(0, 0, 0, 0.1);
  z-index: 9999;
  transition: right 0.3s ease;
  overflow-y: auto;
  padding: 80px 0 20px 0;
}

.nav-menu.active {
  right: 0;
}

.nav-header {
  padding: 0 30px 30px 30px;
  border-bottom: 1px solid #e5e7eb;
  position: relative;
}

.nav-title {
  color: #333;
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.nav-close-btn {
  position: absolute;
  top: -10px;
  right: 0;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #666;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.nav-close-btn:hover {
  background: rgba(0, 0, 0, 0.1);
}

.nav-content {
  padding: 20px 0;
}

.nav-item {
  display: flex;
  align-items: center;
  padding: 15px 30px;
  text-decoration: none;
  color: #333;
  font-weight: 600;
  border-bottom: 1px solid #f1f5f9;
  transition: all 0.3s ease;
}

.nav-item:hover {
  background: rgba(0, 0, 0, 0.05);
}

.nav-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  color: white;
  font-size: 18px;
}

.nav-icon-home {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}

.nav-icon-price {
  background: linear-gradient(135deg, #10b981, #059669);
}

.nav-icon-work {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}

.nav-icon-testimonial {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}

.nav-icon-faq {
  background: linear-gradient(135deg, #ef4444, #dc2626);
}

.nav-icon-contact {
  background: linear-gradient(135deg, #ec4899, #db2777);
}

.nav-footer {
  padding: 20px 30px;
  margin-top: auto;
  border-top: 1px solid #e5e7eb;
}

.nav-quick-contact {
  background: linear-gradient(135deg, #ffd600, #ffc107);
  border-radius: 15px;
  padding: 20px;
  text-align: center;
}

.nav-quick-title {
  margin: 0 0 10px 0;
  font-weight: 700;
  color: #333;
  font-size: 16px;
}

.nav-quick-phone {
  color: #333;
  text-decoration: none;
  font-size: 20px;
  font-weight: 900;
}

.nav-quick-hours {
  margin: 5px 0 0 0;
  font-size: 12px;
  color: #666;
}

.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.menu-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Header Responsive */
@media (max-width: 768px) {
  .header-logo img {
    width: 120px;
  }

  .header-cta-btn {
    padding: 10px 15px;
    min-height: 50px;
  }

  .cta-main-text {
    font-size: 14px;
  }

  .cta-phone-number {
    font-size: 16px;
  }

  .cta-sub-text {
    font-size: 10px;
  }

  .nav-menu {
    width: 300px;
  }
}

@media (max-width: 480px) {
  .header-logo img {
    width: 100px;
  }

  .header-cta-section {
    display: none !important;
  }

  .header-cta-btn {
    padding: 8px 12px;
    min-height: 45px;
  }

  .nav-menu {
    width: 280px;
  }
}

/* ==========================================================================
   SOLUTION PRESENTATION SECTION
   ========================================================================== */

.solution-message-section {
  background: white;
  padding: 40px 0;
  text-align: center;
}

.solution-message-image img {
  max-width: 100%;
  height: auto;
}

.solution-presentation-section {
  position: relative;
  background: #ffd600;
  padding: 60px 0;
}

.solution-bg-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.solution-decoration-stripe {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.1) 10px,
    transparent 10px,
    transparent 20px
  );
}

.solution-decoration-circle {
  position: absolute;
  top: 50%;
  right: -100px;
  width: 200px;
  height: 200px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transform: translateY(-50%);
}

.solution-header-band {
  position: relative;
  z-index: 2;
  margin-bottom: 40px;
}

.solution-header-image {
  text-align: center;
}

.solution-header-image img {
  width: 100%;
  height: auto;
  display: block;
}

.solution-cards-grid {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  padding: 40px 0;
  position: relative;
  z-index: 2;
}

.solution-card {
  flex: 1;
  max-width: 350px;
  text-align: center;
  transition: transform 0.3s ease;
}

.solution-card:hover {
  transform: translateY(-5px);
}

.solution-card img {
  width: 100%;
  height: auto;
  border-radius: 15px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.solution-additional-image {
  text-align: center;
  position: relative;
  z-index: 2;
  margin-top: 40px;
}

.solution-additional-image img {
  width: 100%;
  max-width: 800px;
  height: auto;
}

/* Solution Presentation Responsive */
@media (max-width: 768px) {
  .solution-cards-grid {
    flex-direction: column;
    gap: 30px;
    padding: 30px 0;
  }

  .solution-card {
    max-width: 100%;
  }

  .solution-decoration-circle {
    width: 150px;
    height: 150px;
    right: -50px;
  }
}

@media (max-width: 480px) {
  .solution-presentation-section {
    padding: 40px 0;
  }

  .solution-cards-grid {
    gap: 20px;
    padding: 20px 0;
  }

  .solution-decoration-circle {
    width: 100px;
    height: 100px;
    right: -30px;
  }
}

/* ==========================================================================
   PRICING SERVICE SECTION
   ========================================================================== */

.pricing-service-section {
  background: white;
  padding: 80px 0;
  position: relative;
}

.pricing-decoration {
  position: absolute;
  z-index: 0;
}

.pricing-decoration-topright {
  top: -50px;
  right: -50px;
  width: 200px;
  height: 200px;
  background: linear-gradient(
    135deg,
    rgba(255, 214, 0, 0.1),
    rgba(0, 87, 231, 0.1)
  );
  border-radius: 50%;
}

.pricing-decoration-bottomleft {
  bottom: -30px;
  left: -30px;
  width: 150px;
  height: 150px;
  background: rgba(255, 214, 0, 0.2);
  border-radius: 20px;
  transform: rotate(45deg);
}

.pricing-service-section .container {
  position: relative;
  z-index: 1;
}

.pricing-main-image {
  text-align: center;
  margin-bottom: 40px;
}

.pricing-main-image img {
  width: 100%;
  max-width: 1200px;
  height: auto;
}

.pricing-cards-image {
  text-align: center;
  margin-bottom: 40px;
}

.pricing-cards-image img {
  width: 100%;
  max-width: 1200px;
  height: auto;
}

/* Replacement Showcase Section */
.replacement-showcase-section {
  position: relative;
  padding: 80px 0;
  background: linear-gradient(
    rgba(255, 255, 255, 0.8),
    rgba(255, 255, 255, 0.8)
  );
  overflow: hidden;
  min-height: 600px;
}

.infinite-scroll-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.scroller-row {
  width: 100%;
  height: 33.33%;
  overflow: hidden;
  opacity: 0.4;
}

.scroller-inner {
  display: flex;
  width: 200%;
  height: 100%;
}

.scroller-right {
  animation: scroll-right 50s linear infinite;
}

.scroller-left {
  animation: scroll-left 45s linear infinite;
}

.scroller-row-3 .scroller-right {
  animation: scroll-right 55s linear infinite;
}

.scroller-inner img {
  width: 10%;
  height: 100%;
  object-fit: cover;
  margin-right: 5px;
}

.scroller-inner img:last-child {
  margin-right: 0;
}

.replacement-main-image {
  position: relative;
  z-index: 10;
  text-align: center;
}

.replacement-main-image img {
  width: 100%;
  max-width: 1200px;
  height: auto;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.5));
}

/* Scroll Animations */
@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes scroll-right {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}

/* Pricing Service Responsive */
@media (max-width: 768px) {
  .pricing-service-section {
    padding: 60px 0;
  }

  .replacement-showcase-section {
    padding: 60px 0;
    min-height: 400px;
  }

  .pricing-decoration-topright {
    width: 150px;
    height: 150px;
    top: -30px;
    right: -30px;
  }

  .pricing-decoration-bottomleft {
    width: 100px;
    height: 100px;
    bottom: -20px;
    left: -20px;
  }
}

@media (max-width: 480px) {
  .pricing-service-section {
    padding: 40px 0;
  }

  .replacement-showcase-section {
    padding: 40px 0;
    min-height: 300px;
  }

  .pricing-decoration-topright {
    width: 100px;
    height: 100px;
    top: -20px;
    right: -20px;
  }

  .pricing-decoration-bottomleft {
    width: 80px;
    height: 80px;
    bottom: -15px;
    left: -15px;
  }

  .scroller-inner img {
    width: 15%;
  }
}

/* ==========================================================================
   CUSTOMER TESTIMONIALS SECTION
   ========================================================================== */

.testimonials-section {
  background: white;
  padding: 80px 0;
}

.testimonials-carousel-wrapper {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
}

.testimonials-swiper {
  padding-bottom: 60px;
}

.testimonial-card {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 15px;
  padding: 30px;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.testimonial-quote {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 25px;
  color: #374151;
  font-style: italic;
  flex-grow: 1;
}

.customer-info {
  margin-top: auto;
}

.customer-image {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 0 auto 15px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

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

.customer-name {
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 5px;
}

.customer-location {
  font-size: 14px;
  color: #6b7280;
}

/* Navigation Arrows */
.testimonials-next,
.testimonials-prev {
  color: var(--main-yellow);
}

.testimonials-next:hover,
.testimonials-prev:hover {
  color: #e6c200;
}

/* Pagination */
.testimonials-pagination {
  bottom: -40px;
}

.testimonials-pagination .swiper-pagination-bullet {
  background-color: var(--main-yellow);
  opacity: 0.3;
}

.testimonials-pagination .swiper-pagination-bullet-active {
  opacity: 1;
}

/* Testimonials Responsive */
@media (max-width: 768px) {
  .testimonials-section {
    padding: 60px 0;
  }

  .testimonials-carousel-wrapper {
    max-width: 100%;
  }

  .testimonial-card {
    padding: 25px 20px;
  }

  .testimonial-quote {
    font-size: 14px;
  }

  .customer-image {
    width: 60px;
    height: 60px;
  }

  .customer-name {
    font-size: 14px;
  }

  .customer-location {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .testimonials-section {
    padding: 40px 0;
  }

  .testimonial-card {
    padding: 20px 15px;
  }

  .testimonial-quote {
    font-size: 13px;
    margin-bottom: 20px;
  }

  .customer-image {
    width: 50px;
    height: 50px;
  }
}

/* ==========================================================================
   FIRST VIEW / HERO SECTION
   ========================================================================== */

.first-view {
  position: relative;
  background: var(--base-white);
  padding: 100px 0 80px 0;
  overflow: hidden;
  min-height: 800px;
}

.first-view .container {
  position: relative;
  z-index: 10;
}

.hero-content-layout {
  position: relative;
  height: 700px;
  margin-bottom: 0px;
  z-index: 15;
}

/* Service Area Text */
.service-area-text {
  position: absolute;
  top: 20px;
  left: 0;
  z-index: 25;
}

.service-area-description {
  text-align: left;
  font-size: 18px;
  margin-bottom: 15px;
  color: #333333;
  font-weight: 600;
}

/* Main Catchcopy */
.main-catchcopy {
  position: absolute;
  top: 60px;
  left: 0;
  width: 75%;
  max-width: 800px;
  z-index: 25;
}

.main-catchcopy img {
  width: 100%;
  height: auto;
}

/* Staff Group */
.staff-group {
  position: absolute;
  top: 50px;
  right: -10px;
  width: 45%;
  height: 500px;
  z-index: 20;
}

/* Staff image styles moved to line 4748 */

@keyframes breathe {
  0% {
    transform: translateY(0px) scale(1);
  }
  50% {
    transform: translateY(-15px) scale(1.05);
  }
  100% {
    transform: translateY(0px) scale(1);
  }
}

/* Float Animation for speech bubble - pure vertical movement */
@keyframes bubbleFloat {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0px);
  }
}

/* Float Animation (shared by staff and speech bubble) */

.speech-bubble {
  position: absolute;
  top: -10px;
  left: 5%;
  width: 250px;
  height: auto;
  filter: drop-shadow(0 4px 15px rgba(0, 0, 0, 0.2));
  z-index: 21;
  animation: breathe 4s ease-in-out infinite;
}

/* Pricing Display */
.pricing-display {
  position: absolute;
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 20px;
  top: 380px;
  left: 50px;
}

.pricing-display .new-price {
  margin-left: 60px;
}

.old-price {
  z-index: 25;
}

.old-price img {
  width: auto;
  height: auto;
}

.new-price {
  z-index: 25;
}

.new-price img {
  width: auto;
  height: auto;
  transform: scale(2);
}

/* Desktop Icons */
.desktop-icons {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  margin-top: 0;
  padding: 20px 0;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 25;
  width: 100%;
  visibility: visible !important;
}

.desktop-icon {
  position: relative;
  z-index: 25;
  flex: 1;
  text-align: center;
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.desktop-icon img {
  width: 180px;
  height: 180px;
  object-fit: cover;
}

.desktop-icon-24h {
  max-width: 320px;
  flex: 1.5;
}

.desktop-icon-24h img {
  max-height: 200px;
  width: 100%;
  object-fit: contain;
}

.desktop-icon-estimate {
  max-width: 200px;
  flex: 1;
}

.desktop-icon-estimate img {
  max-height: 200px;
  width: 100%;
  object-fit: contain;
}

.desktop-icon-water {
  max-width: 200px;
  flex: 1;
}

.desktop-icon-water img {
  max-height: 200px;
  width: 100%;
  object-fit: contain;
}

.desktop-icon-outdoor {
  max-width: 200px;
  flex: 1;
}

.desktop-icon-outdoor img {
  max-height: 200px;
  width: 100%;
  object-fit: contain;
}

.desktop-icon-replacement {
  max-width: 200px;
  flex: 1;
  margin-top: 40px;
}

.desktop-icon-replacement img {
  max-height: 200px;
  width: 100%;
  object-fit: contain;
}

.desktop-icon-repair {
  max-width: 200px;
  flex: 1;
  margin-top: 40px;
}

.desktop-icon-repair img {
  max-height: 200px;
  width: 100%;
  object-fit: contain;
}

/* Mobile Layout */
.mobile-layout {
  display: none;
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
}

.mobile-icons-vertical {
  position: absolute;
  left: 0;
  bottom: 50px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  z-index: 25;
}

.mobile-icons-vertical img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* 24時間・見積もりアイコン（60px下に、もう少し左に） */
.mobile-staff-side-icons {
  position: absolute;
  left: 65% !important;
  top: calc(75% + 140px) !important;
  transform: translate(-50%, -50%) !important;
  z-index: 30;
  display: flex;
  flex-direction: row;
  gap: 15px;
  align-items: center;
  background: none !important;
  background-color: transparent !important;
}

.mobile-staff-side-icons img[src*="24hour-icon.png"] {
  width: 120px !important;
  height: 70px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: none !important;
  object-fit: cover !important;
}

.mobile-staff-side-icons img[src*="consultation-free-icon.png"] {
  width: 80px !important;
  height: 80px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: none !important;
  object-fit: cover !important;
}

/* 縦画像コンポーネント（間隔縮めて、小さく） */
.mobile-vertical-icons {
  position: absolute;
  left: 20%;
  top: 60%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 25;
  align-items: center;
}

.mobile-vertical-icon {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* PCサイズでは縦画像コンポーネントを非表示、タブレット・PCサイズでは24時間コンポーネントを非表示 */
@media (min-width: 769px) {
  .mobile-vertical-icons {
    display: none;
  }
}

@media (min-width: 768px) {
  .mobile-staff-side-icons {
    display: none;
  }

  .mobile-pricing-row {
    display: none !important;
  }
}

.mobile-vertical-icon img {
  width: 110px !important;
  height: 110px !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 50%;
  max-width: none !important;
}

.mobile-info-badge {
  border-radius: 15px;
  padding: 8px 12px;
  display: inline-block;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin-bottom: 8px;
}

.mobile-info-speed {
  background: white;
}

.mobile-info-speed p {
  font-size: 12px;
  margin: 0;
  color: #0057e7;
  font-weight: 700;
}

.mobile-info-free {
  background: #0057e7;
  color: white;
}

.mobile-info-free p {
  font-size: 11px;
  margin: 0;
  font-weight: 600;
}

.mobile-info-free .highlight {
  font-size: 14px;
  font-weight: 900;
}

/* First View Responsive */
@media (max-width: 1200px) {
  .desktop-icon-replacement,
  .desktop-icon-repair {
    display: block !important;
  }

  .main-catchcopy {
    width: 70%;
  }

  .staff-group {
    width: 42%;
  }

  .pricing-display {
    top: 360px;
  }

  .pricing-display .new-price {
    margin-left: 60px !important;
    width: 280px !important;
  }

  .pricing-display .new-price img {
    transform: scale(1.6) !important;
  }

  /* 1200px以下でのデスクトップアイコン調整 */
  .desktop-icons {
    gap: 20px;
  }

  .desktop-icon {
    max-width: 150px;
  }

  .desktop-icon-24h {
    max-width: 200px;
  }
}

/* 1024px以下でのさらなる調整 */
@media (max-width: 1024px) and (min-width: 769px) {
  .desktop-icons {
    gap: 15px;
  }

  .desktop-icon {
    max-width: 120px;
  }

  .desktop-icon-24h {
    max-width: 180px;
  }

  .desktop-icon img {
    max-height: 150px;
  }

  .desktop-icon-24h img {
    max-height: 150px;
  }

  .pricing-display .new-price {
    margin-left: 40px !important;
    width: 250px !important;
  }

  .pricing-display .new-price img {
    transform: scale(1.5) !important;
  }

  /* Header CTA buttons progressive size reduction for 1024px */
  .header-cta-btn {
    font-size: 12px !important;
    padding: 10px 14px !important;
    min-height: 48px !important;
    min-width: 160px !important;
    max-width: 180px !important;
    gap: 8px !important;
  }
}

/* Header CTA buttons progressive size reduction for 900px */
@media (max-width: 900px) {
  .header-cta-btn {
    font-size: 11px !important;
    padding: 8px 12px !important;
    min-height: 42px !important;
    min-width: 140px !important;
    max-width: 160px !important;
    gap: 6px !important;
  }
}

/* Header CTA buttons progressive size reduction for 850px */
@media (max-width: 850px) {
  .header-cta-btn {
    font-size: 10px !important;
    padding: 6px 10px !important;
    min-height: 38px !important;
    min-width: 120px !important;
    max-width: 140px !important;
    gap: 4px !important;
  }
}

@media (max-width: 768px) {
  .first-view {
    padding: 20px 0 10px 0;
    min-height: 150vh !important;
    height: 150vh !important;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .hero-content-layout {
    height: 100%;
    width: 100%;
    max-width: 100vw;
    margin-bottom: 0;
    position: relative;
  }

  .main-catchcopy {
    width: 120% !important;
    max-width: 120% !important;
    top: -280px !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(1.2) !important;
    position: absolute !important;
    z-index: 30 !important;
  }

  .staff-group {
    width: 60%;
    height: 500px;
    top: 50%;
    left: 70%;
    transform: translate(-50%, -50%);
    position: absolute;
  }

  .speech-bubble {
    width: 200px;
    top: 30%;
    left: 70%;
    transform: translate(-50%, -50%);
    position: absolute;
  }

  .pricing-display {
    top: calc(80% + 200px) !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    position: absolute !important;
  }

  .old-price {
    top: calc(50% + 100px) !important;
    left: 70% !important;
    transform: translate(-50%, -50%) !important;
    position: absolute !important;
    z-index: 25 !important;
    width: 120px !important;
    height: auto !important;
  }

  .new-price {
    top: calc(80% + 200px) !important;
    left: 35% !important;
    transform: translate(-50%, -50%) !important;
    position: absolute !important;
  }

  /* モバイル料金コンポーネント（768px未満専用） */
  .mobile-pricing-row {
    position: absolute !important;
    top: calc(80% + 380px) !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    z-index: 25 !important;
    width: 100% !important;
  }

  .mobile-old-price {
    flex-shrink: 0;
  }

  .mobile-pricing-row .mobile-old-price img {
    width: 70px !important;
    height: auto !important;
    opacity: 0.8 !important;
    max-width: 70px !important;
    max-height: none !important;
  }

  .mobile-new-price {
    flex-shrink: 0;
  }

  .mobile-pricing-row .mobile-new-price img {
    width: 300px !important;
    height: auto !important;
    max-width: 300px !important;
    max-height: none !important;
  }

  /* 元の料金コンポーネントを768px未満で非表示 */
  .pricing-display {
    display: none !important;
  }

  .desktop-icons {
    display: none !important;
    visibility: hidden !important;
  }

  .mobile-layout {
    display: block;
  }

  .service-area-description {
    font-size: 14px;
  }

  .service-area-text {
    top: calc(10% - 380px) !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    position: absolute !important;
    width: 100% !important;
    text-align: center !important;
    z-index: 35 !important;
  }

  .service-area-description {
    text-align: center !important;
    margin: 0 !important;
    width: 100% !important;
    display: block !important;
  }
}

@media (max-width: 480px) {
  .first-view {
    padding: 70px 0 50px 0;
    min-height: 500px;
  }

  .hero-content-layout {
    height: 450px;
    margin-bottom: 50px;
  }

  .main-catchcopy {
    /* 無効化: 768px設定を優先 */
  }

  .staff-group {
    width: 45%;
    height: 350px;
  }

  .speech-bubble {
    width: 180px;
    top: 30px;
  }

  .pricing-display {
    top: 220px;
  }

  .old-price {
    top: 220px;
  }

  .old-price img {
    height: 100px;
  }

  .new-price {
    top: 220px;
    left: 180px;
  }

  .new-price img {
    height: 110px;
  }

  .mobile-icons-vertical {
    bottom: 30px;
    gap: 15px;
  }

  .mobile-icons-vertical img {
    width: 60px;
    height: 60px;
  }

  .mobile-center-info {
    bottom: 80px;
    right: 10px;
  }

  .mobile-info-badge {
    padding: 6px 10px;
  }

  .mobile-info-speed p {
    font-size: 10px;
  }

  .mobile-info-free p {
    font-size: 9px;
  }

  .mobile-info-free .highlight {
    font-size: 12px;
  }

  .service-area-description {
    font-size: 12px;
  }
}

/* ==========================================================================
   FAQ SECTION
   ========================================================================== */

.faq-section {
  position: relative;
  background: var(--base-white);
  padding: 80px 0;
  overflow: hidden;
  min-height: 700px;
  z-index: 0;
}

.faq-section .floating-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
}

.faq-section .heavy-stripe-bg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 300px;
  background: linear-gradient(
    45deg,
    var(--main-yellow) 0%,
    var(--main-yellow) 25%,
    transparent 25%,
    transparent 50%,
    var(--main-yellow) 50%,
    var(--main-yellow) 75%,
    transparent 75%,
    transparent 100%
  );
  background-size: 60px 60px;
  opacity: 0.2;
  animation: floatSlow 15s ease-in-out infinite;
}

.faq-section .stripe-circle-top {
  position: absolute;
  top: -100px;
  left: -120px;
  width: 500px;
  height: 500px;
  background: radial-gradient(
    circle,
    var(--main-yellow) 0%,
    var(--main-yellow) 30%,
    transparent 30%,
    transparent 40%,
    var(--main-yellow) 40%,
    var(--main-yellow) 60%,
    transparent 60%
  );
  border-radius: 50%;
  opacity: 0.3;
  animation: floatSlow 12s ease-in-out infinite reverse;
}

.faq-section .yellow-circle-top {
  position: absolute;
  top: -50px;
  left: 50px;
  width: 150px;
  height: 150px;
  background-color: var(--main-yellow);
  border-radius: 50%;
  opacity: 0.7;
  animation: floatMedium 10s ease-in-out infinite;
}

.faq-section .floating-circle-small.right-mid {
  position: absolute;
  top: 40%;
  right: -40px;
  width: 80px;
  height: 80px;
  background-color: var(--main-yellow);
  border-radius: 50%;
  opacity: 0.4;
  animation: floatSlow 8s ease-in-out infinite;
}

.faq-section .floating-circle-small.left-bottom {
  position: absolute;
  bottom: 20%;
  left: -40px;
  width: 80px;
  height: 80px;
  background-color: var(--main-yellow);
  border-radius: 50%;
  opacity: 0.4;
  animation: floatMedium 9s ease-in-out infinite;
}

.faq-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 120px;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.1);
  z-index: 2;
  pointer-events: none;
}

.faq-section .container {
  position: relative;
  z-index: 10;
}

.faq-section .section-title {
  margin-bottom: 40px;
}

.faq-card-wrapper {
  background: white;
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  border: 1px solid #e5e7eb;
  max-width: 900px;
  margin: 0 auto;
}

.faq-container {
  width: 100%;
}

.faq-item {
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 0;
}

.faq-item:last-child {
  border-bottom: none;
}

.faq-question {
  width: 100%;
  padding: 20px 0;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  text-align: left;
  transition: all 0.3s ease;
}

.faq-question:hover {
  background: rgba(0, 0, 0, 0.02);
}

.q-icon {
  width: 40px;
  height: 40px;
  background: var(--main-yellow);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #333;
  margin-right: 20px;
  flex-shrink: 0;
}

.question-text {
  flex-grow: 1;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.faq-toggle {
  margin-left: 20px;
  flex-shrink: 0;
}

.faq-icon {
  font-size: 24px;
  color: var(--main-yellow);
  transition: transform 0.3s ease;
}

.faq-item.is-active .faq-icon {
  transform: rotate(45deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.faq-item.is-active .faq-answer {
  max-height: 300px;
}

.answer-content {
  display: flex;
  align-items: flex-start;
  padding: 0 0 20px 0;
}

.a-icon {
  width: 40px;
  height: 40px;
  background: #0057e7;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: white;
  margin-right: 20px;
  flex-shrink: 0;
}

.answer-text {
  flex-grow: 1;
  font-size: 14px;
  line-height: 1.6;
  color: #666;
}

.answer-text p {
  margin: 0;
}

/* FAQ Responsive */
@media (max-width: 768px) {
  .faq-section {
    padding: 60px 0;
    min-height: 600px;
  }

  .faq-card-wrapper {
    padding: 30px 20px;
  }

  .faq-watermark {
    font-size: 80px;
  }

  .q-icon,
  .a-icon {
    width: 30px;
    height: 30px;
    margin-right: 15px;
  }

  .question-text {
    font-size: 14px;
  }

  .answer-text {
    font-size: 13px;
  }

  .faq-section .yellow-circle-top {
    width: 100px;
    height: 100px;
  }

  .faq-section .floating-circle-small {
    width: 60px;
    height: 60px;
  }
}

@media (max-width: 480px) {
  .faq-section {
    padding: 40px 0;
    min-height: 500px;
  }

  .faq-card-wrapper {
    padding: 20px 15px;
  }

  .faq-watermark {
    font-size: 60px;
  }

  .faq-question {
    padding: 15px 0;
  }

  .q-icon,
  .a-icon {
    width: 25px;
    height: 25px;
    margin-right: 10px;
    font-size: 14px;
  }

  .question-text {
    font-size: 13px;
  }

  .answer-text {
    font-size: 12px;
  }

  .faq-icon {
    font-size: 20px;
  }
}

/* FAQ Animations */
@keyframes floatSlow {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}

@keyframes floatMedium {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-15px);
  }
}

/* CTA Button Styles */
.header-cta-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.2s ease;
  min-width: 200px;
  max-width: 250px;
  position: relative;
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.header-cta-btn:hover {
  border-color: #d1d5db;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.header-cta-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.phone-btn {
  color: #e91e63;
}

.line-btn {
  color: #00b900;
}

.contact-btn {
  color: #ff9800;
}

/* CTA Text Styling */
.cta-main {
  font-size: 20px;
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 2px;
}

.cta-sub {
  font-size: 14px;
  font-weight: 500;
  opacity: 0.9;
  line-height: 1.3;
}

.cta-icon {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cta-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-grow: 1;
}

.cta-sub {
  font-size: 10px;
  font-weight: 400;
  opacity: 0.95;
  line-height: 1.2;
  color: white;
}

body {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  line-height: 1.6;
  color: #333333;
  background-color: #ffffff;
  overflow-x: hidden;
  max-width: 100vw;
}

/* Header Styles */
.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: white;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 15px 0;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.cta-section {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* Problem Section Background */
.problem-identification-section {
  position: relative;
  overflow: hidden;
}

.problem-bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("assets/images/unused/Whisk_8688bd9087.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.1;
  z-index: 1;
}

.problem-content {
  position: relative;
  z-index: 10;
}

/* Solution Cards Section */
.solution-cards-section {
  padding: 60px 0;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.solution-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.solution-card {
  background: white;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}

.solution-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.solution-card-header {
  background: #333333;
  color: white;
  padding: 15px 20px;
  text-align: center;
}

.solution-card-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}

.solution-card-image {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.solution-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.solution-card-badge {
  position: absolute;
  top: 15px;
  left: 15px;
  background: #ffd600;
  color: #333;
  padding: 8px 15px;
  border-radius: 20px;
  font-weight: bold;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.solution-card-content {
  padding: 20px;
}

.solution-card-content p {
  margin: 0;
  line-height: 1.6;
  color: #555;
  font-size: 14px;
}

html {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Base container - Mobile first */
.container {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 20px;
}

/* Tablet responsive layout (768px-1023px) */
@media (min-width: 769px) {
  .container {
    max-width: 100%;
    padding: 0 30px;
  }

  .header-content {
    max-width: 100%;
    padding: 0 30px;
  }

  /* Hero section responsive */
  .hero-content-layout {
    height: auto;
    min-height: 600px;
  }

  .catchcopy-section {
    width: 65%;
  }

  .catchcopy-section img {
    max-width: 100%;
    height: auto;
  }

  .staff-section {
    width: 45%;
    right: -30px;
  }

  .staff-section img {
    max-width: 100%;
    height: auto;
  }

  .pricing-section {
    width: 65%;
  }

  .pricing-content img {
    height: auto;
    max-height: 100px;
    width: auto;
  }

  /* Speech bubble responsive */
  .price-guarantee-bubble {
    top: 20px;
    left: -20px;
  }

  .price-guarantee-bubble img {
    width: 180px;
    height: auto;
  }
}

/* Desktop layout fixed from 1024px and above - only background expands */
@media (min-width: 769px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }

  .header-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }

  /* Hero section layout fixed */
  .hero-content-layout {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    height: 700px;
    overflow: visible;
  }
}

/* Tablet layout adjustments */
@media (min-width: 769px) {
  .hero-content-layout img:nth-child(7),
  .hero-content-layout img:nth-child(8),
  .hero-content-layout img:nth-child(9),
  .hero-content-layout img:nth-child(10),
  .hero-content-layout img:nth-child(11),
  .hero-content-layout img:nth-child(12) {
    width: 80px !important;
    height: 80px !important;
  }

  .hero-content-layout img:nth-child(7) {
    left: 0 !important;
  }
  .hero-content-layout img:nth-child(8) {
    left: 100px !important;
  }
  .hero-content-layout img:nth-child(9) {
    left: 200px !important;
  }
  .hero-content-layout img:nth-child(10) {
    left: 300px !important;
  }
  .hero-content-layout img:nth-child(11) {
    left: 400px !important;
  }
  .hero-content-layout img:nth-child(12) {
    left: 500px !important;
  }
}

/* Mobile First Base Styles (up to 767px) */
@media (max-width: 768px) {
  .container {
    padding: 0 15px;
  }

  .header-content {
    flex-direction: column;
    gap: 15px;
    padding: 10px 15px;
  }

  .cta-section {
    display: flex;
    flex-direction: row;
    gap: 8px;
    width: 100%;
    justify-content: space-between;
  }

  .header-cta-btn {
    flex: 1;
    min-width: auto;
    padding: 12px 8px;
    font-size: 14px;
  }

  .cta-main {
    font-size: 14px !important;
  }

  .cta-sub {
    font-size: 11px !important;
  }

  .cta-icon {
    width: 40px !important;
    height: 40px !important;
  }

  /* Hero section mobile layout - Image only + Service Area Text */
  .hero-content-layout {
    height: auto !important;
    display: block !important;
    flex-direction: column;
    gap: 20px;
    padding: 20px 0;
    position: relative !important;
  }

  .service-area-text {
    /* 無効化: 768px設定を優先 */
  }

  .hero-content-layout img {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 350px !important;
    height: auto !important;
    margin: 15px auto !important;
    display: block !important;
  }

  /* Stack images vertically on mobile */
  .hero-content-layout img:nth-child(2) {
    order: 2;
    max-width: 400px !important;
  } /* Catchcopy */
  .hero-content-layout img:nth-child(3) {
    order: 3;
    max-width: 350px !important;
  } /* Staff */
  .hero-content-layout img:nth-child(4) {
    order: 4;
    max-width: 300px !important;
  } /* Speech bubble */
  .hero-content-layout img:nth-child(5) {
    order: 5;
    max-width: 250px !important;
  } /* Old price */
  .hero-content-layout img:nth-child(6) {
    order: 6;
    max-width: 250px !important;
  } /* New price */

  /* アイコンを2行にして調整 */
  .hero-content-layout img:nth-child(7) {
    order: 7;
    max-width: 100px !important;
    float: left;
    margin: 5px !important;
  } /* 24時間対応 */
  .hero-content-layout img:nth-child(8) {
    order: 8;
    max-width: 100px !important;
    float: left;
    margin: 5px !important;
  } /* Guarantee */
  .hero-content-layout img:nth-child(9) {
    order: 9;
    max-width: 100px !important;
    float: left;
    margin: 5px !important;
  } /* Icon 1 */
  .hero-content-layout img:nth-child(10) {
    order: 10;
    max-width: 100px !important;
    float: left;
    margin: 5px !important;
  } /* Icon 2 */
  .hero-content-layout img:nth-child(11) {
    order: 11;
    max-width: 100px !important;
    float: left;
    margin: 5px !important;
  } /* Icon 3 */
  .hero-content-layout img:nth-child(12) {
    order: 12;
    max-width: 100px !important;
    float: left;
    margin: 5px !important;
  } /* Icon 4 */
}

/* Color Variables */
:root {
  --main-yellow: #ffd600;
  --accent-blue: #0057e7;
  --base-white: #ffffff;
  --sub-bg: #f0f4f8;
  --text-base: #333333;
}

/* Fixed Header */
.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  z-index: 1000;
  padding: 10px 0;
  box-shadow: none;
  transition: all 0.3s ease;
  min-height: 70px;
  display: flex;
  align-items: center;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  width: 100%;
}

.logo img {
  height: 40px;
}

.phone-link {
  color: var(--accent-blue);
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  transition: all 0.3s ease;
}

.phone-link:hover {
  transform: scale(1.05);
}

/* CTA Button Section */
.cta-section {
  display: flex;
  gap: 12px;
  align-items: center;
}

.header-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 8px;
  border: 2px solid;
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
  transition: all 0.3s ease;
  white-space: nowrap;
  position: relative;
  cursor: pointer;
}

/* Hover Effects */
.header-cta-btn:hover {
  opacity: 0.8;
  transform: translateY(-1px);
}

/* Active (Click) Effects - 押し込み表現 */
.header-cta-btn:active {
  transform: scale(0.98) translateY(1px);
  transition: all 0.1s ease;
}

/* Individual Button Styles */
.line-btn {
  background: #00b900;
  color: #ffffff;
  border-color: #00a000;
}

.phone-btn {
  background: linear-gradient(135deg, #e91e63, #f06292);
  color: #ffffff;
  border-color: #c2185b;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 900;
  min-width: 200px;
  flex-direction: column;
  gap: 2px;
  position: relative;
}

.phone-btn .phone-number {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 1px;
}

.phone-btn .phone-hours {
  font-size: 10px;
  font-weight: 500;
  opacity: 0.9;
}

/* 画像ベースのCTAボタン */
.cta-btn-image {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

.cta-btn-img {
  height: 55px;
  width: 220px;
  border-radius: 8px;
  transition: all 0.3s ease;
  display: block;
  object-fit: cover;
}

.cta-btn-img.mobile {
  height: 45px;
  width: 130px;
}

.cta-btn-image:hover .cta-btn-img {
  transform: scale(0.98) translateY(2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.cta-btn-image:active .cta-btn-img {
  transform: scale(0.96) translateY(3px);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  transition: all 0.1s ease;
}

.contact-btn {
  background: #ffb000;
  color: #333333;
  border-color: #e09f00;
}

/* First View Section - New Layer Structure */
.first-view {
  position: relative;
  background: var(--base-white); /* Layer 1: Base Background */
  padding: 80px 0 60px 0;
  overflow: hidden;
  min-height: 700px;
  z-index: 0;
}

/* Feature Icon Items Styling */
.feature-icon-item {
  transition: all 0.3s ease;
}

.feature-icon-item:hover {
  transform: translateY(-5px);
}

.feature-icon-item img {
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(255, 214, 0, 0.2);
  border-radius: 50%;
}

.feature-icon-item:hover img {
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(255, 214, 0, 0.4);
}

.feature-icon-item p {
  font-weight: 600;
  color: #333;
  margin-top: 8px;
}

/* Floating Staff Animation */
.floating-staff {
  animation: gentleFloat 4s ease-in-out infinite;
}

@keyframes gentleFloat {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-8px);
  }
}

.floating-staff img {
  animation: softFloat 3s ease-in-out infinite;
}

@keyframes softFloat {
  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-5px) rotate(0.5deg);
  }
}

/* Remove background styles */
.pricing-section {
  background: none !important;
}

.pricing-content {
  background: none !important;
}

.main-catchcopy-section {
  background: none !important;
}

/* Layer 2: Decorative Layer - Floating Background Elements */
.floating-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
}

/* Heavy Stripe Background (Bottom Right) */
.heavy-stripe-bg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 300px;
  background: linear-gradient(
    45deg,
    var(--main-yellow) 0%,
    var(--main-yellow) 25%,
    transparent 25%,
    transparent 50%,
    var(--main-yellow) 50%,
    var(--main-yellow) 75%,
    transparent 75%,
    transparent 100%
  );
  background-size: 60px 60px;
  opacity: 0.2;
  animation: floatSlow 15s ease-in-out infinite;
}

/* Left Top Stripe Circle */
.stripe-circle-top {
  position: absolute;
  top: -100px;
  left: -120px;
  width: 500px;
  height: 500px;
  background: radial-gradient(
    circle,
    var(--main-yellow) 0%,
    var(--main-yellow) 30%,
    transparent 30%,
    transparent 40%,
    var(--main-yellow) 40%,
    var(--main-yellow) 60%,
    transparent 60%
  );
  border-radius: 50%;
  opacity: 0.3;
  animation: floatSlow 12s ease-in-out infinite reverse;
}

/* Left Top Yellow Circle (CSS) */
.yellow-circle-top {
  position: absolute;
  top: -50px;
  left: 50px;
  width: 150px;
  height: 150px;
  background-color: var(--main-yellow);
  border-radius: 50%;
  opacity: 0.7;
  animation: floatMedium 10s ease-in-out infinite;
}

/* Additional Floating Elements */
.floating-circle-small {
  position: absolute;
  width: 80px;
  height: 80px;
  background-color: var(--main-yellow);
  border-radius: 50%;
  opacity: 0.4;
}

.floating-circle-small.right-mid {
  top: 40%;
  right: 200px;
  animation: floatSlow 18s ease-in-out infinite;
}

.floating-circle-small.left-bottom {
  bottom: 200px;
  left: 100px;
  animation: floatMedium 14s ease-in-out infinite reverse;
}

.floating-circle {
  position: absolute;
  border-radius: 50%;
}

.circle-yellow-1 {
  width: 120px;
  height: 120px;
  background-color: var(--main-yellow);
  top: 10%;
  right: 5%;
  animation: float 6s ease-in-out infinite;
}

.circle-yellow-2 {
  width: 80px;
  height: 80px;
  background-color: var(--main-yellow);
  bottom: 30%;
  left: 3%;
  animation: float 8s ease-in-out infinite reverse;
}

.circle-yellow-3 {
  width: 60px;
  height: 60px;
  background-color: var(--main-yellow);
  top: 60%;
  right: 15%;
  animation: float 7s ease-in-out infinite;
  animation-delay: 2s;
}

/* Floating Animations */
@keyframes floatSlow {
  0%,
  100% {
    transform: translate(0px, 0px) rotate(0deg);
  }
  25% {
    transform: translate(-10px, -15px) rotate(2deg);
  }
  50% {
    transform: translate(5px, -25px) rotate(0deg);
  }
  75% {
    transform: translate(8px, -10px) rotate(-1deg);
  }
}

@keyframes floatMedium {
  0%,
  100% {
    transform: translate(0px, 0px) rotate(0deg);
  }
  33% {
    transform: translate(15px, -20px) rotate(3deg);
  }
  66% {
    transform: translate(-12px, -30px) rotate(-2deg);
  }
}

@keyframes floatFast {
  0%,
  100% {
    transform: translate(0px, 0px) rotate(0deg);
  }
  50% {
    transform: translate(0px, -20px) rotate(5deg);
  }
}

/* Legacy float animation for backward compatibility */
@keyframes float {
  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }
  25% {
    transform: translateY(-15px) rotate(5deg);
  }
  50% {
    transform: translateY(-25px) rotate(0deg);
  }
  75% {
    transform: translateY(-10px) rotate(-5deg);
  }
}

/* Layer 3: Content Layer - Main Content */
.hero-content {
  display: block;
  position: relative;
  z-index: 2;
  text-align: center;
}

/* Service Area Text */
.service-area-text {
  margin-bottom: 30px;
}

/* Main Hero Image Section */
.main-hero-image {
  text-align: center;
  margin-bottom: 20px;
}

.main-hero-image img {
  transition: all 0.3s ease;
  max-height: 400px;
  object-fit: cover;
}

.main-hero-image img:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(135, 206, 235, 0.4);
}

/* Pricing Section Image */
.pricing-section-image {
  text-align: center;
  margin-bottom: 20px;
}

.pricing-section-image img {
  transition: all 0.3s ease;
  max-height: 150px;
  object-fit: cover;
}

.pricing-section-image img:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(255, 214, 0, 0.4);
}

/* Main Catchcopy Image Section */
.main-catchcopy-section {
  background: linear-gradient(135deg, #87ceeb 0%, #4fc3f7 100%);
  border-radius: 20px;
  padding: 40px;
  margin-bottom: 30px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(135, 206, 235, 0.3);
}

.main-catchcopy-section::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -20%;
  width: 300px;
  height: 300px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  z-index: 0;
}

.catchcopy-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 30px;
}

.catchcopy-text {
  flex: 1;
}

.catchcopy-text h1 {
  font-size: 48px;
  font-weight: 900;
  color: white;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  margin-bottom: 20px;
  line-height: 1.2;
}

.quick-response-badge {
  background: var(--main-yellow);
  color: #333333;
  padding: 10px 20px;
  border-radius: 25px;
  font-weight: 700;
  font-size: 18px;
  box-shadow: 0 4px 15px rgba(255, 214, 0, 0.4);
}

.hero-staff-image {
  flex-shrink: 0;
}

.hero-staff-image img {
  width: 200px;
  height: 250px;
  object-fit: cover;
  border-radius: 15px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Service Icons Row */
.service-icons-row {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 30px 0;
  flex-wrap: wrap;
}

.service-icon-circle {
  width: 120px;
  height: 120px;
  background: var(--accent-blue);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 87, 231, 0.3);
}

.service-icon-circle:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 25px rgba(0, 87, 231, 0.4);
}

.service-icon-circle .icon {
  font-size: 24px;
  margin-bottom: 5px;
}

.service-icon-circle .text {
  font-size: 12px;
  line-height: 1.2;
}

/* Pricing Section */
.pricing-section {
  background: var(--main-yellow);
  border-radius: 15px;
  padding: 30px;
  text-align: center;
  margin: 30px 0;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(255, 214, 0, 0.3);
}

.pricing-section::before {
  content: "";
  position: absolute;
  top: -30px;
  left: -30px;
  width: 100px;
  height: 100px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  z-index: 0;
}

.pricing-content {
  position: relative;
  z-index: 1;
}

.pricing-row {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.pricing-item {
  text-align: center;
}

.pricing-item .label {
  font-size: 14px;
  font-weight: 600;
  color: #333333;
  margin-bottom: 5px;
}

.pricing-item .price {
  font-size: 24px;
  font-weight: 900;
  color: #dc2626;
}

.pricing-item .old-price {
  font-size: 18px;
  text-decoration: line-through;
  color: #666666;
  margin-bottom: 5px;
}

/* CTA Buttons Enhanced */
.cta-buttons-enhanced {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-top: 30px;
  flex-wrap: wrap;
}

.cta-btn-enhanced {
  padding: 15px 30px;
  border-radius: 25px;
  text-decoration: none;
  font-weight: 700;
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  min-width: 200px;
}

.cta-btn-enhanced.phone {
  background: var(--accent-blue);
  color: white;
}

.cta-btn-enhanced.form {
  background: #dc2626;
  color: white;
}

.cta-btn-enhanced:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.hero-left {
  flex: 1;
  max-width: 600px;
}

.hero-right {
  flex: 1;
  text-align: center;
}

/* Catchcopy */
.catchcopy h1 {
  font-size: 48px;
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 30px;
}

.main-text {
  color: var(--text-base);
  display: block;
}

.accent-text {
  color: var(--accent-blue);
  display: block;
}

.action-text {
  color: var(--main-yellow);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  display: block;
}

/* Service Area */
.service-area {
  text-align: center;
  margin-bottom: 40px;
}

.service-area p {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-base);
}

/* Service Icons */
.service-icons {
  display: flex;
  gap: 20px;
  margin-bottom: 40px;
  justify-content: center;
  flex-wrap: wrap;
}

.service-icon {
  text-align: center;
  padding: 20px;
  background: rgba(255, 214, 0, 0.1);
  border-radius: 15px;
  transition: all 0.3s ease;
  min-width: 150px;
}

.service-icon:hover {
  transform: scale(1.03);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.service-icon .icon {
  font-size: 32px;
  margin-bottom: 10px;
}

.service-icon .title {
  font-weight: 700;
  margin-bottom: 5px;
}

.service-icon .desc {
  font-size: 14px;
  color: #666;
}

/* Pricing */
.pricing {
  text-align: center;
  margin-bottom: 40px;
  padding: 30px;
  background: linear-gradient(135deg, var(--main-yellow) 0%, #ffed4e 100%);
  border-radius: 20px;
  box-shadow: 0 8px 25px rgba(255, 214, 0, 0.3);
}

.pricing h3 {
  font-size: 24px;
  font-weight: 900;
  margin-bottom: 15px;
  color: var(--text-base);
}

.old-price {
  text-decoration: line-through;
  color: #666;
  font-size: 18px;
  margin-bottom: 10px;
}

.new-price {
  font-size: 36px;
  font-weight: 900;
  color: #e53e3e;
  margin-bottom: 10px;
}

.note {
  font-size: 14px;
  color: var(--text-base);
}

/* CTA Buttons */
.cta-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 60px;
}

.cta-btn {
  display: inline-block;
  padding: 15px 30px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 700;
  font-size: 18px;
  transition: all 0.3s ease;
  text-align: center;
  min-width: 200px;
}

.cta-phone {
  background: var(--accent-blue);
  color: white;
}

.cta-phone:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 87, 231, 0.4);
}

.cta-estimate {
  background: #e53e3e;
  color: white;
}

.cta-estimate:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(229, 62, 62, 0.4);
}

/* Hero Image */
.hero-image img {
  max-width: 100%;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* CTA・クーポンセクション レスポンシブ対応 */
@media (max-width: 768px) {
  .cta-coupon-section {
    padding: 60px 0;
  }

  .instant-rescue-title {
    font-size: 28px;
    padding: 15px 25px;
  }

  .four-strengths {
    flex-direction: column;
    gap: 20px;
    margin: 40px 0;
  }

  .strength-item {
    min-width: auto;
    max-width: 300px;
    margin: 0 auto;
  }

  .coupon-discount {
    font-size: 36px;
    flex-direction: column;
    gap: 10px;
  }

  .coupon-cta-buttons {
    flex-direction: column;
    gap: 15px;
  }

  .coupon-staff-image {
    position: static;
    margin-top: 40px;
    width: 100px;
    height: 120px;
  }

  .cta-circle-decoration.left-top {
    display: none;
  }
}

@media (max-width: 480px) {
  .instant-rescue-title {
    font-size: 24px;
    padding: 12px 20px;
  }

  .strength-icon {
    font-size: 36px;
  }

  .coupon-content {
    padding: 25px 20px;
  }

  .coupon-discount {
    font-size: 28px;
  }

  .coupon-staff-image {
    width: 80px;
    height: 100px;
  }
}

/* Hero Content Layout Styles */
.hero-content-layout {
  display: block;
  align-items: flex-start;
  gap: 40px;
  margin-bottom: 30px;
}

.hero-left-content {
  flex: 1;
}

.hero-right-content {
  flex: 1;
  text-align: center;
}

.staff-image {
  position: relative;
  margin-bottom: 50px;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.15));
  animation: breathe 4s ease-in-out infinite;
}

.service-icons-overlay {
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 15px;
}

.service-icon-circle {
  width: 80px;
  height: 80px;
  background: #ffd600;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.service-icon-circle:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

/* Responsive Design for New Layout */
@media (max-width: 768px) {
  .first-view {
    padding: 100px 0 60px 0;
    min-height: 80vh;
  }

  .hero-content-layout {
    flex-direction: column;
    gap: 30px;
  }

  .hero-left-content,
  .hero-right-content {
    flex: none;
    width: 100%;
  }

  .main-catchcopy img {
    max-width: 100%;
  }

  .pricing-content {
    justify-content: center;
    flex-wrap: wrap;
  }

  .old-price-section img,
  .new-price-section img {
    height: 60px;
  }

  .price-guarantee img {
    max-width: 100%;
  }

  .staff-image img {
    max-width: 200px;
  }

  .service-icons-overlay {
    position: static;
    transform: none;
    justify-content: center;
    margin-top: 40px;
    gap: 10px;
  }

  .service-icon-circle {
    width: 70px;
    height: 70px;
    font-size: 10px;
  }

  .service-area-text p {
    font-size: 14px;
    padding: 0 10px;
    margin-bottom: 15px;
  }

  .container {
    padding: 0 15px;
  }

  /* Hide some floating elements on mobile */
  .floating-circle-small {
    display: none;
  }

  .stripe-circle-top {
    width: 300px;
    height: 300px;
    top: 10px;
    left: -80px;
  }
}

@media (max-width: 480px) {
  .first-view {
    padding: 80px 0 30px;
    min-height: 70vh;
  }

  .service-area-text p {
    font-size: 12px;
    padding: 0 15px;
    margin-bottom: 10px;
  }

  .main-hero-image {
    margin-bottom: 10px;
  }

  .main-hero-image img {
    max-height: 250px;
  }

  .pricing-section-image {
    margin-bottom: 10px;
  }

  .pricing-section-image img {
    max-height: 100px;
  }

  .floating-circle {
    width: 60px !important;
    height: 60px !important;
  }

  .yellow-circle-top {
    width: 100px;
    height: 100px;
  }

  .heavy-stripe-bg {
    height: 250px;
    bottom: 200px;
  }
}

/* タブレットサイズでも背景要素を上に調整 */
@media (min-width: 481px) and (max-width: 1024px) {
  .heavy-stripe-bg {
    bottom: 150px;
  }

  .stripe-circle-top {
    top: 0px;
  }
}

/* Section Styles */
.content-section {
  padding: 60px 0;
}

.section-title {
  text-align: center;
  font-size: 32px;
  font-weight: 900;
  color: var(--text-base);
  margin-bottom: 40px;
}

/* CTA・クーポンセクション - Layer Structure Implementation */
.cta-coupon-section {
  position: relative;
  background: var(--main-yellow); /* Layer 1: Base Background */
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 8px,
    rgba(255, 255, 255, 0.1) 8px,
    rgba(255, 255, 255, 0.1) 16px
  );
  padding: 80px 0;
  overflow: hidden;
  z-index: 0;
}

/* Layer 1: Decorative Background Elements */
.cta-decorative-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
}

.cta-circle-decoration {
  position: absolute;
  bottom: -60px;
  right: -40px;
  width: 120px;
  height: 120px;
  background-color: var(--main-yellow);
  border-radius: 50%;
  opacity: 0.8;
  animation: floatSlow 16s ease-in-out infinite;
}

.cta-circle-decoration.left-top {
  top: -80px;
  left: -60px;
  right: auto;
  bottom: auto;
  width: 200px;
  height: 200px;
  opacity: 0.4;
  animation: floatMedium 12s ease-in-out infinite reverse;
}

/* Layer 2: Content Layer */
.cta-content-wrapper {
  position: relative;
  z-index: 2;
}

/* 即レスキュー Header Section */
.instant-rescue-header {
  text-align: center;
  margin-bottom: 50px;
}

.instant-rescue-title {
  display: inline-block;
  background: linear-gradient(135deg, #0057e7 0%, #4fc3f7 100%);
  color: white;
  padding: 20px 40px;
  border-radius: 15px;
  font-size: 36px;
  font-weight: 900;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  box-shadow: 0 8px 25px rgba(0, 87, 231, 0.3);
  margin-bottom: 20px;
  position: relative;
}

.instant-rescue-title::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  background: linear-gradient(
    45deg,
    var(--main-yellow),
    transparent,
    var(--main-yellow)
  );
  border-radius: 20px;
  z-index: -1;
  opacity: 0.5;
}

.instant-rescue-subtitle {
  font-size: 18px;
  color: #333333;
  font-weight: 600;
  margin-top: 15px;
}

/* 4つの強みアイコン群 */
.four-strengths {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 50px 0;
  flex-wrap: wrap;
  gap: 20px;
}

.strength-item {
  flex: 1;
  min-width: 200px;
  text-align: center;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 15px;
  padding: 25px 15px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
}

.strength-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.8),
    transparent
  );
  transition: left 0.5s ease;
}

.strength-item:hover::before {
  left: 100%;
}

.strength-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

.strength-icon {
  font-size: 48px;
  margin-bottom: 15px;
  display: block;
}

.strength-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--accent-blue);
  margin-bottom: 8px;
}

.strength-subtitle {
  font-size: 12px;
  color: #666666;
  line-height: 1.4;
}

/* WEB限定クーポンバナー */
.web-coupon-banner {
  margin-top: 60px;
  text-align: center;
}

.coupon-main-banner {
  display: inline-block;
  background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 50%, #06b6d4 100%);
  border-radius: 25px;
  padding: 0;
  box-shadow: 0 8px 25px rgba(30, 58, 138, 0.3);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  overflow: hidden;
  border: 5px solid var(--main-yellow);
}

.coupon-main-banner::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 70%
  );
  transform: rotate(45deg);
  animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }
  50% {
    transform: translateX(0%) translateY(0%) rotate(45deg);
  }
  100% {
    transform: translateX(100%) translateY(100%) rotate(45deg);
  }
}

.coupon-main-banner:hover {
  transform: translateY(-12px) scale(1.02);
  box-shadow: 0 20px 40px rgba(30, 58, 138, 0.4);
}

.coupon-content {
  padding: 40px;
  position: relative;
  z-index: 1;
}

.coupon-badge {
  background: #06b6d4;
  color: white;
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 20px;
  display: inline-block;
}

.coupon-discount {
  font-size: 48px;
  font-weight: 900;
  color: var(--main-yellow);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  margin: 20px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

.coupon-discount .yen {
  font-size: 36px;
}

.coupon-message {
  color: white;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 30px;
}

.coupon-cta-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.coupon-cta-phone {
  background: #dc2626;
  color: white;
  padding: 15px 30px;
  border-radius: 25px;
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(220, 38, 38, 0.3);
}

.coupon-cta-phone:hover {
  background: #b91c1c;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(220, 38, 38, 0.4);
}

.coupon-cta-mail {
  background: #0057e7;
  color: white;
  padding: 15px 30px;
  border-radius: 25px;
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 87, 231, 0.3);
}

.coupon-cta-mail:hover {
  background: #0046c7;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 87, 231, 0.4);
}

/* スタッフ画像 */
.coupon-staff-image {
  position: absolute;
  right: 40px;
  bottom: 0;
  width: 120px;
  height: 150px;
  z-index: 2;
}

.coupon-staff-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px 10px 0 0;
}

/* Utility Classes */
.text-center {
  text-align: center;
}
.mb-20 {
  margin-bottom: 20px;
}
.mb-40 {
  margin-bottom: 40px;
}
.mt-40 {
  margin-top: 40px;
}

/* ===== お悩み提起・解決策提示セクション - New Layer Structure ===== */

/* お悩み提起エリア (Problem Identification Area) */
.problem-identification-section {
  position: relative;
  background: var(--base-white); /* Layer 1: White Background */
  padding: 60px 0;
  overflow: hidden;
}

/* Layer 1: Background decorative elements */
.problem-bg-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
}

.problem-decoration-circle {
  position: absolute;
  width: 80px;
  height: 80px;
  background: rgba(255, 214, 0, 0.1);
  border-radius: 50%;
  animation: floatSlow 12s ease-in-out infinite;
}

.problem-decoration-circle.left-top {
  top: 10%;
  left: -20px;
}

.problem-decoration-circle.right-bottom {
  bottom: 10%;
  right: -20px;
  background: rgba(0, 87, 231, 0.1);
  animation: floatMedium 10s ease-in-out infinite;
}

/* Layer 2: Content Layer */
.problem-content {
  position: relative;
  z-index: 2;
}

.problem-layout {
  display: flex;
  gap: 60px;
  align-items: center;
  flex-wrap: wrap;
}

.problem-text-area {
  flex: 1;
  min-width: 300px;
}

.problem-list {
  list-style: none;
  padding: 0;
  margin: 0 0 30px 0;
}

.problem-list li {
  position: relative;
  padding: 12px 0 12px 30px;
  font-size: 18px;
  font-weight: 500;
  color: var(--text-base);
  border-bottom: 1px solid #f0f0f0;
  transition: all 0.3s ease;
}

.problem-list li:before {
  content: "⚠️";
  position: absolute;
  left: 0;
  top: 12px;
  font-size: 16px;
}

.problem-list li:hover {
  padding-left: 35px;
  color: var(--accent-blue);
}

.problem-emphasis {
  margin-top: 30px;
}

.emphasis-text-blue {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent-blue);
  margin-bottom: 20px;
}

.emphasis-text-red {
  font-size: 24px;
  font-weight: 900;
  color: #dc2626;
  margin-bottom: 20px;
}

.emphasis-text-base {
  font-size: 18px;
  font-weight: 500;
  color: var(--text-base);
  line-height: 1.6;
}

.problem-image-area {
  flex: 1;
  text-align: center;
  min-width: 300px;
}

.troubled-people-image {
  max-width: 100%;
  height: auto;
  border-radius: 15px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

.troubled-people-image:hover {
  transform: scale(1.02);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2);
}

/* 解決策提示エリア (Solution Presentation Area) */
.solution-presentation-section {
  position: relative;
  background: var(--sub-bg); /* Layer 1: Background */
  padding-bottom: 60px;
  overflow: hidden;
}

/* Layer 1: Background decorative elements */
.solution-bg-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
}

.solution-decoration-stripe {
  position: absolute;
  top: 20%;
  right: -50px;
  width: 100px;
  height: 200px;
  background: repeating-linear-gradient(
    45deg,
    rgba(255, 214, 0, 0.1),
    rgba(255, 214, 0, 0.1) 8px,
    transparent 8px,
    transparent 16px
  );
  transform: rotate(-15deg);
}

.solution-decoration-circle {
  position: absolute;
  width: 60px;
  height: 60px;
  background: rgba(0, 87, 231, 0.1);
  border-radius: 50%;
  animation: floatFast 8s ease-in-out infinite;
}

.solution-decoration-circle.right-mid {
  top: 50%;
  right: 10%;
}

/* Layer 2: Yellow Band Header */
.solution-header-band {
  background: var(--main-yellow);
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 8px,
    rgba(255, 255, 255, 0.1) 8px,
    rgba(255, 255, 255, 0.1) 16px
  );
  padding: 30px 0;
  position: relative;
  z-index: 2;
  box-shadow: 0 4px 15px rgba(255, 214, 0, 0.3);
}

.solution-header-title {
  font-size: 28px;
  font-weight: 900;
  color: var(--text-base);
  text-align: center;
  margin-bottom: 15px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.solution-header-subtitle {
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-base);
  margin-bottom: 10px;
}

.solution-header-description {
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-base);
  margin-bottom: 10px;
}

.solution-header-types {
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-base);
  line-height: 1.4;
}

/* Layer 3: 6つの独立画像ボックス (3x2 Grid) */
.solution-grid-container {
  position: relative;
  z-index: 2;
  padding-top: 40px;
}

.solution-image-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.solution-image-box {
  position: relative;
  background: var(--base-white);
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

/* ホバーリフトアップ効果 */
.solution-image-box.hover-lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

.solution-box-image {
  width: 100%;
  height: auto;
  display: block;
  transition: all 0.3s ease;
}

.solution-image-box:hover .solution-box-image {
  transform: scale(1.02);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .solution-image-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
  }

  .problem-layout {
    gap: 40px;
  }

  .solution-header-title {
    font-size: 24px;
  }
}

@media (max-width: 768px) {
  .problem-layout {
    flex-direction: column;
    gap: 30px;
  }

  .problem-text-area,
  .problem-image-area {
    min-width: auto;
  }

  .solution-image-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .solution-header-title {
    font-size: 20px;
    padding: 0 15px;
  }

  .solution-header-subtitle,
  .solution-header-description {
    font-size: 16px;
    padding: 0 15px;
  }

  .solution-header-types {
    font-size: 14px;
    padding: 0 15px;
  }

  .problem-list li {
    font-size: 16px;
  }

  .emphasis-text-blue {
    font-size: 16px;
  }

  .emphasis-text-red {
    font-size: 20px;
  }

  .emphasis-text-base {
    font-size: 16px;
  }
}

/* Solution Cards - Updated Design */
.solution-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 25px;
  margin: 40px 0;
  padding: 0 10px;
}

.solution-card {
  background: #ffffff;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: all 0.3s ease;
  position: relative;
}

.solution-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Card Header */
.card-header {
  background: #333333;
  color: white;
  padding: 15px 20px;
  text-align: center;
}

.card-header h3 {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  color: white;
}

/* Card Image Section */
.card-image {
  position: relative;
  overflow: hidden;
  height: 180px;
}

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

.card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.1);
}

.question-mark {
  font-size: 48px;
  color: #333333;
  font-weight: 900;
  text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.8);
}

.odor-icon,
.water-drop,
.sound-wave,
.gas-icon {
  font-size: 32px;
  margin-bottom: 5px;
}

.smell-text,
.drip-text,
.noise-text,
.fan-text,
.gas-text {
  font-size: 16px;
  font-weight: 700;
  color: #333333;
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 5px;
}

/* Card Action Bar */
.card-action {
  background: var(--main-yellow);
  padding: 10px 15px;
  text-align: center;
  position: relative;
}

.action-label {
  font-size: 14px;
  font-weight: 700;
  color: #333333;
}

.card-action::before {
  content: "⚡";
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
}

/* Card Content */
.card-content {
  padding: 20px;
}

.card-content p {
  font-size: 14px;
  line-height: 1.6;
  color: #333333;
  margin: 0;
}

/* Responsive Design for Cards */
@media (max-width: 768px) {
  .solution-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 0 5px;
  }

  .solution-card {
    max-width: 100%;
  }

  .card-image {
    height: 160px;
  }

  .question-mark {
    font-size: 36px;
  }

  .card-content {
    padding: 15px;
  }

  .card-content p {
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .card-header h3 {
    font-size: 14px;
  }

  .card-image {
    height: 140px;
  }

  .card-content {
    padding: 12px;
  }
}

/* Enhanced FAQ Styles */
.faq-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
}

.faq-item {
  background: white;
  border-radius: 20px;
  margin-bottom: 25px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  border: 3px solid transparent;
}

.faq-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
  border-color: rgba(255, 214, 0, 0.3);
}

.faq-question {
  width: 100%;
  padding: 25px 30px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 20px;
  font-family: inherit;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.faq-question::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 214, 0, 0.1),
    transparent
  );
  transition: left 0.5s ease;
}

.faq-question:hover::before {
  left: 100%;
}

.faq-question:hover {
  background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
}

.q-icon {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, var(--accent-blue), #4fc3f7);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 900;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  box-shadow: 0 4px 15px rgba(0, 87, 231, 0.3);
  flex-shrink: 0;
}

.question-text {
  flex: 1;
  font-size: 18px;
  font-weight: 700;
  color: #333;
  text-align: left;
  line-height: 1.4;
}

.faq-toggle {
  width: 40px;
  height: 40px;
  background: var(--main-yellow);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(255, 214, 0, 0.4);
}

.faq-icon {
  font-size: 24px;
  font-weight: 900;
  color: #333;
  transition: all 0.3s ease;
}

.faq-item.active .faq-toggle {
  background: #dc2626;
  transform: rotate(45deg);
  box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4);
}

.faq-item.active .faq-icon {
  color: white;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.answer-content {
  padding: 0 30px 30px 30px;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.a-icon {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #10b981, #34d399);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 900;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
  flex-shrink: 0;
  margin-top: 5px;
}

.answer-text {
  flex: 1;
  padding-top: 10px;
}

.answer-text p {
  font-size: 16px;
  line-height: 1.7;
  color: #374151;
  margin: 0;
  font-weight: 500;
}

/* Animation for expanding FAQ */
.faq-item.active .faq-answer {
  animation: expandAnswer 0.4s ease-out;
}

@keyframes expandAnswer {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mobile responsive for FAQ */
@media (max-width: 768px) {
  .faq-container {
    padding: 0 15px;
  }

  .faq-question {
    padding: 20px 25px;
    gap: 15px;
  }

  .q-icon,
  .a-icon {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }

  .question-text {
    font-size: 16px;
  }

  .answer-content {
    padding: 0 25px 25px 25px;
    gap: 15px;
  }

  .answer-text p {
    font-size: 15px;
  }

  .faq-toggle {
    width: 35px;
    height: 35px;
  }

  .faq-icon {
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .faq-question {
    padding: 18px 20px;
    gap: 12px;
  }

  .q-icon,
  .a-icon {
    width: 35px;
    height: 35px;
    font-size: 18px;
  }

  .question-text {
    font-size: 15px;
  }

  .answer-content {
    padding: 0 20px 20px 20px;
    gap: 12px;
  }

  .faq-toggle {
    width: 30px;
    height: 30px;
  }

  .faq-icon {
    font-size: 18px;
  }
}

/* Pricing Section Styles */
.pricing-card:hover {
  transform: translateY(-5px);
  border-color: var(--main-yellow);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.pricing-card .pricing-icon div {
  transition: all 0.3s ease;
}

.pricing-card:hover .pricing-icon div {
  transform: scale(1.1) rotate(5deg);
}

/* Why Cheap Section Styles */
.comparison-card {
  transition: all 0.3s ease;
}

.comparison-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

.comparison-card.other-company:hover {
  border-color: #dc2626;
}

.comparison-card.our-company:hover {
  border-color: #10b981;
}

/* Mobile responsive for new sections */
@media (max-width: 768px) {
  .pricing-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .pricing-card {
    padding: 25px;
  }

  .replacement-section {
    padding: 30px 20px;
  }

  .replacement-section h3 {
    font-size: 24px;
  }

  .replacement-section p {
    font-size: 16px;
  }

  .comparison-wrapper {
    flex-direction: column;
    gap: 40px;
  }

  .comparison-card {
    max-width: 100%;
    padding: 30px 25px;
  }

  .arrow-section {
    transform: rotate(90deg);
  }
}

@media (max-width: 480px) {
  .pricing-service-section,
  .why-cheap-section {
    padding: 60px 0;
  }

  .pricing-header p:first-of-type {
    font-size: 20px;
  }

  .pricing-header p:nth-of-type(2) {
    font-size: 16px;
  }

  .pricing-header p:last-of-type {
    font-size: 14px;
    padding: 8px 15px;
  }

  .pricing-card {
    padding: 20px;
  }

  .pricing-icon div {
    width: 60px;
    height: 60px;
  }

  .pricing-icon span {
    font-size: 28px;
  }

  .pricing-card h3 {
    font-size: 18px;
  }

  .price-display p:nth-of-type(2) {
    font-size: 24px;
  }

  .price-display p:last-of-type {
    font-size: 28px;
  }

  .replacement-section h3 {
    font-size: 22px;
  }

  .comparison-card {
    padding: 25px 20px;
  }

  .comparison-card h3 {
    font-size: 20px;
  }
}

/* Background Patterns */
.bg-stripe-yellow {
  background: var(--main-yellow);
  background-image: url("https://placehold.jp/50x50/FFD600/FFFFFF?text=⟋"),
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 8px,
      rgba(255, 255, 255, 0.1) 8px,
      rgba(255, 255, 255, 0.1) 16px
    );
  background-size: 50px 50px, 16px 16px;
  background-repeat: repeat, repeat;
}

.bg-stripe-gray {
  background: var(--sub-bg);
  background-image: url("https://placehold.jp/40x40/F0F4F8/FFFFFF?text=⟋"),
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 6px,
      rgba(255, 255, 255, 0.2) 6px,
      rgba(255, 255, 255, 0.2) 12px
    );
  background-size: 40px 40px, 12px 12px;
  background-repeat: repeat, repeat;
}

/* Testimonials Carousel Styles */
.testimonials-carousel-wrapper {
  padding: 40px 0;
}

.testimonials-swiper {
  padding-bottom: 60px;
}

.testimonial-card {
  transition: all 0.3s ease;
  transform: translateY(0);
  opacity: 1;
}

.testimonial-card.slide-in {
  animation: slideInUp 0.6s ease-out;
}

@keyframes slideInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Swiper Navigation Customization */
.swiper-button-next,
.swiper-button-prev {
  color: var(--main-yellow) !important;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  width: 50px !important;
  height: 50px !important;
  margin-top: -25px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
  background: rgba(255, 214, 0, 0.9);
  color: white !important;
  transform: scale(1.1);
}

.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 18px !important;
  font-weight: 700;
}

/* Swiper Pagination Customization */
.swiper-pagination {
  text-align: center;
}

.swiper-pagination-bullet {
  background: #d1d5db !important;
  opacity: 0.5;
  transition: all 0.3s ease;
}

.swiper-pagination-bullet-active {
  background: var(--main-yellow) !important;
  opacity: 1;
  transform: scale(1.2);
}

.swiper-pagination-bullet:hover {
  opacity: 0.8;
  transform: scale(1.1);
}

/* Dynamic Bullets */
.swiper-pagination-bullet-active-main {
  background: var(--main-yellow) !important;
}

.swiper-pagination-bullet-active-prev,
.swiper-pagination-bullet-active-next {
  background: rgba(255, 214, 0, 0.6) !important;
  transform: scale(0.8);
}

/* Testimonial Card Hover Effects */
.testimonial-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Touch/Swipe Feedback */
.touching .testimonial-card {
  transform: scale(0.98);
  transition: transform 0.2s ease;
}

/* Rating Stars Animation */
.rating {
  display: inline-block;
}

.rating:hover {
  animation: starPulse 0.6s ease-in-out;
}

@keyframes starPulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

/* Customer Image Hover */
.customer-image {
  transition: all 0.3s ease;
}

.testimonial-card:hover .customer-image {
  transform: scale(1.1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Contact Form 7 Styles */
.contact-form-wrapper {
  width: 100%;
}

/* PC size center alignment */
@media (min-width: 1025px) {
  .contact-form-wrapper {
    max-width: 800px;
    margin: 0 auto;
  }
}

/* Form Sections */
.contact-form-wrapper .form-section {
  margin-bottom: 25px;
}

/* Checkbox Styles for Trouble Type */
.contact-form-wrapper .wpcf7-checkbox {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 15px;
  margin-top: 10px;
}

.contact-form-wrapper .wpcf7-checkbox .wpcf7-list-item {
  margin: 0;
  background: #f8f9fa;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  padding: 12px 15px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.contact-form-wrapper .wpcf7-checkbox .wpcf7-list-item:hover {
  background: #e3f2fd;
  border-color: var(--accent-blue);
}

.contact-form-wrapper .wpcf7-checkbox .wpcf7-list-item input[type="checkbox"] {
  margin-right: 8px;
  transform: scale(1.2);
}

.contact-form-wrapper
  .wpcf7-checkbox
  .wpcf7-list-item
  input[type="checkbox"]:checked
  + .wpcf7-list-item-label {
  font-weight: 700;
  color: var(--accent-blue);
}

.contact-form-wrapper
  .wpcf7-checkbox
  .wpcf7-list-item:has(input[type="checkbox"]:checked) {
  background: #e3f2fd;
  border-color: var(--accent-blue);
  box-shadow: 0 2px 8px rgba(0, 87, 231, 0.2);
}

/* Address Fields Layout */
.contact-form-wrapper .address-fields {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 20px;
  margin-bottom: 25px;
}

.contact-form-wrapper .city-field {
  grid-column: 1 / -1;
}

/* Privacy Policy Section */
.contact-form-wrapper .privacy-section {
  background: #f8f9fa;
  border: 2px solid #dee2e6;
  border-radius: 12px;
  padding: 20px;
  margin: 25px 0;
}

.contact-form-wrapper .privacy-section h4 {
  color: #333;
  margin-bottom: 15px;
  font-size: 18px;
  font-weight: 700;
}

.contact-form-wrapper .privacy-notice {
  margin-bottom: 15px;
  font-size: 14px;
}

.contact-form-wrapper .privacy-notice a {
  color: var(--accent-blue);
  text-decoration: underline;
  cursor: pointer;
}

.contact-form-wrapper .privacy-notice a:hover {
  color: #003db3;
}

/* New Header CTA Button Styles */
.header-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  text-decoration: none;
  min-height: 50px;
  transition: all 0.3s ease;
  font-weight: 600;
  position: relative;
}

/* LINE Button with Image */
.header-line-btn {
  padding: 0 !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.header-line-btn img {
  width: 180px;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
}

.header-line-btn:hover img {
  transform: scale(1.1);
}

/* Phone Button */
.header-phone-btn {
  background: #e91e63;
  color: white;
  padding: 8px 16px;
  flex-direction: column;
  text-align: center;
  min-width: 160px;
}

.header-phone-btn .phone-number {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
}

.header-phone-btn .phone-hours {
  font-size: 10px;
  font-weight: 400;
  opacity: 0.9;
  line-height: 1.1;
}

/* Contact Button */
.header-contact-btn {
  background: #ffb000;
  color: #333;
  padding: 8px 16px;
  min-width: 160px;
}

.header-contact-btn .contact-icon {
  font-size: 20px;
  margin-right: 8px;
}

.header-contact-btn .contact-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.header-contact-btn .contact-main {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}

.header-contact-btn .contact-sub {
  font-size: 10px;
  font-weight: 400;
  opacity: 0.8;
  line-height: 1.1;
}

/* Hover Effects */
.header-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.header-cta-btn:active {
  transform: translateY(0);
  transition: all 0.1s ease;
}

/* Fixed Mobile Footer - New Design */
.mobile-footer-fixed-new {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: rgba(255, 255, 255, 0.5) !important;
  border-top: 1px solid #e5e7eb !important;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1) !important;
  z-index: 1000 !important;
  transform: translateY(100%) !important;
  transition: transform 0.3s ease !important;
  backdrop-filter: blur(10px);
  width: 100% !important;
  display: block !important;
}

.mobile-footer-fixed-new.show {
  transform: translateY(0) !important;
}

.mobile-footer-buttons-new {
  display: flex;
  padding: 10px 20px;
  gap: 10px;
  max-width: 100%;
}

.mobile-footer-btn-new {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 600;
  color: white;
  transition: all 0.3s ease;
  min-height: 60px;
  gap: 10px;
}

.mobile-footer-line-new {
  background: #00b900;
}

.mobile-footer-phone-new {
  background: #e91e63;
}

.mobile-footer-contact-new {
  background: #4a90e2;
}

.footer-btn-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.footer-btn-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.footer-btn-main {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  color: white;
}

.footer-btn-sub {
  font-size: 10px;
  font-weight: 400;
  opacity: 0.9;
  line-height: 1.1;
  color: white;
}

.mobile-footer-btn-new:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.mobile-footer-btn-new:active {
  transform: translateY(0);
  transition: all 0.1s ease;
}

/* Mobile footer is visible on all devices */

/* Mobile adjustments */
@media (max-width: 480px) {
  .mobile-footer-buttons-new {
    padding: 8px 15px;
    gap: 8px;
  }
  
  .mobile-footer-btn-new {
    padding: 10px 12px;
    min-height: 55px;
  }
  
  .footer-btn-main {
    font-size: 13px;
  }
  
  .footer-btn-sub {
    font-size: 9px;
  }
}

/* Enhanced Footer Styles */
.site-footer {
  background: #333333;
  color: #ffffff;
  padding: 40px 0 20px;
  margin-top: 60px;
}

.footer-main {
  display: flex;
  justify-content: space-between;
  margin-bottom: 40px;
  gap: 40px;
}

.footer-logo-section {
  flex: 0 0 300px;
}

.footer-logo img {
  width: 200px;
  height: auto;
  margin-bottom: 20px;
}

.footer-contact {
  margin-bottom: 20px;
}

.footer-phone {
  font-size: 24px;
  font-weight: 700;
  color: #FFD600;
  margin-bottom: 5px;
}

.footer-hours {
  font-size: 14px;
  color: #cccccc;
  margin-bottom: 0;
}

.footer-info {
  display: flex;
  gap: 40px;
  flex: 1;
}

.footer-column {
  flex: 1;
}

.footer-column h4 {
  font-size: 16px;
  font-weight: 700;
  color: #FFD600;
  margin-bottom: 15px;
  border-bottom: 2px solid #FFD600;
  padding-bottom: 5px;
}

.footer-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-column li {
  margin-bottom: 8px;
}

.footer-column li a {
  color: #cccccc;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.3s ease;
}

.footer-column li a:hover {
  color: #FFD600;
}

.footer-bottom {
  border-top: 1px solid #555555;
  padding-top: 20px;
}

.footer-features {
  text-align: center;
  font-size: 14px;
  color: #cccccc;
  margin-bottom: 15px;
}

.footer-legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.footer-copyright {
  font-size: 12px;
  color: #999999;
  margin: 0;
}

.footer-links {
  display: flex;
  gap: 20px;
}

.footer-links a {
  color: #cccccc;
  text-decoration: none;
  font-size: 12px;
  transition: color 0.3s ease;
}

.footer-links a:hover {
  color: #FFD600;
}

/* Footer Responsive */
@media (max-width: 768px) {
  .footer-main {
    flex-direction: column;
    gap: 30px;
  }
  
  .footer-logo-section {
    flex: none;
    text-align: center;
  }
  
  .footer-info {
    flex-direction: column;
    gap: 25px;
  }
  
  .footer-legal {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
  
  .footer-links {
    justify-content: center;
  }
}

/* Privacy Policy Content */
.contact-form-wrapper #privacy-policy h5,
.contact-form-wrapper #privacy-policy h6 {
  color: #333;
  margin: 15px 0 10px 0;
  font-weight: 700;
}

.contact-form-wrapper #privacy-policy h5 {
  font-size: 16px;
  border-bottom: 2px solid var(--accent-blue);
  padding-bottom: 5px;
}

.contact-form-wrapper #privacy-policy h6 {
  font-size: 14px;
  color: var(--accent-blue);
}

.contact-form-wrapper #privacy-policy ul {
  margin: 10px 0 10px 20px;
}

.contact-form-wrapper #privacy-policy li {
  margin-bottom: 5px;
}

/* Acceptance Checkbox */
.contact-form-wrapper .wpcf7-acceptance {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-top: 20px;
}

.contact-form-wrapper .wpcf7-acceptance .wpcf7-list-item {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.contact-form-wrapper .wpcf7-acceptance input[type="checkbox"] {
  transform: scale(1.3);
  margin: 0;
}

.contact-form-wrapper .wpcf7-acceptance .wpcf7-list-item-label {
  font-weight: 600;
  color: #333333;
  cursor: pointer;
}

.contact-form-wrapper .wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-form-wrapper .wpcf7-form label {
  font-weight: 700;
  color: #333;
  margin-bottom: 8px;
  display: block;
  font-size: 16px;
}

.contact-form-wrapper .wpcf7-form input[type="text"],
.contact-form-wrapper .wpcf7-form input[type="email"],
.contact-form-wrapper .wpcf7-form input[type="tel"],
.contact-form-wrapper .wpcf7-form select,
.contact-form-wrapper .wpcf7-form textarea {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  font-size: 16px;
  font-family: inherit;
  transition: all 0.3s ease;
  background: #fff;
}

.contact-form-wrapper .wpcf7-form input[type="text"]:focus,
.contact-form-wrapper .wpcf7-form input[type="email"]:focus,
.contact-form-wrapper .wpcf7-form input[type="tel"]:focus,
.contact-form-wrapper .wpcf7-form select:focus,
.contact-form-wrapper .wpcf7-form textarea:focus {
  border-color: var(--accent-blue);
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 87, 231, 0.1);
}

.contact-form-wrapper .wpcf7-form textarea {
  min-height: 120px;
  resize: vertical;
}

.contact-form-wrapper .wpcf7-form input[type="submit"] {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  color: white;
  padding: 15px 40px;
  border: none;
  border-radius: 25px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4);
  align-self: center;
  min-width: 200px;
}

.contact-form-wrapper .wpcf7-form input[type="submit"]:hover {
  background: linear-gradient(135deg, #b91c1c, #991b1b);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(220, 38, 38, 0.5);
}

.contact-form-wrapper .wpcf7-form input[type="submit"]:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(220, 38, 38, 0.3);
}

/* Contact Form 7 Validation Messages */
.contact-form-wrapper .wpcf7-not-valid-tip {
  color: #dc2626;
  font-size: 14px;
  margin-top: 5px;
  display: block;
}

.contact-form-wrapper .wpcf7-validation-errors {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 15px;
  color: #dc2626;
  margin-bottom: 20px;
}

.contact-form-wrapper .wpcf7-mail-sent-ok {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  padding: 15px;
  color: #166534;
  margin-bottom: 20px;
  text-align: center;
  font-weight: 600;
}

/* Required field asterisk */
.contact-form-wrapper .wpcf7-form .required::after {
  display: none;
}

@media (max-width: 768px) {
  .contact-form-wrapper .wpcf7-form input[type="submit"] {
    width: 100%;
    padding: 18px 20px;
    font-size: 16px;
  }

  .contact-form-wrapper .wpcf7-form input[type="text"],
  .contact-form-wrapper .wpcf7-form input[type="email"],
  .contact-form-wrapper .wpcf7-form input[type="tel"],
  .contact-form-wrapper .wpcf7-form select,
  .contact-form-wrapper .wpcf7-form textarea {
    font-size: 16px; /* iOS zoom prevention */
  }

  /* Mobile checkbox layout */
  .contact-form-wrapper .wpcf7-checkbox {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  /* Mobile address fields */
  .contact-form-wrapper .address-fields {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .contact-form-wrapper .city-field {
    grid-column: 1;
  }

  /* Mobile privacy section */
  .contact-form-wrapper .privacy-section {
    padding: 15px;
  }

  .contact-form-wrapper #privacy-policy {
    font-size: 13px;
    line-height: 1.5;
  }
}

@media (max-width: 480px) {
  .contact-form-wrapper .wpcf7-checkbox {
    grid-template-columns: 1fr;
  }

  .contact-form-wrapper .wpcf7-checkbox .wpcf7-list-item {
    padding: 10px 12px;
    font-size: 14px;
  }
}

/* Mobile CTA Footer */
.mobile-cta-footer {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ffffff;
  border-top: 1px solid #e5e7eb;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1001;
  padding: 10px;
}

.mobile-cta-footer .cta-buttons {
  display: flex;
  gap: 8px;
  justify-content: space-between;
  max-width: 400px;
  margin: 0 auto;
}

.mobile-cta-footer .header-cta-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 8px;
  font-size: 11px;
  border-radius: 8px;
  border: 2px solid;
  font-weight: 700;
  transition: all 0.3s ease;
  cursor: pointer;
}

.mobile-cta-footer .header-cta-btn:hover {
  opacity: 0.8;
}

.mobile-cta-footer .header-cta-btn:active {
  transform: scale(0.98);
  transition: all 0.1s ease;
}

.mobile-cta-footer .phone-btn {
  flex-direction: column;
  padding: 8px 12px;
}

.mobile-cta-footer .phone-btn .phone-number {
  font-size: 12px;
  font-weight: 900;
}

.mobile-cta-footer .phone-btn .phone-hours {
  font-size: 9px;
  opacity: 0.9;
}

/* Mobile Testimonials Optimization */
@media (max-width: 768px) {
  .testimonials-carousel-wrapper {
    padding: 20px 0;
  }

  .testimonial-card {
    padding: 20px;
    margin: 0 10px;
  }

  .swiper-button-next,
  .swiper-button-prev {
    display: none;
  }

  .swiper-pagination {
    bottom: -30px !important;
  }

  .testimonials-swiper {
    padding-bottom: 50px;
  }

  /* Hide header CTA on mobile, show mobile footer */
  .cta-section {
    display: none;
  }

  .mobile-cta-footer {
    display: block !important;
  }

  /* Add bottom padding to prevent content being hidden */
  body {
    padding-bottom: 70px;
  }

  /* Mobile button adjustments */
  .header-cta-btn {
    font-size: 12px;
    padding: 8px 12px;
    gap: 4px;
  }

  .header-cta-btn::before {
    font-size: 12px;
  }
}

/* PC size: Show all 3 CTA buttons */
@media (min-width: 1200px) {
  .header-contact-desktop-only {
    display: flex;
  }

  /* Show desktop layout, hide mobile layout */
  .problem-desktop-layout {
    display: block !important;
  }

  .problem-mobile-layout {
    display: none !important;
  }

  /* Show desktop CTA layout, hide mobile CTA layout */
  .cta-desktop-layout {
    display: block;
  }

  .cta-mobile-layout {
    display: none;
  }
}

/* Mobile/Tablet Problem Section Layout */
.problem-mobile-layout {
  display: block;
  text-align: center;
  padding: 40px 20px;
}

.problem-desktop-layout {
  display: none;
}

.mobile-problem-title {
  margin-bottom: 30px;
}

.mobile-problem-title img {
  width: 100%;
  max-width: 600px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.mobile-problem-list {
  margin-bottom: 30px;
}

.mobile-problem-list img {
  width: 100%;
  max-width: 700px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.mobile-problem-people {
  margin-bottom: 20px;
}

.mobile-problem-people img {
  width: 100%;
  max-width: 1000px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Responsive adjustments for mobile problem section */
@media (max-width: 768px) {
  .mobile-problem-title {
    margin-bottom: 25px;
  }

  .mobile-problem-list {
    margin-bottom: 25px;
  }

  .mobile-problem-people {
    margin-bottom: 15px;
  }
}

/* Mobile/Tablet CTA Section Layout */
.cta-mobile-layout {
  display: block;
  text-align: center;
  padding: 40px 20px;
}

.cta-desktop-layout {
  display: none;
}

.mobile-cta-catchcopy {
  margin-bottom: 30px;
}

.mobile-cta-catchcopy img {
  width: 100%;
  max-width: 600px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.mobile-cta-features {
  margin-bottom: 40px;
}

.mobile-cta-features img {
  width: 100%;
  max-width: 800px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.mobile-cta-buttons {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}

.mobile-cta-btn {
  display: inline-block;
  transition: all 0.3s ease;
  width: 100%;
  max-width: 400px;
}

.mobile-cta-btn img {
  width: 100%;
  height: auto;
  display: block;
}

.mobile-cta-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.mobile-cta-btn:active {
  transform: translateY(-1px);
}

/* Responsive adjustments for mobile CTA section */
@media (max-width: 768px) {
  .mobile-cta-buttons {
    gap: 15px;
  }

  .mobile-cta-catchcopy {
    margin-bottom: 25px;
  }

  .mobile-cta-features {
    margin-bottom: 30px;
  }
}

/* Pricing Cards Layout */
.pricing-cards-container {
  display: flex;
  gap: 30px;
  justify-content: center;
  align-items: flex-start;
  margin: 50px 0;
}

.pricing-card {
  flex: 1;
  max-width: 350px;
  text-align: center;
}

.pricing-card img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 15px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.pricing-card img:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

/* Mobile/Tablet Layout: 縦並び */
@media (max-width: 1024px) {
  .pricing-cards-container {
    flex-direction: column;
    gap: 25px;
    align-items: center;
  }

  .pricing-card {
    max-width: 400px;
    width: 100%;
  }
}

@media (max-width: 768px) {
  .pricing-cards-container {
    gap: 20px;
    margin: 30px 0;
  }

  .pricing-card {
    max-width: 350px;
  }
}

/* Reasons Title Image */
.reasons-title-image {
  text-align: center;
  margin-bottom: 50px;
}

.reasons-title-image img {
  width: 100%;
  max-width: 550px;
  height: auto;
  display: block;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .reasons-title-image {
    margin-bottom: 40px;
  }

  .reasons-title-image img {
    max-width: 500px;
  }
}

@media (max-width: 480px) {
  .reasons-title-image {
    margin-bottom: 30px;
  }

  .reasons-title-image img {
    max-width: 400px;
  }
}

/* Testimonials Title Image */
.testimonials-title-image {
  text-align: center;
  margin-bottom: 50px;
}

.testimonials-title-image img {
  width: 100%;
  max-width: 700px;
  height: auto;
  display: block;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .testimonials-title-image {
    margin-bottom: 40px;
  }

  .testimonials-title-image img {
    max-width: 500px;
  }
}

@media (max-width: 480px) {
  .testimonials-title-image {
    margin-bottom: 30px;
  }

  .testimonials-title-image img {
    max-width: 400px;
  }

  .pricing-cards-container {
    gap: 15px;
    margin: 20px 0;
  }

  .pricing-card {
    max-width: 300px;
  }

  .testimonial-card {
    padding: 15px;
  }

  .customer-image {
    width: 50px !important;
    height: 50px !important;
    font-size: 20px !important;
  }

  blockquote {
    font-size: 14px !important;
  }

  /* 480px以下専用レイアウト調整 */

  /* サービスエリアテキストを中央に、太字 */
  .service-area-text {
    top: calc(50% - 420px) !important;
  }

  .service-area-text p {
    font-weight: bold !important;
  }

  /* キャッチコピー画像を50px上に */
  .main-catchcopy {
    top: calc(25% - 300px) !important;
  }

  /* スタッフ画像コンテナを無効化、画像のみ表示、画像自体を小さく */
  .staff-group {
    top: calc(50% + 10px) !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    width: 60% !important;
    height: 450px !important;
  }

  .staff-group img:first-child {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
  }
}


/* 画像変更後のcss */
@media (max-width: 480px) {
  .service-area-text p {
    font-size: 15px;
  }
}

.staff-image {
  margin-top: 30px;
}

.mobile-staff-side-icons {
  flex-wrap: wrap;
  gap: 0;
  top: calc(75% + 160px) !important;
}

@media (max-width: 768px) {
  .hero-content-layout .mobile-staff-side-icons img {
    margin: 10px auto 5px !important;
  }
}

@media (min-width: 1025px) {
  .bottom-cta-row {
    bottom: 20% !important;
    left: calc(50% - 180px) !important;
    max-width: 700px !important;
  }
}

@media (min-width: 1025px) {
  .bottom-cta-row .cta-overlay {
      max-width: 500px !important;
  }
}

.mobile-footer-btn-new {
  min-height: 110px;
}

.footer-btn-icon {
  font-size: 26px;
}

.footer-btn-main {
  font-size: 20px;
}

@media (max-width: 480px) {
  .footer-btn-main {
    font-size: 18px;
  }
}

.footer-btn-sub {
  font-size: 14px;
}

@media (max-width: 480px) {
  .footer-btn-sub {
    font-size: 13px;
  }
}

.now_time {
  background-color: rgb(255, 255, 215);
  width: 100%;
  text-align: center;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 8px 8px 2px;
  margin: 30px auto 2rem;
  border-radius: 10px;
  padding: 1rem;
  border-width: 4px;
  border-style: solid;
  border-color: rgb(32, 78, 156);
  border-image: initial;
  font-weight: bold;
}

.now_time p {
  font-size: 20px;
}

.now_time .time_text {
  color: #ff0000;
  animation: blinking 1s ease-in-out infinite alternate;
  font-size: 28px;
}

@keyframes blinking {
  0% {
  opacity: 0;
  }
  100% {
  opacity: 1;
  }
}

@media (max-width: 480px) {
  .now_time p {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .now_time .time_text {
    font-size: 20px;
  }
}

.cta-coupon-section .container {
  display: block;
}