/* =========================================================
   About page CSS (faithful, no-card)
   - whitespace layout like screenshot
   - text on image (hero-like overlay)
   - company black block section
   ========================================================= */

/* =========================
   Section spacing (screenshot-like)
   ========================= */
.about-lead{
  padding:0 0 70px;
  background: #f5f5f5;
}
.about-section{
  padding:70px 0 90px;
}

.about-section.professional{
  background: #f5f5f5;
}

/* Headings */
.about-heading{
  margin:0 0 34px;
  text-align:center;
  font-size:30px;
  letter-spacing:0.03em;
  font-weight:normal;
}

/* =========================
   Wrapper (not a card)
   ========================= */
.about-card{
  max-width:630px;
  margin:0 auto;
  background:transparent;
  border:none;
  box-shadow:none;
  border-radius:0;
}
.about-lead .about-card{
  max-width:1000px;
}
/* =========================
   Images
   ========================= */
.about-card-img{
  position:relative; /* overlay用 */
  margin:0 auto;
  /* max-width:1000px; */
}
.about-card-img img{
  width:100%;
  height:auto;
  display:block;
}

/* 1枚目：画像の上に文字を重ねる */
.about-hero-img .about-hero-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:start;
  justify-content:center;
  text-align:center;
  padding:18px;
  pointer-events:none;
}
.about-hero-img .about-hero-overlay::before{
  content:"";
  position:absolute;
  inset:0;
  /* トップHeroっぽい薄い暗幕 */
  background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.06));
}
.about-hero-overlay-inner{
  position:relative;
  color:#fff;
  font-weight:700;
  font-size:18px;
  line-height:1.7;
  letter-spacing:.06em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  font-size: 30px;
      font-size: 36px;
    line-height: 1.5;
    margin-top: 15px;
}
.lang-en .about-hero-overlay-inner{
  letter-spacing: 0;
}

/* =========================
   Text blocks (centered, small like screenshot)
   ========================= */
.about-card-text{
  padding:18px 0 0;
  text-align:center;
}

.about-lead-title{
  margin:10px 0 18px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.06em;
  line-height:1.9;
  color:#111;
}

.about-lead-body{
  margin:0;
  /* font-size:11px; */
  line-height:2;
  color:#111;
  opacity:.85;
}

.about-quote{
  margin:16px 0 18px;
  font-size: 21px;
  font-weight: normal;
  letter-spacing:.06em;
  color:#111;
}

.about-body{
  margin:0;
  /* font-size:14px; */
  line-height:1.9;
  color:#111;
  opacity:.85;
}
.about-body br + br{
  content:"";
  display:block;
  margin-top:10px;
}

/* =========================
   Company black block (screenshot bottom)
   ========================= */
.company-block{
  background:#111;
  color:#fff;
  padding:90px 0 110px;
}
.company-block-container{
  max-width:860px;
  text-align:center;
}

.company-block-title{
  font-size:22px;
  font-weight:700;
  letter-spacing:.04em;
  /* margin:0 0 8px; */
}
.company-block-subtitle{
  font-size:22px;
  font-weight:500;
  letter-spacing:.02em;
  margin:0 0 15px;
}

.company-block-line{
  width:78%;
  height:1px;
  background:rgba(255,255,255,.45);
  margin:0 auto 34px;
}

.company-block-meta{
  font-size: 17px;
  line-height: 1.8em;
  letter-spacing: .02em;
  opacity: .92;
  margin: 0 0 30px;
}

.company-block-list{
  list-style: none;
  padding:0;
  margin: 0 auto 26px;
  max-width: 400px;
  text-align:left;
  font-size:15px;
  line-height:1.5;
  opacity:.92;
}
.company-block-list li{
  position:relative;
  padding-left:14px;
  /* margin:6px 0; */
}
.company-block-list li::before{
  content:"•";
  position:absolute;
  left:0;
  top:0;
  opacity:.9;
}

.company-block-other{
  margin-top:10px;
  font-size:15px;
  line-height:1.8;
  opacity:.92;
}
.company-block-other-title{
  margin:16px 0 8px;
  font-weight:600;
  font-size: 20px;
}
.company-block-other-row{
  /* margin:4px 0; */
}

/* =========================
   Responsive
   ========================= */


@media (max-width: 760px){
  .about-lead{ padding:0 0 60px; }
  .about-section{ padding:60px 0 76px; }

  .about-heading{
    font-size:27px;
    margin-bottom:28px;
  }

  .about-card{ max-width:100%; }
  .about-card-img{ max-width:100%; }

  .about-card-text{
    padding:16px 6px 0;
  }

  .about-hero-overlay-inner{
             font-size: 4.5vw;
        line-height: 1.5;
  }

  .company-block{
    padding:70px 0 90px;
  }
  .company-block-line{
    width:90%;
  }
  .company-block-list{
    max-width: 100%;
    padding:0 8px;
    width: 360px;
  }
}