@charset "utf-8";

/* ==========================================
   馬渕塗工風デザイン カスタマイズCSS
   (レイアウト維持・装飾特化・微調整版)
   ========================================== */

/* ------------------------------------------
   共通設定 / タイポグラフィ
   ------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Noto+Serif+JP:wght@400;600;700&display=swap');

/* PC・タブレット用：固定ボタンを非表示 */
.mobile-fixed-buttons {
    display: none;
}

:root {
  /* 色定義 - 床サンディング統合カラーパレット */
  --color-primary: #8B6F47;      /* ウッドブラウン - メインコンセプト・差別化ポイント */
  --color-accent: #D4A574;       /* ゴールド - 重要な言葉・感情に訴える言葉 */
  --color-trust: #2D5F4F;        /* 濃いグリーン - 信頼感・CTA */
  --color-bg: #F5F1E8;           /* クリーム色 - セクション背景 */
  --color-text-dark: #3A3A3A;    /* 濃いグレー - メインテキスト */
  --color-text-light: #555555;   /* グレー - サブテキスト */
  --color-white: #ffffff;
  
  /* 強調パターン */
  --emphasis-primary: var(--color-primary);
  --emphasis-accent: var(--color-accent);
  
  /* フォント */
  --font-serif: "Noto Serif JP", serif;
  --font-sans: "Noto Sans JP", sans-serif;
  
  /* シャドウ */
  --shadow-soft: 0 10px 40px rgba(0, 0, 0, 0.08);
}

/* ------------------------------------------
   固定ヘッダー（スクロール後表示）
   ------------------------------------------ */
.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  transform: translateY(-100%);
  transition: transform 0.4s ease;
}

.fixed-header.visible {
  transform: translateY(0);
}

.fixed-header-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 18px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

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

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

.header-nav {
  display: flex;
  gap: 20px;
  flex: 1;
  justify-content: center;
  align-items: center;
}

.header-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  padding: 10px 15px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.header-nav-item:hover {
  background: #f9f9f9;
}

.header-nav-icon {
  width: 42px;
  height: 42px;
  margin-bottom: 6px;
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #faf7f2;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.header-nav-icon svg {
  width: 24px;
  height: 24px;
}

.header-nav-item:hover .header-nav-icon {
  background: var(--color-accent);
  color: white;
  transform: scale(1.05);
}

.header-nav-item:hover .header-nav-icon svg {
  color: white;
}

.header-nav-item span {
  color: var(--color-primary);
  font-weight: 600;
  font-size: 0.85rem;
  font-family: var(--font-sans);
  white-space: nowrap;
  text-align: center;
  line-height: 1.3;
}

.header-nav-item:hover span {
  color: var(--color-accent);
}

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

.header-btn {
  background: linear-gradient(135deg, #2d5f3f 0%, #1e4a2f 100%);
  color: white;
  padding: 12px 24px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.85rem;
  box-shadow: 0 4px 15px rgba(45, 95, 63, 0.3);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(45, 95, 63, 0.4);
  background: linear-gradient(135deg, #3a7350 0%, #2d5f3f 100%);
}

.header-btn-icon {
  width: 18px;
  height: 18px;
  color: white;
}

/* レスポンシブ対応（ヘッダー） */
@media (max-width: 1300px) {
  .fixed-header-container {
    padding: 15px 30px;
    gap: 20px;
  }
  
  .header-nav {
    gap: 12px;
  }
  
  .header-nav-item {
    padding: 8px 10px;
  }
  
  .header-nav-icon {
    width: 36px;
    height: 36px;
  }
  
  .header-nav-icon svg {
    width: 20px;
    height: 20px;
  }
  
  .header-nav-item span {
    font-size: 0.75rem;
  }
}

@media (max-width: 1024px) {
  .fixed-header-container {
    padding: 12px 20px;
  }
  
  .header-logo-img {
    height: 40px;
  }
  
  .header-nav {
    gap: 8px;
  }
  
  .header-nav-item {
    padding: 6px 8px;
  }
  
  .header-nav-icon {
    width: 32px;
    height: 32px;
  }
  
  .header-nav-icon svg {
    width: 18px;
    height: 18px;
  }
  
  .header-nav-item span {
    font-size: 0.7rem;
  }
  
  .header-btn {
    padding: 10px 20px;
    font-size: 0.8rem;
    gap: 6px;
  }
}

@media (max-width: 768px) {
  .fixed-header-container {
    padding: 10px 15px;
  }
  
  .header-logo-img {
    height: 35px;
  }
  
  .header-nav {
    display: none; /* スマホではナビゲーションを非表示 */
  }
  
  .header-btn {
    padding: 10px 18px;
    font-size: 0.8rem;
    gap: 6px;
  }
  
  .header-btn-icon {
    width: 16px;
    height: 16px;
  }
}

/* 全体のフォント設定 */
body {
  font-family: var(--font-sans);
  color: var(--color-primary);
  -webkit-font-smoothing: antialiased;
  background-color: #fbfbfb;
}

h1, h2, h3, h4, .serif-font, .hero-title, .section-title {
  font-family: var(--font-serif) !important;
}

/* ------------------------------------------
   ヒーローセクション (装飾のみ変更)
   ------------------------------------------ */

/* 背景の質感向上 */
.hero-overlay {
  background: linear-gradient(135deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.4) 100%) !important;
  background-image: radial-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(135deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.4) 100%) !important;
  background-size: 4px 4px, 100% 100% !important;
}

/* タイトル装飾 */
.hero-title {
  text-shadow: 0 4px 20px rgba(0,0,0,0.6);
  font-weight: 700 !important;
  letter-spacing: 0.05em;
  white-space: nowrap !important;
  font-size: clamp(3rem, 5vw, 5rem) !important;
  line-height: 1.2 !important;
  width: auto !important;
}

/* ロゴ画像用スタイル */
.hero-title-logo {
  text-shadow: none !important;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: -40px 0 -40px 0 !important;
  padding: 0 !important;
  position: relative;
  z-index: 1;
}

.hero-logo-image {
  max-width: 550px;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 4px 20px rgba(212, 165, 116, 0.6)) 
          drop-shadow(0 2px 10px rgba(255, 255, 255, 0.3))
          brightness(1.15)
          contrast(1.2);
  transform: scale(1);
}

/* アイコン画像スタイル */
.hero-btn-icon {
  width: 32px !important;
  height: 32px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-btn-icon .icon-image {
  width: 28px;
  height: 28px;
  object-fit: contain;
  filter: brightness(1) contrast(1);
}

.hero-subtitle {
  font-family: var(--font-serif) !important;
  letter-spacing: 0.3em !important;
  border-bottom: 2px solid var(--color-accent);
  display: inline-block;
  margin-bottom: 0;
  padding-bottom: 5px;
  color: white !important;
  position: relative;
  z-index: 2;
}

.hero-catchphrase {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  border-left: 6px solid var(--color-accent) !important;
  padding: 15px 25px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.2);
  color: #fff;
  margin-top: 0 !important;
  margin-bottom: 30px !important;
  position: relative;
  z-index: 2;
  display: inline-block; /* テキストの長さに合わせて幅を調整 */
}

/* 割引バッジ装飾 */
.hero-discount-badge {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  /* 位置調整の強制上書き（右サイドバー内での配置用） */
  position: relative !important;
  top: auto !important;
  right: auto !important;
  margin-bottom: -15px !important; /* 下のボタンに近づける */
  z-index: 20;
  text-align: center;
  /* ふわふわアニメーション */
  animation: badge-float 3s infinite ease-in-out;
}
@keyframes badge-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* 割引バッジ画像 */
.discount-badge-image {
  width: 100% !important;
  max-width: 100%;
  height: auto;
  display: inline-block;
  filter: drop-shadow(0 4px 15px rgba(0,0,0,0.3));
}

.discount-percent {
  font-family: "Arial Black", sans-serif !important;
  text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* CTAボタン装飾 */
.hero-btn {
  border-radius: 50px !important;
  box-shadow: 0 5px 20px rgba(0,0,0,0.3) !important;
  transition: all 0.3s ease !important;
  border: 1px solid rgba(255,255,255,0.4) !important;
  overflow: hidden;
  position: relative;
}
.hero-btn:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4) !important;
}
.hero-btn-email { background: linear-gradient(135deg, #ff8c42 0%, #f57c00 100%) !important; }
.hero-btn-line { background: #06c755 !important; }

.hero-btn::after {
  content: "";
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.3), transparent);
  transform: translateX(-100%);
  transition: transform 0.5s;
}
.hero-btn:hover::after { transform: translateX(100%); }

/* お問い合わせボックス装飾 */
.inquiry-box {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(10px);
  border-radius: 12px !important;
  box-shadow: 0 15px 40px rgba(0,0,0,0.2) !important;
  border: 1px solid rgba(255,255,255,0.8) !important;
}

.inquiry-tel {
  font-family: var(--font-serif) !important;
  color: var(--color-primary) !important;
  letter-spacing: 0.05em;
}

.inquiry-btn {
  border-radius: 6px !important;
  font-weight: 700 !important;
  transition: all 0.3s !important;
}
.inquiry-btn:hover { opacity: 0.9; transform: scale(1.02); }

/* ニュースボックス装飾 */
.hero-news-box {
  background: rgba(255, 255, 255, 0.95) !important;
  border-radius: 50px !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.15) !important;
  border: 1px solid rgba(255,255,255,0.8) !important;
  padding: 10px 25px !important; 
  transform-origin: bottom left;
  transform: scale(0.9);
  max-width: 90% !important;
  bottom: -10px !important;
  left: 30px !important;
}

.news-header {
  font-family: var(--font-serif) !important;
  color: var(--color-accent) !important;
  border-right: 1px solid #eee;
  padding-right: 15px !important;
  margin-right: 15px !important;
  font-size: 0.9rem !important;
}

.news-list {
  font-size: 0.9rem !important;
}

/* ------------------------------------------
   アイコンナビゲーション
   ------------------------------------------ */
.icon-navigation {
    background: transparent !important;
    margin-top: -40px !important;
    position: relative;
    z-index: 10;
}

.icon-nav-container {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    padding: 30px !important;
    max-width: 1160px !important;
}

.icon-nav-item {
  border-radius: 8px !important;
  background: #fff !important;
  border: none !important;
  box-shadow: none !important;
  transition: all 0.3s ease !important;
  width: 130px !important;
  min-height: 130px !important;
  height: auto !important;
  padding: 15px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}
.icon-nav-item:hover {
  transform: translateY(-5px) !important;
  background-color: #fafafa !important;
}

.icon-nav-icon {
  color: var(--color-accent) !important;
  width: 40px !important;
  height: 40px !important;
}

.icon-nav-text {
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  margin-top: 10px;
  line-height: 1.4 !important;
  text-align: center;
}

/* ------------------------------------------
   セクション共通 (馬渕塗工風)
   ------------------------------------------ */
.section-title {
  font-family: var(--font-serif) !important;
  color: var(--color-primary) !important;
  font-weight: 500 !important;
  font-size: 2.6rem !important;
  text-align: center;
  margin-bottom: 1rem !important;
  letter-spacing: 0.1em;
}

.section-subtitle {
  font-family: var(--font-serif) !important;
  font-style: italic !important;
  color: var(--color-accent) !important;
  text-align: center;
  display: block;
  margin-bottom: 2rem !important;
  font-size: 1.2rem !important;
  position: relative;
}

.sun-icon {
    display: none !important;
}

.section-title::after {
    content: "";
    display: block;
    width: 60px;
    height: 3px;
    background-color: var(--color-accent);
    margin: 20px auto 0;
}

/* ------------------------------------------
   ごあいさつ (Greeting)
   ------------------------------------------ */
.greeting-section {
  background-image: url('ark-sanding-html/bg-about.jpg'); 
  background-size: cover;
  background-attachment: fixed;
  position: relative;
  padding: 120px 0 !important;
}
.greeting-section::before {
  content: "";
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(255, 255, 255, 0.92);
}
.greeting-content, .greeting-header {
  position: relative;
  z-index: 2;
}

.greeting-text {
    font-family: var(--font-serif) !important;
    font-size: 1.1rem !important;
    line-height: 2.2 !important; /* 行間を少し詰める */
    margin-bottom: 1.5rem !important; /* 段落間を狭くする（3rem → 1.5rem） */
    text-align: center;
}

.greeting-signature {
  font-family: var(--font-serif) !important;
  font-size: 1.4rem !important;
  margin-top: 40px !important;
}

/* ------------------------------------------
   3つのポイントセクション (Points) - 縦並びアニメーション
   ------------------------------------------ */
.points-section {
    padding: 100px 0;
    background-color: #fff;
    overflow: hidden; /* アニメーションのはみ出し防止 */
}

.points-container {
    display: flex;
    flex-direction: column;
    gap: 80px;
    max-width: 1000px;
    margin: 0 auto;
}

.point-row {
    display: flex;
    align-items: center;
    gap: 60px;
}

.point-row.reverse {
    flex-direction: row-reverse;
}

/* 画像サイド */
.point-image-side {
    flex: 1;
    position: relative;
}

.point-image-side img {
    width: 100%;
    height: auto;
    min-height: 300px;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* テキストサイド */
.point-text-side {
    flex: 1;
    padding: 20px;
}

.point-number {
    font-size: 4rem;
    font-weight: 900;
    color: #f0f0f0;
    line-height: 1;
    margin-bottom: -20px;
    position: relative;
    z-index: -1;
    font-family: "Arial Black", sans-serif;
}

.point-text-side h3 {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 20px;
    border-bottom: 2px solid var(--color-accent);
    display: inline-block;
    padding-bottom: 5px;
}

.point-text-side p {
    color: #666;
    line-height: 1.8;
    font-size: 1.05rem;
}

/* アニメーション初期状態 */
.js-scroll-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 1s ease;
}

.js-scroll-right {
    opacity: 0;
    transform: translateX(50px);
    transition: all 1s ease;
}

/* アニメーション発火状態 */
.js-scroll-left.is-show,
.js-scroll-right.is-show {
    opacity: 1;
    transform: translateX(0);
}

/* 下からフェードアップアニメーション（比較セクション用） */
.js-scroll-fade-up {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s ease;
}

.js-scroll-fade-up.is-show {
    opacity: 1;
    transform: translateY(0);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .points-container {
        gap: 60px;
    }

    .point-row, .point-row.reverse {
        flex-direction: column;
        gap: 30px;
        text-align: center;
    }
    
    .point-image-side img {
        height: auto;
        min-height: 200px;
    }
    
    .point-number {
        font-size: 3rem;
        margin-bottom: -15px;
    }
}

.card-modern {
  border-radius: 4px !important;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05) !important;
  border: 1px solid #eee !important;
  background: #fff;
  padding: 40px 30px !important;
  transition: all 0.4s ease;
}
.card-modern:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.1) !important;
}

/* ------------------------------------------
   サンディングとは (About) - 2カラムレイアウト
   ------------------------------------------ */
.about-sanding-section {
    padding: 80px 0;
    background-color: #faf7f2;
    /* 背景画像設定を削除し、コンテナ内で制御するように変更 */
    position: relative;
}

.about-sanding-container {
    display: flex;
    align-items: stretch;
    min-height: 600px;
    /* 中央寄せと幅制限を追加 */
    max-width: 1000px;
    margin: 0 auto;
    /* 全体を一つの大きなカードとしてデザイン */
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.08);
    overflow: hidden;
}

/* 左側：画像カラム */
.about-image-column {
    flex: 1;
    overflow: hidden;
    /* 画像をここに設定 */
    background-image: url('images/logo/6.jpg');
    background-size: cover;
    /* 画像を右にずらす（値を小さくすると画像は右へ、大きくすると左へ動きます） */
    background-position: 17% center;
    min-height: 400px; /* スマホ表示時の高さ確保 */
}

/* 右側：テキストカラム */
.about-text-column {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
    position: relative;
    z-index: 1;
    background: #fff;
}

.about-text-card {
    /* カード内カードのスタイルを解除してシンプルに */
    background: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    max-width: 100%;
    width: 100%;
}

.about-text-card .section-subtitle {
    text-align: left;
    font-size: 1rem;
    margin-bottom: 10px;
}

.about-text-card .section-title {
    text-align: left;
    font-size: 2.2rem;
    margin-bottom: 25px;
}

.about-text-card .section-title::after {
    display: none; /* 下線を非表示 */
}

.about-description {
    color: #555;
    line-height: 1.8;
    font-size: 1rem;
    margin-bottom: 25px;
}

/* 断面図ボックス */
.sanding-diagram-box {
    background: #faf7f2;
    border: 2px solid var(--color-accent);
    border-radius: 12px;
    padding: 15px;
    margin: 25px 0;
}

.sanding-diagram-box img {
    width: 100%;
    height: auto;
    max-height: 220px;
    object-fit: contain;
    border-radius: 6px;
    margin-bottom: 10px;
    background: #fff;
}

.diagram-caption {
    text-align: center;
    font-size: 0.85rem;
    color: var(--color-accent);
    font-weight: 600;
    margin: 0;
    line-height: 1.4;
}

/* ポイントリスト */
.about-points {
    list-style: none;
    padding: 0;
    margin: 0;
}

.about-points li {
    color: #555;
    line-height: 2;
    font-size: 0.95rem;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .about-sanding-container {
        flex-direction: column;
        min-height: auto;
    }
    
    .about-image-column {
        height: 300px;
    }
    
    .about-text-column {
        padding: 30px 20px;
    }
    
    .about-text-card {
        padding: 30px 25px;
    }
    
    .about-text-card .section-title {
        font-size: 1.8rem;
    }
    
    .sanding-diagram-box img {
        max-height: 180px;
    }
}

/* ------------------------------------------
   技術力 (Technology) - 見やすく改善
   ------------------------------------------ */
/* タブナビゲーション */
.tech-tabs {
    display: flex;
    justify-content: center;
    border-bottom: 1px solid #ddd;
    margin-bottom: 40px;
    gap: 10px;
}

.tech-tab {
    background: transparent;
    border: none;
    padding: 15px 30px;
    font-family: var(--font-sans);
    font-weight: 600;
    color: #666;
    cursor: pointer;
    transition: all 0.3s ease;
    border-bottom: 3px solid transparent;
}

.tech-tab:hover {
    color: var(--color-accent);
}

.tech-tab.active {
    color: var(--color-accent);
    border-bottom: 3px solid var(--color-accent);
}

/* コンテンツパネル */
.tech-panel {
    display: none;
    animation: fadeIn 0.5s ease;
}
.tech-panel.active {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

/* テキストコンテンツ */
.tech-heading {
    font-size: 1.8rem !important;
    color: var(--color-primary);
    margin-bottom: 15px;
    border-left: 5px solid var(--color-accent);
    padding-left: 15px;
}

.tech-highlight {
    color: var(--color-accent);
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 20px;
}

.tech-description {
    line-height: 1.8;
    color: #555;
    margin-bottom: 25px;
}

/* 特徴リスト */
.tech-features {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}
.tech-features li {
    margin-bottom: 10px;
    padding-left: 25px;
    position: relative;
    font-weight: 500;
}
.tech-features li::before {
    color: var(--color-accent);
    font-weight: bold;
    margin-right: 5px;
}

/* 注意書きボックス */
.caution-box, .pricing-info {
    background-color: #fff9f0;
    border: 1px solid #ffe0b2;
    padding: 20px;
    border-radius: 4px;
    margin: 20px 0;
}
.caution-box h4, .pricing-info h4 {
    color: #d35400;
    font-size: 1rem;
    margin-bottom: 10px;
    font-weight: 700;
}
.caution-list, .pricing-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.9rem;
}

/* CTAボタン */
.tech-cta .btn-primary {
    display: inline-block;
    background-color: var(--color-accent);
    color: #fff;
    padding: 15px 40px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(212, 165, 116, 0.4);
}
.tech-cta .btn-primary:hover {
    transform: translateY(-3px);
    background-color: #c09060;
}

/* 画像エリア */
.tech-image img, .tech-image .image-placeholder {
    width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* フェードインアニメーション */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 技術力セクション全体の改善 - 左右交互レイアウト */
.technology-section {
    padding: 6rem 0 !important;
    background-color: #fff !important;
    overflow: hidden !important;
}

.technology-section .space-y-24 {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important; /* gapを0にして、margin-bottomで制御 */
}

.technology-section .flex {
    padding: 0 !important;
    display: flex !important;
    position: relative !important; /* 区切り線用 */
}

/* カード間に装飾的な区切り線を追加 */
.technology-section .space-y-24 > div:not(:last-child) {
    margin-bottom: 80px;
    position: relative;
}

.technology-section .space-y-24 > div:not(:last-child)::after {
    content: "";
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #D4A574 20%, #D4A574 80%, transparent);
    opacity: 0.6;
}

/* 装飾的なドットを追加 */
.technology-section .space-y-24 > div:not(:last-child)::before {
    content: "";
    position: absolute;
    bottom: -42px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    background: #D4A574;
    border-radius: 50%;
    z-index: 1;
}

/* 技術カードの背景数字の透明度は維持（今回削除） */

/* テキストの余白とサイズを調整 */
.technology-section h4 {
    font-size: 1.3rem !important;
    margin-bottom: 15px !important; /* 余白を少し減らす */
    line-height: 1.6 !important; /* 行間を少し詰める */
}

.technology-section p {
    font-size: 1rem !important; /* フォントサイズを少し小さく */
    line-height: 1.8 !important; /* 行間を適度に */
    margin-bottom: 20px !important; /* 下の余白を減らす */
}

/* リストの余白を調整 */
.technology-section ul {
    margin-top: 15px !important; /* 上の余白を減らす */
}

.technology-section ul li {
    padding: 6px 0 !important; /* リスト項目の余白を減らす */
    font-size: 0.95rem !important; /* フォントサイズを少し小さく */
}

/* カードの内側パディングを調整 */
.technology-section .p-10,
.technology-section .p-12 {
    padding: 40px 45px !important; /* パディングを少し増やす */
}

/* ボックスのシャドウを強化して、カードをより明確に */
.technology-section .shadow-lg {
    box-shadow: 0 15px 50px rgba(0,0,0,0.12) !important; /* シャドウを強める */
    border: 1px solid rgba(212, 165, 116, 0.15) !important; /* 薄いボーダーを追加 */
}

/* ホバー時のエフェクトを追加 */
.technology-section .shadow-lg:hover {
    box-shadow: 0 20px 60px rgba(0,0,0,0.15) !important;
    border-color: rgba(212, 165, 116, 0.3) !important;
}

/* タイトル（h3）の調整 */
.technology-section h3 {
    font-size: 1.8rem !important; /* タイトルを少し小さく */
    margin-bottom: 10px !important;
}

/* サブタイトル（英語）の調整 */
.technology-section .uppercase {
    font-size: 0.85rem !important;
    margin-bottom: 15px !important;
}

/* テキストエリアのギャップを調整 */
.technology-section .gap-12 {
    gap: 2rem !important; /* 左右のギャップを適度に */
}

.technology-section .md\:gap-20 {
    gap: 3rem !important; /* デスクトップでのギャップを適度に */
}

/* 左右交互レイアウト用の調整 */
.technology-section .md\:flex-row {
    flex-direction: row !important; /* 横並び */
}

.technology-section .md\:flex-row-reverse {
    flex-direction: row-reverse !important; /* 逆向き横並び */
}

.technology-section .md\:w-1\/2 {
    width: 50% !important;
    max-width: 50% !important;
}

/* セクション間の余白調整 */
.technology-section .mb-24 {
    margin-bottom: 3rem !important;
}

/* CTAボタンの上余白を調整 */
.technology-section .tech-cta {
    margin-top: 3rem !important;
}

.technology-section .mt-24 {
    margin-top: 3rem !important;
}

/* カード全体のスタイル */
.technology-section .relative {
    min-height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

/* タイトルカードのスタイル調整 */
.technology-section .border-l-4 {
    text-align: left !important;
    margin-bottom: 0 !important;
}

.technology-section .border-r-4 {
    text-align: right !important;
    margin-bottom: 0 !important;
}

/* テキストエリアのパディング調整 */
.technology-section .md\:pl-8 {
    padding-left: 2rem !important;
}

.technology-section .md\:pr-8 {
    padding-right: 2rem !important;
}

/* ギャップの調整 */
.technology-section .gap-12 {
    gap: 3rem !important;
}

.technology-section .md\:gap-20 {
    gap: 3rem !important;
}

/* レスポンシブ (技術力) */
@media (max-width: 768px) {
    .tech-tabs {
        flex-wrap: wrap;
    }
    .tech-tab {
        width: 45%;
        padding: 10px;
        font-size: 0.9rem;
        text-align: center;
    }
    .tech-panel.active {
        grid-template-columns: 1fr;
    }
    .tech-image {
        order: -1; /* 画像を上に */
        margin-bottom: 20px;
    }
    
    /* モバイルは縦並び */
    .technology-section .space-y-24 > div:not(:last-child) {
        margin-bottom: 60px !important;
    }
    
    /* モバイルでの区切り線を調整 */
    .technology-section .space-y-24 > div:not(:last-child)::after {
        bottom: -30px;
        width: 80px;
    }
    
    .technology-section .space-y-24 > div:not(:last-child)::before {
        bottom: -32px;
    }
    
    .technology-section .md\:flex-row,
    .technology-section .md\:flex-row-reverse {
        flex-direction: column !important;
    }
    
    .technology-section .md\:w-1\/2 {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .technology-section .p-10,
    .technology-section .p-12 {
        padding: 30px !important;
    }
    
    .technology-section .border-r-4 {
        text-align: left !important;
    }
}

/* タブレット対応 */
@media (min-width: 769px) and (max-width: 1024px) {
    .technology-section .space-y-24 > div:not(:last-child) {
        margin-bottom: 70px !important;
    }
    
    .technology-section .p-10,
    .technology-section .p-12 {
        padding: 35px !important;
    }
    
    .technology-section .gap-12,
    .technology-section .md\:gap-20 {
        gap: 2rem !important;
    }
    
    /* タブレットでの区切り線を調整 */
    .technology-section .space-y-24 > div:not(:last-child)::after {
        bottom: -35px;
        width: 90px;
    }
    
    .technology-section .space-y-24 > div:not(:last-child)::before {
        bottom: -37px;
    }
}

/* ------------------------------------------
   提供サービス (Services)
   ------------------------------------------ */
.services-grid {
    display: grid;
    gap: 40px;
}

/* メインサービスカード */
.service-card {
    background: #fff;
    border: 1px solid #eee;
    padding: 40px;
    border-radius: 4px;
    box-shadow: var(--shadow-soft);
}
.service-content h3 {
    font-size: 1.8rem;
    color: var(--color-primary);
    margin-bottom: 15px;
}
.service-price {
    font-size: 1.5rem;
    color: var(--color-accent);
    font-weight: 700;
    margin-bottom: 20px;
    font-family: var(--font-serif);
}

/* オプションカード */
.options-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 30px;
}
.option-card {
    background: #fff;
    border: 1px solid #eee;
    padding: 25px;
    border-radius: 4px;
    transition: all 0.3s ease;
}
.option-card:hover {
    border-color: var(--color-accent);
    transform: translateY(-5px);
}
.option-name {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 5px;
}
.option-price {
    color: var(--color-accent);
    font-weight: 700;
    font-size: 1rem;
}

/* その他のサービス */
.other-services {
    background: #f9f9f9;
    padding: 30px;
    border-radius: 4px;
    margin-top: 40px;
}
.service-list {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 15px;
}
.service-item {
    background: #fff;
    border: 1px solid #ddd;
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: 500;
}

/* レスポンシブ (サービス) */
@media (max-width: 768px) {
    .service-card {
        flex-direction: column;
    }
    .options-grid {
        grid-template-columns: 1fr;
    }
}

/* ------------------------------------------
   施工実績 (Works) - 美術館風ミニマルギャラリー (A案)
   ------------------------------------------ */
.works-section {
    padding: 120px 0 !important;
    background-color: #fff;
}

/* 背景画像を表示するよう修正 */
.works-bg-wrapper {
    display: block !important; 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-color: #f5f5f5;
}

.works-bg-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left center;
    mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 80%);
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 80%);
}

/* グリッドコンテナ */
.works-grid-container {
    display: grid;
    /* 5枚を美しく配置するため、3列グリッドに戻す */
    grid-template-columns: repeat(3, 1fr);
    gap: 30px; /* 少し詰めて一体感を出す */
    margin-top: 60px;
}

/* アイテム共通 */
.work-item {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: none;
    background: #f0f0f0;
    cursor: pointer;
    aspect-ratio: 4 / 3;
    display: block !important; /* 強制表示 */
}

/* item-largeの特別扱いをなくし、全て同じサイズで並べる */
.item-large {
    grid-column: auto !important;
    grid-row: auto !important;
    order: 0 !important;
}

.work-item:hover {
    transform: none; 
    box-shadow: none;
}

/* 画像エリア */
.work-thumb {
    width: 100%;
    height: 100%;
    padding-top: 0 !important; /* パディングハック解除 */
}

.work-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.2, 1, 0.3, 1);
    filter: grayscale(0%);
    position: absolute; /* 絶対配置に戻す */
    top: 0; left: 0;
}

.work-item:hover .work-thumb img {
    transform: scale(1.05);
    filter: brightness(0.8);
}

/* オーバーレイ（ホバー時のみ表示） */
.work-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.2);
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease;
}

.work-item:hover .work-overlay {
    opacity: 1;
}

/* タイトル（中央に上品に表示） */
.work-title-thumb {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    font-weight: 500;
    color: #fff;
    letter-spacing: 0.15em;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
    transform: translateY(10px);
    transition: transform 0.5s ease;
    position: static;
    width: auto;
    margin: 0;
    padding: 0;
    background: transparent;
    pointer-events: none;
    text-align: center;
}

.work-item:hover .work-title-thumb {
    transform: translateY(0);
}

/* 不要な要素を非表示 */
.work-category, .view-more {
    display: none !important;
}

/* レスポンシブ対応 */
@media (max-width: 900px) {
    .works-grid-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 600px) {
    .works-grid-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

/* モーダルウィンドウ */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.85);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-overlay.open {
    display: flex;
    opacity: 1;
}

.modal-content {
    background: #fff;
    width: 100%;
    max-width: 900px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: row;
    box-shadow: 0 25px 50px rgba(0,0,0,0.5);
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.modal-overlay.open .modal-content {
    transform: translateY(0);
}

.modal-close {
    position: absolute;
    top: 15px; right: 15px;
    background: rgba(0,0,0,0.1);
    border: none;
    width: 40px; height: 40px;
    border-radius: 50%;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: background 0.3s;
    color: #333;
}
.modal-close:hover {
    background: rgba(0,0,0,0.2);
}

/* モーダル：画像エリア */
.modal-image {
    flex: 1.2;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 400px;
}

/* モーダル：テキストエリア */
.modal-body {
    flex: 1;
    padding: 40px;
    overflow-y: auto;
    max-height: 80vh;
}

.modal-tags {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.modal-tag {
    background: #eee;
    padding: 5px 15px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #666;
}

.modal-tag.tag-accent {
    background: var(--color-accent);
    color: #fff;
}

.modal-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 20px;
    font-family: var(--font-serif);
}

.modal-desc {
    line-height: 1.8;
    color: #555;
    margin-bottom: 30px;
}

.modal-highlight {
    background: #f9f9f9;
    border: 1px solid #eee;
    padding: 20px;
    border-radius: 8px;
}

.modal-highlight h4 {
    color: var(--color-accent);
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.modal-highlight p {
    font-size: 0.95rem;
    margin-bottom: 0;
}

/* レスポンシブ対応 (Works) */
@media (max-width: 900px) {
    .works-bg-image {
        mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 70%);
        -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 70%);
    }

    .works-grid-container {
        grid-template-columns: repeat(2, 1fr); /* スマホ・タブレットは2列 */
    }
    
    .item-large {
        grid-column: span 2;
        grid-row: auto;
    }

    .modal-content {
        flex-direction: column;
        max-height: 90vh;
        overflow-y: auto;
    }
    
    .modal-image img {
        height: 250px;
        min-height: auto;
    }
    
    .modal-body {
        padding: 25px;
    }
}

@media (max-width: 600px) {
    .works-grid-container {
        grid-template-columns: 1fr; /* 小さいスマホは1列 */
    }
    
    .item-large {
        grid-column: auto;
    }
}

/* ------------------------------------------
   詳細作業工程 (Process) - ビフォーアフター付き
   ------------------------------------------ */
.process-section {
    padding: 100px 0;
    background-color: #fff;
}

/* ビフォーアフタースライダー */
.before-after-container {
    display: flex;
    gap: 20px;
    margin-bottom: 60px;
    justify-content: center;
}

.ba-item {
    flex: 1;
    max-width: 500px;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.ba-label {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    padding: 5px 15px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 0.9rem;
    z-index: 2;
}

.ba-label.after {
    background: var(--color-accent);
}

.ba-item img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.ba-item:hover img {
    transform: scale(1.05);
}

/* 工程カードグリッド */
.process-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 40px;
}

.process-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.process-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border-color: var(--color-accent);
}

.process-thumb {
    height: 200px;
    overflow: hidden;
    position: relative;
}

.process-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.process-content {
    padding: 25px;
}

.process-step-num {
    font-family: "Arial Black", sans-serif;
    font-size: 3rem;
    color: #f0f0f0;
    line-height: 1;
    position: absolute;
    top: -20px;
    right: 20px;
    z-index: 0;
}

.process-title-wrapper {
    position: relative;
    margin-bottom: 15px;
}

.process-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-primary);
    position: relative;
    z-index: 1;
}

.process-desc {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.8;
}

/* レスポンシブ対応 */
@media (max-width: 900px) {
    .process-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .before-after-container {
        flex-direction: column;
        align-items: center;
    }
    
    .ba-item {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .process-grid {
        grid-template-columns: 1fr;
    }
}

/* ------------------------------------------
   張り替えとの比較 (Comparison) - 縦並びレイアウト
   ------------------------------------------ */
.comparison-section {
    padding: 100px 0;
    background-color: #fdfbf7; /* 和紙っぽい色 */
    overflow: hidden;
}

.comparison-container {
    display: flex;
    flex-direction: column;
    gap: 80px;
    max-width: 1000px;
    margin: 0 auto;
}

.comparison-row {
    display: flex;
    align-items: center;
    gap: 60px;
}

.comparison-row.reverse {
    flex-direction: row-reverse;
}

/* 画像サイド */
.comparison-image-side {
    flex: 1;
    position: relative;
}

.comparison-image-side img {
    width: 100%;
    height: auto;
    max-height: 350px;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    background: #fff;
    padding: 20px;
}

/* テキストサイド */
.comparison-text-side {
    flex: 1;
    padding: 20px;
}

.comparison-number {
    font-size: 4rem;
    font-weight: 900;
    color: #f0f0f0;
    line-height: 1;
    margin-bottom: -20px;
    position: relative;
    z-index: -1;
    font-family: "Arial Black", sans-serif;
}

.comparison-text-side h3 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 15px;
    border-bottom: 3px solid var(--color-accent);
    display: inline-block;
    padding-bottom: 5px;
}

.comparison-lead {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--color-accent);
    margin-bottom: 15px;
}

.comparison-text-side p {
    color: #666;
    line-height: 1.8;
    font-size: 1rem;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .comparison-container {
        gap: 60px;
    }

    .comparison-row, .comparison-row.reverse {
        flex-direction: column;
        gap: 30px;
        text-align: center;
    }
    
    .comparison-image-side img {
        max-height: 250px;
    }
    
    .comparison-number {
        font-size: 3rem;
        margin-bottom: -15px;
    }
    
    .comparison-text-side h3 {
        font-size: 1.5rem;
    }
    
    .comparison-lead {
        font-size: 1.1rem;
    }
}

/* ------------------------------------------
   よくあるご質問 (FAQ)
   ------------------------------------------ */
details.bg-gray-50 {
    background-color: #fff !important;
    border: 1px solid #eee !important;
    border-radius: 4px !important;
    margin-bottom: 15px !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}
summary {
    color: var(--color-primary) !important;
    font-family: var(--font-sans) !important;
    padding: 10px 0 !important;
    position: relative;
}
summary::marker {
    color: var(--color-accent);
}

/* ------------------------------------------
   会社概要 (Company) と床材早見表のテーブル
   ------------------------------------------ */
table {
    border-collapse: collapse;
}
tr.border-b {
    border-bottom: 1px solid #eee !important;
}
td, th {
    padding: 20px !important;
    font-size: 0.95rem !important;
}
th {
    background-color: #f9f9f9 !important;
    color: var(--color-primary) !important;
    font-weight: 600 !important;
    width: 30% !important;
}

/* ホバー時も色を変えない（シンプル） */
#floor-materials tbody tr:hover {
    /* 背景色を指定しない = 親の色を継承 = 色が変わらない */
}

/* ------------------------------------------
   サンディング対応床材早見表 - 見やすく改善
   ------------------------------------------ */
#floor-materials table {
    width: 100%;
    border-collapse: collapse;
    background-color: #faf7f2; /* サイトカラーに合わせた落ち着いたベージュ */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border-radius: 8px;
    overflow: hidden;
    table-layout: fixed !important; /* テーブルの幅を固定して、列幅を確実に適用 */
}

#floor-materials thead {
    background-color: #ff8c42 !important;
}

#floor-materials thead th {
    padding: 20px !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: white !important;
    text-align: left;
    background-color: transparent !important;
}

#floor-materials thead th:nth-child(2),
#floor-materials thead th:nth-child(3) {
    text-align: center !important;
}

#floor-materials tbody tr {
    border-bottom: 1px solid #e6dfd1; /* ボーダーも少し濃いベージュに */
    transition: none;
}

/* ホバー時も色を変えない */
#floor-materials tbody tr:hover {
    /* 何も指定しない = 色が変わらない */
}

#floor-materials tbody tr td {
    background-color: transparent;
}

#floor-materials tbody tr:hover td {
    background-color: transparent;
}

#floor-materials tbody td {
    padding: 22px 24px !important; /* パディングを増やして余白を確保 */
    font-size: 1rem !important; /* フォントサイズを少し大きく */
    color: #333 !important;
    line-height: 1.6 !important; /* 行間を調整 */
    vertical-align: middle;
}

/* ヘッダーの列幅を設定 - 全ての列を改行させない */
#floor-materials thead th:nth-child(1) {
    width: 23% !important; /* 床材タイプ */
}

#floor-materials thead th:nth-child(2) {
    width: 15% !important; /* サンディングを広く（改行防止） */
    white-space: nowrap !important; /* 改行を防ぐ */
}

#floor-materials thead th:nth-child(3) {
    width: 20% !important; /* オーバーコーティングを広く（改行防止） */
    white-space: nowrap !important; /* 改行を防ぐ */
}

#floor-materials thead th:nth-child(4) {
    width: 42% !important; /* 備考 */
}

/* 床材タイプ列（1列目） */
#floor-materials tbody td:nth-child(1) {
    font-weight: 700 !important;
    color: var(--color-primary) !important;
    width: 23% !important;
}

/* サンディング列（2列目） */
#floor-materials tbody td:nth-child(2) {
    text-align: center !important;
    width: 15% !important;
    white-space: nowrap !important; /* 改行を防ぐ */
}

/* オーバーコーティング列（3列目） */
#floor-materials tbody td:nth-child(3) {
    text-align: center !important;
    width: 20% !important;
    white-space: nowrap !important; /* 改行を防ぐ */
}

/* 備考列（4列目）- 幅を広げて見やすく */
#floor-materials tbody td:nth-child(4) {
    width: 42% !important; /* 備考の幅 */
    font-size: 1rem !important; /* フォントサイズを大きく */
    color: #555 !important;
    line-height: 1.8 !important; /* 行間を広く */
    padding: 22px 40px !important; /* 左右のパディングをさらに増やす */
    word-wrap: break-word !important;
    white-space: normal !important;
}

/* 記号のサイズ調整 */
#floor-materials .text-2xl {
    font-size: 1.8rem !important;
}

/* セクション全体の余白調整 */
#floor-materials {
    padding: 100px 0 !important;
}

#floor-materials .container {
    max-width: 1200px !important;
    padding: 0 40px !important;
}

/* タイトルの余白 */
#floor-materials .text-center {
    margin-bottom: 50px !important;
}

/* 注釈の余白とスタイル */
#floor-materials .text-center.text-gray-600 {
    margin-top: 30px !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    #floor-materials .container {
        padding: 0 20px !important;
    }
    
    #floor-materials table {
        font-size: 0.9rem !important;
    }
    
    #floor-materials thead th {
        padding: 15px 10px !important;
        font-size: 0.9rem !important;
    }
    
    #floor-materials tbody td {
        padding: 15px 12px !important;
        font-size: 0.9rem !important;
    }
    
    #floor-materials tbody td:nth-child(4) {
        padding: 15px 15px !important;
    }
    
    #floor-materials .text-2xl {
        font-size: 1.5rem !important;
    }
}

/* ------------------------------------------
   床チェックセクション - 他のセクションと統一
   ------------------------------------------ */
#check .card-modern {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 35px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    margin-bottom: 30px;
}

#check .card-modern h3 {
    font-size: 1.4rem;
    color: var(--color-primary);
    margin-bottom: 25px;
    font-family: var(--font-serif);
    font-weight: 600;
    border-bottom: 2px solid #D4A574;
    padding-bottom: 12px;
}

/* ラジオボタンのスタイル */
#check label {
    display: block;
    padding: 18px 25px;
    background: #faf7f2;
    border: 2px solid #e6dfd1;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 12px;
    position: relative;
    padding-left: 55px;
}

#check label:hover {
    border-color: #D4A574;
    background: #f5f1e8;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

/* ラジオボタンのチェックマーク */
#check input[type="radio"] {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    accent-color: #D4A574;
    cursor: pointer;
}

#check input[type="radio"]:checked ~ div {
    background: transparent;
}

#check label:has(input[type="radio"]:checked) {
    background: #f5f1e8;
    border-color: #D4A574;
    border-width: 3px;
    box-shadow: 0 8px 20px rgba(212, 165, 116, 0.2);
}

#check .flex.items-center.justify-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#check .text-lg {
    font-size: 1.05rem;
    color: #333;
    font-weight: 500;
}

/* 結果インジケーターをシンプルに */
#check .text-green-600,
#check .text-yellow-600,
#check .text-red-600,
#check .text-blue-600 {
    font-size: 0.95rem;
    font-weight: 600;
    padding: 6px 15px;
    border-radius: 20px;
    background: transparent;
}

#check .text-green-600 {
    color: #2d5f4f;
}

#check .text-yellow-600 {
    color: #d35400;
}

#check .text-red-600 {
    color: #c82333;
}

#check .text-blue-600 {
    color: #2563eb;
}

/* 確認方法ボックス */
#check .card-modern[style*="f0f9ff"] {
    background: #faf7f2 !important;
    border: 2px solid #D4A574 !important;
}

#check .card-modern ul {
    list-style: none;
    padding: 0;
}

#check .card-modern ul li {
    padding: 10px 0;
    border-bottom: 1px solid #e6dfd1;
    line-height: 1.8;
    color: #555;
}

#check .card-modern ul li:last-child {
    border-bottom: none;
}

/* ボタンスタイル */
#check .btn-primary,
#check .btn-secondary {
    padding: 15px 40px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1rem;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

#check .btn-primary {
    background: linear-gradient(135deg, #D4A574 0%, #c09060 100%);
    color: white;
    box-shadow: 0 5px 15px rgba(212, 165, 116, 0.4);
}

#check .btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(212, 165, 116, 0.5);
}

#check .btn-secondary {
    background: white;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

#check .btn-secondary:hover {
    background: #faf7f2;
    transform: translateY(-3px);
}

/* チェック結果表示エリア */
.check-result {
    background: #ffffff;
    padding: 40px;
    border-radius: 12px;
    border: 3px solid #D4A574;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    animation: slideIn 0.5s ease-out;
    margin-top: 40px;
}

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

.check-result h3 {
    color: var(--color-primary);
    font-family: var(--font-serif);
    text-align: center;
    margin-bottom: 30px;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    #check .card-modern {
        padding: 25px;
    }
    
    #check label {
        padding: 15px 20px;
        padding-left: 50px;
    }
    
    #check input[type="radio"] {
        left: 15px;
        width: 18px;
        height: 18px;
    }
    
    .check-result {
        padding: 30px 20px;
    }
}

/* ------------------------------------------
   フッター (Footer)
   ------------------------------------------ */
footer {
    background-color: #222 !important;
    color: #aaa !important;
    padding: 80px 0 40px !important;
}
footer h3 {
    color: #fff !important;
    font-family: var(--font-serif) !important;
    letter-spacing: 0.1em;
    margin-bottom: 20px !important;
    border-bottom: 1px solid #444;
    padding-bottom: 10px;
    display: inline-block;
}
footer p {
    font-size: 0.9rem !important;
    line-height: 2 !important;
}

/* ------------------------------------------
   モザイクボーダー
   ------------------------------------------ */
.mosaic-border {
  height: 8px;
  background-image: linear-gradient(to right, 
    var(--color-accent) 0%, var(--color-accent) 20%, 
    #fff 20%, #fff 40%, 
    #333 40%, #333 60%, 
    #fff 60%, #fff 80%, 
    var(--color-accent) 80%, var(--color-accent) 100%);
  background-size: 80px 100%;
}

/* 削除：レスポンシブ対応は下記の詳細セクションで統一管理 */

/* ------------------------------------------
   BONAダストフリーシステム (Bona System)
   ------------------------------------------ */
.bona-system-section {
    padding: 100px 0;
    background-color: #f8f9fa; /* 薄いグレーで区分け */
    overflow: hidden;
}

.bona-content-wrapper {
    display: flex;
    align-items: center;
    gap: 60px;
    max-width: 1100px;
    margin: 0 auto;
}

/* テキストサイド */
.bona-text-side {
    flex: 1;
    padding-right: 20px;
}

.bona-lead-text {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.6;
    margin-bottom: 25px;
    color: var(--color-primary);
    font-family: var(--font-serif);
}

.text-accent {
    color: var(--color-accent);
    background: linear-gradient(transparent 70%, rgba(212, 165, 116, 0.2) 70%);
}

.bona-description {
    color: #666;
    line-height: 1.8;
    margin-bottom: 30px;
    font-size: 1rem;
}

.bona-machine-info {
    background: #fff;
    border-left: 4px solid var(--color-accent);
    padding: 15px 20px;
    margin-bottom: 25px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    display: inline-block;
}

.machine-label {
    display: block;
    font-size: 0.8rem;
    color: #999;
    margin-bottom: 5px;
    font-weight: 600;
}

.machine-name {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-primary);
    font-family: "Arial", sans-serif;
}

.video-note {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: #666;
}

/* スマホ用：動画の下に表示（PCでは非表示） */
.video-note-mobile {
    display: none;
    margin-top: 15px;
    justify-content: center;
}

.note-icon {
    color: #ff0000; /* YouTubeカラー */
    font-size: 1.2rem;
}

/* 動画サイド */
.bona-video-side {
    flex: 1.2; /* 動画を少し大きく */
    position: relative;
}

.video-frame-decoration {
    position: relative;
    z-index: 1;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
    border: 8px solid #fff;
    background: #000;
    aspect-ratio: 16 / 9;
}

.video-frame-decoration iframe {
    width: 100%;
    height: 100%;
}

/* 背景装飾（ドットや円など） */
.bona-video-side::before {
    content: "";
    position: absolute;
    top: -30px;
    right: -30px;
    width: 200px;
    height: 200px;
    background-image: radial-gradient(var(--color-accent) 20%, transparent 20%);
    background-size: 20px 20px;
    opacity: 0.2;
    z-index: 0;
}

.bona-video-side::after {
    content: "";
    position: absolute;
    bottom: -20px;
    left: -20px;
    width: 100%;
    height: 100%;
    background: var(--color-accent);
    opacity: 0.1;
    z-index: -1;
    border-radius: 12px;
}

/* レスポンシブ */
@media (max-width: 900px) {
    .bona-content-wrapper {
        flex-direction: column-reverse; /* 動画を上に */
        gap: 40px;
    }
    
    .bona-text-side {
        padding-right: 0;
        text-align: center;
    }
    
    .bona-machine-info {
        display: block;
        text-align: left;
        max-width: 300px;
        margin: 0 auto 25px;
    }

    /* PC表示時：元の位置のvideo-noteを表示、動画下のvideo-note-mobileを非表示 */
    .video-note {
        justify-content: center;
    }
    
    .video-note-mobile {
        display: none;
    }
}

/* ==========================================
   スマホ対応 - 全体的なレスポンシブデザイン
   ========================================== */

@media (max-width: 768px) {
    /* 全体のフォントサイズ調整 */
    body {
        font-size: 14px;
    }
    
    /* コンテナの余白調整 */
    .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    /* セクションタイトル */
    .section-title {
        font-size: 1.8rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    .section-subtitle {
        font-size: 1rem !important;
        margin-bottom: 1rem !important;
    }
    
    /* ヒーローセクション - スマホ対応 */
    .hero-section {
        min-height: 100vh;
        padding-bottom: 100px !important; /* 固定ボタン分の余白 */
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
    }
    
    .hero-content {
        padding: 30px 0 0 0 !important;
        flex-direction: column !important;
        gap: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        position: relative !important;
        display: flex !important;
        flex: 1 !important;
        justify-content: space-between !important;
        align-items: center !important;
        min-height: calc(100vh - 100px) !important;
    }
    
    .hero-main-title {
        order: 1;
        text-align: center;
        width: 100% !important;
        margin-bottom: 0 !important;
        padding: 0 20px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
        flex-shrink: 0 !important;
    }
    
    .hero-subtitle {
        font-size: 0.7rem !important;
        letter-spacing: 0.15em !important;
        padding-bottom: 3px !important;
        margin-bottom: 0 !important;
        display: block !important;
    }
    
    .hero-title-logo {
        margin: 5px 0 !important;
        padding: 0 !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
    }
    
    .hero-logo-image {
        max-width: 60% !important;
        width: 60% !important;
        height: auto !important;
        transform: scale(1) !important;
        margin: 0 auto !important;
    }
    
    .hero-catchphrase {
        font-size: 1.05rem !important;
        padding: 14px 20px !important;
        margin-top: 12px !important;
        margin-bottom: 0 !important;
        line-height: 1.75 !important;
        border-left: 5px solid var(--color-accent) !important;
        max-width: 90% !important;
        width: auto !important;
        display: inline-block !important;
        text-align: left !important;
        font-weight: 500 !important;
    }
    
    /* 右側セクション（5%OFFバッジのみ表示） */
    .hero-right-section {
        order: 2;
        width: 100% !important;
        max-width: 100% !important;
        position: static !important;
        display: none !important; /* スマホでは完全に非表示 */
    }
    
    /* 5%OFFバッジ - スクロール時の表示制御 */
    .hero-discount-badge {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) scale(0) !important;
        width: auto !important;
        max-width: 280px !important;
        margin: 0 !important;
        z-index: 9999 !important;
        transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.4s ease !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    .hero-discount-badge.show {
        transform: translate(-50%, -50%) scale(1) !important;
        opacity: 1 !important;
        animation: none !important; /* 既存のアニメーションを無効化 */
    }
    
    .discount-badge-image {
        width: 100% !important;
        max-width: 280px !important;
        filter: drop-shadow(0 10px 30px rgba(0,0,0,0.4)) !important;
    }
    
    /* ボタンをスマホでは非表示（固定ボタンを使用） */
    .hero-btn {
        display: none !important;
    }
    
    /* ニュースボックス */
    .hero-news-box {
        order: 3;
        position: static !important;
        width: calc(100% - 40px) !important;
        max-width: 100% !important;
        transform: scale(1) !important;
        padding: 14px 16px !important;
        border-radius: 10px !important;
        margin-top: auto !important;
        margin-bottom: 15px !important;
        margin-left: 20px !important;
        margin-right: 20px !important;
        background: rgba(255, 255, 255, 0.98) !important;
        bottom: auto !important;
        left: auto !important;
        box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
        border: 1px solid rgba(255,255,255,0.9) !important;
        flex-shrink: 0 !important;
    }
    
    /* 固定ボタンエリア（スマホ専用） */
    .mobile-fixed-buttons {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 999;
        display: flex !important;
        gap: 0;
        background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.85) 50%, rgba(0,0,0,0) 100%);
        padding: 15px 10px 20px 10px;
        box-shadow: 0 -5px 20px rgba(0,0,0,0.3);
    }
    
    .mobile-fixed-btn {
        flex: 1;
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 14px 12px !important;
        border-radius: 50px !important;
        font-weight: 700 !important;
        font-size: 0.95rem !important;
        text-decoration: none;
        transition: all 0.3s ease !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
        border: none !important;
    }
    
    .mobile-fixed-btn:first-child {
        margin-right: 5px;
    }
    
    .mobile-fixed-btn:last-child {
        margin-left: 5px;
    }
    
    .mobile-fixed-btn.email {
        background: linear-gradient(135deg, #ff8c42 0%, #f57c00 100%) !important;
        color: white !important;
    }
    
    .mobile-fixed-btn.line {
        background: #06c755 !important;
        color: white !important;
    }
    
    .mobile-fixed-btn:active {
        transform: scale(0.95) !important;
    }
    
    .mobile-fixed-btn .icon-image {
        width: 20px;
        height: 20px;
        object-fit: contain;
    }
    
    .news-header {
        font-size: 0.8rem !important;
        padding: 0 !important;
        margin: 0 0 12px 0 !important;
        border: none !important;
        border-bottom: 2px solid var(--color-accent) !important;
        padding-bottom: 8px !important;
        white-space: nowrap !important;
        color: var(--color-accent) !important;
        font-weight: 700 !important;
        display: block !important;
        text-align: left !important;
    }
    
    .news-list {
        font-size: 0.75rem !important;
        max-height: none !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    .news-item {
        padding: 6px 0 !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 10px !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }
    
    .news-item:last-child {
        border-bottom: none !important;
    }
    
    .news-date {
        font-size: 0.7rem !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        color: #ff8c42 !important;
        font-weight: 700 !important;
        min-width: 75px !important;
    }
    
    .news-text {
        font-size: 0.75rem !important;
        line-height: 1.6 !important;
        flex: 1 !important;
        color: #444 !important;
    }
    
    .news-icon {
        display: inline !important;
        margin-right: 5px !important;
    }
    
    /* アイコンナビゲーション - スマホ対応 */
    .icon-navigation {
        margin-top: -20px !important;
        padding: 0 10px !important;
    }
    
    .icon-nav-container {
        padding: 20px 10px !important;
        max-width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 10px !important;
        border-radius: 8px;
    }
    
    .icon-nav-item {
        width: 100% !important;
        min-height: auto !important;
        height: auto !important;
        padding: 12px 5px !important;
    }
    
    .icon-nav-icon {
        width: 32px !important;
        height: 32px !important;
        margin-bottom: 5px !important;
    }
    
    .icon-nav-icon svg {
        width: 18px !important;
        height: 18px !important;
    }
    
    .icon-nav-text {
        font-size: 0.65rem !important;
        line-height: 1.3 !important;
        margin-top: 5px !important;
    }
    
    /* ごあいさつセクション */
    .greeting-section {
        padding: 60px 0 !important;
        background-attachment: scroll !important;
    }
    
    .greeting-text {
        font-size: 0.95rem !important;
        line-height: 1.9 !important;
        margin-bottom: 1.2rem !important;
        text-align: left !important;
    }
    
    .greeting-signature {
        font-size: 1.1rem !important;
        margin-top: 30px !important;
        text-align: right !important;
    }
    
    /* 3つのポイントセクション */
    .points-section {
        padding: 60px 0 !important;
    }
    
    .point-text-side h3 {
        font-size: 1.4rem !important;
        line-height: 1.4 !important;
    }
    
    .point-text-side p {
        font-size: 0.95rem !important;
        line-height: 1.7 !important;
    }
    
    /* サンディングとはセクション */
    .about-sanding-section {
        padding: 60px 0 !important;
    }
    
    .about-sanding-container {
        border-radius: 12px !important;
        margin: 0 10px !important;
    }
    
    .about-image-column {
        min-height: 250px !important;
    }
    
    .about-text-column {
        padding: 30px 20px !important;
    }
    
    .about-text-card .section-title {
        font-size: 1.6rem !important;
        margin-bottom: 20px !important;
    }
    
    .about-description {
        font-size: 0.95rem !important;
        line-height: 1.7 !important;
    }
    
    /* BONAシステムセクション */
    .bona-system-section {
        padding: 60px 0 !important;
    }
    
    .bona-lead-text {
        font-size: 1.4rem !important;
        line-height: 1.5 !important;
        text-align: center !important;
    }
    
    .bona-description {
        font-size: 0.95rem !important;
        text-align: left !important;
    }
    
    .video-frame-decoration {
        border: 4px solid #fff !important;
    }
    
    /* スマホ表示時：元の位置のvideo-noteを非表示、動画下のvideo-note-mobileを表示 */
    .bona-text-side .video-note {
        display: none !important;
    }
    
    .bona-video-side .video-note-mobile {
        display: flex !important;
        justify-content: center;
        margin-top: 15px;
    }
    
    /* 施工実績セクション */
    .works-section {
        padding: 60px 0 !important;
    }
    
    .text-overlay {
        padding: 20px !important;
        max-width: 100% !important;
    }
    
    .text-overlay h2 {
        font-size: 1.8rem !important;
    }
    
    .text-overlay p {
        font-size: 0.95rem !important;
    }
    
    /* 工程セクション */
    .process-section {
        padding: 60px 0 !important;
    }
    
    .process-thumb {
        height: 150px !important;
    }
    
    .process-content {
        padding: 20px !important;
    }
    
    .process-step-num {
        font-size: 2.5rem !important;
        top: -15px !important;
        right: 15px !important;
    }
    
    .process-title {
        font-size: 1rem !important;
    }
    
    .process-desc {
        font-size: 0.85rem !important;
        line-height: 1.6 !important;
    }
    
    /* 比較セクション */
    .comparison-section {
        padding: 60px 0 !important;
    }
    
    .comparison-text-side h3 {
        font-size: 1.5rem !important;
    }
    
    .comparison-lead {
        font-size: 1.1rem !important;
    }
    
    /* 床チェックセクション */
    #check {
        padding: 60px 0 !important;
    }
    
    #check .card-modern h3 {
        font-size: 1.2rem !important;
    }
    
    #check .text-lg {
        font-size: 0.95rem !important;
    }
    
    /* サービスセクション */
    .services-section {
        padding: 60px 0 !important;
    }
    
    .service-card {
        flex-direction: column !important;
        padding: 25px !important;
    }
    
    .service-image,
    .service-content {
        flex: 1 !important;
    }
    
    .service-content h3 {
        font-size: 1.5rem !important;
    }
    
    .service-price {
        font-size: 1.3rem !important;
    }
    
    .service-description {
        font-size: 0.95rem !important;
    }
    
    /* 技術力セクション */
    .technology-section {
        padding: 60px 0 !important;
    }
    
    .technology-section h4 {
        font-size: 1.1rem !important;
    }
    
    .technology-section p {
        font-size: 0.9rem !important;
    }
    
    /* 床材早見表 */
    #floor-materials {
        padding: 60px 0 !important;
    }
    
    #floor-materials .overflow-x-auto {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    #floor-materials table {
        min-width: 600px !important;
        font-size: 0.85rem !important;
    }
    
    /* 施工の流れ */
    #flow {
        padding: 60px 0 !important;
    }
    
    #flow .grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
    
    #flow .w-20 {
        width: 60px !important;
        height: 60px !important;
        font-size: 1.8rem !important;
    }
    
    /* FAQセクション */
    #faq {
        padding: 60px 0 !important;
    }
    
    #faq details {
        padding: 20px !important;
    }
    
    #faq summary {
        font-size: 0.95rem !important;
    }
    
    #faq p {
        font-size: 0.9rem !important;
    }
    
    /* ニュースセクション */
    #news {
        padding: 60px 0 !important;
    }
    
    #news .space-y-6 > div {
        padding: 20px !important;
    }
    
    #news h3 {
        font-size: 1.1rem !important;
    }
    
    #news p {
        font-size: 0.9rem !important;
    }
    
    /* 代表挨拶セクション */
    #greeting {
        padding: 60px 0 !important;
    }
    
    #greeting .grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
    
    /* スマホ表示時：会社紹介画像を横幅いっぱいに、縦幅を小さく */
    #greeting img {
        width: 100% !important;
        height: auto !important;
        max-height: 350px !important;
        object-fit: cover !important;
    }
    
    #greeting .image-placeholder {
        height: 400px !important;
    }
    
    #greeting h3 {
        font-size: 1.5rem !important;
    }
    
    #greeting p {
        font-size: 0.95rem !important;
    }
    
    /* 会社概要セクション */
    #company {
        padding: 60px 0 !important;
    }
    
    #company table {
        display: block !important;
        overflow-x: auto !important;
    }
    
    #company th,
    #company td {
        padding: 15px 12px !important;
        font-size: 0.9rem !important;
    }
    
    #company th {
        width: 35% !important;
    }
    
    #company .flex-wrap {
        gap: 8px !important;
    }
    
    #company .flex-wrap span {
        font-size: 0.85rem !important;
        padding: 6px 12px !important;
    }
    
    /* お問い合わせセクション */
    #contact {
        padding: 60px 0 !important;
    }
    
    #contact form {
        padding: 25px 20px !important;
    }
    
    #contact h3 {
        font-size: 1.3rem !important;
        margin-bottom: 20px !important;
    }
    
    #contact label {
        font-size: 0.9rem !important;
        margin-bottom: 8px !important;
    }
    
    #contact input,
    #contact select,
    #contact textarea {
        font-size: 0.95rem !important;
        padding: 12px 15px !important;
    }
    
    #contact .grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    #contact button[type="submit"] {
        width: 100% !important;
        padding: 15px 30px !important;
        font-size: 1rem !important;
    }
    
    #contact .space-y-2 label {
        font-size: 0.9rem !important;
    }
    
    /* CTAセクション */
    #cta {
        padding: 60px 0 !important;
    }
    
    #cta .text-overlay {
        padding: 30px 20px !important;
    }
    
    #cta h2 {
        font-size: 1.8rem !important;
    }
    
    #cta p {
        font-size: 0.95rem !important;
    }
    
    #cta .flex {
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    #cta button {
        width: 100% !important;
        padding: 15px 30px !important;
    }
    
    /* フッター */
    footer {
        padding: 50px 0 30px !important;
    }
    
    footer .grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }
    
    footer h3 {
        font-size: 1.2rem !important;
    }
    
    footer p {
        font-size: 0.85rem !important;
        line-height: 1.8 !important;
    }
    
    /* 波線装飾 */
    .wave-divider {
        height: 40px !important;
    }
    
    /* モザイクボーダー */
    .mosaic-border {
        height: 6px !important;
    }
    
    /* ボタン全般 */
    .btn-primary,
    .btn-secondary {
        width: 100% !important;
        padding: 15px 30px !important;
        font-size: 1rem !important;
    }
    
    /* 画像プレースホルダー */
    .image-placeholder {
        height: 300px !important;
    }
    
    .placeholder-content h3 {
        font-size: 1rem !important;
    }
    
    .placeholder-content p {
        font-size: 0.85rem !important;
    }
}

/* さらに小さいスマホ用（375px以下） */
@media (max-width: 480px) {
    .icon-nav-container {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }
    
    .icon-nav-text {
        font-size: 0.6rem !important;
    }
    
    .section-title {
        font-size: 1.5rem !important;
    }
    
    .hero-btn-text {
        font-size: 0.9rem !important;
    }
    
    .point-text-side h3,
    .comparison-text-side h3 {
        font-size: 1.3rem !important;
    }
    
    /* ヒーローセクション - 超小型スマホ用 */
    .hero-logo-image {
        max-width: 65% !important;
        width: 65% !important;
    }
    
    .hero-subtitle {
        font-size: 0.65rem !important;
    }
    
    .hero-catchphrase {
        font-size: 0.9rem !important;
        padding: 12px 16px !important;
        line-height: 1.65 !important;
    }
    
    .hero-news-box {
        padding: 12px 14px !important;
        margin-top: auto !important;
        margin-bottom: 12px !important;
        margin-left: 15px !important;
        margin-right: 15px !important;
        width: calc(100% - 30px) !important;
    }
    
    .news-header {
        font-size: 0.75rem !important;
        margin-bottom: 10px !important;
        padding-bottom: 7px !important;
    }
    
    .news-date {
        font-size: 0.65rem !important;
        min-width: 70px !important;
    }
    
    .news-text {
        font-size: 0.7rem !important;
    }
    
    .mobile-fixed-btn {
        font-size: 0.85rem !important;
        padding: 12px 10px !important;
    }
}