/* SaC Corporate — 現行サイトの追加CSSを移植（Elementor 不使用化）。細かい整理は今後。 */

header,
.site-header,
.elementor-location-header,
.elementor-section,
.elementor-container,
.elementor-widget-wrap {
  background-color: transparent !important;
  background-image: none !important;
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 30px;
  flex-wrap: nowrap;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background-color: transparent !important;
}

.header-logo {
  flex: 0 0 auto;
}

.header-logo img {
  height: 80px;        
  width: auto;
  max-height: 80px;
  flex-shrink: 0;      
}

.nav-menu {
  display: flex;
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
  flex-shrink: 1;
  min-width: 0;
}

.header-menu-wrapper {
  display: flex;
  align-items: center;
  gap: 40px;
  background-color:transparent; 
  border-radius: 100px;
  padding: 10px 30px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.nav-item {
  text-align: center;
  font-family: "Arial", sans-serif;
  position: relative;
}

.nav-en {
  font-weight: bold;
  font-size: 1rem;
  color: #003040;
  position: relative;
  padding-left: 1.75rem;
  display: inline-block;
  background-color: transparent !important;
}

.nav-en::before {
  content: '●';
  color: #003040;
  font-size: 1.75rem;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: color 0.3s;
}

.nav-item:hover .nav-en::before {
  color: #e16b8c;
}

.nav-ja {
  display: block;
  font-size: 0.7rem;
  color: #003040;
  margin-top: 0.25rem;
  padding-left: 1.75rem;
}.button-area {
  flex: 0 0 auto;
  display: flex;
  gap: 20px;
  align-items: center;
}

.contact-button,
.recrui-button {
  display: inline-block;
  padding: 0.75rem 0.85rem;
  font-size: 0.825rem;
  font-weight: bold;
  color: white;
  text-decoration: none;
  border-radius: 3.125rem;
  transition: all 0.3s ease;
  white-space: nowrap;
  box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.1);
  background-color: transparent !important;
}

.contact-button {
  background: linear-gradient(135deg, #f857a6, #ff5858);
}

.recrui-button {
  background: linear-gradient(135deg, #00c6ff, #0072ff);
  position: relative;
  padding-right: 40px;
}

.contact-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 10px rgba(248, 87, 166, 0.3);
}

.recrui-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 10px rgba(0, 198, 255, 0.3);
}

.has-submenu {
  position: relative;
}

.submenu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: white;
  border: 1px solid #ddd;
  padding: 10px 0;
  list-style: none;
  display: none;
  min-width: 160px;
  z-index: 999;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.submenu li {
  padding: 6px 20px;
  text-align: left;
  white-space: nowrap;
}

.submenu li a {
  color: #003040;
  text-decoration: none;
  font-size: 15px;
  transition: color 0.3s;
}

.submenu li a:hover {
  color: #e16b8c;
}

.has-submenu:hover .submenu {
  display: block;
}/* =================================
   ハンバーガーメニュー実装
================================= *//* ハンバーガーボタン（初期状態では非表示） */

.hamburger-menu {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 22px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 10001;
  transition: all 0.3s ease;
}

.hamburger-menu span {
  display: block;
  height: 3px;
  width: 100%;
  background-color: #003040;
  border-radius: 2px;
  transition: all 0.3s ease;
}

.hamburger-menu span + span {
  margin-top: 5px;
}/* ハンバーガーメニューアクティブ時のアニメーション */

body.menu-open .hamburger-menu span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

body.menu-open .hamburger-menu span:nth-child(2) {
  opacity: 0;
}

body.menu-open .hamburger-menu span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}/* モバイルメニューオーバーレイ */

.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.mobile-menu-overlay.active {
  opacity: 1;
  visibility: visible;
}/* モバイルドロワーメニュー */

.mobile-drawer {
  position: fixed;
  top: 0;
  right: -100%;
  width: 320px;
  max-width: 85vw;
  height: 100vh;
  background-color: white;
  z-index: 9999;
  transition: right 0.3s ease;
  overflow-y: auto;
  box-shadow: -4px 0 15px rgba(0, 0, 0, 0.1);
  padding: 80px 24px 24px;
}

.mobile-drawer.active {
  right: 0;
}/* ×ボタンスタイル */

.mobile-menu-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
  padding: 0;
}

.mobile-menu-close:hover {
  background-color: rgba(0, 48, 64, 0.08);
  transform: scale(1.05);
}

.mobile-menu-close:focus {
  outline: 2px solid #e16b8c;
  outline-offset: 2px;
  background-color: rgba(225, 107, 140, 0.1);
}/* CSS擬似要素で×マークを作成 */

.mobile-menu-close::before,
.mobile-menu-close::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 2px;
  background-color: #003040;
  transition: all 0.3s ease;
  border-radius: 1px;
}

.mobile-menu-close::before {
  transform: rotate(45deg);
}

.mobile-menu-close::after {
  transform: rotate(-45deg);
}

.mobile-menu-close:hover::before,
.mobile-menu-close:hover::after,
.mobile-menu-close:focus::before,
.mobile-menu-close:focus::after {
  background-color: #e16b8c;
}/* モバイルメニュー内のナビゲーション */

.mobile-nav-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mobile-nav-item {
  border-bottom: 1px solid #f0f0f0;
}

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

.mobile-nav-item a,
.mobile-nav-item .submenu-toggle {
  display: block;
  width: 100%;
  padding: 16px 0;
  color: #003040;
  text-decoration: none;
  font-family: "Arial", sans-serif;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: color 0.3s;
}

.mobile-nav-item a:hover,
.mobile-nav-item .submenu-toggle:hover {
  color: #e16b8c;
}

.mobile-nav-en {
  display: block;
  font-weight: bold;
  font-size: 1.1rem;
  line-height: 1.4;
}

.mobile-nav-ja {
  display: block;
  font-size: 0.8rem;
  color: #666;
  margin-top: 2px;
}/* サブメニュー展開インジケーター */

.submenu-toggle::after {
  content: '▼';
  float: right;
  font-size: 0.8rem;
  transition: transform 0.3s ease;
  color: #999;
}

.mobile-nav-item.has-submenu.active .submenu-toggle::after {
  transform: rotate(180deg);
  color: #e16b8c;
}/* モバイルサブメニュー */

.mobile-submenu {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #f9f9f9;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  border-radius: 8px;
  margin-top: 8px;
}

.mobile-nav-item.has-submenu.active .mobile-submenu {
  max-height: 300px;
  padding: 12px 0;
}

.mobile-submenu li {
  padding: 0;
  border-bottom: none;
}

.mobile-submenu a {
  font-size: 0.95rem;
  font-weight: normal;
  padding: 12px 20px;
  color: #555;
  border-bottom: 1px solid #e8e8e8;
}

.mobile-submenu a:hover {
  background-color: #f0f0f0;
  color: #e16b8c;
}/* モバイルメニューボタンエリア */

.mobile-menu-buttons {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid #f0f0f0;
}

.mobile-menu-buttons .contact-button,
.mobile-menu-buttons .recrui-button {
  width: 100%;
  text-align: center;
  padding: 14px 20px;
  font-size: 1rem;
  font-weight: bold;
  border-radius: 25px;
}/* =================================
   レスポンシブ対応
================================= *//* PC画面 (1025px以上) - 既存デザインを完全保持 */

@media (min-width: 1025px) {
  .hamburger-menu {
    display: none;
  }
  .header-menu-wrapper {
    display: flex;
  }}/* タブレット・スマホ画面 (1024px以下) - ハンバーガーメニューに切り替え */

@media (max-width: 1024px) {
  .header-menu-wrapper {
    display: none !important;
  }
  
  .hamburger-menu {
    display: flex;
  }

  .header-container {
    padding: 15px 25px;
    background-color: #ffffff !important; /* ←ヘッダー背景を白に */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important; /* ←影を追加 */
  }

  
  .header-logo img {
    height: 65px;
    max-height: 65px;
  }}/* ★★★ 調整用CSS変数（ここの値を変更するだけで位置・サイズを調整できます）★★★ */

  
  :root {
    --header-height: 210px;           /* ヘッダーの高さ */
    --slideshow-top-margin: 80px;    /* スライドショー上部のマージン */
    --scroll-bottom: 15px;           /* スクロール要素の下からの距離 */
    --scroll-height: 50px;           /* スクロールバーの高さ */
    --scroll-width: 3px;             /* スクロールバーの幅 */
    --scroll-label-size: 0.8rem;     /* SCROLL文字のサイズ */
    --scroll-gap: 10px;              /* SCROLL文字とバーの間隔 */
    --button-font-size: 13px;        /* ボタン内テキストのサイズ */
    --button-top-margin: 20px;       /* ボタンの上マージン */
  }/* スマートフォン画面 (768px以下) */

@media (max-width: 768px) {
  .header-container {
    padding: 15px 20px;
  }
  
  .header-logo img {
    height: 50px;
    max-height: 50px;
  }
  
  body.menu-open {
    overflow: hidden;
  }}/* 小さなスマートフォン画面 (480px以下) */

@media (max-width: 480px) {
  .header-container {
    padding: 12px 16px;
  }
  
  .header-logo img {
    height: 45px;
    max-height: 45px;
  }
  
  .mobile-drawer {
    width: 100%;
    max-width: 100vw;
  }
  
  .hamburger-menu {
    width: 28px;
    height: 20px;
  }
  
  .mobile-menu-close {
    top: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
  }
  
  .mobile-menu-close::before,
  .mobile-menu-close::after {
    width: 18px;
  }}/* =================================
   フッター完全版スタイル
   ヘッダーCSSとの競合完全回避
================================= *//* フッター専用リセット（全体に影響しない） *//* =================================
   フッターメイン
================================= *//* =================================
   メインフッターコンテンツ
================================= *//* =================================
   左側: 会社情報
================================= *//* ロゴ *//* 会社名 *//* 住所 *//* =================================
   右側: ナビゲーション
================================= *//* メインナビゲーション *//* 追加リンク *//* =================================
   フッター下部
================================= *//* =================================
   レスポンシブデザイン
================================= *//* タブレット対応 (1024px以下) *//* スマートフォン対応 (768px以下) *//* 小さいスマートフォン対応 (480px以下) *//* =================================
   ホバーエフェクト
================================= *//* =================================
   アニメーション効果
================================= */

@keyframes footerFadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}/* =================================
   アクセシビリティ
================================= *//* ハイコントラストモード対応 *//* =================================
   印刷対応
================================= *//* =================================
   ダークモード対応
================================= *//* =================================
   WordPress余白問題解決
================================= *//* 最強の余白除去方法 *//* WordPressテーマ制約を強制的に回避 *//* 親要素の制約を無視 *//* さらに確実にするための追加背景 */

body::after {
  content: '';
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 200px;
  background-color: #2c3e50;
  z-index: -10;
  pointer-events: none;
}

body {
  padding-top: 100px;
	 overflow-x: hidden;
}

@media screen and (max-width: 768px) {
  body {
    padding-top: 80px;
  }}

.dot {
  position: absolute;
  width: 6px;
  height: 6px;
  background-color: #ddd;
  border-radius: 50%;
  opacity: 0;
  animation: fade-dot 4s infinite ease-in-out;
}

@keyframes fade-dot {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

@keyframes verticalScroll {
  0% {
    transform: rotate(45deg) translateY(0);
  }
  100% {
    transform: rotate(45deg) translateY(120vh);
  }
}

@keyframes floatLine {
  0%   { opacity: 0; transform: rotate(-45deg) translateY(20px); }
  50%  { opacity: 1; transform: rotate(-45deg) translateY(0); }
  100% { opacity: 0; transform: rotate(-45deg) translateY(-20px); }
}/* =================================
   PC版レイアウト完全保持（1025px以上）
================================= */

.hero-left {
  flex: 1 1 60%;                   
  padding-right: 40px;
  padding-left: 0;
  box-sizing: border-box;
}

@keyframes gradientFlow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes slideShow {
  0%   { opacity: 0; }
  5%   { opacity: 1; }
  30%  { opacity: 1; }
  35%  { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes maskMorph {
  0% {
    clip-path: ellipse(50% 50% at 50% 50%);
  }
  100% {
    clip-path: ellipse(85% 85% at 87% 15%);
  }
}/* =================================
   背景アニメーション要素（完全保持）
================================= */

@keyframes verticalScroll {
  0% {
    transform: rotate(45deg) translateY(0);
  }
  100% {
    transform: rotate(45deg) translateY(120vh);
  }
}

@keyframes floatLine {
  0%   { opacity: 0; transform: rotate(-45deg) translateY(20px); }
  50%  { opacity: 1; transform: rotate(-45deg) translateY(0); }
  100% { opacity: 0; transform: rotate(-45deg) translateY(-20px); }
}

.dot {
  position: absolute;
  width: 6px;
  height: 6px;
  background-color: #ddd;
  border-radius: 50%;
  opacity: 0;
  animation: fade-dot 4s infinite ease-in-out;
}

@keyframes fade-dot {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}/* =================================
   スクロールインジケーター（PC用）
================================= */

@keyframes slideDown {
  0% {
    top: -100%;
  }
  50% {
    top: 0%;
  }
  100% {
    top: 100%;
  }
}

@keyframes scroll-left {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}/* =================================
   既存のコンタクトページ設定（完全保持）
================================= */

.contact-page {
  padding: 100px 20px;
  text-align: center;
  font-family: "Helvetica Neue", sans-serif;
}

.page-id-38 .header-container {
  display: none !important;
}

.wpcf7-submit {
  display: block;
  margin: 30px auto; 
  padding: 12px 30px;
  font-size: 18px;
  font-weight: bold;
  background-color: #FF3399;
  color: #FFFFFF;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.wpcf7-submit:disabled {
  background-color: #CCCCCC;
  color: #FFFFFF;
  cursor: not-allowed;
}

.page-id-40 .header-container {
  display: none !important;
}/* =================================
   PC版レイアウト完全保持（1025px以上）
================================= */

.hero-left {
  flex: 1 1 60%;                   
  padding-right: 40px;
  padding-left: 0;
  box-sizing: border-box;
}

@keyframes gradientFlow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes slideShow {
  0%   { opacity: 0; }
  5%   { opacity: 1; }
  30%  { opacity: 1; }
  35%  { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes maskMorph {
  0% {
    clip-path: ellipse(50% 50% at 50% 50%);
  }
  100% {
    clip-path: ellipse(85% 85% at 87% 15%);
  }
}/* =================================
   背景アニメーション要素（完全保持）
================================= */

@keyframes verticalScroll {
  0% {
    transform: rotate(45deg) translateY(0);
  }
  100% {
    transform: rotate(45deg) translateY(120vh);
  }
}

@keyframes floatLine {
  0%   { opacity: 0; transform: rotate(-45deg) translateY(20px); }
  50%  { opacity: 1; transform: rotate(-45deg) translateY(0); }
  100% { opacity: 0; transform: rotate(-45deg) translateY(-20px); }
}

.dot {
  position: absolute;
  width: 6px;
  height: 6px;
  background-color: #ddd;
  border-radius: 50%;
  opacity: 0;
  animation: fade-dot 4s infinite ease-in-out;
}

@keyframes fade-dot {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}/* =================================
   スクロールインジケーター（PC用）
================================= */

@keyframes slideDown {
  0% {
    top: -100%;
  }
  50% {
    top: 0%;
  }
  100% {
    top: 100%;
  }
}

@keyframes scroll-left {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}/* =================================
   既存のコンタクトページ設定（完全保持）
================================= */

.contact-page {
  padding: 100px 20px;
  text-align: center;
  font-family: "Helvetica Neue", sans-serif;
}

.page-id-38 .header-container {
  display: none !important;
}

.wpcf7-submit {
  display: block;
  margin: 30px auto; 
  padding: 12px 30px;
  font-size: 18px;
  font-weight: bold;
  background-color: #FF3399;
  color: #FFFFFF;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.wpcf7-submit:disabled {
  background-color: #CCCCCC;
  color: #FFFFFF;
  cursor: not-allowed;
}

.page-id-40 .header-container {
  display: none !important;
}/* =================================
   clecom.jp風 - タブレット・スマホのみ変更（1024px以下）
================================= */

@media (max-width: 1024px) {/* ★★★ 調整用CSS変数（ここの値を変更するだけで位置・サイズを調整できます）★★★ */
  
  :root {
    --scroll-bottom: -180px;        /* スクロール要素全体の下からの距離 */
    --scroll-height: 50px;        /* スクロールバーの高さ */
    --scroll-width: 3px;          /* スクロールバーの幅 */
    --scroll-label-size: 0.8rem;  /* SCROLL文字のサイズ */
    --scroll-gap: 10px;           /* SCROLL文字とバーの間隔 */
    --button-font-size: 13px;     /* ボタン内テキストのサイズ */
    --button-top-margin: 90px;    /* ボタンの上マージン */
  }/* WordPress制約の数学的回避とフルブリード化 */

  
  body {
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden;
  }.site-main,
.elementor-section-wrap,
.elementor-container,
.elementor-section,
.container,
.row,
.wrap,
.content {
    padding: 0 !important;
    margin: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
  }/* ヒーローセクションのフルスクリーン＆フルブリード化 *//* 表示順序の最適化 */
  
  .hero-left { 
    order: 2 !important; /* テキストを下に */
    width: 100% !important;
    max-width: 500px !important;
    padding: 0 20px !important;
    text-align: center !important;
    
    /* ボタンを下側に寄せるためのflexbox設定 */
    display: flex !important;
    flex-direction: column !important;
  }/* スライドショーのフルブリード化（clecom風） *//* テキスト要素の最適化 *//* ボタンの調整（CSS変数使用） *//* 背景アニメーションのフルブリード化 *//* 背景アニメーションの調整 *//* 背景テキストの調整 *//* スクロールインジケーターの調整（CSS変数使用） */}/* スマートフォン向け微調整 (480px以下) */

@media (max-width: 480px) {
  :root {
    --scroll-bottom: -190px;        /* 小画面用の位置調整 */
    --scroll-height: 40px;        /* 小画面用の高さ調整 */
    --scroll-width: 2px;          /* 小画面用の幅調整 */
    --scroll-label-size: 0.7rem;  /* 小画面用の文字サイズ調整 */
    --scroll-gap: 8px;            /* 小画面用の間隔調整 */
    --button-font-size: 11px;     /* 小画面用のボタンフォントサイズ */
    --button-top-margin: 85px;    /* 小画面用のボタンマージン */
  }

  .hero-left { 
    padding: 0 14px !important; 
  }}/* 横向きスマートフォン対応 */

@media (max-width: 768px) and (orientation: landscape) {
  :root {
    --scroll-bottom: 10px;        /* 横向き用の位置調整 */
    --scroll-height: 35px;        /* 横向き用の高さ調整 */
    --scroll-label-size: 0.75rem; /* 横向き用の文字サイズ調整 */
    --button-font-size: 13px;     /* 横向き用のボタンフォントサイズ */
  }
  
  .hero-left {
    order: 1 !important;
    flex: 1 1 55% !important;
    padding-right: 20px !important;
    text-align: left !important;
  }}/* アクセシビリティ対応 */

@keyframes slider1Fade {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  40%  { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 0; }
}

.blob {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  opacity: 0.4;
  animation: blobMove 30s infinite ease-in-out;
  mix-blend-mode: screen;
  z-index: 1;
}

.blob.pink {
  background: #ff99cc;
  top: 10%;
  left: 15%;
  border-radius: 60% 40% 50% 50% / 40% 60% 40% 60%;
	animation-duration: 28s;
}

.blob.pink.delay {
  top: 35%;
  left: 5%;
  border-radius: 50% 50% 60% 40% / 60% 40% 50% 50%;
	animation-duration: 34s;
}

.blob.green {
  background: #99ffcc;
  top: 15%;
  left: 30%;
  border-radius: 45% 55% 60% 40% / 50% 60% 40% 50%;
	animation-duration: 30s;
}

.blob.green.delay {
  top: 20%;
  left: 25%;
  border-radius: 55% 45% 60% 40% / 60% 40% 60% 40%;
	animation-duration: 26s;
}

.blob.blue {
  background: #99ccff;
  top: 30%;
  left: 45%;
  border-radius: 40% 60% 60% 40% / 50% 40% 60% 50%;
	animation-duration: 32s;
}

.blob.blue.delay {
  top: 50%;
  left: 25%;
  border-radius: 50% 50% 50% 50% / 40% 60% 60% 40%;
	animation-duration: 36s;
}

@keyframes blobMove {
  0%, 100% {
    transform: translate(0, 0) scale(1) rotate(0deg);
    border-radius: 40% 60% 60% 40% / 50% 40% 60% 50%;
  }

  25% {
    transform: translate(100px, -120px) scale(1.4) rotate(90deg);
    border-radius: 60% 40% 50% 50% / 40% 60% 40% 60%;
  }

  50% {
    transform: translate(-80px, 100px) scale(0.7) rotate(-60deg);
    border-radius: 50% 50% 60% 40% / 50% 60% 40% 50%;
  }

  75% {
    transform: translate(60px, 80px) scale(1.2) rotate(20deg);
    border-radius: 45% 55% 60% 40% / 60% 40% 50% 50%;
  }
}

@keyframes aboutus-verticalScroll {
  0%   { transform: rotate(45deg) translateY(0); }
  100% { transform: rotate(45deg) translateY(120vh); }
}

.strength-slider {
  position: relative;
  width: 100%;
  max-width: 500px;      
  aspect-ratio: 5 / 8;   
  overflow: hidden;
  margin: 40px auto 0 auto;  
  border-radius: 30px;
  background: #fff;
  box-shadow: 0 4px 28px rgba(100,100,110,0.13);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  min-height: 0;
}

.slide {
  display: none;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.slide.active {
  display: flex;
}

.prev-btn { left: 0; }
.next-btn { right: 0; }

.strength-slides-wrapper {
  display: flex;
  transition: transform 0.5s cubic-bezier(.4,0,.2,1);
  width: 100%;
  height: 100%;
}
.strength-slides-wrapper .slide {
  min-width: 100%;
  box-sizing: border-box;
  display: flex;    
  flex-direction: column;
}/* ここからホームページ制作のページ */

body.page-id-1585 {
  background-color: #eeeeee !important;
}/* スマホ対応 *//* 吹き出し *//* 太めの切り取り線 *//* 縦並びの説明テキストと縦線 *//* 3つ横並びの特徴カード *//* レスポンシブ */
.company-name {
  font-weight: bold;
  color: #3088d3;
}/* 目的別の投稿ページのレイアウト *//* ヒーローセクション *//* パンくずリスト */

.breadcrumb {
  padding: 0 4vw 0 4vw;
  font-size: 1.04rem;
	line-height: 0.1; 
}/* メインセクション *//* 目的ボックス *//* チェックリスト *//* スマホ対応 *//* タイトル下線の点線 *//* ===== クリップボード背景 ===== *//* ===== クリップ部分 ===== *//* ===== チェックリストの白紙部分 ===== *//* ===== タイトル ===== *//* ===== 強調下線 ===== *//* ===== チェックリスト ===== *//* 若手集客のページ */

.arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: #bbb;
  min-width: 32px;
}/* 採用ページ *//* セクション全体 *//* 強調 *//* ポイント枠 *//* ================================
   App開発ページ用 Hero
   （ホームページ制作と同一レイアウト）
================================ *//* 既存の .hero-section-app レイアウトはそのまま（背景指定は削除してOK） *//* オーバーレイ（読みやすさ用） *//* スライド土台 *//* 各スライド共通（背景として挿入） *//* 画像URLはCSSで指定（ここだけ差し替えればOK） *//* 再生タイミング（3枚なら等間隔で遅延） *//* 1枚目：通常フェード（ブラーなし） *//* 2・3枚目：ぼかしながら登場 *//* === キーフレーム === *//* 通常フェード（1枚目用） */

@keyframes fadeCycleNoBlur {
  0%   { opacity: 0; }
  5%   { opacity: 1; }
  28%  { opacity: 1; }
  33%  { opacity: 0; }
  100% { opacity: 0; }
}/* ぼかし→シャープでフェード（2・3枚目用） */

@keyframes fadeCycleBlur {
  0%   { opacity: 0; filter: blur(16px); transform: scale(1.02); }
  5%   { opacity: 1; filter: blur(10px); transform: scale(1.015); }
  20%  { opacity: 1; filter: blur(0);   transform: scale(1); }
  28%  { opacity: 1; filter: blur(0); }
  33%  { opacity: 0; filter: blur(0); }
  100% { opacity: 0; filter: blur(0); }
}/* 低速端末やユーザー設定で動きを抑制 *//* もしimgで背景を重ねたい場合に使用（任意） *//* H1 *//* H2 *//* H3枠 *//* ================================
   レスポンシブ（必要に応じて調整）
================================ *//* =========================
   SaCの強み：1カラム新ベース（v2）
   ※ テーマCSSの後に読み込み
========================= *//* 外枠をフルブリードに *//* 変数はここ1か所に集約（数値は現状キープ） *//* 本文（前面に固定） *//* 背面 “Feature” *//* タイトル（グラデ文字＋バー） *//* ピルメニュー *//* 右上の円形マスク画像 *//* ピンクのブロブ（模様1） *//* 水色のブロブ（模様2）— 右下アンカーを inset で一元化 *//* ワイド調整（既存） *//* スマホ調整（既存） *//* keyframes */

@keyframes maskMorph{
  0%{clip-path:ellipse(50% 50% at 50% 50%);}
  100%{clip-path:ellipse(85% 85% at 87% 15%);}
}
@keyframes gradientFlow{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}
@keyframes blobFloat{
  0%{transform:rotate(-6deg) translate(0,0) scale(1);}
  50%{transform:rotate(-4deg) translate(10px,-8px) scale(1.02);}
  100%{transform:rotate(-6deg) translate(0,0) scale(1);}
}
@keyframes blobFloat2{
  0%{transform:rotate(var(--blob2-rotate)) translate(0,0) scale(1);}
  50%{transform:rotate(calc(var(--blob2-rotate) + 2deg)) translate(-8px,8px) scale(1.02);}
  100%{transform:rotate(var(--blob2-rotate)) translate(0,0) scale(1);}
}/* 動き抑制 *//* そのほか（既存） */
:root{ --header-h:100px; }
:target{ scroll-margin-top:var(--header-h); }
html{ scroll-behavior:smooth; }/* ====== 中央基準レイアウト（PCのみ） ====== *//* ====== スマホは従来レイアウト（縦並び） ====== *//* ================================
   完全修正版CSS - WordPressに貼り付け可能
   水色背景はそのまま、ピンク背景の重複を完全解決
================================ *//* CSS変数の定義 */

:root {
  --aqua-bleed-overlap: clamp(80px, 10vw, 160px);   /* 水色用 */
  --pink-bleed-overlap: clamp(120px, 15vw, 200px);  /* ピンク用 */
}/* ================================
   SaCの強みページ：ABOUT US セクション
================================ *//* パンくず *//* ABOUT US 詳細セクション *//* ===== SaCが選ばれる理由（Reason）：ピンク背景版 ===== *//* ===== Reason 02: 豊富な実績（左上アクア背景）===== *//* 青い背景（左上配置）- 水色背景の既存コードをそのまま維持 *//* サポート用のバッジスタイル *//* 強調色 *//* セクション間隙間調整 *//* ================================
   SaCが選ばれる理由セクション用ヘッダー
================================ *//* Reasonセクション用のヘッダー *//* Reasonセクションとの接続調整 *//* 背景装飾の調整（控えめに） *//* 中央の縦ラインを非表示 *//* レスポンシブ調整 *//* ===== Next セクション ===== *//* ===== ヘッダー部分 ===== *//* ===== カードレイアウト ===== *//* CONTACT カード（ピンク） *//* ENTRY カード（ブルー） *//* ===== カードコンテンツ ===== *//* ===== 装飾イラスト ===== *//* CONTACT カードの人物イラスト *//* ENTRY カードのワークスペースイラスト *//* ===== 背景装飾 ===== *//* ===== レスポンシブ ===== *//* 変数はここ1か所に集約（数値は現状キープ） *//* 本文（前面に固定） *//* 背面 "Feature" を "Company" に変更 *//* タイトル（グラデ文字＋バー） *//* ピルメニュー *//* 右上の円形マスク画像 *//* ピンクのブロブ（模様1） *//* 水色のブロブ（模様2）— 右下アンカーを inset で一元化 *//* ワイド調整（既存） *//* スマホ調整（既存） *//* keyframes */

@keyframes maskMorph{
  0%{clip-path:ellipse(50% 50% at 50% 50%);}
  100%{clip-path:ellipse(85% 85% at 87% 15%);}
}
@keyframes gradientFlow{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}
@keyframes blobFloat{
  0%{transform:rotate(-6deg) translate(0,0) scale(1);}
  50%{transform:rotate(-4deg) translate(10px,-8px) scale(1.02);}
  100%{transform:rotate(-6deg) translate(0,0) scale(1);}
}
@keyframes blobFloat2{
  0%{transform:rotate(var(--blob2-rotate)) translate(0,0) scale(1);}
  50%{transform:rotate(calc(var(--blob2-rotate) + 2deg)) translate(-8px,8px) scale(1.02);}
  100%{transform:rotate(var(--blob2-rotate)) translate(0,0) scale(1);}
}/* 動き抑制 *//* そのほか（既存） */
:root{ --header-h:100px; }
:target{ scroll-margin-top:var(--header-h); }
html{ scroll-behavior:smooth; }/* ====== 中央基準レイアウト（PCのみ） ====== *//* ====== スマホは従来レイアウト（縦並び） ====== *//* メインセクション *//* =================================
   背景装飾
================================= *//* ピンクの大きな円形（左上） *//* 水色の円形（右上） *//* 小さなピンクの円（右下） *//* 装飾ライン *//* ドット装飾 */

.dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  opacity: 0.3;
}/* =================================
   メインコンテンツ
================================= *//* タブインジケーター *//* メインタイトル *//* サブタイトル *//* ミッションテキスト *//* =================================
   レスポンシブ対応
================================= *//* =================================
   アニメーション（アクセシビリティ考慮）
================================= */

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scaleX(0);
  }
  to {
    opacity: 1;
    transform: scaleX(1);
  }
}/* =================================
   パンくずリスト
================================= *//* レスポンシブ対応 *//* メインセクション - 全幅表示 *//* =================================
   背景装飾
================================= *//* Company Profile専用ドット装飾 *//* 装飾図形 *//* =================================
   メインコンテンツ
================================= *//* メインタイトル *//* =================================
   会社情報テーブル
================================= *//* テーブルコンテンツ内のリストコンテナ *//* リスト項目 *//* =================================
   レスポンシブ対応
================================= *//* =================================
   アニメーション（アクセシビリティ考慮）
================================= */

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-15px);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}/* メインセクション - 全幅表示 *//* =================================
   メインコンテンツ
================================= *//* メインタイトル *//* =================================
   タイムライン
================================= *//* =================================
   レスポンシブデザイン
================================= *//* =================================
   アニメーション（アクセシビリティ考慮）
================================= */

@media (prefers-reduced-motion: no-preference) 
  
  .history-title {
    animation: fadeInUp 1s ease-out;
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}/* =================================
   Access Section Styles
================================= *//* リセット */

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

body {
  font-family: 'Noto Sans JP', 'Inter', sans-serif;
  line-height: 1.6;
}/* メインセクション - 全幅表示 *//* =================================
   Access専用背景装飾
================================= *//* Access専用背景図形 *//* Access専用装飾ライン *//* Access専用ドット装飾 *//* =================================
   メインコンテンツ
================================= *//* メインタイトル *//* =================================
   Googleマップ
================================= *//* =================================
   住所・交通アクセス情報
================================= */

.address {
  font-size: 1.1rem;
  font-weight: 600;
  color: #34495e;
  padding: 15px 20px;
  background: linear-gradient(135deg, rgba(74, 144, 226, 0.05), rgba(135, 206, 235, 0.05));
  border-radius: 12px;
  border-left: 4px solid #4a90e2;
  text-align: center;
  letter-spacing: 0.02em;
}/* 交通情報 *//* =================================
   レスポンシブデザイン
================================= */

@media (max-width: 480px) {
  
  .address {
    font-size: 1rem;
    padding: 12px 15px;
  }}/* =================================
   アニメーション（アクセシビリティ考慮）
================================= */

@keyframes accessFloat {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-15px);
  }
}

@keyframes accessFadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes accessSlideInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}/* 変数はここ1か所に集約（数値は現状キープ） *//* 本文（前面に固定） *//* 背面 "Feature" を "Company" に変更 *//* タイトル（グラデ文字＋バー） *//* ピルメニュー *//* 右上の円形マスク画像 *//* ピンクのブロブ（模様1） *//* 水色のブロブ（模様2）— 右下アンカーを inset で一元化 *//* ワイド調整（既存） *//* スマホ調整（既存） *//* keyframes */

@keyframes maskMorph{
  0%{clip-path:ellipse(50% 50% at 50% 50%);}
  100%{clip-path:ellipse(85% 85% at 87% 15%);}
}
@keyframes gradientFlow{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}
@keyframes blobFloat{
  0%{transform:rotate(-6deg) translate(0,0) scale(1);}
  50%{transform:rotate(-4deg) translate(10px,-8px) scale(1.02);}
  100%{transform:rotate(-6deg) translate(0,0) scale(1);}
}
@keyframes blobFloat2{
  0%{transform:rotate(var(--blob2-rotate)) translate(0,0) scale(1);}
  50%{transform:rotate(calc(var(--blob2-rotate) + 2deg)) translate(-8px,8px) scale(1.02);}
  100%{transform:rotate(var(--blob2-rotate)) translate(0,0) scale(1);}
}/* 動き抑制 *//* そのほか（既存） */
:root{ --header-h:100px; }
:target{ scroll-margin-top:var(--header-h); }
html{ scroll-behavior:smooth; }/* ====== 中央基準レイアウト（PCのみ） ====== *//* ====== スマホは従来レイアウト（縦並び） ====== *//* ========================================
   Service.01 ページ - 完全新規CSS
======================================== *//* リセット & 基本設定 */

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

body {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium", "Meiryo", sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #ffffff;
  overflow-x: hidden;
}/* ========================================
   メインセクション（全幅）
======================================== *//* ========================================
   背景装飾
======================================== *//* 背景図形 *//* 装飾ライン *//* ドット装飾 */

.dot {
  position: absolute;
  width: 6px;
  height: 6px;
  background: #ff69b4;
  border-radius: 50%;
  opacity: 0.5;
  animation: twinkle-soft 4s ease-in-out infinite;
}/* ========================================
   コンテンツコンテナ
======================================== *//* ========================================
   ヘッダーセクション
======================================== *//* ========================================
   メインコンテンツ
======================================== *//* 左側: 画像エリア */

.office-image {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* アスペクト比を保ちながらフィット */
  object-position: center;
  transform: scale(1.2);   /* 1.2倍に拡大して画面外まで */
}/* 右側: テキストコンテンツ *//* VIEW MOREボタン *//* 右側: テキストコンテンツ *//* ポイントラベル *//* メインタイトル *//* 説明文 *//* サービスボックス *//* ========================================
   アニメーション
======================================== */

@keyframes float-gentle {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  33% {
    transform: translateY(-15px) rotate(120deg);
  }
  66% {
    transform: translateY(8px) rotate(240deg);
  }
}

@keyframes rotate-slow {
  from {
    transform: rotate(25deg);
  }
  to {
    transform: rotate(385deg);
  }
}

@keyframes pulse-gentle {
  0%, 100% {
    opacity: 0.2;
    transform: rotate(-15deg) scale(1);
  }
  50% {
    opacity: 0.4;
    transform: rotate(-15deg) scale(1.03);
  }
}

@keyframes twinkle-soft {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.1);
  }
}/* ========================================
   レスポンシブデザイン
======================================== *//* =================================
   基本設定とグローバル修正
================================= *//* CSS変数による管理（メンテナンス性向上） */

:root {
  --header-height-pc: 100px;
  --header-height-mobile: 70px;
  --container-max-width: 1200px;
  --mobile-padding: clamp(15px, 4vw, 25px);
  --section-padding: clamp(40px, 8vw, 100px);
}/* 100vh問題の根本的解決 */

html, body {
  height: 100%;
  min-height: 100vh;
  min-height: 100svh; /* iOS 15+ */
  min-height: 100dvh; /* Chrome 108+ */
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}/* ボックスモデルの統一 */

*, *::before, *::after {
  box-sizing: border-box;
}/* レスポンシブメディアの基本設定 */

img, video, canvas, svg {
  max-width: 100%;
  height: auto;
  display: block;
}/* ヘッダー高さの動的調整 */

body {
  padding-top: var(--header-height-pc);
}

@media (max-width: 768px) {
  body {
    padding-top: var(--header-height-mobile);
  }}/* =================================
   ヘッダーの完全レスポンシブ化
================================= */

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(12px, 3vw, 20px) clamp(16px, 4vw, 30px);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background-color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.header-logo img {
  height: clamp(45px, 8vw, 80px);
  width: auto;
  transition: height 0.3s ease;
}/* PC用ナビゲーション */

@media (min-width: 1025px) {
  .header-menu-wrapper {
    display: flex;
    align-items: center;
    gap: clamp(20px, 3vw, 40px);
    background-color: #ffffff;
    border-radius: 100px;
    padding: 10px clamp(20px, 3vw, 30px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  }
  
  .hamburger-menu {
    display: none;
  }}/* モバイル用ハンバーガーメニュー */

@media (max-width: 1024px) {
  .header-menu-wrapper {
    display: none !important;
  }
  
  .hamburger-menu {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 22px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 10001;
  }
  
  .hamburger-menu span {
    display: block;
    height: 3px;
    width: 100%;
    background-color: #003040;
    border-radius: 2px;
    transition: all 0.3s ease;
  }/* ハンバーガーメニューのアニメーション */
  
  
  body.menu-open .hamburger-menu span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  
  body.menu-open .hamburger-menu span:nth-child(2) {
    opacity: 0;
  }
  
  body.menu-open .hamburger-menu span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }}/* モバイルドロワーメニュー */

.mobile-drawer {
  position: fixed;
  top: 0;
  right: -100%;
  width: min(320px, 85vw);
  height: 100vh;
  height: 100svh; /* 100vh問題対策 */
  background-color: white;
  z-index: 9999;
  transition: right 0.3s ease;
  overflow-y: auto;
  box-shadow: -4px 0 15px rgba(0, 0, 0, 0.1);
  padding: 80px 24px 24px;
}

.mobile-drawer.active {
  right: 0;
}/* =================================
   ヒーローセクションの最適化
================================= *//* PC版（1025px以上）は既存デザイン維持 */

@media (min-width: 1025px) {
  
  .hero-left {
    flex: 1 1 60%;
    padding-right: 40px;
  }}/* タブレット・スマホ（1024px以下）完全最適化 */

@media (max-width: 1024px) {/* モバイルでは画像を上、テキストを下に */
  
  .hero-left {
    order: 2 !important;
    width: 100% !important;
    max-width: 500px !important;
    padding: 0 var(--mobile-padding) !important;
    text-align: center !important;
  }/* スライドショーの最適化 *//* テキスト要素の最適化 *//* ボタンの最適化 */}/* =================================
   各セクションのレスポンシブ最適化
================================= *//* About Usセクション *//* サービスセクション *//* 強みセクション */

@media (max-width: 1024px) {
  
  .strength-slider {
    max-width: min(400px, 90vw);
    margin: clamp(20px, 4vw, 40px) auto 0;
  }}/* 会社セクション *//* =================================
   フッターの最適化
================================= *//* =================================
   アクセシビリティとパフォーマンス
================================= *//* 動きを抑制するユーザー向け *//* ハイコントラストモード対応 *//* タッチデバイス対応 */

@media (hover: none) and (pointer: coarse) {.contact-button,
.recrui-button,
.hamburger-menu {
    min-height: 44px;
    min-width: 44px;
  }}/* =================================
   WordPressテーマ競合の回避
================================= *//* 特定ページでのヘッダー非表示 */

.page-id-38 .header-container,
.page-id-40 .header-container {
  display: none !important;
}

.page-id-38 body,
.page-id-40 body {
  padding-top: 0 !important;
}/* WordPress画像ブロックの最適化 */

.wp-block-image img {
  height: auto;
  max-width: 100%;
}

.wp-block-embed {
  aspect-ratio: 16 / 9;
  width: 100%;
}

.wp-block-embed iframe,
.wp-block-embed video {
  width: 100%;
  height: 100%;
}/* エラーとなる記述の修正 *//* =================================
   よくある崩れの即効修正パック
================================= *//* 1. ヒーローセクションの固定マージン問題（スマホ・タブレット） *//* 2. ヘッダー高さの統一 */

:root { 
  --header-height-pc: 100px; 
  --header-height-mobile: 65px; 
}

@media (max-width: 768px) {
  body { 
    padding-top: var(--header-height-mobile) !important; 
  }}/* 3. フッターの横スクロール防止 */

@media (max-width: 1024px) {
  
  body::after { 
    display: none !important; 
  }}/* 4. 全幅セクションの内側余白調整 *//* 5. モバイルドロワーの高さ安定化 */

.mobile-drawer {
  height: 100dvh;
  height: 100svh; /* iOS対応 */
}/* 6. 横スクロール原因の除去 */

img, video, iframe { 
  max-width: 100% !important; 
}/* 7. Z-index階層の整理 */

.mobile-menu-overlay { z-index: 10000; }
.mobile-drawer { z-index: 10001; }
.header-container { z-index: 9999; }