/*
Theme Name: Digi Sign Report
Author: Digi Sign Report
Description: 静かに、共に、歩むつくり。
Version: 1.0
*/

/* ==========================
  ヘッダー 基本構造
========================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;

  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 1rem 2rem;
  background: transparent; /* 必要に応じて #ffffff 等に変更してください */
  z-index: 1000;
}
/* 全ページ共通：ヘッダーの基本色（灰色） */
.site-header .logo,
.site-header .site-title,
.site-header .menu-toggle span,
.site-nav ul li a {
  color: #949593;
  /* background-color: #949593; ← これが犯人なので削除、あるいは transparent に */
  background-color: transparent; 
  text-decoration: none;
  transition: all 0.6s ease;
}

/* ハンバーガーの「線」だけに色を付ける（ここを独立させる） */
.site-header .menu-toggle span {
  background-color: #949593;
}

/* ========================================================
  TOPページ：about, sound, contact ホバー時の条件別ルール
========================================================= */

/* 1. 【共通】ホバー時はテキスト全体（DSR含む）を一旦「白」にする */
html body .site-header.is-hover-panel .site-title,
html body .site-header.is-hover-panel .site-title span {
  color: #ffffff !important;
}

/* 2. 【共通】ハンバーガーの線を白く */
html body .site-header.is-hover-panel .menu-toggle span {
  background-color: #ffffff !important;
}

/* 3. 【スクロール前】のホバー：ロゴは「色付き」、DSRは「白（発色なし）」 */
/* すでに上で白に設定しているので、ロゴのフィルターだけ解除します */
html body .site-header.is-hover-panel .site-logo {
  filter: none !important;
  opacity: 1 !important;
}

/* 4. 【スクロール後】のホバー：ロゴは「白」、DSRは「ブランドカラー発色」 */
/* .is-scrolled がついている時だけ、特定の要素を上書きします */

/* ロゴを白抜きに */
html body .site-header.is-hover-panel .logo.is-scrolled .site-logo {
  filter: brightness(0) invert(1) !important;
}

/* D, S, R を発色させる（スクロール後のみ） */
html body .site-header.is-hover-panel .logo.is-scrolled .t-d { color: #0ddadd !important; }
html body .site-header.is-hover-panel .logo.is-scrolled .t-s { color: #ff9933 !important; }
html body .site-header.is-hover-panel .logo.is-scrolled .t-r { color: #ff47a3 !important; }
/* ==========================
  ロゴエリア
========================== */
.site-header .logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.site-logo {
  width: 60px;
  height: auto;
  display: block;
  transition: all 0.4s ease; /* 色の変化を滑らかにする */
}

.site-title {
  font-size: 1.55rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: 0.13em;
}

/* ロゴ画像の色（フィルター） */
.logo.is-scrolled .site-logo {
  filter: brightness(0) saturate(100%) invert(51%) sepia(2%) saturate(246%) hue-rotate(181deg) brightness(92%) contrast(85%) !important;
}

/* D, S, R の個別色 */
.logo.is-scrolled .t-d { color: #0ddadd !important; }
.logo.is-scrolled .t-s { color: #ff9933 !important; }
.logo.is-scrolled .t-r { color: #ff47a3 !important; }

/* ==========================
  ハンバーガー
========================== */
.menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: space-around;

  width: 40px;
  height: 30px;
  padding: 0;
  margin-right: 100px; /* 位置調整 */

  background: none;
  border: none;
  cursor: pointer;
  z-index: 1001;
}

.menu-toggle span {
  display: block;
  height: 1px;
  border-radius: 1px;
  background: #949593; /* 線を常に黒系に固定 */
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}

/* 三本線のデザイン */
.menu-toggle span:first-child { width: 100%; margin-left: auto; }
.menu-toggle span:nth-child(2) { width: 70%;  margin-left: auto; }
.menu-toggle span:last-child  { width: 50%;  margin-left: auto; }

/* アクティブ時（バツ印） */
.menu-toggle.active span {
  background: #949593; /* バツ印の色も固定 */
}

.menu-toggle.active span:first-child {
  transform-origin: center left;
  transform: rotate(45deg) translate(2px, -2px);
  width: 100%;
}

.menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.active span:last-child {
  transform-origin: center left;
  transform: rotate(-45deg) translate(2px, 2px);
  width: 100%;
}

/* ==========================
  ナビゲーション
========================== */
.site-nav {
  position: absolute;
  top: 100%;
  right: 100px;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* メニューアクティブ時 */
.site-nav.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* ==========================
  メニューリスト・アイテム
========================== */
.site-nav ul {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav ul li {
  background: #fff; /* メニューの背景は白 */
  border-radius: 6px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  overflow: hidden;
  /* アニメーション用初期状態（JSで制御されるがCSSでも担保） */
  opacity: 0;
  transform: translateX(30px);
  transition:
    opacity 0.2s ease-out,
    transform 0.2s cubic-bezier(.2,.8,.3,1);
}

/* ==========================
  メニューリンク（テキスト）
========================== */
.site-nav ul li a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem 1.4rem;

  font-family: 'Montserrat', sans-serif;
  font-size: 0.9rem;
  font-style: italic;
  font-weight: 200;
  letter-spacing: 0.08em;
  color: #333; 
}

.site-nav ul li:hover a {
  transform: translateX(4px);
  transition: transform 0.2s ease;
}
/* ==========================
  メニュー出現ディレイ
========================== */
.site-nav.active ul li:nth-child(1) { transition-delay: 0.05s; }
.site-nav.active ul li:nth-child(2) { transition-delay: 0.20s; }
.site-nav.active ul li:nth-child(3) { transition-delay: 0.35s; }
.site-nav.active ul li:nth-child(4) { transition-delay: 0.50s; }
.site-nav.active ul li:nth-child(5) { transition-delay: 0.65s; }
.site-nav.active ul li:nth-child(6) { transition-delay: 0.80s; }
.site-nav.active ul li:nth-child(7) { transition-delay: 0.95s; }


/* ==========================
  レイアウトの骨格
========================== */
.front-page-container {
  position: relative;
  width: 100%;
}

/* --- 背景エリア（画面に固定） --- */
.hero-base, .below-base {
  position: fixed;
  left: 0;
  width: 100%;
  height: 50vh;
}

.hero-base {
  top: 0;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
  overflow: hidden;
}

.below-base {
  top: 50vh;
  background: #EDF0E0;
  z-index: 5;
}

/* --- 白透過レイヤー（霧） --- */
.scroll-white-layer {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  z-index: 100; /* 背景より上で、パネル(1000)より下 */
}

/* --- 丸パネル（最前面） --- */
.panel-layer {
  position: fixed; /* JSで動かすために一旦fixedで中央付近に固定 */
  top: 48vh;       /* 初期位置を下に */
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 1000;   /* 絶対的な最前面 */
  width: 100%;
  max-width: 1100px;
  pointer-events: none;
}

.panel-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 80px 60px;
  list-style: none;
  margin: 0; padding: 0;
  pointer-events: auto;
}
.panel-list:has(.panel-item:hover) .panel-item {
  opacity: 0.4;
}

/* --- 丸パネル（デザイン維持） --- */
.panel-item {
  width: 230px; height: 230px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 15px 35px rgba(0,0,0,0.08);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  
  font-family: 'Montserrat', sans-serif;
  font-style: italic;
  font-size: 1.0rem;
  font-weight: 200;
  color: #A1A3A6; 
  letter-spacing: 0.15em; 
  text-transform: none; 
  margin: 0 auto;
  
  /* 登場前の設定 */
  opacity: 0;
  transform: translateY(60px);

  transition: 
    opacity 0.6s ease,
    transform 0.6s cubic-bezier(0.23, 1, 0.32, 1),
    background-color 0.3s ease,
    color 0.3s ease;
}

/* 登場した時の設定 */
.panel-item.is-visible {
  opacity: 1; /* ここでしっかり 1 になります */
  transform: translateY(0);
}

/* ホバーした自分自身の優先設定 */
.panel-item.is-visible:hover {
  opacity: 1 !important; 
  transform: scale(1.05);
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s ease;
}

/* --- スクロール空間 --- */
.scroll-spacer {
  height: 130vh;
}

/* --- アニメーション設定（最初の数値を完全維持） --- */
.logo-anim { display: inline-flex; justify-content: center; align-items: center; white-space: nowrap; }
.logo-unit { display: inline-flex; align-items: center; margin-right: 0.35em; }
/* --- ロゴ hostの設定を厳密に復元 --- */
.hero-title { 
  font-size: 2.6rem; 
  font-family: 'Montserrat', sans-serif; 
  font-style: italic;
  /* 全体のベースは細めに設定 */
  font-weight: 300 !important;
  letter-spacing: 0.14em; 
  color: #A1A3A6; 
  margin: 0; 
}

/* 頭文字 D, S, R の太さ */
.logo-unit .core { 
  font-weight: 500; /* ここでガツンと太く */
  opacity: 0; 
  animation: coreFade 0.25s ease-out forwards; 
}

/* 続く文字 igi, ign, eport の太さ */
.logo-unit .tail {
  font-weight: 200; /* ここを極細にすることでメリハリを出す */
  display: inline-block; 
  max-width: 0; 
  overflow: hidden; 
  opacity: 0; 
  white-space: nowrap;
  animation: tailReveal 2.0s cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay: 1.5s;
}

/* サブコピーの太さ */
.hero-sub { 
  font-family: "Shippori Mincho", serif;
  margin-top: 1.2rem; 
  font-size: 0.9rem; 
  font-weight: 400; 
  letter-spacing: 0.18em; 
  color: #A1A3A6; 
}
.logo-unit .core { opacity: 0; animation: coreFade 0.25s ease-out forwards; }
.logo-unit.d .core { color: #0ddadd !important; animation-delay: 0s; }
.logo-unit.s .core { color: #ff9933 !important; animation-delay: 0.3s; }
.logo-unit.r .core { color: #ff47a3 !important; animation-delay: 0.6s; }
.logo-unit .tail { display: inline-block; max-width: 0; overflow: hidden; opacity: 0; white-space: nowrap; animation: tailReveal 2.0s cubic-bezier(.22,.61,.36,1) forwards; animation-delay: 1.5s; }
.char-anim span { display: inline-block; opacity: 0; transform: translateY(6px); animation: charIn 0.6s ease-out forwards; }
.char-anim span:nth-child(1) { animation-delay: 2.3s; }
/* ...（中略）... */
@keyframes coreFade { to { opacity: 1; } }
@keyframes tailReveal { to { max-width: 8em; opacity: 1; } }
@keyframes charIn { to { opacity: 1; transform: translateY(0); } }

.hero-hover-bg {
  position: fixed; /* absoluteからfixedに変更 */
  inset: 0;
  background-size: cover;
  background-position: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 50vh; 
  z-index: 200;  /* ★霧(100)より大きく、パネル(1000)より小さく */
  pointer-events: none;
  opacity: 0;
  transform: scale(1.1); 
  transition: opacity 0.5s ease, transform 0.5s ease-in; 
}
.hero-hover-bg.is-active {
  opacity: 1;
  transform: scale(1);
}
.hero-inner { position: relative; z-index: 10; }

/* --- 親要素の配置を確実にセンターへ --- */
.hero-inner {
  position: relative;
  z-index: 10;
  text-align: center; /* 行内の要素を中央に */
  display: flex;
  flex-direction: column;
  align-items: center; /* 子要素を垂直方向の中央に揃える */
  width: 100%;
}

/* --- ロゴの配置修正 --- */
.logo-anim { 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  white-space: nowrap;
  width: 100%;
}

/* --- サブコピーの配置修正 --- */
.hero-sub { 
  margin-top: 1.5rem; 
  font-size: 0.9rem; 
  font-weight: 400; 
  letter-spacing: 0.18em; 
  color: #A1A3A6; 
  text-align: center;
  width: 100%;
  padding-left: 0.18em; /* 1番右の文字の letter-spacing 分を左に追加して完璧な中央に */
}

/* サブコピーのアニメーション用スパン */
/* --- サブコピーのアニメーション設定を完全復元 --- */
.char-anim span {
  display: inline-block;
  opacity: 0;
  transform: translateY(6px);
  animation: charIn 0.6s ease-out forwards;
}

/* 1文字ごとの遅延を厳密に再設定 */
.char-anim span:nth-child(1)  { animation-delay: 2.3s; }
.char-anim span:nth-child(2)  { animation-delay: 2.6s; }
.char-anim span:nth-child(3)  { animation-delay: 2.9s; }
.char-anim span:nth-child(4)  { animation-delay: 3.0s; } /* 「、」のタイミング */
.char-anim span:nth-child(5)  { animation-delay: 3.3s; }
.char-anim span:nth-child(6)  { animation-delay: 3.6s; }
.char-anim span:nth-child(7)  { animation-delay: 3.7s; } /* 「、」のタイミング */
.char-anim span:nth-child(8)  { animation-delay: 4.0s; }
.char-anim span:nth-child(9)  { animation-delay: 4.3s; }
.char-anim span:nth-child(10) { animation-delay: 5.0s; }
.char-anim span:nth-child(11) { animation-delay: 5.08s; }
.char-anim span:nth-child(12) { animation-delay: 5.16s; }
.char-anim span:nth-child(13) { animation-delay: 6.3s; } /* 最後の「。」のタイミング */

@keyframes charIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ==========================
  レスポンシブ対応
========================== */

/* タブレット・小さめのPC（幅1024px以下） */
@media (max-width: 1024px) {
  .panel-list {
    gap: 40px 30px; /* 隙間を少し狭く */
  }
  .panel-item {
    width: 200px; /* パネルを少し小さく */
    height: 200px;
    font-size: 0.9rem;
  }
}

/* スマホ（幅768px以下） */
@media (max-width: 768px) {
  .panel-list {
    grid-template-columns: repeat(1, 1fr); /* 2列にする */
    gap: 30px 20px;
  }
  .panel-item {
    width: 160px; /* スマホサイズに最適化 */
    height: 160px;
    font-size: 0.85rem;
  }
  .hero-title {
    font-size: 1.8rem; /* ロゴも少し小さく */
  }
  .hero-sub {
    font-size: 0.75rem;
  }
}
@media (max-width: 768px) {
  /* ヘッダーをさらに薄く */
  .site-header {
    padding: 0.3rem 0.8rem !important;
    min-height: 50px; /* 高さを抑える */
    justify-content: space-between !important; 
    gap: 15px;
  }
  /* ロゴエリア（画像とテキストのセット） */
  .site-header .logo {
    display: flex;
    align-items: center;
    /* ここがポイント！右側に余白を押し出して、次の要素（ハンバーガー）を右端へ飛ばす */
    margin-right: auto; 
    gap: 10px; /* ロゴ画像とテキストの距離 */
  }

  /* ロゴ画像をさらにミニマムに */
  .site-logo {
    width: 32px !important; 
    flex: 0 0 auto;
  }

  /* テキストロゴは思い切ってかなり小さく、かつ繊細に */
  .site-title {
    font-size: 1.2rem !important; 
    font-weight: 300;
    letter-spacing: 0.02em;
  }

  /* ハンバーガーメニューもスケールダウン */
  .menu-toggle {
    width: 30px;
    height: 20px;
    margin-right: 40px !important;
    flex: 0 0 auto;
  }
}
@media (max-width: 768px) {
  /* メニュー全体の配置調整（右端に寄せるか、少し内側へ） */
  .site-nav {
    right: 1.5rem; /* ヘッダーのpaddingと合わせると綺麗です */
  }

  /* リストの間隔を狭める */
  .site-nav ul {
    gap: 0.4rem; /* 0.75remから縮小 */
  }

  /* メニューの箱自体を小さく */
  .site-nav ul li {
    box-shadow: 0 4px 12px rgba(0,0,0,0.05); /* 影も控えめに */
    transform: translateX(20px); /* 出てくる距離も短く */
  }

  /* リンクテキスト（ここが一番効きます） */
  .site-nav ul li a {
    padding: 0.7rem 1.0rem; /* 上下左右の余白を削る */
    font-size: 0.75rem;      /* 文字サイズを小さく */
    letter-spacing: 0.05em;
  }
}
/* 小さなスマホ（幅480px以下） */
@media (max-width: 480px) {
  .panel-list {
    gap: 20px 10px;
  }
  .panel-item {
    width: 140px;
    height: 140px;
  }
}



/* --- Aboutページのレイアウト --- */
.about-container {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  background: #000; /* 背景は黒 */
}

/* 舞台背景（一瞬見えるHero画像用） */
.about-hero-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-image: url('https://digisignreport.com/wp-content/uploads/2026/02/fabrizio-conti-lGYfGfLF6yo-unsplash-scaled.jpg'); /* トップと同じ画像 */
  background-size: cover;
  background-position: center;
  z-index: 1;
}

/* 下からせり上がる白い幕 */
.about-main-content {
  position: relative;
  z-index: 2;
  margin-top: 50vh; /* Hero画像を半分見せるための余白 */
  background: #fff;
  width: 100%;
  min-height: 100vh;
  padding: 100px 0;
  
  /* 初期状態：画面の下に隠しておく */
  transform: translateY(100vh);
  transition: transform 2.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 動き出すためのクラス（JSで付与） */
.about-main-content.is-active {
  transform: translateY(0);
}

/* 中身のテキスト */
.about-inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 40px;
  color: #333;
}

/* Aboutコンテンツ全体を中央に */
.about-content {
  text-align: center; /* 文字を中央揃え */
  max-width: 700px;
  margin: 0 auto;
  color: #222; /* 真っ黒より少しだけ柔らかい色 */
}

/* メインタイトル "About" */
.about-title {
  font-family: "Montserrat"; 
  font-size: 2.0rem;
  font-weight: 200;
  letter-spacing: 0.2em; /* 文字の間隔を広くして優雅に */
  margin-bottom: 60px;
  color: #222;
  text-transform: none; 
}

/* キャッチコピー（説明文の上の1行） */
/* キャッチコピー（リード文） */
.about-lead-text {
  font-family: "Shippori Mincho", serif; /* しっぽり明朝を指定 */
  font-size: 0.95rem;
  font-weight: 500; /* 少しだけ太めにして印象を強く */
  margin-bottom: 40px;
  line-height: 1.8;
  color: #82b2ac;
  letter-spacing: 0.15em; /* 文字間を少し広げて優雅に */
}

/* 本文 */
.about-description {
  font-family: "Shippori Mincho", serif; /* しっぽり明朝を指定 */
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 2.4; /* 行間を広げて余白の美を出す */
  letter-spacing: 0.08em;
  text-align: left;
  display: inline-block;
  color: #747573;
}

/* --- 文字のフェードイン設定 --- */

/* 初期状態：透明で少し下にずらしておく */
.fade-in-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.5s ease-out, transform 1.5s ease-out;
}

/* JSでクラスがついた瞬間に浮き上がる */
.fade-in-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 登場のタイミングをずらす（ディレイ） */
/* 幕が上がり始めてから1.0秒後くらいにタイトルが出始める設定 */
.about-title.fade-in-item {
  transition-delay: 1.0s;
}

/* その0.4秒後にリード文 */
.about-lead-text.fade-in-item {
  transition-delay: 1.4s;
}

/* さらに0.4秒後に本文 */
.about-description.fade-in-item {
  transition-delay: 1.8s;
}

/* ========================================================
  Aboutページ：何が何でも白くする最終手段
========================================================= */

/* 「html」から指定を始めることで、CSSの中で最も強い優先度を持たせます */
html body.page-template-page-about .site-header .site-title,
html body.page-template-page-about .site-header .menu-toggle span {
  color: #ffffff !important;
  background-color: #ffffff !important;
}

/* 蛍光色の DSR も、Aboutページでは幕が来るまで白く塗りつぶします */
html body.page-template-page-about .site-header .t-d,
html body.page-template-page-about .site-header .t-s,
html body.page-template-page-about .site-header .t-r {
  color: #ffffff !important;
}

/* 幕が来たとき（is-scrolled が付いたとき）だけ、灰色に戻す */
html body.page-template-page-about .logo.is-scrolled .site-title,
html body.page-template-page-about .logo.is-scrolled .t-d,
html body.page-template-page-about .logo.is-scrolled .t-s,
html body.page-template-page-about .logo.is-scrolled .t-r {
  color: #949593 !important;
}

html body.page-template-page-about .logo.is-scrolled ~ .menu-toggle span {
  background-color: #949593 !important;
}

/* ========================================================
  Aboutページ（ID:35）完全同期設定
========================================================= */

/* 1. 【初期状態】何よりも優先して「白」にする */
/* セレクタを長くして、既存の CSS よりも強くします */
body.page-id-35 .site-header .logo .site-title,
body.page-id-81 .site-header .logo .site-title,
body.page-id-35 .site-header .logo .site-title span,
body.page-id-81 .site-header .logo .site-title span,
body.page-id-35 .site-header .menu-toggle span,
body.page-id-81 .site-header .menu-toggle span {
  color: #ffffff !important;
  background-color: transparent !important;
  transition: all 0.6s ease;
}

/* ハンバーガーの線のみ白塗り */
body.page-id-35 .site-header .menu-toggle span,
body.page-id-81 .site-header .menu-toggle span {
  background-color: #ffffff !important;
}

/* 2. 【変化後】.is-scrolled が付いた瞬間に「灰色＋DSR発色」 */
/* ここでトップページと同じ蛍光色の色指定を About 専用に書き直します */
body.page-id-35 .site-header .logo.is-scrolled .site-title,
body.page-id-81 .site-header .logo.is-scrolled .site-title {

  color: #949593 !important;
}

/* D, S, R の発色設定 */
body.page-id-35 .site-header .logo.is-scrolled .t-d, 
body.page-id-81 .site-header .logo.is-scrolled .t-d { color: #0ddadd !important; }
body.page-id-35 .site-header .logo.is-scrolled .t-s,
body.page-id-81 .site-header .logo.is-scrolled .t-s { color: #ff9933 !important; }
body.page-id-35 .site-header .logo.is-scrolled .t-r,
body.page-id-81 .site-header .logo.is-scrolled .t-r { color: #ff47a3 !important; }

/* ハンバーガーの線を灰色にする */
/* クラスの付与タイミングのズレを考慮して2パターン用意します */
body.page-id-35 .site-header:has(.is-scrolled) .menu-toggle span,
body.page-id-81 .site-header:has(.is-scrolled) .menu-toggle span,
body.page-id-35 .logo.is-scrolled ~ .menu-toggle span,
body.page-id-81 .logo.is-scrolled ~ .menu-toggle span {
  background-color: #949593 !important;
}

/* Aboutページの説明文を中央揃えにする */
.page-id-35 .about-description {
  text-align: center; /* 文字を中央に */
  margin: 0 auto;    /* ブロック自体を中央に */
  max-width: 800px;  /* 横に広がりすぎないように制限（読みやすさのため） */
  line-height: 2;    /* 行間を少し広げて、ゆったりとした空気感を出す */
}

/* 段落間の余白も調整 */
.page-id-35 .about-description p {
  margin-bottom: 2.5rem; /* 文章の塊ごとに程よい距離を置く */
  max-width: 600px; /* 一行が長くなりすぎないように制限 */
    margin-left: auto;
    margin-right: auto;
    line-height: 2.2;  
    letter-spacing: 0.05em; 
}

/* PortfolioページのHero背景（個別設定用） */
.portfolio-hero-bg {
    /* ここにPortfolio専用の画像URLを入れる */
    background-image: url('https://digisignreport.com/wp-content/uploads/2026/02/sarah-dorweiler-9Z1KRIfpBTM-unsplash-scaled.jpg'); 
}

/* Portfolioページのヘッダーも、幕が来るまでは白くする */
.page-template-page-portfolio .site-header .site-title,
.page-template-page-portfolio .site-header .menu-toggle span {
  color: #ffffff;
  background-color: #ffffff; /* ハンバーガーの線用 */
}

/* 幕が来た後の処理（Aboutと同様） */
.page-template-page-portfolio .logo.is-scrolled .site-title {
  color: #949593 !important;
}

/* 親要素：中央配置を安定させる */
.portfolio-gallery-wrapper {
  margin-top: 180px;
  width: 100%;
  height: 500px;
  position: relative;
  overflow: visible !important;
  perspective: 2000px;
}

.gallery-track {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.gallery-item {
  position: absolute;
  top: 50%;
  left: 50%;
  
  transform: translate(-50%, -50%); 
  width: 350px; /* アイコンの大きさを調整 */
  transition: all 1.0s cubic-bezier(0.23, 1, 0.32, 1);
  cursor: pointer;
}

/* --- WEB待機時 --- */
.gallery-item[data-type="web"]:not(.is-active) {
  /* translate(-120%, -50%) で左側へ。rotateYで奥行きを出す */
  transform: translate(-140%, -50%) rotateY(45deg) scale(0.6) translateZ(-400px);
}

/* --- SOUND待機時 --- */
.gallery-item[data-type="sound"]:not(.is-active) {
  /* translate(40%, -50%) で右側へ */
  transform: translate(40%, -50%) rotateY(-45deg) scale(0.6) translateZ(-400px);
}

/* --- アクティブ時（中央） --- */
.gallery-item.is-active {
  transform: translate(-50%, -50%) rotateY(0) scale(1) translateZ(100px);
  z-index: 100;
}

/* ビジュアルエリア：背景を透明にし、影を消す */
.item-visual {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: transparent; /* 背景を透明に */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none; /* 白い箱の影を消す */
}

/* アイコン自体の設定 */
.item-visual img {
  width: 100%;
  height: auto;
  /* アイコンそのものに影をつけたい場合はここ（お好みで） */
  filter: drop-shadow(0 20px 30px rgba(0,0,0,0.1));
}

/* 文字情報：アイコンとの距離を調整 */
.item-info {
  margin-top: 60px;
  text-align: center;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.gallery-item.is-active .item-info {
  opacity: 1;
}

.item-info .category {
  display: none; 
}

.item-info .title {
  margin-top: 0; /* カテゴリーが消えた分、少し上に詰める */
  font-family: 'Montserrat', sans-serif;
  font-size: 1.4rem;
  font-weight: 300;
  letter-spacing: 0.2em;
  }
  /* WEBが選ばれた時の文字色 */
.gallery-item[data-type="web"] .item-info .title {
  color: #ff47a3; 
}

/* SOUNDが選ばれた時の文字色 */
.gallery-item[data-type="sound"] .item-info .title {
  color: #ff9933; 
}

/* WEBアイコン */
.gallery-item[data-type="web"] img {
  filter: invert(79%) sepia(36%) saturate(4730%) hue-rotate(334deg);
}

/* SOUNDアイコン */
.gallery-item[data-type="sound"] img {
  filter: invert(71%) sepia(29%) saturate(300%) hue-rotate(123deg) brightness(91%) contrast(84%);
}


.portfolio-hero-bg + .about-container .about-lead-text p,
.portfolio-hero-bg + .about-container .about-lead-text {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 1.3rem !important;
  font-weight: 300 !important;
}

/* フォーム全体の配置 */
.wpcf7 {
    max-width: 600px;
    margin: 40px auto 0 !important;
    text-align: center;
}

/* 入力欄（Name, Email, Subject, Message）のスタイル */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
    width: 100% !important;
    background-color: transparent !important;
    border: 1px solid #8bb364 !important;
    border-radius: 15px !important; /* 角丸を少し強調 */
    padding: 15px 20px !important;
    color: #707270 !important;      
    font-family: "Raleway"; 
    font-size: 0.9rem !important;
    letter-spacing: 0.1em !important;
    margin-bottom: 20px !important;
    box-sizing: border-box !important;
    outline: none !important;
}

/* プレースホルダー（中の英語）の色 */
.wpcf7 ::placeholder {
    color: #949593 !important;
    opacity: 0.6;
}

/* 送信ボタンのスタイル */
.wpcf7 input[type="submit"] {
    background-color: transparent !important;
    border: 1px solid #de9d52 !important;
    color: #fea1d0 !important;
    padding: 12px 60px !important;
    border-radius: 30px !important;
    font-family: "Raleway"; 
    font-size: 0.8rem !important;
    letter-spacing: 0.2em !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    margin-top: 20px !important;

    /* --- 中央配置のための修正 --- */
    display: block !important;       /* 「箱」として独立させる */
    margin-left: auto !important;    /* 左のスペースを自動調整 */
    margin-right: auto !important;   /* 右のスペースを自動調整 */
}

/* 送信ボタンのホバー */
.wpcf7 input[type="submit"]:hover {
    background-color: #de9d52 !important;
    color: #ffffff !important;
}

/* エラーや成功メッセージも中央に */
.wpcf7-response-output {
    border: none !important;
    color: #949593 !important;
    font-size: 0.8rem !important;
    margin-top: 30px !important;
}
/* フォームを包む箱の設定 */
.contact-form-wrapper {
    width: 100%;
    max-width: 600px; /* デカくなりすぎないよう、ここで最大幅を制限できます */
    margin: 60px auto 0 !important;
    text-align: center; /* 中にあるボタン（文字扱い）を中央に寄せる */
}

/* 念のため、ボタンを囲む自動生成タグの余白を殺す */
.contact-form-wrapper p {
    margin: 0 !important;
    text-align: center !important;
}
/* Contact専用のHero画像 */
.contact-hero-bg {
    background-image: url('https://digisignreport.com/wp-content/uploads/2026/02/tama66-space-4161418_1920.jpg'); 
    filter: grayscale(20%); 
}

/* 共通のフォント美学を維持 */
.about-lead-text p {
    font-family: "Shippori Mincho", serif !important; /* 明朝体に */
    font-style: normal !important;                 /* まっすぐに */
    font-weight: 200 !important;
    letter-spacing: 0.25em !important;
    color: #82b2ac; 
}

/* 幕の動きを制御 */
#contactMain.is-active {
    transform: translateY(0);
}

.contact-form-wrapper {
    text-align: center;
    width: 100%;
}
/* ==========================
  Thank Youページ (ID: 84) 設定
========================== */

/* 1. 背景画像 */
body.page-id-84 .about-hero-bg {
    background-image: url('https://digisignreport.com/wp-content/uploads/2026/02/tama66-space-4161418_1920.jpg') !important;
}

/* 2. Back to Top ボタンのデザイン */
body.page-id-84 .back-to-top-btn {
    display: inline-block !important;
    background-color: transparent !important;
    border: 1px solid #e5d7f3 !important; 
    color: #79cc77!important;            
    padding: 4px 20px !important;
    border-radius: 30px !important;
    font-family: "Raleway", sans-serif; 
    font-size: 0.7rem !important;
    letter-spacing: 0.2em !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

/* 3. ホバーした時の色変化 */
body.page-id-84 .back-to-top-btn:hover {
    background-color: #bd87f3 !important;
    color: #ffffff !important;
}

/* 4. 幕の動きを保証 */
body.page-id-84 #contactMain.is-active {
    transform: translateY(0);
}
/* ==========================
  PELOG (自作) デザイン
========================== */

/* 背景画像　*/
.pelog-hero-bg {
    background-image: url('https://digisignreport.com/wp-content/uploads/2026/02/yuvraj-singh-parmar-BgLq2YFwQsY-unsplash-scaled.webp'); 
    filter: grayscale(40%);
}

/* 幕の動き（About等と共通の動き） */
#pelogMain.is-active {
    transform: translateY(0) !important;
}

/* 記事一覧のレイアウト */
.pelog-posts-container {
    margin-top: 50px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 40px;
}

.pelog-post-item a {
    text-decoration: none;
    transition: opacity 0.3s;
}

.pelog-post-item a:hover {
    opacity: 0.7;
}

.pelog-post-title {
    font-family: "Shippori Mincho", serif;
    font-size: 1.1rem;
    color: #333;
    margin-top: 15px;
}

.pelog-post-date {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    color: #8b8b8b;
    letter-spacing: 0.1em;
}
.pelog-post-thumbnail img {
    width: 100%;
    height: 200px; /* ここで高さを固定 */
    object-fit: cover; /* 画像を歪ませずに枠いっぱいに収める */
}
/* ==========================
  PELOG専用：幕の色を #EDF0E0 にする
========================== */
/* IDで指定することで、Aboutページの白設定を上書きします */
#pelogMain.about-main-content {
    background-color: #f6f8eb !important;
}

/* 記事一覧の各アイテムの背景（もし白浮きして見えるなら透明に） */
#pelogMain .about-inner,
#pelogMain .about-content {
    background-color: transparent !important;
}

/* 念のため、中の文字色も整えておきます */
#pelogMain .pelog-post-title {
    color: #444; /* 柔らかい背景に合わせた少し濃いグレー */
}
#pelogMain .about-title {
    color: #ff47a3 !important; 
    }
    /* PELOGページのリード文（ペレ太郎の〜）の色を変更 */
#pelogMain .about-lead-text p {
    color: #818080 !important; /* 落ち着いたダークグレー */
}
/* ==========================
  個別記事ページ（Single）専用
========================== */
#singlePostMain.about-main-content {
    background-color: #EDF0E0 !important;
}

.single-post-thumbnail {
    margin-bottom: 50px;
    text-align: center;
}

.single-post-thumbnail img {
    max-width: 100%;
    height: auto;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); /* スケッチが少し浮き立つように */
}

.post-author-footer {
    margin-top: 80px;
    font-family: 'Montserrat', sans-serif;
    font-style: italic;
    font-size: 0.8rem;
    color: #949593;
    border-top: 1px solid rgba(0,0,0,0.05);
    padding-top: 20px;
}

.back-to-pelog {
    margin-top: 40px;
}

.back-btn {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-decoration: none;
    color: #82b2ac;
    border: 1px solid #82b2ac;
    padding: 10px 25px;
    border-radius: 20px;
    transition: all 0.3s;
}

.back-btn:hover {
    background: #82b2ac;
    color: #fff;
}

/* ==========================
  PELOG & 個別記事：フォント設定 (Noto Sans JP)
========================== */
#pelogMain, 
#singlePostMain,
#pelogMain .about-description,
#singlePostMain .about-description,
#pelogMain .about-lead-text p {
    font-family: 'Noto Sans JP', sans-serif !important;
    font-weight: 300; 
    letter-spacing: 0.05em;
    line-height: 2; /* 行間はゆったりと */
}

/* タイトル部分は少し太め */
#pelogMain .pelog-post-title,
#singlePostMain .about-title {
    font-family: 'Noto Sans JP', sans-serif !important;
    font-weight: 500;
}

/* ==========================
  PELOG & Single：一斉フェードイン演出
========================== */


#pelogMain .fade-in-item,
#singlePostMain .fade-in-item {
    opacity: 0 !important;
    transform: translateY(40px) !important; 
    transition: opacity 2.5s cubic-bezier(0.22, 1, 0.36, 1), 
                transform 2.5s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* 表示された時 */
#pelogMain .fade-in-item.is-visible,
#singlePostMain .fade-in-item.is-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* 演出のタイミングをずらす（ディレイ） */

/* タイトルと日付は早めに */
.about-title.fade-in-item,
.pelog-post-date.fade-in-item {
    transition-delay: 1.0s;
}

/* メイン画像（アイキャッチ）はその少し後 */
.single-post-thumbnail.fade-in-item,
.pelog-posts-container.fade-in-item {
    transition-delay: 1.3s;
}


.about-description.fade-in-item,
.post-author-footer.fade-in-item,
.back-to-pelog.fade-in-item {
    transition-delay: 1.6s;
}

/* ==========================
  個別記事ページ（Single）：白背景の中に小さく配置
========================= */
body.single-post .about-hero-bg {
    background-image: url('https://digisignreport.com/wp-content/uploads/2026/02/PhotoFunia-1770905972.webp') !important;
    
    /* 1. 画像 */
    background-size: 350px auto !important; 
    
    /* 2. 背景を「白」にする */
    background-color: #ffffff !important; 
    
    background-repeat: no-repeat !important;
    background-position: center 15% !important; 

    /* 3. フィルター */
    filter: sepia(10%) brightness(1.05) !important;
    opacity: 1 !important;
}

/* 4. 幕の後ろのベース色も「白」に指定 */
body.single-post .about-container {
    background: #ffffff !important;
}

/* 5. 幕自体の色 */
body.single-post .about-main-content {
    background-color: #EDF0E0 !important;
}

/* ==========================
  PELOG & Single：文字色の調整
========================== */

/* 1. 記事タイトルの色（凛とした深い色） */
#pelogMain .pelog-post-title,
#singlePostMain .about-title {
    color: #333333 !important; /* 真っ黒より少し柔らかな墨色 */
    margin-bottom: 20px;
}

/* 2. 本文の色（長文でも疲れない、少し抜けた色） */
#pelogMain .about-description,
#singlePostMain .about-description,
#pelogMain .about-lead-text p {
    color: #4a4a4a !important; /* 落ち着いたダークグレー */
}

/* 3. 日付の色（さらに少し淡くして脇役にする） */
.pelog-post-date {
    color: #949593 !important;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
}

/* 4. リンクの色（今のミントグリーン系に合わせる） */
#singlePostMain .about-description a {
    color: #82b2ac;
    text-decoration: none;
    border-bottom: 1px solid rgba(130, 178, 172, 0.3);
    transition: all 0.3s;
}

#singlePostMain .about-description a:hover {
    border-bottom: 1px solid #82b2ac;
}
/* ==========================
  個別記事ページ（Single）専用：文字色
========================== */

/* 個別記事のタイトル：少しだけ柔らかい墨色に */
body.single-post #singlePostMain .about-title {
    color: #7a7a7a !important;
}

/* 個別記事の本文：背景のベージュに馴染むダークグレー */
body.single-post #singlePostMain .about-description {
    color: #333333 !important;
}

/* 個別記事の日付：控えめに */
body.single-post .pelog-post-date {
    color: #949593 !important;
}

/* 個別記事内のリンク：マサターさんカラー（ミント系） */
body.single-post .about-description a {
    color: #82b2ac;
    text-decoration: none;
    border-bottom: 1px solid rgba(130, 178, 172, 0.3);
}
.is-lowered {
    transform: translateY(100vh) !important;
}
.about-lead-text p {
    font-family: 'Montserrat', sans-serif !important;
    font-style: italic !important;
    font-weight: 200 !important;
    letter-spacing: 0.25em !important;
}

/* ========================================================
  Portfolio：詳細画面のスクロールバーを完全に抹殺する
========================================================= */

/* 1. 幕（main2）自体のバーを非表示にする */
#main2.about-main-content,
body.page-template-page-portfolio #main2 {
    -ms-overflow-style: none !important;  /* IE, Edge */
    scrollbar-width: none !important;     /* Firefox */
    overflow-y: scroll !important;        /* スクロール機能自体は残す */
}

/* 2. Google Chrome, Safari, Edge用の非表示設定 */
#main2.about-main-content::-webkit-scrollbar,
body.page-template-page-portfolio #main2::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
}

/* 3. 万が一、中の要素が個別にバーを出している場合の保険 */
#main2 * {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}
#main2 *::-webkit-scrollbar {
    display: none !important;
}

/* ========================================================
  Portfolio：作品サムネイルのホバー演出
========================================================= */

/* 画像を包むコンテナ（ここを基準に文字を重ねる） */
.project-thumb-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 2px;
}

/* 透過フィルター（最初は透明） */
.project-thumb-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* 黒の透過度60% */
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
}

/* ホバー時に浮かび上がる白い文字 */
.hover-text {
    position: absolute;
    top: 50%;
    left: 100px;
    transform: translate(-50%, -40%); /* 少し下から浮かび上がる演出 */
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    font-weight: 300;
    letter-spacing: 0.3em;
    z-index: 2;
    opacity: 0;
    transition: all 0.4s ease;
    white-space: nowrap;
    pointer-events: none; /* 文字がクリックの邪魔をしないように */
}

/* マウスオーバー時の変化 */
.project-thumb-container:hover::before {
    opacity: 1;
}

.project-thumb-container:hover .hover-text {
    opacity: 1;
    transform: translate(-50%, -50%); /* 中央へ */
}

/* 画像自体の微かなズーム（お好みで） */
.project-thumb-container img {
    transition: transform 0.6s ease !important;
}

.project-thumb-container:hover img {
    transform: scale(1.05);
}

/* ========================================================
  Portfolio：グラデーション・フェード演出
========================================================= */

.project-thumb-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 左（文字側）は濃く、右へ行くほど透明に消えていく */
    background: linear-gradient(to right, 
        rgba(0, 0, 0, 0.85) 0%, 
        rgba(0, 0, 0, 0.4) 50%, 
        rgba(0, 0, 0, 0) 100%
    );
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* 滑らかなフェード */
    z-index: 1;
}

/* ホバー時にグラデーションを浮かび上がらせる */
.project-thumb-container:hover::before {
    opacity: 1;
}

/* 文字の動きもグラデーションに合わせて微調整 */
.hover-text {
    /* 前回の設定を維持しつつ、少し左からスライドしてくる演出を追加 */
    transform: translateX(-10px); 
    transition: all 0.5s ease-out;
}

.project-thumb-container:hover .hover-text {
    opacity: 1;
    transform: translateX(0); /* 定位置（leftで指定した場所）へ */
}

/* 詳細展開エリア内の説明文スタイル */
.project-description {
    margin: 40px auto 20px;
    max-width: 600px;
    text-align: left; /* アーティストの解説は左揃えが読みやすいです */
    font-family: 'Montserrat', sans-serif;
    color: #444;
}

.project-description h3 {
    font-size: 1.1rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.project-description p {
    font-size: 0.85rem;
    line-height: 1.8;
    font-weight: 300;
    letter-spacing: 0.05em;
    color: #666;
}

/* 詳細画面の画像コンテナ */
.detail-drawer {
    overflow: hidden !important; /* はみ出した画像を隠す */
    position: relative;
    width: 100%;
}

.detail-drawer img {
    cursor: move; /* 自由自在に動かせるイメージ */
    transition: transform 0.1s ease-out !important; /* 追従性を高めるため速めに */
    transform-origin: center center;
    width: 100%;
    height: auto;
    display: block;
}

/* ホバー時に少し拡大（この倍率が可動域になります） */
.detail-drawer.zoomed img {
    transform: scale(2.0); /* 2倍に拡大。もっと自由に動かしたいなら 3.0 に */
}

/* スマホでは拡大を無効にする（誤操作防止） */
@media (max-width: 768px) {
    .detail-drawer img:hover {
        transform: none;
    }
    .detail-drawer img {
        cursor: default;
    }
}

/* ==========================================
   Footer - Stealth & Art Style
   ========================================== */
.site-footer {
  width: 100%;
  padding: 100px 0 50px;
  background: transparent;
  position: relative;
  z-index: 10;
  /* 案Aの緊張感のあるフォント設定 */
  font-family: 'Helvetica Neue', 'Montserrat', sans-serif; 
  text-transform: uppercase;
}

.footer-nav ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap; /* スマホ表示への配慮 */
  gap: 30px;
  list-style: none;
  padding: 0;
  margin: 0 0 40px 0;
}

.footer-nav a {
  color: rgba(255, 255, 255, 0.5); /* 白を30%まで透過させて背景に馴染ませる */ 
  text-decoration: none;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.3em; /* 0.2emから微調整してInterの美しさを強調 */
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-block;
}

.footer-nav a:hover {
  /* 触れると白く、そして少しだけ浮き上がるような感覚 */
  color: rgba(255, 255, 255, 1);
  letter-spacing: 0.5em; /* 文字間を広げて「呼吸」させる演出 */
  transform: translateY(-1px);
}

.footer-bottom {
  text-align: center;
  /* コピーライトはさらに背景へ溶け込ませる */
  color: rgba(255, 255, 255, 0.5);
  font-size: 10px;
  letter-spacing: 0.2em;
}

.footer-bottom small {
  font-size: 10px;
}

.footer-sns {
  display: flex;
  justify-content: center;
  gap: 25px;
  margin-bottom: 30px;
}

.footer-sns a {
  color: #ff47a3; /* 文字色と同じ真鍮ゴールド */
  font-size: 18px; /* 少しだけ文字より存在感を出す */
  text-decoration: none;
  transition: all 0.5s ease;
  opacity: 0.7; /* 普段は少し控えめに */
}

.footer-sns a:hover {
  color: #fff; /* ホバーで白く飛ばす */
  text-shadow: 0 0 20px #fff;
  transform: scale(1.2) rotate(10deg); /* ちょっと角度をつけて躍動感を */
}

/* --- About Page: 幕上げ演出 --- */
.about-main-content {
    position: relative;
    z-index: 2;
    margin-top: 50vh;
    background-color: #ffffff;
    width: 100%;
    min-height: 100vh;
    padding: 100px 0;
    /* 初期状態 */
    transform: translateY(100vh);
    transition: 
        transform 2.5s cubic-bezier(0.22, 1, 0.36, 1),
        background-color 1.5s ease !important;
}

.about-main-content.is-active {
    transform: translateY(0);
}

/* --- 文字のフェードイン --- */
.fade-in-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.5s ease-out, transform 1.5s ease-out;
}

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

/* 登場ディレイ */
.about-title.fade-in-item { transition-delay: 1.0s; }
.about-lead-text.fade-in-item { transition-delay: 1.4s; }
.about-description.fade-in-item { transition-delay: 1.8s; }

/* --- Aboutページ共通スタイル --- */
.about-description {
    max-width: 800px;
    margin: 0 auto;
    line-height: 2.2;
    letter-spacing: 0.05em;
    color: #4a4a4a;
}

.about-description p {
    margin-bottom: 3rem; 
}

.team-concept {
    margin: 60px 0 40px; 
    padding: 0;
}

.team-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.3em;
    color: #ff9933; 
    text-transform: uppercase;
    margin-bottom: 15px;
    display: block;
}

.highlight-text {
    font-size: 1.1rem;
    font-weight: 300;
    color: #333;
}

/* --- Memberセクション --- */
.about-section-title {
    margin-top: 150px; 
    padding-top: 80px;  
    border-top: 1px solid #d4d5d7 !important; 
    margin-bottom: 80px;
    text-align: center;
    width: 100%;
}

.member-list {
    margin-top: 80px;
}

.member-item {
    margin-bottom: 80px; 
    text-align: center;
}

.member-name {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.4rem;
    font-weight: 300;
    letter-spacing: 0.2em;
    color: #939495;
    margin-bottom: 5px; 
    display: block;
}

.member-role {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.3em;
    color: #ff9933; 
    text-transform: uppercase;
    display: block;
}

/* モバイル対応 */
@media (max-width: 768px) {
    .about-description br { display: none; }
    .about-description p { text-align: left; }
    .about-section-title { margin-top: 100px; padding-top: 60px; }
    .member-item { margin-bottom: 60px; }
}

/* 幕の基本設定：背景色の変化に1秒かける */
#aboutMain {
    will-change: transform, background-color;
    background-color: #ffffff;
    transition: transform 1.2s cubic-bezier(0.65, 0, 0.35, 1), 
                background-color 1.0s ease-in-out !important; /* 強制的にフェードさせる */
    position: relative;
    z-index: 10;
}

/* スクロールで色が変わる時のクラス（JSでこれを付け替える） */
#aboutMain.is-scrolled-bg {
    background-color: #fafbf5 !important;
}

/* 退場・登場の挙動 */
.about-main-content.is-exiting {
    transform: translateY(100vh) !important;
}
.about-main-content.is-active {
    transform: translateY(0) !important;
}

/* Web制作ページの背景 */
.web-hero-bg {
    background-image: url('https://digisignreport.com/wp-content/uploads/2026/02/evie-s-uuCjYxJVf4o-unsplash-scaled.jpg');
    background-size: cover;
    background-position: center;
}

/* Sound制作ページの背景 */
.sound-hero-bg {
    background-image: url('https://digisignreport.com/wp-content/uploads/2026/02/pexels-eberhardgross-1367080-scaled.jpg');
    background-size: cover;
    background-position: center;
}

/* Soundページでのヘッダー色（白抜き） */
.is-sound-page .site-header .site-title,
.is-sound-page .site-header .site-title span {
    color: #ffffff !important;
}

/* ハンバーガーメニューの三本線を白にする */
.is-sound-page .menu-toggle span {
    background-color: #ffffff !important;
}

/* （予備）ロゴ全体が白っぽくなる場合の調整 */
.is-sound-page .logo-area {
    filter: drop-shadow(0 0 10px rgba(0,0,0,0.1));
}

/* ==========================================
   スマホ設定
   ========================================== */
@media (max-width: 768px) {
  /* 英語・数字フォントをRalewayへ（見出し系以外） */
  body, p, span, li, a, 
  .about-lead-text, 
  .about-description, 
  .member-role {
    font-family: 'Raleway', 'Shippori Mincho B1', sans-serif !important;
    font-weight: 300 !important; 
    letter-spacing: 0.05em;
  }
  
  /* ヘッダーのサイトタイトルをRalewayに */
  .site-title,
  .site-title span {
    font-family: 'Raleway', sans-serif !important;
    font-weight: 300 !important; 
  }
  
  /* Heroタイトル一式をRalewayに */
  .hero-title, 
  .hero-title span, 
  .hero-sub, 
  .hero-sub span {
    font-family: 'Raleway', sans-serif !important;
    font-weight: 300 !important; 
  }

  /* 0. パネルレイヤー自体に高さを与えてスクロールを発生させる */
  .panel-layer {
    min-height: 250vh !important; 
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* 1. パネル自体の調整 */
  .panel-item {
    width: 120px; 
    height: 120px;
    /* JS取得用にフォントサイズは維持し、透明にする */
    font-size: 11px !important; 
    color: transparent !important; 
    background-color: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: none; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    /* 内部に収めるので overflow は hidden でも visible でも可だが、念のため */
    overflow: hidden !important; 
    margin-bottom: 60px !important;
    border-radius: 50%; /* 確実に円形に */
  }

  /* ★追加：パネル「内部」のテキストラベル（Raleway / #ff47a3） */
  .panel-item::after {
    position: absolute;
    bottom: 22px; /* ★パネルの内側、下から少し上げた位置に固定 */
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Raleway', sans-serif !important;
    font-size: 10px !important; /* 少し小さめに調整 */
    font-weight: 600 !important;
    color: #333132 !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0.9;
    z-index: 10;
  }

  /* 2. 共通のアイコン設定（少し上に配置） */
  .panel-item::before {
    content: "";
    position: absolute;
    top: 42%; /* ★文字のスペースを作るため、中央（50%）より少し上に配置 */
    left: 50%;
    transform: translate(-50%, -50%);
    width: 42%;  /* アイコンサイズを微調整 */
    height: 42%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: invert(50%) sepia(0%) saturate(0%) brightness(80%) opacity(0.6) !important;
    transition: all 0.4s ease;
  }

  /* 中央に来た（アクティブな）時の演出 */
  .panel-item.is-visible::before {
    filter: invert(30%) sepia(0%) saturate(0%) brightness(70%) opacity(1) !important;
    transform: translate(-50%, -50%) scale(1.1);
  }

  /* 3. 各メニューのアイコン割り当て & ラベルテキスト */
  .panel-item[aria-label*="About"]::before { background-image: url('https://digisignreport.com/wp-content/uploads/2026/02/インフォメーションボタンのアイコン-その2.svg'); }
  .panel-item[aria-label*="About"]::after { content: "About"; }

  .panel-item[aria-label*="Portfolio"]::before { background-image: url('https://digisignreport.com/wp-content/uploads/2026/02/ノートパソコンのアイコン素材4.svg'); }
  .panel-item[aria-label*="Portfolio"]::after { content: "Portfolio"; }

  .panel-item[aria-label*="Web"]::before { background-image: url('https://digisignreport.com/wp-content/uploads/2026/02/WEBページのアイコン.svg'); }
  .panel-item[aria-label*="Web"]::after { content: "Web"; }

  .panel-item[aria-label*="Sound"]::before { background-image: url('https://digisignreport.com/wp-content/uploads/2026/02/8分音符アイコン-2.svg'); }
  .panel-item[aria-label*="Sound"]::after { content: "Sound"; }

  .panel-item[aria-label*="PELOG"]::before { background-image: url('https://digisignreport.com/wp-content/uploads/2026/02/土星、木星のアイコン.svg'); }
  .panel-item[aria-label*="PELOG"]::after { content: "PELOG"; }

  .panel-item[aria-label*="Contact"]::before { background-image: url('https://digisignreport.com/wp-content/uploads/2026/02/メールの無料アイコンその8.svg'); }
  .panel-item[aria-label*="Contact"]::after { content: "Contact"; }
}

/* 4. パネルの間隔：PC版 */
.panel-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 150px 60px;
  list-style: none;
  margin: 0; padding: 0;
}

/* パネルの間隔：スマホ版 */
@media (max-width: 768px) {
  .panel-list {
    grid-template-columns: 1fr;
    gap: 100px 20px; 
    padding-bottom: 100vh; 
  }
}

/* ==========================================
   Portfolio 共通：フォント・色・基本設定
   ========================================== */
.gallery-item .item-info .title {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 300 !important;
    letter-spacing: 0.25em !important;
    text-transform: uppercase;
}

/* WEB: アイコン＝オレンジ / 文字＝蛍光ピンク */
.gallery-item[data-type="web"] img {
    filter: invert(79%) sepia(36%) saturate(4730%) hue-rotate(334deg) !important;
}
.gallery-item[data-type="web"] .item-info .title {
    color: #ff47a3 !important; 
}

/* SOUND: アイコン＝青 / 文字＝蛍光オレンジ */
.gallery-item[data-type="sound"] img {
    filter: invert(71%) sepia(29%) saturate(300%) hue-rotate(123deg) brightness(91%) contrast(84%) !important;
}
.gallery-item[data-type="sound"] .item-info .title {
    color: #ff9933 !important; 
}

/* ==========================================
   PC版（769px以上）：360px 3Dギャラリー
   ========================================== */
@media screen and (min-width: 769px) {
    .portfolio-gallery-wrapper {
        margin-top: 150px !important;
        width: 100%;
        height: 650px; 
        position: relative;
        overflow: visible !important;
        perspective: 2000px;
    }

    .gallery-track {
        position: relative;
        width: 100%;
        height: 100%;
        transform-style: preserve-3d;
    }

    .gallery-item {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 360px !important; 
        transition: all 1.0s cubic-bezier(0.23, 1, 0.32, 1);
        cursor: pointer;
    }

    .gallery-item[data-type="web"]:not(.is-active) {
        transform: translate(-140%, -50%) rotateY(45deg) scale(0.6) translateZ(-400px);
        opacity: 0.4;
    }

    .gallery-item[data-type="sound"]:not(.is-active) {
        transform: translate(40%, -50%) rotateY(-45deg) scale(0.6) translateZ(-400px);
        opacity: 0.4;
    }

    .gallery-item.is-active {
        transform: translate(-50%, -50%) rotateY(0) scale(1) translateZ(100px);
        opacity: 1;
        z-index: 100;
    }

    .item-info {
        opacity: 0;
        transition: opacity 0.8s ease;
        margin-top: 60px;
        text-align: center;
    }
    .gallery-item.is-active .item-info {
        opacity: 1;
    }
}

/* ==========================================
   スマホ版（768px以下）：ギャラリー廃止・アイコン2つ横並び
   ========================================== */
@media screen and (max-width: 768px) {
    .portfolio-gallery-wrapper {
        margin-top: 80px !important;
        height: auto !important;
        perspective: none !important;
        overflow: visible !important;
    }

    .gallery-track {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: flex-start !important;
        gap: 30px !important;
        transform: none !important;
        height: auto !important;
        width: 100% !important;
    }

    .gallery-item {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important; 
        width: 42% !important;      
        max-width: 160px !important; 
        opacity: 1 !important;      
        pointer-events: auto !important;
    }

    .item-visual img {
        width: 100% !important;
        height: auto !important;
    }

    .item-info {
        opacity: 1 !important;
        margin-top: 20px !important;
        text-align: center;
    }

    .item-info .title {
        font-size: 0.9rem !important; 
        font-family: 'Montserrat', sans-serif !important;
    }
}

/* ==========================================
   PELOG（一覧・詳細）フォント完全統一
   ========================================== */

/* 1. 投稿詳細ページ (single.php) のフォント設定 */
.single-post-content .about-title,        /* 記事タイトル */
.single-post-content .pelog-post-date,    /* 日付 */
.single-post-content .about-description,  /* 本文 (the_content) */
.single-post-content .about-description p,
.single-post-content .about-description li,
.single-post-content .about-description h1,
.single-post-content .about-description h2,
.single-post-content .about-description h3,
.single-post-content .post-author-footer  /* 著者 */ {
    /* 英数字はRaleway、日本語はしっぽり明朝 */
    font-family: 'Raleway', 'Shippori Mincho B1', serif !important;
    font-weight: 400 !important;
    font-size: 19px !important; /* 読みやすさを考慮し19pxに微調整 */
    line-height: 2.2 !important; /* 行間をゆったりと */
    letter-spacing: 0.05em !important;
}

/* 2. バックボタン */
.single-post-content .back-btn {
    display: inline-block !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.75rem !important; /* 繊細なサイズを維持 */
    letter-spacing: 0.2em !important;
    text-decoration: none !important;
    color: #82b2ac !important; /* ミントグリーン復活 */
    border: 1px solid #82b2ac !important; /* 枠線復活 */
    padding: 10px 25px !important;
    border-radius: 20px !important; /* 角丸復活 */
    background: transparent !important;
    line-height: 1.0 !important; 
    transition: all 0.3s ease !important;
}

.single-post-content .back-btn:hover {
    background: #82b2ac !important;
    color: #fff !important;
}

/* 記事タイトルだけ少し存在感を出す */
.single-post-content .about-title {
    font-weight: 500 !important;
    letter-spacing: 0.1em !important;
    margin-bottom: 30px;
}

/* ==========================================
   PELOG 題名（タイトル）専用・サイズ大幅強化
   ========================================== */

/* 投稿詳細ページのメインタイトル（PC版） */
.single-post-content h1.about-title,
.single-post-content .about-title,
main#singlePostMain .about-title {
    font-family: 'Montserrat', 'Shippori Mincho B1', serif !important;
    font-weight: 500 !important;
    /* ★サイズを大きく設定：2.2rem前後。存在感を出します */
    font-size: 2.0rem !important; 
    letter-spacing: 0.12em !important;
    line-height: 1.4 !important;
    margin-bottom: 40px !important;
    text-align: left;
    color: #333333 !important;
}

/* PELOG一覧ページの各記事タイトル（PC版） */
.pelog-post-item .pelog-post-title,
#pelogMain .pelog-post-title {
    font-family: 'Montserrat', 'Shippori Mincho B1', serif !important;
    font-weight: 500 !important;
    font-size: 1.3rem !important; /* 一覧も少しだけ大きく */
}

/* 著者名（Written by...） */
.post-author-footer p {
    font-family: 'Raleway', 'Shippori Mincho B1', serif !important;
    font-size: 14px !important;
    color: #666 !important;
}

/* スマホ版での題名サイズ調整（768px以下） */
@media screen and (max-width: 768px) {
    /* セレクタを増やして、確実に上書きするようにします */
    body.single-post #singlePostMain .about-title,
    body.single-post h1.about-title,
    .single-post-content .about-title {
        font-size: 1.7rem !important;
        margin-top: 10px !important;
        margin-bottom: 25px !important;
        line-height: 1.4 !important;
    }
}

/* ==========================================
   PELOG リード文（ペレ太郎の一言）
   ========================================== */

#pelogMain .about-lead-text p {
    font-family: 'Raleway', 'Shippori Mincho B1', serif !important;
    color: #82b2ac !important; 
    opacity: 1 !important;
    font-weight: 400 !important;
    margin-top: 10px !important;
    letter-spacing: 0.05em !important;
    line-height: 1.6 !important;
}

/* スマホ版でのリード文 */
@media screen and (max-width: 768px) {
    #pelogMain .about-lead-text p {
        font-size: 15px !important;
        line-height: 1.9 !important;
    }
}

/* ==========================================
   PELOG 本文サイズ（再確認用）
   ========================================== */
.single-post-content .about-description p,
.single-post-content .about-description li {
    font-size: 17px !important; /* PC版本文サイズ */
    line-height: 2.2 !important;
}

@media screen and (max-width: 768px) {
    .single-post-content .about-description p {
        font-size: 17px !important;
        line-height: 1.9 !important;
    }
    .single-post-content .back-btn {
        font-size: 0.7rem !important;
        padding: 8px 20px !important;
    }
}

/* 画像のドラッグと選択を禁止 */
img {
    pointer-events: none;       /* クリックやドラッグ自体を無効化 */
    -webkit-user-drag: none;    /* Safari/Chrome用ドラッグ禁止 */
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -ms-user-drag: none;
    user-select: none;          /* テキスト選択も防ぐ */
    -webkit-touch-callout: none; /* iOSでの長押しメニュー禁止 */
}