/* ═══ COMPANY (Taian Bridge company intro) ─ Figma 1Zd6qSv9DebJX4pq8troe8 / 144:22 ═══ */

.page-company{position:relative;width:100%;background:#f8f9fb;color:#1a1a1a;overflow:hidden;--side-pad:clamp(16px, calc((100vw - 1040px) / 2), 440px)}

/* ── 1. HERO 400px — building image background + centered title/sub ── */
.co-hero{position:relative;width:100%;height:300px;overflow:hidden;margin-top:109px;background:#f8f9fb}
.co-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center center;background-repeat:no-repeat}
.co-hero-overlay{position:absolute;inset:0;background:rgba(255,255,255,.15);backdrop-filter:blur(2.5px);-webkit-backdrop-filter:blur(2.5px)}
.co-hero-content{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;padding:0 20px}
.co-hero-title{margin:0;font-size:48px;font-weight:800;line-height:56px;letter-spacing:1px;text-transform:uppercase;color:#1A1A1A}
.co-hero-sub{margin:0;font-size:25px;font-weight:400;line-height:1.3;color:#1A1A1A}

/* ── 3. VIDEO box (rectangle) ── */
.co-video{position:relative;width:100%;background:#f8f9fb;padding:0 var(--side-pad) 0;box-sizing:border-box}
.co-video-el{display:block;width:100%;max-width:1040px;height:560px;margin:0 auto;object-fit:cover;background:#0a0e14}

/* ── 4. JAPANESE GREETING (centered) ── */
.co-greeting{position:relative;width:100%;background:#f8f9fb;padding:60px var(--side-pad) 220px;box-sizing:border-box}
.co-greeting-inner{max-width:1040px;margin:0 auto;display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.co-greeting-logo{display:block}
.co-greeting-logo{width:160px;height:auto;object-fit:contain;flex-shrink:0;align-self:flex-end}
.co-greeting-text{flex:1;text-align:left;font-size:17px;font-weight:600;line-height:28px;letter-spacing:-0.2px;color:#1A1A1A}
.co-greeting-text p{margin:0}
.co-greeting-text p+p{margin-top:24px}

/* ── 2. BRIDGE GRAPHIC h=836 (87px gap + bridge bg 749 + JP text centered) ── */
.co-bridge{position:relative;width:100%;height:400px;background:#FAFAFA;overflow:hidden;display:flex;align-items:center;justify-content:center}
.co-bridge-art{position:absolute;inset:0;display:block;pointer-events:none;z-index:1}
.co-bridge-bg{position:absolute;inset:0;background-size:cover;background-position:center center;background-repeat:no-repeat}
.co-bridge-gradient{display:none}
.co-bridge-text{position:relative;z-index:2;width:100%;text-align:center;padding:0}
.co-bridge-jp{font-size:48px;font-weight:700;line-height:67px;letter-spacing:0;color:#1A1A1A;margin:0}
.co-bridge-jp-sub{font-size:32px;font-weight:500;line-height:67px;color:#1A1A1A;margin:0}

/* ── 3. EXECUTIVES — photo 360×420, text bottom-aligned ── */
.co-execs{position:relative;height:500px;background:#f8f9fb;max-width:1920px;margin:0 auto}
.co-execs-photo{position:absolute;left:var(--side-pad);top:0;width:360px;height:420px;border-radius:20px;background-size:cover;background-position:center}
/* 旧: left:860px;width:620px(1920px固定)。左右を --side-pad 基準にして流動化。
   1920px では left=860 / 幅=620 と同じ値になるので PC の見た目は変わらない。 */
.co-execs-text{position:absolute;left:calc(var(--side-pad) + 420px);right:var(--side-pad);bottom:80px;width:auto;max-width:620px;font-size:15.5px;font-weight:500;line-height:26px;letter-spacing:-0.3px;color:#1A1A1A}
.co-execs-text p{margin:0}

/* ── 4. CRITERIA — apricot full-width background, photo 360×420, text bottom-aligned ── */
.co-criteria{position:relative;height:540px;background:#F4F4F4;width:100%}
.co-criteria-text{position:absolute;left:calc(max(0px,(100vw - 1920px)/2) + var(--side-pad));bottom:60px;width:480px}
.co-criteria-title{font-size:20px;font-weight:700;line-height:28px;letter-spacing:-0.4px;color:#1A1A1A;margin:0 0 32px 0}
.co-criteria-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px}
.co-criteria-list li{position:relative;padding-left:42px;min-height:26px;display:flex;align-items:center;font-size:16px;font-weight:500;line-height:26px;letter-spacing:-0.4px;color:#1A1A1A}
.co-criteria-list .co-num{position:absolute;left:0;top:50%;transform:translateY(-50%);width:26px;height:26px;background:#438CAF;border-radius:5px;color:#FAFAFA;font-size:16px;font-weight:500;display:flex;align-items:center;justify-content:center;line-height:1;flex-shrink:0}
/* 旧: left:calc(... + 1120px)(1920px固定)。1480px 未満の画面で右にはみ出していた。
   右端を --side-pad に合わせる形に直す。1920px では right=440px で従来と同じ位置。 */
.co-team-photo{position:absolute;right:var(--side-pad);top:60px;width:360px;height:420px;border-radius:20px;background-size:cover;background-position:center}

/* ── 5. HISTORY — photo 360×420, text bottom-aligned ── */
.co-history{position:relative;height:600px;background:#f8f9fb;max-width:1920px;margin:0 auto}
.co-history-photo{position:absolute;left:var(--side-pad);top:80px;width:360px;height:420px;border-radius:20px;background-size:cover;background-position:center}
.co-history-text{position:absolute;left:calc(var(--side-pad) + 420px);right:var(--side-pad);bottom:100px;width:auto;max-width:620px}
.co-history-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px}
.co-history-list li{position:relative;padding-left:58px;height:26px;display:flex;align-items:center;font-size:16px;letter-spacing:-0.4px;color:#1A1A1A;line-height:26px}
.co-history-list .co-year{position:absolute;left:0;top:0;color:#438CAF;font-weight:600;line-height:26px;font-size:16px}
.co-history-list .co-year-text{font-weight:500}

/* ── 6. END h=900 (bg + logo/text/red-line/text overlay) ── */
.co-end{position:relative;height:600px;overflow:hidden;background:#1a2128}
.co-end-bg{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat}
.co-end-content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;height:100%;padding:40px 20px}
.co-end-logo{width:140px;height:53px;object-fit:contain;margin-bottom:32px}
.co-end-text1{margin:0 0 28px 0;font-size:20px;font-weight:400;line-height:30px;color:#FAFAFA;letter-spacing:-1px;text-shadow:0 2px 8px rgba(0,0,0,.45)}
.co-end-line{width:36px;height:3px;background:#C00000;margin:0 0 28px 0}
.co-end-text2{margin:0;font-size:28px;font-weight:700;line-height:38px;color:#FAFAFA;letter-spacing:-1px;text-shadow:0 2px 8px rgba(0,0,0,.5)}

/* ── RESPONSIVE ── */

/* 7つの審査基準 → 詳細ページへの案内リンク */
.co-criteria-link{display:inline-flex;align-items:center;gap:8px;margin-top:24px;padding-left:42px;
  font-size:14.5px;font-weight:600;letter-spacing:-0.3px;color:#438CAF;text-decoration:none;
  transition:color .15s ease}
.co-criteria-link:hover{color:#2E6E8E;text-decoration:underline}
.co-criteria-link i{width:7px;height:7px;border-right:2px solid currentColor;border-top:2px solid currentColor;
  transform:rotate(45deg);flex-shrink:0}
@media (max-width:1023.98px){
  .co-criteria-link{margin-top:18px;font-size:13.5px}
}