/* ===== CSS変数定義 ===== */
:root {
  --main-bg-color: #000000;
  --text-color: #ffffff;
  --accent-color: #ffdd00;
  --header-height: 60px;
  --footer-height: 40px;
}

/* ===== イントロアニメーション用スタイル ===== */
.intro-animation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-image: url('/images/for-text-animation.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.intro-animation.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.intro-animation.fadeout {
  animation: introFadeOut 4s ease-in-out forwards;
}

.intro-animation.fadeout::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000000;
  animation: blackOverlay 4s ease-in-out forwards;
  z-index: 10;
}

@keyframes blackOverlay {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes introFadeOut {
  to {
    opacity: 0;
  }
}

/* メインコンテンツの初期状態 */
body.intro-mode .site-header,
body.intro-mode .hamburger-btn,
body.intro-mode main,
body.intro-mode .site-footer {
  opacity: 0;
}

body.intro-complete .site-header,
body.intro-complete .hamburger-btn,
body.intro-complete main,
body.intro-complete .site-footer {
  animation: contentFadeIn 4s cubic-bezier(0.4, 0, 0.2, 1) forwards;  /* より滑らか */
}

@keyframes contentFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 手書き風アニメーション */
.handwriting-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30%;
  max-width: 600px;
  z-index: 10;
  pointer-events: none;
}

#text {
  mask: url(#mask);
}

.handwriting {
  width: 100%;
  height: auto;
}

.handwriting_text {
  fill: rgba(255, 255, 255, 0.9);
}

.handwriting_mask_line {
  fill: none;
  stroke: #fff;
  stroke-width: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 6000px;
  stroke-dashoffset: 6000px;
  animation: handwriting 6.5s ease-in-out 1.2s forwards;
}

@keyframes handwriting {
  0% {
    stroke-dashoffset: 6000px;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

/* ===== リセットとベーススタイル ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background-color: var(--main-bg-color);
}

/* Safari・Chrome共通：フォームバリデーション時のスクロール問題解決 */
html:has(form:invalid) {
  scroll-behavior: auto;
}

/* フォーカス時のスクロール調整 */
input:focus,
textarea:focus,
input:invalid,
textarea:invalid {
  scroll-margin-top: 120px;
  scroll-padding-top: 120px;
}

body {
  font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  background-color: var(--main-bg-color);
  color: var(--text-color);
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  opacity: 1;
  transition: opacity 0.06s ease-out;
}

/* スクロール無効化（ContactページとPrivacy Policyページとお知らせ詳細ページ以外） */
body:not(.contact-page):not(.privacy-page):not(.news-detail-page) {
  overflow: hidden;
  height: 100vh;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
}

/* ===== ヘッダー ===== */
.site-header {
  position: fixed;
  top: 8px;
  left: 0;
  width: 100%;
  height: var(--header-height);
  padding: 15px 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

/* デスクトップナビゲーション - 3つのセクションに分割 */
.desktop-nav {
  display: flex;
  align-items: center;
  gap: 80px; /* 各セクション間の距離 */
  width: 100%; /* 全幅を使用 */
  justify-content: center; /* メインメニューを中央に配置 */
  position: relative; /* SNSアイコンの絶対配置の基準 */
}

/* メインメニューエリア */
.main-menu {
  display: flex;
  align-items: center;
  gap: 90px; /* 元のメニュー項目間の距離を維持 */
}

/* デスクトップナビゲーション - 光るエフェクト追加 */
.desktop-nav a {
  color: var(--text-color);
  text-decoration: none;
  font-size: 0.7rem;
  position: relative;
  transition: all 0.3s ease;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

/* 共通のメニューリンクスタイル（アイコン付きメニュー用） */
.desktop-nav .menu-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

/* 共通のメニューアイコンスタイル */
.desktop-nav .menu-icon {
  width: 23px;
  height: 23px;
  transition: transform 0.6s ease;
}

/* 全メニューアイコンの共通ホバーアニメーション */
.desktop-nav .menu-link:hover .menu-icon {
  transform: rotateY(-360deg);
}

.desktop-nav a:hover {
  color: var(--text-color);
  transform: scale(1.3); /* ホバー時の拡大縮小調整 */
}

/* 光る正円を背景に作成 */
.main-menu a::before {
  content: '';
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 28px;  /* 正円のサイズ */
  height: 28px; /* 正円のサイズ */
  border-radius: 50%;
  background-color: transparent;
  transition: all 0.3s ease;
  z-index: -1; /* テキストの後ろに配置 */
  opacity: 0;
}

.main-menu a:hover::before {
  opacity: 1;
  background: radial-gradient(circle, rgba(250, 207, 108, 0.606) 0%, transparent 100%);
  box-shadow: 
    0 0 8px rgb(248, 231, 182),
    0 0 10px rgba(248, 243, 215, 0.8),
    0 0 20px rgba(247, 243, 213, 0.6),
    0 0 30px rgba(247, 245, 234, 0.665);
}

/* SNSリンクエリア */
.social-links {
display: flex;
flex-direction: row; /* 横方向に配置 */
align-items: center;
gap: 35px; /* アイコン間の横距離 */
top: 5px;
position: absolute; /* 絶対配置で右端に固定 */
right: 50px; /* 右端に配置（少し内側に） */
}


/* SNSアイコンのベーススタイル */
.social-link {
text-decoration: none;
transition: all 0.3s ease;
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 25px; /* サイズを小さく */
height: 25px; /* サイズを小さく */
border-radius: 50%;
}

/* SNS SVGアイコンのサイズ */
.social-icon {
width: 23px; /* サイズを小さく */
height: 23px; /* サイズを小さく */
transition: all 0.3s ease;
filter: brightness(1);
opacity: 0.9; /* 少し透明に */
}

/* SNSアイコンのホバーアニメーション */
.social-link:hover {
  transform: scale(1.2);
}

.social-link:hover .social-icon {
animation: heartbeat 0.55s ease-in-out;
opacity: 1; /* ホバー時に不透明に */
}

/* Instagram専用のホバーエフェクト */
.social-link[href*="instagram"]:hover {
  background: radial-gradient(circle, rgba(224, 10, 252, 0.859) 0%, transparent 100%);
  box-shadow: 
    0 0 5px rgb(191, 0, 255),
    0 0 10px rgba(245, 2, 196, 0.899),
    0 0 15px rgba(250, 181, 5, 0.998);
}

.social-link[href*="instagram"]:hover .social-icon {
  filter: brightness(1.2) drop-shadow(0 0 3px rgba(244, 17, 184, 0.935));
}

/* X(Twitter)専用のホバーエフェクト */
.social-link[href*="x.com"]:hover {
  background: radial-gradient(circle, rgba(10, 95, 252, 0.859) 0%, transparent 100%);
  box-shadow: 
    0 0 5px rgb(0, 89, 255),
    0 0 10px rgba(2, 152, 245, 0.899),
    0 0 15px rgba(5, 185, 250, 0.998);
}

.social-link[href*="x.com"]:hover .social-icon {
  filter: brightness(1.2) drop-shadow(0 0 3px rgba(25, 17, 244, 0.935));
}

/* ハートビートアニメーション */
@keyframes heartbeat {
  0% { transform: scale(1.2); }
  50% { transform: scale(1.4); }
  100% { transform: scale(1.2); }
}

/* ===== ハンバーガーメニュー（モバイル専用） ===== */
.hamburger-btn {
  display: none;
  position: fixed;
  top: 15px;
  right: 20px;
  z-index: 2000;
  background: none;
  border: none;
  padding: 10px;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 5px;
  background-color: rgba(252, 228, 10, 0.802);
  transition: all 0.3s ease, transform 0.3s ease-out;
}

/* ハンバーガーアイコンのライン */
.hamburger-btn span {
  display: block;
  width: 20px;
  height: 2px;
  background-color: var(--text-color);
  margin: 2px 0;
  transition: all 0.25s ease;
  position: relative;
  opacity: 1;
}

.hamburger-btn span:nth-child(1) {
  margin-top: 0;
}

.hamburger-btn span:nth-child(2) {
  margin: 4px 0;
}

.hamburger-btn span:nth-child(3) {
  margin-bottom: 0;
}

/* アクティブ状態のハンバーガーアイコン */
.hamburger-btn.active span:nth-child(1),
.hamburger-btn.active span:nth-child(2),
.hamburger-btn.active span:nth-child(3) {
  opacity: 0;
  transform: scale(0);
}

.hamburger-btn::before,
.hamburger-btn::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 2px;
  background-color: var(--text-color);
  left: 10px;
  top: 19px;
  transform: scale(0);
  opacity: 0;
  transition: all 0.25s ease;
}

.hamburger-btn::before {
  transform: rotate(45deg) scale(0);
}

.hamburger-btn::after {
  transform: rotate(-45deg) scale(0);
}

.hamburger-btn.active::before {
  transform: rotate(45deg) scale(1);
  opacity: 1;
}

.hamburger-btn.active::after {
  transform: rotate(-45deg) scale(1);
  opacity: 1;
}

/* モバイルメニューオーバーレイ */
.mobile-menu-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('/images/EnprodiaSite-for-HamburgerMenu.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1500;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-100%);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.mobile-menu-overlay.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mobile-menu {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  gap: 20px;
}

.mobile-menu a {
  color: var(--text-color);
  text-decoration: none;
  font-size: 1.2rem;
  padding: 10px 20px;
  border-radius: 5px;
  transition: all 0.3s ease;
  text-align: center;
  font-weight: 400;
}

.mobile-menu a:hover {
  color: var(--accent-color);
  background-color: rgba(255, 255, 255, 0.1);
}

.mobile-social-links {
  display: flex;
  gap: 20px;
  margin: 20px 0;
}

.mobile-social-links a {
  font-size: 1.5rem;
  padding: 10px;
}

/* ===== メインコンテンツ ===== */
main {
  flex: 1;
}

/* ===== フッター ===== */
.site-footer {
  position: fixed;
  bottom: 0px;
  left: 0;
  width: 100%;
  text-align: center;
  padding: 10px 0;
  z-index: 100;
}

.site-footer p {
  font-size: 0.7rem;
  letter-spacing: 0.045em;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

/* ===== 共通ページ背景とレイアウト ===== */
.hero-section,
.enprodia-bg,
.service-bg,
.works-bg,
.news-bg {
  height: 100dvh; /* Dynamic Viewport Height */
  min-height: -webkit-fill-available; /* iOS Safari対応 */
  background-size: cover;
  background-position: center;
  margin-top: 0;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
}

/* 背景画像のプリロード強制 */
.hero-section {
  background-image: url('/images/EnprodiaSite-for-TopPage.webp');
  background-attachment: fixed;
}

/* テキストコンテンツのz-index調整 */
.hero-text,
.works-text {
  position: relative;
  z-index: 2;
}

/* テキスト表示設定 */
.hero-text,
.works-text {
  color: #ffffff; /* 白色固定 */
  opacity: 1; /* 常に表示 */
}

/* ===== Topページ ===== */
.hero-section {
  background-image: url('/images/EnprodiaSite-for-TopPage.webp');
}

.hero-text {
  position: absolute;
  color: #ffffff;
  z-index: 2;
  text-align: left;
  width: 80%;
  left: 10%;
  top: 50%;
  transform: translateY(-50%);
}

.hero-text h1 {
  font-size: 1.0rem;
  letter-spacing: 0.04em;
  font-weight: 450;
}

.hero-text p {
  font-size: 0.75rem;
  margin-top: 22px;
  font-weight: 400;
}

.index-text h1 {
  font-size: 3.5rem;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
}

/* ===== Aboutページ ===== */
.enprodia-bg {
  background-image: url('/images/EnprodiaSite-for-AboutPage.webp');
}

/* About Usだけを下に移動 */
.enprodia-bg .hero-text h1 {
  transform: translateY(3px);  /* About Usだけ下に移動 */
}

/* ===== Serviceページ ===== */
.service-bg {
  background-image: url('/images/EnprodiaSite-for-ServicePage.webp');
}

/* ===== Worksページ ===== */
.works-bg {
  background-image: url('/images/EnprodiaSite-for-WorksPage.webp');
}

.works-text {
  position: absolute;
  width: 80%;
  color: #ffffff;
  z-index: 2;
  left: 50%;
  top: 51%;
  transform: translate(-50%, -50%);
  text-align: left;
}

.works-text h1 {
  font-size: 1.0rem;
  letter-spacing: 0.04em;
  font-weight: 450;
  margin-bottom: 10px;
}

.works-text h2 {
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  font-weight: 450;
  margin-bottom: 0px;
}

.works-text p {
  font-size: 0.7rem;
  margin-bottom: 0.9px;
  line-height: 1.4;
  font-weight: 400;
}

.works-text p.section-divider {
  margin-bottom: 8px;
}

/* ===== Newsページ ===== */
.news-bg {
  height: 100dvh;
  min-height: -webkit-fill-available;
  background-image: url('/images/EnprodiaSite-for-NewsPage.webp');
  background-size: cover;
  background-position: center;
  margin-top: 0;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
  background-attachment: fixed;
}

/* Newsページのh1テキスト */
.news-bg .news-text h1 {
  position: absolute;
  top: 233px;
  left: 7.5%;
  color: #ffffff;
  opacity: 1;
  font-size: 1.2rem;
  letter-spacing: 0.04em;
  font-weight: 450;
}

/* Newsページのコンテンツエリア */
.news-list {
  position: relative;
  margin: 260px auto 0 auto;
  z-index: 10;
  width: 85%;
  display: flex;
  flex-direction: column;
}

.news-container {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* お知らせアイテム */
.news-item {
  background-color: transparent;
  padding: 15px 0;
  border-bottom: 0.8px solid rgba(0, 0, 0, 0.618);
  transition: all 0.3s ease;
}

.news-item:last-child {
  border-bottom: none;
}

.news-item:hover {
  transform: translateX(5px);
}

/* 日付 */
.news-date {
  display: block;
  font-size: 0.6rem;
  color: rgba(255, 255, 255);
  margin-bottom: 6px;
  letter-spacing: 0.05em;
}

/* NEWバッジ（お知らせ一覧用） */
.news-new-badge {
  display: inline-block;
  margin-left: 7px;
  vertical-align: 0.4px;
  font-size: 0.6rem;
  color: #ff0000;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-shadow: 0 0 5px rgba(255, 0, 0, 0.5);
  animation: newBadgePulse 2s ease-in-out infinite;
}

/* タイトル */
.news-title {
  font-size: 0.8rem;
  font-weight: 450;
  margin-bottom: 5px;
  letter-spacing: 0.04em;
}

.news-title a {
  color: #ffffff;
  text-decoration: none;
  transition: color 0.3s ease;
}

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

/* 概要テキスト */
.news-excerpt {
  font-size: 0.65rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

/* ===== Privacyページ ===== */
.privacy-page {
  background-color: var(--main-bg-color);
}

.privacy-page::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://www.transparenttextures.com/patterns/stardust.png');
  opacity: 0.1;
  z-index: -1;
  pointer-events: none;
}

.privacy-text {
  width: 85%;
  color: #ffffff;
  margin: 87px auto 40px auto;
  text-align: left;
  scrollbar-width: none;
  -ms-overflow-style: none;
  background-color: transparent;
  padding: 0;
  border-radius: 0;
}

.privacy-text h1 {
  font-size: 1.2rem;
  letter-spacing: 0.04em;
  font-weight: 450;
  margin-bottom: 10px;
}

.privacy-text h2 {
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  font-weight: 450;
  margin-bottom: 0px;
}

.privacy-text p,
.privacy-text li {
  font-size: 0.7rem;
  margin-bottom: 9px;
  line-height: 1.4;
  font-weight: 400;
}

.privacy-text p {
  margin-bottom: 9px;
}

.privacy-text li {
  margin-bottom: 0.9px;
}

.privacy-text ol {
  font-size: 0.7rem;
  margin-bottom: 9px;
  line-height: 1.4;
  font-weight: 400;
  margin-left: 0.6em;
  padding-left: 1em;
}

.privacy-text ol ol {
  margin-left: 0.5em;
}

.privacy-text ol ol ol {
  margin-left: 0.7em;
}

.privacy-text p:has(+ ol) {
  margin-bottom: 0;
}

.privacy-text p + ol {
  margin-top: 0;
}

/* ===== Contactページ ===== */
.contact-page {
  background-color: var(--main-bg-color);
}

.contact-page::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://www.transparenttextures.com/patterns/stardust.png');
  opacity: 0.1;
  z-index: -1;
  pointer-events: none;
}

.contact-bg {
  scroll-padding-top: 200px;
}

.contact-text {
  width: 85%;
  color: #ffffff;
  margin: 120px auto 40px auto;
  text-align: left;
  background-color: transparent;
  padding: 0;
  border-radius: 0;
}

.contact-text h1 {
  font-size: 1.2rem;
  letter-spacing: 0.04em;
  font-weight: 450;
  margin-bottom: 10px;
}

.contact-text input,
.contact-text textarea {
  scroll-margin-top: 200px;
}

#email {
  scroll-margin-top: 220px;
}

/* Contact・Privacyページ専用フッター */
.contact-page .site-footer,
.privacy-page .site-footer,
.news-detail-page .site-footer {
  position: relative;
  bottom: auto;
  margin-top: auto;
  background-color: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ===== ページ遷移エフェクト ===== */
body.instant-fade {
  opacity: 0;
  transition: opacity 0.04s ease-out;
}

/* 背景画像を即座に表示 */
body.instant-fade .hero-section {
  opacity: 1 !important;
}

body.instant-fade .hero-section,
body.instant-fade .enprodia-bg,
body.instant-fade .service-bg,
body.instant-fade .works-bg,
body.instant-fade .news-bg {
  opacity: 1;
  background-color: transparent;
}

/* ===== お知らせ詳細ページ：デスクトップは固定、モバイルはスクロール ===== */
/* デスクトップ：スクロール無効化 */
body.news-detail-page {
  overflow: hidden;
  height: 100vh;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
}

/* モバイル：スクロール有効化 */
@media (max-width: 768px) {
  body.news-detail-page {
    overflow: auto;
    height: auto;
    position: static;
    width: 100%;
  }
}

/* ===== レスポンシブデザイン（モバイル対応） ===== */
@media (max-width: 768px) {
  /* モバイルでは元のレイアウトを維持 */
  body {
    background-color: var(--main-bg-color);
  }

  /* 背景エフェクト（モバイルのみ） */
  body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('https://www.transparenttextures.com/patterns/stardust.png');
    opacity: 0.1;
    z-index: -1;
    pointer-events: none;
  }

  /* ===== モバイル背景画像位置調整 ===== */
  /* Aboutページ背景位置調整 */
  .enprodia-bg {
    background-position: 60% center; /* お好みに応じて調整してください */
  }
  
  /* Serviceページ背景位置調整 */
  .service-bg {
    background-position: 60% center; /* お好みに応じて調整してください */
  }
  
  /* Worksページ背景位置調整 */
  .works-bg {
    background-position: 75% center; /* お好みに応じて調整してください */
  }

  /* イントロアニメーション（モバイル） */
  .handwriting-container {
    width: 60%;
  }

  /* ===== ヘッダー・メニュー調整 ===== */
  .site-header {
    display: none;
  }

  .hamburger-btn {
    display: flex;
  }

  .mobile-menu-overlay {
    display: block;
  }

  @media (max-width: 768px) {
  /* フッターを元のデザイン通り背景画像の上に透明表示 */
  body:not(.contact-page):not(.privacy-page):not(.news-detail-page) .site-footer {
    position: fixed;
    bottom: 0;
    z-index: 2000;
    background-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
  
@media (max-width: 768px) {
  /* 背景画像ページでのみフッターを固定表示 */
  body:not(.contact-page):not(.privacy-page):not(.news-detail-page) .site-footer {
    z-index: 2000;
    position: fixed;
    bottom: 0;
  }
}

  /* 背景要素のz-indexを下げる */
  .hero-section,
  .enprodia-bg,
  .service-bg,
  .works-bg {
    z-index: 1 !important;
  }

  /* ===== メインコンテンツ調整 ===== */
  .hero-section,
  .enprodia-bg,
  .service-bg,
  .works-bg,
  .news-bg {
    height: 100svh; /* Small Viewport Height - アドレスバー非表示時の高さ */
    margin-top: 0;
    filter: brightness(0.94);
  }
  
  /* モバイルでもスクロール無効化 */
  body:not(.contact-page):not(.privacy-page):not(.news-detail-page) .hero-section,
  body:not(.contact-page):not(.privacy-page):not(.news-detail-page) .enprodia-bg,
  body:not(.contact-page):not(.privacy-page):not(.news-detail-page) .service-bg,
  body:not(.contact-page):not(.privacy-page):not(.news-detail-page) .works-bg,
  body:not(.contact-page):not(.privacy-page):not(.news-detail-page) .news-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
  }

  /* ===== Privacyページ（モバイル） ===== */
  .privacy-text {
    margin: 80px auto 10px auto;
    padding-bottom: 20px;
    width: 90%;
  }

  .privacy-text h1 {
    font-size: 1.1rem;
  }

  .privacy-text h2 {
    font-size: 0.65rem;
  }

  .privacy-text p,
  .privacy-text li,
  .privacy-text ol {
    font-size: 0.65rem;
  }

  /* ===== Contactページ（モバイル） ===== */
  .contact-text {
    margin: 80px auto 10px auto;
    padding-bottom: 20px;
    width: 90%;
  }

  .contact-text h1 {
    font-size: 1.1rem;
  }

  .contact-text input[type="text"],
  .contact-text input[type="email"],
  .contact-text textarea {
    width: 100% !important;
    max-width: none !important;
  }

  /* ===== Topページ（モバイル） ===== */
  .index-text h1 {
    font-size: 2.5rem;
  }

  .hero-text {
    width: 90%;
    left: 5%;
  }

  .hero-text h1 {
    font-size: 0.9rem;
  }

  .hero-text p {
    font-size: 0.7rem;
    margin-top: 18px;
  }


  /* ===== Worksページ（モバイル） ===== */
  .works-text {
    width: 90%;
    top: 50px;
    transform: translateX(-50%);
    padding-bottom: 60px;
  }

  .works-text h1 {
    font-size: 0.9rem;
  }

  .works-text h2 {
    font-size: 0.75rem;
  }

  .works-text p {
    font-size: 0.65rem;
  }
}

.hero-section::before {
  content: '';  /* 必須 */
  position: absolute;  /* 必須 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  mix-blend-mode: screen;
  z-index: 1;
  pointer-events: none;
}

/* プライバシーポリシーページのメニュー非表示 */
.privacy-page .site-header {
  display: none;
}

/* ===== Contactページ専用ヘッダー制御 ===== */
.contact-page .site-header {
  transition: transform 0.3s ease-out;
  transform: translateY(0);
}

.contact-page .site-header.header-hidden {
  transform: translateY(-100%);
}

.hamburger-btn.header-hidden {
  transform: translateY(-140%);
}

/* ===== サイトマップリンク用スタイル ===== */
.sitemap-link {
    font-size: 0.15rem;
    color: #999;
    text-decoration: none;
    opacity: 0.7;
    margin-left: 15px;
}

.sitemap-link:hover {
    opacity: 1;
    color: #aaa;
}

/* ===== Newsページ（モバイル） ===== */
@media (max-width: 768px) {
  .news-bg {
    height: 100svh;
    background-position: 10% center;
    filter: brightness(0.94);
  }

  /* モバイル用NEWバッジ位置調整 */
  .news-new-badge {
    vertical-align: -0.1px;  /* お好みで調整: baseline, top, middle, bottom, 数値など */
  }

.news-bg .news-text h1 {
  position: absolute;
  top: 30.5%;;
  left: 11.5%;
  transform: translate(-50%, -50%);
  text-align: left;
  z-index: 5;
}

  .news-list {
    width: 90%;
    margin: 235px auto 0 auto;
  }

  .news-container {
    gap: 0;
  }

  .news-item {
    padding: 12px 0px;
  }

  .news-date {
    font-size: 0.6rem;
    margin-bottom: 0px;
  }

  .news-title {
    font-size: 0.8rem;
    margin-bottom: 0px;
  }

  .news-excerpt {
    font-size: 0.65rem;
  }
}

/* ===== 小型スマホ用調整（4.7インチ以下） ===== */
@media (max-width: 375px) {
  .news-list {
    margin: 185px auto 0 auto;
  }
}


/* ===== Newsアイコン NEWバッジ ===== */
.news-badge {
  position: absolute;
  top: -9px;
  right: -7px;
  font-size: 0.5rem;
  color: #ffffff;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-shadow: 0 0 5px rgb(255, 0, 0);
  pointer-events: none;
  animation: newBadgePulse 2s ease-in-out infinite;
}

@keyframes newBadgePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* モバイル用調整 */
@media (max-width: 768px) {
  .news-badge {
    font-size: 0.5rem;
    top: 7px;
    right: 4px;
  }
}