/* ABOUT専用。TOPの色・Impact見出し・DIN数字・共通パーツを引き継ぐ。 */
.about-page .gnav a[aria-current="page"]{border-bottom-color:currentColor}

/* 欧文と和文を同じ見出しにまとめる。 */
.ap-section-title .disp-svg{height:clamp(40px,4.2vw,60px);max-width:100%}
.ap-section-title > span{display:block;margin-top:20px;font-size:13px;font-weight:700;letter-spacing:.1em;line-height:1.8}
.ap-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(64px,8vw,120px)}
.ap-message{font-size:clamp(24px,2.15vw,30px);letter-spacing:.06em;line-height:1.9;font-weight:700}
.ap-philosophy .ap-split{--split-gap:clamp(64px,8vw,120px);gap:var(--split-gap)}
/* 各セクションの小見出し（考え方・大切にしていること・私たちについて・事業概要）の下の短い線 */
.ap-section-title > span::after{content:"";display:block;width:40px;height:1px;margin-top:28px;background:var(--gray)}
.ap-philosophy .ap-message{margin-top:32px}
.ap-side-note{margin-top:42px;padding:2px 0 2px 22px;border-left:1px solid var(--ink);font:400 12px/2 var(--en);letter-spacing:.12em}
.ap-prose{font-size:14px;color:var(--gray);line-height:2.25}
.ap-prose p + p{margin-top:26px}
.ap-philosophy-copy{position:relative;padding-top:6px;font-size:16px}
/* 見出しの列と本文の列の間（列の間隔のちょうど中央）に縦線を引く */
.ap-philosophy-copy::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--split-gap) / -2);width:1px;background:var(--line)}
/* 指定の改行は、最も長い行（16pxで622px）が1行に収まる幅（1360px以上）でだけ使う */
@media (max-width:1359px){
  .ap-philosophy-copy br{display:none}
}
/* 大切にしていること：左に見出しと導入文、縦線をはさんで右に3項目（番号／見出し｜説明｜画像） */
.ap-approach-grid{--split-gap:clamp(64px,8vw,120px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:var(--split-gap)}
.ap-section-intro > p{margin-top:32px;font-size:15px;color:var(--gray);line-height:2.15}
.ap-principles{position:relative;list-style:none}
.ap-principles::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--split-gap) / -2);width:1px;background:var(--line)}
.ap-principle{--num-h:44px;--num-col:80px;--num-gap:28px;--slash:56px;display:grid;grid-template-columns:var(--num-col) minmax(0,1.25fr) minmax(0,1.6fr) minmax(0,1.15fr);grid-template-areas:"num head body media";gap:0 var(--num-gap);align-items:center;padding:28px 0}
.ap-principle + .ap-principle{border-top:1px solid var(--line)}
.ap-principle:first-child{padding-top:0}
.ap-principle:last-child{padding-bottom:0}
.ap-principle-num{grid-area:num;position:relative;padding-top:6px}
.ap-principle-num .num-svg{height:var(--num-h)}
/* 斜め線は「数字の右端〜見出しの左端」の中央、数字の縦中央に置く（2桁の数字の幅＝高さ×1.21、字面の中心＝上から高さ×0.45） */
.ap-principle-num::after{content:"";position:absolute;left:calc((var(--num-h) * 1.21 + var(--num-col) + var(--num-gap)) / 2);top:calc(6px + var(--num-h) * .45);width:var(--slash);height:1px;background:var(--ink);transform:translate(-50%,-50%) rotate(-48deg)}
.ap-principle-heading{grid-area:head}
.ap-principle h3{font-size:19px;font-weight:700;letter-spacing:.03em;line-height:1.7}
.ap-principle > p{grid-area:body;font-size:14px;line-height:2;color:var(--gray)}
.ap-principle-media{grid-area:media;aspect-ratio:3/2;overflow:hidden;background:var(--line)}
.ap-principle-media img{display:block;width:100%;height:100%;object-fit:cover}
/* 左右に並べるのは、見出しが1行に収まる1440px以上。それより狭い画面では見出しと導入文を一覧の上に置く */
@media (max-width:1439px){
  .ap-approach-grid{grid-template-columns:1fr;gap:56px}
  .ap-principles::before{display:none}
}
@media (max-width:1023px){
  .ap-principle{--num-h:40px;--num-col:76px;--num-gap:28px;--slash:52px;grid-template-columns:var(--num-col) minmax(0,1fr) minmax(0,220px);grid-template-areas:"num head media" ". body media";row-gap:10px}
  .ap-principle > p{align-self:start}
}
@media (max-width:767px){
  .ap-section-intro > p{margin-top:24px;font-size:14px}
  .ap-principle{--num-h:38px;--num-col:72px;--num-gap:24px;--slash:52px;grid-template-columns:var(--num-col) minmax(0,1fr);grid-template-areas:"num head" "body body" "media media";row-gap:18px;padding:32px 0}
  .ap-principle h3{font-size:19px;letter-spacing:.01em}
  .ap-principle > p{line-height:2.1}
}

/* 制作の背景：人の手を感じる写真と、経験・仕事の考え方。 */
.ap-profile-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(64px,8vw,120px);align-items:stretch}
/* 写真の上下は、PROFILEの見出しの上端とメンバー表の最後の線にそろえる */
.ap-profile-photo{position:relative;height:100%}
.ap-profile-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
/* 写真を横に並べると縦長に切り取られ、左右の人が切れるため、1439px以下では文章の上に正方形で置く */
@media (max-width:1439px){
  .ap-profile-grid{grid-template-columns:1fr;gap:44px}
  .ap-profile-photo{height:auto;aspect-ratio:1/1;max-width:720px}
}
.ap-profile .ap-message{margin-top:32px}
.ap-profile .ap-prose{margin-top:30px}
/* メンバーの役割と専門分野（名前は載せない） */
.ap-members{margin-top:34px;border-top:1px solid var(--line)}
.ap-members > div{display:grid;grid-template-columns:116px minmax(0,1fr);gap:24px;padding:18px 0;border-bottom:1px solid var(--line);font-size:14px;line-height:1.9}
.ap-members dt{font-weight:700}
.ap-members dd{color:var(--gray)}

/* 事業概要と関連ページへの導線 */
.ap-details{border-top:1px solid var(--ink)}
.ap-details > div{display:grid;grid-template-columns:104px minmax(0,1fr);gap:30px;padding:24px 0;border-bottom:1px solid var(--line);font-size:14px;line-height:2}
.ap-details dt{font-size:12px;font-weight:700}
.ap-details dd{color:var(--gray)}
.ap-details li + li{margin-top:2px}
.ap-related{display:grid;grid-template-columns:1fr 1fr;gap:64px;margin-top:100px}
.ap-related-link{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:34px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.ap-related-heading{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.ap-related-heading .disp-svg{height:36px}
.ap-related-heading > span{font-size:13px;font-weight:700;letter-spacing:.04em}

@media (max-width:1100px) and (min-width:1024px){
  .about-page .header{gap:24px}
  .about-page .gnav{gap:20px}
}
@media (max-width:1023px){
  .ap-split{grid-template-columns:1fr;gap:52px}
  .ap-philosophy .ap-split{grid-template-columns:1fr 1fr;--split-gap:44px}
  .ap-message{font-size:24px;letter-spacing:.03em}
  .ap-section-title .disp-svg{height:42px}
  .ap-philosophy .ap-section-title .disp-svg{height:36px}
  .ap-related{gap:40px;margin-top:72px}
  .ap-related-heading{gap:16px}
  .ap-related-heading .disp-svg{height:32px}
}
@media (max-width:767px){
  .ap-section-title .disp-svg,.ap-philosophy .ap-section-title .disp-svg{height:auto;width:auto;max-height:42px;max-width:100%}
  .ap-section-title > span{margin-top:16px;font-size:12px}
  .ap-split,.ap-philosophy .ap-split{grid-template-columns:1fr;gap:38px}
  .ap-message{font-size:clamp(21px,5.7vw,27px);letter-spacing:.04em;line-height:1.9}
  .ap-section-title > span::after{margin-top:20px}
  .ap-philosophy .ap-message{margin-top:24px}
  .ap-side-note{display:none}
  .ap-philosophy-copy{padding-top:0;font-size:15px}
  .ap-philosophy-copy::before{display:none}
  .ap-prose{line-height:2.2}
  .ap-prose p + p{margin-top:22px}
  .ap-profile-grid{gap:36px}
  .ap-profile .ap-message{margin-top:24px}
  .ap-profile .ap-prose{margin-top:24px}
  .ap-members{margin-top:28px}
  .ap-members > div{grid-template-columns:112px minmax(0,1fr);gap:14px;padding:16px 0}
  .ap-details > div{grid-template-columns:74px minmax(0,1fr);gap:20px;padding:22px 0}
  .ap-related{grid-template-columns:1fr;gap:0;margin-top:56px}
  .ap-related-link{padding:30px 0}
  .ap-related-link + .ap-related-link{border-top:0}
  .ap-related-heading{gap:22px}
  .ap-related-heading .disp-svg{height:30px}
  .ap-related-heading > span{font-size:12px}
}