/* ==========================================================================
   1. 基本設定 (Base)
   ========================================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* サイト全体にスムーズスクロールを適用 */
html {
  scroll-behavior: smooth;
}
/* 固定ヘッダーに隠れないように位置を調整 */
/* header.cssで .top-nav が top: 24px に配置されていることを考慮 */
#contact,
#work,
#service,
#about {
  scroll-margin-top: 80px; /* ヘッダーの高さ＋余白分を確保 */
}
body {
  font-family: "Inter", sans-serif;
  background-color: #f2f2f2;
  color: #000;
  line-height: 1.2;
  overflow-x: hidden;
}

/* コンテナ共通 */
.container {
  padding: 0 50px 60px 50px;
  position: relative;
  min-height: 72vh;
}

/* セクションタイトル共通 */
.section-title {
  text-align: center;
  font-size: clamp(20px, 4vw, 32px);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #111;
  margin: 120px 0 30px;
}

/* ==========================================================================
   2. 各セクションのスタイル (Sections)
   ========================================================================== */

/* --- HERO --- */
.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.container::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.35));
  z-index: 1;
}

.main-title,
.bottom-actions {
  position: relative;
  z-index: 2;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.main-title {
  font-size: clamp(20px, 15vw, 60px);
  font-weight: 700;
  letter-spacing: -1px;
  padding-top: 290px;
  margin-bottom: 30px;
  text-transform: uppercase;
}

.main-title .small-lines {
  display: block;
  font-size: 0.6em;
  line-height: 1.1;
  margin-bottom: 15px;
}

.main-title .companyname {
  display: block;
  font-size: 1.2em;
  margin-top: 20px;
}

.cta-button {
  display: inline-block; /* aタグでも余白を持たせるため */
  background-color: #000;
  color: #fff;
  border: none;
  padding: 15px 40px;
  font-size: 17px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  z-index: 2;
  position: relative;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.cta-button:hover {
  opacity: 0.8;
}

/* --- WORK --- */
.work {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto 60px;
  padding: 0 20px;
}

/* フィルターボタンのスタイル */
.filter-group {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px; /* 項目が増えるため50pxから30pxへ調整 */
  flex-wrap: wrap; /* 重要：入り切らない場合に折り返しを許可 */
  margin-bottom: 40px;
  padding: 0 20px;
}

.filter-btn {
  background: none;
  border: none;
  font-size: 20px;
  font-weight: 700;
  color: #888;
  cursor: pointer;
  letter-spacing: 0.15em;
  padding-bottom: 5px;
  border-bottom: 2px solid transparent;
  transition: all 0.3s ease;
  white-space: nowrap; /* 項目名が途中で改行されないようにする */
  text-decoration: none !important;
  display: inline-block;
}

.filter-btn.active,
.filter-btn:hover {
  color: #000;
  border-bottom: 2px solid #000;
}

/* 画像の「枠」の設定 */
.work-img {
  width: 100%;
  aspect-ratio: 1 / 1; /* 正方形に固定。16/9などお好みで調整可 */
  border-radius: 6px;
  overflow: hidden;
  background-color: #000; /* 画像がない時の下地 */
}

.work-img img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 枠いっぱいに切り抜いて表示 */
}

/* フィルタリング時のアニメーション用クラス */
.work-item.fade-out {
  opacity: 0;
  transform: translateY(10px);
}

.work-item.fade-in {
  opacity: 1;
  transform: translateY(0);
}

.work-item {
  transition: opacity 0.4s ease, transform 0.4s ease;
  margin-bottom: 15px;
}

.work-lightbox {
  text-decoration: none !important; /* アンダーラインを強制的に消す */
  color: inherit !important; /* 文字色を親要素（黒）から継承する */
  display: block; /* カード全体をクリック可能にする */
}

/* ホバー時にアンダーラインが出ないように念押し */
.work-lightbox:hover,
.work-lightbox:focus,
.work-lightbox:active {
  text-decoration: none !important;
  color: inherit !important;
}

/* 非表示アイテムの初期状態 */
.work-item.is-hidden {
  display: none;
}

.work-item img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  /* 拡大のアニメーション設定 */
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ホバーした時、画像だけを枠の中で拡大させる */
.work-item:hover .work-img img {
  transform: scale(1.1);
}

/* テキストは画像の下に固定され、重ならなくなります */
.work-item h3,
.work-item p {
  margin-top: 15px;
  font-size: 1.2rem;
  color: #000;
  text-decoration: none;
}

/* ボタンのコンテナ設定 */
.more-container {
  /* 3列の時は、全列をまたいで中央寄せにする */
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-start; /* centerからflex-start（左寄せ）に変更 */
  align-items: center;
  padding-top: 20px;
}

.more-btn {
  text-decoration: none;
  color: #333;
  font-weight: bold;
  border: 1px solid #333; /* 枠線をつけるとボタンらしくなります（任意） */
  padding: 10px 30px;
  transition: all 0.3s ease;
  /* --- ここから追加・修正 --- */
  background-color: transparent; /* 背景を透明に明示 */
  -webkit-appearance: none; /* iOS独自のボタン装飾をリセット */
  -moz-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent; /* タップ時の青いハイライトを完全に消す */
  outline: none; /* フォーカス時の青い枠線を消す */
}

.more-btn:hover {
  background-color: #333;
  color: #fff;
}

/* タップ中（active）やフォーカス時の色を黒に固定 */
.more-btn:active,
.more-btn:focus {
  background-color: #333 !important; /* 強制的に背景を黒にする */
  color: #fff !important; /* 強制的に文字を白にする */
  outline: none;
}

/* --- ABOUT --- */
.about {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.about-container {
  display: flex;
  align-items: center;
  gap: 60px;
}

.about-text {
  flex: 1;
}
.about-text h3 {
  font-size: 24px;
  margin-bottom: 24px;
  color: #111;
}

.about-text p {
  font-size: 16px;
  line-height: 1.8;
  color: #444;
  margin-bottom: 20px;
}

.about-image {
  flex: 1;
}
.about-image img {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}

/* --- ABOUTセクションのボタン設定 --- */
.about-action {
  margin-top: 40px;
  text-align: left; /* 中央に配置 */
}

.about-btn {
  text-decoration: none;
  color: #333;
  font-weight: bold;
  border: 1px solid #333; /* 枠線をつけるとボタンらしくなります（任意） */
  padding: 10px 30px;
  transition: all 0.3s ease;
  /* --- ここから追加・修正 --- */
  background-color: transparent; /* 背景を透明に明示 */
  -webkit-appearance: none; /* iOS独自のボタン装飾をリセット */
  -moz-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent; /* タップ時の青いハイライトを完全に消す */
  outline: none; /* フォーカス時の青い枠線を消す */
}

.about-btn:hover {
  background-color: #333;
  color: #fff;
}

/* --- CONTACT --- */
#contact {
  margin-top: 200px;
}
.contact {
  max-width: 1200px;
  margin: 0 auto 120px;
  padding: 0 20px;
  text-align: center;
}

.contact-message {
  font-size: 18px;
  line-height: 1.8;
  color: #333;
  margin-bottom: 30px;
}

.contact-button {
  background-color: #000;
  border-radius: 5px;
  color: #fff;
  border: none;
  padding: 12px 35px;
  font-size: 15px;
  cursor: pointer;
  transition: opacity 0.3s;
  text-decoration: none;
  display: inline-block;
  /* スマホでのタップ時の青いハイライトを消す */
  -webkit-tap-highlight-color: transparent;

  /* ボタン要素の場合のデフォルトのアウトラインを消す */
  outline: none;
}

/* フォームのミニマルデザイン */
.cyber-form {
  max-width: 600px;
  margin: 0 auto;
  text-align: left;
}
.form-group {
  margin-bottom: 25px;
}

.cyber-form input:not([type="submit"]),
.cyber-form textarea {
  width: 100%;
  padding: 12px 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid #333; /* 下線のみのデザイン */
  outline: none;
  font-family: inherit;
  font-size: 16px;
  transition: border-bottom-color 0.3s ease;
}

.cyber-form input:focus,
.cyber-form textarea:focus {
  border-bottom-color: #000; /* フォーカス時に線を強調 */
}

/* スパム防止チェックエリアの調整 */
.spam-prevention {
  margin: 25px 0;
  display: flex;
  justify-content: center;
  width: 100%;
}

/* CF7が生成する余計なスパンタグの挙動をリセット */
.spam-prevention .wpcf7-form-control-wrap {
  display: flex !important;
  flex-direction: column !important; /* 縦並び（垂直方向）に変更 */
  align-items: center !important; /* 中央揃えを維持 */
}

.spam-prevention .wpcf7-not-valid-tip {
  display: block !important;
  width: 100%;
  text-align: center; /* エラー文言を中央寄せ */
  margin-top: 10px !important; /* チェックボックスとの隙間 */
  font-size: 13px;
  color: #ff0000;
}

/* チェックボックスとテキスト自体は横並びを維持 */
.spam-prevention .wpcf7-list-item {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
}

.spam-prevention label {
  display: flex !important; /* inline-flexからflexに変更 */
  align-items: center !important; /* これで上下中央に固定 */
  cursor: pointer;
  font-size: 14px;
  color: #666;
  line-height: 1 !important; /* 行の高さを1にしてズレを防止 */
  white-space: nowrap;
}

.spam-prevention input[type="checkbox"] {
  margin: 0 10px 0 0 !important;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  cursor: pointer;
  /* ブラウザ固有の垂直位置ズレをリセット */
  vertical-align: middle;
  position: relative;
  top: -1px; /* 微調整が必要な場合はここを0〜-2px程度で調整 */
}

.form-submit {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important; /* 親要素として中央に寄せる */
  align-items: center !important;
  margin: 40px 0 0 !important;
  padding: 0 !important;
  position: relative !important;
  background-color: transparent !important; /* 背景色をリセット */
}

/* 1. CF7が勝手に作る span タグの「幅」を無効化する */
.form-submit .wpcf7-form-control-wrap {
  display: contents !important;
}

/* 2. 右側のズレの元凶「ajax-loader」をレイアウト計算から完全に除外する */
.form-submit .ajax-loader {
  position: absolute !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 3. ボタン本体：余計なマージンを徹底的に削ぎ落とす */
.cyber-form .more-btn,
#submit-btn {
  margin: 0 !important; /* 左右の数ピクセルのズレをゼロにする */
  display: block !important; /* ブロック要素化 */
  min-width: 240px;
  padding: 12px 40px !important;

  /* デザイン：黒背景・白文字 */
  background-color: #000 !important;
  color: #fff !important;
  border: 1px solid #333 !important;
  font-weight: bold;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  border-radius: 0;
  transition: opacity 0.3s;
}

/* ホバー演出 */
.cyber-form .more-btn:hover,
#submit-btn:hover {
  opacity: 0.8 !important;
}

/* フォーム展開エリア全体のコンテナ */
#expanded-form {
  display: none; /* 初期状態は非表示（JSで制御） */
  margin-top: 50px;
}

/* --- 送信完了メッセージ (THANK YOU) --- */
#form-thanks {
  display: none; /* 初期状態は非表示（JSで制御） */
  text-align: center;
  padding: 40px 0;
}

#form-thanks h3 {
  font-size: 24px;
  margin-bottom: 20px;
}

#form-thanks p {
  color: #666;
  line-height: 1.8;
}

/* --- Contact Form 7 連携用の補正 --- */

/* CF7が自動生成する不要な p タグと br タグを非表示にする */
.cyber-form p {
  margin: 0;
  padding: 0;
  display: block !important; /* 強制的に表示させます */
}

.cyber-form br {
  display: none; /* 改行タグのみ非表示にして余白を詰めやすくします */
}

/* CF7のラッパーをブロック要素にして幅を確保 */
.wpcf7-form-control-wrap {
  display: block;
  width: 100%;
  margin-bottom: 20px; /* 入力欄ごとの余白 */
}

/* 入力エラーメッセージ（赤文字）のスタイル調整 */
.wpcf7-not-valid-tip {
  font-size: 12px;
  color: #ff0000;
  margin-top: 5px;
  display: block;
}

/* フォーム送信中や成功時のステータスメッセージ（デフォルト）を非表示にする */
/* 自作の演出（THANK YOUメッセージ）を使用するため */
.wpcf7-response-output {
  display: none !important;
}

/* --- 送信中アニメーション（ボタン内に完結版） --- */

/* 1. デフォルトのクルクル画像を消す */
.wpcf7-spinner,
.ajax-loader {
  display: none !important;
}

/* 2. 送信中のボタン本体の設定 */
/* overflow: hidden が重要！これではみ出しをカットします */
button.more-btn.is-sending {
  position: relative !important;
  overflow: hidden !important;
  opacity: 0.8;
  pointer-events: none; /* 連打防止 */
  color: rgba(255, 255, 255, 0.8) !important; /* 文字も少し薄く */
}

/* 3. ボタン内を走るサイバーな光のライン */
button.more-btn.is-sending::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  /* 幅を100%にすることで、ボタンの幅にピッタリ合います */
  width: 100%;
  height: 3px; /* ラインの太さ */
  /* 青白いサイバーな光のグラデーション */
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 195, 255, 0.8),
    /* サイバーブルー */ #fff,
    rgba(0, 195, 255, 0.8),
    transparent
  );
  box-shadow: 0 0 10px rgba(0, 195, 255, 0.8); /* 発光エフェクト */
  animation: cyber-scan-internal 1.3s infinite linear;
}

/* ラインが左から右へ流れるアニメーション */
@keyframes cyber-scan-internal {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* ==========================================================================
   3. workアーカイブページ専用スタイル (Archive Page)
   ========================================================================== */

/* アーカイブページ全体の上の余白を 60px から 0 に変更 */
.archive-section {
  padding-top: 0; /* 60pxから0に変更して上の隙間を消す */
  padding-bottom: 0;
}

/* 2. アーカイブページの時だけ、黒い見出しエリアの下の余白を狭くする */
.archive-section-wrapper .privacy-hero {
  margin-bottom: 30px; /* 60pxから30pxへ半減 */
}

/* ページネーションのスタイル */
.pagination {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 60px;
}

.pagination .page-numbers {
  padding: 8px 16px;
  border: 1px solid #333;
  text-decoration: none;
  color: #333;
  font-size: 14px;
  transition: all 0.3s;
}

.pagination .page-numbers.current,
.pagination .page-numbers:hover {
  background: #000;
  color: #fff;
}

/* ==========================================================================
   4. レスポンシブ設定 (Media Queries)
   ========================================================================== */

/* タブレット (992px以下) */
@media (max-width: 992px) {
  .work {
    grid-template-columns: repeat(2, 1fr);
  }
  .more-container {
    /* grid-column: auto; から以下に変更 */
    grid-column: 1 / -1 !important; /* 全ての列をまたいで横幅いっぱいに広げる */
    justify-content: flex-start; /* centerからflex-start（左寄せ）に変更 */
    margin-top: 20px;
  }
  .about-container {
    gap: 40px;
  }
  .about-text h3 {
    font-size: 20px;
  }
}

/* モバイルメイン (768px以下) */
@media (max-width: 768px) {
  /* ヒーロー */
  .container {
    min-height: 56vh;
    padding: 0 20px 40px 20px;
  }
  .main-title {
    font-size: clamp(28px, 8vw, 48px);
  }
  .main-title .small-lines {
    font-size: 0.65em;
  }
  .more-container {
    margin-top: 5px !important;
  }

  /* 各セクション */
  .section-title {
    margin: 60px 0 20px !important; /* 上120px→80px、下30px→20pxに短縮 */
  }
  /* フィルターボタンの間隔をスマホ用に狭くする */
  .filter-group {
    gap: 15px 20px; /* 上下の間隔を15px、左右を20pxに設定 */
    flex-wrap: wrap; /* 万が一入り切らない場合は折り返す */
    margin-bottom: 30px;
  }
  #about.section-title {
    margin-top: 120px !important;
  }
  .about {
    margin-bottom: 10px !important;
  }
  .about-container {
    flex-direction: column-reverse !important;
    gap: 0 !important; /* 画像とテキストの間の物理的な隙間をゼロにする */
    align-items: center !important;
  }
  /* flex: 1 による強制的な上下への広がりを止める */
  .about-text,
  .about-image {
    flex: none !important; /* コンテンツの高さ分だけを確保するように変更 */
    width: 100% !important;
  }
  .about-text h3 {
    margin-top: 10px !important; /* 画像との最低限の距離だけを確保 */
    margin-bottom: 12px !important;
    font-size: 18px !important;
  }
  .about-text p {
    font-size: 14px !important;
    margin-bottom: 15px !important;
  }
  .about-image img {
    margin-bottom: 10px !important;
    display: block;
  }
  #contact.section-title {
    margin-top: 120px !important;
  }
  .contact-message {
    font-size: 15px;
  }
  .contact-button {
    padding: 12px 25px;
    font-size: 13px;
  }
}

/* スマホ小 (480px以下) */
@media (max-width: 480px) {
  .cta-button {
    padding: 12px 30px; /* PC版(15px 40px)より一回り小さくする */
    font-size: 14px; /* 文字サイズも少し抑える */
    background-color: rgba(0, 0, 0, 0.7); /* 少し透けさせて映像を活かす */
    border: 1px solid rgba(255, 255, 255, 0.3); /* 繊細な枠線を追加 */
  }
  .work {
    /* 2列を死守 */
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    /* アイテム間の隙間を少し狭めて画面を有効活用 */
    gap: 20px 12px !important;
    padding: 0 15px !important;
  }

  /* 1. 画像の縦横比を「正方形」に完全固定 */
  /* これで画像自体の高さの違いによるズレが100%なくなります */
  .work-img {
    width: 100%;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden;
    background-color: #000;
    border-radius: 4px;
  }

  .work-img img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 枠に合わせて綺麗に切り抜き */
  }

  /* 2. タイトルの高さを揃える */
  /* 文字数が違っても、次の行（説明文）の開始位置を強制的に揃えます */
  .work-item h3 {
    font-size: 13px !important; /* 少し小さくして折り返しを減らす */
    line-height: 1.3;
    margin-top: 10px;
    min-height: 2.6em; /* 2行分の高さを常に確保 */
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 3行以上は省略（ガタつき防止） */
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* 3. 説明文の調整 */
  .work-item p {
    font-size: 11px !important;
    line-height: 1.4;
    color: #666;
    margin-top: 4px;
    /* 説明文も高さを揃えたい場合はここも min-height を設定 */
  }

  /* 4. フィルターボタンがはみ出さないように調整 */
  .filter-btn {
    font-size: 13px !important;
    padding: 4px 0;
  }
  .more-container {
    grid-column: 1 / -1 !important; /* 2列表示の時も全列をまたいで中央へ */
    justify-content: flex-start; /* centerからflex-start（左寄せ）に変更 */
    padding: 0 !important;
  }
}

/* --- 画像拡大（モーダル）のスタイル --- */
.modal {
  display: none;
  position: fixed;
  z-index: 2000; /* ヘッダーより上に表示 */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(8px); /* 背景をぼかす */
  overflow: hidden;
}

/* style.css の .modal-content を修正 */
.modal-content {
  margin: auto;
  display: block;
  width: auto;
  max-width: 90%;
  max-height: 85%;
  min-width: 200px; /* 最小幅を追加 */
  min-height: 200px; /* 最小高を追加 */
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
  object-fit: contain; /* 画像が歪まないように保持 */
}

.modal-close {
  position: absolute;
  top: 30px;
  right: 40px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  z-index: 2100;
}

#modal-caption {
  margin: auto;
  display: block;
  width: 80%;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 50px;
  position: absolute;
  bottom: 20px;
  left: 10%;
  font-size: 14px;
  letter-spacing: 0.1em;
}

/* ==========================================================================
   下層ページ（トップ以外）のヘッダー被り対策
   ========================================================================== */

/* 1. トップページ以外の main 要素にヘッダー分の余白を追加 */
body:not(.home) main {
  padding-top: 85px; /* ヘッダーの高さ */
}

/* 2. スマホ版の余白調整 (768px以下) */
@media (max-width: 768px) {
  body:not(.home) main {
    padding-top: 70px; /* スマホ用ヘッダーの高さ */
  }
}

/* style.css の最後に追記 */

/* --- ページネーションを横並びに強制する設定 --- */
.pagination .nav-links {
  display: flex !important; /* 縦並びを解除して横並びにする */
  flex-direction: row !important; /* 明示的に横方向を指定 */
  justify-content: center !important; /* 中央に寄せる */
  align-items: center !important;
  gap: 10px !important; /* ボタン同士の間隔 */

  /* ヘッダー用スタイルを無効化するためのリセット */
  position: static !important;
  width: auto !important;
  height: auto !important;
  background: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  padding: 0 !important;
  margin: 0 auto !important;
}

/* ページネーション全体のコンテナ調整 */
.pagination {
  width: 100%;
  text-align: center;
  margin: 60px 0 40px;
}

/* 各数字ボタンのスタイル微調整 */
.pagination .page-numbers {
  text-decoration: none;
  padding: 8px 14px;
  background: #fff;
  border: 1px solid #ddd;
  color: #333;
  font-size: 14px;
}

.pagination .page-numbers.current {
  background: #000;
  color: #fff;
  border-color: #000;
}

@media (max-width: 480px) {
  .pagination {
    margin-top: 40px;
  }
  .pagination .page-numbers {
    padding: 8px 12px;
    font-size: 13px;
  }
}

.contact-sns-wrapper {
  margin-top: 40px;
}

.sns-sub-message {
  font-size: 14px;
  color: #666;
  margin-bottom: 20px;
  letter-spacing: 0.05em;
}

.contact-sns-btns {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap; /* スマホで入り切らない場合に折り返し */
}

.sns-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 30px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

/* 各ブランドカラーの設定（Cyber Canvasのトーンに合わせて少し落ち着かせています） */
.sns-item.line {
  background-color: #f0fdf4;
  color: #06c755;
  border-color: #06c755;
}
.sns-item.instagram {
  background-color: #fff5f8;
  color: #e1306c;
  border-color: #e1306c;
}
.sns-item.x-twitter {
  background-color: #f8f8f8;
  color: #000;
  border-color: #000;
}

/* ホバー演出 */
.sns-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.sns-item.line:hover {
  background-color: #06c755;
  color: #fff;
}
.sns-item.instagram:hover {
  background-color: #e1306c;
  color: #fff;
}
.sns-item.x-twitter:hover {
  background-color: #000;
  color: #fff;
}

/* スマホ用調整 */
@media (max-width: 480px) {
  .contact-sns-btns {
    gap: 10px;
  }
  .sns-item {
    padding: 8px 15px;
    font-size: 13px;
  }
}

/* ==========================================================================
   サービス紹介セクションのスタイル (Service Section)
   ========================================================================== */

/* style.css の最後に追加 */
.service {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.service-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.service-card {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
  padding: 40px 30px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  text-align: center;
  transition: transform 0.3s ease;
}

.service-card:hover {
  transform: translateY(-10px);
  background: rgba(255, 255, 255, 0.8);
}

.service-icon {
  width: 100px; /* 画像を表示したいサイズに調整してください */
  height: 100px; /* 正方形を維持 */
  margin: 0 auto 20px; /* 中央寄せと下の余白 */
  overflow: hidden; /* 枠からはみ出た画像をカット */
  border-radius: 8px; /* お好みで少し角を丸くする場合 */
  background-color: #eee; /* 画像読み込み前や画像がない時の下地色 */
}

.service-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 正方形の枠いっぱいに隙間なく表示 */
  display: block;
}

.service-card h3 {
  font-size: 20px;
  margin-bottom: 15px;
  letter-spacing: 0.1em;
}

.service-card p {
  font-size: 14px;
  color: #555;
  line-height: 1.6;
  margin-bottom: 25px;
  min-height: 4.8em;
}

.service-price {
  font-weight: 700;
  font-size: 18px;
  border-top: 1px solid #eee;
  padding-top: 20px;
}

.service-price span {
  font-size: 12px;
  font-weight: 400;
  color: #888;
}

.service-note {
  text-align: center; /* 中央揃え */
  margin-top: 40px; /* カードとの間隔 */
  font-size: 13px; /* 少し小さめにして補助的な印象に */
  color: #666; /* 文字色を少し薄くしてバランスをとる */
  letter-spacing: 0.05em; /* 字間を少し広げて読みやすく */
}

/* モバイル対応 */
@media (max-width: 768px) {
  #service.section-title {
    margin-top: 120px !important;
  }
  .service-container {
    grid-template-columns: 1fr;
  }
  .service-note {
    margin-top: 30px;
    font-size: 12px;
    padding: 0 10px; /* スマホで端が詰まらないように */
    line-height: 1.6;
  }
}