/* =====================================================================
   about.css — TOP About（コープデリとは）
   PC(>=1024px): テキスト左・写真右の2カラム / SP: 縦積み中央寄せ
   ===================================================================== */
.p-about {
  background: var(--container-white);
  /* SPは下を0にし、続く特長セクションの赤ちゃん画像側で余白を持たせる */
  padding-block: var(--space-64) 0;
}
.p-about__inner {
  position: relative;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-24);
}

/* 装飾ブロブ（PCのみ・右上） */
.p-about__blob { position: absolute; pointer-events: none; z-index: 0; display: none; }
.p-about__blob--1 { top: -98px; right: 56px; width: 188px; height: auto; }
.p-about__blob--2 { top: 40px; right: 40px; width: 90px; height: auto; }

.p-about__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-32);
}

/* 見出しブロック */
.p-about__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
}
.p-about__eyebrow {
  font-size: clamp(20px, 5.5vw, 24px);
  line-height: 1.5;
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  color: var(--text-orange);
}
.p-about__dots { width: 64px; height: auto; }
.p-about__heading {
  margin-top: var(--space-12);
  font-size: clamp(32px, 7vw, 40px);
  line-height: 1.45;
  font-weight: var(--fw-bold);
  color: var(--text-secondary);
  text-align: center;
}

/* 写真 */
.p-about__image {
  width: 100%;
  max-width: 470px;
}
.p-about__image img {
  width: 100%;
  height: auto;
  aspect-ratio: 470 / 296;
  object-fit: cover;
  border-radius: var(--radius-24);
}

/* 説明文 */
.p-about__desc {
  font-size: 16px;
  line-height: 2.1;
  font-weight: var(--fw-bold);
  color: var(--text-default);
}

/* ---- PC: 2カラム ---- */
@media (min-width: 1024px) {
  .p-about { padding-bottom: var(--space-64); } /* SPで0にした下余白をPCは元に戻す */
  .p-about__blob { display: block; }

  .p-about__body {
    display: grid;
    grid-template-columns: 1fr 470px;
    grid-template-areas:
      "head  image"
      "desc  image";
    column-gap: var(--space-80);
    row-gap: var(--space-40);
    align-items: start;
    max-width: 996px;
    margin-inline: auto;
  }
  .p-about__head {
    grid-area: head;
    align-items: flex-start;
  }
  .p-about__heading { text-align: left; }
  .p-about__image {
    grid-area: image;
    align-self: center;
    max-width: none;
  }
  .p-about__desc { grid-area: desc; }
}