/* ===================================
   CSS Variables & Reset
   =================================== */

:root {
  /* Colors */
  --primary-color: #00bf63;
  --primary-hover: #00a356;
  --primary-light: #e6f7f0;
  --secondary-color: #fda4b3;
  --secondary-hover: #fc8fa2;
  --secondary-light: #fef3f5;
  --accent-color: #c772fc;
  --accent-hover: #b85efc;
  --accent-light: #f4ebfe;
  
  /* Text Colors */
  --text-primary: #333333;
  --text-secondary: #666666;
  --text-muted: #999999;
  --text-white: #ffffff;
  
  /* Background Colors */
  --bg-primary: #ffffff;
  --bg-light: #f8f9fa;
  --bg-dark: #212529;
  --bg-overlay: rgba(0, 0, 0, 0.5);
  
  /* Mobile Menu */
  --mobile-overlay-opacity: 0.8; /* 透明度調整用（0.0〜1.0）*/
  /* 透明度の選択肢: */
  /* 0.0 = 完全透明（背景が全く見えない） */
  /* 0.3 = かなり透明（背景がよく見える） */
  /* 0.5 = 半透明（背景が程よく見える） */
  /* 0.8 = やや不透明（背景が少し見える）← 現在の設定 */
  /* 0.95 = ほぼ不透明（背景がわずかに見える） */
  /* 1.0 = 完全不透明（背景が全く見えない） */
  
  /* Border & Dividers */
  --border-color: #e0e0e0;
  --border-light: #f0f0f0;
  --border-radius: 8px;
  --border-radius-lg: 16px;
  
  /* Spacing */
  --spacing-xs: 0.25rem;   /* 4px */
  --spacing-sm: 0.5rem;    /* 8px */
  --spacing-md: 1rem;      /* 16px */
  --spacing-lg: 2rem;      /* 32px */
  --spacing-xl: 3rem;      /* 48px */
  --spacing-2xl: 4rem;     /* 64px */
  
  /* Typography */
  --font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Yu Gothic', YuGothic, sans-serif;
  --font-size-xs: 0.75rem;   /* 12px */
  --font-size-sm: 0.875rem;  /* 14px */
  --font-size-base: 1rem;    /* 16px */
  --font-size-lg: 1.125rem;  /* 18px */
  --font-size-xl: 1.25rem;   /* 20px */
  --font-size-2xl: 1.5rem;   /* 24px */
  --font-size-3xl: 2rem;     /* 32px */
  --font-size-4xl: 2.5rem;   /* 40px */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* Layout */
  --container-max-width: 1200px;
  --container-padding: var(--spacing-md);
  --header-height: 90px;
  
  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.1);
  
  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  /* Z-index */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: 1.6;
  color: var(--text-primary);
  background-color: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--spacing-md) 0;
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
 
}

h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); }

p {
  margin: 0 0 var(--spacing-md) 0;
}

a {
  color: var(--primary-color);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover,
a:focus {
  color: var(--primary-hover);
  text-decoration: underline;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul, ol {
  margin: 0 0 var(--spacing-md) 0;
  padding-left: var(--spacing-lg);
}

li {
  margin-bottom: var(--spacing-xs);
}

/* ===================================
   Utility Classes
   =================================== */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  z-index: var(--z-tooltip);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--bg-dark);
  color: var(--text-white);
  border-radius: var(--border-radius);
  font-size: var(--font-size-sm);
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: 6px;
}

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

@media (max-width: 1200px) {
  .container {
    width: 90%;
  }
}


.container--wide {
  max-width: 80%;
}

/* ===================================
   Buttons
   =================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.btn:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

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

.btn--primary:hover,
.btn--primary:focus {
  color: var(--text-white);
  background-color: var(--primary-hover);
  border-color: var(--primary-hover);
  text-decoration: none;
}

.btn--secondary {
  color: var(--text-white);
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
}

.btn--secondary:hover,
.btn--secondary:focus {
  color: var(--text-white);
  background-color: var(--secondary-hover);
  border-color: var(--secondary-hover);
  text-decoration: none;
}

.btn--accent {
  color: var(--text-white);
  background-color: var(--accent-color);
  border-color: var(--accent-color);
}

.btn--accent:hover,
.btn--accent:focus {
  color: var(--text-white);
  background-color: var(--accent-hover);
  border-color: var(--accent-hover);
  text-decoration: none;
}

.btn--outline {
  color: var(--primary-color);
  background-color: transparent;
  border-color: var(--primary-color);
}

.btn--outline:hover,
.btn--outline:focus {
  color: var(--text-white);
  background-color: var(--primary-color);
  text-decoration: none;
}

.btn--hero {
  padding: var(--spacing-md) var(--spacing-xl);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-white);
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.btn--hero:hover,
.btn--hero:focus {
  color: var(--text-white);
  background-color: var(--primary-hover);
  border-color: var(--primary-hover);
  text-decoration: none;
}

/* ===================================
   Header
   =================================== */

.header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background-color: var(--bg-primary);
  border-bottom: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
}

.header__container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
}

.header__brand {
  flex-shrink: 0;
}

.header__logo img {
  height: 72px;
  width: auto;
  
}

.header__nav {
  display: none;
}

.nav__list {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__item {
  margin: 0 var(--spacing-md);
}

.nav__link {
  display: block;
  padding: var(--spacing-sm) 0;
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  transition: color var(--transition-fast);
  white-space: nowrap;
}

.nav__link:hover,
.nav__link:focus {
  color: var(--primary-color);
  text-decoration: none;
}

/* ドロップダウンメニューのスタイル */
.nav__item--dropdown {
  position: relative;
}

.nav__item--dropdown .nav__link {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.nav__dropdown-icon {
  font-size: 0.75rem;
  transition: transform var(--transition-fast);
}

.nav__item--dropdown:hover .nav__dropdown-icon {
  transform: rotate(180deg);
}

.nav__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--border-color);
  min-width: 220px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all var(--transition-fast);
  z-index: 1000;
  padding: var(--spacing-sm) 0;
}

.nav__item--dropdown:hover .nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav__dropdown-item {
  list-style: none;
}

.nav__dropdown-link {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--text-primary);
  text-decoration: none;
  transition: all var(--transition-fast);
  border-radius: 0;
}

.nav__dropdown-link:hover,
.nav__dropdown-link:focus {
  background: var(--bg-light);
  color: var(--primary-color);
  text-decoration: none;
}

.nav__dropdown-link i {
  width: 16px;
  color: var(--primary-color);
}

.header__actions {
  display: none;
  align-items: center;
  gap: var(--spacing-sm);
}

.language-switcher {
  display: flex;
  gap: var(--spacing-xs);
}

.lang-btn {
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  background: none;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.lang-btn:hover,
.lang-btn:focus {
  color: var(--primary-color);
  border-color: var(--primary-color);
}

.lang-btn--active {
  color: var(--text-white);
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.header__cta {
  display: flex;
  gap: var(--spacing-sm);
}

.header__cta .btn {
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: 0.9rem;
}

/* External Links in Header */
.header__external-links {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.header__external-link {
  display: flex;
  align-items: center;
  justify-content: center;
  /* width: 40px;
  height: 40px; */
  color: var(--text-primary);
  background-color: var(--bg-light);
  /* border: 1px solid var(--border-color); */
  border-radius: var(--border-radius);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.header__external-link:hover,
.header__external-link:focus {
  color: var(--primary-color);
  background-color: var(--primary-light);
  border-color: var(--primary-color);
  transform: translateY(-2px);
}

.header__external-icon {
  width: 50px;
  height: 50px;
  object-fit: contain;
  transition: transform var(--transition-fast);
}

.header__external-link:hover .header__external-icon,
.header__external-link:focus .header__external-icon {
  transform: scale(1.1);
}

/* Mobile External Links */
.header__mobile-external {
  display: none;
  align-items: center;
  margin-right: var(--spacing-xs);
  margin-left: auto;
}

.header__mobile-external-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--text-primary);
  /* background-color: var(--bg-light); */
  /* border: 1px solid var(--border-color); */
  border-radius: var(--border-radius);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.header__mobile-external-link:hover,
.header__mobile-external-link:focus {
  color: var(--primary-color);
  background-color: var(--primary-light);
  border-color: var(--primary-color);
}

.header__mobile-external-icon {
  width: 52px;
  height: 52px;

  object-fit: contain;
  transition: transform var(--transition-fast);
}

.header__mobile-external-link:hover .header__mobile-external-icon,
.header__mobile-external-link:focus .header__mobile-external-icon {
  transform: scale(1.1);
}

/* Hamburger Menu */
.hamburger {
  display: none; /* デフォルトでは非表示 */
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all var(--transition-fast);
}

.hamburger__line {
  width: 100%;
  height: 2px;
  background-color: var(--text-primary);
  transition: all var(--transition-fast);
}

.hamburger[aria-expanded="true"] .hamburger__line:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.hamburger[aria-expanded="true"] .hamburger__line:nth-child(2) {
  opacity: 0;
}

.hamburger[aria-expanded="true"] .hamburger__line:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -6px);
}

/* Mobile Navigation Styles */
.mobile-nav {
  position: fixed;
  top: 0;
  right: -100%;
  width: 320px;
  height: 100vh;
  
  background-color: #ffffff;
  box-shadow: -5px 0 25px rgba(0, 0, 0, 0.1);
  z-index: 9999;
  transition: right 0.3s ease-in-out;
  padding-top: 100px;
  overflow-y: auto;
  border-left: 1px solid #e0e0e0;
  /* クリック可能にする */
  pointer-events: auto;
}

.mobile-nav.mobile-nav--open {
  right: 0;
}

.mobile-nav__header {
  padding: 20px 30px;
  border-bottom: 2px solid #e9ecef;
  margin-bottom: 10px;
}

.mobile-nav__title {
  font-size: 20px;
  font-weight: 700;
  color: #333333;
  margin: 0;
  text-align: center;
}

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

.mobile-nav__item {
  margin: 0;
}

.mobile-nav__link {
  display: flex;
  align-items: center;
  padding: 18px 30px;
  color: #333333;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.3s ease;
  position: relative;
  border-left: 4px solid transparent;
  background-color: transparent;
  gap: 15px;
}

.mobile-nav__link i {
  font-size: 18px;
  width: 20px;
  text-align: center;
  color: #666666;
  transition: color 0.3s ease;
}

.mobile-nav__link span {
  flex: 1;
}

.mobile-nav__link:hover,
.mobile-nav__link:focus {
  background-color: #f8f9fa;
  color: #0066cc;
  border-left-color: #0066cc;
  transform: translateX(5px);
  box-shadow: 0 2px 8px rgba(0, 102, 204, 0.1);
}

.mobile-nav__link:hover i,
.mobile-nav__link:focus i {
  color: #0066cc;
}

.mobile-nav__link:active {
  background-color: #e9ecef;
  transform: translateX(2px);
}

/* モバイルナビゲーション ドロップダウン */
.mobile-nav__item--dropdown .mobile-nav__toggle {
  position: relative;
}

.mobile-nav__dropdown-icon {
  margin-left: auto;
  transition: transform var(--transition-fast);
  font-size: 0.875rem;
}

.mobile-nav__item--dropdown.active .mobile-nav__dropdown-icon {
  transform: rotate(180deg);
}

.mobile-nav__submenu {
  max-height: 0;
  overflow: hidden;
  background: var(--bg-light);
  transition: max-height var(--transition-fast);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mobile-nav__item--dropdown.active .mobile-nav__submenu {
  max-height: 300px;
}

.mobile-nav__subitem {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.mobile-nav__subitem:last-child {
  border-bottom: none;
}

.mobile-nav__sublink {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 12px 20px 12px 50px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.9rem;
  transition: all var(--transition-fast);
  border-left: 3px solid transparent;
}

.mobile-nav__sublink:hover,
.mobile-nav__sublink:focus {
  background: white;
  color: var(--primary-color);
  border-left-color: var(--primary-color);
  transform: translateX(5px);
}

.mobile-nav__sublink i {
  width: 16px;
  font-size: 0.875rem;
  color: var(--primary-color);
}

/* Mobile Overlay */
.mobile-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 透明度の調整方法: */
  /* 1. CSS変数を変更: :root の --mobile-overlay-opacity の値を変更 */
  /* 2. 直接変更: rgba()の最後の値を変更（0.0〜1.0） */
  /* background-color: rgba(255, 255, 255, var(--mobile-overlay-opacity)); */
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  /* モバイルナビ部分はクリック可能にする */
  pointer-events: auto;
}

.mobile-overlay.mobile-overlay--visible {
  opacity: 1;
  visibility: visible;
}

/* モバイルナビが開いている時、モバイルナビ部分はクリック可能にする */
.mobile-nav.mobile-nav--open {
  pointer-events: auto;
}

.mobile-nav.mobile-nav--open * {
  pointer-events: auto;
}

.sales-promotion {
  margin: auto;
  margin-top: 18px;
  
  width: 80%;
  text-align: center;
  padding: 1rem;
}

/* Mobile Menu Media Query */
@media (max-width: 1023px) {
  /* Hide desktop navigation */
  .desktop-nav {
    display: none;
  }

  /* Hide desktop actions on mobile */
  .header__actions {
    display: none;
  }

  /* Show hamburger on mobile */
  .hamburger {
    display: flex;
    position: absolute;
    right: var(--container-padding);
  }
  
  /* Show mobile external links */
  .header__mobile-external {
    display: flex;
    position: absolute;
    right: calc(var(--container-padding) + 60px); /* ハンバーガーボタン(44px) + 余白 */
  }
}

/* Desktop styles */
@media (min-width: 1024px) {
  .mobile-nav {
    display: none;
  }
  
  /* Hide mobile external links on desktop */
  .header__mobile-external {
    display: none;
  }
}

/* Body class when mobile navigation is open */
.nav-open {
  overflow: hidden; /* Prevent body scroll when menu is open */
}

/* Mobile responsive for services */
@media (max-width: 767px) {
  .service-item {
    flex-direction: column !important;
    text-align: center;
    gap: var(--spacing-lg);
  }

  .service-item:nth-child(even) {
    flex-direction: column !important;
  }

  .service-item__icon {
    width: 90%;
    height: 90%;
    margin: 0 auto;
  }

  .service-item__icon img {
    width: 90%;
    height: 90%;
    text-align: center;
  }

  .service-item__title {
    font-size: var(--font-size-xl);
  }

  .service-item__features {
    justify-content: center;
  }
}

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

.hero {
  position: relative;
  min-height: 60vh;
  overflow: hidden;
}

.hero__carousel {
  position: relative;
  height: 100%;
}

.hero__slides {
  position: relative;
  height: 60vh;
  min-height: 400px;
}

.hero__slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity var(--transition-slow);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__slide--active {
  opacity: 1;
}

.hero__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* デスクトップでは画像の比率を保持しつつカバー */
  z-index: -1;
}

.hero__slide::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-overlay);
  z-index: 0;
}

.hero__content {
  position: relative;
  z-index: 1;
  text-align: center;
  color: var(--text-white);
  padding: 0 var(--container-padding);
  max-width: 600px;
}

.hero__title {
  margin: 0 0 var(--spacing-lg) 0;
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
}

.hero__text {
  margin: 0 0 var(--spacing-xl) 0;
  font-size: var(--font-size-lg);
  opacity: 0.9;
}

/* Hero Navigation */
.hero__prev,
.hero__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 50%;
  color: var(--text-white);
  font-size: var(--font-size-2xl);
  cursor: pointer;
  transition: background-color var(--transition-fast);
  z-index: 2;
}

.hero__prev:hover,
.hero__prev:focus,
.hero__next:hover,
.hero__next:focus {
  background: rgba(255, 255, 255, 0.3);
}

/* Mobile: reduce hero height and make image behave responsively */
@media (max-width: 767px) {
  .hero {
    min-height: 40vh; /* reduce vertical space on small screens */
  }

  .hero__slides {
    height: auto;
    min-height: 180px;
  }

  .hero__single {
    position: relative;
    display: block;
    padding: 0.5rem 0;
  }

  .hero__image {
    position: relative !important;
    width: 100%;
    height: auto !important;
    object-fit: contain !important;
    z-index: -1;
  }
}

.hero__prev {
  left: var(--spacing-lg);
}

.hero__next {
  right: var(--spacing-lg);
}

.hero__dots {
  position: absolute;
  bottom: var(--spacing-lg);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--spacing-sm);
  z-index: 2;
}

.hero__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  border: none;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.hero__dot--active,
.hero__dot:hover,
.hero__dot:focus {
  background: var(--text-white);
}

/* ===================================
   Sections
   =================================== */

.section__title {
  text-align: center;
  margin: 0 0 var(--spacing-md) 0;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  margin-bottom: 20px;
}

.section__subtitle {
  text-align: center;
  margin: 0 0 var(--spacing-xl) 0;
  color: var(--text-secondary);
  font-size: var(--font-size-lg);
}

.section__cta {
  text-align: center;
  margin-top: var(--spacing-xl);
}

/* Services Overview */
.services-overview {
  padding: var(--spacing-2xl) 0;
  background: linear-gradient(135deg, var(--primary-light) 0%, var(--secondary-light) 100%);
  position: relative;
  overflow: hidden;
}

.services-overview::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2300bf63' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
  pointer-events: none;
}

.services-list {
  margin-top: var(--spacing-xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
  position: relative;
  z-index: 1;
}

.service-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-xl);
  padding: var(--spacing-xl);
  background: var(--bg-primary);
  border-radius: var(--border-radius-lg);
  box-shadow: 0 8px 32px rgba(0, 191, 99, 0.1);
  border: 2px solid transparent;
  position: relative;
  flex-direction: row-reverse;
}

.service-item__icon {
  flex-shrink: 0;
  width: 240px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius-lg);
  background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
  box-shadow: 0 8px 24px rgba(0, 191, 99, 0.3);
  position: relative;
  overflow: hidden;
}

.service-item__icon::before {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: calc(var(--border-radius-lg) - 2px);
  background: var(--bg-primary);
}

.service-item__icon img {
  width: 200px;
  height: 200px;
  object-fit: contain;
  border-radius: var(--border-radius-md);
  position: relative;
  z-index: 1;
}

.service-item__content {
  flex: 1;
  min-width: 0;
}

.service-item__title {
  margin: 0 0 var(--spacing-md) 0;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--primary-color);
  position: relative;
}

.service-item__title::after {
  content: '';
  position: absolute;
  bottom: calc(-1 * var(--spacing-xs));
  left: 0;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
  border-radius: 2px;
}

.service-item__text {
  margin: 0 0 var(--spacing-lg) 0;
  color: var(--text-secondary);
  font-size: var(--font-size-lg);
  line-height: 1.7;
}

.service-item__features {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
}

.service-item__features li {
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-sm);
  color: var(--primary-color);
  background: var(--primary-light);
  border-radius: 20px;
  font-weight: var(--font-weight-medium);
  border: 1px solid var(--primary-color);
}

/* Web Design Services */
.web-designs {
  margin-top: 50px;
  padding: var(--spacing-2xl) 0;
}

.designs-grid {
  display: grid;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-xl);
}

.medical-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  overflow: hidden;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  text-decoration: none;
  color: inherit;
}

.medical-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  text-decoration: none;
  color: inherit;
}

.medical-card__image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.medical-card__content {
  padding: var(--spacing-lg);
  flex-grow: 1;
}

.medical-card__title {
  margin: 0 0 var(--spacing-sm) 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

.medical-card__summary {
  margin: 0 0 var(--spacing-md) 0;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.medical-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.medical-card__tag {
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--primary-light);
  color: var(--primary-color);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  border-radius: var(--border-radius);
}

/* Company Locations */
.company-locations {
  padding: var(--spacing-2xl) 0;
  background-color: var(--bg-light);
}

.companys-layout {
  display: grid;
  gap: var(--spacing-xl);
  margin-top: var(--spacing-xl);
}

.company-grid {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--spacing-lg);
}

/* --------------------------------------------------
   Columns (コラム記事一覧) - レスポンシブなカードレイアウト
   - PC: 4カラム
   - SP: 2カラム
   HTMLを変更せず、.columns-grid の直下の要素をカード化する
   -------------------------------------------------- */
.columns-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-xl);
  margin-top: var(--spacing-xl);
}

/* スマホ・タブレットで2カラム */
@media (max-width: 900px) {
  .columns-grid {
    /* 2カラムにして、カラム間のギャップを小さくしてカードをワイドに見せる */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--container-padding); /* 両サイドの余白と近い感覚に調整 */
  }
}

/* columns-grid の直下の各要素をカード風にする（ローディング等は除外） */
.columns-grid > *:not(.loading-placeholder) {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
  text-decoration: none;
  color: inherit;
  min-height: 260px;
}

.columns-grid > *:not(.loading-placeholder):hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

/* 画像があればフィットさせる（img 要素がある場合を想定） */
.columns-grid > * img {
  width: 100%;
  height: auto; /* 高さは自動で調整（切れないように） */
  display: block;
  max-width: 100%;
}

/* カード内のコンテンツエリアにpaddingを追加 */
.columns-grid > * .column-card__content {
  padding: var(--spacing-md);
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* 見出し・要約・メタ情報の汎用スタイル（HTMLが異なっても適用する） */
.columns-grid > * h1,
.columns-grid > * h2,
.columns-grid > * h3,
.columns-grid > * h4,
.columns-grid > * h5,
.columns-grid > * h6 {
  margin: 0 0 var(--spacing-sm) 0;
  color: var(--primary-color);
  font-weight: var(--font-weight-semibold);
}

.columns-grid > * p {
  margin: 0 0 var(--spacing-md) 0;
  color: var(--text-secondary);
  line-height: 1.6;
  /* 行数ベースで省略（最大3行） - CSSのみで実現 */
  display: -webkit-box;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.columns-grid > * .meta,
.columns-grid > * .column-meta,
.columns-grid > * .post-meta {
  margin-top: auto;
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}

/* リンク要素がカード全体にある場合でもクリック可能に */
.columns-grid > a {
  display: block;
}

.clinic-card {
  background: var(--bg-primary);
  padding: var(--spacing-lg);
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: all var(--transition-fast);
  position: relative;
}

.clinic-card:hover,
.clinic-card:focus,
.clinic-card--selected {
  border-color: var(--primary-color);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.clinic-card--partner {
  border-left: 4px solid var(--accent-color);
}

.clinic-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--spacing-sm);
}

.clinic-card__name {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--primary-color);
  flex: 1;
}

.clinic-card__badge {
  background: var(--accent-color);
  color: white;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: 12px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.clinic-card__address,
.clinic-card__contact,
.clinic-card__hours {
  margin: 0 0 var(--spacing-sm) 0;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.clinic-card__address i,
.clinic-card__contact i,
.clinic-card__hours i {
  width: 16px;
  color: var(--primary-color);
  margin-right: var(--spacing-xs);
}

.clinic-card__services {
  margin: var(--spacing-md) 0 0 0;
}

.clinic-card__services p {
  margin: 0 0 var(--spacing-xs) 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.services-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
}

.services-list li {
  background: var(--primary-light);
  color: var(--primary-color);
  padding: 2px var(--spacing-sm);
  border-radius: 12px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

.map-container {
  position: relative;
  height: 400px;
  border-radius: var(--border-radius);
  overflow: hidden;
}

.map {
  width: 100%;
  height: 100%;
}

/* Access section layout: left address, right map */
.access-content {
  display: grid;
  grid-template-columns: 1fr 480px; /* flexible left column, fixed-ish right map */
  gap: var(--spacing-lg);
  align-items: start;
}
.access-info {
  text-align: left;
}
.access-info address {
  font-style: normal;
  line-height: 1.6;
}
.map-container {
  /* keep existing sizing but ensure it fits inside the grid column */
  width: 100%;
  max-width: 480px;
}

@media (max-width: 900px) {
  .access-content {
    grid-template-columns: 1fr; /* stack on small screens */
  }
  .map-container {
    max-width: 100%;
  }
}

/* Map Popup Styles */
.map-popup {
  min-width: 280px;
  max-width: 320px;
  font-family: var(--font-family);
}

.map-popup h4 {
  margin: 0 0 var(--spacing-sm) 0;
  color: var(--primary-color);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

.map-popup p {
  margin: 0 0 var(--spacing-xs) 0;
  font-size: var(--font-size-sm);
  line-height: 1.4;
  color: var(--text-secondary);
}

.map-popup i {
  width: 14px;
  color: var(--primary-color);
  margin-right: var(--spacing-xs);
}

.map-popup a {
  color: var(--primary-color);
  text-decoration: none;
}

.map-popup a:hover {
  text-decoration: underline;
}

.popup-services {
  margin: var(--spacing-sm) 0;
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--border-light);
}

.popup-services p {
  margin: 0 0 var(--spacing-xs) 0;
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.popup-services ul {
  margin: 0;
  padding-left: var(--spacing-md);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.popup-services li {
  margin-bottom: 2px;
}

.popup-access {
  margin: var(--spacing-sm) 0;
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--border-light);
}

.popup-access p:first-child {
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.popup-buttons {
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--border-light);
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.btn--sm {
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-xs);
}

/* News & Column */
.news-column {
  padding: var(--spacing-2xl) 0;
}

/* Announcements Section */
.announcements-section {
  margin-bottom: var(--spacing-xl);
  background: var(--bg-primary);
  border-radius: var(--border-radius);
  padding: var(--spacing-xl);
  box-shadow: var(--shadow-sm);
}

.announcements-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin: 0 0 var(--spacing-lg) 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.announcements-title i {
  color: var(--primary-color);
  font-size: var(--font-size-lg);
}

.announcements-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.announcement-item {
  padding: var(--spacing-md);
  background: var(--bg-light);
  border-radius: var(--border-radius-sm);
  border-left: 4px solid var(--primary-color);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.announcement-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.announcement-item--holiday {
  border-left-color: #e74c3c;
}

.announcement-item--service {
  border-left-color: var(--secondary-color);
}

.announcement-item--campaign {
  border-left-color: #f39c12;
}

.announcement-item--update {
  border-left-color: var(--primary-color);
}

.announcement-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

.announcement-date {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  white-space: nowrap;
  background: var(--bg-primary);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--border-radius-sm);
  font-weight: var(--font-weight-medium);
}

.announcement-title-text {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin: 0;
  flex: 1;
}

.announcement-content {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  line-height: 1.7;
  margin: 0;
}

.announcement-type-badge {
  font-size: var(--font-size-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--border-radius-full);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  margin-left: var(--spacing-sm);
}

.announcement-type-badge--holiday {
  background: #e74c3c;
  color: var(--bg-primary);
}

.announcement-type-badge--service {
  background: var(--secondary-color);
  color: var(--bg-primary);
}

.announcement-type-badge--campaign {
  background: #f39c12;
  color: var(--bg-primary);
}

.announcement-type-badge--update {
  background: var(--primary-color);
  color: var(--bg-primary);
}

.news-grid {
  display: grid;
  gap: var(--spacing-xl);
  margin-top: var(--spacing-xl);
}

.news-card {
  background: var(--bg-primary);
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.news-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.news-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.news-card__link:hover {
  text-decoration: none;
  color: inherit;
}

.news-card__image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.news-card__content {
  padding: var(--spacing-lg);
}

.news-card__date {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin-bottom: var(--spacing-sm);
}

.news-card__title {
  margin: 0 0 var(--spacing-md) 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
}

.news-card__excerpt {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

/* News Items (External Content) */
.news-item {
  background: white;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.5rem;
  border-left: 4px solid var(--accent-color);
  transition: var(--transition);
  opacity: 0;
  animation: fadeInUp 0.6s ease forwards;
  display: flex;
  gap: 1rem;
  overflow: hidden;
}

.news-item:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.news-item__image {
  flex-shrink: 0;
  width: 120px;
  height: 80px;
  border-radius: var(--border-radius-sm);
  overflow: hidden;
  background: var(--bg-light);
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.news-item__placeholder {
  color: var(--text-muted);
  font-size: 1.5rem;
}

.news-content {
  position: relative;
  flex: 1;
  padding: 1rem;
  min-width: 0; /* flexbox text overflow fix */
}

.news-date {
  display: inline-block;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  margin-bottom: 0.75rem;
  font-weight: var(--font-weight-medium);
}

.news-title {
  margin: 0 0 1rem 0;
  font-size: var(--font-size-lg);
  line-height: 1.4;
}

.news-title a {
  color: var(--text-primary);
  text-decoration: none;
  transition: var(--transition);
}

.news-title a:hover {
  color: var(--accent-color);
}

.news-excerpt {
  margin: 0 0 1rem 0;
  color: var(--text-secondary);
  line-height: 1.6;
}

.news-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.5rem;
}

.news-category {
  display: inline-block;
  background: var(--primary-color);
  color: white;
  font-size: var(--font-size-xs);
  padding: 0.25rem 0.5rem;
  border-radius: var(--border-radius-sm);
  font-weight: var(--font-weight-medium);
}

.news-source {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.news-source i {
  color: var(--accent-color);
}

.x-post-embed {
  margin: 1rem 0;
  max-width: 100%;
  overflow: hidden;
}

.x-post-embed blockquote {
  margin: 0;
  padding: 0;
}

.loading-news {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  color: var(--text-secondary);
}

.loading-news::before {
  content: '';
  width: 20px;
  height: 20px;
  border: 2px solid var(--accent-color);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-right: 0.75rem;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ===================================
   Footer
   =================================== */

.footer {
  background-color: var(--bg-dark);
  color: var(--text-white);
  padding: var(--spacing-2xl) 0 var(--spacing-lg) 0;
}

.footer__content {
  display: grid;
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
}

.footer__brand {
  text-align: center;
}

.footer__logo {
  margin: 0 auto var(--spacing-lg) auto;
}

.footer__description {
  margin: 0 0 var(--spacing-lg) 0;
  color: rgba(255, 255, 255, 0.8);
}

.footer__social {
  display: flex;
  justify-content: center;
  gap: var(--spacing-md);
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  transition: background-color var(--transition-fast);
}

.social-link:hover,
.social-link:focus {
  background: rgba(255, 255, 255, 0.2);
  text-decoration: none;
}

.footer__links {
  display: grid;
  gap: var(--spacing-xl);
}

.footer__title {
  margin: 0 0 var(--spacing-md) 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-white);
}

.footer__list,
.footer__nav {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer__nav li {
  margin-bottom: var(--spacing-xs);
}

.footer__link {
  display: block;
  padding: var(--spacing-xs) 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--font-size-sm);
  transition: color var(--transition-fast);
}

.footer__link:hover,
.footer__link:focus {
  color: var(--text-white);
  text-decoration: none;
}

/* Contact links in footer */
.footer__contact-link {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-weight: 500;
  transition: all var(--transition-fast);
  border-bottom: 1px solid transparent;
}

.footer__contact-link:hover,
.footer__contact-link:focus {
  color: var(--primary-color);
  text-decoration: none;
  border-bottom-color: var(--primary-color);
  transform: translateY(-1px);
}

.footer__contact-link:active {
  transform: translateY(0);
}

/* Contact section styling */
.footer__contact {
  margin-top: var(--spacing-sm);
}

.footer__contact p {
  margin: var(--spacing-xs) 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--font-size-sm);
  line-height: 1.6;
}

/* Icon spacing for contact info */
.footer__contact p {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.footer__bottom {
  padding-top: var(--spacing-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}

/* Mobile Footer Styles */
@media (max-width: 767px) {
  /* Ensure overall footer content centers on small screens */
  .footer__content {
    text-align: center;
  }

  .footer__contact {
    text-align: center;
  }

  .footer__contact p {
    justify-content: center;
    margin: var(--spacing-sm) 0;
  }

  .footer__column-title {
    text-align: center;
    margin-bottom: var(--spacing-md);
  }

  .footer__brand {
    text-align: center;
    margin-bottom: var(--spacing-lg);
  }

  .footer__social {
    justify-content: center;
  }

  /* Stack link columns and center their contents on very small screens */
  .footer__links {
    display: block;
  }

  .footer__column {
    max-width: 360px;
    margin: 0 auto var(--spacing-lg);
  }

  /* Make the lists appear inline and centered for compact display */
  .footer__nav {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
  }

  .footer__nav li {
    margin: 0;
    display: inline-block;
  }

  .footer__link {
    padding: var(--spacing-xs) 0.5rem;
    display: inline-block;
  }
}

.footer__copyright {
  margin: 0;
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.6);
}

/* ===================================
   Mobile Bottom Bar
   =================================== */

.mobile-bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: none;
  background-color: var(--text-white);
  border-top: 1px solid var(--border-color);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  padding: var(--spacing-xs) 0;
}

.mobile-bottom-bar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: var(--spacing-sm) var(--spacing-xs);
  color: var(--text-primary);
  text-decoration: none;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  transition: all var(--transition-fast);
  min-height: 60px;
}

.mobile-bottom-bar__item:first-child {
  background-color: #f7e6d1;
  color: #e78003;;
}

.mobile-bottom-bar__item:last-child {
  background-color: #00c300;
  color: var(--text-white);
}

.mobile-bottom-bar__item:hover,
.mobile-bottom-bar__item:focus {
  transform: translateY(-2px);
  opacity: 0.9;
}

.mobile-bottom-bar__item i {
  font-size: 1.25rem;
  margin-bottom: var(--spacing-xs);
}

.mobile-bottom-bar__item span {
  font-size: 0.75rem;
  line-height: 1.2;
}

/* Show mobile bottom bar only on mobile devices */
@media (max-width: 767px) {
  .mobile-bottom-bar {
    display: flex;
  }
  
  /* Add bottom padding to body to prevent content from being hidden */
  body {
    padding-bottom: 80px;
  }
}

/* ===================================
   Back to Top & Modal
   =================================== */

.back-to-top {
  position: fixed;
  bottom: var(--spacing-lg);
  right: var(--spacing-lg);
  width: 50px;
  height: 50px;
  background: var(--primary-color);
  color: var(--text-white);
  border: none;
  border-radius: 50%;
  font-size: var(--font-size-xl);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-fast);
  z-index: var(--z-fixed);
}

.back-to-top--visible {
  opacity: 1;
  visibility: visible;
}

.back-to-top:hover,
.back-to-top:focus {
  background: var(--primary-hover);
}

@media (max-width: 767px) {
  .back-to-top {
    bottom: calc(80px + var(--spacing-md)); /* Above mobile bottom bar */
    right: var(--spacing-md);
    width: 45px;
    height: 45px;
  }
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-modal);
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-fast);
}

.modal--open {
  opacity: 1;
  visibility: visible;
}

.modal__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

.modal__content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  background: var(--bg-primary);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--border-color);
}

.modal__title {
  margin: 0;
  font-size: var(--font-size-xl);
}

.modal__close {
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  font-size: var(--font-size-xl);
  cursor: pointer;
  border-radius: var(--border-radius);
  transition: background-color var(--transition-fast);
}

.modal__close:hover,
.modal__close:focus {
  background: var(--bg-light);
}

.modal__body {
  padding: var(--spacing-lg);
  overflow-y: auto;
}

/* Work modal (page-specific modal used by portfolio cards) */
.work-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-modal);
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-fast);
}

.work-modal.active {
  opacity: 1;
  visibility: visible;
}

.work-modal__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-overlay);
}

.work-modal__content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 92%;
  max-width: 900px;
  max-height: 90vh;
  background: var(--bg-primary);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}

.work-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
}

.work-modal__content {
  display: flex;
  flex-direction: column;
}

.work-modal__body {
  padding: var(--spacing-lg);
  overflow-y: auto;
  /* Allow the body to take remaining height so it becomes scrollable when content is long */
  flex: 1 1 auto;
  min-height: 0; /* allow flex children to shrink properly */
}

/* ===================================
   Additional Components for New Color Palette
   =================================== */

/* Breadcrumb */
.breadcrumb {
  padding: var(--spacing-md) 0;
  background-color: var(--bg-light);
  font-size: var(--font-size-sm);
}

.breadcrumb__list {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb__item {
  margin: 0;
}

.breadcrumb__item:not(:last-child)::after {
  content: ">";
  margin: 0 var(--spacing-sm);
  color: var(--text-muted);
}

.breadcrumb__link {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.breadcrumb__link:hover,
.breadcrumb__link:focus {
  color: var(--primary-color);
  text-decoration: underline;
}

.breadcrumb__current {
  color: var(--text-primary);
  font-weight: var(--font-weight-medium);
}

/* Pricing Table */
.pricing-table {
  display: grid;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-xl);
}

.pricing-plan {
  background: var(--bg-primary);
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-xl);
  text-align: center;
  position: relative;
  transition: all var(--transition-fast);
}

.pricing-plan:hover {
  border-color: var(--primary-color);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.pricing-plan--featured {
  border-color: var(--primary-color);
  position: relative;
}

.pricing-plan--featured::before {
  content: "おすすめ";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary-color);
  color: var(--text-white);
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--border-radius);
}

.pricing-plan__name {
  margin: 0 0 var(--spacing-sm) 0;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--primary-color);
}

.pricing-plan__price {
  margin: 0 0 var(--spacing-sm) 0;
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}

.pricing-plan__duration {
  margin: 0 0 var(--spacing-lg) 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.pricing-plan__features {
  margin: 0 0 var(--spacing-xl) 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.pricing-plan__features li {
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-secondary);
}

.pricing-plan__features li::before {
  content: "✓";
  color: var(--primary-color);
  font-weight: var(--font-weight-bold);
  margin-right: var(--spacing-sm);
}

/* Process Flow */
.process-flow {
  display: grid;
  gap: var(--spacing-xl);
  margin-top: var(--spacing-xl);
}

.process-step {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-lg);
}

.process-step__number {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  background: var(--primary-color);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}

.process-step__content h3 {
  margin: 0 0 var(--spacing-sm) 0;
  color: var(--primary-color);
  font-size: var(--font-size-lg);
}

.process-step__content p {
  margin: 0;
  color: var(--text-secondary);
}

/* Testimonials */
.testimonial {
  background: var(--bg-light);
  padding: var(--spacing-xl);
  border-radius: var(--border-radius-lg);
  border-left: 4px solid var(--primary-color);
  margin: var(--spacing-lg) 0;
}

.testimonial__text {
  margin: 0 0 var(--spacing-lg) 0;
  font-size: var(--font-size-lg);
  font-style: italic;
  color: var(--text-primary);
  line-height: 1.7;
}

.testimonial__author {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.testimonial__avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}

.testimonial__info h4 {
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.testimonial__info p {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

/* Related Services */
.related-services {
  margin-top: var(--spacing-2xl);
}

.related-services__grid {
  display: grid;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-xl);
}

.related-service-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: var(--spacing-lg);
  text-align: center;
  transition: all var(--transition-fast);
  text-decoration: none;
  color: inherit;
}

.related-service-card:hover {
  border-color: var(--primary-color);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  text-decoration: none;
  color: inherit;
}

.related-service-card__icon {
  width: 40px;
  height: 40px;
  margin: 0 auto var(--spacing-md) auto;
  background: var(--primary-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-color);
  font-size: var(--font-size-lg);
}

.related-service-card__title {
  margin: 0 0 var(--spacing-sm) 0;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--primary-color);
}

.related-service-card__text {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

/* Portfolio Modal */
.portfolio-modal .modal__content {
  max-width: 900px;
  width: 95%;
}

.portfolio-modal__image {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  border-radius: var(--border-radius);
  margin-bottom: var(--spacing-lg);
}

.portfolio-modal__meta {
  display: grid;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--border-color);
}

.portfolio-modal__section h4 {
  margin: 0 0 var(--spacing-sm) 0;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--primary-color);
}

.portfolio-modal__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.portfolio-modal__tag {
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--primary-light);
  color: var(--primary-color);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  border-radius: var(--border-radius);
}

/* ===================================
   Responsive Design Updates
   =================================== */

/* Small devices (640px and up) */
@media (min-width: 640px) {
  .services-grid {
    grid-template-columns: 1fr;
  }

  .designs-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .news-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer__links {
    grid-template-columns: repeat(2, 1fr);
  }

  .company-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .pricing-table {
    grid-template-columns: 1fr;
  }
  
  .related-services__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .portfolio-modal__meta {
    grid-template-columns: 1fr 1fr;
  }
}

/* Medium devices (768px and up) */
@media (min-width: 768px) {
  .hero__title {
    font-size: var(--font-size-4xl);
  }

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

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

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

  .footer__content {
    grid-template-columns: 1fr 2fr;
  }

  .footer__brand {
    text-align: left;
  }

  .footer__social {
    justify-content: flex-start;
  }
  
  .pricing-table {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .related-services__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .footer__links {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Large devices (1024px and up) */
@media (min-width: 1024px) {
  .header__nav {
    display: block;
    position: static;
    background: none;
    border: none;
    box-shadow: none;
    max-height: none;
    overflow: visible;
  }

  .header__actions {
    display: flex;
  }

  .hamburger {
    display: none;
  }

  .nav__list {
    flex-direction: row;
    padding: 0;
  }

  .nav__item {
    width: auto;
  }

  .nav__link {
    border: none;
  }

  .companys-layout {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  .map-container {
    height: 500px;
  }
  
  .pricing-table {
    grid-template-columns: repeat(3, 1fr);
  }

  .services-overview {
    padding: var(--spacing-2xl) 0 var(--spacing-2xl) 0;
  }

  .web-designs,
  .company-locations,
  .news-column {
    padding: var(--spacing-2xl) 0;
  }
}

/* Extra large devices (1200px and up) */
@media (min-width: 1200px) {
  .container {
    padding: 0 var(--spacing-lg);
    width: 90%;
  }

  .hero__slides {
    height: 70vh;
    min-height: 500px;
  }
}

/* Print styles */
@media print {
  .header,
  .hero__prev,
  .hero__next,
  .hero__dots,
  .back-to-top,
  .modal {
    display: none !important;
  }

  .hero__slide {
    position: static;
    opacity: 1;
  }

  body {
    font-size: 12pt;
    line-height: 1.4;
  }

  a {
    text-decoration: underline;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  :root {
    --primary-color: #0000cc;
    --secondary-color: #009900;
    --text-primary: #000000;
    --text-secondary: #333333;
    --border-color: #000000;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .hero__slide {
    transition: none;
  }
}

/* Focus visible polyfill */
@supports not selector(:focus-visible) {
  .btn:focus,
  .hamburger:focus,
  .hero__prev:focus,
  .hero__next:focus,
  .hero__dot:focus,
  .lang-btn:focus,
  .back-to-top:focus,
  .modal__close:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
  }
}

/* ===================================
   Service Detail Pages
   =================================== */

.service-detail {
  padding: var(--spacing-2xl) 0;
}

.service-hero {
  display: grid;
  gap: var(--spacing-2xl);
  align-items: center;
  margin-bottom: var(--spacing-2xl);
}

.service-hero__content {
  text-align: center;
}

.service-hero__title {
  margin: 0 0 var(--spacing-md) 0;
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}

.service-hero__subtitle {
  margin: 0 0 var(--spacing-lg) 0;
  font-size: var(--font-size-lg);
  color: var(--text-secondary);
  line-height: 1.6;
}

.service-hero__features {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  justify-content: center;
}

.feature-tag {
  padding: var(--spacing-xs) var(--spacing-md);
  background: var(--primary-light);
  color: var(--primary-color);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border-radius: var(--border-radius-full);
  border: 1px solid var(--primary-color);
}

.service-hero__image {
  text-align: center;
}

.service-hero__image img {
  width: 100%;
  max-width: 500px;
  height: auto;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-lg);
}

/* Services Index Page */
.services-hero {
  padding: var(--spacing-2xl) 0;
  background: linear-gradient(135deg, var(--primary-light) 0%, var(--secondary-light) 100%);
  text-align: center;
}

.services-hero__content {
  max-width: 800px;
  margin: 0 auto;
}

.services-hero__title {
  margin: 0 0 var(--spacing-md) 0;
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}

.services-hero__subtitle {
  margin: 0;
  font-size: var(--font-size-lg);
  color: var(--text-secondary);
  line-height: 1.6;
}

.main-services {
  padding: var(--spacing-2xl) 0;
}

.services-grid {
  display: grid;
  gap: var(--spacing-2xl);
  margin-top: var(--spacing-xl);
}

.service-card {
  display: grid;
  gap: var(--spacing-xl);
  padding: var(--spacing-2xl);
  background: var(--bg-primary);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-color);
}

.service-card--featured {
  border-left: 4px solid var(--primary-color);
}

.service-card__image img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: var(--border-radius-md);
}

.service-card__title {
  margin: 0 0 var(--spacing-md) 0;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--primary-color);
}

.service-card__description {
  margin: 0 0 var(--spacing-lg) 0;
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--text-secondary);
}

.service-card__features {
  margin: 0 0 var(--spacing-lg) 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--spacing-xs);
}

.service-card__features li {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  position: relative;
  padding-left: var(--spacing-lg);
}

.service-card__features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--primary-color);
  font-weight: var(--font-weight-bold);
}

.service-card__pricing {
  margin: 0 0 var(--spacing-lg) 0;
  padding: var(--spacing-md);
  background: var(--bg-light);
  border-radius: var(--border-radius-md);
  text-align: center;
}

.price-label {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-xs);
}

.price-range {
  display: block;
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}

.service-card__actions {
  display: flex;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

.service-card__actions .btn {
  flex: 1;
  min-width: 140px;
}

.service-content {
  display: grid;
  gap: var(--spacing-2xl);
}

.service-overview h2 {
  margin: 0 0 var(--spacing-lg) 0;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--primary-color);
  text-align: center;
}

.service-overview p {
  margin: 0 0 var(--spacing-xl) 0;
  font-size: var(--font-size-lg);
  line-height: 1.7;
  text-align: center;
}

.service-highlights {
  display: grid;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-xl);
}

.highlight-card {
  background: var(--bg-primary);
  padding: var(--spacing-xl);
  border-radius: var(--border-radius-lg);
  text-align: center;
  border: 1px solid var(--border-color);
  transition: all var(--transition-fast);
}

.highlight-card:hover {
  border-color: var(--primary-color);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.highlight-card__icon {
  font-size: 2.5rem;
  margin-bottom: var(--spacing-md);
}

/* Service page: normalize icon sizes to 3rem for consistency */
.service-detail .highlight-card__icon,
.service-detail .benefit-icon,
.service-detail .benefit-icon i,
.service-detail .related-service-card__icon,
.service-detail .related-service-card__icon i,
.service-detail .benefit-icon .fas,
.service-detail .benefit-icon .fa {
  font-size: 3rem;
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Ensure emoji-based icons scale appropriately */
.service-detail .highlight-card__icon {
  font-size: 3rem; /* override earlier 2.5rem for the service-detail scope */
}

.highlight-card h3 {
  margin: 0 0 var(--spacing-sm) 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--primary-color);
}

.highlight-card p {
  margin: 0;
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Brand Elements (ブランディングサービス内のブランド要素セクション) */
.brand-elements-section {
  padding: var(--spacing-2xl) 0;
  background: linear-gradient(135deg, var(--primary-light) 0%, var(--secondary-light) 100%);
}

.brand-elements-grid {
  display: grid;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-md);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.brand-element {
  background: var(--bg-primary);
  padding: var(--spacing-lg);
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--border-color);
  text-align: center;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
  box-shadow: var(--shadow-sm);
}

.brand-element:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary-color);
}

.brand-element__icon {
  width: 88px;
  height: 88px;
  margin: 0 auto var(--spacing-md);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--primary-light);
  color: var(--primary-color);
  font-size: 1.5rem;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

.brand-element__icon .logo-sample,
.brand-element__icon .typography-sample {
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}

.brand-element h3 {
  margin: 0 0 var(--spacing-sm) 0;
  font-size: var(--font-size-lg);
  color: var(--primary-color);
}

.brand-element p {
  margin: 0 0 var(--spacing-md) 0;
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  line-height: 1.6;
}

.brand-element__features {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-md);
  text-align: left;
}

.brand-element__features li {
  position: relative;
  padding-left: 18px;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.brand-element__features li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--primary-color);
}

.brand-element__icon .color-palette {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
}

.brand-element__icon .color-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  border: 2px solid rgba(255,255,255,0.65);
}

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

@media (min-width: 1024px) {
  .brand-elements-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.process-section,
.pricing-section,
.testimonials-section {
  padding: var(--spacing-2xl) 0;
  border-top: 1px solid var(--border-light);
  
}

.pricing-section {
   background: var(--bg-light);
}

.testimonials {
  display: grid;
  gap: var(--spacing-xl);
  margin-top: var(--spacing-xl);
}

/* CTA Section */
.cta-section,
.testimonials-cta {
  padding: var(--spacing-2xl) 0;
  background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
  color: var(--text-white);
  text-align: center;
  margin-top: 40px;
}

.cta-content h2 {
  margin: 0 0 var(--spacing-md) 0;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
}

.cta-content p {
  margin: 0 0 var(--spacing-xl) 0;
  font-size: var(--font-size-lg);
  opacity: 0.9;
}

.cta-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  align-items: center;
}

/* Responsive for Service Detail Pages */
@media (min-width: 768px) {
  .service-hero {
    grid-template-columns: 1fr 1fr;
    text-align: left;
  }
  
  .service-hero__content {
    text-align: left;
  }
  
  .service-hero__features {
    justify-content: flex-start;
  }
  
  .service-highlights {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .testimonials {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .cta-buttons {
    flex-direction: row;
    justify-content: center;
  }
}

@media (min-width: 1024px) {
  .service-highlights {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ===================================
   Tools Section (for UI/UX page)
   =================================== */

.tools-section {
  padding: var(--spacing-2xl) 0;
  background: var(--bg-light);
  border-top: 1px solid var(--border-light);
}

.tools-grid {
  display: grid;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-xl);
}

.tool-card {
  background: var(--bg-primary);
  padding: var(--spacing-xl);
  border-radius: var(--border-radius-lg);
  text-align: center;
  border: 1px solid var(--border-color);
  transition: all var(--transition-fast);
}

.tool-card:hover {
  border-color: var(--primary-color);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.tool-card__icon {
  width: 60px;
  height: 60px;
  margin: 0 auto var(--spacing-md) auto;
  background: var(--primary-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tool-card__icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.tool-card h3 {
  margin: 0 0 var(--spacing-sm) 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--primary-color);
}

.tool-card p {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Portfolio Examples (original simple variant) */
.portfolio-examples {
  padding: var(--spacing-2xl) 0;
  border-top: 1px solid var(--border-light);
}

.portfolio-grid {
  display: grid;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-xl);
}

.portfolio-item {
  position: relative;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--transition-fast);
  height: 250px; /* 高さを固定 */
}

.portfolio-item:hover {
  transform: scale(1.02);
}

.portfolio-item img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 250px;
  object-fit: cover;
  z-index: 1;
}

.portfolio-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.portfolio-card:hover .portfolio-overlay {
  opacity: 1;
}

.portfolio-card:hover .portfolio-image img {
  transform: scale(1.1);
}

.portfolio-btn {
  padding: var(--spacing-sm) var(--spacing-lg);
  background: white;
  color: var(--primary-color);
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* Brand Applications (ブランド展開例) */
.applications-section {
  padding: var(--spacing-2xl) 0;
  border-top: 1px solid var(--border-light);
}

.applications-grid {
  display: grid;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-xl);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.application-item {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-md);
  text-align: center;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.application-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer; /* indicate clickability */
}

.application-item img {
  width: 100%;
  height: 220px; /* increased so images are more visible and not crushed */
  object-fit: cover;
  border-radius: calc(var(--border-radius) / 1.5);
  margin-bottom: var(--spacing-md);
}

.application-item h3 {
  margin: 0;
  font-size: var(--font-size-base);
  color: var(--primary-color);
}

.application-item:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary-color);
}

.application-item:focus {
  outline: 3px solid rgba(0,0,0,0.08);
  outline-offset: 4px;
}

@media (max-width: 768px) {
  /* Slightly reduced height on small screens to keep layout balanced */
  .application-item img { height: 160px; }
}

@media (max-width: 480px) {
  /* Mobile: let images be a bit smaller for narrow viewports */
  .application-item img { height: 140px; }
}

.portfolio-btn:hover {
  background: var(--primary-color);
  color: white;
}

.portfolio-content {
  padding: var(--spacing-lg);
}

.portfolio-category {
  display: inline-block;
  padding: 4px 12px;
  background: var(--accent-color);
  color: white;
  font-size: var(--font-size-sm);
  border-radius: 4px;
  font-weight: 500;
  margin-bottom: var(--spacing-sm);
}

.portfolio-title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  margin-bottom: var(--spacing-sm);
  color: var(--text-primary);
}

.portfolio-description {
  color: var(--text-secondary);
  margin-bottom: var(--spacing-md);
  line-height: 1.6;
}

.portfolio-tags {
  display: flex;
  gap: var(--spacing-xs);
  flex-wrap: wrap;
}

.tag {
  padding: 4px 8px;
  background: var(--bg-light);
  color: var(--text-secondary);
  font-size: 0.75rem;
  border-radius: 4px;
}

/* Load More Section */
.load-more-section {
  text-align: center;
  margin-top: var(--spacing-xl);
}

.load-more-btn {
  padding: var(--spacing-md) var(--spacing-xl);
}

/* Process Timeline */
.process-section {
  padding: var(--spacing-2xl) 0;
  background: var(--bg-light);
}

.process-grid {
  display: grid;
  gap: var(--spacing-xl);
  margin-top: var(--spacing-xl);
}

.process-step {
  text-align: left;
  padding: 1.5rem;
  background: white;
  border-radius: var(--border-radius);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}

.process-step:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.process-step:not(:last-child)::after {
  content: '↓';
  position: absolute;
  bottom: -1rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.5rem;
  color: var(--primary-color);
  background: white;
  padding: 0 0.5rem;
}

.process-step__number {
  display: inline-block;
  width: 40px;
  height: 40px;
  background: var(--primary-color);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-sm);
}

.process-step__title {
  font-size: 1.6rem;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.process-step__text {
  font-size: 1.2rem;
  color: var(--text-secondary);
  line-height: 1.5;
  padding: 18px;
}

/* -----------------------------------
   Works - 制作プロセス セクション調整
   - セクションタイトルを他のセクションと揃える
   - セクション上下に余白を追加して崩れを修正
   ----------------------------------- */
.works-process {
  /* セクションの上下余白を確保（他セクションと同等） */
  padding: var(--spacing-2xl) 0;
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.works-process__title {
  /* 他のセクションタイトルと同等に中央揃え・サイズを統一 */
  text-align: center;
  margin: 0 0 var(--spacing-md) 0;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin-bottom: 40px;
}



.process-steps {
  /* ステップは常に1列表示にする（縦並び）。
     各ステップは中央寄せで、幅は親に合わせて自動調整される */
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  /* 左寄せに変更（各ステップをコンテナの左端に揃える） */
  align-items: flex-start;
  margin-top: var(--spacing-md);
  /* ブロック自体を中央に寄せる（ステップは左揃えのまま） */
  max-width: 920px;
  width: 100%;
  
  margin-left: auto;
  margin-right: auto;
}

/* .works-process 内の各ステップをカード風に整形（高さは自動） */
.works-process .process-step {
  width: 100%;
  max-width: 920px; /* コンテナ中央で読みやすい幅に制限 */
  display: flex;
  /* 垂直に並べる（番号・タイトル・テキストを縦方向に） */
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md) 0; /* 上下の余白を確保 */
  text-align: center;
}

/* 小さな画面では番号を少し小さめにしてレイアウトが崩れないようにする */
@media (max-width: 480px) {
  .works-process .process-step__number {
    width: 40px;
    height: 40px;
    font-size: 0.95rem;
  }
}

.works-categories {
  margin-bottom: 3rem;
}

.category-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.category-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 1.5rem;
  background: white;
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius);
  text-decoration: none;
  color: var(--text-primary);
  font-weight: 600;
  transition: all 0.3s ease;
}

.category-btn:hover {
  border-color: var(--primary-color);
  background: var(--primary-color);
  color: white;
  transform: translateY(-2px);
}

.category-btn i {
  margin-right: 0.5rem;
  font-size: 1.2rem;
}

/* Service item link styles */
.service-item--link {
  text-decoration: none !important;
  color: inherit;
  display: block;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-item--link:hover {
  text-decoration: none !important;
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.service-item--link:hover .service-item__title {
  text-decoration: none !important;
  }

/* Horizontal services layout */
.services-list--horizontal {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.service-item--horizontal {
  display: flex;
  align-items: center;
  gap: 2rem;
  background: white;
  border-radius: var(--border-radius-lg);
  padding: 2rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.service-item--horizontal:nth-child(even) {
  flex-direction: row-reverse;
}

.service-item__image {
  flex: 0 0 40%;
  max-width: 400px;
}

.service-item__image img {
  width: 100%;
  height: auto;
  border-radius: var(--border-radius);
  object-fit: cover;
  aspect-ratio: 4/3;
}

.service-item--horizontal .service-item__content {
  flex: 1;
  padding: 0;
}

.service-item--horizontal .service-item__title {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: var(--primary-color);
}

.service-item--horizontal .service-item__text {
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
  color: var(--text-primary);
}

.service-item--horizontal .service-item__features {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.service-item--horizontal .service-item__features li {
  background: var(--bg-light);
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.875rem;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

/* Mobile responsiveness for horizontal layout */
@media (max-width: 768px) {
  .service-item--horizontal {
    flex-direction: column !important;
    text-align: center;
    gap: 1.5rem;
  }
  
  .service-item__image {
    flex: none;
    max-width: 100%;
  }
  
  .service-item__image img {
    max-width: 300px;
    margin: 0 auto;
  }
  
  .service-item--horizontal .service-item__features {
    justify-content: center;
  }
}

/* ===================================
   Testimonials Overview Section
   =================================== */

.testimonials-overview {
  padding: var(--spacing-xl) 0;
  /* Use the exact works hero CTA gradient and tokens for pixel-consistent appearance */
  background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
  color: var(--text-white);
  text-align: center;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

.testimonial-card {
  background: var(--bg-light);
  border-radius: var(--border-radius-lg);
  padding: 2rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.testimonial-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.testimonial-card__content {
  margin-bottom: 1.5rem;
}

.testimonial-card__text {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-primary);
  font-style: italic;
  position: relative;
}

.testimonial-card__text::before {
  content: '"';
  font-size: 2rem;
  color: var(--primary-color);
  position: absolute;
  left: -1rem;
  top: -0.5rem;
}

.testimonial-card__author {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color);
}

.testimonial-card__name {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.testimonial-card__company {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin: 0;
}

.testimonial-card__rating .star {
  color: #ffc107;
  font-size: 1.2rem;
}

/* Compatibility / additional styling for testimonials.html markup
   The HTML uses classes like .testimonial-header, .testimonial-avatar, .testimonial-info,
   .client-name, .client-company, .testimonial-rating, .testimonial-content, .testimonial-results
   Map and style them so the testimonials page is consistent and readable. */
.testimonial-header {
  display: flex;
  gap: var(--spacing-md);
  align-items: center;
  margin-bottom: 1rem;
}

.testimonial-avatar img,
.testimonial-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.testimonial-info {
  flex: 1 1 auto;
}

.client-name,
.testimonial-card__name {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 0.25rem 0;
  color: var(--text-primary);
}

.client-company,
.testimonial-card__company {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.testimonial-rating .stars,
.testimonial-card__rating .star {
  color: #ffc107;
  font-size: 1.1rem;
}

.testimonial-content {
  margin-top: 0.5rem;
}

.testimonial-text,
.testimonial-card__text {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-primary);
}

.testimonial-results {
  display: flex;
  gap: var(--spacing-md);
  margin-top: 0.75rem;
  flex-wrap: wrap;
}

.testimonial-results .result-item {
  background: rgba(0,0,0,0.03);
  padding: 0.4rem 0.6rem;
  border-radius: 8px;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

/* Make testimonial cards a bit more compact on small screens */
@media (max-width: 640px) {
  .testimonial-header { gap: var(--spacing-sm); }
  .testimonial-avatar img { width: 56px; height: 56px; }
  .testimonial-card { padding: 1.25rem; }
}

/* Make process steps full-width and stacked on small screens (mobile) */
@media (max-width: 767px) {
  .process-section .process-steps {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    display: block;
  }

  .process-section .process-step {
    display: block;
    width: 100%;
    text-align: center;
    padding: var(--spacing-lg) 1rem;
    box-sizing: border-box;
    margin-bottom: 28px; /* spacing below each step */
  }

  .process-section .process-step + .process-step {
    border-top: 1px solid var(--border-light);
  }

  .process-step__number {
    width: 56px;
    height: 56px;
    line-height: 56px;
    margin: 0 auto var(--spacing-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-bold);
    font-size: 1rem;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary-color);
  }

  .process-step__title {
    margin: 0 0 var(--spacing-sm) 0;
    font-size: var(--font-size-lg);
  }

  .process-step__text {
    margin: 0 auto;
    max-width: 720px;
    color: var(--text-secondary);
    line-height: 1.6;
    text-align: left; /* left-align paragraph text for readability */
  }
}

/* Spacing / card polish for testimonials */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px; /* larger gap between cards */
  align-items: start;
}

.testimonial-card {
  background: var(--card-bg, #ffffff);
  border-radius: 12px;
  padding: 1.75rem; /* increase inner spacing */
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  transition: transform .15s ease, box-shadow .15s ease;
}

.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}

.testimonial-content {
  padding-top: 0.75rem;
}

.testimonial-results {
  margin-top: 1rem;
  gap: 0.6rem;
}

@media (max-width: 900px) {
  .testimonials-grid {
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
  .testimonial-card { padding: 1.25rem; }
}

@media (max-width: 480px) {
  .testimonials-grid { grid-template-columns: 1fr; gap: 16px; }
  .testimonial-card { padding: 1rem; }
}

/* Align testimonials page to site-wide design tokens */
.testimonials-hero {
  padding: calc(var(--spacing-xl) + 0.5rem) 0;
  /* match works hero exactly */
  background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
  color: var(--text-white);
  text-align: center;
}

.testimonials-hero__content {
  max-width: 800px;
  margin: 0 auto;
}

.testimonials-hero__title {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: var(--spacing-md);
  color: #ffffff;
}

.testimonials-hero__subtitle {
  font-size: var(--font-size-lg);
  color: rgba(255,255,255,0.92);
  margin-bottom: var(--spacing-lg);
}

.testimonial-category {
  padding: var(--spacing-lg) 0;
  border-bottom: 1px solid var(--border-color);
}

.category-title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  padding-left: 0.25rem;
  border-left: 4px solid transparent;
}

.category-title i {
  color: var(--accent-color);
  font-size: 1.1rem;
}

.testimonial-overview-stats,
.overview-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--spacing-lg);
  max-width: 720px;
  margin: 0 auto;
  padding-bottom: var(--spacing-lg);
}

.overview-stats .stat-number {
  color: var(--accent-color);
  font-size: 2rem;
}

/* When overview appears on the testimonials page, use white numbers for contrast on the CTA gradient */
.testimonials-overview .overview-stats .stat-number,
.testimonials-hero .overview-stats .stat-number {
  color: #ffffff;
}

.testimonials-overview .overview-stats .stat-label,
.testimonials-hero .overview-stats .stat-label {
  color: rgba(255,255,255,0.92);
}

/* ===================================
   Hero Single (Non-carousel)
   =================================== */

.hero__single {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero__single .hero__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.hero__single .hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: white;
  text-shadow: -2px 0 0 #333333,
               2px 0 0 #333333,
               0 -2px 0 #333333,
               0 2px 0 #333333,
               -2px -2px 0 #333333,
               2px -2px 0 #333333,
               -2px 2px 0 #333333,
               2px 2px 0 #333333,
               0 0 8px rgba(0, 0, 0, 0.3);
  max-width: 600px;
  padding: 2rem;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .process-steps {
    max-width: 100%;
    padding: 0 1rem;
  }
  
  .category-buttons {
    grid-template-columns: 1fr;
  }
  
  .testimonials-grid {
    grid-template-columns: 1fr;
  }
  
  .hero__single {
    min-height: 50vh;
  }
  
  .hero__single .hero__content {
    padding: 1rem;
  }
}

/* ===================================
   Contact Links Styling
   =================================== */

.contact-link {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  display: inline-block;
  background: rgba(0, 191, 99, 0.1);
  border: 2px solid transparent;
}

.contact-link:hover {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 191, 99, 0.3);
}

.contact-link--phone:hover {
  background: #0066cc;
  border-color: #0052a3;
  box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
}

.contact-link--email:hover {
  background: #ff6b35;
  border-color: #e55a2b;
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
}

/* ===================================
   Mobile Bottom Bar - Four Items
   =================================== */

.mobile-bottom-bar--four-items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.mobile-bottom-bar--four-items .mobile-bottom-bar__item {
  padding: 8px 6px;
  font-size: 12px;
  min-height: 55px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.mobile-bottom-bar--four-items .mobile-bottom-bar__item:last-child {
  border-right: none;
}

.mobile-bottom-bar--four-items .mobile-bottom-bar__item i {
  font-size: 20px;
  margin-bottom: 4px;
}

.mobile-bottom-bar--four-items .mobile-bottom-bar__item span {
  font-size: 11px;
  line-height: 1.2;
}

/* アイコンカラー */
.mobile-bottom-bar--four-items .mobile-bottom-bar__item:nth-child(1) {
  color: #0066cc; /* 電話: ブルー */
}

.mobile-bottom-bar--four-items .mobile-bottom-bar__item:nth-child(2) {
  color: #ff6b35; /* メール: オレンジ */
}

.mobile-bottom-bar--four-items .mobile-bottom-bar__item:nth-child(3) {
  color: var(--primary-color); /* フォーム: グリーン */
}

.mobile-bottom-bar--four-items .mobile-bottom-bar__item:nth-child(4) {
  background: #00c300; /* LINE: ライトグリーン背景 */
  color: white; /* 白色テキスト */
}

.mobile-bottom-bar--four-items .mobile-bottom-bar__item:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

.mobile-bottom-bar--four-items .mobile-bottom-bar__item:nth-child(4):hover {
  background: #00a300; /* LINE: ホバー時は少し暗いグリーン */
  color: white;
}

@media (max-width: 480px) {
  .mobile-bottom-bar--four-items .mobile-bottom-bar__item {
    padding: 6px 4px;
    min-height: 50px;
  }
  
  .mobile-bottom-bar--four-items .mobile-bottom-bar__item i {
    font-size: 16px;
    margin-bottom: 2px;
  }
  
  .mobile-bottom-bar--four-items .mobile-bottom-bar__item span {
    font-size: 9px;
  }
}

/* PC表示では mobile-bottom-bar を非表示 */
@media (min-width: 769px) {
  .mobile-bottom-bar,
  .mobile-bottom-bar--four-items {
    display: none !important;
  }
}

/* ===================================
   reCAPTCHA Styling
   =================================== */

.recaptcha-container {
  margin: 2rem 0;
  text-align: center;
}

.g-recaptcha {
  display: inline-block;
  margin-bottom: 1rem;
}

.recaptcha-note {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin: 0.5rem 0 0 0;
  text-align: center;
}

/* ===================================
   Simple CAPTCHA Styling
   =================================== */

.simple-captcha {
  margin: 2rem 0;
  padding: 1.5rem;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border: 2px solid var(--primary-color);
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.captcha-label {
  display: block;
  margin-bottom: 1rem;
}

.captcha-question {
  display: block;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 1rem;
  padding: 0.5rem;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 8px;
}

.captcha-input {
  width: 80px;
  padding: 12px;
  font-size: 1.1rem;
  font-weight: 600;
  text-align: center;
  border: 2px solid #ddd;
  border-radius: 8px;
  transition: all 0.3s ease;
  background-color: white;
}

.captcha-input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(253, 164, 179, 0.1);
  transform: scale(1.05);
}

.captcha-input.success {
  border-color: #28a745;
  background-color: #d4edda;
  animation: successPulse 0.5s ease;
}

.captcha-input.error {
  border-color: #dc3545;
  background-color: #f8d7da;
  animation: errorShake 0.5s ease;
}

@keyframes successPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

@keyframes errorShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.captcha-refresh {
  margin-left: 15px;
  padding: 10px 15px;
  background: linear-gradient(135deg, var(--primary-color) 0%, #0056b3 100%);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.captcha-refresh:hover {
  background: linear-gradient(135deg, #0056b3 0%, var(--primary-color) 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.captcha-refresh:active {
  transform: translateY(0);
}

.captcha-feedback {
  margin-top: 1rem;
  min-height: 30px;
  font-size: 0.95rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.captcha-success {
  color: #28a745;
  animation: fadeIn 0.5s ease;
}

.captcha-error {
  color: #dc3545;
  animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 送信ボタンの無効化スタイル */
.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: #ccc;
  border-color: #ccc;
}

.btn[disabled]:hover {
  background-color: #ccc;
  border-color: #ccc;
  transform: none;
}

/* FAQ Section */
.faq-section {
  padding: var(--spacing-2xl) 0;
}

.faq-list {
  max-width: 800px;
  margin: 0 auto;
  margin-top: var(--spacing-xl);
}

.faq-item {
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  margin-bottom: var(--spacing-md);
  background: var(--bg-primary);
  overflow: hidden;
}

.faq-question {
  width: 100%;
  padding: var(--spacing-lg);
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  transition: background-color var(--transition-fast);
}

.faq-question:hover {
  background: var(--bg-light);
}

.faq-icon {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--primary-color);
  transition: transform var(--transition-fast);
}

.faq-question[aria-expanded="true"] .faq-icon,
.faq-item.active .faq-icon {
  transform: rotate(45deg);
}

.faq-answer {
  padding: 0 var(--spacing-lg);
  color: var(--text-secondary);
  line-height: 1.7;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out, padding 0.3s ease-out;
}

.faq-item.active .faq-answer,
.faq-question[aria-expanded="true"] + .faq-answer {
  padding: var(--spacing-lg);
  max-height: 500px;
  transition: max-height 0.3s ease-in, padding 0.3s ease-in;
}

/* Additional FAQ hover effects */
.faq-question:hover {
  background: var(--bg-light);
}

.faq-question:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* Office Info */
.office-info {
  padding: var(--spacing-2xl) 0;
  background: var(--bg-light);
}

.office-content {
  display: grid;
  gap: var(--spacing-2xl);
  margin-top: var(--spacing-xl);
}

.office-details h3,
.office-details h4 {
  margin: 0 0 var(--spacing-md) 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--primary-color);
}

.office-details h4 {
  margin-top: var(--spacing-xl);
  font-size: var(--font-size-base);
}

.office-address {
  margin: 0 0 var(--spacing-xl) 0;
  color: var(--text-secondary);
  font-style: normal;
  line-height: 1.6;
}

.office-hours p {
  margin: 0 0 var(--spacing-xs) 0;
  color: var(--text-secondary);
}

.emergency-note {
  font-size: var(--font-size-sm) !important;
  color: var(--text-muted) !important;
}

.office-access ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.office-access li {
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--bg-primary);
  border-radius: var(--border-radius);
  color: var(--text-secondary);
  line-height: 1.6;
}

.office-access li:last-child {
  margin-bottom: 0;
}

/* リッチなボタンのスタイル */
.cta-button-container {
    text-align: center;
    margin: 2rem 0;
    margin-bottom: 80px;
}

.cta-button {
    display: inline-block;
    padding: 1rem 2rem;
    font-size: 1.25rem;
    color: #fff;
    background-color: #ff6b35;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.cta-button:hover {
  background-color: var(--primary-hover);
  color: #fff;
  transform: scale(1.05);
}

.cta-button:active {
  background-color: var(--primary-hover);
  color: #fff;
  transform: scale(0.95);
}

/* CTA ボタンの最終上書きルール：下線を消し、文字を太字にする */
.cta-button,
.cta-button:hover,
.cta-button:focus,
.cta-button:active {
  text-decoration: none;
  font-weight: var(--font-weight-bold);
}

/* Works Page Styles */
/* ================= */

/* Works Hero */
.works-hero {
  padding: var(--spacing-2xl) 0;
  /* use CTA gradient background for works hero (option A) */
  background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
  color: var(--text-white);
  text-align: center;
}

.works-hero__content {
  max-width: 800px;
  margin: 0 auto;
}

.works-hero__title {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: var(--spacing-md);
}

.works-hero__subtitle {
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-xl);
  color: var(--text-white);
}

.works-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--spacing-lg);
  max-width: 600px;
  margin: 0 auto;
}

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

.stat-number {
  display: block;
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--accent-color); /* default accent; overridden in .works-hero below */
}

/* Apply black-outline to hero title/subtitle as well */
.works-hero__title,
.works-hero__subtitle {
  color: var(--text-white);
}

/* Override stat colors inside works hero to white for option A */
.works-hero .stat-number {
  color: var(--text-white);
}
.works-hero .stat-label {
  color: rgba(255,255,255,0.9);
}

.stat-label {
  font-size: var(--font-size-sm);
  opacity: 0.8;
}

/* Columns Hero (columns/index.html) - match Works & Testimonials CTA hero */
.columns-hero {
  padding: var(--spacing-2xl) 0;
  background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
  color: var(--text-white);
  text-align: center;
}

.columns-hero__content {
  max-width: 800px;
  margin: 0 auto;
}

.columns-hero__title {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: var(--spacing-md);
  color: var(--text-white);
}

.columns-hero__subtitle {
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-xl);
  color: rgba(255,255,255,0.92);
}

/* Category title on columns page: center and add vertical spacing */
.categories-title {
  text-align: center;
  margin: var(--spacing-lg) 0;
  /* keep visual scale but ensure comfortable spacing */
  font-weight: 600;
}

@media (min-width: 1200px) {
  .categories-title {
    margin: calc(var(--spacing-xl) * 0.75) 0;
  }
}

/* ===================================
   About / Company page adjustments
   =================================== */

/* Company Hero: match CTA gradient and layout similar to works hero */
.company-hero {
  padding: var(--spacing-2xl) 0;
  background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
  color: var(--text-white);
}

.company-hero,
.company-hero .container {
  /* Use flexbox instead of grid to avoid unexpected grid cell alignment issues
     and make it easier to center the textual content while keeping the image
     pinned to the right on large screens. Applies whether the inner .container
     exists or the markup uses .company-hero directly. */
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  align-items: center;
  justify-content: center;
}

.company-hero__content {
  max-width: 820px;
}

/* SEO Results Section styling */
.seo-results-section {
  padding: var(--spacing-xl) 0;
  border-top: 1px solid var(--border-light);
}

.results-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.results-stats .stat-item {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-md);
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.results-stats .stat-number {
  font-size: 2rem;
  font-weight: 800;
  color: var(--primary-color);
  display: block;
  margin-bottom: 6px;
}

.results-stats .stat-label {
  font-size: var(--font-size-sm);
  color: var(--muted-text);
  display: block;
  margin-bottom: 4px;
}

.results-stats .stat-description {
  font-size: 0.85rem;
  color: var(--muted-text);
  opacity: 0.9;
}

.results-chart {
  margin-top: var(--spacing-lg);
  background: linear-gradient(180deg, rgba(0,0,0,0.02), transparent);
  padding: var(--spacing-lg);
  border-radius: 10px;
}

.before-after {
  display: flex;
  gap: var(--spacing-lg);
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
}

.before-after__item {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: var(--spacing-md);
  flex: 1 1 280px;
  min-width: 220px;
}

.before-after .metrics {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: var(--spacing-md);
}

.metric {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px;
  background: rgba(0,0,0,0.02);
  border-radius: 6px;
}

.metric-label {
  font-size: 0.9rem;
  color: var(--muted-text);
}

.metric-value {
  font-weight: 700;
  color: var(--text-dark);
}

.metric-value.improved {
  color: var(--primary-color);
}

.before-after .arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--muted-text);
  padding: 0 8px;
}

@media (max-width: 768px) {
  .before-after {
    flex-direction: column;
  }
  .before-after .arrow {
    transform: rotate(90deg);
  }
}

.company-hero__title {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-md);
  color: var(--text-white);
}

.company-hero__subtitle {
  font-size: var(--font-size-lg);
  color: rgba(255,255,255,0.92);
  margin-bottom: var(--spacing-md);
}

/* Ensure company hero text (title/subtitle) is always centered */
.company-hero__content,
.company-hero__title,
.company-hero__subtitle {
  text-align: center;
}

/* Stronger specificity to avoid accidental overrides from other generic rules */
.company-hero .company-hero__content {
  justify-self: center; /* center the content block inside the grid cell */
  text-align: center !important; /* ensure center even if other rules try to left-align */
}
.company-hero .company-hero__title,
.company-hero .company-hero__subtitle {
  text-align: center !important;
}

.company-hero__image {
  display: none; /* hide by default on small screens */
}

@media (min-width: 900px) {
  .company-hero,
  .company-hero .container {
    flex-direction: row;
    align-items: center;
    justify-content: space-between; /* content on left (centered internally), image on right */
  }
  .company-hero__content {
    flex: 1 1 auto;
    max-width: 820px;
    text-align: center; /* ensure content itself is centered */
  }
  .company-hero__image {
    display: block;
    flex: 0 0 420px; /* reserve right column width */
    text-align: right;
  }
  .company-hero__image img {
    max-width: 380px;
    width: 100%;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
  }
}

/* Desktop override: center the hero content on the page while keeping the
   decorative image visually on the right. This ensures the heading sits
   in the true center of the section even when the layout reserves space
   for the image. Added as a targeted override to avoid changing mobile
   behavior. */
@media (min-width: 900px) {
  .company-hero,
  .company-hero .container {
    /* center the main content block in the section */
    justify-content: center !important;
    align-items: center;
    position: relative; /* used so the image can be positioned absolute */
  }

  /* Position the image absolutely to the right so it doesn't push the
     content off-center. Keep it hidden on small screens via earlier rules. */
  .company-hero__image {
    position: absolute;
    right: 48px;
    top: 50%;
    transform: translateY(-50%);
    display: block; /* ensure visible at desktop */
    flex: 0 0 auto; /* avoid flex from affecting layout */
    width: auto;
    max-width: 420px;
  }

  .company-hero__image img {
    max-width: 380px;
  }
}

/* Mission & Vision grid similar to services page */
.mission-vision__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--spacing-lg);
}

/* Limit horizontal width of mission/vision section and add side padding */
.mission-vision .container {
  max-width: 1100px;
  margin: 0 auto;
  padding-left: var(--spacing-md);
  padding-right: var(--spacing-md);
}

/* Add vertical spacing for mission-vision so it's not cramped */
.mission-vision {
  padding-top: var(--spacing-2xl);
  padding-bottom: var(--spacing-xl);
}

.mission-card,
.vision-card {
  background: var(--bg-light);
  padding: var(--spacing-lg);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-sm);
}

.mission-card__icon,
.vision-card__icon {
  /* Make the mission/vision emoji icon larger and centered inside a
     consistent square so it reads like a visual badge. Responsive via
     clamp() so it scales on different viewports. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 86px;
  width: 108px;
  height: 108px;
  line-height: 1;
  /* margin-bottom: var(--spacing-md); */
  border-radius: 12px;
}

@media (max-width: 900px) {
  .mission-card__icon {
    font-size: 36px;
    width: 72px;
    height: 72px;
  }
}

/* Profile content: two-column layout */
.profile-content {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--spacing-lg);
  align-items: start;
}

/* Constrain company-profile container and add horizontal padding so profile content doesn't span too wide */
.company-profile .container {
  max-width: 1100px;
  margin: 0 auto;
  padding-left: var(--spacing-md);
  padding-right: var(--spacing-md);
  padding-top: var(--spacing-lg);
  padding-bottom: var(--spacing-lg);
}

.profile-table {
  max-width: 1100px;
  width: 80%; /* widen the profile block to about 80% as requested */
  margin: 0 auto;
  padding: var(--spacing-md);
  background: var(--bg-plain, #fff);
  border-radius: var(--border-radius-sm);
  justify-self: center; /* center this block inside the grid cell */
}

.profile-table .profile-row {
  display: flex;
  gap: var(--spacing-md);
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border-color);
}

.profile-label {
  min-width: 120px;
  font-weight: 600;
}

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

@media (max-width: 900px) {
  .profile-content {
    grid-template-columns: 1fr;
  }
  .company-hero .container {
    grid-template-columns: 1fr;
  }
}

/* CEO message layout: stack image under the section heading (no side-by-side)
   The image will appear directly below the H2 and above the text content.
   Keep spacing via the existing gap variable. */
.ceo-content {
  display: grid;
  grid-template-columns: 1fr; /* single column: image then text */
  gap: var(--spacing-lg);
  align-items: start;
}

/* Center the image block and constrain its width so it doesn't span full page */
.ceo-image {
  display: flex;
  justify-content: center;
  margin: 60px 0;
}
.ceo-image img {
  max-width: 220px;
  width: 100%;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
}

@media (max-width: 700px) {
  .ceo-content {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

/* History timeline: simple stacked style */
.history-timeline {
  display: grid;
  gap: var(--spacing-md);
}
.timeline-item {
  display: flex;
  gap: var(--spacing-md);
  align-items: flex-start;
}
.timeline-year {
  font-weight: 700;
  min-width: 60px;
  color: var(--primary-color);
}

/* Enhanced timeline styling: green circular year badge on the left and
   content cards in soft gray. Responsive: on small screens items stack. */
.history-timeline {
  display: grid;
  gap: var(--spacing-md);
}
.timeline-item {
  display: flex;
  gap: var(--spacing-md);
  align-items: flex-start;
}
.timeline-year {
  /* make the year a circular green badge */
  min-width: 56px;
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #2e7d32, #1b5e20); /* green gradient */
  color: #fff;
  font-weight: 700;
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(27, 78, 32, 0.18);
  flex: 0 0 56px;
}
.timeline-content {
  background: #f5f7f6; /* soft gray/greenish neutral */
  padding: calc(var(--spacing-md) * 0.75);
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.04);
  color: var(--text-primary);
}
.timeline-content h3 {
  margin-top: 0;
}

/* Slight alternation for visual rhythm */
.history-timeline .timeline-item:nth-child(even) .timeline-content {
  background: #eef4ef; /* very light green tint */
}

@media (max-width: 700px) {
  .timeline-item {
    flex-direction: column;
    align-items: flex-start;
  }
  .timeline-year {
    margin-bottom: 8px;
  }
}

/* -------------------------------------------------
   About page: heading spacing and profile centering
   - Add 20px top margin before headings inside main about sections
   - Make profile block centered while keeping its text left-aligned
 -------------------------------------------------- */

.company-hero h1,
.company-hero h2,
.mission-vision h1,
.mission-vision h2,
.company-profile h1,
.company-profile h2,
.ceo-message h1,
.ceo-message h2,
.company-history h1,
.company-history h2,
.core-values h1,
.core-values h2,
.access-map h1,
.access-map h2 {
  margin-top: 20px;
}

/* Selected profile block: center the block container, but keep text left-aligned */
.profile-content {
  justify-items: center; /* center children in grid cells horizontally */
}

.profile-table {
  /* Keep a single authoritative rule: make the profile table wide (~80%) but
     cap its maximum width to avoid extreme stretching on very large screens. */
  max-width: 1100px;
  width: 80%;
  margin: 0 auto; /* center the block */
  text-align: left; /* ensure internal text is left-aligned */
  justify-self: center;
}

.profile-table .profile-row {
  padding: 0.6rem 0;
}


/* Filter Section */
.filter-section {
  padding: var(--spacing-xl) 0;
  background-color: var(--bg-light);
}

.filter-controls {
  text-align: center;
}

.filter-title {
  font-size: var(--font-size-xl);
  margin-bottom: var(--spacing-lg);
  color: var(--text-primary);
}

.filter-buttons {
  display: flex;
  justify-content: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.filter-btn {
  padding: var(--spacing-sm) var(--spacing-lg);
  border: 2px solid var(--border-color);
  background: white;
  color: var(--text-secondary);
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
}

.filter-btn:hover,
.filter-btn--active {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
  transform: translateY(-2px);
}

/* Portfolio Section */
.portfolio-section {
  padding: var(--spacing-2xl) 0;
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
}

/* Utility used by the works filter script */
.hidden {
  display: none !important;
  opacity: 0;
  pointer-events: none;
}

/* Simple fade-in for filtered items */
.portfolio-item {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 300ms var(--transition-normal), transform 300ms var(--transition-normal);
}

.portfolio-item.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* If the grid has exactly one visible item, keep it to a fixed width and left-align the grid.
   Use :has when available, and provide a JS-driven .one-item fallback. */
.portfolio-grid:has(.portfolio-item:not(.hidden):only-child),
.portfolio-grid.one-item {
  /* Single visible card: fixed 400px width and left-aligned */
  grid-template-columns: repeat(1, minmax(400px, 400px));
  justify-content: start; /* left-align the single column */
  padding-left: 10px; /* left margin for the block */
}

@media (max-width: 420px) {
  .portfolio-grid:has(.portfolio-item:not(.hidden):only-child),
  .portfolio-grid.one-item {
    grid-template-columns: 1fr; /* allow full width on very small screens */
    justify-content: center;
  }

/* Add horizontal margin around the single card so it doesn't touch the container edges */
.portfolio-grid.one-item .portfolio-item {
  margin-left: 10px;
  margin-right: 10px;
}
}

/* .process-step__title {
  font-size: 2rem;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
} */
/* 
.process-step__text {
  font-size: 1.5rem;
  color: var(--text-secondary);
  line-height: 1.5;
} */

.service-item--link:hover .service-item__title {
  text-decoration: none !important;
}

/* Services title styling */
.services-overview .section__title {
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0 calc(-50vw + 50%) 3rem calc(-50vw + 50%);
  position: relative;
  padding: 3rem 0;
  background: linear-gradient(135deg, 
    rgba(255, 107, 53, 0.08) 0%, 
    rgba(255, 140, 66, 0.08) 50%, 
    rgba(255, 167, 38, 0.08) 100%);
  box-shadow: 
    0 10px 30px rgba(255, 107, 53, 0.2),
    0 5px 15px rgba(255, 140, 66, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  animation: titleEntrance 1.2s ease-out forwards;
  opacity: 0;
  transform: translateY(30px);
}

/* Core Values: apply the green + gray styling similar to the history timeline
   Use card layout with a circular green icon badge above the heading. */
.core-values .values-grid {
  display: grid;
  /* allow automatic fitting up to 3 columns; on very wide screens we'll
     explicitly cap to 3 columns via media query below */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--spacing-lg);
  align-items: start;
  width: 100%;
  max-width: 1200px; /* keeps grid from growing too wide */
  margin: 0 auto;
}

/* Cap to 3 columns on larger viewports */
@media (min-width: 1100px) {
  .core-values .values-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.core-values .value-card {
  background: #f5f7f6; /* soft gray */
  padding: calc(var(--spacing-md) * 0.8);
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.04);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
}
.core-values .value-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  font-size: 44px;
  line-height: 1;
  border-radius: 50%;
  background: linear-gradient(180deg, #a9f4adcf, #3fb447c5);
  color: #fff;
  box-shadow: 0 8px 20px rgba(27, 78, 32, 0.14);
}
.core-values .value-card h3 {
  margin: 0.25rem 0 0.25rem 0;
}
.core-values .value-card p {
  margin: 0;
  color: var(--text-primary);
}

/* Slight alternation for rhythm */
.core-values .values-grid .value-card:nth-child(even) {
  background: #eef4ef;
}

@media (max-width: 700px) {
  .core-values .value-card__icon {
    width: 72px;
    height: 72px;
    font-size: 36px;
  }
}

/* Website Benefits (service index): card grid with icon badges */
.website-benefits {
  padding: var(--spacing-2xl) 0;
}
.website-benefits .section__subtitle {
  margin-bottom: var(--spacing-lg);
  color: var(--text-secondary);
  text-align: center;
}
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--spacing-lg);
  align-items: start;
  margin-top: var(--spacing-lg);
}
.benefit-card {
  background: #ffffff;
  border-radius: 12px;
  padding: calc(var(--spacing-md) * 0.9);
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}
.benefit-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #fff;
  background: linear-gradient(180deg, var(--primary-color), var(--accent-color));
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}
.benefit-title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-primary);
}
.benefit-description {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.6;
}
.benefit-example {
  margin-top: auto;
  font-size: 0.95rem;
  color: var(--text-secondary);
}

@media (max-width: 700px) {
  .benefit-icon {
    width: 56px;
    height: 56px;
    font-size: 24px;
  }
}

.services-overview .section__title::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  bottom: -2px;
  background: linear-gradient(45deg, 
    #ff6b35, 
    #ff8c42, 
    #ffa726, 
    #ff6b35);
  z-index: -1;
  animation: borderGlow 3s ease-in-out infinite;
  opacity: 0.3;
}

.services-overview .section__title::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, rgba(255, 107, 53, 0.2) 0%, transparent 70%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  animation: pulseGlow 2s ease-in-out infinite;
}

/* タイトルの表示切り替え */
.services-overview .section__title .title-mobile {
  display: none;
  color: #ffffff;
  text-shadow: 
    -1px -1px 0 #333333,
    1px -1px 0 #333333,
    -1px 1px 0 #333333,
    1px 1px 0 #333333,
    -2px 0 0 #333333,
    2px 0 0 #333333,
    0 -2px 0 #333333,
    0 2px 0 #333333,
    -2px -2px 0 #333333,
    2px -2px 0 #333333,
    -2px 2px 0 #333333,
    2px 2px 0 #333333,
    0 0 8px rgba(0, 0, 0, 0.3);
}

.services-overview .section__title .title-desktop {
  display: block;
  color: #ffffff;
  text-shadow: 
    -1px -1px 0 #333333,
    1px -1px 0 #333333,
    -1px 1px 0 #333333,
    1px 1px 0 #333333,
    -2px 0 0 #333333,
    2px 0 0 #333333,
    0 -2px 0 #333333,
    0 2px 0 #333333,
    -2px -2px 0 #333333,
    2px -2px 0 #333333,
    -2px 2px 0 #333333,
    2px 2px 0 #333333,
    0 0 8px rgba(0, 0, 0, 0.3);
}

/* アニメーション定義 */
@keyframes titleEntrance {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  50% {
    opacity: 0.8;
    transform: translateY(-5px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes borderGlow {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.6;
  }
}

@keyframes pulseGlow {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.2;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 0.4;
  }
}

/* ホバーエフェクト */
.services-overview .section__title:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 15px 35px rgba(255, 107, 53, 0.25),
    0 8px 20px rgba(255, 140, 66, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
}

.services-overview .section__title:hover::before {
  opacity: 0.5;
}

@media (max-width: 768px) {
  .services-overview .section__title {
    font-size: 1.8rem;
    line-height: 1.3;
    padding: 2rem 1rem;
    margin: 0 calc(-50vw + 50%) 2rem calc(-50vw + 50%);
    width: 100vw;
  }
  
  /* スマホでは改行版を表示 */
  .services-overview .section__title .title-desktop {
    display: none;
  }
  
  .services-overview .section__title .title-mobile {
    display: block;
  }
  
  .services-overview .section__title .title-mobile .line {
    display: block;
    line-height: 1.4;
    margin-bottom: 0.1em;
    animation: lineSlideIn 0.8s ease-out forwards;
    opacity: 0;
    transform: translateX(-20px);
  }
  
  .services-overview .section__title .title-mobile .line:nth-child(1) {
    animation-delay: 0.2s;
  }
  
  .services-overview .section__title .title-mobile .line:nth-child(2) {
    animation-delay: 0.4s;
  }
  
  .services-overview .section__title .title-mobile .line:nth-child(3) {
    animation-delay: 0.6s;
  }
  
  .services-overview .section__title .title-mobile .line:last-child {
    margin-bottom: 0;
  }
}

@keyframes lineSlideIn {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.hero__single .hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: white;
  max-width: 600px;
  padding: 2rem;
  text-shadow: -2px 0 0 #333333,
               2px 0 0 #333333,
               0 -2px 0 #333333,
               0 2px 0 #333333,
               -2px -2px 0 #333333,
               2px -2px 0 #333333,
               -2px 2px 0 #333333,
               2px 2px 0 #333333,
               0 0 8px rgba(0, 0, 0, 0.3);
}

office-access li:last-child {
  margin-bottom: 0;
}

.hero__single .hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: white;
  max-width: 600px;
  padding: 2rem;
}

.hero__single .hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: white;
  max-width: 600px;
  text-shadow: -2px 0 0 #333333,
               2px 0 0 #333333,
               0 -2px 0 #333333,
               0 2px 0 #333333,
               -2px -2px 0 #333333,
               2px -2px 0 #333333,
               -2px 2px 0 #333333,
               2px 2px 0 #333333,
               0 0 8px rgba(0, 0, 0, 0.3);
}


/* ===================================
   Fixed Contact Button (global)
   If the fixed contact button looks unstyled, add/adjust these rules.
   =================================== */
.fixed-contact-button {
  position: fixed;
  left: 16px;
  bottom: 24px;
  z-index: 1100;
  width: 320px;
  max-width: calc(100% - 40px);
  background: linear-gradient(180deg, #ffffff, #f8f8f8);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--font-family);
  color: var(--text-primary);
}

.fixed-contact-button.hidden {
  display: none !important;
}

.fixed-contact-button__close {
  position: absolute;
  top: 6px;
  right: 8px;
  background: transparent;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
}

.fixed-contact-button__header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 28px; /* space for close button */
}

.fixed-contact-button__time {
  font-weight: var(--font-weight-bold);
  color: var(--primary-color);
}

.fixed-contact-button__title {
  margin: 0;
  font-size: 1rem;
}

.fixed-contact-button__buttons {
  display: flex;
  gap: 8px;
}

.fixed-contact-button__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--primary-color);
  color: var(--text-white);
  text-decoration: none;
  border-radius: 8px;
  font-weight: var(--font-weight-medium);
}

.fixed-contact-button__item--line {
  background: #00c300;
}

.fixed-contact-button__icon {
  width: 18px;
  height: 18px;
}

.fixed-contact-button__cta {
  margin: 0;
  font-weight: var(--font-weight-semibold);
  text-align: center;
}

@media (max-width: 480px) {
  .fixed-contact-button {
    left: 12px;
    right: 12px;
    width: auto;
    bottom: 18px;
    max-width: calc(100% - 24px);
  }
}


/* ===================================
   Contact Page Styles
   =================================== */
.contact-methods {
  padding: var(--spacing-xl) 0;
  background: var(--bg-light);
}
.methods-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg);
  align-items: stretch;
}
.contact-method {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: var(--spacing-md);
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.contact-method:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}
.contact-method__icon {
  width: 72px;
  height: 72px;
  margin: 0 auto var(--spacing-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  background: linear-gradient(180deg, var(--primary-light), transparent);
  border-radius: 50%;
}
.contact-method h3 {
  margin: 0.5rem 0;
  font-size: 1.125rem;
}
.contact-link {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
}
.contact-link--email {
  color: #0069d9;
}
.contact-link--phone {
  color: var(--primary-color);
}
.method-hours {
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* Form layout */
.contact-form-section {
  padding: var(--spacing-xl) 0;
}
.form-container {
  max-width: 980px;
  margin: 0 auto;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  padding: var(--spacing-lg);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md);
}
.form-group { display: block; }
.form-group--full { grid-column: 1 / -1; }
.form-label { display: block; margin-bottom: 6px; font-weight: var(--font-weight-medium); }
.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: var(--font-size-base);
  background: white;
}
.form-textarea { min-height: 160px; resize: vertical; }
.form-help { color: var(--text-muted); font-size: 0.9rem; }

.form-submit { margin-top: var(--spacing-md); display: flex; align-items: center; gap: var(--spacing-md); }
.form-submit .btn { padding: 12px 20px; }
.submit-note { margin: 0; color: var(--text-muted); font-size: 0.9rem; }

/* Office info / map */
.office-info { padding: var(--spacing-xl) 0; }
.office-content { display: grid; grid-template-columns: 1fr 520px; gap: var(--spacing-md); align-items: start; }
.office-map { max-width: 520px; }
.office-address { font-style: normal; line-height: 1.6; }

/* Responsive */
@media (max-width: 992px) {
  .methods-grid { grid-template-columns: repeat(2, 1fr); }
  .form-grid { grid-template-columns: 1fr; }
  .office-content { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .methods-grid { grid-template-columns: 1fr; }
  .contact-method__icon { width: 56px; height: 56px; font-size: 1.5rem; }
}

/* Contact Hero - gradient like works hero */
.contact-hero {
  padding: var(--spacing-2xl) 0;
  background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
  color: var(--text-white);
}
.contact-hero__content {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.contact-hero__title {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-sm);
  color: var(--text-white);
  text-shadow: 0 6px 18px rgba(0,0,0,0.15);
}
.contact-hero__subtitle {
  font-size: var(--font-size-lg);
  color: rgba(255,255,255,0.95);
}

@media (max-width: 768px) {
  .contact-hero__title { font-size: var(--font-size-3xl); }
  .contact-hero { padding: var(--spacing-xl) 0; }
}