@charset "UTF-8";

:root {
  --color-primary: #1f64a1;
  --color-secondary: #ff9030;
  --color-text-main: #333333;
  --color-text-light: #666666;
  --color-bg-light: #f0f8fa;
  --color-white: #ffffff;
  --contact-form-bg: #f1f4fb;
  --contact-form-border: #c3cad8;
  --color-error: #ff7274;
  --font-family-base:
    "Poppins", "Zen Kaku Gothic New", "Helvetica Neue", Arial,
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --font-size-base: 14px;
  --font-weight-base: 500;
  --content-width: 380px;
}

@media screen and (min-width: 769px) {
  :root {
    --font-size-base: 18px;
    --content-width: 1200px;
  }
}

@media screen and (max-width: 769px) {
  :root {
    --content-width: 600px;
  }
}

@media screen and (max-width: 480px) {
  :root {
    --content-width: 430px;
  }
}

@media screen and (max-width: 426px) {
  :root {
    --content-width: 360px;
  }
}

@media screen and (max-width: 326px) {
  :root {
    --content-width: 300px;
  }
}

main {
  margin: 0;
  padding: 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-base);
  color: var(--color-text-main);
  line-height: 1.6;
  background-color: var(--color-white);
  letter-spacing: 0.1em;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

.l-inner {
  max-width: var(--content-width);
  margin: 0 auto;
}

@media screen and (min-width: 769px) {
  .l-inner {
    padding: 0;
  }
}

/* =========================================
   Utility (改行用など)
   ========================================= */
/* PCでのみ改行させる（SPでは改行無効） */
.u-br-pc {
  display: none;
}
/* SPでのみ改行させる（PCでは改行無効） */
.u-br-sp {
  display: block;
}

@media screen and (min-width: 769px) {
  .u-br-pc {
    display: block;
  }
  .u-br-sp {
    display: none;
  }
}

/* =========================================
   Step 1: MV (Main Visual) Section
   ========================================= */
.p-mv {
  position: relative;
  padding: 0 0 40px; /* SP版の余白（topは0に） */
  background-color: var(--color-white);
  overflow: hidden;
}

/* SPレイアウト（画像が上、テキストが下） */
.p-mv__inner {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end; /* 画像などの要素を右端に寄せる */
  gap: 30px;
  padding-left: 25px; /* 左の余白25px */
  padding-right: 0; /* 右の余白は0 */
  box-sizing: border-box;
}

.p-mv__content {
  text-align: left; /* テキスト左揃え */
  width: 100%;
  padding-right: 25px; /* コンテンツ幅380px(430-25-25)を維持するため右側に25px確保 */
  box-sizing: border-box;
}

.p-mv__title {
  margin: 0 0 15px;
}

.p-mv__title img {
  width: 100%;
  max-width: 280px; /* タイトルSVGのサイズ調整 */
}

.p-mv__partner a {
  color: var(--color-primary);
  font-size: 13px;
  font-weight: bold;
  text-decoration: none;
  border-bottom: 1px solid var(--color-primary);
  transition: opacity 0.3s ease;
  padding-bottom: 1px;
}

.p-mv__partner a:hover {
  opacity: 0.6;
}

.p-mv__image {
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}

.p-mv__image img {
  display: block;
  margin-left: auto; /* 画像を右揃え */
  width: 100%;
  height: auto;
  /* トリミングせず比率を保つため object-fit: cover を削除 */
}

/* =========================================
   Media Query: PCレイアウト
   ========================================= */
@media screen and (min-width: 769px) {
  .p-mv {
    padding: 0 0 80px; /* topは0に */
  }
  .p-mv__inner {
    display: flex;
    flex-direction: row; /* PC: テキスト左、画像右 */
    justify-content: space-between;
    align-items: flex-end; /* 下のラインを合わせる */
    width: 100%;
    margin: 0;
    /* コンプ幅1440pxの枠内にテキストを収めつつ、右端まで要素を伸ばすための計算式 */
    padding-left: max(80px, calc((100vw - 1440px) / 2 + 80px));
    box-sizing: border-box;
  }
  .p-mv__content {
    text-align: left;
    width: 45%;
    padding-bottom: 55px; /* 画像の下のラインから55px上に配置 */
  }
  .p-mv__title {
    margin-bottom: 20px;
  }
  .p-mv__title img {
    max-width: 450px;
  }
  .p-mv__partner a {
    font-size: 16px;
  }
  .p-mv__image {
    width: 55%; /* 画像エリアの幅 */
    margin: 0; /* ネガティブマージン解除 */
  }
}

/* =========================================
   Paws Decoration (MVとMissionの間)
   ========================================= */
.p-paws {
  position: absolute;
  width: 100%;
  height: 180px; /* SPの高さ */
  margin-top: -70px; /* 少し上に食い込ませる等の微調整用 */
  z-index: 10;
  overflow: hidden;
  pointer-events: none;
}

.p-paws__item {
  position: absolute;
  width: 25px; /* SPでの肉球サイズ */
  opacity: 0; /* 初期状態は非表示 */
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
}

/* スクロール発火用のクラスがついたとき */
.p-paws.is-active .p-paws__item {
  opacity: 1;
  transform: translateY(0);
}

/* 順番に表示させるための遅延時間 */
.p-paws.is-active .p-paws__item--1 {
  transition-delay: 0s;
}
.p-paws.is-active .p-paws__item--2 {
  transition-delay: 0.3s;
}
.p-paws.is-active .p-paws__item--3 {
  transition-delay: 0.6s;
}
.p-paws.is-active .p-paws__item--4 {
  transition-delay: 0.9s;
}
.p-paws.is-active .p-paws__item--5 {
  transition-delay: 1.2s;
}

/* SPでの配置例（仮） */
.p-paws__item--1 {
  left: 80%;
  top: 10px;
}
.p-paws__item--2 {
  left: 83%;
  top: 48px;
}
.p-paws__item--3 {
  left: 73%;
  top: 49px;
}

.p-paws__item--4 {
  left: 76%;
  top: 84px;
}

.p-paws__item--5 {
  left: 67%;
  top: 91px;
}

@media screen and (min-width: 769px) {
  .p-paws {
    height: 180px; /* SPの高さ */
    margin-top: -20px; /* 少し上に食い込ませる等の微調整用 */
  }

  .p-paws__item--1 {
    left: 80%;
    top: 10px;
  }
  .p-paws__item--2 {
    left: 82%;
    top: 57px;
  }
  .p-paws__item--3 {
    left: 78%;
    top: 63px;
  }

  .p-paws__item--4 {
    left: 80%;
    top: 106px;
  }

  .p-paws__item--5 {
    left: 76%;
    top: 120px;
  }

  .p-paws__item {
    width: 31px; /* PCでの肉球サイズ */
  }

  .p-paws.p-paws--second {
    height: 180px;
    margin-top: -80px;
    transform: scaleX(-1);
  }

  .p-paws--second .p-paws__item--1 {
    left: 66%;
    top: 0px;
  }

  .p-paws--second .p-paws__item--2 {
    left: 62%;
    top: 26px;
  }

  .p-paws--second .p-paws__item--3 {
    left: 64%;
    top: 74px;
  }

  .p-paws--second .p-paws__item--4 {
    left: 60%;
    top: 90px;
  }

  .p-paws--second .p-paws__item--5 {
    left: 61%;
    top: 142px;
  }
}
/* =========================================
   Step 2: Mission Section
   ========================================= */
.p-mission {
  padding: 120px 0;
  background-color: var(--color-white);
}

.p-mission__inner {
  text-align: left; /* SPも左揃え */
}

.p-mission__title {
  margin: 0 0 40px;
}

.p-mission__title img {
  width: 100%;
  max-width: 320px; /* SPでのタイトル最大幅 */
}

.p-mission__content {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}

.p-mission__text {
  text-align: left; /* 文字自体は読みやすく左揃え */
  display: block;
  width: 78.94%; /* 380pxのコンテンツ幅に対して300pxの比率 (300/380) */
  margin-left: auto; /* ブロックを右端に寄せる */
  line-height: 2;
  letter-spacing: 0.05em;
  font-weight: var(--font-weight-base);
}

.p-mission__text p {
  margin: 0 0 20px;
}

.p-mission__text p:last-child {
  margin-bottom: 0;
}

/* SPでの画像配置 */
.p-mission__images {
  display: flex;
  flex-direction: column; /* 縦並びに変更 */
  gap: 30px;
  margin-top: 40px;
}

.p-mission__img {
  height: auto;
}

/* 01: 右揃え、サイズ指定 */
.p-mission__img--01 {
  width: 90px;
  margin-left: auto; /* 右端に寄せる */
  margin-right: 30px;
}

/* 02: 左揃え、サイズ指定 */
.p-mission__img--02 {
  width: 135px;
  margin-right: auto; /* 左端に寄せる */
  margin-left: 30px;
}

/* Media Query: PCレイアウト */
@media screen and (min-width: 769px) {
  .p-mission {
    padding: 240px 0;
  }
  .p-mission__inner {
    text-align: left; /* PCでは左揃えベースに */
  }
  .p-mission__title {
    margin-bottom: -30px;
    padding-left: 65px;
  }
  .p-mission__title img {
    max-width: 500px; /* PCでのタイトル最大幅 */
  }
  .p-mission__content {
    margin: 0;
    max-width: 100%;
    padding-left: 50%; /* コンテンツ幅の半分のところから開始 */
    box-sizing: border-box;
  }
  .p-mission__text {
    width: 100%; /* PCでは幅をリセット */
    display: block; /* inline-blockを解除 */
  }

  /* PCでのイラスト配置（左側の空き領域に配置） */
  .p-mission__images {
    display: block;
    margin: 0;
  }
  .p-mission__img {
    position: absolute;
    margin: 0; /* SPのmarginリセット */
  }
  .p-mission__img--01 {
    left: 28%;
    top: 145px;
    width: 90px;
  }
  .p-mission__img--02 {
    left: 0%;
    bottom: -100px;
    width: 135px;
  }
}

/* =========================================
   Step 3: p-support (左右分割スクロールセクション)
   ========================================= */

/* --- スマートフォン（SP）レイアウト（初期値） --- */
.p-support {
  width: 100%;
  position: relative;
  background-color: var(--color-primary);
  padding: 100px 0; /* 上下の余白 */
}

.p-support__inner {
  width: 100%;
  margin: 0 auto;
  max-width: var(--content-width); /* SPでのコンテンツ幅を430pxに拡大 */
}

/* SP時は横並びを解除（通常の縦スクロール） */
.p-support__left {
  width: 100%;
  height: auto;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 50px;
}

/* 画像ボックスの基本設定 */
.p-support__image-box {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  display: none; /* SPでは通常の切り替えや縦並びにするためのベース */
}

/* SPでは1枚目を表示、2枚目以降を通常の流れにするなど調整可能（ここではアクティブのみ表示） */
.p-support__image-box.active {
  display: flex;
}

/* 肉球コンテナ（SPでは非表示、または調整して配置） */
.p-support__paws {
  display: none;
}

.p-support__block {
  padding: 30px;
  background-color: var(--color-bg-light); /* 共通の薄い背景色を使用 */
  border-radius: 8px;
  box-sizing: border-box;
  margin-bottom: 20px;
}

.p-support__block h3 {
  margin: 0 0 15px;
  color: var(--color-primary);
}

.p-support__right {
  width: 100%;
  box-sizing: border-box;
}

.p-support__right .content-block p {
  color: var(--color-white);
}

.p-support__right .content-block div p {
  color: var(--color-primary);
}

/* 💡 文字を黄色にする便利クラス（Utility） */
.u-color-yellow {
  color: #fce952; /* 💡 デザインの黄色に合わせてカラーコード（#〜）を変更してください */
}

.p-support__right .content-block h3 {
  margin-bottom: 20px;
}

.p-support__right .content-block > p {
  margin-bottom: 30px;
}

/* --- メディアクエリ: PCレイアウト（769px以上） --- */
@media screen and (min-width: 769px) {
  .p-support {
    padding: 180px 0;
  }

  /* 左右分割の横並び（上端合わせ） */
  .p-support__inner {
    max-width: var(--content-width); /* 1200px */
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin: 0 auto;
  }

  /* 左側固定エリア（PC） */
  .p-support__left {
    width: 50%;
    position: sticky;
    margin-bottom: 0;

    /* 💡 JSで取得したヘッダー高さを引いた画面サイズにする
       （JSが効く一瞬前やエラー時の保険として、初期値100pxを指定） */
    top: var(--header-height);
    height: calc(100vh - var(--header-height));
  }

  .p-support__image-box {
    max-width: 500px;
    width: 100%; /* 💡 横幅も指定しておく */
    display: flex;
    position: absolute;

    /* 💡 親要素（ヘッダーを引いた空間）のど真ん中に配置する魔法 */
    top: 50%;
    left: 0;
    transform: translateY(-50%);

    opacity: 0;
    transition: opacity 0.8s ease-in-out;
  }

  .p-support__image-box.active {
    opacity: 1;
  }

  /* Stickyエリア内の肉球コンテナ（PC） */
  .p-support__paws {
    display: block; /* PCでのみ肉球を有効化 */
    position: absolute;
    bottom: 20px;
    right: 60px;
    width: 160px;
    height: 280px;
    z-index: 100;
  }

  .p-support__paw {
    position: absolute;
    width: 45px;
    opacity: 0;
    transition: opacity 0.3s ease;
    transform-origin: center center;
  }

  /* 上から下へ流れる配置 */
  .p-support__paw--1 {
    bottom: 140px;
    right: 40px;
  }
  .p-support__paw--2 {
    bottom: 100px;
    right: -15px;
  }
  .p-support__paw--3 {
    bottom: 60px;
    right: 40px;
  }
  .p-support__paw--4 {
    bottom: 10px;
    right: -15px;
  }
  .p-support__paw--5 {
    bottom: -40px;
    right: 40px;
  }

  .p-support__paw.is-visible {
    opacity: 1;
  }

  /* 右側コンテンツエリア（PC） */
  .p-support__block {
    height: 100vh; /* 画面にフィットさせてスクロール量を確保 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 0;
    background-color: var(--color-bg-light);
    padding: 40px;
    position: relative;
  }

  /* ブロック間の区切り線 */
  .p-support__block:not(:last-child)::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 40px;
    right: 40px;
    height: 2px;
    background-color: rgba(0, 0, 0, 0.05);
  }

  .p-support__right .content-block h3 {
    margin-left: -50px;
    margin-bottom: 30px;
  }

  .p-support__right .content-block > p {
    margin-bottom: 50px;
  }

  .p-support__right {
    width: 50%;
    max-width: 500px;
  }
}

/* =========================================
   Step 4 & 5: 共通カードコンポーネント (p-list-card)
   ========================================= */

/* -----------------------------------------
   ① 共通のデザイン
-------------------------------------------- */
.p-list-card {
  background-color: var(--color-white);
  width: 100%;
  padding: 40px 0;
  border-radius: 4px;
  box-sizing: border-box;
}

/* カード内のタイトル共通 */
.p-list-card__title {
  color: var(--color-primary);
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  letter-spacing: 0.1em;
  margin: 0 0 12px 0;
}

/* カード内の本文テキスト共通 */
.p-list-card__text {
  color: var(--color-primary);
  line-height: 1.6;
  margin: 0;
}

/* -----------------------------------------
   ② 各エリア固有のコンテナ・パーツ設定
-------------------------------------------- */
/* フロー全体の枠 */
.p-flow {
  width: 100%;
  box-sizing: border-box;
}

.p-flow__inner {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

/* フロー特有の文字上書き（モディファイアによる上書き） */
/* ※ HTML側で .p-list-card--flow を追加することで発動します */
.p-list-card--flow .p-list-card__text {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}

/* CSSで作る下矢印 */
.p-flow__arrow {
  width: 15px;
  height: 15px;
  border-right: 3px solid #ffffff;
  border-bottom: 3px solid #ffffff;
  transform: rotate(45deg);
  margin-bottom: 5px;
}

/* 支援用途全体の枠 */
.p-usage {
  width: 100%;
  margin: 30px auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

/* 支援用途特有の文字上書き */
/* ※ HTML側で .p-list-card--usage を追加することで発動します */
.p-list-card--usage .p-list-card__text {
  text-align: left;
  padding: 0 30px;
}

/* 支援用途の一番下の注釈 */
.p-support__right .content-block div .p-usage__note {
  color: var(--color-white);
  font-size: 16px;
  line-height: 1.5;
  margin: 10px 0 0 0;
  text-align: left;
  width: 100%;
  font-weight: var(--font-weight-base);
}

.p-support__right .content-block:nth-child(2) {
  margin-top: 80px; /* 1つ目のブロックとの間（上）に余白を作りたい場合 */
}

@media screen and (min-width: 769px) {
  .p-list-card__title {
    font-size: 18px;
  }

  .p-list-card--flow .p-list-card__text {
    font-size: 20px;
  }

  .p-flow__inner {
    gap: 20px;
  }

  .p-support__right .content-block:nth-child(2) {
    margin-top: 100px; /* 1つ目のブロックとの間（上）に余白を作りたい場合 */
    margin-bottom: 50px; /* 一番下にも余白を作りたい場合（不要なら削除OK） */
  }

  .p-usage {
    gap: 40px;
  }
}

/* =========================================
   Step 6: p-about (団体紹介セクション)
   ========================================= */
.p-about {
  padding: 0;
  background-color: var(--color-white);
}

.p-about__box {
  border: 5px solid var(--color-primary); /* 全体を囲む青い枠線 */
  padding: 20px;
  display: flex;
  flex-direction: column; /* SPは縦並び */
  gap: 30px;
  border-radius: 8px;
  position: relative; /* 💡PC版でリンクエリアを全体に広げるための基準点 */
  margin-top: 120px;
}

.p-about__image {
  width: 100%;
}

.p-about__image img {
  width: 100%;
  height: auto;
  display: block;
}

.p-about__content {
  display: flex;
  flex-direction: column;
}

.p-about__subtitle {
  color: var(--color-primary);
  font-size: var(--font-size-base);
  font-weight: bold;
  margin: 0 0 5px 0;
  letter-spacing: 0.1em;
}

.p-about__title {
  color: var(--color-primary);
  font-size: 24px;
  font-weight: bold;
  margin: 0 0 20px 0;
  letter-spacing: 0.1em;
}

/* --- 実績データエリア (SP: 縦並び) --- */
.p-about__data {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 10px;
}

.p-about__data-item {
  text-align: center;
  position: relative;
  padding-bottom: 20px;
}

/* SPでの横の区切り線 */
.p-about__data-item:not(:last-child)::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background-color: var(--color-primary);
  opacity: 0.5;
}

.p-about__data-label {
  color: var(--color-primary);
  font-size: var(--font-size-base);
  font-weight: bold;
  margin: 0 0 10px 0;
}

.p-about__data-value {
  color: var(--color-primary);
  font-size: 26px;
  font-family: var(--font-family-base);
  font-weight: 600;
  line-height: 1;
  margin: 0;
}

.p-about__data-value span {
  font-size: 16px;
  margin-left: 5px;
}

.p-about__data-note {
  color: #999;
  font-size: 12px;
  text-align: center;
  margin: 0 0 30px 0;
}

/* --- テキストエリア --- */
.p-about__text {
  color: var(--color-primary);
  font-size: 14px;
  line-height: 1.8;
  margin-bottom: 20px;
}

.p-about__text p {
  margin: 0;
}

/* 💡 テキストリンクの基本スタイル（SPではここだけがタップに反応します） */
.p-about__link {
  color: var(--color-primary);
  font-size: 14px;
  border-bottom: 1px solid var(--color-primary); /* 下線 */
  align-self: flex-start;
  padding-bottom: 2px;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.p-about__link:hover {
  opacity: 0.7;
}

/* SPでは新しく作った縦線を隠しておく */
.p-about__data-line {
  display: none;
}

/* =========================================
   Media Query: PCレイアウト
   ========================================= */
@media screen and (min-width: 769px) {
  .p-about {
    padding: 0;
  }

  /* 💡 PC版：ボックス全体にホバー効果とオリジナルカーソルを復活させます */
  .p-about__box {
    padding: 30px 0;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    gap: 0;
    transition:
      transform 0.3s ease,
      box-shadow 0.3s ease;
    margin-top: 180px;
  }

  .p-about__box:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(31, 100, 161, 0.15);
  }

  .p-about__link {
    font-size: 0;
    color: transparent;
    border: none;
    padding: 0;
  }

  .p-about__link::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    /* ここにオリジナルカーソルを設定！ */
    cursor:
      url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='20' fill='%231f64a1' /%3E%3Cpath d='M16 12 L24 20 L16 28' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' /%3E%3C/svg%3E")
        20 20,
      pointer;
  }

  .p-about__image {
    width: 40%;
    flex-shrink: 0;
    max-width: 450px;
  }

  .p-about__content {
    width: 55%;
    max-width: 630px;
  }

  .p-about__title {
    font-size: 40px;
    margin-bottom: 20px;
  }

  /* --- 実績データエリア (PC: 横並び) --- */
  .p-about__data {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 0;
  }

  .p-about__data-item {
    flex: none;
    width: auto;
    padding: 20px 0;
  }

  /* 縦線のデザイン（PCレイアウト内） */
  .p-about__data-line {
    display: block;
    width: 2px;
    align-self: stretch;
    background-color: var(--color-primary);
    opacity: 0.5;
    flex-shrink: 0;
  }

  .p-about__data-item:not(:last-child)::after {
    display: none;
  }

  .p-about__data-value {
    font-size: 32px;
    font-weight: var(--font-weight-base);
  }

  .p-about__data-value span {
    font-size: var(--font-size-base);
  }

  .p-about__data-note {
    margin-bottom: 16px;
    text-align: right;
    margin-bottom: 20px;
  }

  .p-about__text {
    font-size: var(--font-size-base);
    margin-bottom: 0;
  }
}

/* =========================================
   共通コンポーネント: c-ticker (自動無限スクロール)
   ========================================= */
/* スクロールアニメーションの定義 */
@keyframes ticker-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* 一番外側の枠（はみ出た部分を隠す） */
.c-ticker {
  display: flex;
  overflow: hidden;
  width: 100%;
}

/* 動くレーン部分 */
.c-ticker__track {
  display: flex;
  flex-shrink: 0;
  width: max-content;
  animation: ticker-scroll 30s linear infinite;
}

/* -----------------------------------------
   ① 画像スライダー用のデザイン (--image)
-------------------------------------------- */
.c-ticker--image {
  padding: 80px 0 30px;
  background-color: var(--color-white);
}

.c-ticker--image .c-ticker__track {
  gap: 23px; /* 画像と画像の間の余白 */
  padding-right: 30px; /* 💡ここをgapと同じ数値にすることで、1セット目と2セット目の繋ぎ目が完璧になります */
  align-items: flex-start; /* ガタガタな高さの画像を縦中央で揃える */
  animation-duration: 40s; /* 画像は少しゆっくり流す（秒数を増やすと遅くなります） */
}

/* 画像自体のスタイル */
.c-ticker__img {
  width: 180px; /* お好みの幅に調整してください */
  height: auto;
  border-radius: 8px; /* スクショに合わせた角丸 */
  object-fit: cover;
  flex-shrink: 0; /* 画像が潰れるのを防ぐ */
}

.c-ticker__img:nth-child(odd) {
}

.c-ticker__img:nth-child(even) {
  transform: translateY(50px);
  width: 110px;
}

/* -----------------------------------------
   ② テキストスライダー用のデザイン (--text)
-------------------------------------------- */
.c-ticker--text {
  background-color: var(--color-bg-light); /* 薄い水色の背景 */
  padding: 50px 0;
}

.c-ticker--text .c-ticker__track {
  gap: 50px;
  padding-right: 50px;
  align-items: center;
  animation-duration: 45s; /* テキストの流れる速度 */
}

/* テキスト自体のスタイル */
.c-ticker__text-item {
  font-size: 80px; /* スクショに合わせた大きな文字 */
  font-family: var(--font-family-base); /* Poppins等の英語フォント適用 */
  font-weight: 900;
  color: var(--color-white);
  white-space: nowrap; /* テキストを絶対に改行させない */
  letter-spacing: 0.1em;
  margin: 0;
  line-height: 1;
}

/* =========================================
   Media Query: PCレイアウト向け微調整
   ========================================= */
@media screen and (min-width: 769px) {
  .c-ticker--image {
    padding: 200px 0;
  }
  .c-ticker__img {
    width: 400px; /* PCでは画像を少し大きく */
  }

  .c-ticker__img:nth-child(even) {
    width: 250px;
  }

  .c-ticker__text-item {
    font-size: 120px; /* PCではテキストをさらに大きく */
  }

  .c-ticker--image .c-ticker__track {
    gap: 40px;
  }

  .c-ticker--text {
    padding: 100px 0;
  }
}

/* =========================================
   Step 7: p-service (サービス紹介セクション)
   ========================================= */
.p-service {
}

/* --- ① イラストエリア --- */
.p-service__hero {
  position: relative;
  width: 100%;
  height: 180px; /* SPの高さ */
  overflow: hidden;
}

/* 街並みの背景 */
.p-service__hero-bg {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../img/building_bg.svg");
  background-repeat: repeat-x;
  background-position: bottom center;
  background-size: auto 60%;
}

/* 人物と犬の配置 */
.p-service__hero-figures {
  position: absolute;
  width: 100%;
  height: 100%;
  max-width: var(--content-width);
  left: 50%;
  transform: translateX(-50%);
}

.p-service__figure {
  position: absolute;
  bottom: 0;
  height: auto;
}

.p-service__figure--1 {
  width: 110px;
  left: 0;
}
.p-service__figure--2 {
  width: 80px;
  right: 0;
}
.p-service__figure--3 {
  display: none; /* SPでは非表示 */
}

/* --- ② ご提供イメージ --- */
.p-service__inner {
  background-color: var(--color-bg-light);
  padding-top: 80px;
}

.p-service__block {
  text-align: center;
}

.p-service__title {
  margin: 0 0 30px;
}

.p-service__title img {
  height: 25px; /* タイトル画像の高さ */
  width: auto;
}

.p-service__block:nth-of-type(2) .p-service__title img {
  height: 70px;
  margin-top: 100px;
}

.p-service__desc {
  font-size: 14px;
  line-height: 1.8;
  margin-bottom: 40px;
  text-align: left;
}

/* フロー図（SP縦並び） */
.p-service__flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.p-service__flow-item {
  background-color: var(--color-white);
  border: 3px solid var(--color-primary);
  width: 100%;
  padding: 30px 10px;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-radius: 5px;
}

.p-service__flow-sup {
  color: var(--color-primary);
  font-size: 16px;
  font-weight: 600;
}

.p-service__flow-main {
  color: var(--color-primary);
  font-size: 24px;
  letter-spacing: 0.1em;
  font-weight: 700;
}

.p-service__flow-sub {
  font-size: 16px;
  margin-top: 16px;
  font-weight: 500;
}

/* CSSで作る「くの字」の矢印（SPは下向き） */
.p-service__flow-arrow {
  width: 24px; /* マスクを使う場合は少し大きめの方が見栄えが良いです */
  height: 24px;
  background-color: var(--color-primary); /* 💡ここで自由に色を変えられます！ */

  /* 💡【修正】先端が丸いSVGを使って、背景色を矢印の形に切り抜く最新手法 */
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 8 12 16 20 8'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 8 12 16 20 8'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* --- ③ 選ばれる理由（カードデザイン） --- */
.p-service__reasons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  margin-top: 60px;
}

.p-reason-card {
  position: relative;
  background-color: var(--color-white);
  border: 3px solid var(--color-secondary); /* オレンジの枠線 */
  padding: 50px 20px 30px;
  text-align: center;
  width: 100%;
  border-radius: 5px;
}

/* 枠線に重なるアイコン */
.p-reason-card__icon {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%); /* 💡これで上枠線のど真ん中に配置されます */
  width: 80px;
  height: 80px;
  border-radius: 50%;
  padding: 5px; /* 枠線を綺麗に隠すための余白 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.p-reason-card__icon img {
  width: 100%;
  height: 100%;
}

.p-reason-card__title {
  color: var(--color-primary); /* 青色 */
  font-size: 20px;
  font-weight: bold;
  margin: 0 0 15px;
  letter-spacing: 0.05em;
}

.p-reason-card__text {
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  text-align: left; /* テキストは左揃えが読みやすい */
  display: inline-block; /* 中央揃えの親の中で左揃えにするテクニック */
}

/* =========================================
   Media Query: PCレイアウト
   ========================================= */
@media screen and (min-width: 769px) {
  .p-service {
  }

  /* イラストエリアを大きく */
  .p-service__hero {
    height: 250px;
  }

  .p-service__figure--1 {
    width: 225px;
  }
  .p-service__figure--2 {
    width: 170px;
    right: 50%;
    left: 50%;
    transform: translateX(-50%);
  }
  .p-service__figure--3 {
    display: block; /* PCでは表示 */
    width: 130px;
    right: 0;
  }

  .p-service__title img {
    height: 36px;
  }

  .p-service__desc {
    font-size: var(--font-size-base);
    margin-bottom: 60px;
    text-align: center;
  }

  /* フロー図（PC横並び） */
  .p-service__flow {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20px;
  }

  .p-service__flow-item {
    flex: 1;
    padding: 30px 10px;
  }
  .p-service__flow-arrow {
    /* 💡【修正】マスクの画像が「下向き」なので、PCでは左に90度回転させて「右向き」にします */
    transform: rotate(-90deg);
    flex-shrink: 0;
  }

  /* 理由カード（PC3カラム横並び） */
  .p-service__reasons {
    flex-direction: row;
    justify-content: center;
    gap: 64px;
    margin-top: 80px;
  }

  .p-service__block:nth-of-type(2) .p-service__title img {
    height: 94px;
    margin-top: 100px;
  }

  .p-reason-card {
    flex: 1;
    padding: 70px 0 40px;
  }

  .p-reason-card__icon {
    width: 100px;
    height: 100px;
  }

  .p-reason-card__title {
    font-size: 24px;
  }
}

/* =========================================
   Step 8: p-consultation (相談状況エリア)
   ========================================= */
.p-consultation {
  position: relative; /* 💡下向き三角矢印の基準点 */
  background-color: var(--color-primary); /* 青色背景 */
  padding: 55px 0px;
  text-align: center;
}

/* CSSで作る下向きの巨大な三角矢印 */
.p-consultation::after {
  content: "";
  position: absolute;
  bottom: -25px; /* 矢印の高さ分だけ下に飛び出させる */
  left: 50%;
  transform: translateX(-50%);
  border-width: 30px 30px 0 30px;
  border-style: solid;
  border-color: var(--color-primary) transparent transparent transparent;
  z-index: 10;
}

/* タイトル周り */
.p-consultation__title {
  margin-bottom: 40px;
}

.p-consultation__title img {
  height: 60px; /* 💡画像の高さ（デザインに合わせて調整してください） */
  width: auto;
}

/* リスト（SP縦並び） */
.p-consultation__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin: 0 auto;
  list-style: none;
  padding: 0;
}

.p-consultation__item {
  background-color: var(--color-white);
  color: var(--color-primary);
  padding: 20px 10px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: bold;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* =========================================
   Step 9: p-contact-lead (お問合せ誘導エリア)
   ========================================= */
.p-contact-lead {
  background-color: #fff;
  padding: 80px 20px 120px;
  text-align: center;
  margin-bottom: 12.8125rem;
}

.p-contact-lead__title img {
  height: 22px;
  width: auto;
  margin-bottom: 30px;
}

.p-contact-lead__desc {
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  text-align: left;
}

.p-contact-lead__note {
  color: var(--color-error);
  font-size: 12px;
  display: inline-block;
}

/* =========================================
   Media Query: PCレイアウト
   ========================================= */
@media screen and (min-width: 769px) {
  /* --- 相談状況エリア --- */
  .p-consultation {
    padding: 100px 20px;
  }

  .p-consultation::after {
    bottom: -40px;
    border-width: 40px 40px 0 40px;
  }

  .p-consultation__title {
    margin-bottom: 50px;
  }

  .p-consultation__title img {
    height: 40px; /* 💡PC版での画像の高さ（デザインに合わせて調整してください） */
  }

  .p-consultation__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .p-consultation__item {
    padding: 24px 20px;
    font-size: 16px;
  }

  /* --- お問合せ誘導エリア --- */
  .p-contact-lead {
    padding: 100px 20px 80px;
    margin-bottom: 0px;
  }

  .p-contact-lead__title img {
    height: 27px;
  }

  .p-contact-lead__desc {
    font-size: 18px;
    text-align: left;
    width: 60%;
    margin: 0 auto;
  }

  .p-contact-lead__note {
    font-size: 16px;
  }
}

/* =========================================
   専用フォームデザイン (p-pw-form)
   ========================================= */
.p-pw-form {
  width: 100%;
  max-width: var(--max-width); /* フォーム全体の最大幅 */
  margin: 30px auto 0;
}

.p-pw-form__inner {
  width: 100%;
  margin: 0 auto;
}

.p-pw-form__group {
  margin-bottom: 40px;
  width: 100%;
}

/* --- ラベル（青文字・左揃え） --- */
.p-pw-form__label {
  display: block;
  color: #3b76bc; /* スクショの青色 */
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 10px;
  text-align: left;
  letter-spacing: 0.05em;
}

/* 必須マークの赤（*） */
.p-pw-form__req {
  color: var(--color-error);
  margin-left: 4px;
}

/* --- 入力エリア（共通） --- */
.p-pw-form__input,
.p-pw-form__textarea {
  width: 100%;
  background-color: var(--contact-form-bg); /* スクショの薄い青グレー */
  border: 1px solid var(--contact-form-border);
  border-radius: 4px;
  padding: 15px 15px;
  font-size: var(--font-size-base);
  color: #333;
  box-sizing: border-box;
  font-family: inherit;
  transition: border-color 0.3s ease;
  text-align: left;
}

/* プレースホルダー（例：〜）の色 */
.p-pw-form__input::placeholder,
.p-pw-form__textarea::placeholder {
  color: #a0aab8;
}

/* 入力中に枠線を青くする */
.p-pw-form__input:focus,
.p-pw-form__textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}

.p-pw-form__textarea {
  resize: vertical; /* 縦方向のみリサイズ可能に */
  min-height: 120px;
}

/* --- 送信ボタン（オレンジのカプセル型） --- */
.p-pw-form__submit {
  text-align: center;
}

.p-pw-form__submit-btn {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--color-secondary); /* スクショのオレンジ色 */
  color: #ffffff;
  font-size: 24px;
  font-weight: bold;
  border: none;
  border-radius: 40px; /* カプセル型 */
  padding: 10px 40px;
  max-width: 260px;
  width: 100%;
  cursor: pointer;
  position: relative;
  transition: opacity 0.3s ease;
}

.p-pw-form__submit-btn:hover {
  opacity: 0.8;
}

/* ボタン右側の矢印（→） */
.p-pw-form__submit-btn::after {
  content: "→";
  position: absolute;
  right: 25px;
  font-weight: bold;
}

/* 💡 入力完了後（文字が入力されている状態）に「太い青枠」にする */
.p-pw-form__input:not(:placeholder-shown),
.p-pw-form__textarea:not(:placeholder-shown) {
  border-color: var(--color-primary); /* 枠線を青色にする */

  /* 💡 枠線自体を 2px に太くすると画面が1pxガタッとズレてしまうため、
     内側に1pxの青い影を落として「2pxの太枠」に見せるテクニックを使います */
  box-shadow: inset 0 0 0 1px var(--color-primary);

  /* 入力後の背景色を少し変えたい場合はここに追加します（例: 白にする） */
  background-color: #ffffff;
}

/* =========================================
   ブラウザの自動入力（オートフィル）時のスタイル補正
   ========================================= */
.p-pw-form__input:-webkit-autofill,
.p-pw-form__textarea:-webkit-autofill {
  border-color: var(--color-primary) !important;

  /* 💡 1pxの青い内枠と、1000pxの白い背景を同時に指定してブラウザ特有の色を完全に塗りつぶします */
  -webkit-box-shadow:
    inset 0 0 0 1px var(--color-primary),
    inset 0 0 0 1000px #ffffff !important;

  /* 文字色もブラウザに強制変更されないように指定 */
  -webkit-text-fill-color: #333 !important;
}

/* さらにフォーカス（入力中）状態になった時のオートフィル色も固定 */
.p-pw-form__input:-webkit-autofill:focus,
.p-pw-form__textarea:-webkit-autofill:focus {
  border-color: var(--color-primary) !important;
  -webkit-box-shadow:
    inset 0 0 0 1px var(--color-primary),
    inset 0 0 0 1000px #ffffff !important;
}

/* 入力中（フォーカス時）の枠線も太くする */
.p-pw-form__input:focus,
.p-pw-form__textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: inset 0 0 0 1px var(--color-primary); /* ここにも同じものを追加 */
  background-color: #ffffff;
}

/* --- プライバシーポリシー同意 --- */
.p-pw-form__privacy {
  text-align: center;
  margin: 20px 0 50px;
  display: flex;
  justify-content: center;
}

/* 💡【変更】Flexboxを使ってチェックボックスとテキストを横並び・中央揃えにする */
.p-pw-form__privacy-text {
  display: flex;
  align-items: center; /* 縦のズレを中央で合わせる */
  justify-content: center; /* 全体を横の中央に配置する */
  font-size: var(--font-size-base);
  color: var(--color-text); /* 既存のテキスト色に合わせて調整してください */
  margin-bottom: 15px;
}

/* リンクテキストの設定（念のためそのまま残します） */
.p-pw-form__privacy-text a {
  text-decoration: underline;
  color: var(--color-primary);
  font-weight: bold;
}

.p-pw-form__privacy-text a:hover {
  text-decoration: none;
}

.p-pw-form__checkbox-wrap label,
.p-pw-form__checkbox-wrap input[type="checkbox"],
.p-pw-form__checkbox-wrap span {
  vertical-align: middle;
}

/* 💡 MW WP Formが出力する構造（<label>）にデザインを当てる */
.p-pw-form__checkbox-wrap label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  font-size: 0;
  color: var(--color-primary);
  font-weight: bold;
}

/* 💡 デフォルトのチェックボックス（<input type="checkbox">）を独自デザインにする */
.p-pw-form__checkbox-wrap input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 30px;
  height: 30px;
  border: 2px solid var(--contact-form-border);
  background-color: var(--contact-form-bg);
  border-radius: 2px;
  margin-right: 10px;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

/* 💡 チェックされた時の箱（色反転） */
.p-pw-form__checkbox-wrap input[type="checkbox"]:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

/* 💡 チェックされた時のレ点（白） */
.p-pw-form__checkbox-wrap input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 10px;
  width: 8px;
  height: 14px;
  border-right: 3px solid #ffffff;
  border-bottom: 3px solid #ffffff;
  transform: rotate(45deg);
}

/* =========================================
   ホバー（マウスオーバー）時の枠線アクション
   ========================================= */

/* 💡 入力欄・テキストエリアにホバーした時 */
.p-pw-form__input:hover,
.p-pw-form__textarea:hover {
  border-color: var(--color-primary);
  box-shadow: inset 0 0 0 1px var(--color-primary); /* 内側に1pxの線を足して2pxの太枠に見せる */
}

/* 💡 チェックボックスの箱にホバーした時 */
.p-pw-form__checkbox-wrap input[type="checkbox"]:hover {
  border-color: var(--color-primary);
  box-shadow: inset 0 0 0 1px var(--color-primary);
}

/* =========================================
   必須項目が未入力の時の送信ボタン（グレーアウト）
   ========================================= */
/* 💡 フォーム内に1つでも条件を満たしていない（:invalid）必須項目がある場合の指定 */
.p-pw-form:has(:invalid) .p-pw-form__submit-btn {
  background-color: #c4ccd4; /* グレー色 */
  cursor: not-allowed; /* マウスカーソルを「禁止マーク」にする */
  pointer-events: none; /* クリックできないようにする */
  opacity: 0.8;
}

/* 💡 ボタン右側の矢印（→）もグレーの時は少し色を薄くする */
.p-pw-form:has(:invalid) .p-pw-form__submit-btn::after {
  opacity: 0.5;
}

@media screen and (min-width: 769px) {
  .p-pw-form {
    width: 60%;
  }

  .p-pw-form__label {
    font-size: 20px;
  }
}

/* =========================================
   必須項目が未入力の時の送信ボタン（グレーアウト JS連動用）
   ========================================= */
/* 💡 クリックは可能にしつつ、見た目だけをグレーにしておく */
.p-pw-form__submit-btn.is-disabled {
  background-color: #c4ccd4 !important; /* グレー色 */
  opacity: 0.8 !important;
  /* 💡 ここにあった pointer-events: none; と cursor: not-allowed; を削除しました */
}

.p-pw-form__submit-btn.is-disabled::after {
  opacity: 0.5;
}

/* =========================================
   確認・完了ページ共通レイアウト (.p-pw-page)
   ========================================= */
.p-pw-page {
  max-width: 800px;
  margin: 60px auto 350px;
  padding: 0 20px;
}

.p-pw-page__lead {
  text-align: center;
  font-size: 15px;
  margin-bottom: 40px;
  color: #333;
}

/* =========================================
   確認画面専用のデザイン (.mw_wp_form_confirm)
   ========================================= */
/* 💡 確認画面では入力枠が消えてただのテキストになるため、読みやすく余白を調整 */
.mw_wp_form_confirm .p-pw-form__group {
  border-bottom: 1px solid #e0e5ec;
  padding-bottom: 15px;
  margin-bottom: 20px;
  word-break: break-word; /* 長い英数字やURLなどを枠に合わせて強制的に折り返す */
  overflow-wrap: break-word; /* はみ出し防止の念押し */
  max-width: 500px;
  width: 80%;
  margin: 0 auto 30px;
}

.mw_wp_form_confirm .p-pw-form__label {
  font-size: var(--font-size-base);
  color: #8ca6c8; /* ラベルを少し控えめな色に */
  margin-bottom: 5px;
  text-align: left;
}

.mw_wp_form_confirm .p-pw-form__inner {
  margin: 50px auto 300px;
}

/* 確認画面のボタンエリア（SP縦並び、PC横並び） */
.p-pw-form__buttons {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 40px;
}

/* 💡 確認画面で自動出力される「同意する」のテキストを安全に隠す */
.mw_wp_form_confirm .p-pw-form__checkbox-wrap {
  font-size: 0;
  margin: 0;
}

/* 💡 確認画面では「プライバシーポリシーに同意する」のテキストだけを綺麗に見せる */
.mw_wp_form_confirm .p-pw-form__privacy-text {
  font-size: 15px;
  color: #333;
  font-weight: bold;
}

/* 確認画面ではリンクを下線なし（ただのテキスト風）にする場合 */
.mw_wp_form_confirm .p-pw-form__privacy-text a {
  pointer-events: none; /* クリックできないようにする */
  text-decoration: none;
  color: inherit;
}

.mw_wp_form_confirm .p-pw-form__empty {
  color: #a0aab8;
  font-size: 15px;
}

.mw_wp_form_confirm .p-pw-form__privacy {
  display: none;
}

@media screen and (min-width: 769px) {
  .p-pw-form__buttons {
    flex-direction: row;
    justify-content: center;
    gap: 30px;
  }

  .mw_wp_form_confirm .p-pw-form__inner {
    margin: 50px auto;
  }

  .p-pw-page {
    margin: 60px auto;
  }
}

.p-pw-form__btn:hover {
  opacity: 0.8;
}

.p-pw-form__submit-btn--back {
  background-color: #c4ccd4; /* 目立ちすぎないグレー色 */
  justify-content: end;
  margin-bottom: 15px;
}

@media screen and (min-width: 769px) {
  .p-pw-form {
    margin: 40px auto 0;
  }

  .p-pw-form__buttons {
    margin-right: 30px;
  }
  .p-pw-form__submit-btn--back {
    margin-bottom: 0px;
  }
}

/* 💡 送信ボタン用の右側「→」を消す */
.p-pw-form__submit-btn--back::after {
  content: none;
}

/* 💡 代わりに左側に「←」を追加する */
.p-pw-form__submit-btn--back::before {
  content: "←";
  position: absolute;
  left: 25px;
  font-weight: bold;
}

/* 送信ボタン（オレンジ） */
.p-pw-form__btn--send {
  background-color: var(--color-secondary);
  color: #ffffff;
  position: relative;
}

.p-pw-form__btn--send::after {
  content: "→";
  position: absolute;
  right: 25px;
}

/* =========================================
   完了画面専用のデザイン (.p-pw-complete-box)
   ========================================= */
.p-pw-complete-box {
  border-radius: 8px;
  text-align: center;
  padding: 40px 0 0;
  margin: 0 auto;
  width: 100%;
}

.p-pw-complete-box__title {
  font-size: 20px;
  font-weight: bold;
  color: var(--color-primary);
  margin-bottom: 20px;
}

.p-pw-complete-box__text {
  font-size: 15px;
  line-height: 1.8;
  color: var(--color-text-main);
  margin-bottom: 40px;
}

.p-pw-complete-box__btn-wrap {
  text-align: center;
}

/* .mwform-checkbox-field input[type="checkbox"] {
  -webkit-appearance: checkbox !important;
  appearance: auto !important;
  display: inline-block !important;
  width: 30px !important;
  height: 30px !important;
  opacity: 1 !important;
  visibility: visible !important;
  margin-right: 8px !important;
  position: static !important;
} */

.mwform-checkbox-field-text {
  display: none;
}

/* =========================================
   完了画面専用：トップページへ戻るボタン（崩れ修正版）
   ========================================= */
.p-pw-complete-btn {
  display: inline-flex;
  justify-content: center; /* 💡 文字をパーツの「ど真ん中」に集める */
  align-items: center;
  background-color: var(
    --color-secondary
  ); /* オレンジ色（グレーにしたい場合は #c4ccd4 に変更してください） */
  color: #ffffff !important;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none !important;
  border-radius: 40px; /* カプセル型 */
  padding: 16px 40px;
  width: 100%;
  max-width: 300px; /* 横幅を綺麗に固定 */
  box-sizing: border-box; /* 枠線やパディングを含めたサイズ計算 */
  transition: opacity 0.3s ease;
  position: relative;
}

.p-pw-complete-btn:hover {
  opacity: 0.8;
}

/* 💡 「戻る」アクションなので、左側に「←」の矢印を配置 */
.p-pw-complete-btn::before {
  content: "←";
  position: absolute;
  left: 25px;
  font-weight: bold;
}

.confirm-text {
  text-align: left;
}
/* CF7が自動出力する不要な p タグをレイアウト上「無かったこと」にする */
.p-pw-form__buttons p {
  display: contents;
}