:root {
  /* コーポレートカラー */
  --color-primary: #003f91; /* メインカラー（フレイムブルー） */
  --color-accent: #ff4500; /* アクセントカラー（オレンジグロー） */
  --color-secondary: #0074d9; /* サブカラー（スカイブルー） */
  --color-background: #e6f7ff; /* ニュートラルカラー（ミストブルー） */
  --color-text: #001f3f; /* テキストカラー（ディープネイビー） */
  --color-shadow: rgba(
    0,
    63,
    145,
    0.2
  ); /* シャドウカラー（ブルーフレイムシャドウ） */

  /* フォントサイズ */
  --font-small: 0.875rem;
  --font-base: 1rem;
  --font-large: 1.25rem;
  --font-xlarge: 2rem;

  /* スペーシング */
  --spacing-small: 10px;
  --spacing-base: 20px;
  --spacing-large: 40px;
}

/* Google Fontsから読み込む */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap");

/* 全体のリセットとベース */
body {
  font-family: "Noto Sans JP", Arial, sans-serif; /* メインフォントをNoto Sans JPに変更 */
  line-height: 1.6;
  margin: 0;
  padding: 0;
  background-color: #fdfdfd; /* 真っ白に近い柔らかい白 */
  color: var(--color-text);
}

.page-thank-you,
.page-template-page-thank-you-contact,
.page-template-page-thank-you-ebook {
  background-color: #f8f9fa;
}

.page-thank-you #site-main,
.page-template-page-thank-you-contact #site-main,
.page-template-page-thank-you-ebook #site-main {
  padding: 80px 20px 96px;
}

.page-thank-you .thank-you-card,
.page-template-page-thank-you-contact .thank-you-card,
.page-template-page-thank-you-ebook .thank-you-card {
  max-width: 840px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 63, 145, 0.08);
  padding: 48px;
}

.page-thank-you .thank-you-hero h1,
.page-template-page-thank-you-contact .thank-you-hero h1,
.page-template-page-thank-you-ebook .thank-you-hero h1 {
  font-size: 2rem;
  margin-bottom: var(--spacing-small);
}

.page-thank-you .thank-you-hero p,
.page-template-page-thank-you-contact .thank-you-hero p,
.page-template-page-thank-you-ebook .thank-you-hero p {
  margin-bottom: var(--spacing-small);
}

.page-thank-you .thank-you-note,
.page-template-page-thank-you-contact .thank-you-note,
.page-template-page-thank-you-ebook .thank-you-note {
  font-size: var(--font-small);
  color: var(--color-text);
}

.page-thank-you .thank-you-steps,
.page-template-page-thank-you-contact .thank-you-steps,
.page-template-page-thank-you-ebook .thank-you-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-base);
  margin: var(--spacing-large) 0;
}

.page-thank-you .thank-you-step,
.page-template-page-thank-you-contact .thank-you-step,
.page-template-page-thank-you-ebook .thank-you-step {
  background-color: var(--color-background);
  border-radius: var(--spacing-small);
  padding: var(--spacing-base);
  text-align: left;
}

.page-thank-you .thank-you-step strong,
.page-template-page-thank-you-contact .thank-you-step strong,
.page-template-page-thank-you-ebook .thank-you-step strong {
  display: block;
  margin-bottom: var(--spacing-small);
  color: var(--color-primary);
}

.page-thank-you .thank-you-cta,
.page-template-page-thank-you-contact .thank-you-cta,
.page-template-page-thank-you-ebook .thank-you-cta {
  display: flex;
  gap: var(--spacing-small);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--spacing-base);
}

.page-thank-you .thank-you-cta .button-primary,
.page-template-page-thank-you-contact .thank-you-cta .button-primary,
.page-template-page-thank-you-ebook .thank-you-cta .button-primary {
  padding: 12px 24px;
}

.page-thank-you .thank-you-cta-note,
.page-template-page-thank-you-contact .thank-you-cta-note,
.page-template-page-thank-you-ebook .thank-you-cta-note {
  font-size: var(--font-small);
  color: var(--color-text);
  text-align: center;
}

.page-thank-you .thank-you-links,
.page-template-page-thank-you-contact .thank-you-links,
.page-template-page-thank-you-ebook .thank-you-links {
  margin-top: var(--spacing-base);
}

.page-thank-you .thank-you-links a,
.page-template-page-thank-you-contact .thank-you-links a,
.page-template-page-thank-you-ebook .thank-you-links a {
  color: var(--color-primary);
}

@media screen and (max-width: 768px) {
  .page-thank-you #site-main,
  .page-template-page-thank-you-contact #site-main,
  .page-template-page-thank-you-ebook #site-main {
    padding: 64px 16px 80px;
  }

  .page-thank-you .thank-you-card,
  .page-template-page-thank-you-contact .thank-you-card,
  .page-template-page-thank-you-ebook .thank-you-card {
    padding: 32px 20px;
  }

  .page-thank-you .thank-you-steps,
  .page-template-page-thank-you-contact .thank-you-steps,
  .page-template-page-thank-you-ebook .thank-you-steps {
    grid-template-columns: 1fr;
  }

  .page-thank-you .thank-you-cta,
  .page-template-page-thank-you-contact .thank-you-cta,
  .page-template-page-thank-you-ebook .thank-you-cta {
    flex-direction: column;
  }
}

h1,
h2,
h3,
h4 {
  margin: var(--spacing-small);
  color: var(--color-primary);
  font-family: "Noto Sans JP", Arial, sans-serif; /* 見出しも同様に変更 */
  font-weight: 700; /* 見出しに太字を適用 */
}

a {
  color: var(--color-accent);
  text-decoration: none;
}

a:hover {
  color: var(--color-secondary);
}

a:focus-visible,
button:focus-visible,
.button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* パンくずリスト */
.breadcrumb-container {
  background-color: #fff !important;
  padding: 10px 20px;
  text-align: left;
}

.breadcrumb {
  font-size: 14px;
  display: block;
  max-width: 1200px;
  margin: 0 auto;
}

.breadcrumb ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px;
}

.breadcrumb li {
  display: inline;
}

.breadcrumb li::after {
  content: "›";
  margin-left: 8px;
  color: #999;
}

.breadcrumb li:last-child::after {
  content: "";
}

.breadcrumb a {
  text-decoration: none;
  color: var(--color-primary);
  transition: color 0.3s ease;
}

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

/* 共通ボタンスタイル */
.button {
  display: inline-block;
  padding: var(--spacing-small) var(--spacing-base); /* ボタンの余白 */
  font-size: var(--font-base); /* フォントサイズ */
  border-radius: var(--spacing-small); /* 柔らかい角丸 */
  text-align: center; /* テキストを中央揃え */
  text-decoration: none; /* 下線を削除 */
  transition: background-color 0.3s ease, color 0.3s ease; /* スムーズなアニメーション */
  cursor: pointer;
}

/* プライマリーボタン */
.button-primary {
  background-color: var(--color-primary); /* メインカラー */
  color: var(--color-background); /* 白っぽい文字色 */
}

.button-primary:hover {
  background-color: var(--color-accent); /* ホバー時にアクセントカラー */
  color: var(--color-background); /* 白っぽい文字色 */
}

/* セカンダリーボタン */
.button-secondary {
  background-color: transparent; /* 背景色を透明に */
  color: var(--color-primary); /* メインカラーの文字色 */
  border: 2px solid var(--color-primary); /* 枠線をメインカラーに */
}

.button-secondary:hover {
  background-color: var(--color-primary); /* ホバー時に背景色をメインカラーに */
  color: var(--color-background); /* 白っぽい文字色 */
}

/* グリッドスタイル */
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4列表示 */
  gap: var(--spacing-base); /* カード間の余白 */
  padding: 0 var(--spacing-base); /* 左右の余白を設定 */
  margin: 0 auto; /* 中央揃え */
  max-width: 1200px; /* 親要素の幅を制限 */
  box-sizing: border-box; /* 幅計算を正確に */
}
/* 共通グリッドカードスタイル */
.grid-card {
  display: block; /* 全体をリンクにする */
  text-align: center;
  background: var(--color-background); /* 背景色を白っぽい色に設定 */
  padding: var(--spacing-base);
  border-radius: var(--spacing-small); /* 角丸を統一 */
  box-shadow: 0 2px 5px var(--color-shadow); /* 軽い影を追加 */
  transition: transform 0.3s ease, box-shadow 0.3s ease,
    background-color 0.3s ease;
  text-decoration: none; /* アンダーラインを削除 */
}

.grid-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* ホバー時の強調された影 */
  background-color: var(--color-primary); /* ホバー時に背景色をメインカラーに */
  color: var(--color-background); /* ホバー時に文字色を白っぽい色に */
}

.grid-card img {
  width: 100%;
  max-width: 400px; /* 画像サイズの最大幅を設定 */
  height: auto;
  border-radius: var(--spacing-small); /* 画像にも角丸を適用 */
  margin: 0 auto var(--spacing-small); /* センター揃え */
  display: block;
  transition: transform 0.3s ease; /* ホバー時のアニメーションを追加 */
}

.grid-card:hover img {
  transform: scale(1.05); /* ホバー時に画像を拡大 */
}

.grid-card h3 {
  font-size: var(--font-large); /* 見出しサイズを統一 */
  color: var(--color-primary); /* メインカラーを適用 */
  margin-bottom: var(--spacing-small);
}

.grid-card .blog-category {
  display: inline-block;
  font-size: var(--font-small);
  color: var(--color-secondary);
  margin-bottom: var(--spacing-small);
}

.grid-card:hover h3 {
  color: var(--color-background); /* ホバー時に文字色を白っぽい色に */
}

.grid-card p {
  font-size: var(--font-base); /* 段落のフォントサイズを統一 */
  color: var(--color-text); /* テキストを濃いグレーに */
  line-height: 1.6;
  margin: 0 auto;
  max-width: 300px; /* テキストの幅を制限 */
}

.grid-card:hover p {
  color: var(--color-background); /* ホバー時に文字色を白っぽい色に */
}

@media screen and (max-width: 480px) {
  .grid {
    grid-template-columns: 1fr; /* 1列表示 */
    gap: var(--spacing-small); /* 要素間の余白をさらに縮小 */
    padding: 0 var(--spacing-small); /* 左右の余白を調整 */
  }

  .grid-section {
    padding: var(--spacing-small); /* 親要素の余白を縮小 */
  }

  .grid-card {
    max-width: 100%; /* 幅を画面幅にフィットさせる */
  }
}

/* セクションの基本スタイル */
.section {
  padding: var(--spacing-large) var(--spacing-base); /* 内側の余白 */
  background-color: var(--color-background); /* 背景色 */
  margin: var(--spacing-large) auto; /* セクション間の余白を中央寄せで統一 */
  max-width: 1200px; /* セクション幅を統一 */
  width: 100%; /* 画面幅に合わせて調整 */
  box-sizing: border-box; /* 余白を含めた幅計算 */
  box-shadow: 0 2px 5px var(--color-shadow); /* セクションの影 */
  border-top: 5px solid var(--color-accent); /* アクセントカラーの上線 */
}

/* 最初と最後のセクションに例外を適用 */
.section:first-of-type {
  margin-top: 0; /* 最初のセクションの上部マージンを削除 */
}

.section:last-of-type {
  margin-bottom: 0; /* 最後のセクションの下部マージンを削除 */
}

@media screen and (max-width: 768px) {
  .section {
    margin: var(--spacing-base) auto;
    padding: var(--spacing-base) var(--spacing-small);
  }
}

/* セクションタイトルのスタイル */
.section-title {
  font-size: var(--font-large); /* タイトルのフォントサイズ */
  border-bottom: 2px solid var(--color-primary); /* アンダーラインにアクセントカラー */
  margin-top: var(--spacing-base); /* タイトル上の余白 */
  margin-bottom: var(--spacing-base); /* タイトル下の余白 */
  padding-bottom: var(--spacing-small); /* アンダーラインとの間隔 */
}

/* セクションヘッダー全体 */
.section-header {
  max-width: 1200px;
  display: flex;
  align-items: center;
  margin: var(--spacing-base) var(--spacing-small);
  justify-content: space-between;
}

/* 「もっと見る」リンクのスタイル */
.more-link,
.section-header .more-link {
  font-size: var(--font-small); /* リンクフォントサイズ */
  color: var(--color-primary); /* 見出しの色に合わせる */
  text-decoration: none;
  transition: color 0.3s ease;
}

.more-link:hover,
.section-header .more-link:hover {
  text-decoration: underline;
  color: var(--color-text); /* ホバー時に濃いテキスト色 */
}

.container {
  max-width: 1200px;
  margin: auto;
}

.page-template-privacy-policy .container {
  padding: 0 var(--spacing-base);
}

/* カード */
.card {
  background-color: var(--color-background); /* 背景色を白っぽい色に変更 */
  border-radius: 8px;
  box-shadow: 0 2px 5px var(--color-shadow);
  padding: var(--spacing-base);
  transition: transform 0.3s ease, box-shadow 0.3s ease,
    background-color 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px var(--color-shadow);
  background-color: var(--color-primary); /* ホバー時に見出し色を背景に適用 */
  color: var(--color-background); /* ホバー時に文字色を背景色に反転 */
}

.card img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: var(--spacing-small);
  transition: transform 0.3s ease;
}

.card:hover img {
  transform: scale(1.05); /* ホバー時に画像を拡大して動きを追加 */
}

/* 全体のヘッダー */
#site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: #fff; /* 背景色を白に変更 */
  color: var(--color-text); /* 文字色を濃いグレーに変更 */
  padding: var(--spacing-base);
  box-shadow: 0 2px 5px var(--color-shadow); /* シャドウを維持 */
}

#site-header a {
  color: var(--color-primary); /* リンクの文字色を見出しの色に変更 */
  text-decoration: none;
  transition: color 0.3s ease; /* スムーズな色変更 */
}

#site-header a:hover {
  color: var(--color-accent); /* ホバー時にアクセントカラー */
}

/* ヘッダーのプライマリーボタン */
#site-header .button-primary {
  background-color: var(--color-primary); /* メインカラー */
  color: var(--color-background); /* 白っぽい文字色 */
  border: 0.5px solid var(--color-secondary); /* 枠線をメインカラーに */
}

#site-header .button-primary:hover {
  background-color: var(--color-accent); /* ホバー時にアクセントカラー */
  color: var(--color-background); /* 白っぽい文字色 */
}

/* ヘッダーのセカンダリーボタン */
#site-header .button-secondary {
  background-color: transparent; /* 背景色を透明に */
  color: var(--color-primary); /* メインカラーの文字色 */
  border: 2px solid var(--color-primary); /* 枠線をメインカラーに */
}

#site-header .button-secondary:hover {
  background-color: var(--color-primary); /* ホバー時に背景色をメインカラーに */
  color: var(--color-background); /* 白っぽい文字色 */
}

/* ヘッダーの .container に余白を追加 */
/* ヘッダー限定の .container 修正 */
#site-header .header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.single-work #site-header,
.single-work #site-footer {
  width: 100%;
  box-sizing: border-box;
}

/* PC版メニュー */
.desktop-menu {
  flex-grow: 1;
  display: flex;
  justify-content: center; /* メニューを中央揃え */
}

.desktop-menu .menu {
  display: flex;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.desktop-menu .menu li a {
  text-decoration: none;
  font-size: 16px;
  color: var(--color-primary); /* メニュー文字色を見出しの色に変更 */
  transition: color 0.3s ease;
}

.desktop-menu .menu li a:hover {
  color: var(--color-accent); /* ホバー時にアクセントカラー */
}

/* ボタン部分 */
.header-buttons {
  display: flex;
  gap: 10px;
}

.header-buttons a {
  text-decoration: none;
  padding: 10px 15px;
  font-size: 14px;
  border-radius: 5px;
  text-align: center;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* モバイルメニュー */
#menu-toggle {
  display: none; /* PCでは非表示 */
  background: none;
  border: none;
  font-size: var(--font-large); /* 統一したフォントサイズ */
  cursor: pointer;
  color: var(--color-primary); /* メインカラーを使用 */
  transition: color 0.3s ease;
}

#menu-toggle:hover {
  color: var(--color-text); /* ホバー時に濃いテキスト色 */
}

.mobile-buttons {
  display: none; /* PCでは非表示 */
}

.mobile-buttons a {
  display: block;
  text-align: center;
  font-size: var(--font-base); /* フォントサイズを統一 */
  text-decoration: none;
  padding: var(--spacing-small) 0; /* 上下の余白 */
  color: var(--color-primary); /* メインカラー */
  border: 2px solid var(--color-primary); /* メインカラーの枠線 */
  border-radius: var(--spacing-small); /* ボタンの角丸 */
  background-color: var(--color-background); /* 背景色を白っぽい色に */
  transition: background-color 0.3s ease, color 0.3s ease;
}

.mobile-buttons a:hover {
  background-color: var(--color-primary); /* ホバー時に背景をメインカラーに */
  color: var(--color-background); /* テキスト色を白っぽい色に変更 */
}

/* モバイルメニュー全体 */
.mobile-menu {
  display: none; /* 初期状態では非表示 */
  flex-direction: column;
  gap: var(--spacing-small); /* スペーシング変数を使用 */
  background-color: var(--color-background); /* 背景色を白っぽい色に変更 */
  padding: var(--spacing-base); /* 標準的なスペーシング */
  box-shadow: 0 2px 5px var(--color-shadow); /* シャドウカラー */
  border-radius: var(--spacing-small); /* 角丸 */
  transition: transform 0.3s ease, opacity 0.3s ease; /* アニメーションの追加 */
}

.mobile-menu.open {
  display: flex; /* メニューが開いた状態で表示 */
}

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

.mobile-menu .menu li a {
  display: block;
  padding: var(--spacing-small) var(--spacing-base); /* 上下と左右の余白を設定 */
  text-decoration: none;
  color: var(--color-primary); /* メインカラーを使用 */
  border-bottom: 1px solid var(--color-shadow); /* ボーダーにシャドウカラー */
  transition: background-color 0.3s ease, color 0.3s ease;
}

.mobile-menu .menu li a:hover {
  background-color: var(--color-primary); /* ホバー時に背景色をメインカラーに */
  color: var(--color-background); /* テキスト色を白っぽい色に */
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
  .desktop-menu {
    display: none; /* モバイルでは非表示 */
  }

  #menu-toggle {
    display: block; /* ハンバーガーメニューを表示 */
    background: none;
    border: none;
    font-size: var(--font-large); /* フォントサイズを調整 */
    color: var(--color-primary); /* メインカラーを使用 */
    cursor: pointer;
    transition: color 0.3s ease; /* ホバー時の滑らかな色変更 */
  }

  #menu-toggle:hover {
    color: var(--color-text); /* ホバー時に濃いテキスト色 */
  }

  .header-buttons {
    display: none; /* モバイルでは非表示 */
  }

  .mobile-menu {
    display: flex; /* モバイルメニューを表示 */
    flex-direction: column; /* 縦方向に配置 */
    gap: var(--spacing-small); /* 要素間のスペーシング */
    background-color: var(--color-background); /* 背景色を白っぽい色 */
    padding: var(--spacing-base); /* スペーシングを適用 */
    border-radius: var(--spacing-small); /* 角丸を適用 */
    box-shadow: 0 2px 5px var(--color-shadow); /* シャドウを追加 */
  }
}

/* モバイルメニューアイコン */
#menu-toggle {
  background: none;
  border: none;
  font-size: var(--font-large); /* 大きなアイコンサイズ */
  cursor: pointer;
  display: block;
  color: var(--color-primary); /* メインカラーを適用 */
  transition: color 0.3s ease; /* スムーズなホバー効果 */
}

#menu-toggle:hover {
  color: var(--color-text); /* ホバー時に濃いテキスト色 */
}

/* モバイルメニュー全体 */
.mobile-menu {
  display: none; /* デフォルトでは非表示 */
  flex-direction: column;
  background-color: var(--color-background); /* 背景色を白っぽい色に変更 */
  padding: var(--spacing-base);
  box-shadow: 0 2px 5px var(--color-shadow); /* シャドウに統一感を持たせる */
  border-radius: var(--spacing-small); /* メニュー全体に角丸を追加 */
}

.mobile-menu.open {
  display: flex; /* メニューが開いている場合のみ表示 */
}

/* メニュー項目 */
.mobile-menu .menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-menu .menu li a {
  display: block;
  padding: var(--spacing-small) var(--spacing-base); /* 上下と左右の余白を設定 */
  text-decoration: none;
  color: var(--color-primary); /* メインカラーを適用 */
  border-bottom: 1px solid var(--color-shadow); /* 項目間の仕切り線をシャドウカラーで統一 */
  transition: background-color 0.3s ease, color 0.3s ease; /* ホバー効果 */
}

.mobile-menu .menu li a:hover {
  background-color: var(--color-primary); /* ホバー時に背景色をメインカラーに */
  color: var(--color-background); /* ホバー時の文字色を白っぽい色に */
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
  .desktop-menu {
    display: none;
  }

  .mobile-buttons {
    display: flex;
  }
}

/* ハンバーガーメニューボタン（統一されたスタイル） */
#menu-toggle {
  display: none; /* PCでは非表示 */
  background: none;
  border: none;
  font-size: var(--font-large); /* 大きなアイコンサイズ */
  cursor: pointer;
  color: var(--color-primary); /* メインカラーに変更 */
  transition: color 0.3s ease;
}

@media screen and (max-width: 768px) {
  #menu-toggle {
    display: block; /* モバイルで表示 */
  }

  #menu-toggle:hover {
    color: var(--color-text); /* ホバー時に濃いテキスト色 */
  }
}

/* モバイル専用ボタン（統一されたスタイル） */
@media screen and (max-width: 768px) {
  .mobile-buttons {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-small);
  }
}

/* 初期状態（デフォルトで非表示に設定） */
.mobile-buttons,
#menu-toggle {
  display: none; /* PCでは非表示 */
}

/* モバイル表示時のみ表示 */
@media screen and (max-width: 768px) {
  .mobile-buttons {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-small);
  }

  #menu-toggle {
    display: block;
  }
}

/* モバイル固定ヘッダー */
@media screen and (max-width: 768px) {
  #site-header {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: #fff; /* 背景色を白に変更 */
    box-shadow: 0 2px 5px var(--color-shadow);
    padding: 0;
  }

  #site-header .header-container {
    display: flex;
    align-items: center;
    width: 90%;
    margin-top: auto;
    padding: 0;
  }

  .mobile-buttons {
    display: flex;
    justify-content: space-between;
    gap: 0; /* ボタン間の余白をゼロ */
    width: 100%;
    padding: 0; /* 上下左右の余白をゼロ */
    margin: 0;
    background-color: var(--color-background); /* 背景色を白っぽい色に変更 */
  }

  .mobile-buttons a {
    flex: 1; /* 画面幅を2分割 */
    text-align: center;
    font-size: var(--font-small); /* ボタンの文字サイズ */
    padding: var(--spacing-small); /* ボタン内の余白 */
    text-decoration: none;
    border-radius: 0; /* 角丸を無効化 */
    border: 2px solid var(--color-primary); /* 枠線をメインカラーに統一 */
    transition: background-color 0.3s ease, color 0.3s ease;
  }

  .mobile-button-left {
    background-color: var(--color-background); /* 背景色を白っぽい色に */
    color: var(--color-primary); /* メインカラーを文字色に */
    border-right: none; /* 左ボタンの右枠線を削除 */
  }

  .mobile-button-left:hover {
    background-color: var(
      --color-primary
    ); /* ホバー時に背景色をメインカラーに */
    color: var(--color-background); /* ホバー時に文字色を白っぽい色に */
  }

  .mobile-button-right {
    background-color: var(--color-primary); /* 初期背景色をメインカラーに */
    color: var(--color-background); /* 初期文字色を白っぽい色に */
    border-left: none; /* 右ボタンの左枠線を削除 */
  }

  .mobile-button-right:hover {
    background-color: var(--color-accent); /* ホバー時にアクセントカラーに */
    color: var(--color-background); /* ホバー時の文字色を白っぽい色に */
  }
}

@media screen and (max-width: 768px) {
  .mobile-menu {
    display: none; /* トグル時のみ表示 */
  }

  .mobile-menu.open {
    display: flex;
  }
}

/* フッター全体 */
#site-footer {
  background-color: #fff; /* 背景色を白に変更 */
  color: var(--color-text); /* 文字色を濃い色に変更 */
  padding: var(--spacing-large) 0; /* 上下余白を広めに */
  border-top: 1px solid var(--color-shadow); /* 上部に薄い境界線を追加 */
}

/* フッターのコンテナ */
.footer-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-base); /* 左右余白 */
  gap: var(--spacing-base); /* 要素間の余白 */
  flex-wrap: wrap; /* 要素が画面幅に収まらない場合は折り返し */
}

/* ロゴ */
.footer-logo img {
  width: 150px; /* ロゴのサイズを調整 */
  height: auto; /* 縦横比を維持 */
}

/* リンク */
#site-footer a {
  color: var(--color-primary); /* リンクの文字色をメインカラーに変更 */
  text-decoration: none;
  transition: color 0.3s ease;
}

#site-footer a:hover {
  color: var(--color-accent); /* ホバー時にアクセントカラー */
}

/* フッターメニュー全体 */
.footer-navigation {
  text-align: center;
  margin-top: 20px;
  flex: 1;
}

/* メニューリストのスタイル */
.footer-navigation .footer-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px; /* 各カテゴリの間隔を広げる */
}

/* 親カテゴリ */
.footer-navigation .footer-menu > li {
  font-size: 16px;
  position: relative;
  text-align: left; /* 左寄せ */
}

/* 子リスト */
.footer-navigation .footer-menu li ul {
  list-style: none;
  padding: 0;
  margin-top: 5px;
  margin-left: 15px; /* インデントを追加 */
}

.footer-navigation .footer-menu li ul li {
  font-weight: normal;
  font-size: 14px;
}

/* 子リストのリンク */
.footer-navigation .footer-menu li ul li a {
  text-decoration: none;
  color: var(--color-primary);
  transition: color 0.3s ease;
}

.footer-navigation .footer-menu li ul li a:hover {
  color: var(--color-accent);
}

/* モバイル対応 */
@media screen and (max-width: 768px) {
  .footer-navigation .footer-menu {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-small) var(--spacing-base);
  }

  .footer-navigation .footer-menu > li {
    text-align: left;
  }

  .footer-navigation .footer-menu li ul {
    margin-left: 0;
    text-align: left;
  }
}

/* SNSアイコン */
.footer-social {
  display: flex;
  gap: var(--spacing-base); /* アイコン間の余白 */
}

.footer-social a img {
  width: 28px; /* アイコンサイズを調整 */
  height: 28px;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.footer-social a img:hover {
  transform: scale(1.2); /* ホバー時に少し拡大 */
  filter: brightness(1.3); /* 明るさを強調 */
}

.home #site-main .services,
.home #site-main .work,
.home #site-main .news-section {
  padding: calc(var(--spacing-large) * 2) 0;
}

@media screen and (max-width: 768px) {
  .home #site-main .services,
  .home #site-main .work,
  .home #site-main .news-section {
    padding: calc(var(--spacing-large) * 1.5) 0;
  }
}

/* コピーライト */
.footer-copyright {
  margin-top: var(--spacing-large); /* 上部余白を調整 */
  font-size: 14px; /* フォントサイズを調整 */
  color: var(--color-text); /* テキスト色を濃いグレーに変更 */
  text-align: center;
  line-height: 1.6;
  border-top: 1px solid var(--color-shadow); /* 上部に薄い境界線を追加 */
  padding-top: var(--spacing-base); /* 境界線と内容にスペースを追加 */
}

/* モバイル対応 */
@media screen and (max-width: 768px) {
  .footer-container {
    flex-direction: column; /* 縦方向に並べる */
    align-items: flex-start; /* 左揃え */
    gap: var(--spacing-small); /* 要素間の余白 */
  }

  .footer-logo {
    margin-bottom: var(--spacing-small); /* 下部余白を調整 */
  }

  .footer-navigation {
    width: 100%;
    text-align: left;
  }

  .footer-menu {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-small) var(--spacing-base); /* メニュー項目間の余白 */
    text-align: left;
  }

  .footer-menu a {
    font-size: 14px; /* モバイルで小さめのフォントサイズ */
    color: var(--color-primary); /* メインカラーを使用 */
  }

  .footer-menu a:hover {
    color: var(--color-accent); /* ホバー時にアクセントカラー */
  }

  .footer-social {
    margin-top: var(--spacing-small); /* 上部余白を追加 */
    justify-content: flex-start; /* 左揃え */
    gap: var(--spacing-small); /* アイコン間の余白 */
  }

  .footer-social a img {
    width: 24px;
    height: 24px;
  }

  .footer-copyright {
    font-size: 12px; /* 小さめのフォントサイズ */
    text-align: center; /* テキストを中央揃え */
    margin-top: var(--spacing-small); /* 上部余白を追加 */
  }
}

/* ヒーローセクション */
.hero {
  background: url("images/top_hero_background_1920x1080.png") no-repeat center
    center/cover;
  padding: var(--spacing-large) var(--spacing-base);
  text-align: center;
  color: var(--color-text); /* テキスト色を濃い色に変更 */
  position: relative;
  overflow: hidden;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
}

.hero-logo {
  display: block;
  margin: 0 auto var(--spacing-base); /* ロゴ下に適度な余白を設定 */
  width: 500px; /* 幅を少し小さく調整 */
  height: auto;
}

.hero h1 {
  font-size: var(--font-xlarge);
  color: var(--color-primary); /* メインカラーを使用 */
  margin-bottom: var(--spacing-base);
  text-shadow: 0 2px 4px var(--color-shadow); /* 軽い影を追加 */
}

.hero-buttons {
  display: flex;
  gap: var(--spacing-small);
  justify-content: center;
  margin: var(--spacing-large) auto 0;
}

.hero-buttons a:hover {
  background-color: var(--color-accent); /* ホバー時にアクセントカラー */
  color: var(--color-background); /* 文字色を白っぽい色に維持 */
}

@media screen and (max-width: 768px) {
  .hero-logo {
    width: 200px; /* モバイル版の幅を調整 */
    margin-bottom: var(--spacing-small); /* 余白を追加 */
  }
  .hero h1 {
    font-size: var(--font-large); /* 見出しのフォントサイズを小さく調整 */
    color: var(--color-primary); /* メインカラーを使用 */
  }
  .hero-buttons .button-primary {
    font-size: var(--font-small); /* ボタンフォントサイズを小さめに設定 */
    padding: var(--spacing-small); /* ボタン内の余白を調整 */
    width: 100%; /* モバイルでのフル幅表示 */
    text-align: center; /* ボタンテキストを中央揃え */
  }
}

/* 事業内容セクション */
.service-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* デフォルトは4列 */
  gap: var(--spacing-base); /* カード間の余白 */
  padding: 0 var(--spacing-base); /* 左右に余白を設定 */
  margin: 0 auto; /* 中央揃え */
  max-width: 1200px; /* 親要素の幅を制限 */
  box-sizing: border-box; /* 幅計算を正確に */
}

.service-item {
  background: var(--color-background); /* 背景色を白っぽい色に設定 */
  padding: var(--spacing-base);
  border-radius: var(--spacing-small); /* 角丸 */
  box-shadow: 0 2px 5px var(--color-shadow); /* 軽い影 */
  text-align: center;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden; /* 画像や内容がはみ出ないように */
}

.service-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px var(--color-shadow); /* ホバー時の強調された影 */
  background-color: var(--color-primary); /* ホバー時に背景色をメインカラーに */
  color: var(--color-background); /* ホバー時に文字色を白っぽい色に */
}

.service-item img {
  width: 100%;
  height: auto;
  aspect-ratio: 4/3; /* 画像の比率を固定 */
  border-radius: var(--spacing-small); /* 画像にも角丸を適用 */
  margin-bottom: var(--spacing-small);
  object-fit: cover; /* 画像をトリミングせず中央でフィット */
  transition: transform 0.3s ease; /* ホバー時に画像を動かす */
}

.service-item:hover img {
  transform: scale(1.05); /* ホバー時に画像を拡大 */
}

.service-item h3 {
  font-size: var(--font-large); /* 見出しサイズ */
  color: var(--color-primary); /* メインカラー */
  margin-bottom: var(--spacing-small);
  font-weight: bold; /* 見出しを強調 */
}

.service-item:hover h3 {
  color: var(--color-background); /* ホバー時に文字色を白っぽい色に */
}

.service-item p {
  font-size: var(--font-base); /* 段落のフォントサイズ */
  color: var(--color-text); /* テキストを濃いグレーに */
  line-height: 1.6;
  margin: 0; /* 不要な余白を削除 */
}

.service-item:hover p {
  color: var(--color-background); /* ホバー時に文字色を白っぽい色に */
}

.section-description {
  font-size: var(--font-base);
  color: var(--color-text);
  text-align: center;
  margin: var(--spacing-base) var(--spacing-small);
  max-width: 1200px;
  line-height: 1.6;
}

/* レスポンシブ対応 */
@media screen and (max-width: 1024px) {
  .service-list {
    grid-template-columns: repeat(3, 1fr); /* タブレットで3列表示 */
    gap: var(--spacing-base); /* カード間の余白を維持 */
  }
}

@media screen and (max-width: 768px) {
  .service-list {
    grid-template-columns: repeat(2, 1fr); /* モバイルで2列表示 */
    gap: var(--spacing-small); /* カード間の余白を縮小 */
    padding: 0 var(--spacing-small); /* 左右の余白を調整 */
  }
}

@media screen and (max-width: 480px) {
  .service-list {
    grid-template-columns: 1fr; /* モバイルで1列表示 */
    gap: var(--spacing-small); /* カード間の余白を縮小 */
    padding: 0 var(--spacing-small); /* 左右の余白を調整 */
  }
}

/* 実績紹介セクション */
.work-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* デフォルトは3列 */
  gap: var(--spacing-base); /* カード間の余白 */
  max-width: 1200px; /* 親要素の幅を制限 */
  margin: 0 auto; /* 中央揃え */
  padding: 0 var(--spacing-base); /* 左右に余白を設定 */
  box-sizing: border-box; /* 幅計算を正確に */
}

.work-item {
  background: var(--color-background); /* 背景色を白っぽい色に設定 */
  padding: var(--spacing-base);
  border-radius: var(--spacing-small); /* 角丸 */
  box-shadow: 0 2px 5px var(--color-shadow); /* 軽い影 */
  text-align: center;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease,
    background-color 0.3s ease;
}

.work-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* ホバー時の強調された影 */
  background-color: var(--color-primary); /* ホバー時に背景色をメインカラーに */
  color: var(--color-background); /* ホバー時に文字色を白っぽい色に */
}

.work-item img {
  width: 100%;
  height: auto;
  border-radius: var(--spacing-small); /* 画像にも角丸を適用 */
  margin-bottom: var(--spacing-small);
  transition: transform 0.3s ease; /* 画像にホバー効果を追加 */
}

.work-item:hover img {
  transform: scale(1.05); /* ホバー時に画像を少し拡大 */
}

.work-item h3 {
  font-size: var(--font-large); /* 見出しサイズ */
  color: var(--color-primary); /* メインカラー */
  margin-bottom: var(--spacing-small);
}

.work-item:hover h3 {
  color: var(--color-background); /* ホバー時に文字色を白っぽい色に */
}

.work-item p {
  font-size: var(--font-base); /* 段落のフォントサイズ */
  color: var(--color-text); /* テキストを濃いグレーに */
  line-height: 1.6;
}

.work-item:hover p {
  color: var(--color-background); /* ホバー時に文字色を白っぽい色に */
}

/* レスポンシブデザイン */
@media screen and (max-width: 1024px) {
  .work-list {
    grid-template-columns: repeat(2, 1fr); /* タブレットで2列表示 */
    gap: var(--spacing-base); /* カード間の余白を維持 */
    padding: 0 var(--spacing-base); /* タブレット時の左右余白を設定 */
  }
}

@media screen and (max-width: 768px) {
  .work-list {
    grid-template-columns: 1fr; /* モバイルで1列表示 */
    gap: var(--spacing-small); /* カード間の余白を縮小 */
    padding: 0 var(--spacing-small); /* モバイル時の左右余白を調整 */
  }
}

/* お知らせセクション */
.news-list {
  list-style: none;
  padding-inline-start: 1em;
  max-width: 1200px; /* セクション全体の幅を制限 */
  margin: 0 auto; /* セクションを中央揃え */
}

.news-list li {
  margin: var(--spacing-small);
  border-bottom: 1px solid var(--color-shadow); /* ニュートラルなシャドウ色 */
  padding-bottom: var(--spacing-small);
}

.news-list li:last-child {
  border-bottom: none; /* 最後の項目にはボーダーを適用しない */
  padding-bottom: 0;
}

.news-date {
  display: block;
  font-size: var(--font-small);
  color: var(--color-primary); /* 日付をメインカラーで強調 */
  margin-bottom: var(--spacing-small);
}

.news-list a {
  font-size: var(--font-base);
  color: var(--color-text); /* テキストを濃いグレーに設定 */
  text-decoration: none;
  transition: color 0.3s ease; /* スムーズなホバー効果 */
}

.news-list a:hover {
  text-decoration: underline;
  color: var(--color-accent); /* ホバー時にアクセントカラー */
}

/* ブログ紹介セクション */
/* デフォルトのグリッドカードで対応済 */

/* お問い合わせセクション */
.cta {
  background: url("images/top_hero_background_1920x1080.png") no-repeat center
    center/cover;
  color: var(--color-background); /* 背景色 */
  text-align: center;
  padding: var(--spacing-large) var(--spacing-base); /* 余白の調整 */
  position: relative;
  overflow: hidden;
  margin-top: var(--spacing-large);
}

.cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.cta-content {
  position: relative;
  z-index: 2;
}

.cta h2 {
  font-size: var(--font-xlarge); /* 大きなフォントサイズ */
  color: var(--color-primary); /* メインカラー */
  margin-bottom: var(--spacing-base); /* 下部余白 */
  text-shadow: 0 2px 4px var(--color-shadow); /* テキストの影 */
}

.cta p {
  font-size: var(--font-base); /* 基本フォントサイズ */
  margin-bottom: var(--spacing-large); /* 下部余白 */
  text-shadow: 0 2px 4px var(--color-shadow); /* テキストの影 */
  color: var(--color-background); /* 背景色 */
}

/* サービス紹介セクション */
.service-intro {
  max-width: 1200px; /* 最大幅を設定 */
  width: calc(
    100% - 2 * var(--spacing-base)
  ); /* 全体幅から左右の余白を差し引いた幅 */
  padding: var(--spacing-large) var(--spacing-base); /* 内側の余白 */
  background-color: var(--color-background); /* 背景色 */
  margin: var(--spacing-large) auto; /* 上下に余白を設定し、左右は中央揃え */
  box-shadow: 0 2px 5px var(--color-shadow); /* セクションの影 */
  box-sizing: border-box; /* 幅計算を正確に */
}

/* モバイル対応 */
@media screen and (max-width: 768px) {
  .service-intro {
    width: calc(
      100% - 2 * var(--spacing-small)
    ); /* モバイルでは左右の余白を小さくする */
    padding: var(--spacing-base); /* 内側の余白を調整 */
    box-shadow: 0 1px 3px var(--color-shadow); /* 影を少し控えめに */
  }
}

/* サービス内容セクション */
.service-section {
  padding: var(--spacing-base); /* 余白を調整 */
  max-width: 100%; /* 幅を画面幅にフィットさせる */
  box-sizing: border-box; /* 幅計算を正確に */
  margin: 0 auto; /* セクションを中央揃え */
}

/* サービスカード */
.service-item {
  display: block; /* 全体をリンクにする */
  text-align: center;
  background: var(--color-background); /* 背景色を白っぽい色に設定 */
  padding: var(--spacing-base);
  border-radius: var(--spacing-small); /* 角丸を統一 */
  box-shadow: 0 2px 5px var(--color-shadow); /* 軽い影を追加 */
  transition: transform 0.3s ease, box-shadow 0.3s ease,
    background-color 0.3s ease;
  text-decoration: none; /* アンダーラインを削除 */
}

.service-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* ホバー時の強調された影 */
  background-color: var(--color-primary); /* ホバー時に背景色をメインカラーに */
  color: var(--color-background); /* ホバー時に文字色を白っぽい色に */
}

.service-item img {
  width: 100%;
  max-width: 400px; /* 画像サイズの最大幅を設定 */
  height: auto;
  border-radius: var(--spacing-small); /* 画像にも角丸を適用 */
  margin: 0 auto var(--spacing-small); /* センター揃え */
  display: block;
  transition: transform 0.3s ease; /* ホバー時のアニメーションを追加 */
}

.service-item:hover img {
  transform: scale(1.05); /* ホバー時に画像を拡大 */
}

.service-item h3 {
  font-size: var(--font-large); /* 見出しサイズを統一 */
  color: var(--color-primary); /* メインカラーを適用 */
  margin-bottom: var(--spacing-small);
}

.service-item:hover h3 {
  color: var(--color-background); /* ホバー時に文字色を白っぽい色に */
}

.service-item p {
  font-size: var(--font-base); /* 段落のフォントサイズを統一 */
  color: var(--color-text); /* テキストを濃いグレーに */
  line-height: 1.6;
  margin: 0 auto;
  max-width: 300px; /* テキストの幅を制限 */
}

.service-item:hover p {
  color: var(--color-background); /* ホバー時に文字色を白っぽい色に */
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
  .service-section {
    padding: var(--spacing-base); /* モバイルでの左右余白調整 */
  }

  .service-list {
    grid-template-columns: 1fr; /* モバイルで1列表示 */
    gap: var(--spacing-small); /* カード間の余白を縮小 */
    padding: 0 var(--spacing-small); /* 左右の余白を調整 */
  }

  .service-item {
    margin: 0 auto; /* モバイルでの中央揃え */
    max-width: 100%; /* アイテムの幅を制限 */
  }
}

@media screen and (max-width: 480px) {
  .service-list {
    grid-template-columns: 1fr; /* 1列表示 */
    gap: var(--spacing-small); /* 要素間の余白をさらに縮小 */
    padding: 0 var(--spacing-small); /* 左右の余白を調整 */
  }

  .service-section {
    padding: var(--spacing-small); /* 親要素の余白を縮小 */
  }

  .service-item {
    max-width: 100%; /* 幅を画面幅にフィットさせる */
  }
}

/* --FAQページ-- */
/* FAQセクション全体 */
.faq-section {
  padding: var(--spacing-large) var(--spacing-base);
  max-width: 1200px;
  margin: 0 auto;
}

/* セクションタイトル */
.faq-section h1 {
  font-size: var(--font-xlarge);
  color: var(--color-primary); /* メインカラー */
  margin-bottom: var(--spacing-base);
  text-align: center;
  font-weight: bold;
  letter-spacing: 0.05em;
  text-shadow: 0 1px 3px var(--color-shadow); /* タイトルに軽い影を追加 */
}

/* カテゴリ見出し */
.faq-category {
  font-size: var(--font-large);
  color: var(--color-primary); /* メインカラー */
  margin-top: var(--spacing-large);
  margin-bottom: var(--spacing-base);
  border-left: 5px solid var(--color-primary);
  padding-left: var(--spacing-base);
  font-weight: bold;
}

/* 質問文 */
.faq-question {
  font-size: var(--font-base);
  color: var(--color-primary); /* メインカラー */
  cursor: pointer;
  position: relative;
  padding: var(--spacing-small) var(--spacing-base);
  margin: var(--spacing-small) 0;
  background-color: var(--color-background); /* 背景色を統一 */
  border-radius: var(--spacing-small); /* 柔らかい角丸 */
  box-shadow: 0 2px 8px var(--color-shadow); /* 軽い立体感 */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.faq-question:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 15px var(--color-shadow); /* ホバー時の強調 */
}

/* 質問文の＋アイコン */
.faq-question::after {
  content: "＋";
  font-size: var(--font-large);
  color: var(--color-primary);
  position: absolute;
  right: var(--spacing-base);
  transition: transform 0.3s ease;
}

.faq-item.open .faq-question::after {
  content: "−";
  transform: rotate(180deg);
}

/* 答え */
.faq-answer {
  font-size: var(--font-small);
  color: var(--color-text); /* テキストを濃いグレーに */
  line-height: 1.8;
  margin-top: var(--spacing-small);
  padding-left: var(--spacing-base);
  display: none; /* 初期状態で非表示 */
  border-left: 3px solid var(--color-primary);
}

.faq-item.open .faq-answer {
  display: block;
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
  .faq-section {
    padding: var(--spacing-base); /* モバイルでの余白を調整 */
  }

  .faq-question {
    font-size: var(--font-small); /* 質問文のフォントサイズを小さく */
    padding: var(--spacing-small); /* 内側の余白を調整 */
    border-radius: var(--spacing-small); /* 柔らかい角丸を維持 */
  }

  .faq-answer {
    font-size: var(--font-small); /* 回答文のフォントサイズを小さく */
    padding-left: var(--spacing-small); /* 左側の余白を調整 */
    line-height: 1.6; /* 行間を少し狭く */
  }

  .faq-category {
    font-size: var(--font-base); /* カテゴリ見出しのサイズを調整 */
    margin-top: var(--spacing-base); /* 上余白を調整 */
    margin-bottom: var(--spacing-small); /* 下余白を調整 */
  }

  .faq-section h1 {
    font-size: var(--font-large); /* セクションタイトルのサイズを小さく調整 */
    margin-bottom: var(--spacing-small); /* タイトルの下余白を調整 */
  }
}

/* --以下会社概要ページ-- */
/* ヒーローセクション */
.about-hero {
  background-color: var(--color-background); /* メインカラー */
  color: var(--color-primary); /* 背景色に合わせた文字色 */
  padding: var(--spacing-large) var(--spacing-base);
  text-align: center;
}

.about-hero h1 {
  font-size: var(--font-xlarge); /* 大きめの見出し */
  font-weight: bold;
  margin-bottom: var(--spacing-small);
  color: var(--color-primary); /* アクセントカラー */
  text-shadow: 0 2px 4px var(--color-shadow); /* 軽いテキスト影を追加 */
}

.about-hero p {
  font-size: var(--font-base);
  line-height: 1.8;
  margin-bottom: var(--spacing-base); /* 下余白を追加 */
}

/* 会社概要セクション */
.company-intro {
  padding: var(--spacing-large) var(--spacing-base);
  margin: var(--spacing-large) auto;
}

.company-table {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  border-collapse: collapse;
  background: #fdfdfd; /* 背景色を統一 */
  box-shadow: 0 2px 5px var(--color-shadow);
}

.company-table th,
.company-table td {
  padding: var(--spacing-small);
  border: 1px solid var(--color-shadow); /* シャドウ色で統一 */
  text-align: left;
  font-size: var(--font-base);
}

.company-table th {
  background-color: var(--color-primary); /* メインカラー */
  color: var(--color-background); /* 文字色を白に */
}

/* 使命とビジョンセクション */
.mission-vision {
  padding: var(--spacing-large) var(--spacing-base);
}

.mission-vision .section-title {
  font-size: var(--font-large);
  color: var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  margin-bottom: var(--spacing-base);
}

.story-text {
  max-width: 1200px;
  margin: 0 auto;
  font-size: var(--font-base);
  line-height: 1.8;
  color: var(--color-text);
}

.story-text p {
  margin-bottom: var(--spacing-small);
}

.mission-vision {
  background-color: #f8f9fa; /* 背景を薄いグレーに */
  padding: 60px 20px;
  text-align: center;
}

.mission-vision-container {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 1200px;
  margin: 0 auto;
  gap: 40px;
}

.mission-vision-content {
  flex: 1;
  text-align: left;
}

.mission-vision-content h2 {
  font-size: 2rem;
  color: #003f91; /* メインカラー */
  margin-bottom: 20px;
  text-transform: uppercase;
}

.mission-vision-content p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #333;
  margin-bottom: 15px;
}

.mission-vision-image {
  flex: 1;
  text-align: center;
}

.mission-vision-image img {
  max-width: 300px;
  height: auto;
  opacity: 0.9;
  transition: opacity 0.3s ease-in-out;
}

.mission-vision-image img:hover {
  opacity: 1;
}

.vision-statement {
  margin-top: 50px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.vision-statement h3 {
  font-size: 1.8rem;
  color: var(--color-primary);
  text-transform: uppercase;
  margin-bottom: 15px;
}

.vision-statement p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #333;
  margin-bottom: 15px;
}

/* モバイル対応 */
@media (max-width: 768px) {
  .mission-vision-container {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }

  .mission-vision-content,
  .mission-vision-image {
    flex: none;
    width: 100%;
  }

  .vision-statement h3 {
    font-size: 1.5rem;
  }

  .vision-statement p {
    font-size: 1rem;
  }
}

.strengths {
  background-color: #f8f9fa; /* 柔らかい背景色 */
  padding: 60px 20px;
  text-align: center;
}

.strengths-list {
  list-style: none;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

.strengths-list li {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 63, 145, 0.1); /* 軽いシャドウを追加 */
  text-align: left;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.strengths-list li:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 15px rgba(0, 63, 145, 0.2);
}

.strengths-list h3 {
  font-size: 1.4rem;
  color: #003f91; /* メインカラー */
  margin-bottom: 10px;
  font-weight: bold;
  border-left: 4px solid #003f91; /* 見出しにアクセント */
  padding-left: 10px;
}

.strengths-list p {
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
}

/* モバイル対応 */
@media (max-width: 768px) {
  .strengths-list {
    grid-template-columns: 1fr; /* 1列に変更 */
    gap: 20px;
  }

  .strengths-list h3 {
    font-size: 1.2rem;
  }

  .strengths-list p {
    font-size: 0.95rem;
  }
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
  .about-hero {
    padding: var(--spacing-base); /* ヒーローセクションの余白を縮小 */
    text-align: center; /* 中央揃えを維持 */
  }

  .company-table {
    font-size: var(--font-small); /* テーブルのフォントサイズを小さく調整 */
    width: 100%; /* テーブル幅を画面幅にフィット */
    overflow-x: auto; /* 横スクロールを許可 */
  }

  .story-text {
    font-size: var(--font-small); /* テキストのフォントサイズを小さく調整 */
    line-height: 1.6; /* 行間を少し縮小 */
    padding: 0 var(--spacing-small); /* 左右の余白を調整 */
  }
}

/* セクションタイトル（h2）のスタイル */
.section-title {
  font-size: var(--font-large); /* タイトルのフォントサイズ */
  margin: 0 auto var(--spacing-base); /* 下部にスペース、中央寄せ */
  border-bottom: 2px solid var(--color-primary); /* アンダーラインをメインカラーに */
  padding-bottom: var(--spacing-small); /* アンダーラインとの間隔 */
  text-align: left; /* 左揃え */
  max-width: 1200px; /* 最大幅を設定 */
  padding-left: var(--spacing-base); /* 左右に余白を設定 */
  padding-right: var(--spacing-base);
  box-sizing: border-box; /* 幅計算を正確に */
  color: var(--color-primary); /* テキストの色をメインカラーに設定 */
  font-weight: bold; /* 視認性を高めるために太字を追加 */
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
  .section-title {
    font-size: var(--font-base); /* モバイル時のフォントサイズを調整 */
    padding-left: var(--spacing-small); /* 左右の余白を縮小 */
    padding-right: var(--spacing-small);
    text-align: center; /* モバイル時は中央揃えに変更 */
  }
}

/* 以下実績一覧ページ */
/* ヒーローセクション */
.work-hero {
  background-color: var(--color-background); /* メインカラー */
  color: var(--color-primary);
  padding: var(--spacing-large);
  text-align: center;
}

.hero-title {
  font-size: var(--font-xlarge);
  font-weight: bold;
  margin-bottom: var(--spacing-small);
  color: var(--color-primary);
  text-shadow: 0 2px 4px var(--color-shadow); /* テキストに軽い影を追加 */
}

.hero-description {
  font-size: var(--font-base);
  line-height: 1.8;
  color: var(--color-primary);
  margin-top: var(--spacing-small);
}

/* 実績一覧セクション */
/* もっと見るボタンのスタイル */
.more-button-container {
  text-align: center; /* ボタンを中央揃え */
  margin-top: 20px; /* 上部の余白 */
}

#load-more {
  display: inline-block;
  padding: 10px 20px; /* ボタンの余白 */
  font-size: 16px; /* フォントサイズ */
  color: var(--color-background); /* 文字色 */
  background-color: var(--color-primary); /* ボタン背景色 */
  border: none; /* 枠線なし */
  border-radius: 5px; /* 角丸 */
  cursor: pointer;
  transition: background-color 0.3s ease; /* 背景色のスムーズな変化 */
}

#load-more:hover {
  background-color: var(--color-secondary); /* ホバー時の背景色 */
}

#load-more:disabled {
  background-color: #ccc; /* 無効時の背景色 */
  cursor: not-allowed; /* 無効時のカーソル */
}

.work-list-section {
  padding: var(--spacing-large) var(--spacing-base);
}

.work-list-section .filter-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-small);
  margin: var(--spacing-base) 0;
}

.work-list-section .filter-form label {
  font-size: var(--font-small);
  color: var(--color-text);
}

.work-list-section .filter-form select {
  padding: var(--spacing-small);
  border-radius: var(--spacing-small);
  border: 1px solid var(--color-shadow);
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3列表示 */
  gap: var(--spacing-base);
  max-width: 1200px;
  margin: 0 auto;
}

.work-item {
  background: var(--color-background);
  border-radius: var(--spacing-small);
  box-shadow: 0 2px 5px var(--color-shadow);
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.work-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.work-thumbnail {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.work-details {
  padding: var(--spacing-base);
  text-align: center;
}

.work-title {
  font-size: var(--font-large);
  color: var(--color-primary);
  margin-bottom: var(--spacing-small);
}

.work-category {
  display: inline-block;
  font-size: var(--font-small);
  color: var(--color-secondary);
  margin-bottom: var(--spacing-small);
}

.work-description {
  font-size: var(--font-base);
  color: var(--color-text);
  line-height: 1.6;
  margin-top: var(--spacing-small); /* テキストの上下に余白を追加 */
}

/* レスポンシブ対応 */
@media screen and (max-width: 1024px) {
  .work-grid {
    grid-template-columns: repeat(2, 1fr); /* タブレットで2列表示 */
    gap: var(--spacing-base); /* カード間の余白を維持 */
    padding: 0 var(--spacing-base); /* 左右に余白を追加 */
  }
}

@media screen and (max-width: 768px) {
  .work-grid {
    grid-template-columns: 1fr; /* モバイルで1列表示 */
    gap: var(--spacing-small); /* カード間の余白を縮小 */
    padding: 0 var(--spacing-small); /* 左右の余白を調整 */
  }
}

/* 以下ブログ一覧ページ */
/* 検索セクション */
.blog-search {
  padding: var(--spacing-base); /* 余白を調整 */
  margin-bottom: var(--spacing-large); /* 下余白を追加 */
  background-color: var(--color-background); /* 背景色を白っぽい色に設定 */
  border-radius: var(--spacing-small); /* セクション全体に角丸を追加 */
  box-shadow: 0 2px 5px var(--color-shadow); /* 軽い影を追加 */
}

/* 検索フォーム */
.search-form {
  display: flex;
  justify-content: center;
  gap: var(--spacing-small); /* フォーム内の要素間の余白 */
  max-width: 600px; /* フォームの最大幅を設定 */
  margin: 0 auto; /* フォームを中央揃え */
}

/* 検索入力フィールド */
.search-input {
  flex: 1;
  padding: var(--spacing-small) var(--spacing-base);
  border: 2px solid var(--color-shadow); /* シャドウ色を枠線に使用 */
  border-radius: var(--spacing-small); /* 角丸を適用 */
  font-size: var(--font-base);
  color: var(--color-text); /* 濃いグレーの文字色 */
  transition: border-color 0.3s ease;
}

.search-input:focus {
  border-color: var(--color-primary); /* フォーカス時にメインカラーの枠線 */
  outline: none; /* デフォルトのアウトラインを削除 */
}

/* 検索ボタン */
.search-button {
  padding: var(--spacing-small) var(--spacing-base);
  background-color: var(--color-primary); /* ボタン背景をメインカラーに設定 */
  color: var(--color-background); /* 文字色を白っぽい色に */
  border: none;
  border-radius: var(--spacing-small); /* 角丸を追加 */
  font-size: var(--font-base);
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.search-button:hover {
  background-color: var(--color-accent); /* ホバー時にアクセントカラー */
  transform: translateY(-2px); /* ボタンを少し浮かせる */
}

/* blog-listのスタイルをservice-listに揃える */
.blog-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* デフォルトは4列 */
  gap: var(--spacing-base); /* カード間の余白 */
  padding: 0 var(--spacing-base); /* 左右に余白を設定 */
  margin: 0 auto; /* 中央揃え */
  max-width: 1200px; /* 親要素の幅を制限 */
  box-sizing: border-box; /* 幅計算を正確に */
}

.blog-item {
  background: var(--color-background); /* 背景色を白っぽい色に設定 */
  padding: var(--spacing-base);
  border-radius: var(--spacing-small); /* 角丸 */
  box-shadow: 0 2px 5px var(--color-shadow); /* 軽い影 */
  text-align: center;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden; /* 画像や内容がはみ出ないように */
}

.blog-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px var(--color-shadow); /* ホバー時の強調された影 */
  background-color: var(--color-primary); /* ホバー時に背景色をメインカラーに */
  color: var(--color-background); /* ホバー時に文字色を白っぽい色に */
}

.blog-item img {
  width: 100%;
  height: auto;
  aspect-ratio: 4/3; /* 画像の比率を固定 */
  border-radius: var(--spacing-small); /* 画像にも角丸を適用 */
  margin-bottom: var(--spacing-small);
  object-fit: cover; /* 画像をトリミングせず中央でフィット */
  transition: transform 0.3s ease; /* ホバー時に画像を動かす */
}

.blog-item:hover img {
  transform: scale(1.05); /* ホバー時に画像を拡大 */
}

.blog-item h3 {
  font-size: var(--font-large); /* 見出しサイズ */
  color: var(--color-primary); /* メインカラー */
  margin-bottom: var(--spacing-small);
  font-weight: bold; /* 見出しを強調 */
}

.blog-item:hover h3 {
  color: var(--color-background); /* ホバー時に文字色を白っぽい色に */
}

.blog-item p {
  font-size: var(--font-base); /* 段落のフォントサイズ */
  color: var(--color-text); /* テキストを濃いグレーに */
  line-height: 1.6;
  margin: 0; /* 不要な余白を削除 */
}

.blog-item:hover p {
  color: var(--color-background); /* ホバー時に文字色を白っぽい色に */
}

/* モバイルでの対応 */
@media screen and (max-width: 768px) {
  .blog-item img {
    aspect-ratio: 1200 / 630; /* モバイルでも同じ比率を維持 */
    object-fit: contain; /* トリミングを避ける */
  }
}

/* 検索セクション */
.blog-search .container {
  max-width: 800px; /* 最大幅を設定 */
  margin: 0 auto; /* 中央揃え */
  padding: var(--spacing-base) 0; /* 上下に余白を設定 */
  text-align: center;
}

.blog-filter .filter-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-small);
  margin: var(--spacing-base) auto;
  max-width: 800px;
}

.blog-filter .filter-form label {
  font-size: var(--font-small);
  color: var(--color-text);
}

.blog-filter .filter-form select {
  padding: var(--spacing-small);
  border-radius: var(--spacing-small);
  border: 1px solid var(--color-shadow);
}

.search-description {
  font-size: var(--font-base); /* 基本フォントサイズを適用 */
  color: var(--color-text); /* ニュートラルな文字色 */
  margin-bottom: var(--spacing-small); /* 下余白を統一 */
}

/* ピックアップ記事専用スタイル */
.blog-pickup .blog-list {
  grid-template-columns: repeat(4, 1fr); /* 最大4つ表示 */
  gap: var(--spacing-base); /* 各カードの間に余白を追加 */
  margin: 0 auto;
  padding: 0 var(--spacing-base); /* 左右の余白を設定 */
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
  .blog-pickup .blog-list {
    grid-template-columns: 1fr; /* モバイルで1列表示 */
    gap: var(--spacing-small); /* カード間の余白を縮小 */
    padding: 0 var(--spacing-small); /* 左右の余白を調整 */
  }
}

/* ページネーション */
.pagination {
  text-align: center;
  margin: var(--spacing-base) 0; /* 上下の余白を統一 */
}

/* ページ番号と次ページリンク */
.page-number,
.next-page {
  display: inline-block;
  padding: var(--spacing-small) var(--spacing-base); /* 内側の余白を統一 */
  margin: 0 var(--spacing-small); /* 各要素間の余白を設定 */
  background-color: var(--color-background); /* 背景色を白っぽい色に設定 */
  color: var(--color-text); /* 文字色を濃いグレーに */
  border: 1px solid var(--color-shadow); /* シャドウ色で枠線を設定 */
  border-radius: var(--spacing-small); /* 角丸を追加 */
  text-decoration: none;
  font-size: var(--font-base); /* 基本フォントサイズ */
  transition: background-color 0.3s ease, color 0.3s ease; /* スムーズなホバー効果 */
}

/* アクティブなページ番号 */
.page-number.active {
  background-color: var(--color-primary); /* メインカラーを適用 */
  color: var(--color-background); /* 文字色を白っぽい色に */
}

/* ホバー時のスタイル */
.page-number:hover,
.next-page:hover {
  background-color: var(--color-accent); /* ホバー時にアクセントカラー */
  color: var(--color-background); /* 文字色を白っぽい色に */
}

/* --以下404ページのCSS-- */
/* 404ページ全体のスタイル */
.error-hero {
  background-color: var(--color-background); /* アクセントカラー */
  color: var(--color-text); /* 背景色に反する文字色 */
  text-align: center;
  padding: var(--spacing-large) var(--spacing-base);
  box-shadow: 0 2px 5px var(--color-shadow); /* 軽い影を追加 */
}

/* エラーページタイトル */
.error-title {
  font-size: var(--font-xlarge); /* 大見出しサイズ */
  font-weight: bold;
  margin-bottom: var(--spacing-small); /* 下余白を調整 */
  text-shadow: 0 2px 4px var(--color-shadow); /* テキストに軽い影を追加 */
}

/* エラーメッセージ */
.error-message {
  font-size: var(--font-base); /* 基本フォントサイズ */
  line-height: 1.8; /* 読みやすい行間 */
  margin-bottom: var(--spacing-large); /* 下余白を追加 */
  color: var(--color-text); /* 文字色を背景色に反する色に設定 */
}

/* 検索セクション */
.search-section {
  padding: var(--spacing-large) var(--spacing-base);
  text-align: center;
}

/* 検索説明 */
.search-description {
  font-size: var(--font-small);
  color: var(--color-text); /* テキストのニュートラルカラー */
  margin-bottom: var(--spacing-base);
}

/* 検索フォーム */
.search-form {
  display: flex;
  justify-content: center;
  gap: var(--spacing-small); /* フォーム内要素の間隔を調整 */
}

/* 検索入力フィールド */
.search-input {
  flex: 1;
  padding: var(--spacing-small);
  border: 1px solid var(--color-shadow); /* シャドウ色を枠線に設定 */
  border-radius: var(--spacing-small); /* 角丸を追加 */
  font-size: var(--font-base);
  transition: border-color 0.3s ease; /* フォーカス時の枠線色変化をスムーズに */
}

.search-input:focus {
  border-color: var(--color-primary); /* フォーカス時にメインカラーの枠線 */
  outline: none; /* デフォルトのアウトラインを削除 */
}

/* 検索ボタン */
.search-button {
  padding: var(--spacing-small) var(--spacing-base);
  background-color: var(--color-primary); /* ボタン背景をメインカラーに設定 */
  color: var(--color-background); /* 文字色を白っぽい色に設定 */
  border: none;
  border-radius: var(--spacing-small); /* 角丸を追加 */
  font-size: var(--font-base);
  cursor: pointer;
  transition: background-color 0.3s ease, box-shadow 0.3s ease; /* スムーズなホバー効果 */
}

.search-button:hover {
  background-color: var(--color-accent); /* ホバー時にアクセントカラー */
  box-shadow: 0 4px 10px var(--color-shadow); /* ホバー時の影を強調 */
}

/* 提案セクション */
.suggestions-section {
  padding: var(--spacing-large) var(--spacing-base);
  text-align: center;
}

/* --以下アーカイブページのCSS-- */
/* お知らせセクション */
.archive .news-list-section {
  padding: var(--spacing-large) var(--spacing-base);
}

.archive .section-title {
  font-size: var(--font-large);
  color: var(--color-primary); /* メインカラー */
  margin: var(--spacing-base) auto;
  text-align: left;
  border-bottom: 2px solid var(--color-primary); /* アクセントカラーで下線 */
  padding: var(--spacing-small);
}

/* リストスタイル */
.archive .news-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.archive .news-item {
  padding: var(--spacing-base) 0;
  border-bottom: 1px solid var(--color-shadow); /* シャドウ色でボーダー */
}

.archive .news-item:last-child {
  border-bottom: none; /* 最後の項目にはボーダーを付けない */
}

.archive .news-link {
  text-decoration: none;
  color: var(--color-text); /* ニュートラルな文字色 */
  display: block;
  padding: var(--spacing-small) 0;
  transition: color 0.3s ease; /* スムーズな色変更 */
}

.archive .news-link:hover {
  text-decoration: none; /* 下線を消す */
  color: var(--color-primary); /* ホバー時の文字色をメインカラーに */
}

.archive .news-date {
  font-size: var(--font-small);
  color: var(--color-secondary); /* サブカラー */
  margin-bottom: var(--spacing-small);
}

.archive .news-title {
  font-size: var(--font-base);
  color: var(--color-primary); /* メインカラー */
  font-weight: bold;
}

.archive .news-excerpt {
  font-size: var(--font-small);
  color: var(--color-text); /* ニュートラルな文字色 */
  line-height: 1.6;
  margin-top: var(--spacing-small);
}

/* ページネーション */
.archive .pagination {
  text-align: center;
  margin-top: var(--spacing-large);
}

.archive .pagination a {
  display: inline-block;
  margin: 0 var(--spacing-small);
  padding: var(--spacing-small) var(--spacing-base);
  background-color: var(--color-background); /* 背景色を統一 */
  color: var(--color-primary); /* メインカラー */
  border: 1px solid var(--color-shadow); /* 枠線をシャドウ色で統一 */
  border-radius: var(--spacing-small);
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.archive .pagination a:hover {
  background-color: var(--color-primary); /* ホバー時にメインカラー */
  color: var(--color-background); /* ホバー時に文字色を白っぽい色に */
}

.archive .pagination .current {
  background-color: var(
    --color-primary
  ); /* アクティブページの背景をメインカラー */
  color: var(--color-background); /* アクティブページの文字色を白っぽい色に */
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
  .archive .news-title {
    font-size: var(--font-small); /* モバイルでフォントサイズを調整 */
  }

  .archive .news-list-section {
    padding: var(--spacing-base); /* セクションの余白を調整 */
  }

  .archive .section-title {
    font-size: var(--font-large); /* セクションタイトルのフォントサイズを調整 */
    text-align: center; /* モバイルで中央揃えに変更 */
  }

  .archive .news-item {
    padding: var(--spacing-small) 0; /* リスト項目の上下余白を縮小 */
  }

  .archive .news-link {
    font-size: var(--font-small); /* リンクのフォントサイズを小さく */
  }

  .archive .pagination a {
    padding: var(--spacing-small); /* ページネーションのボタンサイズを調整 */
    font-size: var(--font-small); /* ページ番号のフォントサイズを縮小 */
  }
}

/* --以下newsシングルページのCSS-- */
/* ヘッダー */
.news-header {
  text-align: center;
  margin-bottom: var(--spacing-large);
}

.news-title {
  font-size: var(--font-xlarge); /* 大きな見出しサイズ */
  color: var(--color-primary); /* メインカラー */
  margin-bottom: var(--spacing-small);
  font-weight: bold;
  text-shadow: 0 2px 4px var(--color-shadow); /* 軽い影を追加 */
}

.news-meta {
  font-size: var(--font-small);
  color: var(--color-secondary); /* サブカラー */
}

/* アイキャッチ画像 */
.news-thumbnail {
  margin: var(--spacing-large) 0;
  text-align: center;
}

.news-thumbnail img {
  width: 100%; /* 幅を全体に広げる */
  height: auto;
  border-radius: var(--spacing-small); /* 角丸を追加 */
  box-shadow: 0 2px 5px var(--color-shadow); /* 軽い影を追加 */
}

/* 本文 */
.news-content {
  padding: var(--spacing-base) var(--spacing-base); /* 上下・左右に余白を追加 */
  line-height: 1.8; /* 行間を広げて読みやすく */
  color: var(--color-text); /* 文字色を全体ルールに合わせる */
  max-width: 800px; /* 幅を制限 */
  margin: 0 auto; /* 中央揃え */
}

/* リンクスタイル */
.news-content a {
  color: var(--color-primary); /* メインカラーを適用 */
  text-decoration: underline;
  transition: color 0.3s ease; /* スムーズな色変更 */
}

.news-content a:hover {
  color: var(--color-accent); /* ホバー時にアクセントカラー */
}

/* --以下blogシングルページのCSS-- */
/* シングルページ（ブログ）のスタイル */
/* 全体 */
.single-blog .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-base); /* 左右の余白を統一 */
}

/* 記事タイトル */
.single-blog .blog-title {
  font-size: var(--font-large); /* 大見出しサイズ */
  color: var(--color-primary); /* メインカラー */
  text-align: center;
  margin-bottom: var(--spacing-base);
  text-shadow: 0 2px 4px var(--color-shadow); /* 視認性向上のために影を追加 */
}

/* メタ情報 */
.single-blog .blog-meta {
  font-size: var(--font-small); /* 小さめのフォントサイズ */
  color: var(--color-secondary); /* サブカラー */
  text-align: center;
  margin-bottom: var(--spacing-base);
}

/* アイキャッチ画像 */
.single-blog .blog-thumbnail {
  margin-bottom: var(--spacing-large);
}

.single-blog .blog-featured-image {
  border-radius: var(--spacing-small); /* 角丸を追加 */
  box-shadow: 0 2px 5px var(--color-shadow); /* 軽い影を追加 */
}

/* 本文 */
.single-blog .blog-content {
  font-size: var(--font-base); /* 基本フォントサイズ */
  line-height: 1.8; /* 行間を広げて読みやすく */
  color: var(--color-text); /* テキストカラー */
  margin-bottom: var(--spacing-large);
}

/* 著者情報 */
.single-blog .blog-author-info {
  margin: var(--spacing-large) auto;
  background-color: var(--color-background); /* 背景色をニュートラルカラーに */
  padding: var(--spacing-base);
  border-radius: var(--spacing-small); /* 角丸を追加 */
  display: flex;
  align-items: center;
  gap: var(--spacing-base); /* 要素間の間隔を設定 */
}

.single-blog .author-card .author-image {
  overflow: hidden; /* 画像のはみ出しを防止 */
}

.single-blog .author-card .author-details h3 {
  font-size: var(--font-large); /* 見出しサイズを調整 */
  color: var(--color-primary); /* メインカラー */
}

.single-blog .author-card .author-details p {
  font-size: var(--font-base);
  color: var(--color-text); /* テキストカラー */
}

/* 関連記事 */
.single-blog .related-posts {
  margin: var(--spacing-large) 0;
}

.single-blog .related-post-title {
  font-size: var(--font-small);
  color: var(--color-primary); /* メインカラー */
  margin-top: var(--spacing-small);
}

/* カルーセルスタイル */
.single-blog .carousel-container {
  display: flex;
  align-items: center;
}

.single-blog .carousel-track-container {
  overflow: hidden;
  flex: 1;
  background-color: #fdfdfd;
}

.single-blog .carousel-track {
  display: flex;
  gap: var(--spacing-small); /* 各スライド間の間隔を統一 */
  justify-content: center;
  box-sizing: border-box;
}

.single-blog .carousel-slide {
  flex: 0 0 calc((100% - 2 * var(--spacing-small)) / 3); /* 3列表示 */
  text-align: center;
  overflow: hidden;
}

/* カルーセルコントロール */
.single-blog .carousel-control {
  background: var(--color-primary); /* メインカラー */
  color: var(--color-background); /* 白っぽい文字色 */
  border: none;
  cursor: pointer;
  border-radius: var(--spacing-small); /* 角丸を追加 */
  transition: background-color 0.3s ease; /* ホバー時のスムーズな変更 */
}

.single-blog .carousel-control:hover {
  background: var(--color-accent); /* ホバー時にアクセントカラー */
}

/* 見出しスタイル */
.single-blog h2 {
  font-size: var(--font-large);
  color: var(--color-primary); /* メインカラー */
  border-bottom: 2px solid var(--color-primary); /* アクセントカラーの下線 */
  padding-bottom: var(--spacing-small);
  margin: var(--spacing-large) 0 var(--spacing-base);
}

.single-blog h3 {
  font-size: var(--font-medium);
  color: var(--color-primary); /* メインカラー */
  margin: var(--spacing-base) 0 var(--spacing-small);
}

.single-blog h4 {
  font-size: var(--font-base);
  color: var(--color-secondary); /* サブカラー */
  margin: var(--spacing-small) 0;
}

.single-blog h5 {
  font-size: var(--font-small);
  color: var(--color-text); /* テキストカラー */
  margin: var(--spacing-small) 0;
  font-weight: bold;
}

/* 表スタイル */
.single-blog table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--spacing-base) 0;
  background-color: #fdfdfd; /* ニュートラルカラー */
  box-shadow: 0 2px 5px var(--color-shadow); /* 軽い影を追加 */
}

.single-blog th,
.single-blog td {
  padding: var(--spacing-small);
  border: 1px solid var(--color-shadow); /* 枠線をシャドウ色に統一 */
  text-align: left;
  font-size: var(--font-base);
  color: var(--color-text); /* テキストカラー */
}

.single-blog th {
  background-color: var(--color-primary); /* サブカラー */
  color: #fff; /* 白文字で目立たせる */
  font-weight: bold;
}

/* 箇条書き（ul/ol） */
.single-blog ul,
.single-blog ol {
  padding-left: var(--spacing-large);
  margin: var(--spacing-base) 0;
  line-height: 1.8; /* 読みやすい行間 */
  font-size: var(--font-base);
}

/* 引用スタイル */
.single-blog blockquote {
  padding: var(--spacing-base);
  margin: var(--spacing-base) 0;
  background-color: var(--color-background); /* ニュートラルカラー */
  border-left: 5px solid var(--color-primary); /* アクセントカラーの左線 */
  color: var(--color-text); /* テキストカラー */
  font-style: italic;
}

/* サムネイル画像のスタイル修正 */
.blog-featured-image {
  height: auto; /* 自然な高さを保つ */
  aspect-ratio: 1200 / 630; /* 比率を固定 */
  object-fit: cover; /* コンテンツの中央を表示 */
  margin-bottom: var(--spacing-base); /* 他の要素との間隔 */
  border-radius: var(--spacing-small); /* 角丸を追加 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 影を追加 */
}

/* モバイルでの対応 */
@media screen and (max-width: 768px) {
  .blog-featured-image {
    display: block;
    width: 100%; /* 親要素に合わせて幅を調整 */
    height: auto; /* 自然な高さを保つ */
    aspect-ratio: 1200 / 630; /* モバイルでも同じ比率を維持 */
    object-fit: contain; /* トリミングを避けて全体表示 */
  }
}

/* タイトルとサムネイル間の余白 */
.blog-header {
  margin-bottom: var(--spacing-base); /* サムネイル下に余白を追加 */
  text-align: center;
}

/* メタ情報部分 */
.blog-meta {
  font-size: var(--font-small); /* 小さめのフォントサイズに調整 */
  color: var(--color-text); /* テキストカラーを統一 */
  margin-bottom: var(--spacing-small); /* 下余白を調整 */
}

/* 記事内画像のスタイル修正 */
.blog-content img {
  display: block;
  max-width: 100%; /* 親要素の幅を超えない */
  height: auto; /* 縦横比を保持 */
  margin: var(--spacing-small) auto; /* 上下の余白と中央揃え */
  border-radius: var(--spacing-small); /* 角を丸める */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 軽い影を追加 */
}

/* デスクトップでの画像サイズ調整 */
@media screen and (min-width: 1024px) {
  .blog-content img {
    width: 80%; /* デスクトップでは画像幅を親要素の80%に設定 */
    margin: var(--spacing-base) auto; /* 上下余白を統一して中央揃え */
  }
}

/* モバイルでの画像調整 */
@media screen and (max-width: 768px) {
  .blog-content img {
    width: 100%; /* モバイルでは親要素幅に合わせる */
    margin: var(--spacing-small) auto; /* 上下余白を縮小 */
  }
}

/* 著者情報の全体スタイル */
.blog-author-info {
  margin-top: var(--spacing-large); /* 上余白を調整 */
  background-color: var(--color-background); /* ニュートラルカラーの背景色 */
  border-radius: var(--spacing-small); /* 角丸を追加 */
  box-shadow: 0 2px 5px var(--color-shadow); /* 軽い影を追加 */
  padding: var(--spacing-base); /* 内側の余白を統一 */
  display: flex;
  align-items: center;
  gap: var(--spacing-base); /* 要素間の余白 */
  max-width: 800px; /* 最大幅を設定 */
  margin: var(--spacing-large) auto; /* 中央揃え */
}

/* 著者画像 */
.blog-author-info .author-image img {
  width: 120px; /* 画像の幅 */
  height: 120px; /* 画像の高さ */
  border-radius: 50%; /* 画像を丸くする */
  object-fit: cover; /* 中央トリミング */
  border: 3px solid var(--color-primary); /* メインカラーの枠線 */
}

/* 著者詳細情報 */
.blog-author-info .author-bio {
  flex: 1; /* 余白を埋める */
  text-align: left; /* 左揃え */
}

.blog-author-info .author-bio h3 {
  font-size: var(--font-large); /* 見出しのフォントサイズを統一 */
  margin-bottom: var(--spacing-small); /* 下余白を調整 */
  color: var(--color-primary); /* メインカラー */
  font-weight: bold;
}

.blog-author-info .author-bio p {
  font-size: var(--font-base); /* 基本フォントサイズ */
  color: var(--color-text); /* ニュートラルな文字色 */
  line-height: 1.8; /* 行間を広げて読みやすく */
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
  .blog-author-info {
    flex-direction: column; /* 縦並びにする */
    align-items: center; /* 中央揃え */
    text-align: center; /* テキストも中央揃え */
  }

  .blog-author-info .author-bio {
    text-align: center; /* モバイルでは中央揃え */
  }

  .blog-author-info .author-image img {
    width: 100px; /* モバイルでは少し小さく */
    height: 100px;
  }
}

/* カルーセル全体 */
.carousel-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 1200px; /* 最大幅を設定 */
  margin: var(--spacing-base) auto;
  background-color: var(--color-background); /* ニュートラルな背景色 */
  border-radius: var(--spacing-small); /* 柔らかさを追加 */
  box-shadow: 0 4px 10px var(--color-shadow); /* 軽い影を追加 */
}

/* トラック（スライド全体） */
.carousel-track-container {
  overflow: hidden;
  width: 100%;
}

.carousel-track {
  display: flex;
  transition: transform 0.4s ease-in-out;
  will-change: transform;
}

/* スライド */
.carousel-slide {
  min-width: calc(100% / 3); /* デフォルトは3列表示 */
  box-sizing: border-box;
  padding: var(--spacing-small); /* 内側の余白を統一 */
}

.related-post-item {
  display: block;
  background: var(--color-background); /* 背景色を統一 */
  border-radius: var(--spacing-small); /* 柔らかい角丸を追加 */
  box-shadow: 0 2px 5px var(--color-shadow); /* 軽い影を追加 */
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.related-post-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px var(--color-shadow); /* ホバー時の強調された影 */
}

/* サムネイル画像調整 */
.related-post-thumbnail img {
  width: 100%;
  height: 150px;
  object-fit: cover; /* 比率を維持しつつトリミング */
  border-bottom: 1px solid var(--color-shadow); /* シャドウ色で区切り線 */
}

.related-post-title {
  padding: var(--spacing-small);
  font-size: var(--font-base); /* フォントサイズを統一 */
  font-weight: bold;
  color: var(--color-text); /* テキストカラー */
  text-align: center;
}

/* ナビゲーションボタン */
.carousel-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--color-primary); /* メインカラー */
  color: var(--color-background); /* 明るい背景色 */
  border: none;
  border-radius: var(--spacing-small); /* 角丸を少し付ける */
  width: 50px; /* ボタンサイズを少し大きく */
  height: 50px;
  cursor: pointer;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2px 5px var(--color-shadow); /* 軽い影を追加 */
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.carousel-control.prev {
  left: var(--spacing-base); /* 左ボタンの位置 */
}

.carousel-control.next {
  right: var(--spacing-base); /* 右ボタンの位置 */
}

.carousel-control:hover {
  background: var(--color-accent); /* ホバー時にアクセントカラー */
  transform: translateY(-50%) scale(1.1); /* ホバー時に少し拡大 */
}

.carousel-control:focus {
  outline: none;
}

/* SVGアイコン */
.carousel-control svg {
  width: 20px;
  height: 20px;
  fill: var(--color-background); /* 明るい背景色 */
  transition: fill 0.3s ease;
}

.carousel-control:hover svg {
  fill: var(--color-secondary); /* ホバー時にサブカラー */
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
  .carousel-slide {
    min-width: calc(100% / 2); /* タブレットでは2列表示 */
  }

  .carousel-control {
    width: 30px; /* ボタンサイズを縮小 */
    height: 30px;
  }

  .carousel-control svg {
    width: 15px; /* SVGアイコンの幅を調整 */
    height: 15px; /* SVGアイコンの高さを調整 */
  }
}

@media screen and (max-width: 480px) {
  .carousel-slide {
    min-width: 100%; /* モバイルでは1列表示 */
  }

  .carousel-control {
    width: 25px; /* ボタンサイズをさらに縮小 */
    height: 25px;
  }

  .carousel-control svg {
    width: 12px; /* モバイル向けにさらに小さく */
    height: 12px;
  }
}

/* mainコンテンツが少ない場合にフッターを下に固定 */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* ページ全体の高さを100%に */
  margin: 0;
}

#site-main {
  flex: 1; /* フレックスでメインコンテンツの高さを調整 */
}

/* 実績紹介シングルページ */
.single-work .work-detail {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--spacing-large) var(--spacing-base);
  box-sizing: border-box;
}

/* セクションスタイル */
.single-work section {
  margin-bottom: var(--spacing-large);
}

.work-header {
  text-align: center;
  margin-bottom: var(--spacing-large);
}

.work-title {
  font-size: var(--font-xlarge);
  color: var(--color-primary);
}

.work-intro p,
.work-process p,
.work-results p {
  font-size: var(--font-base);
  color: var(--color-text);
  line-height: 1.8;
}

.work-actions ul {
  list-style: disc;
  margin-left: var(--spacing-base);
}

.work-actions li {
  font-size: var(--font-base);
  color: var(--color-text);
  margin-bottom: var(--spacing-small);
}

.work-link a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color 0.3s ease;
}

.work-link a:hover {
  color: var(--color-primary);
}

/* 実施内容 */
.work-actions {
  margin-bottom: var(--spacing-large);
}

.work-actions .work-action {
  margin-bottom: var(--spacing-base); /* 各実施内容の間に余白 */
}

.work-actions h3 {
  font-size: var(--font-base);
  color: var(--color-primary);
  margin-bottom: var(--spacing-small);
}

.work-actions p {
  font-size: var(--font-base);
  color: var(--color-text);
  line-height: 1.8;
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
  .work-title {
    font-size: var(--font-large);
  }
}

/* アイキャッチ画像のスタイル */
.work-featured-image {
  margin: var(--spacing-large) auto;
  text-align: center;
}

.work-featured-image img.work-thumbnail {
  width: 100%;
  max-width: 800px; /* 最大幅を800pxに制限 */
  height: auto;
  border-radius: var(--spacing-small); /* 角丸 */
  box-shadow: 0 4px 15px var(--color-shadow); /* 軽い影 */
}

/* お問い合わせページ全体 */
.page-contact {
  background-color: var(--color-background);
  color: var(--color-text);
}

/* ヒーローセクション */
.contact-hero {
  background-color: var(--color-background);
  color: var(--color-primary);
  text-align: center;
  padding: var(--spacing-large) var(--spacing-base);
}

.contact-title {
  font-size: var(--font-xlarge);
  margin-bottom: var(--spacing-base);
}

.contact-description {
  font-size: var(--font-base);
  margin-bottom: var(--spacing-base);
}

/* フォームセクション */
.contact-form-section {
  padding: var(--spacing-base) var(--spacing-base);
}

.contact-form-section .container {
  max-width: 800px;
  margin: 0 auto;
}

/* フォーム要素 */
.wpcf7 form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-base);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-base);
}

.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 100%;
  padding: var(--spacing-small);
  font-size: var(--font-base);
  border: 1px solid var(--color-shadow);
  border-radius: var(--spacing-small);
  box-sizing: border-box;
}

.contact-form input[type="submit"] {
  background-color: var(--color-primary);
  color: var(--color-background);
  border: none;
  border-radius: var(--spacing-small);
  padding: var(--spacing-small) var(--spacing-base);
  cursor: pointer;
}

.wpcf7 input,
.wpcf7 textarea {
  width: 100%;
  padding: var(--spacing-small);
  font-size: var(--font-base);
  border: 1px solid var(--color-shadow);
  border-radius: var(--spacing-small);
}

.wpcf7 input:focus,
.wpcf7 textarea:focus {
  border-color: var(--color-primary);
  outline: none;
}

.wpcf7 submit {
  background-color: var(--color-primary);
  color: var(--color-background);
  border: none;
  padding: var(--spacing-small) var(--spacing-base);
  font-size: var(--font-base);
  border-radius: var(--spacing-small);
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.wpcf7 submit:hover {
  background-color: var(--color-accent);
}

/* お問い合わせ情報セクション */
.contact-info {
  background-color: var(--color-background);
  color: var(--color-text);
  padding: var(--spacing-large) var(--spacing-base);
  text-align: center;
}

.contact-info .section-title {
  font-size: var(--font-large);
  margin-bottom: var(--spacing-base);
}

/* フォーム全体 */
.wpcf7 form {
  display: grid;
  grid-template-columns: 1fr; /* 全幅表示 */
  gap: var(--spacing-base); /* 項目間の余白 */
}

/* ラベル */
.wpcf7 label {
  display: block;
  font-size: var(--font-base);
  color: var(--color-text);
  margin-bottom: var(--spacing-small);
}

/* 入力フィールド */
.wpcf7 input,
.wpcf7 textarea,
.wpcf7 select {
  width: 100%;
  padding: var(--spacing-small);
  font-size: var(--font-base);
  border: 1px solid var(--color-shadow);
  border-radius: var(--spacing-small);
  box-sizing: border-box;
}

/* フォーカス時のスタイル */
.wpcf7 input:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus {
  border-color: var(--color-primary);
  outline: none;
}

/* 送信ボタン */
.wpcf7 input[type="submit"] {
  background-color: var(--color-primary);
  color: var(--color-background);
  padding: var(--spacing-small) var(--spacing-base);
  font-size: var(--font-base);
  border: none;
  border-radius: var(--spacing-small);
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.wpcf7 input[type="submit"]:hover {
  background-color: var(--color-accent);
}

/* service各ページデザイン用 */
/* LP専用のヒーローセクション */
.lp-service .hero {
  background: url("images/top_hero_background_1920x1080.png") no-repeat center
    center/cover;
  padding: var(--spacing-large) var(--spacing-base);
  text-align: center;
  color: var(--color-background);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 400px;
}

.lp-service .hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1;
}

.lp-service .hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.lp-service .hero h1 {
  font-size: var(--font-xlarge);
  color: var(--color-primary);
  margin-bottom: var(--spacing-base);
  text-shadow: 0 2px 4px var(--color-shadow);
}

.lp-service .hero p {
  font-size: var(--font-large);
  color: var(--color-background);
  margin-bottom: var(--spacing-base);
}

.lp-service .hero-buttons {
  display: flex;
  gap: var(--spacing-small);
  justify-content: center;
  margin-top: var(--spacing-base);
}

.lp-service .hero-buttons .button-primary {
  background-color: var(--color-accent);
  color: var(--color-background);
  font-size: var(--font-large);
  padding: var(--spacing-small) var(--spacing-base);
  border-radius: var(--spacing-small);
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.lp-service .hero-buttons .button-primary:hover {
  background-color: var(--color-primary);
}

.lp-service .section-title {
  font-size: var(--font-large);
  text-align: center;
  color: var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: var(--spacing-small);
}

/* LP専用：各セクションの枠とオレンジのラインを削除 */
.lp-service .section {
  background-color: transparent;
  padding: var(--spacing-large) var(--spacing-base);
  box-shadow: none;
  border-radius: 0;
  border-top: none;
  margin: var(--spacing-base) auto;
}

/* LP専用：お悩みリストのシンプルデザイン */
.lp-service .concerns {
  background-color: transparent;
  padding: var(--spacing-large) var(--spacing-base);
  text-align: center;
}

/* お悩みリスト */
.lp-service .concerns-list {
  list-style: disc;
  padding-left: 1.5em;
  margin: var(--spacing-base) auto;
  max-width: 600px;
  text-align: left;
}

.lp-service .concerns-list li {
  margin-bottom: var(--spacing-small);
}

/* 丸画像（悩んでいる人のイラスト） */
.lp-service .concern-image {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}

/* テキスト */
.lp-service .concern-text {
  font-size: var(--font-base);
  color: var(--color-text);
  font-weight: 500;
}

/* モバイル対応 */
@media screen and (max-width: 768px) {
  .lp-service .concerns-list {
    gap: var(--spacing-small);
  }
  .lp-service .concerns-list li {
    flex-direction: row;
    align-items: center;
    text-align: left;
  }
  .lp-service .concern-image {
    width: 40px;
    height: 40px;
  }
}

/* LP専用：選ばれる3つの理由 */
.lp-service .reasons-grid {
  display: flex;
  gap: var(--spacing-base);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--spacing-base);
}

.lp-service .reason-card {
  background: white;
  padding: var(--spacing-large);
  border-radius: var(--spacing-small);
  box-shadow: 0 2px 5px var(--color-shadow);
  text-align: center;
  width: 30%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.lp-service .reason-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px var(--color-shadow);
}

.lp-service .reason-icon {
  font-size: var(--font-xlarge);
  color: var(--color-accent);
  margin-bottom: var(--spacing-small);
}

.lp-service .reason-card h3 {
  font-size: var(--font-large);
  color: var(--color-primary);
  margin-bottom: var(--spacing-small);
}

.lp-service .reason-card p {
  font-size: var(--font-base);
  color: var(--color-text);
  line-height: 1.6;
}

/* モバイル対応 */
@media screen and (max-width: 768px) {
  .lp-service .reasons-grid {
    flex-direction: column;
    align-items: center;
  }

  .lp-service .reason-card {
    width: 90%;
    padding: var(--spacing-base);
  }

  .lp-service .reason-icon {
    font-size: var(--font-large);
  }
}

/* LP専用：実績セクションのスタイル調整 */
.lp-service .lp-support {
  background-color: transparent;
  padding: var(--spacing-large) var(--spacing-base);
  box-shadow: none;
  border-radius: 0;
  text-align: center;
}

/* 実績グリッド */
.lp-service .support-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-large);
  max-width: 1200px;
  margin: 0 auto;
}

/* 実績カード */
.lp-service .support-card {
  background: white;
  padding: var(--spacing-large);
  border-radius: var(--spacing-small);
  box-shadow: 0 2px 5px var(--color-shadow);
  text-align: left;
  flex: 1;
  min-width: 280px;
  max-width: 400px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.lp-service .support-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px var(--color-shadow);
}

/* 画像のスタイル調整 */
.lp-service .support-image {
  width: 100%;
  overflow: hidden;
  border-radius: var(--spacing-small);
  text-align: center;
}

.lp-service .support-image img {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
}

/* モバイル対応（画像がはみ出さないよう調整） */
@media screen and (max-width: 768px) {
  .lp-service .support-grid {
    flex-direction: column;
    align-items: center;
  }
  .lp-service .support-card {
    width: 90%;
    max-width: 400px;
  }
  .lp-service .support-image img {
    max-width: 100%;
  }
}

/* カテゴリータグ */
.lp-service .support-tag {
  position: absolute;
  top: var(--spacing-small);
  left: var(--spacing-small);
  font-size: var(--font-small);
  padding: var(--spacing-small) var(--spacing-base);
  border-radius: var(--spacing-small);
  color: white;
}

.lp-service .support-tag.clinic {
  background-color: var(--color-primary);
}

.lp-service .support-tag.dental {
  background-color: var(--color-primary);
}

.lp-service .support-card h3 {
  font-size: var(--font-large);
  color: var(--color-primary);
  margin-bottom: var(--spacing-small);
}

.lp-service .support-card p {
  font-size: var(--font-base);
  color: var(--color-text);
  line-height: 1.6;
}

/* 「もっと見る」ボタン */
.lp-service .more-button-container {
  text-align: center;
  margin-top: var(--spacing-large);
}

.lp-service .more-button-container .button-primary {
  background-color: var(--color-primary);
  color: var(--color-background);
  font-size: var(--font-large);
  padding: var(--spacing-small) var(--spacing-base);
  border-radius: var(--spacing-small);
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.lp-service .more-button-container .button-primary:hover {
  background-color: var(--color-accent);
}

/* モバイル対応 */
@media screen and (max-width: 768px) {
  .lp-service .support-grid {
    flex-direction: column;
    align-items: center;
  }

  .lp-service .support-card {
    width: 90%;
    padding: var(--spacing-base);
  }
}

/* グリッドレイアウト */
.lp-service .pricing-grid {
  display: flex;
  gap: var(--spacing-base);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--spacing-base);
}

.lp-service .pricing-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px var(--color-shadow);
}

.lp-service .pricing-card h3 {
  font-size: var(--font-large);
  color: var(--color-primary);
  margin-bottom: var(--spacing-small);
}

.lp-service .price {
  font-size: var(--font-xlarge);
  font-weight: bold;
  color: var(--color-accent);
  margin-bottom: var(--spacing-base);
}

.lp-service .price span {
  font-size: var(--font-base);
  color: var(--color-text);
  font-weight: normal;
}

/* プラン内容リスト */
.lp-service .pricing-list {
  list-style: none;
  padding: 0;
  margin-bottom: var(--spacing-base);
}

.lp-service .pricing-list li {
  font-size: var(--font-base);
  color: var(--color-text);
  text-align: left;
  padding-left: var(--spacing-base);
}

/* お問い合わせボタン */
.lp-service .pricing-card .button-primary,
.lp-service .pricing-card .button-secondary {
  display: block;
  margin-top: var(--spacing-small);
  padding: var(--spacing-small) var(--spacing-base);
  font-size: var(--font-base);
  border-radius: var(--spacing-small);
  text-align: center;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

/* モバイル対応 */
@media screen and (max-width: 768px) {
  .lp-service .pricing-grid {
    flex-direction: column;
    align-items: center;
  }
  .lp-service .price {
    font-size: var(--font-large);
  }
}
/* LP専用：契約までの流れ（コンパクトなデザイン） */
.lp-service .lp-flow {
  background-color: transparent;
  padding: var(--spacing-large) var(--spacing-base);
  text-align: left;
  margin: 0 auto;
}

/* フローコンテナ */
.lp-service .flow-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-medium);
  max-width: 800px;
  margin: 0 auto;
}

/* 各STEPのデザイン */
.lp-service .flow-step {
  display: flex;
  gap: var(--spacing-medium);
  padding: var(--spacing-small) 0;
  border-bottom: 1px solid var(--color-border);
}

/* STEP 番号（左配置の丸型デザイン） */
.lp-service .step-number {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  background: var(--color-primary);
  color: white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-size: var(--font-medium);
}

/* テキストエリア */
.lp-service .step-text {
  flex: 1;
}

.lp-service .step-text h3 {
  font-size: var(--font-large);
  color: var(--color-primary);
  margin-bottom: var(--spacing-small);
}

.lp-service .step-text p {
  font-size: var(--font-base);
  color: var(--color-text);
  line-height: 1.6;
}

/* モバイル対応（縦並び） */
@media screen and (max-width: 768px) {
  .lp-service .flow-step {
    align-items: flex-start;
  }
  .lp-service .step-text h3 {
    font-size: var(--font-medium);
  }
  .lp-service .step-text p {
    font-size: var(--font-small);
  }
}

/* FAQ全体 */
.lp-service .faq-container {
  max-width: 800px;
  margin: var(--spacing-base) auto;
  text-align: left;
}

/* 各質問項目 */
.lp-service .faq-item {
  margin-bottom: var(--spacing-small);
}

/* 質問ボタン */
.lp-service .faq-question {
  width: 100%;
  background: none;
  border: none;
  font-size: var(--font-large);
  color: var(--color-primary);
  text-align: left;
  padding: var(--spacing-small) var(--spacing-base);
  cursor: pointer;
  transition: background-color 0.3s ease;
  position: relative;
}

.lp-service .faq-question::after {
  content: "＋";
  position: absolute;
  right: var(--spacing-base);
  font-size: var(--font-large);
  color: var(--color-accent);
}

/* 開いた時の状態 */
.lp-service .faq-item.open .faq-question {
  background-color: var(--color-primary);
  color: var(--color-background);
}

.lp-service .faq-item.open .faq-question::after {
  content: "−";
  color: var(--color-background);
}

/* 答え部分（デフォルトは非表示） */
.lp-service .faq-answer {
  display: none;
  padding: var(--spacing-small) var(--spacing-base);
  font-size: var(--font-base);
  color: var(--color-text);
  background: white;
  border-left: 3px solid var(--color-primary);
  margin-top: var(--spacing-small);
}

/* モバイル対応 */
@media screen and (max-width: 768px) {
  .lp-service .faq-container {
    width: 100%;
  }

  .lp-service .faq-question {
    font-size: var(--font-base);
  }
}
/* LP専用：締めフッター */
.lp-service .lp-footer {
  background-color: var(--color-primary);
  color: var(--color-background);
  padding: var(--spacing-large) var(--spacing-base);
  text-align: center;
  margin: var(--spacing-large) auto 0;
  max-width: 1200px;
  width: 100%;
  box-sizing: border-box;
}

.lp-service .footer-title {
  font-size: var(--font-xlarge);
  color: var(--color-background);
  font-weight: bold;
  margin-bottom: var(--spacing-small);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.lp-service .footer-description {
  font-size: var(--font-large);
  margin-bottom: var(--spacing-base);
}

.lp-service .lp-footer .button-primary {
  background-color: var(--color-accent);
  color: var(--color-background);
  font-size: var(--font-large);
  padding: var(--spacing-small) var(--spacing-base);
  border-radius: var(--spacing-small);
  text-decoration: none;
  transition: background-color 0.3s ease;
  display: inline-block;
}

.lp-service .lp-footer .button-primary:hover {
  background-color: var(--color-secondary);
}

/* モバイル対応 */
@media screen and (max-width: 768px) {
  .lp-service .footer-title {
    font-size: var(--font-large);
  }

  .lp-service .footer-description {
    font-size: var(--font-base);
  }
}

/* LP専用：料金プランのスタイル調整 */
.lp-service .lp-pricing {
  background-color: transparent;
  padding: var(--spacing-large) var(--spacing-base);
  box-shadow: none;
  border-radius: 0;
  text-align: center;
}

/* プランのグリッドレイアウト */
.lp-service .pricing-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-large);
  max-width: 100%;
  padding: 0 var(--spacing-base);
  box-sizing: border-box;
}

/* プランカード */
.lp-service .pricing-card {
  background: white;
  padding: var(--spacing-small);
  border-radius: var(--spacing-small);
  box-shadow: 0 2px 5px var(--color-shadow);
  text-align: left;
  max-width: 400px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
  box-sizing: border-box;
}

.lp-service .pricing-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px var(--color-shadow);
}

/* プランラベル */
.lp-service .plan-label {
  display: inline-block;
  background: var(--color-primary);
  color: white;
  font-size: var(--font-small);
  font-weight: bold;
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: var(--spacing-small);
  text-transform: uppercase;
}

/* 料金テキストの調整 */
.lp-service .price {
  font-size: var(--font-large);
  font-weight: bold;
  color: var(--color-primary);
  margin-bottom: var(--spacing-small);
}

.lp-service .contract-period {
  font-weight: bold;
  font-size: 1rem;
  color: #333;
  margin-bottom: 5px;
}

.lp-service .price-note {
  font-size: 0.8rem;
  color: #777;
  margin-top: 5px;
}

/* 料金プランのリスト */
.lp-service .pricing-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.lp-service .pricing-list li {
  font-size: var(--font-base);
  padding: var(--spacing-small) 0;
  border-bottom: 1px solid var(--color-shadow);
}

/* モバイル対応（横幅調整） */
@media screen and (max-width: 768px) {
  .lp-service .lp-pricing .section-title {
    text-align: center;
  }
  .lp-service .pricing-grid {
    flex-direction: column;
    align-items: center;
  }
  .lp-service .pricing-card {
    text-align: center;
  }
}

/* LP専用：理由セクションのコンテナ */
.lp-service .reasons-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-large);
  max-width: 1000px;
  margin: 0 auto;
}

/* LP専用：理由項目（画像とテキストの2カラム） */
.lp-service .reason-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-large);
  flex-wrap: wrap;
}

/* LP専用：画像 */
.lp-service .reason-image {
  flex: 1;
  max-width: 40%;
  text-align: center;
}

.lp-service .reason-image img {
  width: 100%;
  height: auto;
  max-width: 300px;
  border-radius: var(--spacing-small);
}

/* LP専用：テキストエリア */
.lp-service .reason-text {
  flex: 1;
  text-align: left;
  max-width: 55%;
}

.lp-service .reason-text h3 {
  font-size: var(--font-large);
  color: var(--color-primary);
  margin-bottom: var(--spacing-small);
  text-align: left;
}

.lp-service .reason-text p {
  font-size: var(--font-base);
  color: var(--color-text);
  line-height: 1.6;
  text-align: left;
}

/* モバイル対応（交互配置を適切に調整） */
@media screen and (max-width: 768px) {
  .lp-service .reason-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--spacing-small);
  }
  .lp-service .reason-image,
  .lp-service .reason-text {
    max-width: 100%;
  }
  .lp-service .reason-text {
    padding: 0 var(--spacing-base);
    text-align: center;
  }
  .lp-service .reason-image img {
    max-width: 80%;
  }
}

/* LP専用：こんなお悩みリストの横幅制限 */
.lp-service .concerns-list {
  max-width: 600px; /* リストの最大幅を制限 */
}

.ebook-archive {
  padding: 60px 20px;
  text-align: center;
}

.ebook-archive .filter-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-small);
  margin-top: var(--spacing-base);
}

.ebook-archive .filter-form label {
  font-size: var(--font-small);
  color: var(--color-text);
}

.ebook-archive .filter-form select {
  padding: var(--spacing-small);
  border-radius: var(--spacing-small);
  border: 1px solid var(--color-shadow);
}

.ebook-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 40px;
}

@media screen and (max-width: 768px) {
  .ebook-grid {
    grid-template-columns: 1fr;
  }
}

.ebook-card {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ebook-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

.ebook-card img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.ebook-card h3 {
  margin-top: 10px;
  font-size: 1.2rem;
  color: #003f91;
}

.ebook-card .ebook-category {
  display: inline-block;
  margin-top: var(--spacing-small);
  font-size: var(--font-small);
  color: var(--color-secondary);
}

.ebook-single {
  padding: 60px 20px;
}

.ebook-wrapper {
  display: flex;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
  align-items: flex-start;
}

/* 左側: 資料情報 */
.ebook-content {
  flex: 2;
  text-align: left;
}

.ebook-content h1 {
  font-size: 2rem;
  color: #003f91;
  margin-bottom: 20px;
}

.ebook-content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 20px;
}

.ebook-description {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #333;
  margin-bottom: 20px;
}

.ebook-cta {
  margin-top: 30px;
}

.button-primary {
  background: #003f91;
  color: white;
  padding: 12px 20px;
  text-decoration: none;
  border-radius: 5px;
  display: inline-block;
  transition: background 0.3s ease;
}

.button-primary:hover {
  background: #002f6c;
}

/* 右側: 資料請求フォーム */
.ebook-form {
  flex: 1;
  background: #f8f9fa;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 63, 145, 0.1);
  text-align: center;
}

.ebook-download-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-base);
  text-align: left;
}

.ebook-download-form input,
.ebook-download-form textarea {
  width: 100%;
  padding: var(--spacing-small);
  font-size: var(--font-base);
  border: 1px solid var(--color-shadow);
  border-radius: var(--spacing-small);
  box-sizing: border-box;
}

.ebook-download-form input[type="submit"] {
  background-color: var(--color-primary);
  color: var(--color-background);
  border: none;
  border-radius: var(--spacing-small);
  padding: var(--spacing-small) var(--spacing-base);
  cursor: pointer;
  text-align: center;
}

.ebook-form h2 {
  font-size: 1.5rem;
  color: #003f91;
  margin-bottom: 15px;
}

.ebook-form p {
  font-size: 1rem;
  color: #555;
  margin-bottom: 20px;
}

/* モバイル対応 */
@media (max-width: 768px) {
  .ebook-wrapper {
    flex-direction: column;
    gap: 20px;
  }

  .ebook-form {
    order: 2;
  }

  .ebook-content {
    order: 1;
  }
}