.page-about{
  --teal:#015A6F;
  --teal-dark:#05a8a8;
  --text:#35545b;
  --text-soft:#6f8589;
  --bg:#ffffff;
  --bg-soft:#eefafa;
  --line:#cfe6e7;
  --serif:"Noto Serif JP",serif;
  --sans:"Noto Sans JP",sans-serif;
}

.page-about{
  scroll-behavior:smooth;
  font-family:var(--sans);
  font-weight:400;
  color:var(--text);
  background:var(--bg);
  line-height:2;
  letter-spacing:.04em;
  -webkit-font-smoothing:antialiased;
}

.page-about .wrap{
  max-width:680px;
  margin:0 auto;
  padding:0 24px;
}

.page-about section{
  padding:96px 0;
}


/* ---------- eyebrow ---------- */

.page-about .eyebrow{
  font-family:var(--sans);
  font-size:12px;
  font-weight:500;
  letter-spacing:.28em;
  color:var(--teal-dark);
  margin-bottom:28px;
  display:block;
}


/* ---------- hero ---------- */

.page-about .hero{
  background:var(--bg-soft);
  padding:120px 0 104px;
  border-bottom:1px solid var(--line);
}

.page-about .hero h1{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(32px,7.5vw,50px);
  line-height:1.45;
  letter-spacing:.02em;
  margin-bottom:40px;
}

.page-about .hero h1 .num{
  color:var(--teal-dark);
  font-size:1.45em;
  line-height:1;
  letter-spacing:0;
}

.page-about .hero .voice{
  font-family:var(--serif);
  font-size:17px;
  color:var(--text-soft);
  margin-bottom:28px;
}

.page-about .hero .lead{
  font-size:16px;
  line-height:2.2;
  margin-bottom:48px;
}

.page-about .hero .lead strong{
  font-weight:500;
  color:var(--teal-dark);
}


/* ---------- buttons ---------- */

.page-about .btns{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}

.page-about .btn_about{
  display:inline-block;
  padding:16px 34px;
  border-radius:2px;
  font-size:15px;
  font-weight:500;
  letter-spacing:.08em;
  text-decoration:none;
  transition:opacity .25s,background .25s;
}

.page-about .btn-primary{
  background:var(--teal-dark);
  color:#fff;
}

.page-about .btn-primary:hover{
  opacity:.86;
}

.page-about .btn-ghost{
  border:1px solid var(--teal-dark);
  color:var(--teal-dark);
}

.page-about .btn-ghost:hover{
  background:var(--teal-dark);
  color:#fff;
}


/* ---------- headings ---------- */

.page-about h2{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(22px,4.4vw,30px);
  line-height:1.7;
  margin-bottom:48px;
}

.page-about h3{
  font-family:var(--serif);
  font-weight:500;
  font-size:18px;
  line-height:1.8;
  margin:64px 0 24px;
  padding-left:18px;
  border-left:3px solid var(--teal);
}

.page-about h3:first-of-type{
  margin-top:0;
}

.page-about p{
  margin-bottom:26px;
  font-size:15px;
}

.page-about p:last-child{
  margin-bottom:0;
}

.page-about strong{
  font-weight:500;
  color:var(--teal-dark);
}


/* ---------- pull quote ---------- */

.page-about .pull{
  font-family:var(--serif);
  font-size:clamp(18px,3.6vw,22px);
  font-weight:500;
  line-height:1.95;
  color:var(--teal-dark);
  text-align:center;
  padding:44px 20px;
  margin:56px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}


/* ---------- purpose list ---------- */

.page-about .purpose{
  background:var(--bg-soft);
}

.page-about .plist{
  list-style:none;
  margin:40px 0;
}

.page-about .plist li{
  position:relative;
  padding-left:30px;
  margin-bottom:18px;
  font-size:15px;
}

.page-about .plist li::before{
  content:"";
  position:absolute;
  left:2px;
  top:.95em;
  width:12px;
  height:1px;
  background:var(--teal);
}


/* ---------- audience ---------- */

.page-about .aud{
  margin:44px 0 0;
}

.page-about .aud-block{
  margin-bottom:44px;
}

.page-about .aud-label{
  font-family:var(--serif);
  font-size:17px;
  font-weight:600;
  margin-bottom:20px;
  padding-bottom:12px;
  border-bottom:1px solid var(--line);
}

.page-about .aud-block ul{
  list-style:none;
}

.page-about .aud-block li{
  padding-left:26px;
  position:relative;
  margin-bottom:14px;
  font-size:15px;
  line-height:1.9;
}

.page-about .aud-yes li::before{
  content:"○";
  position:absolute;
  left:0;
  color:var(--teal-dark);
  font-size:13px;
}

.page-about .aud-no li::before{
  content:"×";
  position:absolute;
  left:0;
  color:var(--text-soft);
  font-size:13px;
}

.page-about .aud-no li{
  color:var(--text-soft);
}


/* ---------- name reveal (signature) ---------- */

.page-about .name{
  background:var(--teal-dark);
  color:var(--bg-soft);
  text-align:center;
  padding:110px 0;
}

.page-about .name .eyebrow{
  color:#8fe2e0;
}

.page-about .name h2{
  color:var(--bg-soft);
  margin-bottom:56px;
}

.page-about .namemark{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(54px,17vw,102px);
  line-height:1;
  letter-spacing:.06em;
  margin-bottom:14px;
}

.page-about .namemark .ai{
  color:#8fe2e0;
}

.page-about .namereading{
  font-family:var(--serif);
  font-size:16px;
  letter-spacing:1.2em;
  text-indent:1.2em;
  color:#8fe2e0;
  margin-bottom:56px;
}

.page-about .name p{
  color:#d9eeee;
  text-align:left;
  max-width:520px;
  margin-left:auto;
  margin-right:auto;
}

.page-about .name p strong{
  color:#8fe2e0;
}


/* ---------- profile ---------- */

.page-about .profile{
  border-top:1px solid var(--line);
}

.page-about .pcard{
  display:grid;
  grid-template-columns:200px 1fr;
  gap:44px;
  align-items:start;
}

.page-about .pname{
  font-family:var(--serif);
  font-size:24px;
  font-weight:600;
  margin-bottom:8px;
}

.page-about .pname .kana{
  font-size:13px;
  font-weight:400;
  color:var(--text-soft);
  margin-left:12px;
  letter-spacing:.1em;
}

.page-about .ptitle{
  font-size:14px;
  color:var(--text-soft);
  line-height:2;
  margin-bottom:28px;
}

.page-about .pbody{
  font-size:14px;
  line-height:2.1;
}

.page-about .pbody p{
  margin-bottom:20px;
  font-size:14px;
}


/* ---------- cta ---------- */

.page-about .cta{
  background:var(--bg-soft);
  text-align:center;
}

.page-about .cta .opening{
  font-family:var(--serif);
  font-size:18px;
  font-weight:600;
  margin-bottom:36px;
}

.page-about .cta p{
  font-size:15px;
}

.page-about .cta .invite{
  font-family:var(--serif);
  font-size:clamp(26px,5.6vw,35px);
  font-weight:600;
  color:var(--teal-dark);
  margin:44px 0 52px;
}

.page-about .cta .seminar{
  border:1px solid var(--line);
  background:var(--bg);
  padding:32px 26px;
  margin-bottom:40px;
  text-align:left;
}

.page-about .cta .seminar .stitle{
  font-family:var(--serif);
  font-weight:600;
  font-size:16px;
  margin-bottom:14px;
  line-height:1.8;
}

.page-about .cta .seminar p{
  font-size:14px;
  color:var(--text-soft);
  margin:0;
}

.page-about .cta .btns{
  justify-content:center;
}


/* ---------- photo frames ---------- */

.page-about .ph{
  background:var(--bg-soft);
  border:1px solid var(--line);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:var(--text-soft);
  font-size:12px;
  line-height:1.9;
  letter-spacing:.08em;
  overflow:hidden;
}

.page-about .ph img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  display:block!important;
}

.page-about .ph .ph-hint{
  font-family:var(--serif);
  font-size:14px;
  color:var(--text);
  margin-bottom:6px;
}

.page-about .ph .ph-size{
  font-size:11px;
  letter-spacing:.12em;
  opacity:.7;
}

.page-about .ph-wide{
  aspect-ratio:16/9;
}

.page-about .ph-lands{
  aspect-ratio:3/2;
}

.page-about .ph-sq{
  aspect-ratio:1/1;
}

.page-about .ph-tall{
  aspect-ratio:3/4;
}

.page-about .figure{
  margin:56px 0;
}

.page-about .figure .cap{
  font-size:12px;
  color:var(--text-soft);
  letter-spacing:.06em;
  line-height:1.8;
  margin-top:12px;
  padding-left:14px;
  border-left:2px solid var(--line);
}

.page-about .figure-narrow{
  max-width:420px;
  margin-left:auto;
  margin-right:auto;
}


/* ---------- full-bleed band ---------- */

.page-about .band{
  width:100%;
  margin:0;
  padding:0;
}

.page-about .band .ph{
  border-left:0;
  border-right:0;
  aspect-ratio:21/9;
}


/* ---------- two-up ---------- */

.page-about .duo{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}


/* ---------- reveal ---------- */

.page-about .rv{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .8s ease,transform .8s ease;
}

.page-about .rv.in{
  opacity:1;
  transform:none;
}


/* ---------- responsive ---------- */

@media(max-width:640px){

  .page-about section{
    padding:72px 0;
  }

  .page-about .hero{
    padding:88px 0 72px;
  }

  .page-about .name{
    padding:88px 0;
  }

  .page-about .pcard{
    grid-template-columns:1fr;
    gap:28px;
  }

  .page-about .btn{
    width:100%;
    text-align:center;
  }

  .page-about .band .ph{
    aspect-ratio:4/3;
  }

  .page-about .figure{
    margin:40px 0;
  }

  .page-about .duo{
    grid-template-columns:1fr;
  }

}

@media (prefers-reduced-motion:reduce){

  .page-about .rv{
    opacity:1;
    transform:none;
    transition:none;
  }

  .page-about{
    scroll-behavior:auto;
  }

}

.page-about a:focus-visible,
.page-about .btn:focus-visible{
  outline:2px solid var(--teal-dark);
  outline-offset:3px;
}