@charset "UTF-8";

@media screen and (max-width: 768px) {

  /* ============================================================
   セクション2: ABOUT（SP版）
   ============================================================
   FV SP版と同じ 方式でPC版の干渉を完全排除。
   座標: Figma絶対値 - 733px (FV高さ)
   ============================================================ */

  /* --- 親要素 --- */
  .sec-2 {
    position: relative;
    width: 100%;
    max-width: 375px;
    height: 1620px;
    /* 修正: 2353 (Sec3開始位置) - 733 (FV高) = 1620px */
    padding-bottom: 80px;
    margin: 0 auto;
    overflow: visible;
    /* 光（top: -86px）がFV側へはみ出して表示されるように変更 */
    background: #E9F7F6;
    z-index: 3;
    /* フェードグラデーション(z-index:2)より手前、CTAボタン(z-index:6)より奥に配置 */
  }

  /* --- PC版で不要な要素をSP版で非表示 --- */
  .sec-2__watermark {
    display: none !important;
  }

  /* --- PC版の .sec-2__inner を完全にリセット（FV SP版と完全同一方式） --- */
  .sec-2 .sec-2__inner {
    position: relative;
    width: 375px;
    /* 常に375pxのキャンバスを中央配置 */
    height: 100%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
  }

  /* ============================================================
   アイコン画像（PC版スタイルを完全リセット + SP用再定義）
   ============================================================ */
  .sec-2__badge-icon {
    position: absolute;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    transform: none;
  }

  /* セールスデザイン */
  .icon-sales-design {
    width: 59.93px;
    height: 61.5px;
    left: 73.2px;
    top: 472.14px;
    /* Figma: 1205.14 - 733 */
    background-image: url("../images/sp/sec2/8936789 1.png");
  }

  /* セールスライティング */
  .icon-sales-writing {
    width: 73.71px;
    height: 61.37px;
    left: 209.63px;
    top: 472.24px;
    /* Figma: 1205.24 - 733 */
    background-image: url("../images/sp/sec2/79798696 1.png");
  }

  /* SNS運用 */
  .icon-sns {
    width: 38.05px;
    height: 61.64px;
    left: 84.12px;
    top: 579.6px;
    /* Figma: 1312.6 - 733 */
    background-image: url("../images/sp/sec2/7278378 1.png");
  }

  /* 広告運用 */
  .icon-ad {
    width: 31.54px;
    height: 61.09px;
    left: 230.55px;
    top: 579.85px;
    /* Figma: 1312.85 - 733 */
    background-image: url("../images/sp/sec2/3793892 1.png");
  }

  /* LINEマーケティング */
  .icon-line {
    width: 31.47px;
    height: 61.22px;
    left: 87.53px;
    top: 687.45px;
    /* Figma: 1420.45 - 733 */
    background-image: url("../images/sp/sec2/1797678 1.png");
  }

  /* ファネル構築 */
  .icon-funnel {
    width: 53.25px;
    height: 61.35px;
    left: 219.63px;
    top: 687.45px;
    /* Figma: 1420.45 - 733 */
    background-image: url("../images/sp/sec2/679678339 1.png");
  }

  /* ============================================================
   各パーツの配置（FV SP版と同じ 方式）
   ============================================================ */

  /* --- 01 タイトル画像 --- */
  .sec-2__title {
    position: absolute;
    width: 278px;
    height: 108px;
    left: calc(50% - 278px / 2 + 0.5px);
    top: -10px;
    /* Figma: 734 - 733 → 余白追加で25pxに調整 */
    background: url("../images/sp/sec2/01.png") no-repeat center center / contain;
    z-index: 2;
  }

  /* --- 光エフェクト背景 --- */
  .sec-2__light {
    position: absolute;
    width: 160px;
    height: 250px;
    left: calc(50% - 160px / 2 + 0.5px);
    top: -86px;
    /* Figma: 647 - 733 */
    background: url("../images/sp/sec2/about_light.webp") no-repeat center center / contain;
    pointer-events: none;
    z-index: 1;
  }

  /* --- 挨拶テキスト --- */
  .sec-2__greeting {
    position: absolute;
    width: 272px;
    height: 48px;
    left: calc(50% - 272px/2 + 0.5px);
    top: 139px;
    /* Figma: 872 - 733 */
    font-family: 'Noto Sans JP', sans-serif;
    font-style: normal;
    font-weight: 500;
    /* 「太字」より少しだけ細いMediumに変更 */
    font-size: 16px;
    line-height: 150%;
    text-align: center;
    color: #333333;
    transform: none;
    /* 中央寄せの干渉を防ぐ */
    z-index: 2;
  }

  .sec-2__greeting .u-inline-block {
    display: block;
    width: 100%;
  }

  /* --- 装飾ライン（左） --- */
  .sec-2__line-left {
    position: absolute;
    width: 35.11px;
    height: 2px;
    left: 30px;
    top: 154px;
    border: none;
    /* スマホブラウザのバグに依存しない独自の「細かい点線パターン」を作成 */
    background-image: linear-gradient(to right, #333333 50%, transparent 50%);
    background-size: 6px 100%; /* 約6本の点線になるように調整 */
    background-repeat: repeat-x;
    transform-origin: left center;
    transform: rotate(70.02deg);
    z-index: 2;
  }

  /* --- 装飾ライン（右） --- */
  .sec-2__line-right {
    position: absolute;
    width: 35.11px;
    height: 2px;
    left: 339px;
    top: 154px;
    border: none;
    background-image: linear-gradient(to right, #333333 50%, transparent 50%);
    background-size: 6px 100%; /* 約6本の点線になるように調整 */
    background-repeat: repeat-x;
    transform-origin: left center;
    transform: matrix(-0.34, 0.94, 0.94, 0.34, 0, 0);
    z-index: 2;
  }

  /* --- 人物画像（春日さん） --- */
  .sec-2__person {
    display: block;
    position: absolute;
    width: 139px;
    height: 173px;
    left: 226px;
    top: 208px;
    /* Figma: 941 - 733 */
    /* PC版と同じ画像パスを参照し、比率を保持して表示 */
    background: url('../images/sec2/7897986@2x 1.png') no-repeat center center / contain;
    z-index: 3;
  }

  /* --- 自己紹介カード (Rectangle 77) --- */
  .sec-2__card {
    position: absolute;
    width: 335px;
    height: 1333px;
    left: 20px;
    top: 217px;
    /* Figma: 950 - 733 */
    background: #FFFFFF;
    box-shadow: 0px 5px 7.7px -5px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    z-index: 2;
  }

  /* ============================================================
   スキルバッジ
   ============================================================ */

  /* --- ラッパー --- */
  .sec-2 .sec-2__badges-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 375px;
    height: auto;
    display: block;
    z-index: 3;
  }

  /* --- 各アイテムを static にリセット --- */
  .sec-2 .sec-2__badge-item {
    position: static;
    width: auto;
    height: auto;
  }

  /* --- バッジ共通スタイル --- */
  .sec-2__badge-bg {
    position: absolute;
    width: 135.75px;
    height: 15.01px;
    background: #CC9D33;
    border-radius: 35.4728px;
    transform: none;
  }

  .sec-2__badge-text {
    position: absolute;
    font-family: 'Noto Sans JP', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 12.279px;
    line-height: 180.7%;
    text-align: center;
    color: #FFFFFF;
    white-space: nowrap;
    transform: translateY(-0.75px); /* 先ほどの半分の位置に調整 */
  }

  /* ============================================================
   各バッジの座標（Figma絶対値 - 733px, 375px基準の固定値）
   ============================================================ */

  /* --- 1段目 --- */
  .sec-2__badge-item:nth-child(1) .sec-2__badge-bg {
    left: 35px;
    top: 450.41px;
  }

  .sec-2__badge-item:nth-child(1) .sec-2__badge-text {
    width: 99px;
    left: calc(50% - 99px/2 - 85px);
    top: 447px;
  }

  .sec-2__badge-item:nth-child(2) .sec-2__badge-bg {
    left: 178.25px;
    top: 450.41px;
  }

  .sec-2__badge-item:nth-child(2) .sec-2__badge-text {
    width: 122px;
    left: calc(50% - 122px/2 + 58.5px);
    top: 447px;
  }

  /* --- 2段目 --- */
  .sec-2__badge-item:nth-child(3) .sec-2__badge-bg {
    left: 35px;
    top: 558.02px;
  }

  .sec-2__badge-item:nth-child(3) .sec-2__badge-text {
    width: 50px;
    left: calc(50% - 50px/2 - 84.5px);
    top: 555px;
  }

  .sec-2__badge-item:nth-child(4) .sec-2__badge-bg {
    left: 178.02px;
    top: 558.02px;
  }

  .sec-2__badge-item:nth-child(4) .sec-2__badge-text {
    width: 50px;
    left: calc(50% - 50px/2 + 58.5px);
    top: 555px;
  }

  /* --- 3段目 --- */
  .sec-2__badge-item:nth-child(5) .sec-2__badge-bg {
    left: 35px;
    top: 665.62px;
  }

  .sec-2__badge-item:nth-child(5) .sec-2__badge-text {
    width: 112px;
    left: calc(50% - 112px/2 - 84.5px);
    top: 662px;
  }

  .sec-2__badge-item:nth-child(6) .sec-2__badge-bg {
    left: 178.02px;
    top: 665.62px;
  }

  .sec-2__badge-item:nth-child(6) .sec-2__badge-text {
    width: 74px;
    left: calc(50% - 74px/2 + 58.5px);
    top: 662px;
  }

  /* ============================================================
   本文テキスト（ABOUT）
   ============================================================ */

  /* --- 本文ブロック 1 --- */
  .sec-2__text-1 {
    position: absolute;
    width: 305px;
    height: auto;
    left: calc(50% - 305px/2);
    top: 272px;
    /* Figma: 1005 - 733 */
    font-family: 'Noto Sans JP', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 180%;
    color: #333333;
    transform: none;
    z-index: 3;
  }

  /* --- 本文ブロック 2 --- */
  .sec-2__text-2 {
    position: absolute;
    width: 305px;
    height: auto;
    left: calc(50% - 305px/2);
    top: 774px;
    /* Figma: 1507 - 733 */
    font-family: 'Noto Sans JP', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 180%;
    color: #333333;
    transform: none;
    z-index: 3;
  }

  /* ============================================================
   カード装飾（ラベルグループ）
   ============================================================ */

  /* --- ラベル背景 (Rectangle 78) --- */
  .sec-2__label-group {
    position: absolute;
    width: 140.4px;
    height: 19.29px;
    left: 15px; /* 黒い背景の位置は元に戻す */
    top: 20px;
    background: #333333;
    clip-path: polygon(0 0, 100% 0, calc(100% - 11px) 100%, 0 100%);
    z-index: 3;
    display: flex;
    align-items: center;
    padding-left: 5px; /* ここを減らして、背景の中にある「文字」と「線」だけを左に寄せる */
    gap: 5px;
  }

  .sec-2__label-ja {
    position: static;
    width: auto;
    font-size: 12.1px;
    line-height: 1;
    color: #FFFFFF;
    transform: none;
  }

  .sec-2__label-line {
    position: static;
    width: 19px;
    border-top: 1px solid #FFFFFF;
  }

  .sec-2__label-en {
    position: static;
    width: auto;
    font-size: 12.1px;
    line-height: 1;
    color: #FFFFFF;
    transform: none;
  }

  /* ============================================================
   ABOUT コンバージョン訴求（ハイライトテキスト）
   ============================================================ */

  /* --- 赤枠ハイライト背景 1 (Rectangle 81) --- */
  .sec-2__rect81 {
    position: absolute;
    width: 206.71px;
    height: 21.68px;
    left: 35px;
    top: 1116px;
    /* Figma: 1849 - 733 */
    background: #C73D26;
    z-index: 3;
    /* カード(z:2)の前面のさらに前面へ */
  }

  /* --- ハイライトテキスト 1 --- */
  .sec-2__text-hl-1 {
    position: absolute;
    width: 196px;
    height: 25px;
    left: 40px;
    top: 1114px;
    /* Figma: 1847 - 733 */
    font-family: 'Noto Sans JP', sans-serif;
    font-style: normal;
    font-weight: 500;
    /* Mediumに変更 */
    font-size: 14px;
    line-height: 180.7%;
    color: #FDFFC7;
    transform: none;
    /* PC版中央寄せの干渉キャンセラー */
    z-index: 4;
  }

  /* --- 赤枠ハイライト背景 2 (Rectangle 82) --- */
  .sec-2__rect82 {
    position: absolute;
    width: 305px;
    height: 21.68px;
    left: 35px;
    top: 1142px;
    /* Figma: 1875 - 733 */
    background: #C73D26;
    z-index: 3;
  }

  /* --- ハイライトテキスト 2 --- */
  .sec-2__text-hl-2 {
    position: absolute;
    width: auto;
    height: 25px;
    left: 40px;
    top: 1140px;
    /* Figma: 1873 - 733 */
    font-family: 'Noto Sans JP', sans-serif;
    font-style: normal;
    font-weight: 500;
    /* Mediumに変更 */
    font-size: 14px;
    line-height: 180.7%;
    color: #FDFFC7;
    transform: none;
    white-space: nowrap;
    z-index: 4;
  }

  /* --- 本文ブロック 3 --- */
  .sec-2__text-3 {
    position: absolute;
    width: 305px;
    height: auto;
    left: calc(50% - 305px/2);
    top: 1180px;
    /* Figma: 1913 - 733 */
    font-family: 'Noto Sans JP', sans-serif;
    font-style: normal;
    font-weight: 500;
    /* Mediumに変更 */
    font-size: 14px;
    line-height: 180%;
    color: #333333;
    transform: none;
    z-index: 3;
  }

  /* --- 本文ブロック 4 --- */
  .sec-2__text-4 {
    position: absolute;
    width: 305px;
    height: auto;
    left: calc(50% - 305px/2);
    top: 1235px;
    /* Figma: 1968 - 733 */
    font-family: 'Noto Sans JP', sans-serif;
    font-style: normal;
    font-weight: 500;
    /* Mediumに変更 */
    font-size: 14px;
    line-height: 180%;
    color: #333333;
    transform: none;
    z-index: 3;
  }

}

/* end @media */

/* ============================================================
   スマホ版でもPC版由来のJSスクロールアニメーションを復活
   ============================================================ */
.js-fade-item {
  opacity: 0;
  /* 初期状態: 透明で下に30pxオフセット */
  transform: translateY(30px);
  /* イージングトランジション 1.0s */
  transition: opacity 1.0s cubic-bezier(0.25, 0.8, 0.25, 1), transform 1.0s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* スクロール検知で .is-visible が付与されたら表示 */
.js-badge-wrapper.is-visible .js-fade-item,
.js-fade-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* バッジの左から順に表示 */
.js-badge-wrapper.is-visible .delay-1 {
  transition-delay: 0s;
}

.js-badge-wrapper.is-visible .delay-2 {
  transition-delay: 0.2s;
}

.js-badge-wrapper.is-visible .delay-3 {
  transition-delay: 0.4s;
}

.js-badge-wrapper.is-visible .delay-4 {
  transition-delay: 0.6s;
}

.js-badge-wrapper.is-visible .delay-5 {
  transition-delay: 0.8s;
}

.js-badge-wrapper.is-visible .delay-6 {
  transition-delay: 1.0s;
}