/* =========================
   Feature Section 2025（SP & PC）
   ========================= */

.section-feature-2025 {
    position: relative;
    height: auto;
    background-color: #3AB5F0;
  
    /* SP 背景画像 */
    background-image: url("/wp-content/themes/Cashari_Theme/assets/img/2025/image_product02.png");
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 100% auto;
  
    color: #ffffff;
  
    /* ★ SP：背景画像にテキストが重ならないよう下へ移動 */
    padding-top: 800px !important;       /* ← ここでズラす */
    padding-bottom: 60px;
  }
  
  /* -------------------------
     SP専用（767px以下）の明示的な設定
  ------------------------- */
  @media (max-width: 767px) {
    .section-feature-2025 {
      padding-top: 250px !important;
      padding-bottom: 60px !important;
    }
  }
  
  /* -------------------------
     PC（768px以上）
  ------------------------- */
  @media (min-width: 768px) {
    .section-feature-2025 {
      background-image: url("/wp-content/themes/Cashari_Theme/assets/img/2025/image_product01_18.png");
      background-size: auto 100%; 
  
      /* PC は通常の余白に戻す */
      padding-top: 80px !important;
      padding-bottom: 80px !important;
    }
  }
  

  /* 吹き出し付きタイトル */
.step-title-2025 {
    display: inline-block;
    background-color: #3AB5F0;
    color: #ffffff;
    font-weight: 700;
    padding: 8px 24px;
    border-radius: 9999px;
    position: relative;
    font-size: 1rem;
  }
  
  /* 下向きの三角（吹き出し部分） */
  .step-title-2025::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -8px; /* 三角の出る位置 */
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #3AB5F0;
  }

/* =========================
   Hero 2025（整理版）
   ========================= */

/*------------------------------------
  1. ヒーロー全体（SP 基準）
------------------------------------*/
.hero-2025 {
    position: relative;
    width: 100%;
    height: 400px;                 /* 黄色エリアの高さ（SP） */
    background-color: #FECA50;
  
    /* SP 用背景画像 */
    background-image: url("/wp-content/themes/Cashari_Theme/assets/img/2025/mv_01_sp.png");
    background-repeat: no-repeat;
    background-size: 250px auto;
    background-position: left 0 bottom 0;
  }
  
  /* PC 版（768px 以上） */
  @media (min-width: 768px) {
    .hero-2025 {
      /* PC 用背景画像：左側に 500×589 で表示 */
      background-image: url("/wp-content/themes/Cashari_Theme/assets/img/2025/mv_01_pc.png");
      background-size: 500px 589px;
      background-position: left 0 top 100px;
  
      /* 画像 589px + 余白 100px ≒ 689px */
      min-height: 689px;
      padding-top: 60px;
      padding-bottom: 40px;
  
      /* 中身を縦中央寄せ */
      display: flex;
      align-items: center;
    }
  
    /* 中のグリッドも高さを揃える */
    .hero-2025 > .container-fluid,
    .hero-2025 .row,
    .hero-2025 .col-12 {
      height: 100%;
    }
  
    /* col の中身を縦中央に */
    .hero-2025 .col-12 {
      justify-content: center !important;
    }
  }
  
  
  /*------------------------------------
    2. テキスト（キャッチコピー）
  ------------------------------------*/
  
  /* テキスト全体の箱 */
  .hero-2025-copy {
    position: absolute;
    max-width: 480px;
    top: 70px;
    right: 16px;           /* SP：右端寄せ */
    text-align: right;
  }
  
  /* PC：左寄せにして少し上気味＋右側に寄せる */
  @media (min-width: 768px) {
    .hero-2025-copy {
      text-align: left;
      margin-top: 200px;
      right: 4%;           /* 画面右端から少し内側 */
    }
  }
  
  /* 共通：青帯＋影付きテキスト */
  .hero-2025-text {
    display: inline-block;
    background-color: #3AB5F0;
    color: #ffffff;
    font-weight: 700;
    font-size: 1.4rem;
    padding: 0.6rem 1.8rem;
    border-radius: 4px;
    box-shadow: 0 10px 0 rgba(0, 0, 0, 0.18);
  }
  
  /* 「撮るだけで、」の装飾（右上の強調アイコン） */
  .hero-2025-text-1 {
    position: relative;
  }
  
  .hero-2025-text-1::before {
    content: "";
    position: absolute;
    top: -35px;
    left: -40px;
    width: 60px;
    height: 60px;
    background-image: url("/wp-content/themes/Cashari_Theme/assets/img/2025/icon_ emphasis.png"); /* ファイル名に合わせて調整 */
    background-size: contain;
    background-repeat: no-repeat;
  }
  
  /* 「財布が生き返る。」 */
  .hero-2025-text-2 {
    position: relative;
    display: inline-block;
    padding: 10px 25px;
    background: #3AB5F0;
    color: #fff;
    font-size: 32px;
    font-weight: bold;
    border-radius: 6px;
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.15);
    margin-top: 20px;
    margin-left: 30px;   /* 右に 30px ずらす */
  }
  
  /* PC で少し文字大きめに */
  @media (min-width: 992px) {
    .hero-2025-text {
      font-size: 2rem;
    }
  }
  
  
  /*------------------------------------
    3. アプリロゴ（App Store / Google Play）
  ------------------------------------*/
  
  /* 半透明の背景帯（SP 基準） */
  .hero-2025-store-inner {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);      /* 横中央 */
    bottom: 24px;                     /* SP：下から少し余白 */
    padding: 12px 24px;
    border-radius: 20px;
    background-color: rgba(255, 255, 255, 0.4); /* 40% 透明 */
    width: auto;
    max-width: 90%;                    /* SP：画面幅の90%まで */
  }
  
  /* ロゴ画像（SP 基準） */
  .hero-2025-store-img {
    max-height: 80px;                 /* SP用：適切なサイズに調整 */
    height: auto;
    width: auto;                       /* SP でも横並びにするため auto に */
    max-width: 140px;                 /* SP用：適切なサイズに調整 */
  }
  
  /* SP専用の調整（767px以下） */
  @media (max-width: 767px) {
    .hero-2025-store-inner {
      left: 50%;
      transform: translateX(-50%);
      width: auto;
      max-width: calc(100% - 32px);   /* 左右に16pxずつ余白 */
    }
    
    .hero-2025-store-img {
      max-height: 120px;
      max-width: 200px;
    }
  }
  
  /* PC 用調整 */
  @media (min-width: 768px) {
    .hero-2025-store-inner {
      bottom: 50px;                    /* PC：下から 50px */
    }
  
    .hero-2025-store-img {
      width: auto;                     /* PC は画像本来の幅 */
      max-width: none;                 /* PC では最大幅の制限を解除 */
    }
  }


  .marker-yellow {
    background: linear-gradient(transparent 60%,#FECA50 50%);
    /* 上50%は透明、下50%が黄色 */
    background-size: 100% 100%; /* 背景を要素全体に広げる */
    background-repeat: no-repeat;
    text-decoration: none; /* text-decorationの下線は消す */
  }