@charset "UTF-8";
/* =========================================================
   CSS Custom Properties
   ========================================================= */
:root {
  --bg: #e7e7e7;
  --bg_dark: #0a0a0a;
  --text: #222222;
  --ui_color: #222222;
  --accent_focus: #2563eb;
  --line_dark: rgba(0, 0, 0, .2);
  --line_news: rgba(0, 0, 0, .18);
}

/* =========================================================
   Reset & Base
   ========================================================= */
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
  background: var(--bg);
  font-family: "Noto Sans JP", sans-serif;
  color: var(--text);
}

body {
  font-size: 14px;
  min-height: 320vh;
}

a {
  color: inherit;
  text-decoration: none;
}

/* =========================================================
   Utility
   ========================================================= */
.is_hidden {
  display: none !important;
}

/* スクリーンリーダー専用（視覚的に非表示だが読み上げ可能） */
.sr_only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* キーボードユーザー向けスキップリンク */
.skip_link {
  position: fixed;
  top: 0;
  left: 0;
  padding: 12px 20px;
  background: #222222;
  color: #ffffff;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  z-index: 10000;
  -webkit-transform: translateY(-200%);
  transform: translateY(-200%);
  -webkit-transition: -webkit-transform 0.2s ease;
  transition: -webkit-transform 0.2s ease;
  transition: transform 0.2s ease;
  transition: transform 0.2s ease, -webkit-transform 0.2s ease;
}

.skip_link:focus {
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

/* キーボードフォーカスのアウトライン（マウスクリックでは非表示） */
:focus-visible {
  outline: 2px solid var(--accent_focus);
  outline-offset: 3px;
  border-radius: 2px;
}

/* =========================================================
   ページ遷移オーバーレイ（縦ワイプ・ds-k.site 風）
   ----------------------------------------------------------
   - 全画面の単色（#0a0a0a）パネル。
   - 動かすのは transform だけ。アニメーションは common.js 側で
     CSS transition を inline で付けて駆動する。
   ========================================================= */
.page_transition {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  z-index: 99999;
  background: #0a0a0a;
  pointer-events: auto;
  will-change: transform;
}

/* head の inline script が pt_incoming を付けた直後の最初の描画を、
   common.css 読み込み完了前から黒で覆ってチラつきを防ぐ。
   common.js 起動後は reveal アニメーションがこの class を外す。 */
html.pt_incoming::before {
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #0a0a0a;
  z-index: 99998;
  pointer-events: none;
}

/* /.page_transition */

/* =========================================================
   <main> せり上がり登場（pt_intro_pending → pt_intro_in）
   ----------------------------------------------------------
   ds-k.site と同じ「下からせり上がってフェードイン」を main 全体に。
   ページ遷移時は revealOnLoad が JS 側でクラスを切替える。
   遷移を経由しない直接アクセス時はどちらも付かないため通常表示される。
   ========================================================= */
html.pt_intro_pending main {
  opacity: 0;
  -webkit-transform: translate3d(0, 60px, 0) scale(0.985);
          transform: translate3d(0, 60px, 0) scale(0.985);
  -webkit-transition: none;
          transition: none;
}
main {
  -webkit-transform-origin: center top;
          transform-origin: center top;
  -webkit-transition: opacity 0.95s cubic-bezier(0.09, 1, 0.36, 1), -webkit-transform 0.95s cubic-bezier(0.09, 1, 0.36, 1);
  transition: opacity 0.95s cubic-bezier(0.09, 1, 0.36, 1), transform 0.95s cubic-bezier(0.09, 1, 0.36, 1), -webkit-transform 0.95s cubic-bezier(0.09, 1, 0.36, 1);
}
html.pt_intro_in main {
  opacity: 1;
  -webkit-transform: none;
          transform: none;
}
/* =========================================================
   Section 共通
   ========================================================= */
.section {
  position: relative;
  z-index: 10;
}

.section.section_light {
  background: #e7e7e7;
  color: #111;
}

.section.section_dark {
  background: var(--bg_dark);
  color: #fff;
}

.section_inner {
  position: relative;
  max-width: 1366px;
  margin: 0 auto;
  padding: clamp(80px, 9vw, 150px) clamp(24px, 5.2vw, 71px);
}

.section_index {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: clamp(11px, 0.9vw, 13px);
  letter-spacing: 0.1em;
  opacity: 0.85;
  display: inline-block;
  font-weight: 700;
  line-height: 1;
}

.section_title {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 800;
  font-size: clamp(48px, 7vw, 128px);
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 6px 0 0;
}

/* =========================================================
   登場アニメーション（Intersection Observer と連動）
   ========================================================= */
.reveal {
  opacity: 0;
  -webkit-transform: translate3d(0, 40px, 0);
  transform: translate3d(0, 40px, 0);
  -webkit-transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1), -webkit-transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1), -webkit-transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1), -webkit-transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}

.reveal.is_in {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
}

.reveal.reveal_left {
  -webkit-transform: translate3d(-40px, 0, 0);
  transform: translate3d(-40px, 0, 0);
}

.reveal.reveal_left.is_in {
  -webkit-transform: none;
  transform: none;
}

.reveal.reveal_scale {
  -webkit-transform: scale(0.94);
  transform: scale(0.94);
}

.reveal.reveal_scale.is_in {
  -webkit-transform: none;
  transform: none;
}

.reveal.reveal_delay_1 {
  -webkit-transition-delay: 0.08s;
  transition-delay: 0.08s;
}

.reveal.reveal_delay_2 {
  -webkit-transition-delay: 0.16s;
  transition-delay: 0.16s;
}

.reveal.reveal_delay_3 {
  -webkit-transition-delay: 0.24s;
  transition-delay: 0.24s;
}

.reveal.reveal_delay_4 {
  -webkit-transition-delay: 0.32s;
  transition-delay: 0.32s;
}

.reveal.reveal_delay_5 {
  -webkit-transition-delay: 0.4s;
  transition-delay: 0.4s;
}

@media (prefers-reduced-motion: reduce) {
  /* reveal アニメーションのみ即座に表示・停止 */
  .reveal {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
    -webkit-transition: none;
    transition: none;
  }
  /* スムーススクロールのみ無効化 */
  html {
    scroll-behavior: auto;
  }
  /* ※ かつてここに「* { animation-duration: 0.01ms !important }」の wildcard ルールがあったが、
     contact_marquee などの常時稼働マーキー（情報伝達のための装飾）まで停止させてしまうため削除。
     必要なら個別要素ごとに reduced-motion 対応を追加する。 */
}
/* =========================================================
   汎用ボタン
   ========================================================= */
.btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: clamp(16px, 2vw, 28px);
  min-width: clamp(160px, 14vw, 190px);
  height: clamp(42px, 3.6vw, 48px);
  padding: 0 clamp(18px, 1.8vw, 24px);
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: clamp(12px, 0.95vw, 14px);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  pointer-events: auto;
  -webkit-transition: background 0.25s ease, color 0.25s ease;
  transition: background 0.25s ease, color 0.25s ease;
  line-height: 1;
}

.section.section_light .btn:hover {
  background: #111;
  color: #e7e7e7;
}

.section.section_dark .btn:hover {
  background: #fff;
  color: var(--bg_dark);
}

.btn_arrow {
  font-weight: 400;
  font-size: 1.15em;
}

/* =========================================================
   ↓↓↓ 共通化のため home.css から移管：
        ヘッダー・フッター・contact_marquee（全ページ共通）
   ========================================================= */
.header {
  position: fixed;
  top: clamp(16px, 3vw, 32px);
  left: clamp(16px, 3.4vw, 48px);
  right: clamp(16px, 3.4vw, 48px);
  z-index: 1000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: clamp(12px, 2vw, 24px);
  pointer-events: auto;
  color: var(--ui_color);
}

.header_logo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  color: inherit;
}

.header_logo img {
  width: clamp(36px, 4.4vw, 54px);
  height: auto;
  display: block;
  -webkit-filter: none;
  filter: none;
  -webkit-transition: -webkit-filter 0.25s ease;
  transition: -webkit-filter 0.25s ease;
  transition: filter 0.25s ease;
  transition: filter 0.25s ease, -webkit-filter 0.25s ease;
}

.is_ui_white .header_logo img {
  -webkit-filter: brightness(0) invert(1);
  filter: brightness(0) invert(1);
}

.is_ui_white .header_menu {
  border-color: #fff;
}

.header_nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: clamp(12px, 1.8vw, 22px);
  white-space: nowrap;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: clamp(13px, 1.2vw, 16px);
  line-height: 1;
  color: inherit;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.header_nav a,
.header_menu {
  color: inherit !important;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.header_menu {
  /* PC ビューではナビリンクを直接表示しているため MENU ボタンは非表示。
     900px 以下のメディアクエリで再表示（ハンバーガーとして利用）。 */
  display: none;
  width: clamp(78px, 8vw, 106px);
  height: clamp(40px, 4vw, 50px);
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  font: inherit;
  margin-left: clamp(4px, 0.8vw, 12px);
  cursor: pointer;
}

.section.section_contact {
  background: #e7e7e7;
  color: #222222;
  overflow: hidden;
  padding: clamp(44px, 6.4vw, 88px) 0;
  border-top: 1px solid #222222;
  border-bottom: 1px solid #222222;
}

.contact_marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  gap: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: auto;
}

.contact_marquee_group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  min-width: 100%;
  gap: 0;
  -webkit-animation: contactMarquee 24s linear infinite;
  animation: contactMarquee 24s linear infinite;
  will-change: transform;
}

.contact_marquee:hover .contact_marquee_group {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}

@-webkit-keyframes contactMarquee {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes contactMarquee {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
.contact_marquee_item {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: clamp(24px, 3.6vw, 60px);
  padding: 0 clamp(20px, 3vw, 48px);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 800;
  font-size: clamp(48px, 10.6vw, 168px);
  letter-spacing: -0.02em;
  line-height: 1;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-transition: opacity 0.25s ease;
  transition: opacity 0.25s ease;
}

.contact_marquee_item:hover {
  opacity: 0.55;
}

.contact_marquee_arrow {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: clamp(52px, 5.5vw, 84px);
  height: clamp(52px, 5.5vw, 84px);
  border: 1px solid currentColor;
  border-radius: 999px;
  background: #ffffff;
  font-size: clamp(18px, 2vw, 28px);
  font-weight: 400;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.footer {
  position: relative;
  z-index: 10;
  background: #e7e7e7;
  color: #222222;
  padding: 0;
  overflow: hidden;
}

.footer_inner {
  padding: clamp(60px, 6vw, 100px) clamp(24px, 5.2vw, 71px) clamp(100px, 12vw, 180px);
}

.footer_top {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 32px auto;
  grid-template-columns: 1fr auto;
  gap: 32px;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  margin-bottom: clamp(40px, 5vw, 80px);
}

.footer_nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: clamp(10px, 1vw, 14px);
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer_nav a {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
  font-size: clamp(13px, 1vw, 15px);
  letter-spacing: 0.08em;
  -webkit-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
}

.footer_nav a:hover {
  opacity: 0.6;
}

.footer_right {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  gap: clamp(20px, 3vw, 40px);
}

.footer_privacy {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
  font-size: clamp(12px, 0.9vw, 14px);
  letter-spacing: 0.08em;
  -webkit-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
}

.footer_privacy:hover {
  opacity: 0.6;
}

.footer_totop {
  width: clamp(48px, 4vw, 60px);
  height: clamp(48px, 4vw, 60px);
  border: 1px solid currentColor;
  border-radius: 999px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  cursor: pointer;
  background: transparent;
  color: inherit;
  font-size: 18px;
  -webkit-transition: background 0.25s ease, color 0.25s ease;
  transition: background 0.25s ease, color 0.25s ease;
  padding: 0;
}

.footer_totop:hover {
  background: #111;
  color: #fff;
}

.footer_copy {
  font-size: clamp(10px, 0.72vw, 12px);
  letter-spacing: 0.05em;
  opacity: 0.7;
  text-align: right;
  line-height: 1.5;
}

.footer_banner {
  margin: 0;
  padding: 0 clamp(24px, 5.2vw, 71px) clamp(40px, 5vw, 80px);
  line-height: 0;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* テキストの形に動画を切り抜く方式：
   <video> 要素に CSS mask-image を直接当て、ロゴ型テキストの SVG パスで
   クリップする。<foreignObject> + clipPath は iOS Safari で挙動が
   不安定なため、video への直接 mask-image に変更している。 */
.footer_banner_video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1286/162;
  -o-object-fit: cover;
  object-fit: cover;
  background: #0a0a0a; /* 動画ロード前のフォールバック塗り */
  -webkit-mask-image: url("/assets/images/common/footer_text_mask.svg");
  mask-image: url("/assets/images/common/footer_text_mask.svg");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* 旧仕様の <img> 用ルール（互換のため残置・新HTMLには出現しない） */
.footer_banner img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* =========================================================
   メディアクエリ：タブレット横（iPad横）／1024px 以下
   ========================================================= */
@media (max-width: 1024px) {
  .header_nav {
    font-size: 14px;
    gap: 16px;
  }
  /* ロゴサイズを 1024px 以下から 900 / 640 まで一律 64px に統一 */
  .header_logo img {
    width: 64px;
  }
  /* 1024px 帯ではまだナビリンクが見えているので MENU ボタンは非表示のまま */
  .header_menu {
    width: 94px;
    height: 46px;
    font-size: 14px;
    margin-left: 8px;
  }
  .section_inner {
    padding: clamp(70px, 8vw, 130px) clamp(20px, 4.6vw, 60px);
  }
  .footer_inner {
    padding: clamp(56px, 6vw, 90px) clamp(20px, 4.6vw, 60px) clamp(80px, 10vw, 140px);
  }
  .footer_banner {
    padding: 0 clamp(20px, 4.6vw, 60px) clamp(32px, 4vw, 60px);
  }
} /* /@media 1024 */
/* =========================================================
   メディアクエリ：タブレット縦／900px 以下
   ========================================================= */
@media (max-width: 900px) {
  /* =========================================================
     900px 以下：MENU ボタン（ドロワートリガー）と
     右からスライドインするドロワーナビゲーション
     ========================================================= */
  .header_nav {
    /* PC では横並びナビだが、モバイルでは右からスライドインする
       ドロワーパネルに姿を変える（同じリンク要素を再利用） */
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: min(82vw, 360px);
    height: 100vh;
    height: 100dvh;
    background: #0a0a0a;
    color: #fff;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    gap: 0;
    padding: clamp(80px, 12vw, 120px) clamp(28px, 6vw, 40px) 32px;
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
    -webkit-transition: -webkit-transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition: -webkit-transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), -webkit-transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
    z-index: 2000;
    overflow-y: auto;
    pointer-events: auto;
    visibility: hidden;
  }
  .is_menu_open .header_nav {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    visibility: visible;
  }
  .header_nav a {
    /* PC で非表示にしていたリンクを、ドロワー内ではすべて表示する */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    height: 56px;
    padding: 0 4px;
    color: #fff !important;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    -webkit-transition: opacity 0.2s ease;
    transition: opacity 0.2s ease;
  }
  .header_nav a:hover {
    opacity: 0.7;
  }
  /* 900px 以下ではナビリンクが消えるので MENU ボタン（ハンバーガー）を表示 */
  .header_menu {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    margin-left: 0;
    width: 88px;
    height: 42px;
    /* ドロワーより前面に配置してドロワー上からも閉じられるように */
    position: relative;
    z-index: 2010;
  }
  /* 開いている間は MENU を白黒反転で目立たせる */
  .is_menu_open .header_menu {
    background: #fff;
    color: #0a0a0a !important;
    border-color: #fff;
  }
  /* ドロワー背後のオーバーレイ（クリックで閉じる） */
  .menu_overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 0.3s ease, visibility 0.3s ease;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1900;
    pointer-events: none;
  }
  .is_menu_open .menu_overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  /* メニュー展開中は背面のスクロールをロック */
  .is_menu_open body {
    overflow: hidden;
  }
  /* メニュー展開中は .header を最前面レイヤに持ち上げ、
     overlay（z 1900）より上で drawer / 閉じるボタンが描画されるようにする */
  .is_menu_open .header {
    z-index: 2050;
  }
  /* index.html 専用：.ui (position:fixed; z-index:1000) が drawer/header を
     内包しているため、.ui 自体を overlay (z 1900) より上に持ち上げないと
     drawer が overlay に隠されてしまう。
     ※ .ui は index 以外のページには存在しない（無害） */
  .is_menu_open .ui {
    z-index: 2050;
  }
  .section_title {
    font-size: clamp(40px, 9vw, 88px);
  }
  .footer_top {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    gap: 28px;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
  .footer_right {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    width: 100%;
  }
  .footer_copy {
    text-align: left;
  }
} /* /@media 900 */
/* =========================================================
   メディアクエリ：スマートフォン／640px 以下
   ========================================================= */
@media (max-width: 640px) {
  /* ---- ヘッダー ---- */
  .header {
    top: 16px;
    left: 16px;
    right: 16px;
    gap: 8px;
  }
  .header_logo img {
    width: 64px;
  }
  .header_menu {
    width: 84px;
    height: 42px;
    font-size: 12px;
    letter-spacing: 0.05em;
  }
  /* スマホでドロワーが画面いっぱい近くまで広がる */
  .header_nav {
    width: min(86vw, 360px);
    padding: 88px 24px 32px;
  }
  .header_nav a {
    font-size: 17px;
    height: 52px;
  }
  /* ---- セクション共通 ---- */
  .section_inner {
    padding: clamp(56px, 12vw, 80px) 20px;
  }
  .section_title {
    font-size: clamp(36px, 11vw, 64px);
  }
  /* ---- ボタン ---- */
  .btn {
    min-width: 150px;
    height: 40px;
    font-size: 11px;
    letter-spacing: 0.12em;
    padding: 0 18px;
  }
  /* ---- contact マーキー ---- */
  .contact_marquee_item {
    font-size: clamp(32px, 10vw, 58px);
    gap: 14px;
    padding: 0 14px;
  }
  .contact_marquee_arrow {
    width: 44px;
    height: 44px;
    font-size: 16px;
  }
  /* ---- フッター ---- */
  .footer_inner {
    padding: 56px 20px 70px;
  }
  .footer_top {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    gap: 28px;
    margin-bottom: 32px;
  }
  .footer_right {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 20px;
  }
  .footer_copy {
    text-align: left;
  }
  .footer_banner {
    padding: 0 12px 20px;
  }
} /* /@media 640 */