/* 2026-11-08 数字を漢字1字に（現・創・実・頼）。形は前の4枚のまま（本人「前と同じデザイン・構成に」）
   島クリエイト：会社のこと（company.html）。2026-11-05 構成を「A 数字の4枚＋C 二つの目（くらべる表）」に決めた。前の形と比べた案は work/archive/company-2026-11-05/
   読み込む順：base.css → parts.css → ページの CSS */
.ca-nums{ border-top:6px solid var(--ink); border-bottom:6px solid var(--ink); }
.ca-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.ca-n{ display:flex; flex-direction:column; gap:10px; padding:48px 32px 52px; }
.ca-n + .ca-n{ border-left:2px solid var(--ink); }
.ca-n--or{ background:var(--or); }
.ca-n__v{ display:flex; align-items:baseline; gap:6px; }
.ca-n__v b{ font-weight:800; font-size:clamp(88px,8.5vw,140px); line-height:1; }
.ca-n__l{ font-weight:800; font-size:15px; line-height:1.5; min-height:3em; }
.ca-n__v span{ font-weight:800; font-size:20px; }
.ca-n__t{ margin-top:16px; padding-top:12px; border-top:3px solid var(--ink); font-weight:800; font-size:18px; line-height:1.5; }
.ca-n__d{ font-size:15px; line-height:1.85; }
.ca-me{ padding:112px 0; }
.ca-me__in{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:64px; align-items:center; }
.ca-me__ph{ aspect-ratio:4/5; overflow:hidden; }
.ca-me__ph img{ width:100%; height:100%; object-fit:cover; object-position:30% 62%; }
.ca-me__body{ display:grid; gap:24px; max-width:36em; }
.ca-me__body .h2s{ font-size:clamp(28px,3.2vw,48px); }
.ca-me__sign{ font-weight:800; font-size:18px; }
.ca-pro{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:40px; }
.ca-pro > div{ display:grid; gap:16px; align-content:start; }
.ca-addr{ margin-top:16px; font-weight:800; font-size:clamp(20px,2vw,26px); line-height:1.5; }
@media (max-width:1023px){
  .ca-grid{ grid-template-columns:1fr 1fr; }
  .ca-n:nth-child(3){ border-left:0; }
  .ca-n:nth-child(n+3){ border-top:2px solid var(--ink); }
  .ca-me__in,.ca-pro{ grid-template-columns:1fr; }
  .ca-me__ph{ aspect-ratio:16/10; }
}
@media (max-width:767px){
  .ca-grid{ grid-template-columns:1fr; }
  .ca-n{ padding:32px var(--g) 36px; }
  .ca-n + .ca-n{ border-left:0; border-top:2px solid var(--ink); }
  .ca-me{ padding:80px 0; }
  .ca-me__in{ gap:36px; }
}
.ca-lead,.cb-lead,.cc-lead{ margin-top:12px; max-width:30em; font-weight:700; font-size:clamp(17px,1.5vw,20px); line-height:1.8; word-break:auto-phrase; }
.ca-addr,.cc-role,.ca-me__sign,.cb-sign{ word-break:auto-phrase; }

/* 二つの目（くらべる表） */
.cc-two{ padding:112px 0; }
.cc-two .tbd{ margin-top:24px; }
@media (max-width:767px){
  .cc-two{ padding:80px 0; }
                }


/* 二つの目（2026-11-06 本人「見にくい」。左右2面で比べる形に）。スマホは場面ごとに縦に並べ、どちらの目かを文の上に出す */
.ey{ margin-top:44px; }
.ey-h,.ey-r{ display:grid; grid-template-columns:1fr 1fr; }
.ey-h p{ padding:18px 32px; font-weight:800; font-size:26px; line-height:1.4; }
.ey-h p:first-child{ background:var(--gray); }
.ey-h p:last-child{ background:var(--or); }
.ey-a,.ey-b{ padding:22px 32px 26px; border-top:1px solid var(--ink); word-break:auto-phrase; }
.ey-a{ background:var(--gray); font-size:21px; line-height:1.6; }
.ey-b{ background:var(--or); font-weight:800; font-size:25px; line-height:1.5; }
.ey small{ display:block; margin-bottom:6px; font-size:13px; font-weight:700; }

/* いただいた言葉（2026-11-06 本人「見せ方がダサい」→「ベタ塗りではなく、枠線で」。大きな一節は、いただいた文の中の言葉のまま） */
.vo{ background:var(--wh); padding:96px 0 112px; }
.vo__h{ padding-bottom:32px; }
.vo__g{ display:grid; grid-template-columns:1fr 1fr; gap:24px; padding:0 var(--g); }
.vo__c{ padding:44px 40px 48px; border:3px solid var(--ink); }
.vo__k{ font-weight:800; font-size:clamp(26px,2.5vw,36px); line-height:1.35; word-break:auto-phrase; }
.vo__q{ margin-top:20px; padding-top:18px; border-top:1px solid var(--ink); font-size:16px; line-height:1.95; }

@media (max-width:767px){
  .ey-h{ display:none; }
  .ey-r{ grid-template-columns:1fr; margin-top:14px; }
  .ey-a,.ey-b{ padding:14px 16px 16px; border-top:0; }
  .ey-a{ font-size:17px; }
  .ey-b{ font-size:20px; }
  .ey-a small,.ey-b small{ display:none; }
  .ey-a::before,.ey-b::before{ content:attr(data-l); display:block; margin-bottom:4px; font-size:13px; font-weight:700; }
  .vo{ padding:72px 0 80px; }
  .vo__h{ padding-bottom:24px; }
  .vo__g{ grid-template-columns:1fr; gap:16px; }
  .vo__c{ padding:28px 22px 30px; }
}

/* 作る人のメッセージ（2026-11-08）：段落の間は詰める（grid の gap と .txt + .txt の余白が重なるため） */
.ca-me__body .txt + .txt{ margin-top:-8px; }

/* 経験の箱（2026-11-08 本人「1字は分かりにくい・縦に長い。できるだけ正方形で」）：2字の言葉にして文字を小さく、余白を詰める */
.ca-n{ gap:8px; padding:52px 28px 56px; }
.ca-n__l{ min-height:0; font-size:14px; }
.ca-n__v b{ font-size:clamp(48px,4.6vw,76px); letter-spacing:.02em; }
.ca-n__t{ margin-top:14px; padding-top:10px; font-size:17px; word-break:auto-phrase; }
.ca-n__d{ font-size:14px; line-height:1.8; }
.ca-me__sign{ font-family:var(--en); font-weight:900; letter-spacing:.08em; }
@media (max-width:767px){
  .ca-n{ padding:28px var(--g) 30px; }
  .ca-n__v b{ font-size:44px; } /* 2026-11-09 本人「スマホはもう少し小さく」56→44px */
}

/* MESSAGE（2026-11-09 本人「写真もイラストもやめて、文字だけ」）：COMPANY と同じ巨大な英字＋左に見出し・右に言葉 */
.ca-me{ padding:96px 0 112px; overflow:hidden; }
.ca-me__w{ font-family:var(--en); font-weight:900; font-size:17vw; line-height:.74; letter-spacing:-.045em; color:var(--or); white-space:nowrap; margin:0 0 64px; padding:0 var(--g); margin-left:-.03em; }
.ca-me__in{ display:block; }
.ca-me__body{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:24px 40px; max-width:none; align-items:start; }
.ca-me__body .h2s{ font-size:clamp(28px,3vw,46px); line-height:1.35; word-break:auto-phrase; }
.ca-me__txt{ max-width:36em; }
.ca-me__txt .txt + .txt{ margin-top:1em; }
@media (max-width:1023px){
  .ca-me__body{ grid-template-columns:1fr; }
}
@media (max-width:767px){
  .ca-me{ padding:64px 0 80px; }
  .ca-me__w{ font-size:19vw; margin-bottom:36px; }
}
.ca-nw{ display:inline-block; }

/* MESSAGE の動き（js/company.js）：1字ずつ下から立ち上がる。行の下で切って、地面から生えるように */
.ca-me__w{ overflow:hidden; padding-bottom:.04em; }
.ca-me__wi{ display:inline-block; will-change:transform; }
.ca-me__w .lt{ display:inline-block; }
html.js .ca-me__w .lt{ transform:translateY(105%); }
html.js .ca-me__w.is-in .lt{ transform:none; transition:transform .9s cubic-bezier(0.19,1,0.22,1); transition-delay:calc(var(--i) * 70ms); }
@media (prefers-reduced-motion:reduce){
  html.js .ca-me__w .lt{ transform:none; transition:none; }
}

/* いただいた言葉：どなたの言葉か（2026-11-09 本人） */
.vo__by{ margin-top:16px; font-size:14px; font-weight:700; }
.vo__by::before{ content:"― "; }