.about-page { overflow: hidden; color: #211715; }
.about-hero { position: relative; min-height: clamp(580px, 44vw, 720px); display: flex; align-items: center; overflow: hidden; }
.about-hero__image, .about-hero__shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.about-hero__image { object-fit: cover; object-position: center; }
.about-hero__shade { background: linear-gradient(90deg, rgba(4,48,25,.9) 0%, rgba(8,76,39,.54) 46%, rgba(13,118,57,.08) 82%); }
.about-hero__inner { position: relative; z-index: 2; color: #fff; }
.about-eyebrow, .about-label { margin: 0 0 18px; color: #12ad52; font: 800 12px/1.2 Arial,sans-serif; letter-spacing: .14em; }
.about-hero h1 { margin: 0; font-size: var(--type-page-title); line-height: 1.1; letter-spacing: -.035em; }
.about-hero__copy { max-width: 980px; margin: 34px 0 0; font-size: clamp(14px,1.05vw,17px); line-height: 2; font-weight: 600; text-shadow: 0 1px 14px rgba(0,0,0,.28); }
.about-hero__word { position: absolute; right: -1vw; bottom: -4vw; color: rgba(255,255,255,.1); font: italic 900 clamp(100px, 18vw, 340px)/.8 Arial,sans-serif; }
.about-space { position: relative; padding: clamp(90px, 10vw, 170px) 0; }
.about-intro { background: #fff; }
.about-intro::after { content: "ABOUT"; position: absolute; right: -2vw; top: 14%; color: #f2f6f3; font: italic 900 clamp(90px, 14vw, 250px)/1 Arial,sans-serif; z-index: 0; }
.about-intro__grid { position: relative; z-index: 1; display: grid; grid-template-columns: .9fr 1.25fr; align-items: end; gap: 10%; }
.about-intro h2, .about-heading h2, .about-mission h2, .about-why h2 { margin: 0; font-size: var(--type-section-title); line-height: 1.5; font-weight: 700; letter-spacing: -.02em; }
.about-mission h2 { font-size: clamp(34px, 3.35vw, 54px); }
.about-why h2 { font-size: clamp(34px, 3.45vw, 56px); }
.about-intro__copy, .about-heading > p:last-child { margin: 0; font-size: 17px; line-height: 2.15; font-weight: 550; }
.about-label span { margin-left: 12px; color: #809087; letter-spacing: .04em; }
.about-mission { background: #f3f7f4; }
.about-mission__heading { max-width: 760px; margin: 0 0 clamp(40px,4vw,62px); }
.about-mission__heading h2 { font-size: clamp(34px,2.75vw,46px); line-height: 1.42; }
.about-mission__heading h2 > span { display: block; white-space: nowrap; }
.about-mission__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(440px, .92fr); gap: clamp(54px, 7vw, 120px); align-items: center; }
.about-photo { position: relative; min-height: 620px; overflow: hidden; border-radius: 160px 0 0 0; }
.about-photo::before { content: "MISSION"; position: absolute; z-index: 2; left: -15px; bottom: 38px; color: rgba(255,255,255,.5); font: italic 900 clamp(72px, 8vw, 130px)/1 Arial,sans-serif; }
.about-photo img { width: 100%; height: 100%; min-height: 620px; object-fit: cover; object-position: 63% center; }
.about-photo--mission {
  min-height: 0;
  overflow: visible;
  border-radius: 0;
  background: transparent;
}
.about-photo--mission::before { display: none; }
.about-photo--mission img {
  width: 108%;
  height: auto;
  min-height: 0;
  margin-left: -4%;
  padding: 0;
  object-fit: contain;
  object-position: center;
  mix-blend-mode: multiply;
}
.about-mission h2 em, .about-heading h2 em, .about-why h2 em { color: #12ad52; font-style: normal; }
.about-copy { margin-top: 0; font-size: 15px; line-height: 2; }
.about-copy p { margin: 0 0 20px; }
.about-vision { background: linear-gradient(135deg, #effaf4, #f8fbdc); }
.about-vision > .page-wide { position: relative; z-index: 1; }
.about-heading { max-width: 970px; }
.about-heading--center { margin: 0 auto 70px; text-align: center; }
.about-vision .about-heading--center { max-width: 1240px; }
.about-vision .about-heading--center h2 { font-size: clamp(32px, 2.7vw, 46px); white-space: nowrap; }
.about-heading--center > p:last-child { max-width: 850px; margin: 28px auto 0; }
.vision-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; counter-reset: step; }
.vision-steps article { position: relative; min-height: 520px; padding: 42px 38px 38px; border: 1px solid rgba(18,173,82,.34); border-radius: 72px 0; background: linear-gradient(145deg,rgba(255,255,255,.94),rgba(239,252,242,.82)); box-shadow: 0 24px 60px rgba(25,95,53,.08); overflow: hidden; transition: transform .35s ease, box-shadow .35s ease; }
.vision-steps article::before { content: attr(data-kanji); position: absolute; z-index: 0; top: -12px; right: -2px; color: rgba(18,173,82,.105); font: 900 174px/.9 "Yu Gothic",Meiryo,sans-serif; letter-spacing: -.1em; pointer-events: none; }
.vision-steps article::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 7px; background: linear-gradient(90deg,#12ad52,#c9df00); transform: scaleX(.28); transform-origin: left; transition: transform .35s ease; }
.vision-steps article:hover { transform: translateY(-8px); box-shadow: 0 30px 70px rgba(25,95,53,.14); }
.vision-steps article:hover::after { transform: scaleX(1); }
.vision-steps article > span, .value-grid article > span, .reason-grid article > span { color: #12ad52; font: 800 11px/1 Arial,sans-serif; letter-spacing: .08em; }
.vision-icon { position: relative; z-index: 1; height: 170px; margin: 46px auto 24px; background-image: url("../images/about/vision-energy-icons-transparent.png"); background-repeat: no-repeat; background-color: transparent; filter: saturate(.9) contrast(1.03); }
.vision-icon--create { width: 218px; max-width: 100%; background-image: none; }
.vision-icon--create::before, .vision-icon--create::after { content: ""; position: absolute; top: 10px; width: 145px; height: 145px; background-image: url("../images/about/vision-energy-icons-transparent.png"); background-repeat: no-repeat; background-size: 300% auto; }
.vision-icon--create::before { left: -4px; background-position: left top; }
.vision-icon--create::after { right: -4px; background-position: center top; }
.vision-icon--store, .vision-icon--utilize { width: 170px; background-size: 300% auto; }
.vision-icon--store { background-position: left center; }
.vision-icon--utilize { background-position: left bottom; }
.vision-steps h3 { position: relative; z-index: 1; margin: 0 0 20px; font-size: 24px; line-height: 1.5; }
.vision-steps p, .value-grid p, .reason-grid p { position: relative; margin: 0; font-size: 15px; line-height: 1.85; }
.about-value .about-heading { margin-bottom: 70px; }
.about-value .about-heading > p:last-child { max-width: 850px; margin-top: 28px; }
.value-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px; background: #dce5df; border: 1px solid #dce5df; }
.value-grid article { min-height: 300px; padding: clamp(34px, 4vw, 62px); background: #fff; box-shadow: inset 0 0 0 1px rgba(18,173,82,.2); transition: background .3s, transform .3s, box-shadow .3s; }
.value-grid article:hover { background: #f3fff7; box-shadow: inset 0 0 0 5px #12ad52; transform: translateY(-4px); }
.value-grid h3, .reason-grid h3 { margin: 36px 0 18px; font-size: 22px; line-height: 1.5; }
.about-why { min-height: 860px; background: #0b4629; color: #fff; }
.about-why__visual { position: absolute; inset: 0; }
.about-why__visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,58,32,.88) 0%, rgba(8,76,41,.72) 48%, rgba(16,112,59,.2) 100%); }
.about-why__visual img { width: 100%; height: 100%; object-fit: cover; }
.about-why__content { position: relative; z-index: 1; }
.about-why h2 { max-width: 850px; color: #fff; }
.reason-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; margin-top: 80px; }
.reason-grid article { min-height: 260px; padding: 38px; border: 1px solid rgba(218,241,224,.44); background: rgba(4,48,26,.3); backdrop-filter: blur(4px); }
.reason-grid h3 { color: #fff; }

@media (min-width: 992px) {
  .about-hero__inner { padding-top: clamp(62px, 5.5vw, 92px); padding-bottom: clamp(24px, 2vw, 36px); }
}

/* Lower-page box rule: information panels are square, outlined and shadowless. */
.vision-steps article,
.value-grid article { border-radius: 0 !important; box-shadow: inset 0 0 0 1px rgba(18,173,82,.24) !important; }
.vision-steps article { border-radius: 0 !important; box-shadow: inset 0 0 0 1px rgba(18,173,82,.24) !important; }
.vision-steps article:hover { box-shadow: inset 0 0 0 2px #12ad52 !important; }

@media (max-width: 991.98px) {
  .about-hero { min-height: 540px; }
  .about-vision .about-heading--center h2 { white-space: normal; }
  .about-intro__grid, .about-mission__grid { grid-template-columns: 1fr; }
  .about-mission__heading { margin-bottom: 46px; }
  .about-mission__heading h2 > span { white-space: normal; }
  .about-intro__grid { gap: 40px; }
  .about-photo { min-height: 480px; border-radius: 100px 0 0 0; }
  .about-photo img { min-height: 480px; }
  .vision-steps { grid-template-columns: 1fr; }
  .vision-steps article { min-height: 360px; }
  .vision-steps article::before { top: -5px; right: 2px; font-size: 158px; }
  .value-grid, .reason-grid { grid-template-columns: 1fr; }
  .reason-grid { margin-top: 55px; }
  .about-why { min-height: auto; }
}

@media (max-width: 767.98px) {
  .about-hero { min-height: 520px; }
  .about-hero__image { object-position: 58% center; }
  .about-hero__shade { background: linear-gradient(0deg, rgba(4,48,25,.94), rgba(10,101,49,.18)); }
  .about-hero__copy { margin-top: 26px; font-size: 14px; line-height: 1.85; }
  .about-hero h1 { font-size: clamp(40px, 12vw, 52px); }
  .about-space { padding: 78px 0; }
  .about-intro h2, .about-heading h2, .about-mission h2, .about-why h2 { font-size: clamp(27px, 7.8vw, 35px); line-height: 1.5; }
  .about-intro__copy, .about-heading > p:last-child { font-size: 16px; line-height: 1.9; }
  .about-photo, .about-photo img { min-height: 330px; }
  .about-photo { border-radius: 64px 0 0 0; }
  .about-photo--mission,
  .about-photo--mission img { min-height: 0; }
  .about-photo--mission { margin-top: 6px; }
  .about-photo--mission img { width: 112%; margin-left: -6%; padding: 0; }
  .about-copy { margin-top: 34px; font-size: 15px; }
  .about-heading--center { margin-bottom: 45px; text-align: left; }
  .vision-steps article { min-height: 390px; padding: 30px 26px; border-radius: 44px 0; }
  .vision-steps article::before { top: 0; right: -2px; font-size: 124px; color: rgba(18,173,82,.12); }
  .vision-icon { height: 135px; margin: 40px auto 18px; }
  .vision-icon--create { width: 184px; }
  .vision-icon--create::before, .vision-icon--create::after { top: 6px; width: 118px; height: 118px; }
  .vision-icon--store, .vision-icon--utilize { width: 135px; }
  .vision-steps h3 { font-size: 22px; }
  .about-value .about-heading { margin-bottom: 45px; }
  .value-grid article, .reason-grid article { min-height: auto; padding: 32px 25px; }
  .value-grid h3, .reason-grid h3 { margin-top: 28px; font-size: 20px; }
  .reason-grid { margin-top: 46px; }
}

/* ---------------------------------------------------------
   FINAL TYPE & HERO BALANCE
   下層ページ共通の見出し寸法と、読みやすい本文サイズに統一
---------------------------------------------------------- */
.about-hero {
  min-height: clamp(560px, 44vw, 720px);
  padding: 0;
  align-items: center;
}

.about-hero__inner {
  padding-top: clamp(62px, 5.5vw, 92px);
  padding-bottom: 0;
}

.about-hero h1 {
  font-size: var(--type-page-title);
  line-height: 1.16;
  font-weight: 700;
  letter-spacing: -.02em;
}

.about-hero__copy {
  max-width: 920px;
  margin-top: 18px;
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.9;
}

.about-copy,
.vision-steps p,
.value-grid p,
.reason-grid p {
  font-size: 16px;
  line-height: 1.95;
}

.about-intro__copy,
.about-heading > p:last-child {
  font-size: 17px;
  line-height: 2;
}

.vision-steps h3,
.value-grid h3,
.reason-grid h3 {
  line-height: 1.55;
}

@media (max-width: 991.98px) {
  .about-hero {
    min-height: 540px;
    padding: 0;
  }

  .about-hero__inner { padding-top: 0; }
}

@media (max-width: 767.98px) {
  .about-hero {
    min-height: 520px;
    padding: 0;
  }

  .about-hero h1 {
    font-size: var(--type-page-title-about, clamp(28px, 8.5vw, 34px));
    line-height: 1.4;
    letter-spacing: -.04em;
  }

  .about-hero__copy {
    margin-top: 16px;
    font-size: 16px;
    line-height: 1.8;
  }

  .about-copy,
  .vision-steps p,
  .value-grid p,
  .reason-grid p,
  .about-intro__copy,
  .about-heading > p:last-child {
    font-size: 16px;
    line-height: 1.85;
  }

  .vision-steps h3 {
    font-size: 21px;
  }

  .value-grid h3,
  .reason-grid h3 {
    font-size: 20px;
  }

  /* 長い見出しは語句のまとまりを保ち、端数だけ次行へ残さない */
  .about-intro h2,
  .about-heading h2,
  .about-mission h2,
  .about-why h2 {
    text-wrap: balance;
    word-break: normal;
    overflow-wrap: normal;
    line-break: strict;
  }

  .about-mission h2,
  .about-vision .about-heading h2 {
    font-size: clamp(24px, 7vw, 28px);
    line-height: 1.55;
    letter-spacing: -.035em;
  }

  .about-mission h2 em {
    white-space: nowrap;
  }
}