/* 固定背景エリア */
.header-banner {
    background-image: url('../images/apply.png'); /* 背景画像を指定 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff; /* テキストカラー */
    text-align: center;
    padding: 100px 20px; /* 上下の余白を調整 */
  }

  /* 固定背景内のテキスト */
  .header-banner .urgent-content h1 {
    font-size: 2.4rem;
    font-weight: bold;
    margin-bottom: 10px;
  }

  .header-banner .urgent-content p {
    font-size: 1.2rem;
    line-height: 1.6;
  }

  /* 緊急時専用のセクションヘッダー（中央寄せ） */
  .urgency-header-center {
    width: 100%;
    max-width: 1000px;
    text-align: left; /* 中央寄せ */
    margin: 0 auto;
    box-sizing: border-box;
  }

  /* 見出し */
  .urgency-title-center {
    font-size: 2.4rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
    text-align: center;
    position: relative;
    padding-bottom: 5px; /* 下線との間隔 */
    display: inline-block; /* 文字幅に合わせる */
  }



  /* スマホ対応 */
  @media (max-width: 768px) {
    .urgency-title-center {
        font-size: 1.8rem;
    }
  }



  /* ご挨拶セクション */
  #sympathy-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    margin-top: 50px;
  }

  /* セクションのレイアウト */
  .message-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px; /* 画像とテキストの間隔 */
    max-width: 1000px;
    margin-bottom: 60px;
  }

  /* 左側のテキストコンテナ */
  .message-content {
    max-width: 600px;
  }

  /* 右側の画像コンテナ */
  .message-image img {
    width: 200px; /* 画像の幅 */
    height: auto;
    border-radius: 10px;
  }

  /* 見出し */
  .urgency-title-center {
    font-size: var(--fs__5l);
    font-weight: bold;
    margin-bottom: 20px;
    text-align: left;
  }

  /* テキストのスタイル */
  .message-content p {
    font-size: var(--fs__l);
    font-weight: bold;
    line-height: 1.8;
    text-align: left;
    margin-bottom: 10px;
  }

  /* レスポンシブ対応 */
  @media (max-width: 768px) {
    .message-container {
        flex-direction: column; /* スマホでは縦並び */
        text-align: center;
    }

    .message-content {
        max-width: 100%;
    }

    .message-image img {
        width: 150px; /* スマホでは小さく */
        margin-top: 20px;
    }
  }


  /* セクション全体 */
  #price-section {
    padding: 40px 20px;
    background-color: #f9f9f9;
    margin: 20px auto;
    max-width: 100%; /* セクション最大幅 */
  }

  /* 価格リスト */
  .price-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 常に2列 */
    gap: 10px; /* アイテム間の余白 */
    justify-content: center; /* 横方向の間隔を中央揃え */
  }

  /* 各価格アイテム */
  .price-item {
    display: flex;
    flex-direction: column; /* 上下レイアウト */
    align-items: center; /* 中央揃え */
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center; /* コンテンツを中央揃え */
    min-height: 300px; /* 高さを統一 */
  }

  /* 価格イメージ */
  .price-image img {
    width: 120px; /* 固定サイズ */
    height: 120px;
    border-radius: 50%; /* 丸抜き */
    object-fit: cover; /* 縦横比を維持しつつ切り抜き */
    margin-bottom: 15px; /* 下部余白 */
  }

  /* 価格内容 */
  .price-content h3 {
    font-size: 1.5rem;
    color: #004d67;
    margin-bottom: 10px;
  }

  .price-content .price {
    font-size: 2.5rem; /* 金額を目立たせる */
    font-weight: bold;
    color: #e63946;
    margin-bottom: 10px;
  }

  .price-content p {
    font-size: 1rem;
    color: #333;
    line-height: 1.6;
    word-wrap: break-word; /* 長い単語を折り返し */
    overflow-wrap: break-word; /* 旧ブラウザ対応のために追加 */
    white-space: normal; /* 折り返しを有効化 */
    margin-bottom: 0; /* 下部余白を調整 */
    max-width: 90%; /* テキストの幅を制限 */
  }

  /* レスポンシブ対応 */
  @media screen and (max-width: 1280px) {
    .price-image img {
      width: 100px; /* 画像サイズを縮小 */
      height: 100px;
    }

    .price-content h3 {
      font-size: 1.2rem; /* タイトルサイズを縮小 */
    }

    .price-content .price {
      font-size: 2rem; /* 金額サイズを縮小 */
    }

    .price-content p {
      font-size: 0.9rem; /* テキストサイズを縮小 */
    }
  }

  @media screen and (max-width: 768px) {
    .price-image img {
      width: 80px; /* 画像サイズをさらに縮小 */
      height: 80px;
    }

    .price-content h3 {
      font-size: 1rem; /* タイトルサイズをさらに縮小 */
    }

    .price-content .price {
      font-size: 1.8rem; /* 金額サイズをさらに縮小 */
    }

    .price-content p {
      font-size: 0.8rem; /* テキストサイズをさらに縮小 */
    }
  }




  /* 緊急時セクション */
  #urgency-first {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    margin-top: 50px;
  }

  /* 緊急時専用のセクションヘッダー */
  .urgency-header {
    width: 100%;
    max-width: 1000px;
    text-align: left;
    margin: 0 auto;
    padding-left: 2rem; /* 左端を揃える */
    box-sizing: border-box;
  }

  /* 見出し */
  .urgency-title {
    font-size: var(--fs__5l);
    font-weight: bold;
    margin-bottom: 20px;
    text-align: left;
    position: relative;
    padding-bottom: 5px; /* 下線との間隔 */
    display: inline-block; /* 文字幅に合わせる */
  }

  /* コンテンツのレイアウト */
  .urgency-container {
    width: 100%;
    display: flex;
    align-items: flex-start; /* 上端を揃える */
    justify-content: flex-start; /* 左端を揃える */
    gap: 40px; /* 画像とテキストの間隔 */
    max-width: 1000px;
    margin: 0 auto;
    padding-left: 2rem; /* ヘッダーとツラを揃える */
    box-sizing: border-box;
  }

  /* 左側のテキストコンテナ */
  .urgency-content {
    flex: 1; /* 画像のサイズに影響されない */
    max-width: 600px;
    text-align: left;
  }

  /* テキストのスタイル */
  .urgency-content p {
    font-size: var(--fs__l);
    font-weight: bold;
    line-height: 1.8;
    text-align: left;
    margin-bottom: 10px;
  }
  /* 緊急時コンテンツ内のボーダー付きエリア */
  .urgency-area {
    border: 2px solid #666; /* 赤色のボーダー */
    padding: 10px;
    margin-top: 10px;
    text-align: center;
    font-size: 1.2rem;
    font-weight: bold;
    color: #666;
    border-radius: 5px; /* 角を少し丸める */
    display: inline-block; /* 内容の幅に合わせる */
  }

  /* 右側の画像コンテナ */
  .urgency-image {
    flex-shrink: 0; /* 画像サイズの影響を受けない */
    max-width: 200px; /* 画像の最大サイズを指定 */
  }

  /* 画像サイズを自由に変えられる */
  .urgency-image img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    display: block;
  }

  @media screen and (max-width: 1224px) {
    .urgency-container {
      flex-direction: column;
      align-items: center;
      padding-left: 0;
      text-align: center;
    }

    .urgency-header {
      padding-left: 0;
      text-align: center;
    }

    .urgency-title {
      font-size: var(--fs__4l);
      text-align: center;
      margin-bottom: 16px;
    }

    .urgency-content {
      max-width: 100%;
      text-align: center;
    }

    .urgency-content p {
      text-align: center;
      font-size: var(--fs__l);
      max-width: 90%;       /* 🔧 横幅制限 */
      margin: 0 auto 10px;  /* 🔧 中央寄せ + 下余白 */
      line-height: 1.8;
    }

    .urgency-area {
      font-size: 1rem;
      padding: 8px;
    }

    .urgency-image {
      max-width: 250px;
      margin-top: 20px;
    }
  }

  @media screen and (max-width: 1024px) {
    .urgency-container {
      flex-direction: column;
      align-items: center;
      padding-left: 0;
      text-align: center;
    }

    .urgency-header {
      padding-left: 0;
      text-align: center;
    }

    .urgency-title {
      font-size: var(--fs__4l);
      text-align: center;
      margin-bottom: 16px;
    }

    .urgency-content {
      max-width: 100%;
      text-align: center;
    }

    .urgency-content p {
      font-size: var(--fs__l);
      text-align: center;
      max-width: 90%;
      margin: 0 auto 10px;
      line-height: 1.8;
    }

    .urgency-area {
      font-size: 1rem;
      padding: 8px;
      max-width: 90%;
      margin: 0 auto;
    }

    .urgency-image {
      max-width: 250px;
      margin-top: 20px;
    }
  }


  @media screen and (max-width: 768px) {
    /* 緊急時レイアウトを縦並び・中央寄せ */
    .urgency-container {
      flex-direction: column;
      align-items: center;
      padding-left: 0;
      text-align: center;
      gap: 20px;
    }

    /* 見出しを中央寄せに */
    .urgency-header {
      padding-left: 0;
      text-align: center;
    }

    .urgency-title {
      font-size: var(--fs__3l); /* スマホ向けに縮小 */
      text-align: center;
      margin-bottom: 14px;
    }

    /* テキストブロック */
    .urgency-content {
      max-width: 100%;
      text-align: center;
    }

    .urgency-content p {
      font-size: var(--fs__m);         /* スマホ向けに縮小 */
      line-height: 1.7;
      max-width: 90%;
      margin: 0 auto 8px;
      text-align: l;
    }

    /* ボックス（注意喚起など） */
    .urgency-area {
      font-size: 0.95rem;
      padding: 6px 12px;
      max-width: 90%;
      margin: 10px auto;
      text-align: center;
    }

    /* 画像サイズ調整 */
    .urgency-image {
      max-width: 200px;
      width: 80%;
      margin-top: 16px;
    }

    .urgency-image img {
      width: 100%;
      height: auto;
      border-radius: 10px;
    }
  }


  @media screen and (max-width: 576px) {
    .urgency-title {
      font-size: var(--fs__2l);
    }
  }

  /* レスポンシブ：480px以下 */
  @media screen and (max-width: 480px) {
    .urgency-title {
      font-size: var(--fs__1l);
    }
  }

  #urgency-contact-section {
    background-color: #fdf3f5;



    padding: 60px 20px;
    text-align: center;
  }



  .urgency-contact-container {
    max-width: 800px;
    margin: 0 auto;
  }

  .urgency-contact-title {
    font-size: var(--fs__4l);
    font-weight: bold;
    margin-bottom: 20px;
  }


  .urgency-contact-text {
    font-size: var(--fs__l);
    line-height: 1.8;
    color: #444;
    margin-bottom: 30px;
  }

  .urgency-phone-container {
    display: flex;
  justify-content: center;
    background-color: #e63946;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
    animation: fadeIn 0.8s ease-out both;
  }


  .urgency-phone-inner {
    border: 3px solid #ffffff; /* 🔴 内側の赤い枠線 */
    padding: 30px;
    border-radius: 8px;
    width: 100%;
    max-width: 550px;
    box-sizing: border-box;
    text-align: center;
  }


  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .urgency-company-name {
    color: #fff;
    font-size: var(--fs__m);
  }

  .urgency-phone-number {
    font-size: var(--fs__6l);
    font-weight: bold;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0;
    flex-wrap: nowrap; /* ✅ 折り返さない */
    white-space: nowrap; /* ✅ 電話番号が改行されないように */
  }


  .freecall-icon {
    width: 42px;         /* ✅ アイコンの幅（必要に応じて変更） */
    height: auto;
    vertical-align: middle;
    margin-right: 4px;   /* ✅ テキストとの間隔 */
  }

  .urgency-phone-subtext {
    font-size: var(--fs__1l);
    margin-top: 10px;
    color: #ffffff;
  }
  @media screen and (max-width: 768px) {
    #urgency-contact-section {
      padding: 40px 16px;
    }

    .urgency-contact-container {
      padding: 0 10px;
    }

    .urgency-contact-title {
      font-size: var(--fs__3l); /* 少し小さめに調整 */
      margin-bottom: 16px;
    }

    .urgency-contact-text {
      font-size: var(--fs__m);
      margin-bottom: 24px;
      line-height: 1.7;
    }

    .urgency-phone-container {
      flex-direction: column;
      padding: 16px;
    }

    .urgency-phone-inner {
      padding: 20px;
    }

    .urgency-phone-number {
      font-size: var(--fs__5l);
      gap: 6px; /* 🔧 スマホ時に余白をやや狭める */
      white-space: nowrap;
      flex-wrap: nowrap;
    }

    .freecall-icon {
      width: 28px;
      height: auto;
      display: inline-block;
      vertical-align: middle; /* ✅ 数字とアイコンの上下を揃える */
      margin: 0; /* ✅ 余分な隙間防止 */
    }


    .urgency-phone-subtext {
      font-size: var(--fs__s);
      margin-top: 8px;
      font-weight: bold;
    }

    .urgency-company-name {
      font-size: var(--fs__s);
      font-weight: bold;
    }
  }

  @media screen and (max-width: 576px) {
    #urgency-contact-section {
      padding: 30px 12px;
    }

    .urgency-contact-container {
      padding: 0 8px;
    }

    .urgency-contact-title {
      font-size: var(--fs__2l);
      margin-bottom: 14px;
    }

    .urgency-contact-text {
      font-size: var(--fs__s);
      margin-bottom: 20px;
      line-height: 1.6;
      text-align: left;
      font-weight: bold;
    }

    .urgency-phone-container {
      flex-direction: column;
      padding: 12px;
    }

    .urgency-phone-inner {
      padding: 16px;
    }

    .urgency-phone-number {
      font-size: var(--fs__3l);
      gap: 5px;
      white-space: nowrap;
      flex-wrap: nowrap;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
    }

    .freecall-icon {
      width: 24px;
      height: auto;
      vertical-align: middle;
      margin: 0;
    }

    .urgency-phone-subtext {
      font-size: var(--fs__xs);
      margin-top: 6px;
      font-weight: bold;
    }

    .urgency-company-name {
      font-size: var(--fs__xs);
      font-weight: bold;
    }
  }


  /* レスポンシブ：480px以下 */
  @media screen and (max-width: 480px) {
.urgency-contact-title {
      font-size: var(--fs__1l);
    }
  }


  /* セクション全体 */
  #funeral-process {
    padding: 2rem 1rem;
    text-align: center;
  }

  /* ヘッダー */
  .process-header-container {
    margin-bottom: 20px;
  }

  .process-header {
    font-size: var(--fs__5l);
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
  }

  .process-header p {
    font-size: var(--fs__l);
    font-weight: bold;
    line-height: 1.8;
    text-align: left;
    margin-bottom: 10px;
  }

/*==============================
 共通: ステップレイアウト
==============================*/
.process-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

/* ステップカード（横並び時） */
.step {
  flex: 1 1 120px;
  max-width: 200px;
  height: 400px;
  text-align: left;
  padding: 0.8rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}

/* 画像 */
.step-img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0.5rem;
}

.step-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 0.5rem;
  flex-grow: 1;
}


/* タイトルとテキスト */
.step-title {
  font-size: var(--fs__1l);
  font-weight: bold;
  margin-top: 0.5rem;
}

.step-text {
  font-size: var(--fs__l);
  margin-top: 0.5rem;
  line-height: 1.6;
  font-weight: bold;
}

/*==============================
 共通: 矢印
==============================*/
.arrow {
  display: flex;
  align-items: center;  /* ✅ step の中央に揃える */
  justify-content: center;
  height: 400px;         /* ✅ .step と同じ高さにする */
}

.arrow-icon {
  font-size: 1.5rem;
  color: #e63946;
  transform: rotate(0deg); /* ▶ 横向き */
}



  /* レスポンシブ対応 */
  @media (max-width: 1280px) {
    .process-steps {
      display: flex;
      flex-direction: column; /* 縦並び */
      gap: 1.2rem; /* ステップ間の余白 */
    }

    .step {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 1rem;
      width: 100%;
      max-width: 700px;
      padding: 1rem;
    }

    .step-img {
      flex: 0 0 50%; /* 左側を40%に調整（必要に応じて30%〜50%で調整可） */
      max-width: 220px; /* 画像の最大幅を制限 */
      width: 100%;
      height: auto;
      object-fit: cover;
      padding: 0;
      margin: 0;
    }


    .step-content {
      flex: 0 0 50%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-left: 1rem;
    }


    .step-title {
    font-size: var(--fs__2l);
      font-weight: bold;
      margin-bottom: 1.6rem;
      flex: 1; /* テキスト領域の幅を広げる */
      text-align: left;
    }

    .step-text {
    font-size: var(--fs__l);
      color: #333;
      line-height: 1.6;
      flex: 1; /* テキスト領域を均等に */
      text-align: left;
      margin: 0;
    }

    .arrow {
      display: flex;
      align-items: center;  /* ✅ step の中央に揃える */
      justify-content: center;
      height: 50px;         /* ✅ .step と同じ高さにする */
    }

    .arrow-icon {
      transform: rotate(90deg); /* 矢印を下向きに */
      font-size: 1.5rem;
      margin: 1rem 0; /* 上下に余白 */
      text-align: center;
    }
  }

  @media screen and (max-width: 768px) {
    .process-steps {
      flex-direction: column;
      gap: 1.2rem;
    }

    .step {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 0.8rem;
      text-align: left;
      width: 100%;
      padding: 1rem 1.2rem;
      box-sizing: border-box;
    }

    .step-img {
      flex: 0 0 50%;
      width: 100%;
      height: auto;
      padding: 0;
      margin: 0;
      object-fit: cover;
    }

    .step-content {
      flex: 0 0 50%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-left: 0.5rem;
    }

    .step-title {
      font-size: var(--fs__1l);
      font-weight: bold;
      margin-bottom: 1.2rem;
    }

    .step-text {
      font-size: var(--fs__m);
      line-height: 1.6;
      margin: 0;
    }

    .arrow {
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .arrow-icon {
      transform: rotate(90deg); /* 下向き */
      font-size: 1.4rem;
      margin: 0.4rem 0;
    }
  }


  @media (max-width: 576px) {
    .step {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      justify-content: left; /* ✅ 中央寄せ */
      gap: 1rem;
      padding: 0.8rem;
    }

    .step-img {
      flex: 0 0 auto;             /* ✅ 固定幅にする */
      width: 120px;               /* ✅ 画像サイズを明確に指定 */
      height: auto;
      object-fit: cover;
      border-radius: 6px;
    }

    .step-content {
      flex: 0 0 auto;             /* ✅ テキストも固定幅にする */
      max-width: calc(100% - 140px); /* ✅ 画像＋gap分を引く */
      padding-left: 0.8rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .step-title {
      font-size: var(--fs__l);
      margin-bottom: 0.6rem;
    }

    .step-text {
      font-size: var(--fs__s);
      line-height: 1.6;
      margin: 0;
    }

    .arrow {
      height: 30px;
    }

    .arrow-icon {
      font-size: 1.2rem;
      transform: rotate(90deg);
      margin: 0.3rem 0;
    }
  }


  @media (max-width: 480px) {

    .step-img {
      flex: 0 0 80px; /* 画像の固定幅 */
      height: 100px; /* 画像の固定高さ */
    }

    .step-title {
      font-size: var(--fs__l);
      margin: 0.5rem 0;
    }

    .step-text {
      font-size: var(--fs__s);
      margin-top: 0.5rem;
    }
  }


  /* 重要情報セクション */
  #important-info {
    background-color: #f9f9f9;
    padding: 40px 20px;
  }

  /* セクションヘッダー */
  .important-info-header {
    width: 100%;
    max-width: 1000px;
    text-align: left;
    margin: 0 auto;
    padding-left: 2rem;
    box-sizing: border-box;
  }

  /* 見出しとアイコンのコンテナ */
  .important-info-title-container {
    display: flex;
    align-items: center;
    gap: 15px; /* アイコンとテキストの間隔 */
  }

  /* SVGアイコン（左側配置） */
  .important-info-icon {
    width: 40px; /* SVGのサイズ */
    height: 40px;
    background: url('../images/important-1.svg') no-repeat center center;
    background-size: contain;
    animation: rotateSvg 2s linear infinite; /* 時計回りに回転 */
  }

  /* 見出し */
  .important-info-title {
    font-size: var(--fs__2l);
    font-weight: bold;
    color: #e63946;
    margin: 0;
    text-align: left;
  }

  /* 時計回りに回転するアニメーション */
  @keyframes rotateSvg {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
  }

  /* スマホ対応 */
  @media (max-width: 768px) {
    .important-info-title-container {
        gap: 10px; /* スマホでは間隔を少し狭く */
    }

    .important-info-icon {
        width: 30px;
        height: 30px;
    }

    .important-info-title {
        font-size: 1.5rem;
    }
  }

  /* コンテンツのレイアウト */
  .important-info-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    padding-left: 2rem;
    box-sizing: border-box;
  }

  /* 左側のコンテンツ */
  .important-info-content {
    flex: 1;
    max-width: 600px;
    text-align: left;
  }

  /* テキストのスタイル */
  .important-info-content p {
    font-size: var(--fs__l);
    font-weight: bold;
    line-height: 1.8;
    text-align: left;
    margin-bottom: 10px;
  }

  /* 右側のポップアップボタン */
  .important-info-button-container {
    display: flex;
    justify-content: center; /* ボタンを中央揃え */
    align-items: center;
    margin: 20px auto; /* 上下の均一な余白 */
    width: 100%;
    max-width: 400px; /* 最大幅を統一 */
    position: relative;
  }

  /* ポップアップボタンを大きく */
  .important-popup-btn {
    display: flex;
    justify-content: center;
    align-items: center; /* テキストを縦中央に配置 */
    padding: 1rem;
    background-color: #e63946;
    color: white;
    border: none;
    text-decoration: none;
    border-radius: 8px;
    font-size: var(--fs__l);
    font-weight: bold;
    text-align: center;
    width: 100%;
    max-width: 330px; /* ボタンサイズを統一 */
    min-width: 200px; /* 🔥 最小幅を設定（スマホでも小さくなりすぎないように） */
    height: 55px; /* 固定の高さ */
    animation: borderPulse 3.8s infinite;
    transition: transform 0.3s ease;
  }

  @keyframes borderPulse {
    0% {
      box-shadow: 0 0 0 0 rgba(230, 57, 70, 0.6);
    }
    70% {
      box-shadow: 0 0 0 10px rgba(230, 57, 70, 0);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(230, 57, 70, 0);
    }
  }

  .important-popup-btn:hover {
    background-color: #e63946;
  }

  /* ポップアップオーバーレイ (スクロール対応) */
  .important-popup-overlay {
    display: none;
    position: fixed;
    inset: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    justify-content: center;
    align-items: flex-start; /* 上から配置 */
    overflow-y: auto; /* スクロール可能に */
    padding: 20px 0; /* 上下の余白を確保 */
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    z-index: 9999;
  }

  /* 表示状態 */
.important-popup-overlay.show {
  opacity: 1;
}

  /* ポップアップコンテンツ (高さ制限) */
  .important-popup-content {
    background: white;
    padding: 30px;
    border-radius: 10px;
    width: 100%;
    max-width: 600px;
    text-align: left;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    transform: scale(0.8) translateY(30px);
    opacity: 0;
    transition: transform 0.4s ease, opacity 0.4s ease;
    position: relative; /* 位置調整のため absolute を削除 */
    margin: auto; /* 上下中央揃え */
    max-height: 90vh; /* 画面の90%の高さまで */
    overflow-y: auto; /* スクロール可能に */
  }

  /* 表示時のアニメーション */
.important-popup-overlay.show .important-popup-content {
  transform: scale(1) translateY(0);
  opacity: 1;
}

  /* 見出し */
  .jizen-title {
    font-size: var(--fs__2l);
    font-weight: bold;
    color: #333;
    margin: 20px 0;
    text-align: left;
    position: relative;
    padding-bottom: 5px;
    display: inline-block;
  }

  /* 下線（文字幅に合わせて可変） */
  .jizen-title::after {
    content: "";
    display: block;
    width: calc(100% - 5px);
    height: 2px;
    background-color: #e63946;
    position: absolute;
    bottom: 0;
    left: 0;
  }

  /* 下線の終わりの区切り */
  .jizen-title::before {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 3px;
    height: 3px;
    background-color: #e63946;
    display: block;
  }

  .important-popup-content p {
    font-size: var(--fs__l);
    line-height: 1.8;
    text-align: left;
    margin-bottom: 20px;
    font-weight: bold;
  }

  .popup-info-box {
    background-color: #e63946;
    color: #fff;
    padding: 30px 20px; /* ✅ 上下の余白を拡大 */
    border-radius: 8px;
    font-weight: bold;
    line-height: 1.8; /* ✅ 行間を少し広げて可読性アップ */
    margin: 20px 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center; /* ✅ テキストの縦方向中央寄せ */
    align-items: center;
  }


  /* 閉じるボタン */
  .important-popup-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 4.6rem;
    cursor: pointer;
    color: #333;
  }

  /* スマホ対応 */
  @media (max-width: 768px) {
    .important-popup-content {
        width: 90%;
        max-width: 500px;
        padding: 25px;
        max-height: 85vh; /* スマホでもスクロール可能 */
    }

    .important-popup-content h3 {
        font-size: 2rem;
    }

    .popup-info-box p {
        font-size: var(--fs__l);
        padding: 12px;
    }

    .important-popup-close {
        font-size: var(--fs__3l);
    }

  }

  @media (max-width: 576px) {
    .important-popup-content {
        width: 95%;
        max-width: 400px;
        padding: 20px;
        max-height: 85vh;
    }

    .important-popup-content h3 {
        font-size:var(--fs__l);
    }

    .popup-info-box p {
        font-size: var(--fs__m);
        padding: 6px;
    }
  }
/* セクション全体 */
#urgency-price-section {
  padding: 60px 20px;
  background-color: #f9f9f9;
}
.urgency-plan-header {
  display: flex;
  flex-wrap: wrap; /* ✅ レスポンシブ対応 */
  align-items: center;
  gap: 20px;
  margin-bottom: 10px;
}

.urgency-plan-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.urgency-tag {
  border: 1px solid #333;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: var(--fs__s);
  white-space: nowrap;
}

.urgency-gold-tag {
  border: 1px solid #daa520;         /* ゴールドの枠線 */
  background-color: #fff8dc;         /* 明るいゴールド背景（お好みで調整） */
  color: #b8860b;                    /* ゴールド系の文字色 */
  border-radius: 4px;
  padding: 4px 10px;
  font-size: var(--fs__s);
  white-space: nowrap;
  font-weight: bold;                 /* 強調表示（任意） */
}

/* プラン一覧のラッパー */
.urgency-price-list {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
}

/* プランアイテム */
.urgency-price-item {
  background-color: #fff;
  overflow: hidden;
  max-width: 500px;
  width: 100%;
}

/* 画像 */
.urgency-price-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* 内容 */
.urgency-price-content {
  padding: 20px;
  text-align: left;
}

.urgency-price-content h3 {
  font-size: var(--fs__3l);
  margin-bottom: 10px;
}

/* 金額表示の横並びを保証 */
.plan-list-price {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-size: var(--fs__5l);
  font-weight: bold;
  color: #C24A57;
  white-space: nowrap;
  text-align: left;
  margin-bottom: 10px;
  gap: 8px;
}

/* 会員価格ラベル */
.price-member-label {
  font-size: var(--fs__s);
  color: #fff;
  background-color: #daa520;
  display: inline-block;
  line-height: 1.2;
  text-align: center;
  padding: 5px 8px;
  border-radius: 4px;
}

/* 税込価格ラベル */
.plan-list-price .price-list-small {
  font-size: var(--fs__s);
  color: #fff;
  background-color: #8C0085;
  display: inline-block;
  line-height: 1.2;
  text-align: center;
  padding: 4px 6px;
  border-radius: 4px;
}

/* 単位表示 */
.plan-list-price .price-unit-small {
  font-size: var(--fs__1l);
  color: #333;
}
/* 説明文 */
.urgency-price-content p:last-of-type {
  font-size: var(--fs__l);
  color: #444;
  line-height: 1.6;
}

/* =============================
   レスポンシブ対応
============================= */

/* 768px以下 */
@media screen and (max-width: 768px) {
  #urgency-price-section {
    padding: 40px 16px;
  }

  .urgency-plan-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .urgency-price-list {
    gap: 20px;
  }

  .urgency-price-content h3 {
    font-size: var(--fs__2l);
  }

  .plan-list-price {
    font-size: var(--fs__4l);
    flex-wrap: wrap;
  }

  .urgency-price-content p:last-of-type {
    font-size: var(--fs__m);
    line-height: 1.6;
  }
}

/* 576px以下 */
@media screen and (max-width: 576px) {
  .urgency-price-content {
    padding: 16px;
  }

  .urgency-price-content h3 {
    font-size: var(--fs__l);
  }

  .plan-list-price {
    font-size: var(--fs__3l);
    gap: 6px;
  }

  .price-member-label,
  .plan-list-price .price-list-small {
    font-size: var(--fs__xs);
    padding: 4px 6px;
  }

  .plan-list-price .price-unit-small {
    font-size: var(--fs__s);
  }
}