/* ==========================================================================
   0. VARIABLES & RESET (基本設定・共通変数・フォントインポート)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800;900&family=Noto+Sans+JP:wght@500;700;900&display=swap');

:root {
  --font-base: "Noto Sans JP", sans-serif;
  --font-en: "Montserrat", sans-serif;
  
  /* SMB コーポレートカラーシステム */
  --color-dark: #111827;
  --color-primary: #0033aa;      /* 知性的で深いロイヤルブルー */
  --color-accent: #00bfff;       /* 突き抜ける明るいシアンブルー（水色） */
  --text-main: #374151;          /* 読みやすいメイングレー */
  --text-sub: #6b7280;           /* 控えめなサブグレー */
}

/* リセットスタイル */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  height: 100%;
}

body {
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column; /* フッターを最下部に固定 */
  font-family: var(--font-base);
  color: var(--color-dark);
  background-color: #ffffff;
  overflow-x: hidden;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
  transition: all 0.3s ease;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 共通コンテナ */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  position: relative;
  z-index: 10;
}

/* ==========================================================================
   1. LOADER (MP4動画対応・画面いっぱいフルスクリーン仕様)
   ========================================================================== */
.loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffffff; /* 動画の背景色に合わせて適宜変更してください */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.loader-wrapper.loaded {
  opacity: 0;
  visibility: hidden;
}

/* 映像コンテナの余白を完全排除し、領域を100%に拡大 */
.loader-video-container {
  width: 100%;
  height: 100%;
  padding: 0; /* 周辺の余白をなくして画面ぴったりに配置します */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.loader-video {
  width: 100%;
  height: 100%;
  
  /* 
     【📽️ 用途に合わせて下記からお選びください】
     
     1.「object-fit: cover;」にする場合 （※現在の設定）
        動画を画面いっぱいに拡大してクロップ（切り抜き）します。
        映画のような背景ムービーや、端が多少切れても良い動画に最適です。
        
     2.「object-fit: contain;」にする場合
        動画全体が画面内に綺麗に収まるよう自動縮小・拡大します。
        画面の端に文字や大事なロゴ要素があり、一切見切れてほしくない動画に最適です。
  */
  object-fit: cover; 
  
  animation: video-reveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0;
}

@keyframes video-reveal {
  to { opacity: 1; }
}

/* 有機的なオーロラ背景 */
.bg-shapes {
  position: fixed;
  top: 0; 
  left: 0; 
  width: 100vw; 
  height: 100vh;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.shape-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  mix-blend-mode: multiply;
  pointer-events: none;
}

.shape-1 {
  top: -5%;
  right: -5%;
  width: 55vw;
  height: 55vw;
  background: radial-gradient(circle, rgba(0, 51, 170, 0.22) 0%, rgba(255,255,255,0) 70%);
  animation: blob-fast-1 12s ease-in-out infinite alternate;
}

.shape-2 {
  bottom: -10%;
  left: -5%;
  width: 65vw;
  height: 65vw;
  background: radial-gradient(circle, rgba(0, 191, 255, 0.25) 0%, rgba(255,255,255,0) 70%);
  animation: blob-fast-2 15s ease-in-out infinite alternate;
}

.shape-3 {
  top: 35%;
  left: 25%;
  width: 40vw;
  height: 40vw;
  background: radial-gradient(circle, rgba(75, 0, 130, 0.12) 0%, rgba(255,255,255,0) 70%);
  animation: blob-fast-3 10s ease-in-out infinite alternate;
}

@keyframes blob-fast-1 {
  0% { transform: translate(0, 0) scale(1); border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; }
  50% { transform: translate(-120px, 80px) scale(1.2); border-radius: 60% 40% 30% 70% / 50% 60% 40% 60%; }
  100% { transform: translate(40px, -60px) scale(0.95); border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; }
}

@keyframes blob-fast-2 {
  0% { transform: translate(0, 0) scale(1); border-radius: 50% 50% 30% 70% / 50% 60% 40% 60%; }
  50% { transform: translate(140px, -90px) scale(0.8); border-radius: 30% 70% 70% 30% / 50% 40% 60% 50%; }
  100% { transform: translate(-30px, 60px) scale(1.1); border-radius: 50% 50% 30% 70% / 50% 60% 40% 60%; }
}

@keyframes blob-fast-3 {
  0% { transform: translate(0, 0) scale(0.9); }
  50% { transform: translate(-70px, -70px) scale(1.25); }
  100% { transform: translate(70px, 70px) scale(0.9); }
}

/* ==========================================================================
   2. HEADER & NAVIGATION (ヘッダー・メニュー・スマホ用三本線)
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 100;
  border-bottom: 1px solid rgba(0, 191, 255, 0.1);
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.header-logo-link {
  display: flex;
  align-items: center;
}

.header-logo-img {
  height: 50px;
  width: auto;
  object-fit: contain;
}

/* ナビゲーションメニュー */
.global-nav ul {
  display: flex;
  list-style: none;
  gap: 2.5rem;
}

.global-nav a {
  font-family: var(--font-en);
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--color-dark);
  letter-spacing: 0.05em;
  position: relative;
  padding: 0.5rem 0;
}

.global-nav a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-accent);
  transition: width 0.3s ease;
}

.global-nav a:hover,
.global-nav a.active {
  color: var(--color-primary);
}

.global-nav a:hover::after,
.global-nav a.active::after {
  width: 100%;
}

/* ハンバーガーボタン基本スタイル */
.menu-btn {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 20px;
  cursor: pointer;
  z-index: 110;
}

.menu-btn span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--color-dark);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: center;
}

/* 三本線のクロス変形アニメーション */
.menu-btn.active span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}

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

.menu-btn.active span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

/* ==========================================================================
   3. TYPOGRAPHY & COMMON PAGE LAYOUT (共通の文字配置と変則ブロック)
   ========================================================================== */
.site-main {
  flex: 1;
}

/* 下層ヘッダー */
.dynamic-page-header {
  position: relative;
  padding: 11rem 0 6rem 0;
  text-align: center;
  overflow: hidden;
}

.dynamic-page-header .giant-en {
  font-family: var(--font-en);
  font-size: 7.5rem;
  font-weight: 900;
  line-height: 0.8;
  color: rgba(0, 51, 170, 0.04);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  user-select: none;
  pointer-events: none;
}

.dynamic-page-header .sub-ja {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--color-dark);
  margin-top: -1.8rem;
  position: relative;
  z-index: 2;
  letter-spacing: 0.2em;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
}

.dynamic-page-header .sub-ja::after {
  content: ''; 
  width: 35px; 
  height: 3px; 
  background: var(--color-accent); 
  display: inline-block;
}

.page-container {
  padding: 2rem 3rem 8rem 3rem;
}

/* 左右アシンメトリーセクション */
.section-block {
  display: flex;
  align-items: center;
  gap: 6rem;
  margin-bottom: 12rem;
  position: relative;
}

.section-block.reverse {
  flex-direction: row-reverse;
}

/* 装飾枠と画像の傾斜ホバー演出 */
.block-img, .about-img-frame, .message-img-frame {
  flex: 1.1;
  position: relative;
  transform: rotate(-2.2deg) skewX(-1px);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.section-block.reverse .block-img {
  transform: rotate(2.2deg) skewX(1px);
}

.message-img-frame {
  flex: 0.9;
  transform: rotate(2.2deg) skewX(1px);
}

.block-img::before, .about-img-frame::before, .message-img-frame::before {
  content: ''; 
  position: absolute; 
  top: 20px; 
  left: -20px; 
  width: 100%; 
  height: 100%;
  border: 2px solid var(--color-accent); 
  border-radius: 12px; 
  z-index: -1;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.message-img-frame::before {
  left: auto; 
  right: -20px;
  border-color: var(--color-primary);
}

.block-img img, .about-img-frame img, .message-img-frame img {
  width: 100%;
  border-radius: 12px;
  filter: grayscale(35%) contrast(110%);
  box-shadow: 0 30px 60px rgba(0, 51, 170, 0.15);
  transition: all 0.6s;
}

.block-img:hover, .about-img-frame:hover, .message-img-frame:hover {
  transform: rotate(0deg) skewX(0deg) scale(1.02);
}

.block-img:hover::before, .about-img-frame:hover::before {
  transform: translate(12px, -12px);
}

.message-img-frame:hover::before {
  transform: translate(-12px, -12px);
}

.message-img-frame img {
  filter: grayscale(0%) contrast(100%);
}

/* 他の2つの画像だけホバーでカラーにする */
.block-img:hover img, .about-img-frame:hover img {
  filter: grayscale(0%) contrast(100%);
}

/* 代表写真はホバーしてもカラーのまま維持（色のアニメーションをさせない） */
.message-img-frame:hover img {
  filter: grayscale(0%) contrast(100%);
}

.block-text, .about-text-content, .message-text-content {
  flex: 0.9;
  position: relative;
  z-index: 10;
}

.message-text-content {
  flex: 1.1;
}

/* タイポグラフィ重なり調整（文字の重なり衝突を防止） */
.giant-title, .about-giant-bg-text {
  font-family: var(--font-en);
  font-size: 6.5rem;
  font-weight: 900;
  line-height: 1;
  margin-bottom: -0.5rem; /* 重なり量を緩和 */
  letter-spacing: -0.01em;
  pointer-events: none;
  user-select: none;
  color: rgba(0, 51, 170, 0.03); /* 日本語を邪魔しない極薄色に変更 */
  transform: translateX(-1rem);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.section-block.reverse .giant-title {
  transform: translateX(1rem);
}

.catch-title, .about-catch-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-dark);
  margin-bottom: 2rem;
  border-left: 4px solid var(--color-primary);
  padding-left: 1rem;
  position: relative;
  z-index: 5;
}

.desc-text p, .about-desc p {
  font-size: 1rem;
  line-height: 1.9;
  color: var(--text-main);
  margin-bottom: 1.5rem;
}

/* 特徴的な矢印スライド付きのボタン */
.btn-creative {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  font-family: var(--font-en);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-dark);
  position: relative;
  padding: 0.6rem 0;
  letter-spacing: 0.15em;
  margin-top: 1rem;
}

.btn-creative::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 30px;
  height: 2px;
  background: var(--color-dark);
  transition: width 0.4s;
}

.btn-creative:hover {
  color: var(--color-primary);
  transform: translateX(5px);
}

.btn-creative:hover::before {
  width: 100%;
  background: var(--color-primary);
}

/* 下層テーブル(グラスモフィズム仕様) */
.design-table, .premium-profile-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 3rem;
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 33, 170, 0.04);
  border: 1px solid rgba(0, 51, 170, 0.03);
}

.design-table tr, .premium-profile-table tr {
  border-bottom: 1px solid rgba(0, 51, 170, 0.06);
  transition: background 0.35s;
}

.design-table tr:last-child, .premium-profile-table tr:last-child {
  border-bottom: none;
}

.design-table tr:hover, .premium-profile-table tr:hover {
  background: rgba(255, 255, 255, 0.85);
}

.design-table th, .design-table td, .premium-profile-table th, .premium-profile-table td {
  padding: 2.2rem 2.5rem;
  text-align: left;
  vertical-align: middle;
}

.design-table th, .premium-profile-table th {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  width: 25%;
}

.design-table td, .premium-profile-table td {
  font-size: 1.05rem;
  color: var(--text-main);
  font-weight: 500;
  line-height: 1.7;
}

.en-sub-text {
  font-family: var(--font-en);
  font-size: 0.85rem;
  color: var(--text-sub);
  font-weight: 600;
}

/* ==========================================================================
   4. CONTACT & CTA SECTION (下層お問い合わせの明るいテーマ)
   ========================================================================== */
.contact-section, .cta-section, #contact, .main-contact {
  padding: 8rem 0 !important;
  background: rgba(0, 191, 255, 0.06) !important;
  position: relative;
  z-index: 10;
  text-align: center;
  width: 100%;
}

.contact-section .giant-title, .cta-section .giant-title {
  color: rgba(0, 191, 255, 0.04) !important;
}

.contact-section h2, .cta-section h2,
.contact-section .catch-title, .cta-section .catch-title {
  font-size: 2.5rem;
  font-weight: 900;
  color: #0033aa !important;
  letter-spacing: 0.05em;
  margin-bottom: 1.5rem;
  border: none !important;
  padding-left: 0 !important;
}

.contact-section p, .cta-section p,
.contact-section .section-desc, .cta-section .section-desc {
  font-size: 1.1rem;
  color: #4b5563 !important;
  font-weight: 700;
  line-height: 1.8;
  margin-bottom: 3.5rem;
  max-width: 100% !important;
}

.contact-btn, .cta-btn,
.contact-section .btn, .cta-section .btn {
  display: inline-block;
  font-family: var(--font-en);
  font-size: 1rem;
  font-weight: 900;
  color: #ffffff !important;
  background: #00bfff !important;
  padding: 1.2rem 4rem;
  border-radius: 50px;
  border: 3px solid #0077ff;
  box-shadow: 0 10px 25px rgba(0, 191, 255, 0.3);
  text-decoration: none;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.contact-btn:hover, .cta-btn:hover,
.contact-section .btn:hover, .cta-section .btn:hover {
  background: #0033aa !important;
  border-color: #00bfff;
  transform: translateY(-6px) scale(1.04);
  box-shadow: 0 15px 30px rgba(0, 51, 170, 0.35);
}

/* ==========================================================================
   5. SITE FOOTER (共通フッター・幾何学的で洗練されたプレミアムテック仕様)
   ========================================================================== */
.site-footer {
  padding: 10rem 0 4rem 0;
  /* 深みのあるダークスレート（#0b0f19）へシームレスに沈み込むダークグラデーション */
  background: linear-gradient(180deg, #0b0f19 0%, #05070c 100%) !important;
  margin-top: auto;
  position: relative;
  z-index: 20 !important;
  width: 100%;
}

/* 
   📐 斜めスラッシュの背景切り替えベース（波線を廃止し、鋭角な幾何学境界を形成）
   波線よりも上側を直前のコンテンツ背景（またはオーロラ）、下側をフッターのダーク背景に鋭く切り分けます。
*/
.site-footer::before {
  content: "";
  position: absolute;
  /* 高さを60pxに設定し、上方向へ-58px引き上げ、フッター上端に1pxの隙間もなく完全吸着させます */
  top: -58px; 
  left: 0; 
  width: 100%; 
  height: 60px;
  
  /* 
     幾何学的に右肩上がりに切り裂くスロープ形状SVG。
     フッターと同じ深色（#0b0f19）で塗りつぶされており、斜めカットを美しく表現します。
  */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0,60 L1200,0 L1200,60 L0,60 Z' fill='%230b0f19'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: 1; /* 水色のスラッシュラインの背面に配置 */
  pointer-events: none;
}

/* ⚡️ 境界をなぞるサイバーシアンのレーザーライン */
.site-footer::after {
  content: "";
  position: absolute;
  top: -58px; 
  left: 0; 
  width: 100%; 
  height: 60px;
  
  /* 
     斜めのスロープをなぞる、発光感のある極細のサイバーライン（#00bfff）。
     画面幅が極端に伸縮しても、左右の吸着点がズレる心配はありません。
  */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0,60 L1200,0' fill='none' stroke='%2300bfff' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: 2; /* スラッシュ背景の前面に配置 */
  pointer-events: none;
}

.footer-container {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 4rem;
  margin-bottom: 4rem;
  position: relative;
  z-index: 5;
}

/* 🛡 左：ダークグラスモフィズム（半透明ガラス）仕様のスタイリッシュカード */
.footer-pop-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.2rem;
  /* 極薄の透明感を持たせた背景。ぼかし（backdrop-filter）を効かせて高級感を演出 */
  background: rgba(255, 255, 255, 0.02) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 2.5rem;
  border-radius: 16px; /* 角をシャープに引き締めた高級感のある角丸 */
  border: 1px solid rgba(0, 191, 255, 0.15); /* 細身のシアンブルー枠線 */
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  flex: 1;
  max-width: 420px;
}

/* ホバー時に傾くのを抑え、前方に少し浮き上がって輝きが増す大人のインタラクション */
.footer-pop-card:hover {
  transform: translateY(-5px) scale(1.02);
  border-color: #00bfff;
  box-shadow: 0 40px 80px rgba(0, 191, 255, 0.15);
}

.footer-logo-img {
  height: 60px;
  width: auto;
  object-fit: contain;
  align-self: flex-start;
}

.footer-company-name {
  font-size: 1.3rem;
  font-weight: 900;
  color: #ffffff; /* クリスプな白文字 */
  letter-spacing: 0.08em;
}

.footer-info-text {
  font-size: 0.9rem;
  color: #8a99ad; /* スタイリッシュな涼しいグレー */
  line-height: 1.6;
  font-weight: 500;
}

/* 🔗 右：ダークテーマに馴染むシャープなカプセルグリッドリンク */
.footer-pop-links {
  flex: 2;
  display: flex;
  align-items: center;
}

.footer-pop-links ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

.footer-pop-links a {
  font-family: var(--font-en);
  font-size: 0.85rem;
  font-weight: 800;
  color: #8a99ad; /* 通常時はスタイリッシュなグレー */
  display: block;
  padding: 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.01);
  border-radius: 6px; /* 丸みを抑えたスマートな角丸 */
  border: 1px solid rgba(255, 255, 255, 0.05);
  text-align: center;
  text-decoration: none;
  letter-spacing: 0.1em;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ホバー時に滑らかにシアンブルーに発光 */
.footer-pop-links a:hover {
  color: #ffffff !important;
  background: rgba(0, 191, 255, 0.1) !important; /* 微細なシアンのレイヤー */
  border-color: #00bfff;
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0, 191, 255, 0.15);
}

.copyright-pop {
  font-size: 0.85rem;
  color: #8a99ad;
  font-family: var(--font-en);
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.15em;
  opacity: 0.4;
  width: 100%;
  border-top: 1px solid rgba(255, 255, 255, 0.07); /* 極薄の仕切り線 */
  padding-top: 2.5rem;
  position: relative;
  z-index: 5;
}

/* ==========================================================================
   6. RESPONSIVE OPTIMIZATION (スマホ対応ブレークポイント - プレミアム・ラグジュアリー仕様)
   ========================================================================== */
@media (max-width: 900px) {
  .container {
    padding: 0 1.5rem;
  }
  
  /* -------------------------------------------------------------
     A. スマホメニュー：美しく滑らかなフェード ＆ 時間差（Stagger）浮き出し
     ------------------------------------------------------------- */
  .menu-btn {
    display: flex;
  }
  
  .global-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 105;
    padding-top: 120px;
    
    /* 完全に消すのではなく、透明度と位置で管理して滑らかにフェード＆スライドさせます */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px);
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), 
                visibility 0.5s;
    display: block !important; /* 表示構造を常に維持 */
  }
  
  /* メニューが開いた時 */
  .global-nav.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  
  .global-nav.open ul {
    flex-direction: column;
    align-items: center;
    gap: 2.2rem;
  }

  .global-nav.open a {
    font-size: 1.2rem;
    opacity: 0;
    transform: translateY(15px);
    animation: navItemReveal 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  /* スマホメニュー項目が上から順番にフワフワと時間差で湧き出るstagger */
  .global-nav.open li:nth-child(1) a { animation-delay: 0.1s; }
  .global-nav.open li:nth-child(2) a { animation-delay: 0.15s; }
  .global-nav.open li:nth-child(3) a { animation-delay: 0.2s; }
  .global-nav.open li:nth-child(4) a { animation-delay: 0.25s; }
  .global-nav.open li:nth-child(5) a { animation-delay: 0.3s; }
  .global-nav.open li:nth-child(6) a { animation-delay: 0.35s; }
  .global-nav.open li:nth-child(7) a { animation-delay: 0.4s; }

  @keyframes navItemReveal {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .dynamic-page-header {
    padding: 7rem 0 3.5rem 0;
  }
  
  .dynamic-page-header .giant-en {
    font-size: 3.5rem;
    letter-spacing: 0.05em;
  }
  
  .dynamic-page-header .sub-ja {
    font-size: 1.1rem;
    margin-top: -0.4rem;
  }
  
  /* -------------------------------------------------------------
     B. 写真と装飾枠（IDENTITY等）：スマホでも立体美を失わない微調整
     ------------------------------------------------------------- */
  .section-block, .section-block.reverse {
    flex-direction: column;
    gap: 3.5rem;
    margin-bottom: 8rem;
  }
  
  /* スマホでの傾きを完全に殺さず、少し控えめ（1度）に設定して立体感を維持 */
  .block-img, .about-img-frame, .message-img-frame {
    transform: rotate(-1deg) skewX(-0.5deg) !important;
    width: 100%;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  }
  
  .section-block.reverse .block-img, .message-img-frame {
    transform: rotate(1deg) skewX(0.5deg) !important;
  }
  
  /* スマホの画面からはみ出さないよう、枠線（::before）のズレ幅を10pxに縮小して美しく復活 */
  .block-img::before, .about-img-frame::before, .message-img-frame::before {
    display: block !important; 
    top: 10px;
    left: -10px;
    border-radius: 8px;
  }
  
  .message-img-frame::before {
    left: auto;
    right: -10px;
  }

  /* タップした（押した）瞬間に、クニュッとわずかに沈み込む心地よいタッチフィードバック */
  .block-img:active, .about-img-frame:active, .message-img-frame:active {
    transform: rotate(0deg) scale(0.98) !important;
  }

  /* 巨大な背景文字（IDENTITY等）をスマホ幅に綺麗に収めて溶け込ませる */
  .giant-title, .about-giant-bg-text {
    font-size: 3.8rem;
    color: rgba(0, 51, 170, 0.03) !important;
    transform: translateY(0.5rem) !important; /* 縦方向のズレを少しだけ演出 */
    margin-bottom: -0.2rem;
    display: block;
  }
  
  /* -------------------------------------------------------------
     C. テーブル（グラスモフィズム仕様）のスマホ最適化
     ------------------------------------------------------------- */
  .design-table, .premium-profile-table {
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 33, 170, 0.02);
    border: 1px solid rgba(0, 51, 170, 0.04);
    border-radius: 8px;
  }
  
  .design-table tr, .premium-profile-table tr {
    display: block;
    padding: 1.2rem 1.5rem;
    border-bottom: 1px solid rgba(0, 51, 170, 0.06);
  }
  
  .design-table th, .design-table td, .premium-profile-table th, .premium-profile-table td {
    display: block;
    width: 100%;
    padding: 0.3rem 0;
  }
  
  .design-table th, .premium-profile-table th {
    font-size: 0.8rem;
    color: var(--color-primary);
    margin-bottom: 0.2rem;
  }
  
  .design-table td, .premium-profile-table td {
    font-size: 0.95rem;
  }

  /* -------------------------------------------------------------
     D. フッターのスマホ最適化
     ------------------------------------------------------------- */
  .footer-container {
    flex-direction: column;
    gap: 3rem;
  }
  
  .footer-pop-card {
    max-width: 100%;
    padding: 2rem 1.5rem;
  }
  
  .footer-pop-links ul {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   【代表メッセージ形状維持】並び順を「左画像・右テキスト」に確実に固定する設定
   ========================================================================== */
.about-message-block {
  display: flex !important;
  flex-direction: row !important; /* 確実に左画像・右メッセージにします */
  align-items: center;
}

@media (max-width: 900px) {
  .about-message-block {
    flex-direction: column !important; /* スマホでは確実に「上が画像・下がメッセージ」にします */
  }
}