@charset "UTF-8";
/*--------------------------------------------------------------
  顔合わせページ 2026 改修の追加スタイル
  style.min.css（既存）は編集せず、追加・上書きはこのファイルで行う
  新規クラスは既存と衝突しないよう fg-（family-gathering）接頭辞
  ※ html { font-size: 62.5% } のため 1rem = 10px
--------------------------------------------------------------*/
/* 既存の slideleft アニメーション（初期位置 +100px）が画面外にはみ出して
   横スクロールが出るのを防ぐ。
   clip はスクロールコンテナを作らないので $(window).scroll の演出に影響しない。
   ※ hidden は使わないこと（html,body{height:100%} のため body がスクロール
     コンテナになり、スクロール演出が動かなくなる） */
html,
body {
  overflow-x: clip;
}

.fg-plan,
.fg-extra {
  --fg-gold: #b89b5e;
  --fg-darkgold: #967b42;
  --fg-lightgold: #f7f4eb;
  --fg-cream: #faf8f5;
  --fg-dark: #2c2a29;
  --fg-muted: #6e6a66;
  --fg-border: #e8e2d9;
}

/*--------------------------------------------------------------
  ## Plan
--------------------------------------------------------------*/
/* 見出し内の span（1.4rem）より大きくならないように揃える */
.fg-plan-lead {
  font-size: 1.4rem;
  line-height: 2;
  text-align: center;
  margin-bottom: 2rem;
}

.fg-plan-container {
  display: flex;
  gap: 2.4rem;
  max-width: 150rem;
  margin: 0 auto;
  padding: 2rem;
  box-sizing: border-box;
}

.fg-plan-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e2dcd5;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}

.fg-plan-card:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}

.fg-plan-image {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #f0ede6;
}

.fg-plan-image img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.fg-plan-card:hover .fg-plan-image img {
  transform: scale(1.05);
}

.fg-plan-header {
  background: #fbf9f6;
  padding: 2rem;
  text-align: center;
  border-bottom: 1px solid #eee8e0;
}

.fg-plan-tag {
  display: inline-block;
  font-size: 1.2rem;
  line-height: 1.5;
  letter-spacing: 0.05em;
  padding: 0.4rem 1.2rem;
  background: #888;
  color: #fff;
  border-radius: 2rem;
  margin-bottom: 0.8rem;
}

.fg-plan-title {
  font-size: 2.2rem;
  line-height: 1.5;
  margin: 0.4rem 0;
  color: #333;
}

.fg-plan-price {
  font-size: 1.9rem;
  line-height: 1.5;
  font-weight: bold;
  color: var(--fg-gold);
  margin: 0;
}

.fg-plan-price span {
  font-size: 1.35rem;
  font-weight: normal;
  color: #666;
}

.fg-plan-body {
  padding: 2.4rem 2rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.fg-plan-desc {
  font-size: 1.45rem;
  line-height: 1.6;
  color: #555;
  margin-bottom: 2rem;
}

.fg-plan-menu {
  margin-top: auto;
  border-top: 1px dashed #e0e0e0;
  padding-top: 1.6rem;
}

.fg-plan-menu-title {
  font-weight: bold;
  font-size: 1.35rem;
  line-height: 1.5;
  color: #888;
  margin-bottom: 0.8rem;
  letter-spacing: 0.05em;
}

.fg-plan-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.fg-plan-menu li {
  font-size: 1.35rem;
  line-height: 1.5;
  color: #444;
  padding: 0.4rem 0;
  border-bottom: 1px solid #f5f5f5;
}

.fg-plan-menu li:last-child {
  border-bottom: none;
}

/* SP：横スワイプのカルーセル */
@media screen and (max-width: 768px) {
  .fg-plan-container {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    gap: 1.6rem;
    /* .inner の左右余白を打ち消して画面端までスクロールさせる */
    margin: 0 -2rem;
    padding: 2rem 1.6rem;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .fg-plan-container::-webkit-scrollbar {
    display: none;
  }

  .fg-plan-card {
    flex: 0 0 92%;
    scroll-snap-align: center;
  }
}

/*--------------------------------------------------------------
  ## Option / Special Service 共通
--------------------------------------------------------------*/
.fg-extra {
  max-width: 106.4rem;
  margin-top: 6.4rem;
  margin-bottom: 4rem;
  color: var(--fg-dark);
}

.fg-extra > section + section {
  margin-top: 6.4rem;
}

.fg-sec-head {
  text-align: center;
  margin-bottom: 3.2rem;
}

.fg-sec-head-en {
  display: block;
  color: var(--fg-gold);
  font-size: 1.4rem;
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}

.fg-sec-head h2 {
  font-size: 2.4rem;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: 0.025em;
  color: var(--fg-dark);
}

.fg-sec-head-line {
  width: 4.8rem;
  height: 2px;
  background: var(--fg-gold);
  margin: 1.2rem auto 0;
}

.fg-sec-head p {
  font-size: 1.4rem;
  line-height: 1.8;
  color: var(--fg-muted);
  margin-top: 1.2rem;
}

.fg-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.4rem;
}

.fg-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--fg-border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.3s ease;
}

.fg-card:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.fg-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: var(--fg-lightgold);
  color: var(--fg-gold);
}

.fg-icon svg {
  width: 2rem;
  height: 2rem;
}

@media screen and (min-width: 769px) {
  .fg-grid {
    grid-template-columns: 1fr 1fr;
  }

  .fg-sec-head-en {
    font-size: 1.6rem;
  }

  .fg-sec-head h2 {
    font-size: 3rem;
  }
}

/*--------------------------------------------------------------
  ## Option
--------------------------------------------------------------*/
.fg-option-card {
  display: flex;
  flex-direction: column;
}

.fg-option-img {
  position: relative;
  min-height: 16rem;
  background: #e5e5e5;
}

.fg-option-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.fg-option-text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2rem;
}

.fg-option-text h3 {
  font-size: 1.8rem;
  line-height: 1.5;
  font-weight: bold;
  color: var(--fg-dark);
  margin-bottom: 0.8rem;
}

.fg-option-price {
  color: var(--fg-gold);
  font-size: 1.8rem;
  line-height: 1.5;
  font-weight: bold;
  margin-bottom: 1.2rem;
}

.fg-option-price span {
  font-size: 1.4rem;
  font-weight: normal;
  color: var(--fg-muted);
}

.fg-option-desc {
  font-size: 1.4rem;
  line-height: 1.625;
  color: var(--fg-muted);
  margin-bottom: 1.6rem;
}

.fg-option-note {
  border-top: 1px solid var(--fg-border);
  padding-top: 1.2rem;
}

.fg-option-note li {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--fg-muted);
}

.fg-option-note li + li {
  margin-top: 0.4rem;
}

@media screen and (min-width: 641px) {
  .fg-option-card {
    flex-direction: row;
  }

  .fg-option-img {
    width: 40%;
    min-height: 100%;
  }

  .fg-option-text {
    width: 60%;
  }
}

@media screen and (min-width: 769px) {
  .fg-option-text {
    padding: 2.4rem;
  }
}

/*--------------------------------------------------------------
  ## Special Service
--------------------------------------------------------------*/
.fg-service-grid {
  margin-bottom: 3.2rem;
}

.fg-service-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2.4rem;
}

.fg-service-card.is-featured {
  border: 2px solid rgba(184, 155, 94, 0.6);
}

.fg-service-ribbon {
  position: absolute;
  right: -4.8rem;
  top: 2.4rem;
  background: var(--fg-gold);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1.5;
  font-weight: bold;
  letter-spacing: 0.05em;
  text-align: center;
  padding: 0.4rem 4.8rem;
  transform: rotate(45deg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.fg-service-label {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--fg-lightgold);
  color: var(--fg-darkgold);
  font-size: 1.4rem;
  line-height: 1.5;
  font-weight: 600;
  padding: 0.6rem 1.2rem;
  border-right: 1px solid rgba(184, 155, 94, 0.3);
  border-bottom: 1px solid rgba(184, 155, 94, 0.3);
  border-bottom-right-radius: 8px;
}

.fg-service-main {
  margin-top: 1.6rem;
}

.fg-service-ttl {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: 1.2rem;
}

/* 「人気 No.1」リボンと見出しが重ならないように */
.is-featured .fg-service-ttl {
  padding-right: 3.6rem;
}

.fg-service-ttl h3 {
  font-size: 2rem;
  line-height: 1.5;
  font-weight: bold;
  letter-spacing: 0.025em;
  color: var(--fg-dark);
}

.fg-service-desc {
  font-size: 1.4rem;
  line-height: 1.625;
  color: var(--fg-dark);
  margin-bottom: 1.6rem;
}

.fg-service-point {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.8rem;
  background: var(--fg-cream);
  border: 1px solid rgba(232, 226, 217, 0.7);
  border-radius: 8px;
  padding: 1.4rem;
  font-size: 1.4rem;
  line-height: 1.5;
  font-weight: 500;
  color: var(--fg-darkgold);
}

.fg-service-point svg {
  width: 1.6rem;
  height: 1.6rem;
  flex-shrink: 0;
  color: var(--fg-gold);
}

/* ACCESS SUPPORT（横長カード） */
.fg-access {
  padding: 2.4rem;
}

.fg-access-inner {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.fg-access-head {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-shrink: 0;
}

.fg-access-en {
  display: block;
  font-size: 1.4rem;
  line-height: 1.5;
  font-weight: bold;
  letter-spacing: 0.05em;
  color: var(--fg-gold);
}

.fg-access-head h3 {
  font-size: 1.8rem;
  line-height: 1.5;
  font-weight: bold;
  color: var(--fg-dark);
}

.fg-access-body {
  border-top: 1px solid var(--fg-border);
  padding-top: 1.6rem;
  font-size: 1.4rem;
  line-height: 1.625;
  color: var(--fg-muted);
}

.fg-access-body p + p {
  margin-top: 0.8rem;
}

.fg-access-body strong {
  font-weight: 500;
  color: var(--fg-dark);
}

.fg-access-body .fg-em {
  font-weight: bold;
  color: var(--fg-dark);
  text-decoration: underline;
  text-decoration-color: var(--fg-gold);
  text-underline-offset: 4px;
}

@media screen and (min-width: 769px) {
  .fg-service-card {
    padding: 3.2rem;
  }

  .fg-access {
    padding: 2.8rem;
  }

  .fg-access-inner {
    flex-direction: row;
    align-items: center;
    gap: 2.4rem;
  }

  .fg-access-head {
    width: 33.333%;
  }

  .fg-access-body {
    width: 66.666%;
    border-top: 0;
    border-left: 1px solid var(--fg-border);
    padding-top: 0;
    padding-left: 2.4rem;
  }
}

/*--------------------------------------------------------------
  ## Contact（フォーム見出し）
--------------------------------------------------------------*/
/* 既存の top:-40px で "Contact" に近すぎるため、少し余白を空ける */
.mw_wp_form .section-title .flow01 {
  margin-top: 1.6rem;
}

/* フォーム内のプルダウン
   既存CSSの SP 用 -webkit-appearance:none で矢印が消えるため、矢印を描き直す */
.mw_wp_form select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 3.6rem;
  background: #f9fafb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23777' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 1.2rem center / 1.2rem 0.8rem;
  cursor: pointer;
}

/* ご相談事項：既存の width:50% だと長い選択肢が切れるため全幅に */
.mw_wp_form select[name="相談事項"] {
  width: 100%;
}

/*--------------------------------------------------------------
  ## CTA（About・Point 直下の問い合わせボタン）
--------------------------------------------------------------*/
.fg-cta {
  margin-top: 8rem;
  padding: 0 2rem;
  text-align: center;
}

/* About 直下：サブ画像が section 下に約100pxはみ出すため、上下の余白を広めに */
.fg-cta.fg-cta-about {
  margin-top: 20rem;
  margin-bottom: 10rem;
}

.fg-cta-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 44.8rem;
  min-height: 5.6rem;
  padding: 1.2rem 4.4rem;
  box-sizing: border-box;
  background: #945838;
  border-radius: 3rem;
  box-shadow: 0 4px 12px rgba(148, 88, 56, 0.25);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* 右端の矢印（下向き：ページ下のフォームへ移動するため） */
.fg-cta-btn::after {
  content: "";
  position: absolute;
  right: 2.4rem;
  top: 50%;
  width: 0.8rem;
  height: 0.8rem;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translateY(-75%) rotate(135deg);
}

.fg-cta-btn:hover {
  background: #7d4a2f;
  box-shadow: 0 6px 16px rgba(148, 88, 56, 0.35);
}

@media screen and (max-width: 640px) {
  .fg-cta-btn {
    font-size: 1.5rem;
    padding: 1.2rem 4rem 1.2rem 2.4rem;
  }

  .fg-cta-btn::after {
    right: 2rem;
  }
}

/*--------------------------------------------------------------
  ## SP 追従ボタン（既存 60% / 40% を変更）
--------------------------------------------------------------*/
#follow-btn_sp .follow-btn_tel {
  width: 55%;
}

#follow-btn_sp .follow-btn_form {
  width: 45%;
}

/*--------------------------------------------------------------
  ## hero-box をクリックで About へ
--------------------------------------------------------------*/
/* hero-box（position:absolute）全体を覆う透明リンク */
.fg-hero-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/*--------------------------------------------------------------
  ## プラン選択（fg-plan.js）
--------------------------------------------------------------*/
.fg-plan-card {
  position: relative;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.fg-plan-card:focus-visible {
  outline: 2px solid var(--fg-gold);
  outline-offset: 3px;
}

/* 選択中：枠線を太らせるとレイアウトがずれるため box-shadow で縁取り */
.fg-plan-card.is-selected {
  border-color: #ddc04f;
  box-shadow: 0 0 0 3px #ddc04f, 0 6px 18px rgba(0, 0, 0, 0.1);
}

/* 右上の「このプランを選択中」リボン */
.fg-plan-card.is-selected::before {
  content: "このプランを選択中";
  position: absolute;
  top: 3.2rem;
  right: -5.6rem;
  z-index: 3;
  width: 22rem;
  padding: 0.4rem 0;
  background: #ddc04f;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  color: #fff;
  font-size: 1.3rem;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: center;
  animation: fgRibbonPopIn 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes fgRibbonPopIn {
  0% {
    opacity: 0;
    transform: rotate(40deg) scale(0.8);
  }
  100% {
    opacity: 1;
    transform: rotate(40deg) scale(1);
  }
}

/* 追従バー */
.fg-plan-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  /* 高さは #follow-btn_sp のボタン（50px）に合わせる：上下 5px + 中身 40px */
  padding: 0.5rem 0.8rem 0.5rem 1.2rem;
  padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
  margin: 0.1rem; /* #follow-btn_sp のボタンに合わせて 1px 余白と角丸 */
  border-radius: 4px;
  background: rgba(12, 77, 147, 0.97); /* #0c4d93 */
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
  color: #fff;
  transform: translateY(110%);
  visibility: hidden;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.4s, background-color 0.3s ease;
}

.fg-plan-bar.is-active {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s, background-color 0.3s ease;
}

/* ホバーで他のボタン同様にバー全体の色を濃くする */
.fg-plan-bar:hover {
  background: rgba(8, 56, 108, 0.97); /* #08386c */
}

.fg-plan-bar-link {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 4rem;
  padding: 0 2.4rem;
  color: #fff;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
}

.fg-plan-bar-selected {
  font-size: 1.1rem;
  opacity: 0.9;
}

.fg-plan-bar-cta {
  font-size: 1.5rem;
  font-weight: bold;
  letter-spacing: 0.05em;
}

/* フォームへ移動することを示す下向き矢印 */
.fg-plan-bar-link::after {
  content: "";
  position: absolute;
  right: 0.8rem;
  top: 50%;
  width: 0.8rem;
  height: 0.8rem;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translateY(-75%) rotate(135deg);
}

.fg-plan-bar-close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.6rem;
  height: 3.6rem;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 2.2rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.fg-plan-bar-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

@media screen and (min-width: 769px) {
  .fg-plan-bar {
    justify-content: center;
    padding: 0.5rem 2.4rem;
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
  }

  .fg-plan-bar-link {
    flex: 0 1 auto;
    flex-direction: row;
    gap: 1.6rem;
    min-width: 48rem;
    padding: 0 4rem;
  }

  .fg-plan-bar-selected {
    font-size: 1.5rem;
  }

  .fg-plan-bar-selected::after {
    content: "／";
    margin-left: 1.6rem;
  }

  .fg-plan-bar-cta {
    font-size: 1.7rem;
  }
}

/* 追従バー表示中は既存の追従ボタンを隠す
   #follow-btn_pc は script.js の fadeIn/fadeOut がインラインで opacity を触るため !important */
#follow-btn_sp {
  transition: transform 0.3s ease;
}

body.fg-plan-bar-open #follow-btn_sp {
  transform: translateY(calc(100% + 1rem));
}

/* フォーム〜フッターが見えている間は既存の追従ボタンを隠す（fg-plan.js で付与）
   ※ iOS でスクロール中に追従ボタンの下に隙間ができる問題も、フォーム周りでは出なくなる */
body.fg-form-in-view #follow-btn_sp {
  transform: translateY(calc(100% + 1rem));
}

body.fg-form-in-view #follow-btn_pc {
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none;
}

/* フッター下の余白（既存は追従ボタン分の 5rem）は不要
   追従ボタンはフッター表示中は隠れるため。確認・完了画面（フォームCVR ページ）でも余白が出なくなる */
.footer {
  padding-bottom: 0;
}

/* フォーム入力中（キーボード表示中）は追従ボタン・バーを出さない（fg-plan.js で付与） */
body.fg-input-focus #follow-btn_sp,
body.fg-input-focus .fg-plan-bar {
  display: none;
}

body.fg-plan-bar-open #follow-btn_pc {
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none;
}

/* プランカード：サービス料の注記（価格の直下） */
.fg-plan-note {
  margin-top: 0.6rem;
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--fg-muted);
}

/*--------------------------------------------------------------
  ## フォーム内プライバシーポリシー（MW WP Form 本文に記述）
--------------------------------------------------------------*/
.fg-privacy {
  margin: 4rem 0 4rem;
}

.fg-privacy-lead {
  font-size: 1.4rem;
  line-height: 1.8;
  text-align: left;
}

/* 本文はスクロール枠内に収める */
.fg-privacy-scroll {
  height: 24rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 2rem 2.4rem;
  background: #fff;
  border: 1px solid #ccc;
  color: #3d3d3d;
  font-size: 1.3rem;
  line-height: 1.8;
  text-align: left;
}

.fg-privacy-scroll:focus-visible {
  outline: 2px solid #945838;
  outline-offset: 2px;
}

.fg-privacy-block + .fg-privacy-block {
  margin-top: 2.4rem;
}

.fg-privacy-scroll h3 {
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.6;
  padding-bottom: 0.4rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid #e0e0e0;
}

.fg-privacy-scroll h4 {
  font-size: 1.35rem;
  font-weight: bold;
  line-height: 1.6;
  margin: 1.6rem 0 0.4rem;
}

.fg-privacy-scroll p + p,
.fg-privacy-scroll ul + p,
.fg-privacy-scroll ol + p {
  margin-top: 0.8rem;
}

.fg-privacy-scroll .fg-privacy-sub {
  margin-top: 0.8rem;
  font-weight: bold;
}

/* 既存の ul{list-style:none} を打ち消す */
.fg-privacy-scroll ul,
.fg-privacy-scroll ol {
  margin: 0.4rem 0 0;
  padding-left: 2em;
}

.fg-privacy-scroll ul {
  list-style: disc;
}

.fg-privacy-scroll ol {
  list-style: decimal;
}

.fg-privacy-scroll a {
  color: #945838;
  text-decoration: underline;
}

.fg-privacy-scroll .fg-privacy-date {
  margin-top: 1.2rem;
  text-align: right;
}

/* 同意チェック（案内文の直下・左揃え） */
.fg-privacy-consent {
  margin: 0.8rem 0 1.6rem;
  text-align: left;
}

/* 未チェック時のエラー（既存は dd 基準の absolute 配置のため、ここではチェックの下に表示） */
.fg-privacy-consent .error {
  position: static;
  width: fit-content;
  margin-top: 0.4rem;
  padding: 0.2rem 1rem;
  text-align: left;
}

.fg-privacy-consent .mwform-checkbox-field label {
  justify-content: flex-start;
}

.fg-privacy-consent span.mwform-checkbox-field-text {
  font-size: 1.6rem;
}

@media screen and (max-width: 640px) {
  .fg-privacy-scroll {
    height: 20rem;
    padding: 1.6rem;
  }
}

/* フォームのチェックボックス（既存の見た目を調整）
   - ラジオボタンと左端・大きさ（約 20px）・文字開始位置・行間を揃える
   - 枠：既存は margin-top:-10px で 2px 上にずれていたため translateY で中央に
   - チェック：3px → 2px に細く、枠の中央に配置 */
.mw_wp_form span.mwform-checkbox-field-text {
  padding: 0 0 0 3.4rem;
}

.mw_wp_form span.mwform-checkbox-field-text::before {
  left: 0;
  width: 2rem;
  height: 2rem;
  margin-top: 0;
  border-color: #b4b4b4;
  transform: translateY(-50%);
}

.mw_wp_form span.mwform-checkbox-field-text::after {
  left: 1rem;
  margin-top: 0;
  width: 6px;
  height: 11px;
  border-right-width: 2px;
  border-bottom-width: 2px;
  transform: translate(-50%, -60%) rotate(45deg);
}

/* 送信完了画面（MW WP Form の完了メッセージ）
   本サイト用のクラス（heading02 / txt-center / btnarrow5）が使われているが、
   このページでは本サイトの CSS を読み込まないため、ここで同等の見た目を定義する */
.mw_wp_form_complete .heading02 {
  margin: 0 0 3rem;
  font-size: 2rem;
  text-align: center;
}

.mw_wp_form_complete .txt-center {
  text-align: center;
}

.mw_wp_form_complete .btn-gold {
  margin-top: 4rem;
}

/* ボタンはフォームの送信ボタン（.mw_wp_form input[type=submit]）と同じ見た目に揃える */
.mw_wp_form_complete .btnarrow5 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 600px;
  min-height: 48px;
  padding: 12px 24px;
  border-radius: 3rem;
  background: #945838;
  color: #fff;
  font-size: 18px;
  text-decoration: none;
  transition: 0.2s ease-in all;
}

.mw_wp_form_complete .btnarrow5:hover {
  background: #9a1a20;
  color: #fff;
}

/* 確認画面：同意欄（チェックボックス・ポリシー全文）は不要なため非表示
   ※ 中の hidden 値は display:none でも送信される */
.mw_wp_form_preview .fg-privacy {
  display: none;
}

/* 確認画面の「修正する」ボタン（既存は送信ボタンと同じ見た目のため、白地の枠線ボタンに） */
.mw_wp_form input[type="submit"].back {
  background: #fff;
  border: 1px solid #945838;
  color: #945838;
}

.mw_wp_form input[type="submit"].back:hover {
  background: #f7f0eb;
}

/* 確認画面（SP）：入力内容の左端を項目名（dt の左余白 10px）に揃える
   既存は SP で dd の左右余白が 0 のため、項目名より左に出ていた */
@media screen and (max-width: 640px) {
  .mw_wp_form_preview .form_table dd {
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* 入力画面（SP）：項目名・入力欄・選択肢の左右を dt の左余白 10px に揃える
   - 既存は dd の左右余白 0・幅 95%
   - 入力欄は iOS のズーム防止で font-size 16px + scale(0.9) のため、中央基準で縮んで左に 5% の隙間ができていた
     → 左端基準で縮め、幅を 1/0.9 にして見た目の幅を dd いっぱいに戻す */
@media screen and (max-width: 640px) {
  .mw_wp_form_input .form_table dd {
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
  }

  .mw_wp_form_input .form_table input,
  .mw_wp_form_input .form_table select,
  .mw_wp_form_input .form_table textarea {
    transform-origin: left center;
  }

  .mw_wp_form_input .form_table input[type="text"],
  .mw_wp_form_input .form_table input[type="email"],
  .mw_wp_form_input .form_table input[type="tel"],
  .mw_wp_form_input .form_table select,
  .mw_wp_form_input .form_table textarea {
    width: calc(100% / 0.9);
    max-width: none;
  }
}

/* フォームCVR ページ（確認・完了画面）：内容が短いときもフッターを画面下端に付ける
   既存は body の背景（#f1f1f1）がフッターの下に見えていた */
body.page-template-page-family-gathering_cvr {
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 100%;
}

body.page-template-page-family-gathering_cvr > * {
  flex-shrink: 0;
}

/* 余った高さはフォーム部分（白背景）に足して、フッターを下端へ押し下げる */
body.page-template-page-family-gathering_cvr .contact {
  flex-grow: 1;
}

/* プランのリード文内の案内（ACF「補足リード文」で <span class="fg-plan-hint"> を指定） */
.fg-plan-hint {
  background: linear-gradient(transparent 55%, #ddc04f 95%);
}

/* フッターの電話アイコン（Font Awesome の読み込みをやめて SVG に置き換え） */
.fg-tel-icon {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  vertical-align: -0.25rem;
}
