/* 1) 全要素の box-sizing を border-box に統一 */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2) 横幅ガード（スマホでの横スクロール防止） */
.wrap,
.contact-wrap,
.contact-section,
.contact-cards,
.contact-card,
.contact-form,
.cf-grid,
.cf-row,
.contact-hero__inner,
.contact-hero__bg,
.contact-hero__video,
.contact-map,
.contact-map iframe {
  max-width: 100%;
}

/* 3) メディア要素のはみ出し防止（画像・動画） */
img, video {
  max-width: 100%;
  height: auto;
  display: block;
}


html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;   /* 横スクロール抑止 */
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  color: #fff;
  background: #000;
  padding: 0 20px;
}

:root {
  --wrap-max: 430px;
  --wrapW: min(100vw, var(--wrap-max));
  --left-slice: calc(50vw - var(--wrapW) / 2);
}

/* ===== 背景エリア ===== */
.video-background {
  position: fixed;
  inset: 0;
  z-index: -10; /* ← 背景をより後ろに下げる */
  overflow: hidden;
  pointer-events: none; /* ← 背景がクリックを拾わないように */
}


/* 右側＝全面動画（下の層） */
.video-background .bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  transform: translateZ(0);
  z-index: 0; /* ← 背面に固定 */
}

/* 左側画像（上の層）。境界を +2px オーバーラップ */
.video-background .bg-left {
  position: absolute;
  top: 0;
  left: 0;
  /* 誤: + -8px  → 正: + 2px（負値にならないよう max 付き） */
  width: calc(max(var(--left-slice), 0px) - 8px);
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  transform: translateZ(0);
  z-index: 1;
}

/* FOUC防止は残してOK（JSで必ず解除するように修正します） */
.lawyer-box .lawyer-item,
.lawyer-box .lawyer-text {
  opacity: 0;
  will-change: transform, opacity;
}

/* ロゴ */
.video-background .logo {
  position: absolute;
  top: calc(3vw + env(safe-area-inset-top));
  left: calc(3vw + env(safe-area-inset-left));
  width: clamp(180px, calc(var(--left-slice) * 0.35), 250px);
  height: auto;
  z-index: 1;
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
  filter: drop-shadow(0 3px 9px rgba(146, 19, 151, 0.45));
  object-fit: contain;
}

/* ============== Contact Page ============== */
.contact-body {
  background: #000;
  color: #fff;
}

/* ヒーロー */
.contact-hero {
  position: relative;
  min-height: 48svh;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
}
.contact-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.contact-hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.45);
}
.contact-hero__inner {
  padding: 64px 20px 72px;
}
.contact-breadcrumb {
  font-size: 12px;
  color: #ddd;
  margin: 0 0 10px;
  opacity: 0.9;
}
.contact-breadcrumb a {
  color: #fff;
  text-decoration: none;
}
.contact-breadcrumb span {
  margin: 0 0.4em;
  opacity: 0.7;
}
.contact-ttl {
  font-weight: 600;
  letter-spacing: 0.02em;
  margin: 6px 0 10px;
  font-size: clamp(22px, 5vw, 34px);
}
.contact-ttl span {
  display: block;
  font-size: 0.52em;
  color: #cfcfcf;
  margin-top: 6px;
  font-weight: 400;
  letter-spacing: 0.08em;
}
.contact-lead {
  color: #dedede;
  font-size: clamp(12px, 2.4vw, 15px);
  line-height: 1.9;
  margin: 12px auto 0;
  max-width: 48ch;
}

.contact-wrap {
  padding-top: 28px;
  padding-bottom: 80px;
}

.contact-section {
  margin: clamp(36px, 6vw, 64px) auto;
  width: 100%;
}
.contact-h2 {
  font-size: clamp(18px, 3.6vw, 22px);
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 18px;
}

/* カード（案内） */
.contact-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 700px) {
  .contact-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}
.contact-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 16px 16px 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.contact-card h3 {
  font-size: clamp(14px, 2.6vw, 16px);
  margin: 2px 0 6px;
}
.contact-card p {
  font-size: clamp(12px, 2.2vw, 14px);
  color: #ddd;
  line-height: 1.9;
}
.contact-mail {
  color: #fff;
  text-decoration: underline;
}

/* フォーム */
.contact-form {
  display: grid;
  gap: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.cf-grid {
  display: grid;
  gap: 16px;
}
@media (min-width: 760px) {
  .cf-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.cf-row {
  display: grid;
  gap: 8px;
}
.cf-row label,
.cf-fieldset legend {
  font-size: 13px;
  color: #cfcfcf;
}
.cf-hint {
  font-size: 11px;
  color: #aaa;
  margin: 0;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 12px 12px;
  font-size: 14px;
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  outline: none;
  transition:
    box-shadow 0.2s,
    border-color 0.2s;
}

.contact-form textarea {
  resize: vertical;
  min-height: 140px;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12);
}

/* ===== select の改善 ===== */
.contact-form select {
  width: 100%;
  padding: 12px 12px;
  font-size: 14px;
  color: #fff;
  /*background-color: rgba(0, 0, 0, 0.5);  ← 半透明黒背景に変更 */
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  appearance: none; /* ネイティブ装飾をオフ（統一デザイン用） */
  outline: none;
  transition:
    box-shadow 0.2s,
    border-color 0.2s;
  position: relative;
  z-index: 5; /* ← 背景や動画より上に */
}

/* フォーカス時の明るさを強調 */
.contact-form select:focus {
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15);
}

/* 選択リスト（option）内の背景と文字 */
.contact-form option {
  background-color: #000; /* ← 黒背景 */
  color: #fff; /* ← 白文字 */
}

/* select がクリック後すぐ閉じる対策 */
.contact-section,
.contact-form {
  position: relative;
  z-index: 10; /* 背景の動画などより上に配置 */
}

/* 背景動画より手前に */
.video-background {
  z-index: -1; /* ← これで select が前面で操作可 */
}

/* チェック系 */
.cf-fieldset {
  border: 0;
  padding: 0;
  margin: 8px 0 0;
  display: grid;
  gap: 10px;
}
.cf-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #ddd;
}
.cf-agree {
  display: grid;
  gap: 8px;
  margin-top: 4px;
}
.cf-privacy {
  font-size: 11px;
  color: #aaa;
  margin: 0;
}

/* 送信ボタンと注意文を中央寄せ */
.cf-actions {
  display: flex;
  flex-direction: column; /* 縦並び */
  align-items: center;    /* 横方向中央揃え */
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}

/* ボタン */
.cf-btn {
  display: inline-block;
  padding: 12px 28px;
  border: 1px solid #fff;
  border-radius: 9999px;
  color: #fff;
  background: transparent;
  font-size: 14px;
  cursor: pointer;
  transition: 0.25s;
  text-align: center; /* ← 念のため中央寄せ */
}
.cf-btn:hover {
  background: #fff;
  color: #000;
}

/* 注意文 */
.cf-note {
  font-size: 11px;
  color: #aaa;
  margin: 0;
  text-align: center; /* ← テキストも中央に */
}


/* 完了/エラー */
.cf-done {
  margin-top: 8px;
  font-size: 13px;
  color: #c5fff0;
}
.cf-error {
  margin-top: 8px;
  font-size: 13px;
  color: #ffdddd;
}

/* フッター */
.contact-footer {
  text-align: center;
  color: #888;
  padding: 36px 0 48px;
  font-size: 12px;
}

@media (max-width: 700px) {
  /* ← video は残す */
  .video-background .bg-left,
  .video-background .logo,   /* ← これを追加！ */
  .fixed-links,
  .fixed-message,
  .seam-cover {
    display: none !important;
  }

  /* video 背景は残す */
  .video-background .bg-video {
    display: block !important;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
  }

  body {
    background: #000;
  }
  .wrap {
    width: var(--wrapW);
    margin: 0 auto;
  }
  .lawyer-box {
    width: 100vw;
    margin-left: calc(50% - 50vw); /* 画面端まで広げる定番テク */
    margin-right: calc(50% - 50vw);
    margin-top: 28px;
    margin-bottom: 28px;
  }

  /* 2カラム・均一なタイル、隙間は小さめ */
  .lawyer-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 0 12px; /* 端がピタッとしないよう内側余白 */
    box-sizing: border-box; /* 100vw 内で完結させる */
  }

  /* 各カードの高さを統一（比率指定）＆段差演出をオフ */
  .lawyer-item {
    aspect-ratio: 3 / 4; /* ここを好みで 4/5, 1/1 などに変更可 */
    border-radius: 12px;
    overflow: hidden;
    transform: none !important; /* nth-child の上下ズレを打ち消す */
  }

  /* 画像はタイルいっぱいにフィット */
  .lawyer-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 中央トリミングで統一 */
    object-position: center;
    border-radius: 0; /* 親が角丸なのでここは不要 */
  }

  /* 中央の重ねテキストもスマホ用に少し小さめ */
  .lawyer-overlay {
    padding: 0 16px;
    font-size: clamp(13px, 3.8vw, 15px);
  }

  /* ===== Hamburger ===== */
  .hamburger {
    position: fixed;
    top: clamp(12px, 3vw, 18px);
    right: clamp(12px, 3vw, 18px);
    width: 42px;
    height: 42px;
    border: 0;
    background: rgba(0, 0, 0, 0.28);
    border-radius: 9999px;
    z-index: 1100; /* 背景動画より上 */
    display: grid;
    place-items: center;
    backdrop-filter: blur(4px);
    cursor: pointer;
  }
  .hamburger span,
  .hamburger span::before,
  .hamburger span::after {
    content: "";
    display: block;
    width: 20px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    position: relative;
    transition:
      transform 0.25s ease,
      opacity 0.25s ease;
  }
  .hamburger span::before {
    position: absolute;
    top: -6px;
  }
  .hamburger span::after {
    position: absolute;
    top: 6px;
  }

  /* ドロワー */
  .drawer {
    position: fixed;
    inset: 0;
    width: 78vw; /* 画像の雰囲気に近い幅 */
    margin-left: auto; /* 右寄せ */
    height: 100svh;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
    z-index: 1200;
    /* 半透明パープル＋ぼかし */
    background: linear-gradient(180deg, rgba(181, 109, 206, 0.6), rgba(118, 39, 158, 0.6));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-inline: 24px;
  }
  .drawer.open {
    transform: translateX(0);
  }

  .drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1190;
  }
  .drawer-logo {
    position: absolute;
    top: 20px;
    left: 20px;
    width: clamp(180px, 25vw, 240px);
    height: auto;
    object-fit: contain;
  }

  /* 閉じる(X) */
  .drawer-close {
    position: absolute;
    top: clamp(14px, 3vw, 20px);
    right: clamp(14px, 3vw, 20px);
    width: 42px;
    height: 42px;
    border: 0;
    background: transparent;
    cursor: pointer;
  }
  .drawer-close::before,
  .drawer-close::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 26px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
  }
  .drawer-close::before {
    transform: rotate(45deg);
  }
  .drawer-close::after {
    transform: rotate(-45deg);
  }

  /* メニュー */
  .drawer-list {
    list-style: none;
    padding: 0 24px;
    margin: auto 0;
    display: flex;
    flex-direction: column;
    gap: 28px;
    text-align: left;
  }
  .drawer-list a {
    color: #fff;
    text-decoration: none;
    font-size: clamp(16px, 4.6vw, 18px);
    letter-spacing: 0.02em;
  }
  .drawer-list a:active {
    opacity: 0.8;
  }

  /* 開いている間はハンバーガーを隠す＆ボディスクロール停止 */
  body.menu-open .hamburger {
    opacity: 0;
    pointer-events: none;
  }
  body.menu-open {
    overflow: hidden;
    height: 100svh;
  }
}

/* PCでも使えます。スマホだけにしたい場合はこのボタンを非表示に */
@media (min-width: 700px) {
  .hamburger {
    display: none;
  }
  .drawer,
  .drawer-backdrop {
    display: none !important;
  }
}
/* ===== LINE 友だち追加ボタン ===== */
.line-float {
  position: fixed;
  bottom: 50px;
  right: 50px;
  z-index: 2000;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background-color: #4cc764;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  text-decoration: none;
  overflow: visible;
  opacity: 0;
  transform: scale(0.8);
  animation:
    lineFadeIn 1s ease-out 0.5s forwards,
    lineFloat 3s ease-in-out infinite;
  cursor: pointer;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.line-float:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

/* アイコン中央配置 */
.line-icon {
  position: absolute;
  width: 70%;
  height: auto;
  z-index: 2;
}

/* 円周テキスト */
.line-circle-text {
  position: absolute;
  width: 100%;
  height: 100%;
  font-weight: 600;
  transform: rotate(0deg);
  animation: spinCircle 15s linear infinite;
  z-index: 1;
}

/* 円周テキストがゆっくり回転 */
@keyframes spinCircle {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 出現アニメーション */
@keyframes lineFadeIn {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ゆらゆらアニメーション */
@keyframes lineFloat {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-6px) scale(1.03);
  }
}

/* スマホ対応（位置・サイズアップ） */
@media (max-width: 700px) {
  .line-float {
    bottom: 16px;
    right: 16px;
    width: 80px;
    height: 80px;
  }
  .line-icon {
    width: 54%;
  }
  .line-circle-text text {
    font-size: 9px;
  }
}

/* ===== カスタムセレクト（矢印付き） ===== */
.select-wrap {
  position: relative;
  display: block;
}

/* セレクト本体：ダーク背景＋余白を矢印分広げる */
.select-wrap select {
  width: 100%;
  padding: 12px 40px 12px 12px; /* → 右に矢印用の余白 */
  font-size: 14px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  outline: none;
  transition: box-shadow 0.2s, border-color 0.2s;
  appearance: none;
  -webkit-appearance: none; /* iOS/Safari */
  position: relative;
  z-index: 1; /* 背景より前面 */
}

/* option の色を強制（ドロップダウンが白地でも読める） */
.select-wrap select option {
  background: #111;
  color: #fff;
}

/* ホバー＆フォーカス */
.select-wrap select:hover {
  border-color: rgba(255, 255, 255, 0.28);
}
.select-wrap select:focus-visible {
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15);
}

/* 疑似要素で下向き矢印（くの字） */
.select-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 12px;
  width: 10px;
  height: 10px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translateY(-50%) rotate(45deg);
  pointer-events: none; /* クリックを邪魔しない */
  opacity: 0.85;
}

.contact-section,
.contact-form {
  position: relative;
  z-index: 100; /* ← かなり高めに設定 */
}

/* フォーカス時、矢印の明度も少し上げる（サポート環境では has() で） */
@supports (selector(:has(*))) {
  .select-wrap:has(select:focus-visible)::after {
    opacity: 1;
  }
}

/* 無効時 */
.select-wrap select:disabled {
  color: #aaa;
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}
.select-wrap select:disabled + .select-wrap::after { opacity: 0.5; }

/* 2カラム行（メール/電話）の高さを揃える */
@media (min-width: 760px) {
  .cf-grid {
    position: relative;
    padding-bottom: 18px; /* 下に出す注意文の分だけ余白を確保 */
    align-items: start;   /* 上端を揃える */
  }

  /* メール欄の注意文を行の外側に配置（2カラム共通の下部） */
  .cf-grid .cf-hint {
    position: absolute;
    top: 100%;
    left: 0;
    margin: 6px 0 0;
    width: 100%;
  }
  .cf-grid{
    position: relative;
    padding-bottom: 28px; /* 注意文の高さぶん確保（以前の18px→28px） */
    margin-bottom: 14px;  /* 行としても少し余白を持たせる */
    align-items: start;
  }
  .cf-grid .cf-hint{
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 6px;   /* 行の直下にきれいに配置 */
    width: 100%;
  }
  /* 次の行（ご相談の種類）を下にオフセットして重なり防止 */
  .cf-grid + .cf-row{
    margin-top: 12px;
  }
}