/* =========================================================
  FV / スマホ調整
  ---------------------------------------------------------
  スマホでは2カラムをやめて、上から順に
  コピー → CTA → 特徴 → 画像
  の縦積みにします。
========================================================= */

/* =========================================================
  FV / 画像メイン型：SP
  ---------------------------------------------------------
  スマホではPCのように画像とカードを横並びにできないため、
  コピー → CTA → 実績 → ビジュアル
  の順番で縦に並べます。
========================================================= */

@media (max-width: 768px) {

  /* -------------------------------------------------------
    FV全体
    -------------------------------------------------------
    スマホでは余白を少しコンパクトにします。
  ------------------------------------------------------- */
  .fv-visual {
    padding: 56px 0 48px;
  }


  /* -------------------------------------------------------
    FV内側レイアウト
    -------------------------------------------------------
    1カラムに変更します。
    HTML上は画像が先ですが、orderで表示順を入れ替えます。
  ------------------------------------------------------- */
  .fv-visual__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
  }


  /* -------------------------------------------------------
    右側パネルを先に表示
    -------------------------------------------------------
    スマホでは先にコピーを見せたいので、
    panelを上に持ってきます。
  ------------------------------------------------------- */
  .fv-visual__panel {
    order: 1;
    margin-left: 0;
    padding: 30px 20px 26px;
    border-radius: var(--radius-m);
    text-align: center;
  }


  /* -------------------------------------------------------
    画像エリアは後ろに表示
    -------------------------------------------------------
    スマホではコピーを読んだ後に画像を見る順番にします。
  ------------------------------------------------------- */
  .fv-visual__image-area {
    order: 2;
    min-height: auto;
  }


  /* -------------------------------------------------------
    メインビジュアル枠
    -------------------------------------------------------
    スマホでは横長の画像枠にして、
    縦に長くなりすぎないようにします。
  ------------------------------------------------------- */
  .fv-visual__image-frame {
    min-height: auto;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-m);
  }


  /* -------------------------------------------------------
    メイン画像
    -------------------------------------------------------
    スマホ用に高さを枠に合わせます。
  ------------------------------------------------------- */
  .fv-visual__image {
    width: 100%;
    height: 100%;
    min-height: auto;
    object-fit: cover;
  }


  /* -------------------------------------------------------
    スライダー風ドット
    -------------------------------------------------------
    スマホでは画像枠の左下にコンパクトに配置します。
  ------------------------------------------------------- */
  .fv-visual__dots {
    left: 18px;
    bottom: 16px;
    gap: 8px;
  }

  .fv-visual__dot {
    width: 8px;
    height: 8px;
  }

  .fv-visual__count {
    font-size: 0.74rem;
  }


  /* -------------------------------------------------------
    補足ラベル
    -------------------------------------------------------
    スマホでは少し小さくします。
  ------------------------------------------------------- */
  .fv-visual__label {
    margin-bottom: 18px;
    font-size: 0.8rem;
  }


  /* -------------------------------------------------------
    メインコピー
    -------------------------------------------------------
    スマホで読みやすいサイズに調整します。
  ------------------------------------------------------- */
  .fv-visual__title {
    font-size: clamp(1.95rem, 8.8vw, 3rem);
    line-height: 1.36;
    letter-spacing: 0.03em;
  }


  /* -------------------------------------------------------
    リード文
    -------------------------------------------------------
    文字サイズと行間をスマホ向けに調整します。
  ------------------------------------------------------- */
  .fv-visual__lead {
    margin-top: 20px;
    font-size: 0.94rem;
    line-height: 1.9;
    text-align: left;
  }


  /* -------------------------------------------------------
    CTAエリア
    -------------------------------------------------------
    スマホではボタンを横幅いっぱいにし、
    サブリンクは中央に置きます。
  ------------------------------------------------------- */
  .fv-visual__buttons {
    justify-items: stretch;
    gap: 14px;
    margin-top: 28px;
  }


  /* -------------------------------------------------------
    メインCTAボタン
    -------------------------------------------------------
    common.css側でスマホ時 .c-btn が width:100% になるため、
    min-widthだけ解除します。
  ------------------------------------------------------- */
  .fv-visual__main-btn {
    min-width: auto;
  }


  /* -------------------------------------------------------
    サブリンク
    -------------------------------------------------------
    中央寄せで控えめに表示します。
  ------------------------------------------------------- */
  .fv-visual__text-link {
    justify-self: center;
    font-size: 0.92rem;
  }


  /* -------------------------------------------------------
    実績・信頼エリア
    -------------------------------------------------------
    スマホでは2列のままでもOKですが、
    画面が狭い場合に備えてgapとpaddingを調整します。
  ------------------------------------------------------- */
  .fv-visual__trust {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 28px;
    padding: 14px;
  }


  /* -------------------------------------------------------
    実績カード
    -------------------------------------------------------
    スマホでは少し小さめに整えます。
  ------------------------------------------------------- */
  .fv-visual__trust-item {
    padding: 14px;
    text-align: left;
  }


  /* 実績アイコン */
  .fv-visual__trust-icon {
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
  }


  /* 実績数値 */
  .fv-visual__trust-value {
    font-size: 1.35rem;
  }
}


/* =========================================================
  さらに小さいスマホ用
========================================================= */

@media (max-width: 430px) {

  /* FV全体の余白をさらに調整 */
  .fv-visual {
    padding: 48px 0 44px;
  }


  /* パネル余白を少し詰める */
  .fv-visual__panel {
    padding: 26px 18px 24px;
  }


  /* メインコピーを小さめにする */
  .fv-visual__title {
    font-size: clamp(1.75rem, 8.8vw, 2.55rem);
  }


  /* リード文 */
  .fv-visual__lead {
    font-size: 0.9rem;
  }
}
/* =========================================================
  FV / 斜め分割レイアウト型：SP
  ---------------------------------------------------------
  スマホでは斜め分割を解除し、
  コピー → 実績 → CTA → 画像
  の順に縦積みします。
========================================================= */

@media (max-width: 768px) {

  /* -------------------------------------------------------
    FV全体
    -------------------------------------------------------
    スマホでは上下余白を少し小さくします。
  ------------------------------------------------------- */
  .fv-slant {
    padding: 56px 0 48px;
  }


  /* -------------------------------------------------------
    FV内側レイアウト
    -------------------------------------------------------
    PCの2カラムを解除して1カラムにします。
  ------------------------------------------------------- */
  .fv-slant__inner {
    grid-template-columns: 1fr;
    min-height: auto;
    gap: 34px;
  }


  /* -------------------------------------------------------
    左側コンテンツ
    -------------------------------------------------------
    スマホでは中央寄せにして読みやすくします。
    paddingも左右均等にします。
  ------------------------------------------------------- */
  .fv-slant__content {
    padding: 0;
    text-align: center;
    justify-items: center;
  }


  /* -------------------------------------------------------
    補足ラベル
    -------------------------------------------------------
    スマホで1行に収まりやすいよう少し小さくします。
  ------------------------------------------------------- */
  .fv-slant__label {
    margin-bottom: 18px;
    font-size: 0.8rem;
  }


  /* -------------------------------------------------------
    メインコピー
    -------------------------------------------------------
    スマホでは大きすぎないサイズに調整します。
  ------------------------------------------------------- */
  .fv-slant__title {
    font-size: clamp(2rem, 9vw, 3rem);
    line-height: 1.35;
    letter-spacing: 0.03em;
  }


  /* -------------------------------------------------------
    リード文
    -------------------------------------------------------
    読みやすい文字サイズ・行間にします。
  ------------------------------------------------------- */
  .fv-slant__lead {
    margin-top: 20px;
    font-size: 0.94rem;
    line-height: 1.9;
  }


  /* -------------------------------------------------------
    PC専用改行
    -------------------------------------------------------
    スマホでは自然な折り返しに任せます。
  ------------------------------------------------------- */
  .u-pc {
    display: none;
  }


  /* -------------------------------------------------------
    実績・信頼要素
    -------------------------------------------------------
    スマホでは2つを縦並びにすると読みやすいです。
  ------------------------------------------------------- */
  .fv-slant__stats {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    gap: 12px;
    margin-top: 28px;
  }


  /* -------------------------------------------------------
    実績カード
    -------------------------------------------------------
    スマホでは横幅いっぱいにして見やすくします。
  ------------------------------------------------------- */
  .fv-slant__stat {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
  }


  /* -------------------------------------------------------
    CTAエリア
    -------------------------------------------------------
    スマホでは縦並びにして、押しやすくします。
  ------------------------------------------------------- */
  .fv-slant__buttons {
    display: grid;
    width: 100%;
    gap: 14px;
    margin-top: 30px;
  }


  /* -------------------------------------------------------
    CTAボタン
    -------------------------------------------------------
    common.css側で .c-btn はスマホ時 width:100% になります。
    ここでは min-width を解除します。
  ------------------------------------------------------- */
  .fv-slant__main-btn,
  .fv-slant__sub-btn {
    min-width: auto;
  }


  /* -------------------------------------------------------
    右側ビジュアルエリア
    -------------------------------------------------------
    スマホでは下に配置します。
  ------------------------------------------------------- */
  .fv-slant__visual {
    width: 100%;
  }


  /* -------------------------------------------------------
    斜め画像枠
    -------------------------------------------------------
    スマホでは斜めを解除します。
    斜めのままだと左右が切れて扱いにくいためです。
  ------------------------------------------------------- */
  .fv-slant__image-frame,
  .fv-slant__placeholder {
    min-height: auto;
    aspect-ratio: 4 / 3;
    clip-path: none;
    border-radius: var(--radius-m);
    overflow: hidden;
  }


  /* -------------------------------------------------------
    画像本体
    -------------------------------------------------------
    スマホの画像枠に合わせます。
  ------------------------------------------------------- */
  .fv-slant__image {
    width: 100%;
    height: 100%;
    min-height: auto;
    object-fit: cover;
  }
}


/* =========================================================
  さらに小さいスマホ用
========================================================= */

@media (max-width: 430px) {

  /* FV全体の余白をさらに調整 */
  .fv-slant {
    padding: 48px 0 44px;
  }

  /* メインコピーを少し小さく */
  .fv-slant__title {
    font-size: clamp(1.8rem, 9vw, 2.6rem);
  }

  /* 実績カードの余白調整 */
  .fv-slant__stat {
    padding: 12px 14px;
  }
}
/* =========================================================
  FV / 背景ビジュアル＋コピーカード型：SP
  ---------------------------------------------------------
  スマホでは、背景に重ねる構成を解除し、
  コピーカード → 信頼要素 → 画像
  の順で縦に見せます。
========================================================= */

@media (max-width: 768px) {

  /* -------------------------------------------------------
    FV全体
    -------------------------------------------------------
    スマホでは余白をコンパクトにします。
  ------------------------------------------------------- */
  .fv-bgcard {
    padding: 56px 0 48px;
  }


  /* -------------------------------------------------------
    FV内側
    -------------------------------------------------------
    PCの重なりレイアウトを解除し、通常の縦積みにします。
  ------------------------------------------------------- */
  .fv-bgcard__inner {
    display: grid;
    gap: 18px;
    min-height: auto;
    padding: 0;
    overflow: visible;
    background: transparent;
    border: none;
    box-shadow: none;
  }


  /* -------------------------------------------------------
    背景オーバーレイを解除
    -------------------------------------------------------
    SPでは重ねレイアウトをしないため、不要です。
  ------------------------------------------------------- */
  .fv-bgcard__inner::before {
    content: none;
  }


  /* -------------------------------------------------------
    コピーカード
    -------------------------------------------------------
    PCではabsoluteでしたが、SPでは通常配置に戻します。
    これにより最初にコピーを読めるようにします。
  ------------------------------------------------------- */
  .fv-bgcard__copy-card {
    position: relative;
    left: auto;
    bottom: auto;
    width: 100%;
    order: 1;
    padding: 30px 20px 26px;
    border-radius: var(--radius-m);
    text-align: center;
  }


  /* -------------------------------------------------------
    背景ビジュアル
    -------------------------------------------------------
    SPでは下部の画像カードとして見せます。
  ------------------------------------------------------- */
  .fv-bgcard__visual {
    position: relative;
    inset: auto;
    order: 3;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--radius-m);
    border: 1px solid rgba(31, 122, 122, 0.12);
    box-shadow: var(--shadow-card);
  }


  /* -------------------------------------------------------
    背景画像
    -------------------------------------------------------
    SPの画像枠に合わせて表示します。
  ------------------------------------------------------- */
  .fv-bgcard__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }


  /* -------------------------------------------------------
    補足ラベル
    -------------------------------------------------------
    スマホでは小さめにします。
  ------------------------------------------------------- */
  .fv-bgcard__label {
    margin-bottom: 18px;
    font-size: 0.8rem;
  }


  /* -------------------------------------------------------
    メインコピー
    -------------------------------------------------------
    スマホで大きすぎないサイズにします。
  ------------------------------------------------------- */
  .fv-bgcard__title {
    font-size: clamp(1.95rem, 8.8vw, 3rem);
    line-height: 1.36;
    letter-spacing: 0.03em;
  }


  /* -------------------------------------------------------
    リード文
    -------------------------------------------------------
    読みやすい文字サイズと行間にします。
  ------------------------------------------------------- */
  .fv-bgcard__lead {
    margin-top: 18px;
    font-size: 0.94rem;
    line-height: 1.9;
    text-align: left;
  }


  /* -------------------------------------------------------
    CTAエリア
    -------------------------------------------------------
    スマホではボタンを縦並び寄りにして押しやすくします。
  ------------------------------------------------------- */
  .fv-bgcard__buttons {
    display: grid;
    gap: 14px;
    margin-top: 26px;
  }


  /* -------------------------------------------------------
    メインCTAボタン
    -------------------------------------------------------
    common.css側で .c-btn はスマホ時 width:100% になります。
    min-widthだけ解除します。
  ------------------------------------------------------- */
  .fv-bgcard__main-btn {
    min-width: auto;
  }


  /* -------------------------------------------------------
    サブリンク
    -------------------------------------------------------
    中央寄せにして、補助導線として見せます。
  ------------------------------------------------------- */
  .fv-bgcard__text-link {
    justify-self: center;
    font-size: 0.92rem;
  }


  /* -------------------------------------------------------
    信頼・ロゴバー
    -------------------------------------------------------
    PCでは下部固定でしたが、SPでは通常配置に戻します。
    コピーカードの下に表示します。
  ------------------------------------------------------- */
  .fv-bgcard__trust-bar {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    order: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: auto;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(31, 122, 122, 0.12);
    border-radius: var(--radius-m);
    overflow: hidden;
    box-shadow: var(--shadow-card);
  }


  /* -------------------------------------------------------
    信頼要素
    -------------------------------------------------------
    SPでは2列×2段にします。
  ------------------------------------------------------- */
  .fv-bgcard__trust-item {
    padding: 16px 10px;
  }


  /* 区切り線をSP向けに調整 */
  .fv-bgcard__trust-item + .fv-bgcard__trust-item {
    border-left: none;
  }

  .fv-bgcard__trust-item:nth-child(even) {
    border-left: 1px solid rgba(31, 122, 122, 0.12);
  }

  .fv-bgcard__trust-item:nth-child(n + 3) {
    border-top: 1px solid rgba(31, 122, 122, 0.12);
  }


  /* -------------------------------------------------------
    信頼要素の数値
    -------------------------------------------------------
    スマホでは少し小さくします。
  ------------------------------------------------------- */
  .fv-bgcard__trust-value {
    font-size: 1.05rem;
  }
}


/* =========================================================
  さらに小さいスマホ用
========================================================= */

@media (max-width: 430px) {

  /* FV全体の余白調整 */
  .fv-bgcard {
    padding: 48px 0 44px;
  }

  /* コピーカードの内側余白を調整 */
  .fv-bgcard__copy-card {
    padding: 26px 18px 24px;
  }

  /* メインコピーを少し小さめに */
  .fv-bgcard__title {
    font-size: clamp(1.75rem, 8.8vw, 2.55rem);
  }

  /* 信頼バーを1列にしたい場合はここを有効化 */
  /*
  .fv-bgcard__trust-bar {
    grid-template-columns: 1fr;
  }

  .fv-bgcard__trust-item:nth-child(even) {
    border-left: none;
  }

  .fv-bgcard__trust-item:nth-child(n + 2) {
    border-top: 1px solid rgba(31, 122, 122, 0.12);
  }
  */
}