/* ============================================================
   About セクション
   Figma 基準: PC 1280×832 / SP 390×844
   ============================================================ */

.about {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: #81b29a;
  /* 上下に余白を追加してセクションを 100svh より高くする */
  padding-block: clamp(160px, 25vh, 320px);
}

/* ============================================================
   テクスチャ（bgtexture.svg を回転して配置）

   PC: 左端に -45° 回転、左方向にはみ出す
   SP: 右上に -45° 回転 + 左右反転
   ============================================================ */
.about__texture {
  --tex-w: clamp(400px, 56vw, 720px); /* SVG は正方形なので高さ = 幅 */
  position: absolute;
  /* 中心を画面左端付近に置き、右半分が見える状態 */
  left: calc(var(--tex-w) * -0.25);
  top: 50%;
  /* translateY で垂直中央、rotate はデフォルト transform-origin（中心）で回転 */
  transform: translateY(-50%) rotate(-90deg);
  width: var(--tex-w);
  pointer-events: none;
  z-index: 0;
}

.about__texture img {
  display: block;
  width: 100%;
  height: auto;
}

/* ============================================================
   インナーラッパー（FV と同じ max-width 1512px）
   ============================================================ */
.about__inner {
  position: relative;
  /* padding-block で高さが決まるので height: 100% は不要 */
  max-width: 1512px;
  margin-inline: auto;
}

/* ============================================================
   コンテンツ（右半分に配置）

   PC 1280px 基準値:
     right = 130px (= 1280 - 676 - 474)   → right: 10.2vw
     width = 474px                          → 37vw
     top: 垂直中央
   ============================================================ */
.about__content {
  /*
   * 右カラム（50%〜100%）の中央に配置
   * 左端 = 50%、コンテンツ幅の半分だけ左に引き戻す
   * → translate(-50%) で右カラム中央に揃う
   */
  position: relative;
  left: 70%;
  transform: translateX(-50%);
  width: clamp(320px, 42vw, 540px);
  padding-block: clamp(48px, 8vh, 100px);
  color: #fff;
  z-index: 1;
}

/* 見出し */
.about__headline {
  margin: 0 0 clamp(24px, 3.4vw, 44px);
  font-family: 'Zen Kaku Gothic Antique', sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 2.5vw, 32px);
  line-height: 1.92;
  letter-spacing: 0.06em;
}

/* 本文 */
.about__body {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: clamp(13px, 1.25vw, 16px);
  line-height: 2;
  letter-spacing: 0.12em;
}

.about__body p {
  margin: 0;
}

.about__body p + p {
  margin-top: 1em;
}

/* ============================================================
   レスポンシブ: ≥ 1440px 上限
   ============================================================ */
@media (min-width: 1440px) {
}

/* ============================================================
   レスポンシブ: SP（〜 767px）
   ============================================================ */
@media (max-width: 767px) {
  .about__texture {
    display: none;
  }

  .about {
    padding-top: clamp(48px, 8vh, 80px);
  }


  /* セクション下余白を縮小 */
  .about {
    padding-bottom: clamp(60px, 10vh, 100px);
  }

  /* テクスチャ: 右上に配置（中心基点で回転） */
  .about__texture {
    --tex-w: clamp(220px, 70vw, 320px);
    left: auto;
    right: 0;
    top: 0;
    transform: rotate(-90deg) scaleX(-1);
    transform-origin: 50% 50%;
    width: var(--tex-w);
  }

  /* コンテンツ: PC の left/transform をリセットして中央揃え */
  .about__content {
    left: auto;
    transform: none;
    margin-inline: auto;
    width: clamp(300px, 88vw, 360px);
    padding-block: clamp(32px, 6vh, 64px);
  }

  .about__headline {
    font-size: 24px;
    line-height: 2.1;
    margin-bottom: 28px;
  }

  .about__body {
    font-size: 16px;
    line-height: 2;
  }
}