/* OPTSについて：新デザイン案（v2）のページ固有の分
   共通の部品は v2.css / v2-pages.css。ここには、このページだけの組み方（代表メッセージ・価値観・課題の例・名前の4ステップ・世話人）を置く。 */

.v2-about h3.v2-statement{font-size:clamp(22px,3vw,32px)}
.v2-about .v2-small{margin:0 0 8px}
.v2-about .v2-cols3 h4{font-size:18px;color:var(--navy);margin:0 0 10px}

/* ===== 1. 代表メッセージ：大きな丸い写真と、手紙のような本文 ===== */
.ab-msg{display:grid;grid-template-columns:240px minmax(0,1fr);gap:64px;align-items:start}
.ab-msg-face{position:sticky;top:120px;text-align:center}
.ab-msg-face img{width:220px;height:220px;border-radius:50%;object-fit:cover;margin:0 auto 18px}
.ab-msg-cap{font-size:13px;color:var(--sub);line-height:1.7;margin:0}
.ab-msg-cap b{display:block;font-size:20px;color:var(--navy);letter-spacing:.06em;margin-bottom:4px}
.ab-msg-body{max-width:40em}
.ab-msg-body p{font-size:16px;line-height:2.1;margin:0 0 1.4em}
.ab-sign{margin:36px 0 0;padding-top:20px;border-top:1px solid var(--line);max-width:40em;text-align:right;font-weight:700;font-size:17px;color:var(--navy)}
.ab-sign small{display:block;font-size:12px;font-weight:400;color:var(--sub)}
@media (max-width:860px){
  .ab-msg{grid-template-columns:minmax(0,1fr);gap:32px}
  .ab-msg-face{position:static;display:flex;align-items:center;gap:20px;text-align:left}
  .ab-msg-face img{width:120px;height:120px;margin:0;flex-shrink:0}
}

/* ===== 2. 価値観：左に名前の英語、右に和文の約束 ===== */
.ab-values{list-style:none;margin:36px 0 0;border-top:2px solid var(--navy)}
.ab-values li{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;padding:28px 0;border-bottom:1px solid var(--line)}
.ab-ven{font-size:clamp(24px,2.8vw,34px);font-weight:700;color:#7A8B98;line-height:1.2;letter-spacing:.01em;margin:0}
.ab-ven b{color:var(--navy)}
.ab-values h3{font-size:19px;margin:0 0 8px}
.ab-values p:not(.ab-ven){font-size:15px;line-height:1.9;margin:0}
@media (max-width:860px){.ab-values li{grid-template-columns:minmax(0,1fr);gap:10px;padding:22px 0}}

/* ===== 3. 設立の背景 ===== */
.ab-text p{font-size:16px;line-height:2.1;margin:0 0 1.4em;max-width:40em}
.ab-text p:last-child{margin-bottom:0}

/* ===== 4. 課題の例：紺の面の上で、罫線の行に ===== */
.ab-issues{list-style:none;border-top:1px solid rgba(255,255,255,.3);margin:0 0 20px}
.ab-issues li{display:grid;grid-template-columns:15em minmax(0,1fr);gap:32px;padding:22px 0;border-bottom:1px solid rgba(255,255,255,.22)}
.ab-issues .v2-tag{margin:4px 0 0}
.ab-issues h3{font-size:18px;margin:0 0 6px}
.ab-issues p{font-size:14px;line-height:1.85;margin:0;color:rgba(255,255,255,.85)}
@media (max-width:860px){.ab-issues li{grid-template-columns:minmax(0,1fr);gap:4px;padding:18px 0}}
.ab-ci-how{list-style:none;display:flex;flex-wrap:wrap;margin:24px 0 0;padding:0}
.ab-ci-how li{font-size:14px;font-weight:700;color:#fff;padding:0 18px;border-left:1px solid rgba(255,255,255,.4);line-height:1.4;margin:4px 0}
.ab-ci-how li:first-child{padding-left:0;border-left:0}

/* ===== 5. 対象と目指す姿：ブロックの間は余白と細い線で ===== */
.ab-block{margin-top:clamp(56px,7vw,96px);padding-top:clamp(40px,5vw,64px);border-top:1px solid var(--line)}
.ab-after{list-style:none;counter-reset:g;border-top:1px solid var(--line);margin:0}
.ab-after li{counter-increment:g;display:grid;grid-template-columns:2.4em minmax(0,1fr);padding:20px 0;border-bottom:1px solid var(--line)}
.ab-after li::before{content:counter(g);grid-row:1/3;font-size:14px;color:var(--green);font-weight:700;padding-top:.3em}
.ab-after h3{font-size:clamp(16px,1.9vw,19px);line-height:1.6;margin:0 0 6px}
.ab-after p{font-size:14px;color:var(--sub);line-height:1.85;margin:0}

/* ===== 6. 活動内容：縦の罫線で4つ並び ===== */
.v2-cols3.ab-cols4{grid-template-columns:repeat(4,1fr);margin-top:36px}
@media (max-width:860px){.v2-cols3.ab-cols4{grid-template-columns:minmax(0,1fr)}}

/* ===== 7. 名前の4ステップ：線でつないだ流れ＋大きな英単語 ===== */
.ab-flow{margin-top:40px}
.ab-flow .ab-en{font-size:clamp(28px,3.2vw,38px);font-weight:700;line-height:1.1;color:#7A8B98;margin:0 0 10px;letter-spacing:.01em}
.ab-flow .ab-en b{color:var(--navy)}
.ab-flow h3{font-size:17px}
.ab-flow p:not(.ab-en){color:var(--ink)}
.ab-axes{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.ab-axes>div{border-top:3px solid var(--navy);padding-top:14px}
.ab-axes>div:last-child{border-top-color:var(--green)}
.ab-axes .ab-a1{grid-column:1/3}
.ab-axes b{display:block;font-size:15px;color:var(--navy);line-height:1.6}
.ab-axes span{display:block;font-size:13px;color:var(--sub);line-height:1.8;margin-top:4px}
@media (max-width:860px){.ab-axes{grid-template-columns:minmax(0,1fr);gap:20px}.ab-axes .ab-a1{grid-column:auto}}

/* ===== 8. 世話人 ===== */
.ab-board .v2-person{scroll-margin-top:90px}
.ab-board .v2-person h3.v2-name{font-size:20px}
.ab-board .v2-person p.ab-q{font-size:13px;color:var(--sub);line-height:1.8;margin:12px 0 0;padding-left:12px;border-left:2px solid var(--line)}