/* ========  guideline popup ======== */
.guideline-popup {
  bottom: 0;
  height: 100%;
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  right: 0;
  top: 0;
  transition: opacity 0.5s ease-in-out;
  width: 100%;
  z-index: 9999;
}
.guideline-popup.is-active {
  opacity: 1;
  pointer-events: auto;
}
.guideline-popup .popup-bg {
  background: rgba(54, 56, 51, 0.5);
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
.guideline-popup .popup-body {
  -webkit-transform: translate3d(-50%, -50%, 0);
  display: block;
  left: 50%;
  margin: 0;
  max-width: 100%;
  padding: 0.625rem;
  position: absolute;
  text-align: center;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  width: 41.875rem;
}
.guideline-popup .popup-body .close-btn {
  background: #fff url(../img/fix/close.svg) no-repeat center / 0.75rem;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  display: block;
  height: 1.8125rem;
  position: absolute;
  right: 0.625rem;
  top: 0;
  transform: translateY(-100%);
  transition: 0.4s ease;
  width: 1.8125rem;
}
.guideline-popup .popup-body .close-btn:hover {
  filter: brightness(0.9);
}
.guideline-popup .popup-banner {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  display: block;
  transition: 0.4s ease;
}
.guideline-popup .popup-banner:hover {
  filter: brightness(0.9);
}

/* ========  Contact caution ======== */
.l-contact__item-body._privacy {
  text-align: center;
  margin-top: 20px;
}
.l-contact__caution {
  display: flex;
  justify-content: center;
  font-weight: 400 !important;
  font-size: 0.875rem !important;
  padding: 0 !important;
}
.l-contact__caution a {
  color: #1e53b5;
  text-decoration: underline;
}
@media screen and (max-width: 768px) {
  .l-contact__caution {
    display: block !important;
    line-height: 1.5 !important;
  }
}

/* ========  FVメインビジュアル関連 ======== */

/* --- 上部ラベル＆見出し --- */
.top_banner-orange {
  background-color: transparent !important;
}

.p-fv {
  /*padding-top: 2.5rem !important; */
  height: 456px !important;       /* ← ここを固定に変更 */
  overflow: visible !important;   /* ← 中身が切れないように保険 */
}


/* --- テキスト背景の幅を自動調整 --- */
.p-fv__item_2,
.p-fv__item_2--sub {
  width: auto !important;
  display: inline-block !important;
  background-color: #fff;
  white-space: nowrap;
}

/* --- ラベル（オレンジタグ） --- */
.p-fv__label {
  display: inline-block !important;
  white-space: nowrap;
  /* 🔽 グラデーションに変更！ */
  /*background: linear-gradient(129.35deg, #FF8801 14.77%, #FF5504 68.9%);*/
  background: #FF5004;
  color: #fff;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 2;
  padding: 0.4rem 0.8rem;
  border-radius: 0.25rem;
  width: fit-content;
  box-shadow: 2px 2px 4px rgba(37, 50, 144, 0.2); /* ←ちょっと浮かせて上品に */
}


/* --- 吹き出し削除（旧デザイン無効化） --- */
.p-fv__img2 {
  display: none !important;
}

/* ========  FVアイコン・画像セット ======== */

/* 左側：アイコン4つ */
/*.p-fv__icon-wrap {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  gap: 3px;
  max-width: 82%;
  margin: 0;
  padding: 0;
}
.p-fv__icon-item img {
  width: 130px;
  height: 130px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}*/

/* 右側：パソコン＋吹き出し画像 */
.p-fv__img-wrap {
  position: relative;
  display: inline-block;
}
.p-fv__img-main {
  width: 100%;
  height: auto;
  display: block;
}
.p-fv__img-bubble {
  position: absolute;
  top: -3rem;
  left: 14rem;
  width: 216px;
  height: auto;
  z-index: 5;
}

/* スマホ版：吹き出し位置 */
@media screen and (max-width: 768px) {
  .p-fv__img-bubble {
    top: -20px;
    right: 30px;
    width: 120px;
  }
}

/* FV全体のレイアウト */
.p-fv__content-wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  margin-top: 1.5rem;
}

.p-fv__under-wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
}

/* --- 修正: 2025-11-07 FVテキスト 左寄せ＆2行保持 --- */
.p-fv__list_2 {
  display: block !important;
  text-align: left !important;
  white-space: normal !important;
  width: fit-content;
  margin-left: 0 !important;
}

.p-fv__item_2,
.p-fv__item_2--sub {
  /*display: block !important;*/
  text-align: left !important;
  white-space: normal !important;
  background-color: #fff;
  color: #263290;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 0.4rem;
  padding: 0.8rem 1.2rem;
  border-radius: 4px;
  width: fit-content;
}


/* SP：PC画像非表示 */
.p-fv__img-main.u-hidden--pc {
  display: none !important;
}

/* ==========================================
   2025-11-07 最終安定版：FVアイコンを完全な円形に固定
========================================== */
.p-fv__icon-item {
  position: relative;
  width: 150px !important;
  height: 150px !important;
  border-radius: 50% !important;
  background: none !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0; /* ← Flexの圧縮防止 */
}

/*.p-fv__icon-item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  display: block;
}*/

/*.p-fv__left {
  flex: 1 1 56%;
  max-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}*/

/* ✅ 左エリア：固定→柔軟に変更（2025-11-10版） */
.p-fv__left {
  flex: 1 1 56%; /* ← 幅56%を目安にしつつ、ブラウザ幅に合わせて伸縮可 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0; /* ← はみ出し防止 */
}


/*.p-fv__text-block {
  margin-bottom: 1.5rem;
}*/

.p-fv__item_2,
.p-fv__item_2--sub {
  display: block;
  width: fit-content;
  background-color: #fff;
  color: #263290;
  font-weight: 700;
  line-height: 1.3;
  padding: 0.8rem 1.2rem;
  border-radius: 4px;
  margin-bottom: 1.3rem;
	font-size: 1.3rem;
}

/*.p-fv__icon-wrap {
  display: flex;
  gap: 0px
}

.p-fv__icon-item img {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  display: block;
}*/

.p-fv__right {
  flex: 0 0 41%;
  position: relative;
}

/* =====================================================
    デバイス切り替え修正版（SPとPCの表示切替を正す）
   ===================================================== */
	 @media screen and (max-width: 768px) {
		.u-hidden--sp {
			display: none !important; /* SPでは非表示 */
		}
		.u-hidden--pc {
			display: block !important; /* SPでは表示 */
		}
	}
	
	@media screen and (min-width: 769px) {
		.u-hidden--sp {
			display: block !important; /* PCでは表示 */
		}
		.u-hidden--pc {
			display: none !important; /* PCでは非表示 */
		}
  }


@media screen and (max-width: 768px) {
  html body .p-fv__label {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
}

@media screen and (max-width: 768px) {
  /* スマホサイズで電話アイコン非表示 */
  .mobile-tel {
    display: none !important;
  }

  /* 念のため、drawer（メニュー）内でも非表示を強制 */
  .l-drawer__icon .mobile-tel {
    display: none !important;
  }
}

@media screen and (max-width: 768px) {
  .p-fv {
    padding-top: unset !important;
  }
}

@media screen and (max-width: 768px) {
  /* 古い画像をスマホで非表示 */
  img[src*="fv_illust-price-sp.png"] {
    display: none !important;
  }

  /* 新しい画像をスマホで表示 */
  img[src*="fv-illust-marketing-sp.png"] {
    display: block !important;
  }
}

@media screen and (max-width: 768px) {
  .p-fv__wrap {
    position: relative; /* この中で位置を調整 */
  }

  .p-fv__wrap .u-hidden--sp {
    position: absolute;
    top: -1rem; /*  この値で上下の位置を調整 */
    left: 71%;
    transform: translateX(-50%);
    width: 63%; /*  必要に応じてサイズも調整 */
    height: auto;
    z-index: 2;
  }



  .p-fv__img2 {
    margin-bottom: 0 !important;
  }
}

/* 💻 PCではオレンジ背景を消す */
@media screen and (min-width: 769px) {
  .top_banner-orange {
    background-color: transparent !important;
  }
}

/* 📱 スマホではオレンジ背景を復活させる */
@media screen and (max-width: 768px) {
  .top_banner-orange {
    background-color: #FF5100 !important; /* ここはFigmaで使ってる正確なカラーコードに合わせてOK */
  }
}

@media screen and (max-width: 768px) {
  /* FV下の全体を縦並び */
  .p-fv__under-wrap {
    display: flex;
    flex-direction: column;
    align-items: center; /* 中央揃え */
    width: 100%;
    gap: 1.5rem; /* セクション間の余白 */
  }

  /* テキストブロックをタイトル直下に移動 */
  .p-fv__text-block {
    order: -1;
    width: 90%; /* コンテナ内に収める */
    max-width: 340px; /* デザイン幅を制限 */
    margin: 0 auto 1rem;
    text-align: center;
  }

  /* アイコン群も同じ幅に揃える */
  /*.p-fv__icon-wrap {
    width: 90%;
    max-width: 340px;
    margin: 0 auto;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
  }*/

  /* 右側画像も同じく中央寄せ */
  .p-fv__right {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .p-fv__img-wrap {
    width: 90%;
    max-width: 340px;
  }
}

@media screen and (max-width: 768px) {
  .p-fv__text-block { display: none; }
  .p-fv__text-block--sp { display: block; }
}

/*@media screen and (min-width: 769px) {
  .u-hidden--sp {
    display: none !important;
  }
}*/


@media screen and (min-width: 769px) {
  .download.u-hidden--sp {
    display: block !important;
  }
}

@media screen and (max-width: 768px) {
  .p-fv__text-block--sp {
    text-align: left;
    display: inline-block !important;
    border-radius: 0.4rem;
    width: auto;
    max-width: max-content;
    box-sizing: border-box;
  }

  .p-fv__text-block--sp .p-fv__item_2 {
    font-size: 0.9rem; 
    font-weight: 600;
    line-height: 1.0;
    margin-bottom: 0.1rem;
  }

  .p-fv__text-block--sp .p-fv__item_2--sub {
    font-size: 0.9rem; 
    font-weight: 600;
    line-height: 1.0;
    margin-top: 0.2rem;
    margin-bottom: 0;
  }
}

/*@media screen and (max-width: 768px) {
  .p-fv__icon-wrap {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: nowrap !important; /
    gap: 0.4rem !important;
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 auto;
  }

  .p-fv__icon-item img {
    width: 60px !important;  
    height: auto !important;
  }
}*/

@media screen and (max-width: 768px) {
  .p-fv__icon-wrap {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: nowrap !important; 
    gap: 0.4rem !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto;
    margin-top: 0.6rem;
  }


  .p-fv__icon-item {
    width: auto !important;
    height: auto !important;
    flex: 1 1 0 !important; 
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }


  .p-fv__icon-item img {
    width: 100% !important;  
    height: auto !important;
    transform: scale(1.1); 
  }
}

@media screen and (max-width: 768px) {
  .p-fv__img-bubble {
    display: none !important;
  }
}

@media screen and (max-width: 768px) {
  .p-fv {
    padding: 6px !important;
  }
}

@media screen and (min-width: 769px) {
  /* お悩みセクションはPCで表示 */
  .p-worry .u-hidden--sp {
    display: block !important;
  }

  /* ただしFVセクションの吹き出しはPCで非表示 */
  .p-fv .u-hidden--sp {
    display: none !important;
  }
}

/* ========== お悩みセクション上の余白調整 ========== */
@media screen and (min-width: 769px) {
  .p-worry {
    padding-top: 6rem !important; /* 元の5rem→3remでやや詰める */
  }
}


  

  @media screen and (min-width: 769px) {
    .l-header__logo {
      flex-shrink: 0;
    }  
}


@media screen and (min-width: 769px) {
  .l-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1152px;
    margin: 0 auto;
    padding: 1rem 2rem;
    box-sizing: border-box;
  }

  .l-header__nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1 1 auto;
    gap: 2rem;
    min-width: 0;
  }

  .l-header__menu {
    flex: 1 1 auto;
    min-width: 0;
  }

  .l-header__list {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .l-header__item a {
    text-decoration: none;
    color: #333;
    font-weight: 600;
  }

  .l-header__btn {
    flex-shrink: 0;
  }

  .l-header__btn a {
    display: inline-block;
    background-color: #f36f21;
    color: #fff;
    padding: 0.6rem 1.4rem;
    border-radius: 9999px;
    text-decoration: none;
    font-weight: 700;
    white-space: nowrap;
  }
}

@media screen and (min-width: 769px) {
  /* ✅ ボタンを右端に固定させる */
  .l-header__nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2rem;
    flex: 1 1 auto;
    min-width: 0;
  }

  /* ✅ ナビリスト部分を「ボタンの邪魔をしないように」縮むように */
  .l-header__menu {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden; /* ← あまり効かないけど安全策 */
  }

  /* お問い合わせボタンを強制的に右上へ */
  .l-header__btn {
    flex-shrink: 0;
    margin-left: auto;
  }

  /* 念のためaタグのデザインは再確認 */
  .l-header__btn a {
    display: inline-block;
    background-color: #f36f21;
    color: #fff;
    padding: 0.6rem 1.4rem;
    border-radius: 9999px;
    text-decoration: none;
    font-weight: 700;
    white-space: nowrap;
  }
}
@media screen and (min-width: 769px) {
  .l-header {
    display: flex;
    align-items: center;
    justify-content: space-between; /* ← 全体を左右で分割 */
    max-width: 1112px;
    margin: 0 auto;
    padding: 1rem 2rem;
    box-sizing: border-box;
  }

  .l-header__nav {
    display: flex;
    align-items: center;
    justify-content: space-between; /* ← メニューとボタンを両端に配置 */
    flex: 1;
    gap: 2rem;
  }

  .l-header__menu {
    flex: 1;
  }

  .l-header__list {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .l-header__btn {
    flex-shrink: 0;
    margin-left: 2rem;
  }

  .l-header__btn a {
    display: inline-block;
    /*  オレンジのグラデーションをここに注入！ */
    background: linear-gradient(129.35deg, #FF8801 14.77%, #FF5504 68.9%);
    color: #fff;
    padding: 0.5rem 1.4rem;
    border-radius: 9999px;
    text-decoration: none;
    font-weight: 700;
    white-space: nowrap;
    line-height: 1.36rem;
    width: 9.25rem;
    text-align: center;
    box-shadow: 2px 2px 4px rgba(37, 50, 144, 0.2); /* ←立体感もプラス！ */
  }
  
}

@media screen and (max-width: 768px) {
  .p-fv__contact .title span {
    font-size: 0.8rem; 
  }
}

/* ==========================
   ディレクター紹介（p-difference内）
========================== */
.p-difference .p-director {
  margin-top: 5rem;
  text-align: center;
}

.p-difference .p-director__title {
  font-size: 1.98rem;
  font-weight: 700;
  color: #253290;
  margin-bottom: 2rem;
  line-height: 1.1;
  letter-spacing: 0.1rem;
}

/*  3列レイアウト（PC） */
.p-difference .p-director__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

/*  カード全体 */
.p-difference .p-director__item {
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 4px 8px rgba(0,0,0,0.08);
  padding: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  text-align: left;
  transition: transform 0.2s ease;
}

.p-difference .p-director__item:hover {
  transform: translateY(-4px);
}

/* 🔸 画像（左） */
.p-difference .p-director__item img {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* 🔸 テキスト（右） */
.p-difference .p-director__item p {
  margin: 0;
  font-size: 0.89rem;
  line-height: 1.6;
  color: #333;
  flex: 1;
  font-weight: 600;
}

/* 📱 スマホ版（1列・縦並び） */
@media screen and (max-width: 768px) {
  .p-difference .p-director__list {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }

  .p-difference .p-director__item {
    flex-direction: column;
    text-align: center;
    padding: 1.5rem 1rem;
  }

  .p-difference .p-director__item img {
    margin-bottom: 0.5rem;
  }

  .p-difference .p-director__item p {
    font-size: 0.9rem;
  }
}

.p-contact-link .btn-wrap {
  padding-top: 0.83rem;
}


/* ==========================
   活用事例（p-example）
========================== */
.p-example__wrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

/* カード全体 */
.p-example__item {
  background: #E9F4FF; /* 背景色変更 */
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.03); /* ☁️シャドウを控えめに */
  position: relative;
}

/* 上部アイコン部分 */
.p-example__icon {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.8rem;
}

.p-example__icon img {
  width: 28px;
  height: 28px;
}

/* 🧹テキスト（スクール／パーソナルジム）を非表示に */
.p-example__icon span {
  display: none;
}

/* 結果画像 */
.p-example__result-img {
  margin-top: 1.5rem;
  text-align: center;
}

.p-example__result-img img {
  width: 100%;
  max-width: 360px;
  height: auto;
  border-radius: 0.5rem;
}

/* スマホ版（1列） */
@media screen and (max-width: 768px) {
  .p-example__wrap {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .p-example__item {
    padding: 1.5rem;
  }

  .p-example__icon {
    justify-content: flex-start;
  }

  .p-example__result-img img {
    max-width: 100%;
  }
}

/* 共通アイコンエリア */
.p-example__icon {
  display: flex;
  align-items: center;
  margin-bottom: 0.8rem;
}

/* 各アイコン個別調整 */
.p-example__icon--school img {
  width: 124px;
  height: 40px;
  margin-top: 2px; /* 🔸少し下げたい時に調整 */
}

.p-example__icon--gym img {
  width: 172px;
  height: 40px;
  margin-top: 0; /* 🔸高さの微調整 */
}

.p-example {
  padding-top: 80px;
}

/* ==========================
   📱 スマホ版も横並び（左：画像／右：テキスト）
========================== */

@media screen and (max-width: 768px) {
  .p-difference .p-director__item {
    display: flex;
    flex-direction: row; /* ← columnをrowに */
    align-items: center; 
    justify-content: flex-start;
    gap: 1rem; /* 画像とテキストの間隔 */
    text-align: left;
    padding: 0.6rem 0.2rem;
  }

  .p-difference .p-director__item img {
    width: 87px;
    height: 93px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    padding-left: 1rem;
  }

  .p-difference .p-director__item p {
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
  }
}


/* ==========================
   サービス導入の流れ 矢印 安定配置（文字と帯が動かないver）
========================== */
.p-flow__arrow-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #E9F4FF;
  border-radius: 4px;
  padding: 1rem 3rem;
  max-width: 960px;
  margin: 2rem auto 0;
  box-sizing: border-box;
}

.p-flow__arrow-wrap .arrow-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.p-flow__arrow-wrap .arrow-inner img {
  height: 28px;
  width: auto;
  display: block;
}

.p-flow__arrow-wrap .arrow-inner span {
  margin-top: 0.4rem;
  font-size: 1rem;
  font-weight: 700;
  color: #193982;
  line-height: 1;
}

/* 矢印を左右に少しずつ配置バランス調整 */
.p-flow__arrow-wrap .arrow-1 {
  margin-left: 2rem;
}
.p-flow__arrow-wrap .arrow-2 {
  margin-right: 2rem;
}

/* スマホ非表示 */
@media screen and (max-width: 768px) {
  .p-flow__arrow-wrap {
    display: none;
  }
}

.video-wrapper {
  position: relative;
  width: 100%;
  max-width: 700px; /* 🔸サイズ感はこの値でFigmaに近い */
  margin: 0 auto; /* 🔸中央寄せ＋下マージン */
  padding-bottom: 37%; /* 16:9比率維持 */
  height: 0;
  overflow: hidden;
}

.video-wrapper iframe {
  position: absolute;
  top: -2px;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* ▼スマホ（768px以下）のレスポンシブ調整 */
@media screen and (max-width: 768px) {
  .video-wrapper {
    width: 94%;
    padding-bottom: 53%; /* 高さ比率を少し深めに */
    max-width: none; /* 固定幅を解除して柔軟に */
    margin: 0 auto 40px; /* 下に少し余白を追加（お好みで調整OK） */
  }

  .video-wrapper iframe {
    top: 0; /* 不要なズレをリセット */
  }
}

.p-qc {
  margin-top: 60px;
}

/* --- ポップアップを完全に無効化 --- */
#makitori-popup,
.guideline-popup,
.popup-banner,
.popup-body,
.popup-bg {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* スマホ版で資料請求ボタンを非表示＆お問い合わせボタンを中央寄せ */
@media screen and (max-width: 768px) {
  /* 左の資料請求ボタンを消す */
  .p-contact-link .l-btn {
    display: none !important;
  }

  /* お問い合わせボタンを中央に配置 */
  .p-contact-link .p-contact-btn-area {
    justify-content: center !important;
  }

  /* 万一横幅が狭い場合に中央揃えを補強 */
  .p-contact-link .r-btn {
    margin: 0 auto;
  }
}

/* ==========================
   スマホ専用ボタンのPC非表示設定
   ========================== */
   @media screen and (min-width: 769px) {
    .p-contact-link._sp-only {
      display: none !important;
    }
  }
  
  body.drawer-open {
    overflow: hidden;
  }
  
  /* ========== Drawer Close Button（白い❌） ========== */
.l-drawer__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 2.2rem;
  line-height: 1;
  color: #fff; /* 白い× */
  background: none;
  border: none;
  cursor: pointer;
  z-index: 100;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.l-drawer__close:hover {
  transform: scale(1.15);
  opacity: 0.8;
}

/* 2025-11-08 修正②：ドロワーボタンの完全中央寄せ */
.l-drawer__btn-wrap {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-direction: column !important; /* ←縦並びに強制 */
  margin-top: 1.5rem !important;
  margin-bottom: 2rem !important;
}

.l-drawer__btn-wrap .btn {
  width: auto !important;
  margin: 0 auto !important;
}

/* 2025-11-08 修正③：ドロワーボタンの横パディング微調整 */
.l-drawer__btn-wrap .btn a {
  display: inline-block;
  padding: 0.6rem 1.6rem; /* ← 左右に約10pxずつ増やしたイメージ */
  border-radius: 9999px;  /* 丸みを維持 */
  text-align: center;
  box-sizing: border-box;
}

/* 🎨 ハンバーガーメニュー内「お問い合わせ・無料相談」ボタン（中央配置＆グラデーションver） */
.l-drawer__btn-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1.5rem;
}

.l-drawer__btn-wrap .btn.contact a {
  display: inline-block;
  background: linear-gradient(129.35deg, #FF8801 14.77%, #FF5504 68.9%);
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  padding: 0.9rem 2.2rem;
  border-radius: 9999px;
  text-decoration: none;
  text-align: center;
  box-shadow: none;
  outline: none;
  border: none;
  transition: all 0.3s ease;
}

/* hover時にほんの少し明るく */
.l-drawer__btn-wrap .btn.contact a:hover {
  filter: brightness(1.08);
}

/* ドロワーの閉じるボタン位置を調整 */
.l-drawer__close {
  position: fixed;
  top: 1.2rem;    /* ← ここの値で上下調整 */
  right: 1rem;    /* ← ここの値で左右調整 */
  z-index: 1001;  /* メニューより上に配置 */
  font-size: 2.2rem;
  color: #fff;
  cursor: pointer;
  line-height: 1;
  transition: transform 0.3s ease;
}

/* 開閉時に軽く動きを出したい場合（任意） */
.l-drawer__close:hover {
  transform: scale(1.1);
}

.l-drawer__close {
  display: none;
  position: fixed;
  top: 1.2rem;
  right: 1rem;
  z-index: 2000;
  font-size: 2.2rem;
  color: #fff;
  cursor: pointer;
  line-height: 1;
  transition: transform 0.3s ease;
}
.l-drawer__close:hover {
  transform: scale(1.1);
}

.l-drawer__close {
  display: none;
  position: absolute;
  top: 3.2rem;
  right: 1rem;
  z-index: 999;
  color: #fff;
  font-size: 2.4rem;
  cursor: pointer;
}

/* === ファーストビュー下部 背景円 === */
.p-fv__bg-bottom {
  position: absolute;
  bottom: -220px; /* 円の出る高さを調整 */
  right: -80px;   /* 円の右寄せ具合 */
  width: 600px;
  height: 600px;
  background: url("./assets/img/Ellipse%2010.png") no-repeat center center / contain;
  z-index: 0; /* 背景として最背面に */
  pointer-events: none; /* 背景クリックを無効化 */
}

/* =========================
   ：FV背景（3枚＋グラデーション・px指定ver）
========================= */

/* PC版 */
/*.background {
  position: relative;
  background-color: #ffffff;
  background-image:
    url(../img/Ellipse10.png),
    url(../img/Ellipse9.png),
    url(../img/Ellipse8.png),
    linear-gradient(180deg, #E9F4FF 0%, #FFFFFF 85%);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 900px, 1200px, 1600px, cover;
  background-position:
    right -120px top -80px,  
    left -200px top -60px,  
    left 200px top 300px,  
    left 0px top 0px;       
  border-radius: 0 0 100px 100px;
  overflow: hidden;
  z-index: 0;
}*/

/* SP版 */
/*@media screen and (max-width: 768px) {
  .background {
    background-color: #ffffff;
    background-image:
      url(../img/Ellipse10.png),
      url(../img/Ellipse9.png),
      url(../img/Ellipse8.png),
      linear-gradient(180deg, #E9F4FF 0%, #FFFFFF 85%);
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-size: 500px, 650px, 800px, cover;
    background-position:
      right -60px top -40px,  
      left -80px top -20px,   
      left 100px top 250px,  
      left 0px top 0px;
    border-radius: 0 0 60px 60px;
    overflow: hidden;
  }
}*/

/* ==========================================
   2025-11-10 修正版：アイコンを可変幅に対応
========================================== */
.p-fv__icon-wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap; 
  width: 100%;
}

.p-fv__icon-item {
  flex: 1 1 22%; 
  max-width: 150px;
  aspect-ratio: 1 / 1; 
}

.p-fv__icon-item img {
  width: 110%;
  height: auto;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  transition: transform 0.2s ease; /* ← マウスホバーで軽い動きもOK */
}

.p-fv__icon-item img:hover {
  transform: scale(1.03);
}

.background {
  background-color: #f2f9ff !important;
  background-image: url("../img/kv-background-full.png") !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center top !important;
  border-radius: 0 0 100px 100px !important;
  overflow: visible !important;  /* ← ここ重要！ */
  position: relative !important;
  z-index: 0 !important;
}

.background-bottom {
  position: relative !important;
  z-index: 10 !important; /* ← 背景より前に */
}


/* ===============================
   FV下のカーブ背景（fv_bg.png）
   =============================== */
	 .p-fv__bg-bottom {
		background-image: url(./assets/img/fv_bg.png);
		background-repeat: no-repeat;
		background-size: contain; /* coverでもOK、調整用 */
		background-position: center bottom;
		width: 100%;
		height: 380px; /* 仮の高さ。出たら微調整OK */
		position: relative;
		z-index: 1;
		margin-top: -40px; /* FVと自然につなげるため */
	}
	
	/* ===============================
   下部セクション背景（背景色エリア）
   =============================== */
.background-bottom {
  /*background-color: #f2f9ff;*/ 
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top;
  position: relative;
  z-index: 0;
  overflow: visible;
  padding-top: 70px;
}

	s
	/* バナーを上に少し浮かせる */s
	.p-fv__contact {
		position: relative;
		z-index: 2;
		margin-top: -30px; /* ← バナーを少し上に持ち上げる（±で調整OK） */
	}
	
  .p-fv__bg-bottom {
    position: relative;
    background-image: url("./assets/img/fv_bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    height: 220px;
    margin-top: -80px;
    z-index: 1;
  }
  
  .background-bottom {
    position: relative;
    z-index: 2;
  }
  
  .p-fv__contact {
    position: relative;
    z-index: 3;
    margin-top: -60px;
  }

  
  /* ✅ 競り上がり修正版（2025-11-11） */
@media screen and (max-width: 768px) {
  .p-fv {
    height: auto !important; /* ← 固定高さを解除して中身に合わせる */
    padding-bottom: 2rem !important; /* ← 下に適度な余白を確保 */
  }

  .background-bottom {
    padding-top: 0 !important; /* ← 不要な押し上げを防ぐ */
  }
}

/* ✅ FV画像サイズ＆余白調整（2025-11-11） */
@media screen and (max-width: 768px) {
  /* FV内の画像サイズを少し拡大 */
  .p-fv__img-wrap {
    max-width: 90% !important; /* 親幅に追随 */
    margin: 0 auto !important;
  }

  .p-fv__img-main {
    width: 100% !important; /* 縮小制限を解除 */
    height: auto !important;
  }

  /* FV下の余分な空白を削除 */
  .p-fv {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* 背景の下バナーと自然につなげる */
  .background-bottom {
    margin-top: 0 !important;
  }
}


/*  FV背景下端（p-fv__bg-bottom）の高さリセット */
@media screen and (max-width: 768px) {
  .p-fv__bg-bottom {
    height: 148px !important;
    margin-bottom: 0 !important;
  }
}

/*  ヘッダー高さを低く調整 */
@media screen and (min-width: 769px) {
  .l-header {
    padding: 0.5rem 2rem; /* 上下の余白を半分に */
  }

  /*.l-header__item a {
    line-height: 3.2;
  }*/

  .l-header__logo img {
    max-height: 48px; /* ロゴ画像も少し抑える */
  }
}

.top_banner-box img {
  width: auto;
  max-width: 134px; 
  height: auto;
  /*padding-left: 20px;*/
  display: block;
}

/* スマホ表示専用の画像サイズ調整 */
@media screen and (max-width: 768px) {
  .top_banner-box img.u-hidden--pc {
    width: auto;
    max-width: 170px; 
    height: auto;
    display: block !important;
     /* margin: 0 auto; */
  }
}

@media screen and (max-width: 768px) {
  .top_banner-box img:not(.u-hidden--pc) {
    display: none !important;
  }
  .top_banner-box img.u-hidden--pc {
    display: block !important;
  }
}

/* ===========================
   活用事例：アイコン位置調整
   =========================== */

/* アイコン全体のラップを左寄せ（中央寄せ解除） */
.p-example__icon {
  display: block; /* flex の中央寄せ効果を排除 */
}

/* スクールアイコンを左上へ寄せる */
.p-example__icon--school {
  margin-left: 12px;
  margin-top: -10px;
}

/* パーソナルジムアイコンも同じく左上へ寄せる */
.p-example__icon--gym {
  margin-left: 12px;
  margin-top: -10px;
}

/* ======================================
   SP（〜768px）：活用事例アイコンサイズ調整
   ====================================== */
   @media screen and (max-width: 768px) {

    /* アイコン画像だけ大きくする（SPで小さくなる問題の対処） */
    .p-example__icon--school img,
    .p-example__icon--gym img {
      width: 260px !important;   /* ← ここをFigma寄せで微調整してOK */
      height: 80px !important;
    }
  
    /* アイコン位置はPCと同じでOK（ズレる場合は微調整可） */
    .p-example__icon--school {
      margin-left: 12px;
      margin-top: -6px;  /* PCより少し弱めにする場合はここ変更OK */
    }
  
    .p-example__icon--gym {
      margin-left: 12px;
      margin-top: -6px;
    }
  }

  @media screen and (max-width: 430px) {
    .p-example__icon--school img,
    .p-example__icon--gym img {
      width: 160px !important;
      height: 50px !important;
    }
  }
  

s


/* PC */
.p-fv__icon-item img {
  width: 80px !important;
  height: 80px !important;
  border-radius: 50% !important;
}

/* 1024px 以下 */
@media screen and (max-width: 1024px) {
  .p-fv__icon-item img {
    width: 140px !important;
    height: 140px !important;
  }
}

/* 896px 以下 */
@media screen and (max-width: 896px) {
  .p-fv__icon-item img {
    width: 160px !important;
    height: 160px !important;
  }
}

/* 430px 以下 */
@media screen and (max-width: 430px) {
  .p-fv__icon-item img {
    width: 90px !important;
    height: 90px !important;
  }
}