/* ===== 下層：担当（about.html）・支援の記録（cases.html）共用。style.css は触らない。色・書体は style.css のトークンだけ ===== */

/* --- 下層の1画面目（service.html の sub-service.css と同じ型） --- */
.sub-hero{padding:12px 0 64px;border-bottom:1px solid var(--line);overflow:hidden}
.crumb{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--ink2);min-height:32px;flex-wrap:wrap}
.crumb a{color:var(--navy);font-weight:700;min-height:32px;display:inline-flex;align-items:center}
.crumb i{width:5px;height:5px;border-right:1.5px solid var(--ink2);border-top:1.5px solid var(--ink2);transform:rotate(45deg);display:inline-block}
.sub-hero .grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px 56px;align-items:center;margin-top:8px}
.sub-hero.wide .grid{grid-template-columns:minmax(0,6fr) minmax(0,6fr)}
.sub-hero .shead{margin-bottom:0}
.sub-hero .shead h1{font-size:clamp(24px,2.4vw,34px);font-weight:900;margin-top:14px;line-height:1.4;letter-spacing:.08rem}
.sub-hero .shead .lead{margin-top:14px}
.sub-hero .acts{margin-top:22px}
.sub-hero .acts .btn{width:100%;max-width:420px}
.sub-hero .fig{position:relative;margin:12px 0 0}
.sub-hero .fig .ph{overflow:hidden;background:var(--paper2)}
.sub-hero .fig .ph img{width:100%}
.sub-hero .fig .sq{position:absolute;width:64px;height:64px;background:var(--navy);right:-20px;top:-20px;z-index:2}
.sub-hero .fig .sq.b{width:40px;height:40px;right:auto;left:-14px;top:auto;bottom:-14px}
.brsp{display:none}
/* 裏付けの帯（経歴の年号を1行で） */
.years{display:flex;gap:0;margin-top:18px;max-width:520px;border-top:2px solid var(--navy);border-bottom:2px solid var(--navy);padding:8px 0}
.years span{flex:1;font-size:12px;font-weight:700;color:var(--ink);line-height:1.5;padding:0 10px;border-left:1px solid var(--line)}
.years span:first-child{border-left:0;padding-left:0}
.sub-hero .shead .years .en{display:block;font-size:14px;line-height:1.3;letter-spacing:.02em;color:var(--navy)}
/* 裏付けの一文（cases） */
.now1{margin-top:18px;max-width:520px;border-top:2px solid var(--navy);border-bottom:2px solid var(--navy);padding:10px 0;font-size:14px;font-weight:700;color:var(--ink);line-height:1.7}

/* --- about ブロック1：代表（トップの .team をそのまま使う。正方形を写真の角に半分かける） --- */
.rep .team .photo{position:relative;width:240px}
.rep .team .photo::after{content:"";position:absolute;width:48px;height:48px;background:var(--navy);right:-16px;bottom:-16px}
.rep .team .photo img{width:240px;height:240px}

/* --- about ブロック2：体制（3つの役を横並びの帯で。縦線つき） --- */
.org{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px;border-top:1px solid var(--line);margin-top:8px}
.org div{padding:28px 0 0;position:relative}
.org div::before{content:"";position:absolute;left:0;top:-1px;width:40px;height:3px;background:var(--navy)}
.org .en{font-size:12px;color:var(--navy);letter-spacing:.12em}
.org h3{font-size:clamp(17px,1.6vw,20px);font-weight:900;margin-top:4px;line-height:1.5}
.org p{font-size:15px;color:var(--ink2);margin-top:10px;line-height:1.8}
.org .sub{font-size:13px;color:var(--ink2);margin-top:8px;border-top:1px dashed var(--line);padding-top:8px}
.org-foot{margin-top:40px;font-size:14px;color:var(--ink2);border-top:1px solid var(--line);padding-top:18px;max-width:none}

/* --- about ブロック3：この仕事をする理由（写真と文の2列。行間広め） --- */
.why{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px 72px;align-items:start}
.why .ph{overflow:hidden;position:sticky;top:120px}
.why .ph img{width:100%}
.why h3{font-size:clamp(20px,2vw,26px);font-weight:900;line-height:1.5}
.why .body{margin-top:28px}
.why .body p{font-size:16px;line-height:2.2;color:var(--ink);max-width:none}
.why .body p+p{margin-top:18px}
.why .body p.kp2{font-weight:700}
.why .sign{margin-top:36px;display:flex;align-items:center;gap:16px;font-size:14px;color:var(--ink2)}
.why .sign::before{content:"";width:40px;height:2px;background:var(--navy)}
.why .sign b{font-size:18px;font-weight:900;color:var(--ink)}

/* --- about ブロック4：運営会社 --- */
.co-tbl{width:100%;max-width:760px;border-collapse:collapse;font-size:15px;border-top:1px solid var(--line)}
.co-tbl th,.co-tbl td{padding:16px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;line-height:1.7}
.co-tbl th{width:140px;font-weight:700;color:var(--navy);padding-left:16px;position:relative}
.co-tbl th::before{content:"";position:absolute;left:0;top:24px;width:6px;height:6px;background:var(--navy)}
.co-tbl td{color:var(--ink)}
.co-foot{margin-top:24px;font-size:14px;color:var(--ink2)}
.co-foot a{color:var(--navy);font-weight:700;text-decoration:underline}

/* --- cases ブロック1：相談への導線だけ（空のカードを並べない） --- */
.prep{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px 64px;align-items:center;padding:48px 56px;background:var(--paper2);border-left:4px solid var(--navy)}
.prep p{font-size:clamp(16px,1.4vw,19px);font-weight:700;line-height:2;color:var(--ink);max-width:none}
.prep .acts .btn{width:100%}
.prep .acts .btn-note{text-align:center}
.prep-mark{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:700;color:var(--navy);letter-spacing:.06em;margin-bottom:16px}
.prep-mark i{width:10px;height:10px;background:var(--navy);display:inline-block;animation:blink 1.6s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}

@media (max-width:991px){
  .sub-hero .grid,.sub-hero.wide .grid{grid-template-columns:1fr}
  .sub-hero .fig{order:2}
  .org{grid-template-columns:1fr;gap:0}
  .org div{padding:24px 0;border-bottom:1px solid var(--line)}
  .org div::before{display:none}
  .why{grid-template-columns:1fr;gap:28px}
  .why .ph{position:static;max-width:420px}
  .prep{grid-template-columns:1fr;padding:32px 24px}
}
@media (max-width:767px){
  .sub-hero{padding:8px 0 48px}
  .sub-hero .shead .en{font-size:36px}
  .sub-hero .acts .btn{max-width:none}
  .sub-hero .fig .sq{width:40px;height:40px;right:-8px;top:-8px}
  .sub-hero .fig .sq.b{display:none}
  .brsp{display:inline}
  .years{flex-wrap:wrap;gap:6px 0;padding:6px 0;margin-top:14px}
  .years span{flex:1 1 50%;border-left:0;padding:0;font-size:11px;line-height:1.4}
  .sub-hero .shead .years .en{font-size:12px}
  .sub-hero .shead h1{font-size:22px;letter-spacing:.02rem}
  .rep .team .photo{width:180px}
  .rep .team .photo img{width:180px;height:180px}
  .why .body p{font-size:15px;line-height:2}
  .co-tbl th{width:96px}
  .prep{padding:24px 18px}
}