/*
Theme Name: AnchorS
Author: InnovatIon Inc.
Description: 3x3 Grid Swipe Landing Page Theme.
Version: 1.0
*/

/* ---- 【最上部に上書き】HTML・Bodyの余白完全リセット ---- */
html, body {
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
  height: 100dvh; /* 画面の高さぴったりに合わせる */
}

body {
  background: #15171c;
  font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* 
  WordPressにログインしている際、画面最上部に自動出力される
  「黒い管理バー」が原因で上に32pxほどの無駄な余白（隙間）が空いてしまう現象を強制停止します。
*/
html {
  margin-top: 0 !important;
}
#wpadminbar {
  display: none !important; /* 管理画面のバーをフロントページ上で非表示にする（下請け案件の確認時に必須の処理です） */
}

/* 仮想スマホ画面（.stage）の高さが画面を突き抜けないように制御 */
.frame-shell {
  width: 100%;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 50% -10%, #1e222c 0%, transparent 60%), #15171c;
  margin: 0 !important;
  padding: 0 !important;
}

/* ---- 新設：ヘッダー全体（背景の青色グラデーション） ---- */
.site-header {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 90px; /* ヘッダーの高さ */
  z-index: 20;
  /* 上部が濃いネイビー、下に向かって透明になるグラデーション */
  background: linear-gradient(to bottom, rgba(11, 23, 62, 0.95) 0%, rgba(11, 23, 62, 0.6) 60%, transparent 100%);
  display: flex;
  align-items: center;
}

/* ヘッダー内部のレイアウト調整（500px幅のstage内で綺麗に収める） */
.header-inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between; /* ロゴとナビを左右に割り振り */
  padding: 0 16px;
}

/* ---- 左側：ロゴのスタイリング ---- */
.header-logo {
  display: flex;
  align-items: center;
  height: 100%;
}
.header-logo img {
  height: 48px; /* ロゴの高さ */
  width: auto;
  object-fit: contain;
}

/* ---- 中央：グローバルナビの位置調整（元の絶対配置をヘッダー内に最適化） ---- */
.site-header .gnav {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* ヘッダーの中央にぴったり配置 */
  margin: 0;
}

/* 元の「i」ボタン（info-btn）の位置をヘッダーの下に避ける、または微調整 */
.info-btn {
  top: 105px !important; /* ヘッダー（90px）に被らないように下にずらします */
}


  .frame-shell{
    width:100%; height:100dvh;
    display:flex; align-items:center; justify-content:center;
    background:radial-gradient(ellipse at 50% -10%, #1e222c 0%, transparent 60%), #15171c;
  }
  .stage{
    position:relative;
    width:500px; height:870px;
    flex:none;
    overflow:hidden;
    background:#000;
    box-shadow:0 40px 90px -20px rgba(0,0,0,.75);
    transform-origin:center center;
  }

  /* ---- ヘッダー：グローバルナビ（横3トピック） ---- */
  .gnav{
    position:absolute; left:50%; top:14px; transform:translateX(-50%);
    z-index:20; display:flex; gap:4px;
    background:rgba(0,0,0,.45); padding:5px; border-radius:999px;
    backdrop-filter:blur(4px); border:1px solid rgba(255,255,255,.12);
  }
  .gnav button{
    border:none; background:transparent; cursor:pointer;
    color:rgba(255,255,255,.65); font-size:13px; font-weight:700;
    padding:7px 11px; border-radius:999px; white-space:nowrap;
    transition:background .2s, color .2s;
  }
  .gnav button.active{ background:#FBF000; color:#111; }

  /* ---- 現在地ドット（縦一列・トピック内の縦位置のみ） ---- */
  .dots{
    position:absolute; right:14px; top:50%; transform:translateY(-50%);
    display:flex; flex-direction:column; gap:10px; z-index:16;
  }
  .dots button{
    width:6px; height:6px; border-radius:50%;
    background:rgba(255,255,255,.4); border:none; padding:0; cursor:pointer;
    transition:background .25s, transform .25s;
  }
  .dots button.active{ background:#fff; transform:scale(1.6); }

  /* ---- スワイプヒント ---- */
  .hint{
    position:absolute; left:50%; bottom:16px; transform:translateX(-50%);
    display:flex; flex-direction:column; align-items:center; gap:.3rem;
    z-index:16; color:rgba(255,255,255,.85); font-size:11px; letter-spacing:.1em;
    transition:opacity .5s ease; text-shadow:0 1px 4px rgba(0,0,0,.6);
  }
  .hint.hidden{ opacity:0; }
  .hint svg{ animation:bob 1.6s ease-in-out infinite; }
  @keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(6px);}}

  .info-btn{
    position:absolute; left:14px; top:18px; z-index:20;
    display:flex; align-items:center; justify-content:center;
    width:28px; height:28px; border-radius:50%;
    background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.25);
    color:#fff; cursor:pointer; backdrop-filter:blur(3px);
  }
  .info-btn svg{ width:13px; height:13px; }

  /* ---- グリッド本体：横スクロール（トピック）× 各列の中に縦スクロール（セクション） ---- */
  .grid{
    position:absolute; inset:0;
    display:flex; flex-direction:row;
    overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }
  .grid::-webkit-scrollbar{ display:none; }

  .col{
    flex:none; width:500px; height:870px;
    position:relative; overflow:hidden;
    scroll-snap-align:start; scroll-snap-stop:always;
  }
  .colscroll{
    position:absolute; inset:0;
    overflow-y:auto; overflow-x:hidden;
    scroll-snap-type:y mandatory;
    scrollbar-width:none;
  }
  .colscroll::-webkit-scrollbar{ display:none; }

  .cell{
    position:relative;
    width:500px; height:870px;
    scroll-snap-align:start; scroll-snap-stop:always;
    overflow:hidden; background:#000;
  }
  .cell video{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover; object-position:center center;
    background:#000;
  }

  /* インタビュー用の再生ボタンオーバーレイ */
  .cell.interview .playbtn{
    position:absolute; left:50%; top:44%; transform:translate(-50%,-50%); z-index:4;
    width:64px; height:64px; border-radius:50%;
    background:rgba(17,42,112,.55); border:2px solid rgba(255,255,255,.85);
    display:flex; align-items:center; justify-content:center;
    backdrop-filter:blur(2px); cursor:pointer; padding:0;
  }
  .cell.interview .playbtn.hidden{ display:none; }
  .cell.interview .vidtag{
    position:absolute; right:16px; bottom:16px; z-index:4;
    background:rgba(0,0,0,.5); color:#fff; font-size:11px; font-weight:700;
    padding:5px 10px; border-radius:999px; letter-spacing:.04em; pointer-events:none;
  }
  .cell.interview .vidtag.hidden{ display:none; }

  /* ---- infoパネル ---- */
  .panel{
    position:absolute; inset:auto 0 0 0; z-index:30;
    background:#181c26; color:#dfe4ea;
    border-top:1px solid rgba(255,255,255,.14);
    max-height:88%; overflow-y:auto;
    padding:1.3rem 1.3rem 1.6rem;
    transform:translateY(100%);
    transition:transform .35s cubic-bezier(.2,.8,.2,1);
    box-shadow:0 -20px 60px rgba(0,0,0,.5);
  }
  .panel.open{ transform:translateY(0); }
  .panel h3{ font-size:1.05rem; margin:0 0 .2rem; color:#fff; }
  .panel .sub{ font-size:.72rem; color:#9aa3b1; margin-bottom:1rem; }
  .panel-close{
    position:absolute; top:1.1rem; right:1.2rem; background:none; border:none;
    color:#9aa3b1; font-size:1.1rem; cursor:pointer; line-height:1;
  }
  .panel p{ font-size:.82rem; line-height:1.85; color:#c3c9d2; }
  .panel .tag{
    display:inline-block; font-size:.68rem; font-weight:700; color:#0c0e12;
    background:#FBF000; border-radius:4px; padding:1px 7px; margin-right:6px;
  }

/* ===================================================
   ENTRYバナー（公式キラン ＆ 公式呼吸パルス100%完全同期版）
=================================================== */

/* 大枠の共通配置設定（新設した外箱の指定） */
.fixed-entry-wrapper {
  position: absolute !important;
  z-index: 25 !important;
  display: block !important;
  box-sizing: border-box !important;
  overflow: hidden !important; /* 光の帯がバナーの外にはみ出さないようにマスク */
}

/* リンクボタンの基本サイズリセット */
.fixed-entry-img-btn {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  text-decoration: none !important;
}
/* ===================================================
   ENTRYバナー（公式キラン ＆ 公式呼吸パルス100%完全同期版）
=================================================== */

/* 大枠の共通配置設定（新設した外箱の指定） */
.fixed-entry-wrapper {
  position: absolute !important;
  z-index: 25 !important;
  display: block !important;
  box-sizing: border-box !important;
  overflow: hidden !important; /* 光の帯がバナーの外にはみ出さないようにマスク */
}

/* リンクボタンの基本サイズリセット */
.fixed-entry-img-btn {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  text-decoration: none !important;
}


/* ---------------------------------------------------
   ① FVバナー専用：【中央寄せ ＆ 公式キラン（shimmerBefore）】
--------------------------------------------------- */
.fixed-entry-wrapper.fv-wrapper {
  left: 50% !important;
  bottom: 24px !important;
  transform: translateX(-50%) !important; /* JavaScriptの干渉を受けない中央寄せ */
  width: 86%; 
  max-width: 430px;
  border-radius: 12px;
}

.fixed-entry-wrapper.fv-wrapper img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* 公式の「キラン（:before）」を完全同期 */
.fixed-entry-wrapper.fv-wrapper.anchors-shimmer-animation:before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: rgba(255,255,255,.5);
  transform: skewX(-20deg);
  transition: opacity .3s;
  animation: shimmerBefore 1s ease infinite !important; /* 公式の1秒キランループ */
}

@keyframes shimmerBefore {
  0% { left: -100%; }
  to { left: 100%; }
}


/* ---------------------------------------------------
   ② 2〜9ページ：右下ENTRYバナーの縮小・拡大
--------------------------------------------------- */

.fixed-entry-wrapper.other-wrapper {
  right: 12px !important;
  bottom: 0 !important;
  left: auto !important;

  width: 35% !important;
  max-width: 260px;
  border-radius: 6px;

  /* 底面の位置を保ちながら伸縮 */
  transform-origin: center bottom !important;

  /* 前回の上下移動を解除 */
  translate: 0 0 !important;

  animation: anchorsEntryPulse 1.5s ease-in-out infinite !important;
}

/* 画像の基本設定 */
.fixed-entry-wrapper.other-wrapper img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: 6px;

  animation: none !important;
}

.fixed-entry-wrapper.other-wrapper:hover img {
  filter: brightness(1.05);
}

/* 通常サイズ → 縮小 → 通常サイズ */
@keyframes anchorsEntryPulse {
  0%, 100% {
    scale: 1;
  }

  50% {
    scale: 0.95;
  }
}

/* 動きを減らす設定をしている端末では停止 */
@media (prefers-reduced-motion: reduce) {
  .fixed-entry-wrapper.other-wrapper {
    animation: none !important;
    scale: 1;
  }
}

/* インタビュー動画：音声切り替えボタン */
.cell.interview .video-sound-toggle {
  position: absolute;
  right: 16px;
  bottom: 110px;
  z-index: 26;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  min-width: 128px;
  min-height: 56px;
  padding: 10px 14px;
  box-sizing: border-box;

  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  background: rgba(23, 45, 115, 0.9);
  color: #fff;

  font: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}

.video-sound-toggle svg {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

.video-sound-toggle:focus-visible {
  outline: 3px solid #fff000;
  outline-offset: 3px;
}

/* 音声ボタンをアイコンだけの丸型にする */
.cell.interview .video-sound-toggle {
  width: 56px;
  min-width: 56px;
  height: 56px;
  padding: 0;
  gap: 0;
  border-radius: 50%;
}

/* ===================================================
   会社概要（03-company）リンク＆アイコン配置指定
=================================================== */

/* 会社概要画面全体の基準設定 */
.company-section {
  position: relative !important;
}

/* 共通設定：動画の上に完全に重ねる */
.company-link-btn {
  position: absolute !important;
  z-index: 20 !important;
  box-sizing: border-box;
  text-decoration: none;
}

/* ① コーポレートボタン（赤丸の位置：社名のすぐ右隣） */
.corporate-btn {
  top: 280px; /* 画像の「株式会社AnchorS」の右側の高さにピタッと合わせます */
  left: 325px; /* 社名テキストのすぐ右横の位置 */
  width: 24px;  /* アイコンの適切なサイズ */
  height: 24px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.corporate-btn:hover {
  transform: scale(1.15); /* ホバーした時に少しポップに拡大 */
}

/* SVGアイコン自体のサイズとカラー制御（現行サイトの美しい青に設定） */
.corporate-btn .link-icon {
  width: 100%;
  height: 100%;
}
.corporate-btn .link-icon path {
  fill: #1d71b8 !important; /* 現行サイトのブランドカラーの青色に自動同期 */
}

/* ② Google MAPリンク（赤枠の「所在地欄」全体を覆う透明な座布団） */
.map-btn {
  top: 592px;  /* 「〒701-3202 岡山県...」が配置されている枠の上端の高さ */
  left: 145px; /* 「所在地」の文字を避けた、住所テキストが始まる左端の位置 */
  width: 320px; /* 住所の文字全体をすっぽりカバーする横幅 */
  height: 70px;  /* 2行分の住所を確実にタップできる縦幅 */
  background: rgba(255, 0, 0, 0); /* 完全に透明（位置調整時はここを rgba(255,0,0,0.2) などにすると赤く透けて確認しやすくなります） */
  cursor: pointer;
}
.map-btn:hover {
  background: rgba(29, 113, 184, 0.08) !important; /* ホバーした時に、住所の背景がほんのり青みがかってクリック感を演出します */
  border-radius: 4px;
}


/* ===================================================
   Contactページ：白背景・カラー完全同期デザイン
=================================================== */

/* 500px幅の.stage内で、ヘッダー（90px）の下からスタートして縦スクロールするエリア */
.contact-scroll-area {
  position: absolute;
  inset: 154px 0 0 0; 
  background: #ffffff !important; /* ページ全体の背景を白に変更 */
  overflow-y: auto;
  overflow-x: hidden;
  padding: 36px 24px 60px;
  box-sizing: border-box;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.contact-scroll-area::-webkit-scrollbar { display: none; }

/* タイトルエリア（ENTRY / CONTACT と コンタクトフォーム） */
.contact-header-title {
  text-align: center;
  margin-bottom: 36px;
}
.contact-header-title h2 {
  font-family: 'Arial Black', Impact, sans-serif;
  font-size: 22px;
  font-weight: 900;
  color: #1d71b8; /* タイトルは本編のメインカラーである青に変更 */
  margin: 0;
  letter-spacing: 0.05em;
}
.contact-header-title .sub {
  font-size: 11px;
  color: #666666; /* サブタイトルを濃いグレーに変更 */
  margin: 4px 0 0;
  font-weight: 700;
  letter-spacing: 0.03em;
}

/* フォーム全体のフォントと基本の文字色を「黒（濃いグレー）」に設定 */
.contact-form-body {
  color: #333333 !important;
  font-size: 13px;
  font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
}

/* 項目ごとのまとまり */
.contact-form-body p {
  margin: 0 0 24px 0 !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 項目名（お名前、メールアドレスなど）のフォントサイズとカラー */
.contact-form-body p strong,
.contact-form-body label {
  font-size: 13px !important; /* 現行サイトのサイズ感に同期 */
  font-weight: 700 !important;
  color: #222222 !important; /* しっかり読める黒に設定 */
}

/* フォーム入力欄（input / textarea / select）の美化（白背景用） */
.contact-form-body input[type="text"],
.contact-form-body input[type="email"],
.contact-form-body input[type="tel"],
.contact-form-body input[type="date"],
.contact-form-body textarea,
.contact-form-body select {
  width: 100% !important;
  background: #f7f9fc !important; /* ほんのりグレーがかった清潔感のある白 */
  border: 1.5px solid #dcdcdc !important; /* 薄いグレーの枠線 */
  border-radius: 6px !important;
  padding: 12px 14px !important;
  box-sizing: border-box !important;
  color: #222222 !important; /* 入力文字は黒 */
  font-size: 13px !important;
  transition: border-color 0.2s, background-color 0.2s;
  -webkit-appearance: none;
}

/* フォーカス時に本編の青色（#1d71b8）に光る */
.contact-form-body input:focus,
.contact-form-body textarea:focus,
.contact-form-body select:focus {
  outline: none !important;
  border-color: #1d71b8 !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(29, 113, 184, 0.15) !important;
}

/* チェックボックス・ラジオボタンのテキスト色 */
.contact-form-body .wpcf7-list-item {
  display: inline-block;
  margin: 6px 16px 6px 0;
}
.contact-form-body .wpcf7-list-item-label {
  color: #333333 !important;
  margin-left: 6px;
  font-size: 13px;
  font-weight: 500;
}

/* 送信ボタン（「登録する」ボタン）の完全美化 */
.contact-form-body input[type="submit"] {
  width: 100% !important;
  height: 54px !important;
  background: #FBF000 !important; /* 視認性の高い黄色をキープ */
  border: none !important;
  border-radius: 8px !important;
  color: #111111 !important; /* 文字は黒 */
  font-size: 14px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15) !important;
  transition: transform 0.2s, opacity 0.2s !important;
  margin-top: 20px !important;
  -webkit-appearance: none;
}

.contact-form-body input[type="submit"]:hover {
  transform: scale(1.01);
  opacity: 0.9;
}

/* 日付が入力されたら「第1候補・第2候補」を非表示 */
.contact-form-body input[type="date"].has-date::before {
  display: none !important;
  opacity: 0 !important;
}

/* 入力された日付を表示 */
.contact-form-body input[type="date"].has-date,
.contact-form-body input[type="date"].has-date::-webkit-datetime-edit {
  color: #333333 !important;
  -webkit-text-fill-color: #333333 !important;
}

/* トップページへ戻るリンク */
.contact-page-title {
  margin-top: 90px;
  text-align: left;
  background-color: #f7f9fc;
  padding: 20px;
}
.back-to-home-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #333333; /* リンクをグレーに変更 */
  font-size: 23px;
  text-decoration: none;
  font-weight: 700;
  transition: color 0.2s;
}

/* ===================================================
   固定送信エリア
=================================================== */

.contact-scroll-area {
  padding-bottom: 260px !important;
}

.contact-form-body .form-submit-area {
  position: fixed !important;

  left: 50% !important;
  /* 【ここを 12px から 0 に書き換えています】 */
  bottom: 0 !important; 
  transform: translateX(-50%) !important;

  width: 100% !important;
  max-width: 500px !important;

  margin: 0 !important;
  padding: 16px 24px 0 !important;

  background: #ffffff !important;
  border-top: 1px solid #eeeeee !important;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05) !important;

  box-sizing: border-box !important;
  z-index: 99999 !important;

  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}


/* ===================================================
   同意欄
=================================================== */

.contact-form-body .agreement-row {
  width: 100% !important;
  text-align: center !important;
}


/*
 CF7が生成する
 wrap → acceptance → list-item → label
 をすべてインライン化
*/
.contact-form-body .agreement-row .wpcf7-form-control-wrap,
.contact-form-body .agreement-row .wpcf7-acceptance,
.contact-form-body .agreement-row .wpcf7-list-item,
.contact-form-body .agreement-row label {
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* ★チェックボックス＋文章を横並び */
.contact-form-body .agreement-row label {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;

  gap: 8px !important;

  white-space: nowrap !important;
}


/* CF7が生成する同意文章 */
.contact-form-body .agreement-row .wpcf7-list-item-label {
  display: inline !important;

  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* ===================================================
   チェックボックス
=================================================== */

.contact-form-body .agreement-row input[type="checkbox"] {
  -webkit-appearance: none !important;
  appearance: none !important;

  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;

  margin: 0 !important;
  padding: 0 !important;

  background-color: #ffffff !important;

  border: 1.5px solid #dcdcdc !important;
  border-radius: 3px !important;

  box-shadow: none !important;

  cursor: pointer !important;
}


/* チェック後もベタ塗りしない */
.contact-form-body .agreement-row input[type="checkbox"]:checked {
  background-color: #ffffff !important;
  border-color: #1d71b8 !important;

  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%231d71b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 8l3 3 7-7'/%3E%3C/svg%3E") !important;

  background-size: 14px 14px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}


/* ===================================================
   規約リンク
=================================================== */

.contact-form-body .agreement-row a {
  color: #1d71b8 !important;
  text-decoration: underline !important;
}


/* ===================================================
   登録ボタン
=================================================== */

.contact-form-body .submit-row {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.contact-form-body .submit-row p {
  margin: 0 !important;
}

.contact-form-body .submit-row input[type="submit"] {
  display: block !important;

  width: 100% !important;
  height: 54px !important;

  margin: 0 !important;
  padding: 0 !important;

  background-color: #FBF000 !important;

  border: none !important;
  border-radius: 8px !important;

  color: #111111 !important;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Noto Sans JP",
    sans-serif !important;

  font-size: 14px !important;
  font-weight: 800 !important;

  cursor: pointer !important;

  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15) !important;

  -webkit-appearance: none !important;
  appearance: none !important;
}


/* 同意前 */
.contact-form-body .submit-row input[type="submit"]:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

.form-submit-area .agreement-row p{
	margin:0 !important;
}

/* ---------------------------------------------------
   ★ポップアップ（モーダル）窓 ＆ タブ切り替えスタイリング
--------------------------------------------------- */
.policy-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6); /* 背景を暗転 */
  z-index: 100000; /* 最前面に固定表示 */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.policy-modal-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* ポップアップの小窓 */
.policy-modal-window {
  position: relative;
  width: 90%;
  max-width: 440px;
  background: #ffffff;
  border-radius: 12px;
  padding: 24px 20px 20px;
  box-sizing: border-box;
  color: #333333;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  animation: modalSlideUp 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes modalSlideUp {
  from { transform: translateY(20px); }
  to { transform: translateY(0); }
}

/* 右上の閉じるボタン */
.modal-close-btn {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  font-size: 24px;
  color: #999;
  cursor: pointer;
  line-height: 1;
  z-index: 10;
}
.modal-close-btn:hover { color: #333; }

/* 新設：タブボタンエリアのスタイリング */
.modal-tabs {
  display: flex;
  border-bottom: 2px solid #f2f4f8;
  margin-bottom: 16px;
  padding-right: 24px; /* 閉じるボタンと被らないように右に余白 */
}
.modal-tab-btn {
  background: none;
  border: none;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 700;
  color: #888888;
  cursor: pointer;
  position: relative;
  transition: color 0.2s;
}
/* 選択されている（active）タブの見た目（本編の青色に同期） */
.modal-tab-btn.active {
  color: #1d71b8;
}
.modal-tab-btn.active::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px; /* 親要素のborder-bottomと重ねる */
  width: 100%;
  height: 2px;
  background-color: #1d71b8;
}

/* 新設：タブコンテンツの表示・非表示の切り替え */
.modal-tab-content-item {
  display: none; /* 初期状態はすべて非表示 */
}
.modal-tab-content-item.active {
  display: block; /* activeクラスがついたものだけを表示 */
}

/* 規約文が入るスクロールエリア */
.modal-text-scroll {
  max-height: 280px; /* 長文になってもはみ出さない高さ */
  overflow-y: auto;
  font-size: 12px;
  line-height: 1.7;
  color: #555555;
  padding-right: 4px;
}
/* スクロールバーのカスタム（細くしてすっきり見せる） */
.modal-text-scroll::-webkit-scrollbar {
  width: 4px;
}
.modal-text-scroll::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}
.modal-text-scroll::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

/* ===================================================
   CF7のエラー・成功メッセージ（スクロールエリア内に綺麗に収める）
=================================================== */
.wpcf7-not-valid-tip {
  color: #ff3b30;
  font-size: 11px;
  margin-top: 4px;
}
.wpcf7-response-output {
  border: 2px solid #1d71b8 !important;
  background: #f7f9fc;
  color: #222222;
  border-radius: 6px;
  padding: 12px !important;
  margin: 20px 0 40px 0 !important; /* スクロール内で見切れないように下部余白を確保 */
  font-size: 12px;
  text-align: center;
}

/* ===================================================
   日付入力欄（date）のプレースホルダー
=================================================== */

/* ---- 日付入力欄（date）のプレースホルダーを第1・第2候補で出し分ける指定 ---- */
.contact-form-body input[type="date"].date-pick01,
.contact-form-body input[type="date"].date-pick02 {
  position: relative;
}

/* 共通：日付が未入力のときに、下の「年/月/日」の文字を白背景で隠す共通設定 */
.contact-form-body input[type="date"].date-pick01:invalid::before,
.contact-form-body input[type="date"].date-pick02:invalid::before,
.contact-form-body input[type="date"].date-pick01[value=""]::before,
.contact-form-body input[type="date"].date-pick02[value=""]::before {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #9aa3b1; /* 薄グレーのプレースホルダー文字色 */
  font-size: 13px;
  pointer-events: none; /* 文字の上からでもカレンダーを開けるようにする */
  background: #f7f9fc; /* 入力ボックスと同じ背景色で文字の後ろを隠す */
  width: calc(40% - 40px);
  display: block;
  z-index: 10;
}

/* 【出し分け】第1候補用のテキストを設定 */
.contact-form-body input[type="date"].date-pick01:invalid::before,
.contact-form-body input[type="date"].date-pick01[value=""]::before {
  content: "第1候補" !important;
}

/* 【出し分け】第2候補用のテキストを設定 */
.contact-form-body input[type="date"].date-pick02:invalid::before,
.contact-form-body input[type="date"].date-pick02[value=""]::before {
  content: "第2候補" !important;
}

/* クリック（フォーカス）された時や、日付が実際に入力された時はプレースホルダーテキストを完全に消す */
.contact-form-body input[type="date"].date-pick01:focus::before,
.contact-form-body input[type="date"].date-pick02:focus::before {
  display: none !important;
}

/* フォーム必須項目の*カラー */
.required{
	color:#C00;
}

/* ---- 【完全互換版】プルダウンメニュー（select）の下向き矢印を表示する指定 ---- */
.contact-form-body select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important; /* ブラウザ標準の矢印を完全に消去 */
  
  /* 右側に矢印を配置するための十分な余白を確保 */
  padding-right: 40px !important; 
  
  /* 
    【超重要】記号をすべて安全な英数字（URLエンコード）に変換したSVGデータです。
    これにより、WordPressやどのサーバー環境でも100%確実に画像と同じグレーの▼が右端に出現します。
    （※背景色の #f7f9fc とセットで上書き指定しています）
  */
  background: #f7f9fc url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20fill%3D%27%23666666%27%20d%3D%27M7%2010l5%205%205-5z%27%2F%3E%3C%2Fsvg%3E") no-repeat !important;
  background-position: calc(100% - 14px) center !important; /* 右端から14px、上下中央の位置に固定 */
  background-size: 20px 20px !important; /* 矢印の大きさ（サイズ感）の調整 */
  
  cursor: pointer !important;
}

/* IEなどの古いブラウザ向けの矢印消去の念押し設定 */
.contact-form-body select::-ms-expand {
  display: none !important;
}

/* ---- お問い合わせフォームのスマホはみ出し・見切れ強制補正 ---- */
.contact-scroll-area,
.contact-form-body,
.anchors-custom-form,
.wpcf7 {
  width: 100% !important;
  max-width: 500px !important; /* 絶対に500pxを超えないように固定 */
  box-sizing: border-box !important;
}

/* 各入力欄やテーブル構造がはみ出るのを強力に防止 */
.contact-form-body input[type="text"],
.contact-form-body input[type="email"],
.contact-form-body input[type="tel"],
.contact-form-body input[type="date"],
.contact-form-body textarea,
.contact-form-body select,
.contact-form-body .wpcf7-form-control {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* スマホ実機で横スクロール（ガタつき）が発生するのを禁止する */
.contact-scroll-area {
  overflow-x: hidden !important;
}

/* ===================================================
   ★コンタクトページのみに効かせる：見切れ・右側余白完全解消指定
=================================================== */

/* bodyに「page-template-page-contact」がついている時だけ、大元の外枠を強制的に画面横幅いっぱいに広げます */
body.page-template-page-contact,
body.page-template-page-contact html {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  min-width: 100% !important;
  height: 100dvh !important;
  overflow-x: hidden !important; /* 横スクロール（ガタつき）を強制禁止 */
}

body.page-template-page-contact .frame-shell {
  width: 100% !important;
  min-width: 100vw !important; /* 画面幅いっぱいに広げる指定をコンタクトページのみ強化 */
  height: 100dvh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important; /* 500pxのステージを必ず画面の真ん中に配置 */
  background: radial-gradient(ellipse at 50% -10%, #1e222c 0%, transparent 60%), #15171c;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

body.page-template-page-contact .stage {
  position: relative !important;
  width: 500px !important;
  max-width: 100% !important; /* 500pxより小さいスマホ実機では自動的に画面幅に縮小 */
  height: 870px !important;
  flex: none !important;
  overflow: hidden !important;
}

body.page-template-page-contact .contact-scroll-area {
  width: 100% !important;
  max-width: 500px !important;
  box-sizing: border-box !important;
}

/* ---- 【追加】上部タイトルの見切れ（潜り込み）を完全に解消する指定 ---- */
body.page-template-page-contact .contact-page-title {
  /* 固定ヘッダー（90px）の真下に文字が来るよう、上部 margin を確実に 90px に固定します */
  margin-top: 90px !important; 
  position: relative !important;
  z-index: 10 !important; /* ヘッダーの裏に潜り込まないように前面に出す */
}

body.page-template-page-contact .contact-scroll-area {
  /* タイトル帯が下に下がるため、フォーム全体の開始位置（inset）を 154px に再固定します */
  inset: 154px 0 0 0 !important; 
}