@charset "utf-8";

/* ==========================================================================
   1. リセット & 共通基本設定（フォント：Meiryo UI のみ）
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
}

body, h1, h2, h3, h4, p, ul, ol, li, a, span, div, section, header, footer {
  margin: 0;
  padding: 0;
  font-family: "Meiryo UI", sans-serif !important; /* フォントを完全に固定 */
}

body {
  color: #333333;
  background-color: #ffffff;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

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

a:hover {
  opacity: 0.8;
}

/* 共通コンテナ */
.c-container {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ==========================================================================
   2. ヘッダー（l-header） 👉 ロゴサイズを綺麗に大きく固定
   ========================================================================== */
.l-header {
  width: 100%;
  background-color: #ffffff;
  color: #333333;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  position: relative;
  z-index: 100;
}

.l-header__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.l-header__logo a {
  display: flex;
  align-items: center;
}

.l-header__logo img {
  height: 60px !important; /* 小さくならないようにサイズを保証 */
  width: auto !important;
  min-height: 60px !important;
  object-fit: contain !important;
}

.l-header__menu {
  display: flex;
  list-style: none;
  gap: 30px;
}

.l-header__menu a {
  font-size: 18px;
  font-weight: normal; /* 💡 bold（太字）から normal（標準）に変更してサブページと統一 */
  letter-spacing: 0.05em;
  color: #0d2b5c;
  padding: 8px 0;
  position: relative;
}

.l-header__menu a.-active::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #0077e6;
}

/* ==========================================================================
   3. メインビジュアル（p-hero） 👉 文字位置・白文字を完全に固定
   ========================================================================== */
.p-hero {
  /* 背景色はパンフレットの濃紺、画像は右寄せでクリアに表示 */
  background-color: #0d2b5c !important; 
  background-image: url('images/tokyoandnetwork.jpg') !important;
  background-repeat: no-repeat !important;
  background-position: right center !important; 
  background-size: cover !important;
  
  /* 領域のサイズ設定 */
  width: 100% !important;
  padding: 160px 0 120px !important;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* 💡 文字が左端に寄るのを防ぎ、元のきれいな位置に固定する設定 */
.p-hero__inner {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 2;
  text-align: left; /* 左寄せ（コンテナ内での左寄せ） */
}

/* 💡 サブタイトル（英語）の色を明るいブルーに固定 */
.p-hero__sub {
  display: block;
  font-size: 15px;
  font-weight: bold;
  color: #0077e6 !important; /* M&Eブルー */
  letter-spacing: 0.2em;
  margin-bottom: 15px;
}

/* 💡 メインのキャッチコピーを「完全な白文字」に強制固定 */
.p-hero__title {
  font-size: 38px;
  font-weight: bold;
  color: #ffffff !important; /* 👈 絶対に白文字にする */
  line-height: 1.5;
  margin-bottom: 35px;
}

.p-hero__actions {
  display: flex;
  gap: 20px;
}

/* ==========================================================================
   4. 共通パーツ・ボタン
   ========================================================================== */
.p-home-section {
  padding: 90px 0;
}

.c-section-title-box {
  text-align: center;
  margin-bottom: 50px;
}

.c-section-title-sub {
  font-size: 13px;
  font-weight: bold;
  color: #0077e6;
  letter-spacing: 0.15em;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.c-section-title {
  font-size: 28px;
  font-weight: bold;
  color: #0d2b5c;
}

.c-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 35px;
  font-size: 15px;
  font-weight: bold;
  border-radius: 4px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.c-button.-primary {
  background-color: #0077e6;
  color: #ffffff;
  border: none;
}
.c-button.-primary:hover {
  background-color: #005cb8;
}

.c-button.-outline {
  background-color: transparent;
  color: #ffffff;
  border: 2px solid #ffffff;
}
.c-button.-outline:hover {
  background-color: #ffffff;
  color: #0d2b5c;
}

.c-tag {
  display: inline-block;
  background-color: #0077e6;
  color: #ffffff;
  font-size: 11px;
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 3px;
}

/* ==========================================================================
   5. 企業理念（Philosophy）
   ========================================================================== */
.-philosophy {
  background-color: #ffffff;
}

.p-philosophy-lead {
  text-align: center;
  font-size: 16px;
  color: #555555;
  margin-bottom: 50px;
  line-height: 1.8;
}

.p-philosophy-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.p-philosophy-card {
  background-color: #f4f8fc;
  padding: 40px;
  border-radius: 8px;
  position: relative;
}

.p-philosophy-card__num {
  font-size: 44px;
  font-weight: bold;
  color: rgba(0, 111, 230, 0.08);
  position: absolute;
  top: 20px;
  right: 30px;
}

.p-philosophy-card h3 {
  font-size: 20px;
  color: #0d2b5c;
  margin-bottom: 15px;
}

.p-philosophy-card h3 small {
  display: block;
  font-size: 13px;
  color: #0077e6;
  margin-top: 4px;
}

.p-philosophy-card p {
  font-size: 14px;
  color: #444444;
  text-align: justify;
}

/* ==========================================================================
   6. 事業内容（Services）
   ========================================================================== */
.-services {
  background-color: #f4f8fc;
}

.p-service-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-bottom: 40px;
}

.p-service-card {
  background-color: #ffffff;
  padding: 35px;
  border-radius: 8px;
  border: 1px solid #e1ecf7;
}

.p-service-card__head {
  margin-bottom: 15px;
}

.p-service-card__cat {
  font-size: 11px;
  color: #0077e6;
  font-weight: bold;
}

.p-service-card h3 {
  font-size: 19px;
  color: #0d2b5c;
}

.p-service-card__desc {
  font-size: 14px;
  color: #555555;
  margin-bottom: 20px;
  text-align: justify;
}

.p-service-card__tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.p-service-card__tags li {
  font-size: 12px;
  background-color: #f0f4f8;
  color: #0d2b5c;
  padding: 4px 10px;
  border-radius: 4px;
}

.p-home-section__action {
  text-align: center;
}

/* ==========================================================================
   7. グローバルネットワーク（Network） 👉 3つの拠点をきれいな均等横並びに
   ========================================================================== */
.-network {
  background-color: #ffffff;
}

.p-network-3col-grid {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  gap: 30px !important;
  width: 100% !important;
  flex-wrap: nowrap !important;
}

.p-network-office-card {
  flex: 1 !important;
  width: 31% !important;
  background-color: #f4f8fc; /* ほんのり背景色をつけてカード風にしておさまりを良くします */
  padding: 30px 25px !important;
  border-radius: 8px !important;
  border-left: 4px solid #0077e6; /* M&Eのアクセントカラーの線を左側に */
}

.p-network-office-card h4 {
  font-size: 12px;
  color: #0077e6;
  margin-bottom: 8px;
  font-weight: bold;
  letter-spacing: 0.05em;
}

.p-network-office-card__name {
  font-size: 17px;
  color: #0d2b5c;
  font-weight: bold;
  margin-bottom: 12px;
}

.p-network-office-card__address {
  font-size: 13.5px;
  color: #555555;
  line-height: 1.6;
}

/* ==========================================================================
   8. 採用情報バナー 👉 テキストとボタンの重なりを完全に解消
   ========================================================================== */
.p-home-career-banner {
  background-color: #ffffff;
  padding: 30px 0 80px 0;
}

.p-home-career-banner__box {
  background-color: #0d2b5c;
  padding: 40px 50px;
  border-radius: 8px;
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 40px !important;
}

.p-home-career-banner__content {
  flex: 1 !important;
  min-width: 0 !important;
  text-align: left !important;
}

.p-home-career-banner__content h3 {
  font-size: 22px;
  margin: 10px 0 15px 0;
  font-weight: bold;
  color: #ffffff;
}

.p-home-career-banner__content p {
  font-size: 14px;
  color: #e0e6ed;
}

.p-home-career-banner__action {
  flex-shrink: 0 !important;
}

.p-home-career-banner__action .c-button {
  white-space: nowrap !important;
  padding: 15px 40px !important;
}

/* ==========================================================================
   9. 私たちの強み（STRENGTH） 👉 白いカードを綺麗な横並びに固定
   ========================================================================== */
.p-strength {
  background-color: #f4f8fc !important;
  padding: 90px 0;
  display: block;
  clear: both;
}

.p-strength-grid {
  display: flex !important;
  flex-direction: row !important; /* PCでは必ず横並び */
  justify-content: space-between !important;
  gap: 25px !important;
  width: 100% !important;
  flex-wrap: nowrap !important;
}

.p-strength-card {
  display: block !important;
  background-color: #ffffff !important;
  padding: 40px 25px !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 20px rgba(13, 43, 92, 0.05) !important;
  text-align: center !important;
  flex: 1 !important;
  width: 31% !important;
}

.p-strength-card__icon {
  margin-bottom: 20px;
}

.p-strength-card__icon .-number {
  font-size: 28px;
  font-weight: bold;
  color: #0077e6;
  background-color: #e6f2fc;
  width: 60px;
  height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.p-strength-card__title {
  font-size: 17px;
  color: #0d2b5c;
  font-weight: bold;
  margin-bottom: 15px;
}

.p-strength-card__text {
  font-size: 13.5px;
  color: #555555;
  line-height: 1.65;
  text-align: justify;
}

/* ==========================================================================
   10. フッター
   ========================================================================== */
.l-footer {
  background-color: #0d2b5c;
  color: #ffffff;
  padding: 60px 0 30px;
  font-size: 14px;
  display: block;
  clear: both;
}

.l-footer__container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}

.l-footer__nav {
  display: flex;
  justify-content: center;
  gap: 25px;
  list-style: none;
  margin-bottom: 30px;
}

.l-footer__nav a {
  font-weight: bold;
  color: #ffffff;
}

.l-footer__logo {
  margin-bottom: 30px;
  display: flex;
  justify-content: center;
}

.l-footer__logo img {
  background-color: transparent;
  max-height: 55px;
  width: auto;
}

.l-footer__sub-nav {
  display: flex;
  justify-content: center;
  gap: 25px;
  list-style: none;
  font-size: 12px;
  color: #b0c4de;
  margin-bottom: 20px;
}

.l-footer__copyright {
  font-size: 12px;
  color: #879cb5;
}

/* ==========================================================================
   11. レスポンシブ対応（スマホ表示のときだけ縦並びにする設定）
   ========================================================================== */
@media screen and (max-width: 960px) {
  .p-strength-grid {
    flex-direction: column !important;
    gap: 20px !important;
  }
  .p-strength-card {
    width: 100% !important;
  }
  .p-network-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .p-home-career-banner__box {
    flex-direction: column !important;
    text-align: center !important;
    gap: 20px !important;
    padding: 30px 20px;
  }
  .p-home-career-banner__content {
    text-align: center !important;
  }
}

@media screen and (max-width: 960px) {
  /* 既存の強みなどの設定に加えて、以下を追記または上書きしてください */
  .p-network-3col-grid {
    flex-direction: column !important;
    gap: 20px !important;
  }
  .p-network-office-card {
    width: 100% !important;
  }
}

@media screen and (max-width: 768px) {
  .p-philosophy-grid,
  .p-service-grid {
    grid-template-columns: 1fr;
  }

  .p-hero__title {
    font-size: 28px;
  }
  
  .l-header__container {
    flex-direction: column;
    gap: 15px;
  }

  .l-footer__nav,
  .l-footer__sub-nav {
    flex-direction: column;
    gap: 12px;
  }
}

/* ==========================================================================
   【完全版】2段組の新ロゴをヘッダーいっぱいに超大型化する設定
   ========================================================================== */
/* 💡 ロゴの大きさに合わせて、ヘッダー全体の高さをゆったり広げます */
.l-header__container {
  height: 110px !important; /* 元の高さから拡張して窮屈さを解消 */
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* 💡 ロゴを囲むエリア自体の制限を解除 */
.l-header__logo {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  padding: 10px 0 !important; /* 上下に上品な余白を確保 */
}

.l-header__logo a {
  display: block !important;
  height: 100% !important;
}

/* 💡 2段組ロゴが最高に引き立つジャストサイズに固定 */
.l-header__logo img {
  height: 90px !important; /* 👈 65pxから90pxへ大幅に引き上げ！ */
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  transform: translateZ(0);
}

/* ナビゲーションメニューの縦位置も自動的に中央に揃えます */
.l-header__nav {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
}

/* ==========================================================================
   【完全修正版】新ロゴをはみ出させず、上下に美しい余白を作る設定
   ========================================================================== */
/* 💡 ロゴの巨大化に合わせて、ヘッダー自体の高さを140pxまで大胆に広げます */
.l-header__container {
  height: 140px !important; /* 👈 はみ出しを完全に防ぐ十分な高さを確保 */
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* 💡 ロゴエリアのパディングを微調整し、完全に上下中央に配置 */
.l-header__logo {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  padding: 0 !important; 
}

.l-header__logo a {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
}

/* 💡 迫力のある90pxサイズを維持したまま、はみ出しを解消 */
.l-header__logo img {
  height: 90px !important; 
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  transform: translateZ(0);
  margin-top: 0 !important; /* マイナス調整をリセット */
}

/* 右側のメニューも、広がったヘッダーの「完全な縦中央」に自動で同期させます */
.l-header__nav {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
}

/* ==========================================================================
   【完全修正版】PC版の不要チェックボックス排除 ＆ スマホ表示の最適化（ホーム用）
   ========================================================================== */

/* 1. PC版ではスマホ用のトグルスイッチを完全に隠す */
.l-header__toggle-input,
.l-header__toggle-button {
  display: none !important;
}

/* 2. スマートフォン環境（画面幅767px以下）での表示 */
@media screen and (max-width: 767px) {
  .l-header__container {
    height: 80px !important;
    padding: 0 20px !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  .l-header__logo img {
    height: 50px !important;
    width: auto !important;
    margin-top: 0 !important;
  }

  .l-header__toggle-button {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    width: 26px !important;
    height: 18px !important;
    cursor: pointer !important;
    z-index: 1010 !important;
  }

  .l-header__toggle-button span {
    display: block !important;
    width: 100% !important;
    height: 2px !important;
    background-color: #0d2b5c !important;
    transition: all 0.3s ease !important;
  }

  .l-header__nav {
    position: fixed !important;
    top: -100% !important;
    left: 0 !important;
    width: 100% !important;
    background-color: rgba(255, 255, 255, 0.98) !important;
    padding: 100px 20px 30px !important;
    box-shadow: 0 4px 15px rgba(13, 43, 92, 0.1) !important;
    transition: all 0.4s ease !important;
    z-index: 1005 !important;
    display: block !important;
  }

  .l-header__menu {
    flex-direction: column !important;
    align-items: center !important;
    gap: 15px !important;
  }

  .l-header__menu a {
    font-size: 16px !important;
    color: #0d2b5c !important;
    padding: 10px 0 !important;
    font-weight: bold !important;
  }

  .l-header__toggle-input:checked ~ .l-header__nav {
    top: 0 !important;
  }

  .l-header__toggle-input:checked ~ .l-header__toggle-button span:nth-child(1) {
    transform: translateY(8px) rotate(45deg) !important;
  }
  .l-header__toggle-input:checked ~ .l-header__toggle-button span:nth-child(2) {
    opacity: 0 !important;
  }
  .l-header__toggle-input:checked ~ .l-header__toggle-button span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg) !important;
  }

  /* フッター美化 */
  .l-footer__container {
    padding: 30px 20px !important;
  }
  .l-footer__nav, 
  .l-footer__sub-nav {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
  }
  .l-footer__nav a,
  .l-footer__sub-nav a {
    font-size: 14px !important;
    text-align: center !important;
  }
  .l-footer__logo {
    margin: 20px 0 !important;
    text-align: center !important;
  }
  .l-footer__logo img {
    height: 40px !important;
    width: auto !important;
  }
}

/* ==========================================================================
   ヘッダー最上部：トップバー（Pマーク・個人情報保護規定）の設定
   ========================================================================== */
.l-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #ffffff;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
  z-index: 100;
}

.l-header__topbar {
  background-color: #f4f8ff; 
  border-bottom: 1px solid #e1ecf7;
  padding: 6px 0;
}

.l-header__topbar-container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  justify-content: flex-end; /* 右寄せ */
  align-items: center;
}

/* 個人情報保護規定の文字リンク（Pマークと一体化） */
.l-header__toplink {
  font-size: 12px;
  color: #555555;
  font-weight: 500;
  display: flex;
  align-items: center; /* Pマークと文字の縦中心を揃える */
  gap: 6px; /* Pマークと文字の間の隙間 */
  transition: opacity 0.3s ease;
}

.l-header__toplink:hover {
  opacity: 0.8;
}

/* 👈 【新設】CSSで描く赤い角丸のPマーク */
.c-icon-p {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 16px;
  background-color: #e60012; /* 鮮やかな赤（プライバシーマーク基調） */
  color: #ffffff !important; /* 白文字 */
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  border-radius: 3px; /* 絶妙な丸みの角丸 */
  line-height: 1;
}

/* ヘッダー全体の余白微調整 */
.l-header__container {
  padding: 10px 40px !important;
}

/* ==========================================================================
   【完全決定版】HTML書き換え不要！スマホ専用スタイリッシュメニュー（ホーム用）
   ========================================================================== */

.l-header__toggle-input,
.l-header__toggle-button {
  display: none !important;
}

@media screen and (max-width: 767px) {
  .l-header__container {
    height: 75px !important;
    padding: 0 20px !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    position: relative !important;
  }

  .l-header__logo img {
    height: 44px !important;
    width: auto !important;
    margin-top: 0 !important;
  }

  .l-header__nav {
    position: relative !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
  }

  .l-header__menu {
    position: fixed !important;
    top: 75px !important;
    left: 0 !important;
    width: 100% !important;
    height: 0 !important;
    background-color: rgba(13, 43, 92, 0.98) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    transition: cubic-bezier(0.4, 0, 0.2, 1) 0.35s !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
    z-index: 9999 !important;
  }

  .l-header__menu li {
    width: 100% !important;
    text-align: center !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    opacity: 0 !important;
    transition: opacity 0.2s ease !important;
  }

  .l-header__menu a {
    display: block !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    padding: 18px 0 !important;
    letter-spacing: 0.1em !important;
    width: 100% !important;
  }

  .l-header__menu a.-active {
    background-color: rgba(0, 119, 230, 0.15) !important;
    color: #0077e6 !important;
    border-left: 4px solid #0077e6 !important;
  }
  .l-header__menu a.-active::after { display: none !important; }

  .l-header__nav::before {
    content: "MENU ☰" !important;
    display: inline-block !important;
    color: #0d2b5c !important;
    font-size: 14px !important;
    font-weight: bold !important;
    letter-spacing: 0.05em !important;
    border: 1.5px solid #0d2b5c !important;
    padding: 6px 14px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
  }

  .l-header__nav:active .l-header__menu,
  .l-header__nav:hover .l-header__menu {
    height: 310px !important;
    padding: 10px 0 !important;
  }
  
  .l-header__nav:active .l-header__menu li,
  .l-header__nav:hover .l-header__menu li {
    opacity: 1 !important;
  }

  /* フッター整形 */
  .l-footer__container {
    padding: 40px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  .l-footer__nav, 
  .l-footer__sub-nav {
    flex-direction: column !important;
    align-items: center !important;
    gap: 14px !important;
    margin-bottom: 20px !important;
    width: 100% !important;
  }
  .l-footer__nav a {
    font-size: 14.5px !important;
    color: #ffffff !important;
    display: block !important;
    padding: 6px 0 !important;
    width: 100% !important;
    max-width: 260px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    text-align: center !important;
  }
  .l-footer__sub-nav a {
    font-size: 12.5px !important;
    color: #b0c4de !important;
    line-height: 1.6 !important;
    text-align: center !important;
  }
  .l-footer__logo {
    margin: 15px 0 25px 0 !important;
    display: flex !important;
    justify-content: center !important;
  }
  .l-footer__logo img {
    height: 36px !important;
    width: auto !important;
  }
}

/* ==========================================================================
   【Anthropic風ミニマルデザイン】スマホ版完全最適化コード
   ========================================================================== */

/* ── PC版での不要ノイズ消去 ── */
.l-header__toggle-input,
.l-header__toggle-button {
  display: none !important;
}

@media screen and (max-width: 767px) {
  
  /* ── 1. ヘッダー：極限までシンプルに、背景に溶け込む白 ── */
  .l-header {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #ffffff !important;
    border-bottom: 1px solid #f0f0f0 !important; /* 線の主張を消し、ごく淡い境界線に */
    z-index: 1000 !important;
  }

  .l-header__container {
    height: 65px !important; /* よりスマートで引き締まった高さ */
    padding: 0 24px !important; /* 余白を広めに */
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  .l-header__logo img {
    height: 36px !important; /* ロゴを小さく上品に配置 */
    width: auto !important;
    margin: 0 !important;
  }

  /* ── 2. MENUボタン：文字のみのモダンなタイポグラフィ ── */
  /* 枠線や三本線をあえて排除し、文字の美しさだけで見せるAnthropicスタイル */
  .l-header__nav {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
  }

  .l-header__nav::before {
    content: "Menu" !important; /* ☰マークすら消し、洗練されたフォントで魅せる */
    font-size: 15px !important;
    color: #191919 !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    letter-spacing: 0.02em !important;
    padding: 4px 8px !important;
  }

  /* スマホメニュー：静かに、美しく全画面を覆うホワイトスクリーン */
  .l-header__menu {
    position: fixed !important;
    top: 65px !important;
    left: 0 !important;
    width: 100% !important;
    height: 0 !important;
    background-color: #ffffff !important; /* 圧迫感のない純白の背景 */
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    padding: 0 24px !important; /* 左右に美しいマージン */
    overflow: hidden !important;
    transition: height 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    z-index: 9999 !important;
  }

  .l-header__menu li {
    width: 100% !important;
    list-style: none !important;
  }

  .l-header__menu a {
    display: block !important;
    color: #191919 !important;
    font-size: 22px !important; /* あえて文字を少し大きくし、海外サイトのような大胆な余白感を演出 */
    font-weight: 400 !important;
    padding: 16px 0 !important;
    border-bottom: 1px solid #f5f5f5 !important; /* ごく薄い線 */
    letter-spacing: -0.01em !important;
  }

  .l-header__menu a.-active {
    color: #0077e6 !important; /* M&Eブルーをアクセントに */
    font-weight: 500 !important;
  }

  /* タッチ（アクティブ）時のメニュー展開挙動 */
  .l-header__nav:active .l-header__menu,
  .l-header__nav:hover .l-header__menu {
    height: calc(100vh - 65px) !important; /* 画面いっぱいに広がる */
    padding-top: 20px !important;
  }

  /* メインコンテンツの開始位置調整 */
  .l-main {
    padding-top: 65px !important;
  }

  /* ── 3. フッター：これぞAnthropic。圧倒的な余白と静寂のミニマリズム ── */
  .l-footer {
    padding: 80px 24px 60px 24px !important; /* 上下の余白（アキ）をあえて激しく広く取り、高級感を演出 */
    background-color: #ffffff !important; /* 黒い帯を廃止し、サイト全体が白でつながる美しい世界観へ */
    border-top: 1px solid #f0f0f0 !important;
  }

  .l-footer__container {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important; /* すべて左寄せに統一し、知的な雑誌のようなレイアウトに */
    gap: 0 !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  /* メインナビ：線を消し、静かに並ぶ美しい縦型テキストリンク */
  .l-footer__nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important; /* 窮屈さを完全に排除したゆったりとした間隔 */
    margin: 0 0 48px 0 !important; /* 次の要素との間に大きめのアキ */
    padding: 0 !important;
    list-style: none !important;
  }

  .l-footer__nav a {
    font-size: 15px !important;
    color: #191919 !important; /* 柔らかな黒 */
    font-weight: 400 !important;
    text-align: left !important;
    display: inline-block !important;
    opacity: 0.8 !important;
  }

  /* フッターロゴ：空間にポツンと佇むような上品な配置 */
  .l-footer__logo {
    margin: 0 0 40px 0 !important;
    text-align: left !important;
  }

  .l-footer__logo img {
    height: 30px !important; /* 控えめなサイズで知性を演出 */
    width: auto !important;
  }

  /* サブナビ（規約・マージン率）：目立たせない、極小の洗練テキスト */
  .l-footer__sub-nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
    margin: 0 0 40px 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  .l-footer__sub-nav a {
    font-size: 13px !important;
    color: #666666 !important; /* 薄めのグレー */
    text-align: left !important;
    display: inline-block !important;
    text-decoration: none !important;
    opacity: 0.8 !important;
  }

  /* コピーライト */
  .l-footer__copyright {
    font-size: 12px !important;
    color: #999999 !important;
    margin: 0 !important;
    letter-spacing: 0.02em !important;
    text-align: left !important;
  }

  /* ── 4. 本文テキストの徹底美化 ── */
  .c-text, 
  .c-text-lead,
  .p-policy-body .c-text {
    font-size: 15px !important;
    line-height: 1.85 !important; /* 行間をゆったり広げてラグジュアリーに */
    color: #191919 !important;
    text-align: justify !important;
    overflow-wrap: break-word !important;
    word-break: break-all !important;
    letter-spacing: 0.02em !important;
  }
}

/* ==========================================================================
   【完全決定版】モバイル版：洗練されたミニマル・ハンバーガーメニュー設定
   ========================================================================== */

/* ── 1. PC版での不要ノイズを完全消去 ── */
.l-header__toggle-input,
.l-header__toggle-button {
  display: none !important;
}

/* ── 2. iPad・スマホ環境（1024px以下）でハンバーガーに自動変形 ── */
@media screen and (max-width: 1024px) {
  
  /* ヘッダー全体をスマートな高さに固定 */
  .l-header {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #ffffff !important;
    border-bottom: 1px solid #f0f0f0 !important; /* 繊細で極薄の境界線 */
    z-index: 1000 !important;
  }

  .l-header__container {
    height: 70px !important; /* 潜り込みを防ぐスマートな高さ */
    padding: 0 24px !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    position: relative !important;
  }

  /* モバイル環境でのロゴサイズを最適化 */
  .l-header__logo img {
    height: 40px !important;
    width: auto !important;
    margin: 0 !important;
  }

  /* 💡 HTMLにボタンがなくても、CSSの力だけで右上に洗練された「三本線」を自動配置 */
  .l-header__nav {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
  }

  /* 3本線ボタン（ハンバーガー）の生成（極細・ミニマルデザイン） */
  .l-header__nav::before {
    content: "" !important;
    display: block !important;
    width: 22px !important;
    height: 12px !important;
    /* 3本線をシャープなグラデーションの境界線で美しく表現 */
    background: linear-gradient(
      to bottom,
      #191919 0%, #191919 15%,
      transparent 15%, transparent 42.5%,
      #191919 42.5%, #191919 57.5%,
      transparent 57.5%, transparent 85%,
      #191919 85%, #191919 100%
    ) !important;
    cursor: pointer !important;
    transition: opacity 0.2s ease !important;
  }

  /* 💡 メニュー本体：文字が浮かないよう、純白の美しいスクリーンとして全画面展開 */
  .l-header__menu {
    position: fixed !important;
    top: 70px !important; /* ヘッダーのすぐ下から隙間なく展開 */
    left: 0 !important;
    width: 100% !important;
    height: 0 !important; /* 通常時は高さを完全にゼロにして隠す */
    background-color: #ffffff !important; /* 清潔感のある真っ白な背景 */
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important; /* 知的な左寄せ配置 */
    justify-content: flex-start !important;
    gap: 0 !important;
    padding: 0 24px !important;
    overflow: hidden !important;
    /* Anthropicのような滑らかで静かな展開アニメーション */
    transition: height 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    z-index: 9999 !important;
  }

  .l-header__menu li {
    width: 100% !important;
    list-style: none !important;
  }

  /* メニューの文字リンク：余白を贅沢に取った海外IT企業クオリティ */
  .l-header__menu a {
    display: block !important;
    color: #191919 !important;
    font-size: 20px !important; /* 大きめで堂々とした文字サイズ */
    font-weight: 400 !important;
    padding: 18px 0 !important;
    border-bottom: 1px solid #f5f5f5 !important; /* 極薄のセパレーター線 */
    letter-spacing: -0.01em !important;
    width: 100% !important;
    text-align: left !important;
  }

  /* 現在地（アクティブ）の文字をM&Eブルーにして特別感を演出 */
  .l-header__menu a.-active {
    color: #0077e6 !important;
    font-weight: 500 !important;
  }

  /* 🪄 タッチ（ホバー・アクティブ）した瞬間に、全画面メニューがスッと静かに下りてくる極上の連動挙動 */
  .l-header__nav:active .l-header__menu,
  .l-header__nav:hover .l-header__menu {
    height: calc(100vh - 70px) !important; /* 画面下端まで真っ白なスクリーンで覆う */
    padding-top: 15px !important;
  }

  /* メインコンテンツがヘッダーの裏に潜り込んで被るのを完全に防ぐ安全余白 */
  .l-main {
    padding-top: 70px !important;
  }

  /* ── 3. フッター：Anthropic風の静かで上品な左寄せミニマリズム ── */
  .l-footer {
    padding: 80px 24px 60px 24px !important; /* あえて広い余白（アキ）を設けて高級感を演出 */
    background-color: #ffffff !important; /* 醜い黒い帯を撤廃し、完全に白背景へ統合 */
    border-top: 1px solid #f0f0f0 !important;
  }

  .l-footer__container {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important; /* すべて左寄せに統一して雑誌のような美しさに */
    gap: 0 !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  /* メインナビ：縦一列でも野暮ったく見えない、洗練された余白感 */
  .l-footer__nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    margin: 0 0 48px 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  .l-footer__nav a {
    font-size: 15px !important;
    color: #191919 !important;
    font-weight: 400 !important;
    text-align: left !important;
    display: inline-block !important;
    opacity: 0.85 !important;
  }

  /* フッターロゴ：静かな空間に品よく佇む配置 */
  .l-footer__logo {
    margin: 0 0 40px 0 !important;
    text-align: left !important;
  }

  .l-footer__logo img {
    height: 28px !important; /* 小さく上品に */
    width: auto !important;
  }

  /* サブナビ（規約・マージン率等） */
  .l-footer__sub-nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
    margin: 0 0 40px 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  .l-footer__sub-nav a {
    font-size: 13px !important;
    color: #666666 !important;
    text-align: left !important;
    display: inline-block !important;
    opacity: 0.85 !important;
  }

  /* コピーライト */
  .l-footer__copyright {
    font-size: 12px !important;
    color: #999999 !important;
    margin: 0 !important;
    text-align: left !important;
  }

  /* ── 4. 本文の改行バグ・文字離れバグを根底からクリーンアップ ── */
  .c-text, 
  .c-text-lead,
  .p-policy-body .c-text {
    font-size: 15px !important;
    line-height: 1.85 !important;
    color: #191919 !important;
    text-align: justify !important;
    overflow-wrap: break-word !important;
    word-break: break-all !important; /* 隙間が開くブラウザバグを完全消滅 */
    letter-spacing: 0.01em !important;
  }
}

/* ==========================================================================
   【最終解決】スマホメニューの浮き・重複を完全解消する修正コード
   ========================================================================== */

/* 1. PC環境（1025px以上）でのメニュー位置を右側に完全固定 */
@media screen and (min-width: 1025px) {
  .l-header__nav {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    position: relative !important;
    height: auto !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
  }

  .l-header__menu {
    display: flex !important;
    flex-direction: row !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    background-color: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    gap: 30px !important;
    overflow: visible !important;
    opacity: 1 !important;
  }

  .l-header__menu li {
    width: auto !important;
    opacity: 1 !important;
    border: none !important;
  }

  .l-header__menu a {
    color: #0d2b5c !important; /* M&Eブルーに戻す */
    font-size: 18px !important;
    padding: 8px 0 !important;
    background: transparent !important;
  }

  /* 不要な「MENU ☰」などの疑似テキストボタンをPC版では完全に消去 */
  .l-header__nav::before {
    display: none !important;
  }
}

/* 2. タブレット・スマホ環境（1024px以下）でメニューが浮き上がって常時表示されるバグを完全防止 */
@media screen and (max-width: 1024px) {
  /* ナビをクリック（またはホバー）していない通常時は、メニューの高さを「完全にゼロ」にして隠す */
  .l-header__menu {
    height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important; /* 完全に消す */
  }

  /* ユーザーがメニューボタンを触った（active/hover）時だけスッと浮き出さずに展開させる */
  .l-header__nav:active .l-header__menu,
  .l-header__nav:hover .l-header__menu {
    height: calc(100vh - 70px) !important; /* もしくは指定の高さ */
    opacity: 1 !important;
    padding: 24px !important;
  }
}

/* ==========================================================================
   【完全修正】ハンバーガーメニューの浮きを解消し、右端に正しく配置する
   ========================================================================== */

/* スマホ・タブレット環境（メニューが三本線になる画面幅） */
@media screen and (max-width: 1024px) {

  /* ヘッダー全体のコンテナ（ロゴとナビの親要素） */
  .l-header__inner, 
  .p-header__inner {
    display: flex !important;
    justify-content: space-between !important; /* ロゴを左、メニューを右に引き離す */
    align-items: center !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px 20px !important; /* 左右に程よい余白を作る */
    box-sizing: border-box !important;
  }

  /* 浮いてしまっているナビゲーション全体の箱 */
  .l-header__nav,
  .p-header__nav {
    position: static !important; /* absoluteによる浮遊を一度完全にリセット */
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important; /* 右寄せにする */
    margin-left: auto !important; /* 確実に右側へ押し出す */
    
    /* 浮いている原因のサイズや影をリセット */
    width: auto !important;
    height: auto !important;
    box-shadow: none !important; 
    background: transparent !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
  }

  /* 三本線アイコンボタン（menu_2.pngで浮いている白い四角部分） */
  .c-button__menu,
  .l-header__btn,
  .p-header__btn,
  .l-header__nav::before {
    position: relative !important; /* 浮遊をやめさせる */
    top: auto !important;
    left: auto !important;
    right: auto !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* デザインの微調整（必要に応じて） */
    background: #ffffff !important; /* 白背景 */
    border: 1px solid #e0e0e0 !important; /* 軽い枠線 */
    border-radius: 4px !important;
    padding: 8px 12px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08) !important; /* 綺麗な軽い影に修正 */
  }

}