/* ABOUT US専用。FV・共通セレクターは変更しない。 */
.about-section {
  --about-accent:#3154e8;
  --about-text:#1f2937;
  --about-body:#475569;
  --about-photo-position:50% 48%;
  position:relative;
  padding:120px 0 140px;
  background:#fff;
  color:var(--about-text);
}
.about-section .about-section__inner {
  width:min(1280px,calc(100% - 96px));
  margin-inline:auto;
}
.about-section .about-section__composition {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  padding-bottom:64px;
  isolation:isolate;
}
.about-section .about-section__visual {
  grid-area:1 / 1;
  position:relative;
  margin:0 0 0 12%;
  height:clamp(500px,42vw,620px);
  overflow:hidden;
  border-radius:24px;
}
.about-section .about-section__image {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:var(--about-photo-position);
}
.about-section .about-section__caption {
  position:absolute;
  inset:18px 18px auto auto;
  margin:0;
  padding:6px 9px;
  border-radius:3px;
  background:#fffffff0;
  color:var(--about-body);
  font-size:10px;
  line-height:1.6;
}
.about-section .about-section__card {
  grid-area:1 / 1;
  z-index:1;
  align-self:end;
  width:min(540px,52%);
  margin:160px 0 -64px;
  padding:48px;
  border-radius:20px;
  background:#fff;
  box-shadow:0 14px 60px #2236570b;
}
.about-section .about-section__label {
  margin:0 0 24px;
  color:var(--about-accent);
  font:600 11px/1.5 Arial,sans-serif;
  letter-spacing:.18em;
}
.about-section .about-section__title {
  margin:0 0 28px;
  font-size:clamp(27px,2.35vw,34px);
  line-height:1.65;
  letter-spacing:.015em;
  font-weight:700;
}
.about-section .about-section__body {
  color:var(--about-body);
  font-size:15px;
  line-height:2;
  overflow-wrap:anywhere;
}
.about-section .about-section__body p {
  margin:0 0 18px;
}
.about-section .about-section__body p:last-child {
  margin-bottom:0;
}
/* JSが有効かつ監視開始に成功した場合のみ、表示前の状態を適用する。 */
@media (prefers-reduced-motion:no-preference) {
  .about-section.about-section--pending [data-about-reveal] {
    opacity:0;
  }
  .about-section.about-section--pending [data-about-reveal="card"],
  .about-section.about-section--pending [data-about-reveal="label"],
  .about-section.about-section--pending [data-about-reveal="title"],
  .about-section.about-section--pending [data-about-reveal="body"] {
    transform:translateY(12px);
  }
  .about-section.about-section--animated [data-about-reveal] {
    transition:opacity .7s ease,transform .7s cubic-bezier(.2,.65,.3,1);
  }
  .about-section.about-section--animated [data-about-reveal="card"] { transition-delay:.12s; }
  .about-section.about-section--animated [data-about-reveal="label"] { transition-delay:.2s; }
  .about-section.about-section--animated [data-about-reveal="title"] { transition-delay:.3s; }
  .about-section.about-section--animated [data-about-reveal="body"] { transition-delay:.4s; }
}
@media (min-width:768px) and (max-width:1023px) {
  .about-section { padding:88px 0 100px; }
  .about-section .about-section__inner { width:calc(100% - 64px); }
  .about-section .about-section__visual { margin-left:8%;height:500px; }
  .about-section .about-section__card { width:min(520px,78%);padding:36px;margin-top:190px; }
  .about-section .about-section__title { font-size:29px; }
}
@media (max-width:767px) {
  .about-section { padding:64px 0 72px; }
  .about-section .about-section__inner { width:calc(100% - 32px); }
  .about-section .about-section__composition { padding-bottom:0; }
  .about-section .about-section__visual {
    grid-area:1 / 1;
    margin:0;
    height:auto;
    aspect-ratio:4 / 3;
    border-radius:16px;
  }
  .about-section .about-section__card {
    grid-area:2 / 1;
    width:calc(100% - 24px);
    margin:-32px auto 0;
    padding:30px 24px 32px;
    border-radius:16px;
  }
  .about-section .about-section__label { margin-bottom:18px;font-size:10px; }
  .about-section .about-section__title {
    font-size:clamp(22px,6vw,28px);
    line-height:1.65;
    letter-spacing:0;
    margin-bottom:22px;
  }
  .about-section .about-section__body { font-size:14px;line-height:1.95; }
  .about-section .about-section__caption { inset:10px 10px auto auto;font-size:9px; }
}
@media (max-width:359px) {
  .about-section .about-section__card { padding-inline:20px; }
  .about-section .about-section__title { font-size:21px; }
}
@media (prefers-reduced-motion:reduce) {
  .about-section [data-about-reveal] { opacity:1;transform:none;transition:none; }
}

/* HOMEのキャッチコピー色。 */
.about-section .about-section__title{color:#3154E8}

/* HOMEの説明文の文字色。 */
.about-section .about-section__body{color:#25364D}

.about-section #about-title{font-weight:800}

/* スマホHOMEの青いキャッチコピーを20pxへ統一。 */
@media(max-width:767px){.about-section .about-section__title{font-size:20px;line-height:1.65;letter-spacing:0}}

/* Supplied HOME ABOUT photo within the existing frame. */
.about-section{--about-photo-position:50% 30%}

/* HOME ABOUT card: move down by 60px on desktop. */
@media(min-width:1024px){.about-section .about-section__card{margin-top:220px}}