@media screen and (min-width: 769px) {
/* ============================================================
   6. セクション2: ABOUTセクション
   ============================================================
   Figmaの絶対座標を基準に配置
   top, left値はFigma上の数値をそのまま使用
   レスポンシブ対応は後日実装予定
   ============================================================ */

.sec-2 {
  position: relative;
  width: 100%;
  max-width: var(--content-max-width); /* 1920px最大幅 */
  height: 1797px; /* Figma全体(2641px) - FV高さ(844px) = セクション高さ */
  margin: 0 auto;
  overflow: hidden; /* セクション1との境界をクリップ */
  background: #E9F7F6;
  z-index: 1;
}

/* --- Figma座標ベースの内部コンテナ --- */
.sec-2__inner {
  position: absolute;
  width: 1920px;
  height: 3485px; /* FV(844) + Sec-2(2641) */
  top: -844px; /* セクション1(FV)分をオフセット */
  left: calc(50% - 960px); /* 1920pxベースを中央揃え */
  pointer-events: auto;
}

/* ----------------------------------------------------
   以下、各要素の座標はFigma上の絶対値をそのまま使用
   ---------------------------------------------------- */

/* --- 01 タイトル画像 --- */
.sec-2__title {
  position: absolute;
  width: 520px;
  height: 202px;
  left: calc(50% - 520px/2);
  top: 944px;
  background: url('../images/sec2/01.png') no-repeat center center / contain;
  z-index: 2;
}

/* --- 光エフェクト背景 --- */
.sec-2__light {
  position: absolute;
  width: 598px;
  height: 937px;
  left: calc(50% - 598px/2 + 1px);
  top: 753px;
  background: url('../images/sec2/光.png') no-repeat center center / contain;
  pointer-events: none; /* クリックを透過させる */
  z-index: 1; /* 背面 */
}

/* --- 挨拶テキスト --- */
.sec-2__greeting {
  position: absolute;
  width: 598px;
  height: 30px;
  left: calc(50% - 598px/2);
  top: 1218px;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 25px;
  line-height: 30px;
  text-align: center;
  color: #333333;
  z-index: 2;
}

/* --- 点線装飾（左側） --- */
.sec-2__line-left {
  position: absolute;
  width: 35.11px;
  height: 0px;
  left: 634px;
  top: 1216px;
  border-top: 2px dashed #333333;
  transform-origin: left center; /* Figmaの回転基準点 */
  transform: rotate(70.02deg);
  z-index: 2;
}

/* --- 点線装飾（右側） --- */
.sec-2__line-right {
  position: absolute;
  width: 35.11px;
  height: 0px;
  left: 1274px;
  top: 1216px;
  border-top: 2px dashed #333333;
  transform-origin: left center; /* Figmaの回転基準点 */
  transform: matrix(-0.34, 0.94, 0.94, 0.34, 0, 0);
  z-index: 2;
}

/* --- 自己紹介カード (Rectangle 77) --- */
.sec-2__card {
  position: absolute;
  width: 817px;
  height: 1255px;
  left: 458px;
  top: 1283px;
  background: #FFFFFF;
  box-shadow: 0px 5px 7.7px -5px rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  z-index: 2; /* 光エフェクトの前面 */
}

/* --- ラベルグループ（帯背景部分） --- */
.sec-2__label-group {
  position: absolute;
  width: 182px;
  height: 25px;
  left: 31px; 
  top: 30px;  
  background: #333333;
  /* 台形の形状をclip-pathで実現 */
  clip-path: polygon(0 0, 100% 0, calc(100% - 15px) 100%, 0 100%);
  z-index: 3;
}

/* --- ラベル日本語 --- */
.sec-2__label-ja {
  position: absolute;
  width: 48px;
  height: 19px;
  left: 11px; /* ラベル内の相対位置 */
  top: 3px;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  color: #FFFFFF;
}

/* --- Line 5 --- */
.sec-2__label-line {
  position: absolute;
  width: 25px;
  height: 0px;
  left: 63px; /* ラベル内の相対位置 */
  /* 縦中央(12.5px)に配置 */
  top: 12px;
  /* Figmaの値をそのまま使用 */
  border-top: 1px solid #FFFFFF;
}

/* --- AboutMe --- */
.sec-2__label-en {
  position: absolute;
  width: 70px;
  height: 19px;
  left: 94px; /* ラベル内の相対位置 */
  top: 3px;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  color: #FFFFFF;
}

/* --- 人物画像 --- */
.sec-2__person {
  position: absolute;
  width: 292px;
  height: 364px;
  left: 1146px;
  top: 1283px;
  /* プロフィール写真 */
  background: url('../images/sec2/7897986@2x 1.png') no-repeat center center / contain;
  z-index: 3; /* カード(z:2)の前面 */
}

/* --- テキストブロック1 --- */
.sec-2__text-1 {
  position: absolute;
  width: 658px;
  height: 132px;
  left: calc(50% - 658px/2 - 142px);
  top: 1363px;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 180.7%;
  color: #333333;
  z-index: 3;
}

/* ============================================================
   スキルアイコンバッジグリッド
   ============================================================ */
.sec-2__badges-wrapper {
  position: absolute;
  /* 基準座標 */
  left: 489px;
  top: 1515px;
  /* CSS Gridで 3列2行配置 */
  display: grid;
  grid-template-columns: repeat(3, 199px);
  column-gap: 5px; /* カラム間の余白 */
  row-gap: 31px;   /* 行間の余白 */
  z-index: 3;
}

.sec-2__badge-item {
  position: relative;
  width: 199px;
  height: 127px; /* アイコン含む高さ */
}

/* --- バッジ背景 --- */
.sec-2__badge-bg {
  position: absolute;
  width: 199px;
  height: 22px;
  left: 0;
  top: 5px; /* テキストの少し下 */
  background: #CC9D33;
  border-radius: 52px;
}

.sec-2__badge-text {
  position: absolute;
  width: max-content; 
  white-space: nowrap;
  height: 33px;
  /* テキストを中央揃え */
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 18px;
  line-height: 180.7%;
  text-align: center;
  color: #FFFFFF;
}

.sec-2__badge-icon {
  position: absolute;
  top: 37px; /* バッジ背景の下 */
  left: 50%;
  transform: translateX(-50%);
}

/* --- 各スキルアイコン個別設定 --- */
.icon-sales-design {
  width: 88px; height: 90px;
  background: url('../images/sec2/8936789 1.png') no-repeat center center / contain;
}
.icon-sales-writing {
  width: 108px; height: 90px;
  background: url('../images/sec2/79798696 1.png') no-repeat center center / contain;
}
.icon-sns {
  width: 56px; height: 90px;
  background: url('../images/sec2/7278378 1.png') no-repeat center center / contain;
}
.icon-ad {
  width: 46px; height: 90px;
  background: url('../images/sec2/3793892 1.png') no-repeat center center / contain;
}
.icon-line {
  width: 46px; height: 90px;
  background: url('../images/sec2/1797678 1.png') no-repeat center center / contain;
}
.icon-funnel {
  width: 78px; height: 90px;
  background: url('../images/sec2/679678339 1.png') no-repeat center center / contain;
}

/* ============================================================
   スクロールフェードインアニメーション
   ============================================================ */
.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; }

/* --- テキストブロック2 --- */
.sec-2__text-2 {
  position: absolute;
  width: 670px;
  height: 297px;
  left: calc(50% - 670px/2 - 136px);
  top: 1820px;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 180.7%;
  color: #333333;
  z-index: 3;
}

/* --- Rectangle 81 (強調背景1) --- */
.sec-2__rect81 {
  position: absolute;
  width: 286px;
  height: 30px;
  left: 489px;
  top: 2130px;
  background: #C73D26;
  z-index: 2; /* テキスト(z-index: 3)の背面 */
}

/* --- Rectangle 82 (強調背景2) --- */
.sec-2__rect82 {
  position: absolute;
  width: 422px;
  height: 30px;
  left: 489px;
  top: 2166px;
  background: #C73D26;
  z-index: 2; /* テキスト(z-index: 3)の背面 */
}

/* --- 強調テキスト1 --- */
.sec-2__text-hl-1 {
  position: absolute;
  /* テキスト幅に合わせて自動調整 */
  width: max-content;
  white-space: nowrap;
  height: 36px;
  left: calc(50% - 280px/2 - 328px);
  top: 2127px;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 180.7%;
  color: #FDFFC7; /* Figma指定の薄黄色 */
  z-index: 3;
}

/* --- 強調テキスト2 --- */
.sec-2__text-hl-2 {
  position: absolute;
  width: max-content;
  white-space: nowrap;
  height: 36px;
  left: calc(50% - 416px/2 - 260px);
  top: 2163px;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 180.7%;
  color: #FDFFC7; /* Figma指定の薄黄色 */
  z-index: 3;
}

/* --- テキストブロック3（強調行の続き） --- */
.sec-2__text-3 {
  position: absolute;
  width: max-content;
  white-space: nowrap;
  height: 33px;
  left: calc(50% - 160px/2 + 38px);
  top: 2165px;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 180.7%;
  color: #333333;
  z-index: 3;
}

/* --- テキストブロック4（最終段落） --- */
.sec-2__text-4 {
  position: absolute;
  width: 670px;
  height: 264px;
  left: calc(50% - 670px/2 - 136px);
  top: 2234px;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 180.7%;
  color: #333333;
  z-index: 3;
}

/* --- 装飾テキスト画像（縦書き透かし） --- */
.sec-2__watermark {
  position: absolute;
  /* 画像自体が縦長なので、箱を縦長に変更 */
  width: 171px;
  height: 871px;
  left: 1190px; /* ほんのちょっとだけ右へ戻す */
  top: 1667px;  /* まじでちょっとだけ上へ（Figmaの素の数値と一致） */
  background: url('../images/sec2/watermark.webp') no-repeat center center / contain;
  pointer-events: none;
  z-index: 10; /* カード(z:2)やテキスト(z:3)より前面に表示 */
}


} /* end @media PC */