/* ============ 02 ABOUT — コンセプト ============
   PC design 1440: section spans y760..1460 (700px tall).
   Hero gradient (#96BCF3 → #FFCFDE, horizontal) continues from the hero
   section and fades to white ~265px down.
   SP design 375: section starts at the crossing photo top (design y787). */

.about{
  height:700px;
  background:var(--hero-grad);
  overflow:hidden;
}
/* vertical fade to white over the horizontal hero gradient */
.about::before{
  content:"";
  position:absolute;
  inset:0;
  /* 支給ベクター(pc/about-bg.svg)の白フェード。グラデ帯は 428px で、
     その中を「上端が透明 → 下端(281px地点)で不透明の白」に抜ける。
     428px 以降は白ベタ。 */
  background:linear-gradient(180deg,
    rgba(255,255,255,0) 0,
    #fff 281px,
    #fff 100%);
}

/* --- photos --- */
.about-crossing{
  position:absolute;
  top:65px;
  left:0;
  width:385px;
  height:350px;
  object-fit:cover;
  border-radius:0 20px 20px 0;
}
.about-cheers{
  position:absolute;
  top:287px;
  right:0;
  width:385px;
  height:398px;
  object-fit:cover;
  border-radius:20px 0 0 20px;
}

/* --- copy column (x=532 on the 1440 canvas) --- */
.about-copy{
  position:absolute;
  top:164px;
  left:calc(50% - 188px);
  width:380px;
}
.about-label{
  font-size:14px;
  line-height:1;
  font-weight:500;
  letter-spacing:.09em;
  color:var(--ink);
}
.about-title{
  margin-top:22px;
  font-size:32px;
  line-height:1;
  font-weight:700;
  letter-spacing:.05em;
  color:var(--ink);
}
.about-lead{
  margin-top:42px;
  font-size:20px;
  line-height:1;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--pink);
}
.about-body{
  margin-top:22px;
  font-size:16px;
  line-height:26px;
  font-weight:500;
  color:var(--ink);
}
.about-body p+p{margin-top:26px}

/* ============ SP (375 design) ============ */
@media (max-width:767px){
  .about{
    height:auto;
    padding-bottom:40px;
  }
  .about::before{
    /* 支給ベクター(sp/about-bg.svg)。帯 502px、480px 地点で白に到達 */
    background:linear-gradient(180deg,
      rgba(255,255,255,0) 0,
      #fff 480px,
      #fff 100%);
  }
  .about-crossing{
    position:relative;
    top:auto;
    left:auto;
    width:175px;
    height:160px;
    border-radius:0 14px 14px 0;
  }
  .about-cheers{
    position:relative;
    top:auto;
    right:auto;
    width:175px;
    height:181px;
    margin:-54px 0 0 auto;   /* overlaps the crossing photo by 54px */
    border-radius:14px 0 0 14px;
  }
  .about-copy{
    position:relative;
    top:auto;
    left:auto;
    width:auto;
    max-width:264px;          /* wraps 「〜当たり前／に。」 as designed */
    margin:33px auto 0 56px;
  }
  .about-label{
    font-size:12px;
    letter-spacing:.06em;
  }
  .about-title{
    margin-top:14px;
    font-size:24px;
  }
  .about-lead{
    margin-top:45px;
    font-size:19px;
  }
  .about-body{
    margin-top:21px;
    font-size:15px;
    line-height:22px;
  }
  .about-body p+p{margin-top:22px}
}