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

body {
  font-family: Arial, sans-serif;
  line-height: 1.5;
  color: #404040;
  margin: 0;
}

/* 固定時にメニューの下のコンテンツが隠れないように余白を確保 */
.mainnnavigation-padding {
  padding-top: 60px; /* メニューの高さ分 */
}

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

/* Navigation Menu */
.main-navigation {
  background-color: #004466;
  padding: 10px 0;
  text-align: center;
  width: 100%;
  transition: all 0.3s ease-in-out;
}

/* スクロールで固定されるスタイル */
.main-navigation-fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.main-navigation .menu {
  display: flex;
  justify-content: center;
  list-style: none;
}

.main-navigation .menu li {
  margin: 0 15px;
}

.main-navigation .menu li a {
  color: white;
  text-decoration: none;
  font-weight: bold;
  padding: 5px 10px;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.main-navigation .menu li a:hover {
  background-color: #0088cc;
}

@media (max-width: 768px) {
  .main-navigation .menu {
    flex-direction: column;
  }

  .main-navigation .menu li {
    margin-bottom: 10px;
  }
}

/*メインナビゲーション*/
/* Navigation Menu */
.main-navigation {
  background-color: #004466;
  padding: 10px 0;
  text-align: center;
}

.main-navigation .menu {
  display: flex;
  justify-content: center;
  list-style: none;
}

.main-navigation .menu li {
  margin: 0 15px;
}

.main-navigation .menu li a {
  color: white;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.1rem; /* 文字サイズを指定 */
  padding: 5px 10px;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.main-navigation .menu li a:hover {
  background-color: #0088cc;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .main-navigation .menu {
    flex-direction: column;
  }

  .main-navigation .menu li {
    margin-bottom: 10px;
  }

  .main-navigation .menu li a {
    font-size: 1rem; /* スマホ用に少し小さくする */
  }
}

/*--------------------------------------------------------------*/
/* ハンバーガーメニューボタンのスタイル（スマホ専用） */
/*--------------------------------------------------------------*/
.menu-toggle {
  display: none; /* 初期状態では非表示 */
  flex-direction: column;
  justify-content: space-around;
  width: 40px; /* ボタンの幅 */
  height: 35px; /* ボタンの高さ */
  position: fixed; /* 固定表示 */
  top: 10px; /* 上からの距離 */
  right: 10px; /* 右からの距離 */
  z-index: 1000;
  cursor: pointer;
  background-color: rgba(0, 68, 102, 0.6); /* 半透明の背景色 */
  border-radius: 5px; /* ボタンの角丸 */
  padding: 5px;
  opacity: 1; /* 初期状態で表示 */
  transition: opacity 0.3s ease-in-out; /* フェードイン・アウトのアニメーション */
}

.menu-toggle.hidden {
  opacity: 0; /* 非表示時の透明度 */
  pointer-events: none; /* クリックを無効化 */
}

.menu-toggle span {
  display: block;
  width: 100%;
  height: 4px; /* 線の高さ */
  background-color: #fff; /* 線の色 */
  border-radius: 2px; /* 線の角丸 */
}

/* スマホ限定でハンバーガーメニューを表示 */
@media (max-width: 768px) {
  .menu-toggle {
    display: flex; /* スマホで表示 */
  }
}

/* Content Sections */
.requester-text {
  background-color: #3333cc;
  color: white;
  text-align: center;
  padding: 20px 0;
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 50px;
}

.additional-image {
  text-align: center;
  margin: 30px 0;
}

.additional-image img {
  max-width: 100%;
  height: auto;
  display: inline-block;
}

/* PC版（デフォルト） */
.support-text {
  text-align: center;
  font-size: calc(1 / 16) rem;
  font-weight: bold;
  margin: 30px 0;
  color: #000;
}

/* スマホ版 */
@media (max-width: 768px) {
  .support-text .line-break {
    display: block; /* スマホで強制改行 */
  }
}

.site-header {
  background-color: #004466;
  padding: 20px;
  text-align: center;
}

@media (max-width: 768px) {
  .site-header {
    background-color: #004466;
    padding: 40px 0 5px 0px;
    text-align: center;
  }
}

.support-image img {
  display: block;
  max-width: 100%px;
  margin: 0 auto;
  height: auto;
}

.large-heading {
  text-align: center;
  font-size: 1rem;
  font-weight: bold;
  color: rgb(0, 170, 255);
  margin: 50px 0;
}

/* 点検事例 */
.inspection-hidden-section {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.inspection-item {
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.inspection-item h3 {
  font-size: 1rem;
  margin-bottom: 15px;
  color: #333;
}

.inspection-item img {
  max-width: 100%;
  height: auto;
  margin-bottom: 15px;
  border-radius: 5px;
}

.inspection-item p {
  text-align: left; /* 該当セクション内の段落だけ左寄せ */
  font-size: 1rem;
  color: #555;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .inspection-hidden-section {
    grid-template-columns: 1fr;
  }
}

/* Parallax Section */
.parallax-section {
  position: relative;
  height: 500px; /* セクションの高さを調整 */
  background-image: url("https://step-up7.jp/wp-content/uploads/2024/12/AdobeStock_793366095_1920-1080.jpg");
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-align: center;
}

.parallax-content {
  font-size: 2rem;
  background: rgba(0, 0, 0, 0.5); /* 半透明の背景でテキストを強調 */
  padding: 10px 20px;
  border-radius: 8px;
}

@keyframes fadeIn {
  to {
    opacity: 1; /* 不透明にする */
    transform: translateY(0); /* 元の位置に戻す */
  }
}

/* 青帯のデザイン（メニュー背景と同じ色で全幅） */
.full-width-blue-banner {
  background-color: #004466; /* メニュー背景と同じ色 */
  color: white;
  text-align: center;
  padding: 15px 15px;
  font-size: 1.5rem;
  font-weight: bold;
  margin: 0 0 50px 0; /* 隙間をなくす */
  width: 100%; /* 幅いっぱいにする */
}

/* 青帯のデザイン（スマホ版用） */
@media (max-width: 768px) {
  .full-width-blue-banner {
    background-color: #004466; /* メニュー背景と同じ色 */
    color: white; /* テキスト色 */
    text-align: center; /* 中央揃え */
    padding: 10px 10px; /* 内側の余白を縮小 */
    font-size: 1.4rem; /* フォントサイズを縮小 */
    font-weight: normal; /* 太字 */
    margin: 0 0 30px 0; /* マージンを調整 */
    width: 100%; /* 幅いっぱい */
  }
}

.purple-banner {
  background-color: transparent; /* 背景色を削除 */
  color: #4b0082; /* 暗い紫色 (例: インディゴ色) */
  text-align: center;
  font-size: 1.5rem; /* 必要に応じてフォントサイズを調整 */
  font-weight: bold;
  padding: 10px 0; /* 必要に応じて余白を調整 */
  margin: 0 auto;
}

/* 軽微な作業は無料サービスの帯 */
.light-banner {
  background-color: #004466; /* ご依頼主の帯と同じ色 */
  color: white;
  text-align: center;
  font-size: 1.5rem; /* フォントサイズ */
  font-weight: bold;
  padding: 10px 0; /* 高さ調整 */
  margin: 0 auto;
  width: 100%;
}

/* よくあるご質問タイトルのスタイル */
.faq-title {
  text-align: center; /* 中央寄せ */
  font-size: 1rem; /* タイトルの大きさを調整 */
  font-weight: bold;
  color: #ffffff; /* トップメニューと同じ色 */
  margin: 60px auto 40px; /* 上に60px、下に40pxの余白 */
}

/* 各質問と回答のセット全体のスタイル */
.faq-item {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 8px;
}

/* 質問のスタイル */
.faq-question {
  color: #004466; /* トップメニューと同じ色 */
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 10px;
}

/* 回答のスタイル */
.faq-answer {
  color: #555;
  font-size: 1rem;
  line-height: 1.6;
  padding-left: 10px;
}

/* セクション全体の中央寄せ */
.faq-section {
  margin-left: auto;
  margin-right: auto;
  max-width: 800px; /* 最大幅を800pxに制限 */
  width: 100%; /* 画面サイズが800px未満の場合は全幅に対応 */
}

/* モバイル対応 */
@media (max-width: 768px) {
  .faq-section {
    max-width: 95%; /* モバイル時は少し狭くする */
  }
  .faq-subtitle {
    font-size: 1rem;
    padding: 10px;
  }
  .faq-question {
    font-size: 1rem;
  }
  .faq-answer {
    font-size: 1rem;
  }
}

/* 全幅表示の画像 */
.full-width-image {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 20px;
}

/* 注釈 */
.image-caption {
  font-size: 0.9rem;
  color: #666;
  text-align: center;
  margin-top: -10px;
  margin-bottom: 20px;
}

/* 横並び画像のスタイル */
.image-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 30px;
}

.image-row img {
  width: 48%; /* 横並び画像が2つの場合 */
  height: auto;
  border-radius: 5px;
}

/* 赤文字部分 */
.highlight-red {
  color: red;
  font-weight: bold;
}

/* セクション間の余白 */
.section {
  margin-bottom: 50px;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .image-row {
    flex-direction: column;
  }

  .image-row img {
    width: 100%; /* スマホでは縦に並べる */
  }

  .full-width-image {
    height: auto;
  }
}

/* シロアリの侵入経路 - 画像の注釈 */
.annotation {
  text-align: center;
  font-size: 1.2rem; /* 注釈の大きさを調整 */
  color: #555;
  margin-top: 10px;
  margin-bottom: 20px;
}

/* シロアリはここから侵入してくる - 横並び画像の調整 */
.double-image {
  display: flex;
  justify-content: center;
  gap: 20px;
  max-width: 1200px; /* 全体の幅を制限 */
  margin: 0 auto; /* 中央揃え */
}

.double-image img {
  width: 48%;
  height: auto;
  object-fit: contain;
}

/* テキストの文字サイズ調整 */
.text-large {
  font-size: 1.5rem;
  text-align: center;
  color: #333;
  margin-bottom: 20px;
}

.after-treatment-images {
  display: flex;
  justify-content: center;
  gap: 20px;
  max-width: 1200px; /* 幅を制限 */
  margin: 20px auto;
}

.after-treatment-images img {
  max-width: 48%;
  height: auto;
  object-fit: contain;
}

.annotation {
  text-align: center; /* 中央揃え */
  font-size: 1.2rem; /* フォントサイズを拡大 */
  color: #555; /* テキストの色 */
  margin-top: 10px;
  margin-bottom: 20px; /* 下部に少し余白を追加 */
}

.double-image {
  display: flex;
  justify-content: center; /* 中央揃え */
  gap: 20px; /* 画像間の隙間 */
  max-width: 1200px; /* 全体幅を制限 */
  margin: 0 auto; /* コンテナ全体を中央揃え */
}

.double-image img {
  width: 48%; /* 各画像の幅を50%未満に調整 */
  height: auto;
  object-fit: contain;
}

.after-treatment-images img {
  max-width: 48%; /* 幅を50%未満に制限 */
  height: auto;
  object-fit: contain;
}

.double-image {
  display: flex; /* 横並びに配置 */
  justify-content: center; /* 画像全体を中央揃え */
  gap: 20px; /* 画像間の間隔 */
  max-width: 1200px; /* セクション全体の最大幅 */
  margin: 0 auto; /* セクションを中央揃え */
}

.double-image img {
  width: 48%; /* 各画像の幅を調整 */
  height: auto; /* 高さを自動調整 */
  object-fit: contain; /* 画像が切れないように調整 */
}

/* 画像注釈 */
.annotation {
  text-align: center;
  font-size: 1.2rem; /* サイズを1.5倍 */
  color: #555;
  margin-top: 10px;
  margin-bottom: 20px; /* 画像下部との間隔を広げる */
}

.image-row {
  display: flex;
  justify-content: center;
  gap: 20px;
  max-width: 1200px; /* 幅を1200px以内に制限 */
  margin: 40px auto 0 auto;
}

.image-row img {
  width: 48%; /* 2つの画像を横並びで */
  height: auto;
  object-fit: contain;
}

.description {
  font-size: 1rem; /* 文字を大きく */
  line-height: 1.8; /* 行間を広くして見やすく */
  color: #333;
  text-align: center; /* 中央揃え */
  margin-bottom: 1rem;
}

.highlight {
  color: red; /* 赤文字部分 */
  font-weight: bold;
}

.description {
  font-size: 1rem; /* 文字を大きく */
  line-height: 1.8; /* 行間を広くして見やすく */
  color: #333;
  text-align: center; /* 中央揃え */
  margin-bottom: 20px;
  max-width: 1200px; /* 最大幅を画像に合わせる */
  margin: 0 auto; /* 中央揃え */
  padding: 0 20px; /* 左右に少し余白を追加 */
}

.highlight {
  color: red; /* 赤文字部分 */
  font-weight: bold;
}

.termite-varieties {
  margin: 40px 0;
  text-align: center;
}

.certification-item {
  text-align: center;
  margin-bottom: 20px; /* 下の余白を調整 */
  margin-top: 10px; /* 上の余白を調整 */
}

.certification-item img {
  width: 200px; /* 認定書画像のサイズ */
  height: auto; /* 縦横比を維持 */
  margin: 0 auto; /* 中央揃え */
}

.certification {
  display: flex;
  justify-content: center; /* 全体を中央揃え */
  align-items: center; /* 縦方向に揃える */
  gap: 60px; /* 画像間の間隔を調整 */
  flex-wrap: wrap; /* スマホ対応で折り返し */
}

.certification-title {
  font-size: 1rem; /* 文字サイズ */
  color: #333;
  text-align: center;
  margin-bottom: 10px; /* 画像との間隔を確保 */
}

footer {
  margin-top: 80px; /* フッターの上に余白を挿入 */
}

.certification-title {
  font-size: 1rem; /* 文字サイズ */
  color: #333;
  text-align: center; /* 中央揃え */
  line-height: 1.5; /* 行間を調整 */
  margin-bottom: 10px; /* 画像との間隔を確保 */
}

/* シロアリ防除施工プロセス - 画像グリッド */
.image-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2列 */
  gap: 20px; /* 画像間のスペース */
  max-width: 1200px;
  margin: 20px auto; /* 中央揃え */
}

.image-item img {
  width: 100%; /* 親要素に合わせる */
  height: auto;
  border-radius: 5px; /* 角を丸くする */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 影を追加 */
}

/* 安心の五年保証 - 認定書画像 */
.certification {
  text-align: center;
  margin: 20px auto;
}

.certification img {
  max-width: 400px; /* 画像幅の最大値 */
  height: auto;
  border: 1px solid #ddd; /* 枠線 */
  border-radius: 5px; /* 角を丸くする */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 影を追加 */
}

/* サブセクション共通スタイル */
.subsection {
  margin: 0 5px; /* 上下の余白 */
  padding: 10px;
  background-color: #f9f9f9; /* 背景色を淡い灰色に */
  border-radius: 8px;
}

.subtitle {
  text-align: center;
  font-size: 1.8rem;
  color: #004466; /* トップメニューと同じ色 */
  margin-bottom: 20px;
}

.description {
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
  margin-bottom: 20px;
  text-align: left;
  max-width: 800px; /* テキスト幅を制限 */
  margin: 0 auto;
}

/* 問い合わせフォーム全体のスタイル */
.wpcf7 {
  background: #f8fcff; /* 背景色を淡いブルーに設定 */
  padding: 20px;
  border-radius: 8px; /* 角を丸める */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 影を追加 */
  font-family: Arial, sans-serif;
  color: #333;
}

/* ラベルのスタイル */
.wpcf7-form-control-wrap label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #555;
}

/* 入力フィールドのスタイル */
.wpcf7-form-control {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 1rem;
  transition: border-color 0.3s ease;
}

/* 入力フィールドのフォーカス時のスタイル */
.wpcf7-form-control:focus {
  border-color: #004466;
  outline: none;
  box-shadow: 0 0 5px rgba(0, 68, 102, 0.5);
}

/* 送信ボタンのスタイル */
.wpcf7-submit {
  background: #004466;
  color: white;
  padding: 10px 20px;
  font-size: 1rem;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s ease;
  display: inline-block;
}

.wpcf7-submit:hover {
  background: #0088cc;
}

/* エラーメッセージのスタイル */
.wpcf7-validation-errors {
  background: #ffcccc;
  padding: 10px;
  border: 1px solid #cc0000;
  border-radius: 5px;
  color: #cc0000;
  margin-bottom: 15px;
}

/* フォーム全体のレスポンシブ対応 */
@media (max-width: 768px) {
  .wpcf7 {
    padding: 15px;
  }

  .wpcf7-form-control {
    font-size: 1rem;
  }

  .wpcf7-submit {
    font-size: 1rem;
    padding: 8px 15px;
  }
}

/* 必須ラベルのスタイル */
.label-required {
  display: inline-block;
  background-color: #004466; /* 必須の濃い色 */
  color: white;
  font-size: 1rem;
  padding: 3px 8px;
  border-radius: 5px;
  margin-right: 10px;
  font-weight: bold;
}

/* ラベルの間隔と整列 */
label {
  display: block;
  margin-bottom: 15px;
  font-weight: bold;
}

.label-required {
  display: inline-block;
  background-color: #004466 !important; /* メニューと同じ色に変更 */
  color: white !important;
  font-size: 1rem;
  font-weight: bold;
  padding: 2px 8px;
  border-radius: 5px !important; /* 角丸の半径を少なくする */
  margin-right: 5px;
}

.wpcf7-not-valid-tip {
  color: red; /* エラー表示の文字色 */
  font-size: 1rem;
  margin-top: 5px;
  display: block;
}

/* 必須ラベル */
.label-required {
  display: inline-block;
  background-color: #004466; /* 濃い青 */
  color: white;
  font-size: 1rem;
  font-weight: bold;
  padding: 2px 8px;
  border-radius: 5px;
  margin-right: 5px;
}

/* Contact Form 7エラー表示のスタイル */
span.wpcf7-not-valid-tip {
  color: red;
  font-size: 1rem;
  margin-left: 5px;
}

/* 入力フォーム間の空白を調整 */
.wpcf7-form p {
  margin: 0; /* 各フィールド間のデフォルトの空白を削除 */
  padding: 0;
}

/* ラベルと入力ボックスの間隔を調整 */
.wpcf7-form label {
  display: block; /* ラベルを入力ボックスの上に配置 */
  margin-bottom: 5px; /* ラベルと入力ボックスの間隔 */
}

/* 入力ボックスの間隔 */
.wpcf7-form input,
.wpcf7-form textarea,
.wpcf7-form select {
  margin-bottom: 15px; /* 各フィールド間のスペースを統一 */
}

.evidence-title {
  color: #003366; /* 濃いブルー */
}

.text-with-outline {
  color: #fff; /* 白い文字 */
  font-size: 3em; /* 大きな文字サイズ */
  font-weight: bold; /* 太文字 */
  text-shadow: -2px -2px 2px #000, /* 左上の影 */ 2px -2px 2px #000,
    /* 右上の影 */ -2px 2px 2px #000, /* 左下の影 */ 2px 2px 2px #000; /* 右下の影 */
  text-align: center; /* 中央寄せ */
}

.text-bold {
  color: #fff; /* 白い文字 */
  font-size: 2em; /* さらに大きな文字サイズ */
  font-weight: 900; /* 極太文字 */
  text-align: center; /* 中央寄せ */
  line-height: 1.2; /* 文字の行間を詰める */
}

.text-strong-outline {
  color: #fff; /* 白い文字 */
  font-size: 2em; /* 非常に大きな文字サイズ */
  font-weight: bold; /* 太文字 */
  text-shadow: -3px -3px 3px #000, /* 左上の濃い輪郭 */ 4px -4px 4px #000,
    /* 右上の濃い輪郭 */ -4px 4px 4px #000,
    /* 左下の濃い輪郭 */ 4px 4px 4px #000,
    /* 右下の濃い輪郭 */ 0px 0px 10px rgba(0, 0, 0, 0.6); /* 中央部分に柔らかな影を追加 */
  text-align: center; /* テキストを中央揃え */
  line-height: 1.2; /* 行間を調整 */
}

/*--------------------------------------------------------------
基本スタイル設定
--------------------------------------------------------------*/
body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
  background-color: #f9f9f9; /* 背景を少し明るいグレーに */
}

/*--------------------------------------------------------------
地図画像のスタイル設定
--------------------------------------------------------------*/
img {
  max-width: 600px; /* 最大幅を600ピクセルに制限 */
  height: auto;
  display: block;
  margin: 1rem auto; /* 中央揃え */
  border: 1px solid #cccccc; /* 視覚的な枠線 */
  border-radius: 5px; /* 角を少し丸める */
}

/* 料金・対応エリアCSS暫定版 */

/* 全体設定 */
body {
  font-family: "Arial", sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

/* テーブル設定 */
table {
  border-collapse: collapse;
  width: 100%;
  max-width: 500px;
  margin: 20px auto;
  text-align: center;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

th,
td {
  border: 1px solid #ddd;
  padding: 10px;
}

th {
  background-color: #2b3e50; /* メインカラー */
  color: #d6ebff; /* 自動見積フォームの一行目の文字色 */
  font-weight: bold;
}

td {
  color: #333;
}

tr:nth-child(even) {
  background-color: #f2f2f2; /* 偶数行の背景色 */
}

/* 入力欄のデザイン */
input[type="number"],
input[readonly] {
  width: 90%;
  padding: 8px;
  margin: 5px 0;
  border: 1px solid #ccc;
  border-radius: 5px;
  text-align: right;
  font-size: 1rem;
}

input[readonly] {
  background-color: #e9ecef;
  color: #495057;
  text-align: center;
}

input[type="number"]:focus {
  border-color: #2b3e50;
  outline: none;
  box-shadow: 0 0 5px rgba(43, 62, 80, 0.5);
}

/* リンクのスタイリング */
a {
  color: #2b3e50;
  text-decoration: none;
  font-weight: bold;
}

a:hover {
  text-decoration: underline;
}

/* ボックスのスタイル */
.box {
  border: 1px solid #ddd;
  padding: 20px;
  margin: 20px 0;
  border-radius: 5px;
  background-color: #f9f9f9;
}

/* ボタンスタイル（必要なら適用） */
button {
  padding: 10px 20px;
  font-size: 1rem;
  background-color: #2b3e50;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #1d2b38;
}

/* 画像スタイル */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

th,
td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: center;
}

th {
  background-color: #f4f4f4;
  font-weight: bold;
  color: #0066cc;
}

input[type="number"],
select {
  width: calc(100% - 20px);
  padding: 5px;
  margin: 5px 0;
  border: 1px solid #ccc;
  border-radius: 4px;
}

input[readonly] {
  background-color: #f9f9f9;
  color: #555;
  text-align: right;
}

/* 新たな追加部分: 矢印の大きさと配置調整 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  width: 22x; /* 矢印の幅を調整 */
  height: 22px; /* 矢印の高さを調整 */
}

select {
  padding-right: 28px; /* 矢印部分を考慮した余白を追加 */
}

select::-ms-expand {
  font-size: 1rem; /* 選択リストの右端矢印のサイズを調整 */
}

select::-webkit-dropdown-button {
  width: 22px; /* 矢印の幅を調整 */
  height: 22px; /* 矢印の高さを調整 */
}

/* 新たな追加部分: 「円」や「%」の右寄せ */
#b4,
#d4,
#termite-b4,
#termite-d4,
#catalyst-b4,
#catalyst-d4,
#estimate-result {
  text-align: right; /* 右揃えにして位置を調整 */
  padding-right: 10px; /* 右に余白を追加 */
}

#discount-rate {
  text-align: right; /* 割引率も右揃え */
  padding-right: 10px; /* 右に余白を追加 */
}

/* 見積フォームテーブルのヘッダー修正 */
table th {
  background-color: #eef5ff; /* 薄い青背景 */
  color: #00509e; /* 少し明るい青色 */
}

/* 一覧表ヘッダーの修正 */
table thead th {
  background-color: #f4faff; /* 一覧表のヘッダーを薄い青に */
  color: #004b8d; /* 少し暗めの青色 */
}

/* セクション全体を中央揃えし、幅を固定 */
#evidence-section {
  max-width: 1000px; /* セクション幅を1200pxに制限 */
  margin: 0 auto; /* セクション全体を中央揃え */
  padding: 20px; /* 内側の余白を追加 */
  text-align: left; /* 幅の中で左寄せ */
}

/* サブセクション全体 */
#evidence-section .subsection {
  margin-bottom: 40px; /* サブセクション間の余白 */
}

/* ボタンを左寄せ */
#evidence-section .toggle-btn {
  display: block; /* ブロック要素にする */
  margin: 10px 0; /* 上下に余白を追加 */
  text-align: left; /* ボタン内のテキストを左寄せ */
  width: fit-content; /* ボタン幅を内容に合わせる */
}

/* エビデンス画像のスタイル */
#evidence-section .evidence-content img {
  width: 100%; /* 親要素の幅に応じて画像を拡大 */
  max-width: 1200px; /* 最大幅を600pxに制限 */
  margin: 10px auto; /* 画像全体を中央揃え */
  display: block; /* 画像をブロック要素に */
}

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

/* 画像専用リセット */
img {
  border: none; /* 枠線を削除 */
  box-shadow: none; /* 不要な影を削除 */
  outline: none; /* フォーカス枠を削除 */
}

/* 全体のスタイル */
.company-profile-page {
  max-width: 600px;
  margin: 50px auto;
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
}

/* ページタイトル */
.page-title {
  text-align: center;
  font-size: 1rem;
  color: #d4d4d4;
  margin-bottom: 30px;
}

/* 各セクションの共通スタイル */
.company-info,
.tax-info,
.business-info {
  background: #f0f8ff;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* テーブルスタイル */
.company-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
}

.company-table .label {
  font-weight: bold;
  width: 30%;
  text-align: left;
  padding: 8px 5px;
}

.company-table .value {
  text-align: left; /* 左揃え */
  padding: 8px 5px;
}

/* スマホ画面でのテーブル調整 */
@media (max-width: 768px) {
  .company-table {
    display: block; /* テーブルをブロック表示に変更 */
    overflow-x: auto; /* 横スクロールを許可 */
    width: 100%; /* 親要素の幅に収める */
  }

  .company-table tbody {
    display: table; /* tbodyをテーブル形式に維持 */
    width: 100%; /* 幅を調整 */
  }

  .company-table .label,
  .company-table .value {
    white-space: nowrap; /* テキストを折り返さない */
  }
}

.email-link {
  color: #004466;
  text-decoration: none;
}

.email-link:hover {
  text-decoration: underline;
}

/* 適格請求書発行事業者 登録番号 */
.tax-number {
  font-size: 1rem;
  font-weight: normal;
  color: #333;
  text-align: center;
}

/* 業務内容リスト */
.business-list {
  list-style-type: none;
  padding: 0;
  font-size: 1rem;
}

.business-list li {
  padding: 10px 0;
  border-bottom: 1px solid #ddd;
}

.business-list li:last-child {
  border-bottom: none;
}

.double-image img {
  width: 48%;
  height: auto;
  object-fit: contain;
}

.after-treatment-images img {
  width: 48%;
  height: auto;
  object-fit: contain;
}

.wpcf7-form-control-wrap {
  margin-bottom: 0px; /* 入力ボックスと次のタイトルの間のスペース */
}

label {
  margin-bottom: 0; /* タイトルと入力ボックス間のスペースを削除 */
}

span.wpcf7-not-valid-tip {
  color: red;
  font-size: 1rem;
  margin-left: 10px; /* ボックス右側にスペースを追加 */
  display: inline-block;
}

.screen-reader-text {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
  border: 0;
}

/*スマホレスポンシブル対応スタート/*
  
/*--------------------------------------------------------------*/
/* スマホ対応（横幅768px以下） */
/*--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  body {
    font-size: lrem; /* フォントサイズ調整 */
  }

  .container {
    padding: 10px; /* コンテナのパディング調整 */
  }

  .header {
    text-align: center; /* ヘッダーを中央揃え */
  }

  .menu {
    display: flex;
    flex-direction: column; /* メニューを縦並びに変更 */
  }

  .content {
    width: 100%; /* コンテンツを横幅いっぱいに */
  }

  .image {
    width: 100%; /* 画像の横幅を100%に調整 */
    height: auto; /* アスペクト比を維持 */
  }

  .button {
    font-size: 1rem; /* ボタンのフォントサイズ調整 */
    padding: 10px; /* ボタンのパディング調整 */
  }
}

/* メニューのスタイル */
.menu-list {
  display: none; /* 初期状態で非表示 */
  flex-direction: column;
  list-style: none;
  background-color: #006666;
  position: absolute;
  top: 50px;
  right: 0;
  width: 100%;
  padding: 10px 0;
  margin: 0;
  z-index: 999;
}

.menu-list li {
  text-align: center;
  margin: 10px 0;
}

.menu-list li a {
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
  padding: 10px;
  display: block;
}

/* メニューがアクティブな場合 */
.menu-list.active {
  display: flex;
}

.menu-list {
  display: none;
}
.menu-list.active {
  display: flex;
}

.menu-list {
  display: none; /* 初期状態で非表示 */
}

.menu-list.active {
  display: flex; /* ハンバーガーメニューが開いたときに表示 */
}

html,
body {
  margin: 0;
  padding: 0;
  max-width: 100%; /* 横幅を制限 */
  overflow-x: hidden; /* 横スクロールを防止 */
}

/*--------------------------------------------------------------*/
/* スマホ版：画像や要素のはみ出し防止 */
/*--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  .circle-container,
  .main-content,
  img {
    max-width: 100%; /* 横幅を画面内に収める */
    margin: 0 auto; /* 必要に応じて中央揃え */
    height: auto; /* 縦横比を保持 */
  }

  .circle-container {
    overflow: hidden; /* 内部要素がはみ出る場合に隠す */
  }

  html,
  body {
    overflow-x: hidden; /* ページ全体の横スクロールを防止 */
  }
}

/*--------------------------------------------------------------*/
/* スマホ専用のパララックスセクション */
/*--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  .parallax-section {
    background-attachment: scroll; /* スマホでは固定を解除 */
    background-size: cover; /* 背景画像を親要素に収める */
    background-position: center center; /* 中央揃え */
    height: 550px; /* 高さを調整 */
  }

  .parallax-content {
    font-size: 1.8rem; /* テキストサイズを調整 */
    margin: 0; /* 余白を調整 */
    line-height: 1.4; /* 行間を調整 */
  }
}

/* Galleries: PC用（変更不要の場合） */
.gallery {
  margin-bottom: 1.5em;
  display: grid;
  grid-gap: 1.5em;
}

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

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

.gallery-columns-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* スマホ用 */
@media screen and (max-width: 768px) {
  .gallery {
    grid-gap: 10px; /* ギャップを狭める */
  }

  .gallery-columns-4 {
    grid-template-columns: repeat(3, 1fr); /* 4列を3列に変更 */
  }

  .gallery-item {
    width: auto; /* 幅を自動調整 */
  }

  .gallery-caption {
    font-size: 1rem; /* キャプションのフォントサイズを縮小 */
    line-height: 1.2; /* 行間を詰める */
    text-align: center; /* キャプションを中央揃え */
  }
}
/* PC用スタイル */
.home-inspection-layout {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  font-weight: 600;
}

/* スマホ用スタイル */
@media screen and (max-width: 768px) {
  .home-inspection-layout {
    grid-template-columns: repeat(3, 1fr); /* 3列 */
    gap: 5px; /* ギャップを調整 */
    max-width: 100%;
    margin: 0 5px;
  }
}

/* 28枚目を非表示 */
.home-inspection-layout img:nth-of-type(28) {
  visibility: hidden !important;
}

@media (max-width: 768px) {
  /* スマホ用スタイル */
  .image-box:nth-of-type(28) img {
    display: none !important;
  }
}

@media (max-width: 768px) {
  /* スマホ用スタイル */
  .image-box:nth-of-type(28) {
    display: none !important;
  }
}

/* PC版のデフォルトスタイル（そのまま維持） */
.image-box {
  text-align: center;
  background-color: #f9f9f9;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

/* スマホ版のスタイル */
@media screen and (max-width: 768px) {
  .image-box {
    background-color: transparent; /* 背景色を削除 */
    padding: 0; /* 内側の余白を削除 */
    border: none; /* 枠を削除 */
    border-radius: 0; /* 角丸を削除 */
  }

  /* PC用のスタイル（そのまま維持） */
  .image-box {
    text-align: center;
    background-color: #f9f9f9;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
  }

  .image-box {
    background-color: transparent; /* 背景色を削除 */
    padding: 0; /* 内側の余白を削除 */
    border: none; /* 枠を完全に削除 */
    border-radius: 0; /* 角丸を削除 */
  }

  .gallery {
    grid-gap: 10px; /* ギャップを狭める */
  }

  .gallery-columns-4 {
    grid-template-columns: repeat(3, 1fr); /* 4列を3列に変更 */
  }

  .gallery-caption {
    font-size: 1rem; /* キャプションのフォントサイズを縮小 */
    line-height: 1.2; /* 行間を詰める */
    text-align: center; /* キャプションを中央揃え */
  }
}

.caption-small {
  font-size: 0.9em; /* 他のキャプションより少し小さく */
  line-height: 1.1; /* 行間を詰める */
}

@media screen and (max-width: 768px) {
  .image-box {
    display: flex; /* フレックスボックスで配置を整える */
    flex-direction: column; /* 縦方向に揃える */
    justify-content: space-between; /* 上下の余白を均等化 */
    align-items: center; /* 中央揃え */
  }

  .image-box p {
    height: 2.5em; /* キャプションの高さを固定 */
    display: flex;
    justify-content: center;
    align-items: center; /* キャプションのテキストを中央揃え */
    font-size: 1rem; /* キャプションのフォントサイズを縮小 */
  }

  .image-box img {
    width: 100%; /* 画像を幅いっぱいに表示 */
    height: auto; /* 高さをアスペクト比に応じて調整 */
  }
}

@media screen and (max-width: 768px) {
  .image-box {
    display: flex; /* フレックスボックスで配置を整える */
    flex-direction: column; /* 縦方向に揃える */
    justify-content: space-between; /* 上下の余白を均等化 */
    align-items: center; /* 中央揃え */
  }

  .image-box p {
    height: 2.5em; /* キャプションの高さを固定 */
    display: flex;
    justify-content: center;
    align-items: center; /* キャプションのテキストを中央揃え */
    font-size: 1rem; /* キャプションのフォントサイズを縮小 */
  }

  .image-box img {
    width: 100%; /* 画像を幅いっぱいに表示 */
    height: auto; /* 高さをアスペクト比に応じて調整 */
  }
}

/* スマホ専用スタイル */
@media screen and (max-width: 768px) {
  .inspection-summary {
    margin: 20px auto; /* 上下の余白を調整 */
    overflow: hidden; /* 不要な部分を隠す */
  }

  .inspection-summary img {
    height: 300px; /* 背景画像の高さを増やす */
    width: 100%; /* 横幅を画面いっぱいに合わせる */
    object-fit: cover; /* 重要部分を優先して表示 */
    object-position: right; /* 右端を画面に合わせる */
  }

  .inspection-summary .text-overlay {
    font-size: 1.2rem !important; /* フォントサイズを調整 */
    line-height: 1.5; /* 行間を狭める */
    padding: 10px; /* テキスト周囲の余白を縮小 */
    text-align: left !important; /* テキスト中央揃え（必要なら変更可） */
  }
}

.termite-table td img {
  display: inline-block; /* 横並びにする */
  margin: 5px; /* 画像同士の間隔を調整 */
  max-width: 100px; /* 必要に応じて画像サイズを調整 */
  height: auto; /* アスペクト比を維持 */
  vertical-align: middle; /* テキストとの整列 */
}

.termite-table img {
  max-width: 150px; /* 幅を150pxに設定 */
  height: auto; /* 縦横比を維持 */
  margin: 5px auto; /* 中央揃え */
  transition: transform 0.3s; /* アニメーションを追加（任意） */
}

/*シロアリ画像拡大*/
.termite-table img {
  max-width: 150px; /* 幅を150pxに設定 */
  height: auto; /* 縦横比を維持 */
  margin: 5px auto; /* 中央揃え */
  transition: transform 0.3s; /* アニメーションを追加（任意） */
}

.termite-table img:hover {
  transform: scale(2); /* ホバー時に少し拡大（任意） */
}

.termite-table td img {
  display: block; /* 画像をブロック要素として扱う */
  margin: 0 auto; /* 左右中央揃え */
  max-width: 150%; /* 親要素の幅を超えないようにする */
  height: auto; /* 縦横比を保つ */
}

@media (max-width: 768px) {
  .termite-table td {
    text-align: center; /* テーブルセル内の中央揃え */
  }

  .termite-table td img {
    max-width: 130%; /* 親要素の幅に収める */
    height: auto; /* 縦横比を維持 */
    display: inline-block; /* 中央揃えの補助 */
    margin: 0 auto; /* 左右中央揃え */
  }

  .termite-table {
    table-layout: auto; /* テーブル幅を自動調整 */
  }
}

/*--------------------------------------------------------------*/
/* シロアリの表 (スマホ対応) */
/*--------------------------------------------------------------*/
@media (max-width: 768px) {
  .termite-table {
    overflow-x: auto;
    display: block;
    white-space: nowrap;
  }

  .termite-table td:first-child,
  .termite-table th:first-child {
    position: sticky;
    left: 0;
    background-color: #fff;
    z-index: 10;
    text-align: center;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  }

  .termite-table td img {
    max-width: 120px; /* シロアリの画像用サイズ */
    height: auto;
    display: block;
    margin: 0 auto;
  }
}

/* 見出しのスタイル */
#privacy-policy h4 {
  color: #004466; /* 見出しの文字色 */
  font-size: 1rem;
  margin-top: 30px;
  border-bottom: 2px solid #004466; /* 下線を追加 */
  padding-bottom: 5px;
}

/* パラグラフのスタイル */
#privacy-policy p {
  margin-bottom: 20px;
  font-size: 16px;
  line-height: 1.8;
}

/* リストのスタイル */
#privacy-policy ul {
  list-style-type: disc; /* ディスク型の箇条書き */
  margin-left: 20px;
  padding-left: 20px;
}

/* リストのアイテム */
#privacy-policy ul li {
  margin-bottom: 10px;
  font-size: 1rem;
}

/* お問い合わせ情報のスタイル */
#privacy-policy p a {
  color: #007acc;
  text-decoration: none; /* 下線をなくす */
}

#privacy-policy p a:hover {
  text-decoration: underline; /* ホバー時の下線 */
}

/* 全体のレスポンシブデザイン */
@media (max-width: 768px) {
  #privacy-policy {
    padding: 20px;
    font-size: 1rem;
  }

  #privacy-policy h4 {
    font-size: 1rem;
  }

  #privacy-policy p {
    font-size: 1rem;
  }

  #privacy-policy ul li {
    font-size: 1rem;
  }
}

/* プライバシーポリシーページのスタイル（PC版デフォルト） */
#privacy-policy {
  max-width: 800px; /* 最大幅1200px */
  margin: 0 auto; /* 中央揃え */
  padding: 20px; /* 内側の余白 */
  text-align: left; /* 左寄せ */
}

/* スマホ版（768px以下） */
@media (max-width: 768px) {
  #privacy-policy {
    max-width: 100%; /* 最大幅を画面幅いっぱいに */
    margin: 0; /* 左右の余白をリセット */
    padding: 10px; /* 内側の余白を少し小さく */
  }
}

/* フッターメニューのスタイル */
.footer-menu {
  background-color: #004466; /* フッターメニュー背景色 */
  padding: 10px 0; /* 上下余白 */
  text-align: center; /* メニュー全体を中央揃え */
}

.footer-menu .footer-menu-list {
  display: flex; /* 横並び配置 */
  justify-content: center; /* メニュー項目を中央揃え */
  list-style: none; /* 点を削除 */
  margin: 0; /* 外側の余白なし */
  padding: 0; /* 内側の余白なし */
}

.footer-menu .footer-menu-list li {
  margin: 0 15px; /* 各メニュー項目間の余白 */
}

.footer-menu .footer-menu-list li a {
  color: white; /* 文字色 */
  text-decoration: none; /* 下線なし */
  font-weight: bold; /* 太字 */
  padding: 5px 10px; /* 内側の余白 */
  border-radius: 5px; /* 角を丸く */
  transition: background-color 0.3s; /* ホバー時の背景色切り替えアニメーション */
}

.footer-menu .footer-menu-list li a:hover {
  background-color: #0088cc; /* ホバー時の背景色 */
}

@media (max-width: 768px) {
  .pc-only {
    display: none; /* スマホで非表示にする */
  }
}

/* PCメニュー */
.menu {
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu li {
  margin: 0 15px;
}

.menu a {
  text-decoration: none;
  color: #ffffff;
  padding: 5px 10px;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.menu a:hover {
  background-color: #007acc;
}

/* ハンバーガーメニュー全体 */
.menu-list {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%; /* メニューの幅 */
  max-width: 80%; /* メニューの幅 */
  height: 100%; /* メニューの高さ */
  background-color: #004466; /* メニューの背景色（濃い青） */
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2); /* 左端の影 */
  transform: translateX(-100%); /* 初期状態で画面外に隠す */
  transition: transform 0.3s ease-in-out; /* アニメーション */
  overflow-y: auto; /* スクロールを有効化 */
  z-index: 1000; /* メニューの前面に表示 */
}

/* メニューが開いたとき */
.menu-list.active {
  transform: translateX(0); /* メニューを画面内にスライドイン */
}

/* メニュー内のリンク */
.menu-list li {
  list-style: none;
  margin: 15px 0; /* リンク間のスペース */
}

.menu-list a {
  text-decoration: none;
  color: #ffffff; /* リンクの文字色（白） */
  display: block;
  padding: 10px 15px; /* リンクの内側スペース */
  transition: background-color 0.3s;
}

.menu-list a:hover {
  background-color: #007acc; /* ホバー時の背景色（明るい青） */
}

/* ハンバーガーメニューのトグルボタン */
#menuToggle {
  position: fixed;
  top: 15px;
  right: 20px;
  z-index: 1100; /* メニューより前に表示 */
  cursor: pointer;
}

/* ページ全体を覆うオーバーレイ */
.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明の黒背景 */
  display: none; /* 初期状態で非表示 */
  z-index: 999; /* メニューの背面に配置 */
}

/* オーバーレイがアクティブのとき */
.menu-overlay.active {
  display: block; /* メニューが開いたときに表示 */
}

/* メニューが開いている間にスクロールを防ぐ */
body.menu-open {
  overflow: hidden; /* ページスクロールを無効化 */
}

#back-to-top {
  position: fixed;
  bottom: 30px;
  right: 10px;
  width: 60px;
  height: 60px;
  background-color: rgba(255, 255, 255, 0); /* 背景を半透明に設定 */
  border-radius: 50%; /* 丸いボタン */
  display: block; /* 初期状態で非表示 */
  z-index: 1000;
  opacity: 0; /* 初期状態で透明 */
  transition: opacity 0.1s ease, background-color 0.1s ease;
}

#back-to-top.show {
  display: block; /* 表示 */
  opacity: 1; /* ふんわり表示 */
}

#back-to-top:hover {
  background-color: rgba(0, 0, 0, 0.7); /* ホバー時に少し濃く */
}

/* セクション全体のスタイル */
#coating-example-section {
  width: 100%; /* セクション全体を画面幅に合わせる */
  margin: 120px auto; /* 上下に余白、中央揃え */
  padding: 0 10px; /* スマホでも隙間を確保 */
}

/* 見出しのスタイル */
#coating-example-section {
  font-size: 1rem;
  margin-bottom: 20px;
  text-align: center;
  background-color: #ffffff;
  color: #000000;
  padding: 10px;
  border-radius: 4px;
}

/* 画像グリッドのスタイル（PC用：3列） */
.example-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3列配置 */
  gap: 20px; /* 画像間の隙間 */
}

/* スマホ用のスタイル（2列） */
@media (max-width: 768px) {
  .example-grid {
    grid-template-columns: repeat(2, 1fr); /* スマホでは2列配置 */
    gap: 10px; /* 画像間の隙間を調整 */
    width: 100%; /* 画面幅いっぱいにフィット */
    margin: 0 auto; /* 中央揃え */
  }

  .example-item img {
    width: 100%; /* 親要素に収める */
    height: auto; /* アスペクト比を維持 */
    border: 1px solid #ddd;
    border-radius: 5px;
    display: block;
  }

  .example-item p {
    text-align: center; /* キャプションを中央揃え */
    margin-top: 5px; /* 間隔を調整 */
    font-size: 1rem; /* テキストを少し小さめに */
  }
}

@media (max-width: 768px) {
  .example-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* 2列に強制設定 */
    gap: 10px !important;
    width: 100% !important;
    margin: 0 auto !important;
  }
}

.image-container-t img {
  display: block;
  margin: 0 auto;
  max-width: auto; /* 横幅の制限 */
  height: auto; /* 高さを自動調整 */
}

@media (max-width: 768px) {
  .image-row {
    display: block !important; /* 縦並びに変更 */
    text-align: center !important; /* 画像を中央揃え */
  }

  .image-row img {
    width: 80% !important; /* 横幅を80%に設定 */
    max-width: none !important; /* 最大幅の制限を解除 */
    margin: 20px auto !important; /* 画像を中央揃え、余白を追加 */
  }
}

.termite-page .top-image img {
  width: 100%; /* 幅をページ全体に広げる */
  height: auto; /* 高さを自動調整 */
  object-fit: contain !important; /* 画像が切れないようにする */
  display: block;
  margin: 0 auto; /* 中央揃え */
}

body.page-template-page-termite-control .termite-page .top-image {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* 共通のスタイル */
.certification img {
  width: 100%; /* デフォルトで幅いっぱい */
  height: auto; /* 高さを自動調整 */
  display: block;
  margin: 0 auto; /* 画像を中央揃え */
}

/* スマホ用のスタイル */
@media (max-width: 768px) {
  .certification img {
    width: 80%; /* 横幅を80%に縮小 */
    margin: 0 auto; /* 中央揃え */
  }
}

@media (max-width: 768px) {
  /* テーブル全体の固定設定 */
  .pesticide-table {
    table-layout: fixed !important; /* 幅計算を固定 */
    width: 100% !important; /* テーブル全体の幅を明確に */
  }

  /* 各列の幅を明示的に指定 */
  .pesticide-table td,
  .pesticide-table th {
    text-align: center; /* 中央揃え */
    padding: 5px !important; /* パディングを固定 */
    word-wrap: break-word !important; /* 折り返しを有効 */
    word-break: break-word !important; /* 単語を強制的に分割 */
  }

  /* 他の列を調整（合計で100%） */
  .pesticide-table td:nth-child(1),
  .pesticide-table th:nth-child(1),
  .pesticide-table td:nth-child(2),
  .pesticide-table th:nth-child(2),
  .pesticide-table td:nth-child(3),
  .pesticide-table th:nth-child(3) {
    width: 23.3% !important; /* 均等に割り当て */
  }
}

/* H1 */
h1 {
  background-color: #004466; /* 背景色 */
  color: #ffffff; /* 文字色 */
  text-align: center; /* 中央揃え */
  font-size: 2.2rem; /* フォントサイズ */
  font-weight: normal; /* 通常の太さ */
  margin: 0 0 1rem 0; /* 上:0、下:1remの余白 */
  padding: 0; /* 内側の余白 */
  border-radius: 0; /* 角丸 */
  padding-bottom: 0; /* 下の余白 */
  margin-bottom: 0; /* 下の外側余白 */
}

/* H2 */
h2 {
  background-color: #004466; /* 背景色 */
  color: #ffffff; /* 文字色 */
  text-align: center; /* 中央揃え */
  font-size: 1.75rem; /* フォントサイズ */
  font-weight: normal; /* 通常の太さ */
  margin: 3rem 0 1rem 0; /* 上:1.5rem、下:1remの余白 */
  padding: 1rem; /* 内側の余白 */
  border-radius: 0; /* 角丸なし */
  line-height: 1; /* 行間を調整して中央揃え */
}

/* H3 */
h3 {
  background-color: #004466; /* 背景色 */
  color: #ffffff; /* 文字色 */
  text-align: center; /* 中央揃え */
  font-size: 1.6rem; /* フォントサイズ */
  font-weight: bold; /* 通常の太さ */
  margin: 3rem 0 1rem 0; /* 上:0、下:1remの余白 */
  padding: 1rem; /* 内側の余白 */
  border-radius: 0; /* 角丸 */
  line-height: 1; /* 行間を調整して中央揃え */
}

/* H4 */
h4 {
  background-color: #004466; /* 背景色 */
  color: #ffffff; /* 文字色 */
  text-align: center; /* 中央揃え */
  font-size: 1.25rem; /* フォントサイズ */
  font-weight: normal; /* 通常の太さ */
  margin: 10px 0px;
  padding: 10px; /* 内側の余白 */
  border-radius: 0; /* 角丸 */
  line-height: 1; /* 行間を調整して中央揃え */
}

/* H5 */
h5 {
  background-color: transparent; /* 背景色なし */
  color: #004466; /* 文字色 */
  text-align: center; /* 中央揃え */
  font-size: 1.2rem; /* フォントサイズ */
  font-weight: bold; /* 太字 */
  margin: 1rem 0 1rem 0; /* 上:0、下:1remの余白 */
  padding: 10px; /* 内側の余白 */
  border-radius: 0; /* 角丸なし */
  padding-bottom: 0; /* 下の余白 */
}

/* H6 */
h6 {
  background-color: transparent; /* 背景色なし */
  color: #004466; /* 文字色 */
  text-align: center; /* 中央揃え */
  font-size: 1.1rem; /* フォントサイズ */
  font-weight: bold; /* 太字 */
  margin: 3 0 1rem 0; /* 上:0、下:1remの余白 */
  padding: 0; /* 内側の余白 */
  border-radius: 0; /* 角丸なし */
  padding-bottom: 0; /* 下の余白 */
}

/* 対応エリアの全体スタイル */
.area-section {
  max-width: max; /* セクションの幅を制限 */
  margin: 0 auto; /* セクション全体を中央揃え */
  text-align: center; /* 子要素のテキストを中央揃え */
  padding: 20px; /* 内側余白 */
  overflow: hidden; /* 横スクロールを防止 */
  box-sizing: border-box; /* パディング込みで幅を計算 */
}

/* 段落のスタイル */
.area-section p {
  max-width: 60%; /* テキストの幅を画面幅に応じて制限 */
  margin: 0 auto; /* テキストを中央揃え */
  text-align: center; /* 中央揃え */
  word-wrap: break-word; /* 長い単語を折り返し */
  word-break: break-word; /* 単語の途中で改行 */
  font-size: 1.1rem; /* フォントサイズ */
  line-height: 2re; /* 行間 */
}

/* リンクのスタイル */
.area-section a {
  display: inline-block; /* テキストとリンクをブロックにする */
  max-width: 100%; /* リンクがはみ出さないように制限 */
  overflow-wrap: break-word; /* 長いURLを折り返し */
  text-align: center; /* 中央揃え */
}

/* 画像のスタイル */
.area-section img {
  max-width: 600px; /* 画像の幅を画面にフィット */
  height: auto; /* アスペクト比を維持 */
  margin: 20px auto; /* 画像を中央揃え */
  display: block; /* ブロック要素に設定 */
}

/* スマホ対応（最大幅768px以下） */
@media (max-width: 768px) {
  .area-section p {
    max-width: 94%; /* テキスト幅を制限 */
    font-size: 1rem; /* フォントサイズを縮小 */
    margin: 0 auto; /* 中央揃え */
  }

  .area-section img {
    max-width: 100%; /* 親要素内に収める */
    margin: 15px auto; /* 中央揃え */
  }
}

/* シアン色の長方形 */
.range-section .blue-box {
  display: inline-block;
  width: 30px; /* 長方形の幅 */
  height: 1.5rem; /* 長方形の高さ */
  background-color: #00a0e9; /* シアン色 */
  vertical-align: middle; /* テキストと整列 */
  margin-right: 10px; /* テキストとの間隔 */
}

/* 被害事例セクションの全体スタイル */
.case-study-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center; /* テキスト中央揃え */
}

/* 各被害事例のスタイル */
.case-study-item {
  display: flex;
  flex-direction: row;
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  gap: 20px;
  max-width: 100%;
  margin: 10px 0;
  align-items: flex-start;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 横に並べる画像のスタイル */
.case-study-item .images {
  display: flex;
  flex-direction: row; /* 横並び */
  gap: 20px;
  flex-shrink: 0;
}

.case-study-item img {
  width: 280px; /* 画像幅を固定 */
  height: auto; /* 縦横比を保持 */
  border-radius: 5px;
  object-fit: cover; /* 枠内に収まるように画像を調整 */
}

/* テキスト部分のスタイル */
.case-study-item .content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 1rem;
  line-height: 1.5;
  color: #333;
}

.case-study-item .title {
  font-size: 1.2rem;
  font-weight: bold;
}

/* スマホ版: 最大幅768px以下に適用 */
@media screen and (max-width: 768px) {
  .case-study-item {
    flex-direction: column; /* 被害事例全体を縦並び */
    padding: 10px;
  }

  .case-study-item .images {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 横に2枚並べる */
    gap: 10px;
  }

  .case-study-item img {
    width: 100%; /* 各画像が列幅にフィット */
    height: auto; /* アスペクト比を保持 */
  }

  .case-study-item .content {
    text-align: left; /* テキスト左揃え */
    font-size: 0.9rem; /* フォントサイズを少し小さく */
    line-height: 1.4; /* 行間を調整 */
  }
}

/*--------------------------------------------------------------*/
/* フルスクリーンロゴのスタイル修正版 */
/*--------------------------------------------------------------*/
.fullscreen-logo {
  position: absolute; /* 左上に固定 */
  top: 1rem;
  left: 20px;
  z-index: 999;
  background-color: #004466; /* 背景色を指定 */
  padding: 0px; /* 余白を追加 */
  font-size: initial; /* フォントサイズの影響をリセット */
  border-radius: 0 !important; /* 他のスタイルを上書きして角丸を無効化 */
}

.fullscreen-logo img {
  max-width: 100px; /* ロゴサイズ調整 */
  height: auto;
}

/* スマホ版調整 */
@media screen and (max-width: 768px) {
  .fullscreen-logo {
    padding: 0;
    top: 10px;
    margin-bottom: 0px;
    left: 10px;
  }
}

/* テーブル本体 */
table {
  border-collapse: collapse; /* 枠を統一 */
  width: 100%; /* 横幅を全体に合わせる */
  table-layout: auto; /* 内容に合わせた幅調整 */
}

/* ヘッダー固定（スマホ版も含む） */
thead tr {
  position: sticky;
  top: 0; /* 上部に固定 */
  background-color: #f9f9f9; /* ヘッダー背景色 */
  z-index: 3; /* 最前面に配置 */
}

/* テーブルセル */
th,
td {
  padding: 10px; /* セル内余白 */
  text-align: center; /* 中央揃え */
  border: 1px solid #ddd; /* 枠線 */
  white-space: nowrap; /* テキストを1行に制限 */
}

/* 偶数行の背景色 */
tbody tr:nth-child(even) {
  background-color: #f3f3f3; /* 偶数行の背景色 */
}

/* 左の列を固定 */
tbody td:first-child,
thead th:first-child {
  position: sticky;
  left: 0; /* 左側に固定 */
  background-color: #f9f9f9; /* 背景色 */
  z-index: 2; /* ヘッダーより低いレイヤーに */
  border-right: 1px solid #ddd; /* 枠線を設定 */
}

table {
  table-layout: auto; /* セル幅を調整可能 */
}

/* ヘッダーと左の列を両方固定 */
tbody td:first-child,
thead th:first-child {
  z-index: 3; /* 左の列をヘッダーと同等のレイヤーに配置 */
}

/* 自動見積フォームの入力欄 */
input[type="text"],
input[type="number"],
select {
  font-size: 1rem; /* フォントサイズを調整 */
  padding: 8px; /* 内側の余白を調整 */
  border: 1px solid #ccc; /* 枠線を設定 */
  border-radius: 4px; /* 角を丸く */
  width: 100%; /* 幅を調整 */
  box-sizing: border-box; /* パディングを含めたサイズに調整 */
}

/* フォーカス時のスタイル */
input[type="text"]:focus,
input[type="number"]:focus,
select:focus {
  outline: none; /* デフォルトのアウトラインを削除 */
  border-color: #004466; /* フォーカス時の枠線の色 */
  box-shadow: 0 0 5px rgba(0, 68, 102, 0.5); /* フォーカス時のシャドウ */
}

/* プレースホルダーのスタイルを変更 */
input::placeholder {
  color: #333; /* 文字色を濃く */
  font-weight: normal; /* 太字に */
  opacity: 1; /* プレースホルダーの透明度を100%に */
}

/* 入力欄のスタイル（全体を整える場合） */
input[type="text"],
input[type="number"] {
  font-size: 16px; /* フォントサイズを調整 */
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 100%;
  box-sizing: border-box;
}

/*サイトタイトル*/
/* 「住宅点検の」部分のスタイル */
.site-title-small {
  font-size: 1.5rem; /* 小さめの文字サイズ */
  font-weight: 400; /* 細い文字 */
  margin-bottom: 0; /* 下に余白を追加 */
  color: #fff; /* 色を白に設定 */
}

/* 「ホームインスペクション関東」部分のスタイル */
.site-title-large {
  font-size: 2rem; /* 大きめの文字サイズ */
  font-weight: 600; /* 太字 */
  line-height: 1.5; /* 行間を広げる */
  color: #fff; /* 色を白に設定 */
  margin-top: 5px; /* 上に余白を追加 */
}

@media (max-width: 768px) {
  /* 「住宅点検の」部分のスマホ専用スタイル */
  .site-title-small {
    font-size: 1.4rem; /* さらに小さく調整 */
    font-weight: 400; /* 同じ太さ */
    margin-bottom: 0px; /* 余白を減らす */
    color: #fff; /* 色は変更なし */
  }

  /* 「ホームインスペクション関東」部分のスマホ専用スタイル */
  .site-title-large {
    font-size: 1.5rem; /* スマホ画面で適したサイズ */
    font-weight: 600; /* 同じ太さ */
    line-height: 1.3; /* 行間を少し狭める */
    color: #fff; /* 色は変更なし */
    margin-top: 0px; /* 余白を減らす */
  }
}

@media (max-width: 768px) {
  /* メインナビゲーション全体を非表示にする */
  #site-navigation {
    display: none; /* スマホ画面で非表示に設定 */
  }
}

@media (max-width: 768px) {
  /* スマホ画面で area-price-page のスタイル調整 */
  main.area-price-page {
    width: 90%; /* 横幅を90%に設定 */
    margin: 0 auto; /* 水平中央揃え */
    overflow-x: hidden; /* 横スクロールを無効化 */
    padding: 0; /* 不要な余白を削除 */
    box-sizing: border-box; /* 幅計算を正確に */
  }

  /* 画像やテーブルの幅を親要素内に収める */
  main.area-price-page img,
  main.area-price-page table {
    max-width: 100%; /* 幅を親要素内に収める */
    height: auto; /* 比率を保つ */
  }

  /* price-list に特化したスタイル */
  main.area-price-page .price-list {
    width: 100%; /* 表を親要素に収める */
    max-width: 100%; /* 幅を超えないようにする */
    margin: 0 auto; /* 中央揃え */
    overflow-x: auto; /* 必要に応じて横スクロールを許可 */
    table-layout: fixed; /* 列幅を固定 */
    word-wrap: break-word; /* 長い単語を折り返す */
  }

  /* price-list 内のセルのスタイルを調整 */
  main.area-price-page .price-list td,
  main.area-price-page .price-list th {
    word-break: break-word; /* 長いテキストを折り返す */
    white-space: normal; /* テキストを自動折り返し */
  }

  /* body や html の余白を無効化 */
  body.page-template-area-price,
  html {
    overflow-x: hidden; /* 横スクロールを無効化 */
    margin: 0;
    padding: 0;
  }
}

.price-text-table-notes p {
  position: relative; /* 相対配置で記号を管理 */
  padding-left: 2.2em; /* 記号 + 文字幅を含めたスペースを確保 */
  text-indent: -1.2em; /* 記号分を行頭に戻す */
  line-height: 1.6; /* 行間を調整 */
  margin: 0; /* 余白をリセット */
}

/* PC画面でのスタイル調整 */
@media (min-width: 769px) {
  .price-text-table-notes {
    max-width: 600px; /* 最大幅を800pxに制限 */
    margin: 0 auto; /* 中央揃え */
    padding: 0 20px; /* 左右に適度な余白を追加 */
  }
}

/* スマホ画面（幅768px以下）のスタイルは現状維持 */
@media (max-width: 768px) {
  .price-text-table-notes {
    max-width: 100%; /* スマホでは親要素の幅に合わせる */
    margin: 0; /* 中央揃えを解除 */
    padding: 0; /* スマホ用の余白設定 */
  }
}

/*--------------------------------------------------------------*/
/* ファーストビュー関連 */
/*--------------------------------------------------------------*/

/* スライダー全体のスタイル */
.hero-slider {
  position: relative;
  width: 100%;
  height: 700px; /* 固定の高さ */
  overflow: hidden; /* 枠外の画像を隠す */
  margin-bottom: 50px; /* ご依頼主との間に余白 */
}

/* 各スライド */
.hero-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0; /* 初期状態は非表示 */
  z-index: 0;
  transform: scale(1); /* 常に拡大を維持 */
  transition: opacity 4s ease-in-out, transform 7s ease-in-out; /* フェードと拡大を適用 */
}

/* 表示中のスライド */
.hero-slide.active {
  opacity: 1; /* 表示 */
  z-index: 1; /* 最前面 */
  transform: scale(1.08); /* 拡大を適用 */
}

/* 画像の基本設定 */
.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* PC版で枠いっぱいに表示 */
  border-radius: 0; /* 丸角を防止 */
}

/* 初回表示中のスライド */
.hero-slide.initialized {
  opacity: 1;
  transform: scale(1.08); /* 初回表示時の拡大 */
}

/* スマホ版の調整 */
@media (max-width: 768px) {
  .hero-slider {
    height: 300px; /* スマホでも高さは固定 */
  }
  .hero-slide img {
    object-fit: cover; /* 両サイドをカット */
  }
}

.hero-slide {
  opacity: 0; /* 初期状態は非表示 */
  transform: scale(1); /* 初期状態は拡大なし */
  transition: opacity 4s ease-in-out, transform 7s ease-in-out; /* フェードと拡大を統一 */
}

.hero-slide.initialized {
  opacity: 1; /* 初回のみフェードイン */
  transform: scale(1.08); /* 拡大適用 */
}

.hero-slide.active {
  opacity: 1; /* 表示中 */
  transform: scale(1.1); /* 拡大適用 */
  z-index: 1; /* 最前面 */
}

/* 電話番号とメールリンクのスタイル（全デバイス共通） */
a[href^="tel"],
a[href^="mailto"] {
  color: #0044cc; /* 青色でリンクらしさを強調 */
  text-decoration: underline !important; /* 下線を強制的に適用 */
  font-weight: normal; /* 太さを標準に */
}

/* ホバー時のスタイル（モバイルでも影響あり） */
a[href^="tel"]:hover,
a[href^="mailto"]:hover {
  color: #ff6600; /* ホバー時に色を変える */
  text-decoration: underline; /* 下線を維持 */
}

.icon-phone::before {
  content: "📞"; /* 電話アイコン */
  margin-right: 5px; /* アイコンとテキストの間に余白 */
}

.icon-mail::before {
  content: "✉️"; /* メールアイコン */
  margin-right: 5px;
}

/* 左上のサイトタイトルを非表示にする */
.site-title {
  display: none;
}

/*--------------------------------------------------------------*/
/* お問い合わせフォーム（全体スタイル） */
/*--------------------------------------------------------------*/
.wpforms-container {
  max-width: 600px; /* 最大幅600px */
  margin: 0 auto; /* 中央揃え */
  padding: 20px;
  box-sizing: border-box;
}

.wpforms-field {
  margin-bottom: 20px;
}

/* 必須・任意ラベル */
.wpforms-field-label {
  display: flex;
  align-items: center;
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 5px;
}

.wpforms-field-label .required-label {
  display: inline-block;
  background-color: #004466; /* 必須の背景色 */
  color: white; /* 必須の文字色 */
  font-size: 0.9rem;
  padding: 2px 8px;
  margin-right: 10px;
  border-radius: 5px;
  text-align: center;
}

.wpforms-field-label .optional-label {
  display: inline-block;
  background-color: #e0f0ff; /* 任意の背景色 */
  color: #004466; /* 任意の文字色 */
  font-size: 0.9rem;
  padding: 2px 8px;
  margin-right: 10px;
  border-radius: 5px;
  text-align: center;
}

/* 入力フィールド */
.wpforms-field input,
.wpforms-field textarea,
.wpforms-field select {
  width: 100%; /* フィールド幅 */
  padding: 10px;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
}

.wpforms-field textarea {
  resize: none; /* リサイズを禁止 */
}

/* ボタン */
.wpforms-submit {
  background-color: #3385cc; /* 明るい青 */
  color: white;
  font-size: 1.2rem;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  display: block;
  width: 100%;
  max-width: 300px;
  margin: 20;
}

/*--------------------------------------------------------------*/
/* お問い合わせフォーム（全体スタイル） */
/*--------------------------------------------------------------*/
.wpforms-container {
  max-width: 600px; /* 最大幅600px */
  margin: 0 auto; /* 中央揃え */
  padding: 20px; /* 内側に隙間を設定 */
  box-sizing: border-box;
}

/* スマホ対応のスタイル */
@media (max-width: 768px) {
  .wpforms-container {
    max-width: 90%; /* フォーム全体の幅を画面の90%に設定 */
    margin: 0 auto; /* 中央揃え */
    padding: 15px; /* スマホ用の内側余白を追加 */
    box-sizing: border-box;
  }
}
.wpforms-field input,
.wpforms-field textarea,
.wpforms-field select {
  width: 100%; /* フォームフィールドの幅を調整 */
  padding: 10px; /* 内側の余白を設定 */
  font-size: 1rem; /* フォントサイズを適切に調整 */
}

.wpforms-submit {
  width: 100%; /* ボタンを画面幅に合わせる */
  max-width: 300px; /* 最大幅を設定 */
  margin: 20px auto; /* ボタンを中央揃え */
}

/* reCAPTCHA */

/* デフォルトで非表示 */
.grecaptcha-badge {
  display: none;
}

/* すべてのページで非表示 */
.grecaptcha-badge {
  display: none !important;
}

/* お問い合わせページ（page-id-87）のみ表示 */
.page-id-87 .grecaptcha-badge {
  display: block !important;
}

/* ラベル内の必須マーク（右側の`*`）を赤くする */
label.wpforms-field-label-inline[for="wpforms-434-field_10_1"] {
  color: inherit; /* 他の部分の色を引き継ぐ */
}

label.wpforms-field-label-inline[for="wpforms-434-field_10_1"]::after {
  content: "*"; /* 必須マークを再表示 */
  color: red !important; /* 必須マークを赤にする */
  font-weight: bold; /* 太字にする */
  font-size: 1rem; /* 必須マークのサイズ調整 */
  margin-left: 5px; /* スペースを追加 */
}

/* チェックボックスの上にある特定の必須マークを非表示にする */
#wpforms-434-field_10-container legend .wpforms-required-label {
  display: none !important;
}

/* サンクス画面の背景を白くし、角を丸める */
.wpforms-confirmation-container-full {
  background-color: #edfffd !important; /* 背景色を白に */
  border-radius: 15px !important; /* 角を丸める */
  padding: 30px !important; /* 内側の余白を追加 */
  box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.5) !important; /* 軽い影を追加（オプション） */
  overflow: hidden !important; /* コンテンツが角からはみ出ないように */
}

/* 必要に応じて文字色を調整 */
.wpforms-confirmation-container-full p {
  color: #000 62% 2% !important; /* 黒文字に変更 */
}

.photocatalyst-video-container {
  width: 100vw; /* ブラウザ全体の幅に合わせる */
  height: auto; /* ブラウザ全体の高さに合わせる */
  overflow: hidden; /* はみ出し部分を隠す */
}

.photo-catalyst-video {
  width: 100vw; /* 動画を親要素にフィット */
  height: auto; /* 縦横比を保持 */
  object-fit: cover; /* 親要素全体を埋める */
}

@media (max-width: 768px) {
  .photocatalyst-video-container {
    height: 150px; /* スマホでは固定高さ */
    overflow: hidden;
  }

  .photo-catalyst-video {
    height: 150px;
    width: auto; /* 横幅を調整 */
    object-fit: cover; /* 動画全体を収める */
  }
}

/*--------------------------------------------------------------*/
/* 共通スタイル */
/*--------------------------------------------------------------*/
.termite-table {
  width: 100%;
  max-width: 1200px;
  margin: 20px auto;
  border-collapse: collapse;
  text-align: center;
  font-size: 0.9rem;
  background-color: #f9f9f9;
  table-layout: fixed; /* 列幅を均等に割り当てる */
}

.termite-table th,
.termite-table td {
  border: 1px solid #ccc;
  padding: 10px;
  text-align: center;
  word-wrap: break-word;
  word-break: break-word;
  white-space: normal;
}

/* 1列目を固定 */
.termite-table th:first-child,
.termite-table td:first-child {
  position: sticky;
  left: 0;
  background-color: #fff;
  z-index: 10;
}

/* 1行目を固定 */
.termite-table thead th {
  position: sticky;
  top: 0;
  background: linear-gradient(to bottom, #e6f7ff, #d9f2ff);
  color: black;
  z-index: 11;
  padding: 10px;
  border: 1px solid #ccc;
}

/* 偶数行の背景色 */
.termite-table tr:nth-child(even) {
  background-color: #f9f9f9;
}

/* ホバー時の背景色 */
.termite-table tr:hover {
  background-color: #f1f1f1;
}

/* 画像のスタイル */
.termite-table th img,
.termite-table td img {
  max-width: 120px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/*--------------------------------------------------------------*/
/* レスポンシブ対応 */
/*--------------------------------------------------------------*/
@media (max-width: 768px) {
  .termite-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* iOS用スムーズスクロール */
  }

  .termite-table th:first-child,
  .termite-table td:first-child {
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); /* スクロール時の視認性向上 */
  }

  .termite-table thead th {
    font-size: 0.8rem; /* スマホ用の文字サイズ調整 */
  }
}

/*--------------------------------------------------------------*/
/* その他のカスタムスタイル */
/*--------------------------------------------------------------*/
.table-caption {
  max-width: 1200px;
  margin: 0 auto;
  text-align: left;
  font-size: 0.9rem;
  line-height: 1.5;
}

.highlight-red {
  color: red;
  font-weight: bold;
}

/* 左上角を固定 */
.termite-table thead th:first-child {
  position: sticky;
  top: 0; /* 行方向に固定 */
  left: 0; /* 列方向に固定 */
  z-index: 15; /* 他のセルの上に表示 */
  background-color: #fff; /* 固定時の背景色 */
}

/*--------------------------------------------------------------*/
/* NFEセクション全体設定 */
/*--------------------------------------------------------------*/
.nfe-composition {
  padding: 40px 0;
  background-color: #f9f9f9;
}

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

.nfe-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.nfe-column {
  flex: 0 0 23%;
  text-align: center;
  margin-bottom: 20px;
}

.nfe-column img {
  width: 100%; /* PC用横並び画像の横幅 */
  border-radius: 8px;
}

.nfe-column p {
  font-size: 16px;
  margin: 10px 0;
  color: #333;
}

.nfe-column p:first-of-type {
  font-size: 18px;
  font-weight: bold;
}

/*--------------------------------------------------------------*/
/* スマホ対応の縦並びスタイル */
/*--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  .nfe-row {
    flex-direction: column; /* 縦並びに変更 */
    align-items: center; /* コンテンツを中央揃え */
    gap: 20px; /* 要素間の余白 */
  }

  .nfe-column {
    flex: 0 0 auto; /* 幅を自動調整 */
    text-align: center; /* テキストを中央揃え */
    margin-bottom: 30px; /* 下に余白を追加 */
  }

  .nfe-column img {
    max-width: 40%; /* 画像サイズを40%に設定 */
    height: auto; /* 縦横比を維持 */
    margin: 0 auto; /* 中央揃え */
    display: block; /* ブロック要素に設定 */
  }

  .nfe-column p {
    margin: 10px 0; /* テキストの上下余白を設定 */
    font-size: 16px; /* 読みやすいフォントサイズ */
    line-height: 1.6; /* 行間を調整 */
  }

  .nfe-text {
    padding: 10px 15px;
  }
}

/* デフォルト設定 */
.effect-image-pc {
  display: block;
}

.effect-image-mobile {
  display: none;
}

/* スマホ用設定 */
@media screen and (max-width: 768px) {
  .effect-image-pc {
    display: none; /* PC版画像を非表示 */
  }

  .effect-image-mobile {
    display: block; /* スマホ版画像を表示 */
  }
}

/* PC用設定 */
@media screen and (min-width: 769px) {
  .effect-image-mobile {
    display: none; /* スマホ版画像を非表示 */
  }
}

/* 全体設定 */
.customer-ranking-section {
  max-width: 1000px;
  margin: 20px auto;
  text-align: center;
}

/* タイトルと説明 */
.customer-ranking-title {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 10px;
}

.customer-ranking-desc {
  font-size: 1.2rem;
  font-weight: bold;
  color: #1d4ade;
  margin-bottom: 20px;
}

/* ランキング1位の親要素の幅を画像グリッドに合わせる */
.ranking-item-first {
  margin: 0 auto; /* 中央揃え */
  max-width: 1200px; /* 6枚の画像グリッドに合わせた幅 */
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #f9f9f9;
  text-align: left;
  margin-bottom: 40px; /* 下に40pxの余白を追加 */
}

.ranking-item-first .ranking-header {
  display: flex; /* 横並び */
  align-items: center; /* 中央揃え */
  gap: 10px; /* アイコンと説明文の間隔 */
  text-align: left; /* テキストを左揃え */
}

.ranking-item-first .ranking-header img {
  width: 70px; /* ランキングアイコンのサイズ */
  height: auto;
}

.ranking-item-first .ranking-header p {
  margin: 0;
  font-size: 16px;
}

/* 画像グリッドの設定 */
.ranking-item-first div[style*="display: grid"] {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3列グリッド */
  gap: 10px; /* 画像間の余白 */
  margin-top: 10px;
}

/* 2位から5位のスタイル */
.ranking-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2列レイアウト */
  gap: 20px; /* 各項目間の余白 */
}

.ranking-item {
  display: flex; /* 各要素を縦方向に配置 */
  flex-direction: column;
  align-items: flex-start; /* 左揃え */
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 8px;
  background-color: #f9f9f9;
  text-align: left;
}

.ranking-header {
  display: flex; /* 横並びに配置 */
  align-items: center; /* 縦方向中央揃え */
  gap: 10px; /* アイコンと文字の間隔 */
}

.ranking-header img {
  width: 70px; /* アイコンサイズ */
  height: auto;
}

.ranking-header p {
  margin: 0; /* テキストの余白をリセット */
  font-size: 16px;
  font-weight: bold;
}

/* スマホ対応（768px以下で1列表示） */
@media (max-width: 768px) {
  .ranking-row {
    grid-template-columns: 1fr;
  }
}

/* ランキングアイコン専用スタイル */
.ranking-header img {
  max-width: none; /* グローバルの max-width を無効化 */
  margin: 0; /* 自動マージンをリセット */
  display: inline-block; /* 必要に応じて変更 */
  width: 70px; /* 固定幅を指定 */
  height: auto; /* アスペクト比を維持 */
}

/* グローバル img スタイル */
body img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 20px;
}

/* ランキングアイコンには適用しない */
.ranking-header img {
  max-width: none;
  margin: 0;
}

/* スマホ対応：最大幅768px以下の場合 */
@media (max-width: 768px) {
  .ranking-item-first div[style*="display: grid"] {
    grid-template-columns: repeat(2, 1fr) !important; /* 2列に変更 */
    gap: 10px !important; /* 画像間の余白 */
  }
}

.ranking-item-first img {
  width: 100%; /* 各画像が列幅にフィット */
  height: auto; /* アスペクト比を維持 */
}

.fade-in-bottom {
  opacity: 0;
  transform: translateY(50px); /* 下から出てくる効果 */
  transition: opacity 1s ease-out, transform 1s ease-out; /* アニメーションの設定 */
}

.fade-in-bottom.is-visible {
  opacity: 1;
  transform: translateY(0); /* 元の位置に移動 */
}

/* フェードイン効果（透明 → 徐々に不透明） */
.fade-in-opacity {
  opacity: 0; /* 最初は透明 */
  transition: opacity 1.5s ease-in; /* 徐々に不透明になる */
}

.fade-in-opacity.is-visible {
  opacity: 1; /* 完全に表示される */
}

/* 右から左に少しだけ移動して出現するフェードイン効果 */
.fade-in-left {
  opacity: 0; /* 初期状態で透明 */
  transform: translateX(10px); /* 少しだけ右に移動 */
  transition: opacity 1s ease-out, transform 1s ease-out; /* アニメーション効果 */
}

/* 遅延の設定（行ごとに異なるタイミングで発火） */
.fade-in-left:nth-child(1) {
  transition-delay: 0s; /* 1枚目はすぐ開始 */
}

.fade-in-left:nth-child(2) {
  transition-delay: 0.15s; /* 2枚目は少し遅れる */
}

.fade-in-left:nth-child(3) {
  transition-delay: 0.3s; /* 3枚目はさらに遅れる */
}

.fade-in-left:nth-child(4) {
  transition-delay: 0.45s; /* 4枚目 */
}

/* スマホ版で最後の画像を非表示にする */
.hidden-on-mobile {
  display: none;
}

/* スマホ版用のメディアクエリ */
@media (min-width: 769px) {
  .hidden-on-mobile {
    display: block; /* PC版では表示 */
  }
}

.fade-in-up {
  opacity: 0; /* 初期状態は透明 */
  transform: translateY(20px); /* 下に少し移動 */
  transition: opacity 1s ease-out, transform 1s ease-out; /* アニメーションの時間 */
}

.fade-in-up.is-visible {
  opacity: 1; /* 表示される */
  transform: translateY(0); /* 元の位置に移動 */
}

.fade-in-background.is-visible {
  opacity: 1;
}

/* 背景画像フェードイン */
.fade-in-inspection-background {
  opacity: 0;
  transition: opacity 1.5s ease-out;
}

.fade-in-inspection-background.is-visible {
  opacity: 1;
}

/* テキストフェードイン */
.fade-in-inspection-text {
  opacity: 0;
  transition: opacity 2s ease-out 0.5s; /* 背景画像より遅れて出現 */
}

.fade-in-inspection-text.is-visible {
  opacity: 1;
}

/* 背景画像フェードイン */
.fade-in-background {
  opacity: 0;
  transition: opacity 1.5s ease-out;
}

.fade-in-background.is-visible {
  opacity: 1;
}

/* テキストフェードイン */
.fade-in-text {
  opacity: 0;
  transition: opacity 2s ease-out 0.5s; /* 背景画像より遅れて出現 */
}

.fade-in-text.is-visible {
  opacity: 1;
}

.fade-in-left.is-visible {
  opacity: 1; /* 完全に表示 */
  transform: translateX(0); /* 元の位置に戻る */
}

/*光触媒施工動画*/
.youtube-container {
  position: relative;
  width: 100%;
  max-width: 1000px; /* 最大幅1200px */
  margin: 0px auto 60px auto;
  aspect-ratio: 16 / 9;
}

.youtube-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.house-parts, .house-parts2, .house-parts3 {
  width: 96vw; /* 画面幅の80%に可変 */
  max-width: 800px; /* ただし最大1000pxまで */
  height: auto;
  display: block;
  margin: 20px auto 40px;
}

h6.left-align {
  text-align: left !important;      /* 左寄せ */
  width: 96vw;                      /* 画像と同じ幅 */
  max-width: 800px;                 /* 画像と同じ幅 */
  margin:60px auto 0px;
  font-size: 1.6rem !important;
}

ul.no-marker {
  list-style-type: none;
  max-width: 800px;
  margin: 0 auto;
  padding-left: 0;
  padding-right: 0;
}

ul.no-marker li {
  padding-left: 1rem;
  text-indent: -1rem;
  margin-bottom: 0.8em;
  line-height: 1.4;
}

/* スマホ時は必要なら余白調整 */
@media (max-width: 768px) {
  ul.no-marker {
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* スマホだけh3をbody直下で幅いっぱいにする */
@media (max-width: 768px) {
  main.area-price-page h3 {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }
}

/* PCで最大幅が広がりすぎないように中央寄せする場合 */
@media (min-width: 768px) {
  .area-price-page h4 {
    margin-left: auto;
    margin-right: auto;
    max-width: 520px;
  }
}

/* 税込説明文もh4と同じmax-width・中央寄せ */
.price-caption {
  margin: 0 0 20px 0;
  padding-left: 20px; /* h4のpadding-leftと合わせる */
  padding-right: 16px; /* h4のpadding-rightと合わせる */
  max-width: 520px; /* h4と同じ幅 */
  font-size: 1.25rem;
  box-sizing: border-box;
  margin-left: auto; /* 中央寄せ */
  margin-right: auto; /* 中央寄せ */
}

/* デスクトップ以上：左寄せ＋h4テキスト位置に合わせて42pxインデント */
@media (min-width: 768px) {
  .price-caption {
    text-align: left;
    padding-left: 42px; /* h4 の padding-left と揃える */
    padding-right: 16px;
  }
}

/* 「税込み価格」部分の色を確実に上書き */
.accent {
  color: #05872c !important;

}

/* 自動見積りフォーム・料金表 見出しスペース調整 */
.area-price-page h6 {
  margin-top: 30px;
  margin-bottom: 10px;
}

/* area-price 専用：自動見積り・料金表テーブル */
.area-price-page table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
  overflow: hidden;
  margin-bottom: 28px;
}

/* テーブルのヘッダー */
.area-price-page table thead th {
  background: #b2d6ef;
  color: #085075;
  font-weight: bold;
  padding: 14px 10px;
  border-bottom: 2px solid #cbfff0;
  font-size: 1.06em;
}

/* テーブルセル */
.area-price-page table td,
.area-price-page table th {
  padding: 12px 10px;
  border-bottom: 1px solid #81e3d4;
}

/* テーブル最終行はボーダー消す */
.area-price-page table tr:last-child td {
  border-bottom: none;
}

/* 角丸 */
.area-price-page table {
  border-radius: 8px;
}

/* 簡易点検と天然シロアリ防除施工の見積額セルを右揃え */
#simple-b4,
#simple-d4,
#termite-eco-b4,
#termite-eco-d4 {
  text-align: right;
  padding-right: 16px; /* お好みで内側余白を追加 */
}

.area-price-block {
  max-width: 520px;
  margin: 0 auto 0 auto; /* 中央寄せ */
}

/* 概要：車両用料金表だけmax-width解除して横スクロール可能にする */
.car-table-scroll-container {
  max-width: none !important; /* 520px制限を解除 */
  width: auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 auto;
  padding-bottom: 10px; /* 下に余白、必要なら調整 */
  text-align: center;
}

.car-table-list {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  background-color: #f9f9f9;
  table-layout: auto;
}

/* テーブル自体の幅を大きめに設定（カラム数で調整） */
.car-table-scroll-container .car-table-list {
  min-width: 0 !important;

  width: 100%;
  margin: 0 auto;
}

/* セル共通 */
.car-table-list th,
.car-table-list td {
  border: 1px solid #ccc;
  padding: 10px;
  text-align: center;
  word-break: break-word;
  white-space: nowrap; /* これで改行防止 */
}

/* 1列目固定 */
.car-table-list th:first-child,
.car-table-list td:first-child {
  position: sticky;
  left: 0;
  background-color: #fff;
  z-index: 10;
}

/* 1行目固定 */
.car-table-list thead th {
  position: sticky;
  top: 0;
  background: linear-gradient(to bottom, #e6f7ff, #d9f2ff);
  color: black;
  z-index: 11;
}

/* 偶数行の背景 */
.car-table-list tr:nth-child(even) {
  background-color: #f9f9f9;
}

/* ホバー */
.car-table-list tr:hover {
  background-color: #f1f1f1;
}

/* レスポンシブ（スマホはmin-width調整） */
@media (max-width: 768px) {
  /* ① スクロールコンテナ化 */
  .car-table-scroll-container {
    display: block; /* ブロックにして */
    overflow-x: auto; /* 常に横スクロール許可 */
    -webkit-overflow-scrolling: touch; /* iOSで慣性スクロール */
    margin: 0;
    padding-bottom: 10px;
    position: relative;
  }

  .car-table-list {
    min-width: 900px; /* 必要なら調整、列数×セル幅分 */
    width: auto;
  }
}
  
  /* ③ セル内は折り返さず横並び */
  .car-table-list th,
  .car-table-list td {
    white-space: nowrap; /* 折り返し禁止 */
    word-break: normal; /* 単語ごとの折返しも禁止 */
  }

  /* ④ 左端１列だけ固定 */
  .car-table-list th:first-child,
  .car-table-list td:first-child {
    position: static !important; /* ←これだけでOK */
    left: auto !important;
    background: inherit !important;
    z-index: auto !important;
    box-shadow: none !important;
  }

  /* サイズ調整（必要に応じて） */
  .car-table-list thead th {
    font-size: 0.8rem;
  }

  /* 3) １列目を改めて Sticky 指定（重なり順も調整） */
  .car-table-scroll-container .car-table-list th:first-child,
  .car-table-scroll-container .car-table-list td:first-child {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    background-color: #e1f1fa;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
    z-index: 2; /* 他のセルより前面に */
  }

  /* ヘッダー左上セルはさらに前面に */
  .car-table-scroll-container .car-table-list thead th:first-child {
    z-index: 3;
  }

.car-catalyst-price {
  max-width: none !important;
  width: auto !important;
}