@charset "utf-8";
/* =========================================================================
   company.css — 会社概要ページ（/company/）固有スタイル
   共通（ヘッダー/フッター/CTA赤帯/パンくず/色変数/タイポ/基準線）は common.css。
   セクション: phero / message(代表挨拶) / info(会社概要テーブル)
   ========================================================================= */

/* ============ 01 ページヒーロー（生成り） ============ */
.phero{ position:relative; background:var(--cream); color:#000; padding:80px 0 60px; border-bottom:2px solid #000; overflow:hidden }
.phero-inner{ position:relative; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); display:grid; grid-template-columns:1.5fr .9fr; gap:32px; align-items:end }
.phero-text{ padding-top:24px; z-index:2 }
.phero-text .eyebrow{ color:var(--red); opacity:1 }
.phero-text h1{ font-family:var(--jp); font-weight:900; font-size:clamp(60px,8.5vw,140px); line-height:.9; letter-spacing:-0.04em; margin:24px 0 16px; text-wrap:balance; color:#000 }
.phero-text h1 .en{ font-family:var(--en); font-weight:900; font-size:.7em; margin-right:.3em; opacity:.4 }
.phero-text p{ font-size:17px; line-height:1.85; max-width:42ch; margin:0; opacity:.85 }
.phero-meta{ margin-top:40px; display:flex; gap:32px; flex-wrap:wrap; font-family:var(--mono); font-size:12px; letter-spacing:.12em; opacity:.6 }
.phero-meta .dot{ display:inline-block; width:8px; height:8px; background:var(--red); margin-right:8px; transform:translateY(-1px) }
.phero-mascot{ display:flex; justify-content:center; align-items:flex-end; position:relative; z-index:2 }
.phero-mascot img{ height:420px; width:auto; filter:drop-shadow(0 12px 0 rgba(0,0,0,0.15)) }

/* ============ 02 メッセージ（代表挨拶風・白） ============ */
.message{ background:#fff; color:#000; padding:160px 0; border-bottom:2px solid #000; position:relative; overflow:hidden }
.message-bg{ position:absolute; right:-3%; bottom:-18%; font-family:var(--en); font-weight:900; font-size:clamp(240px,32vw,540px); color:rgba(248,39,79,0.06); line-height:.82; letter-spacing:-0.04em; pointer-events:none; user-select:none; white-space:nowrap }
.message-inner{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); position:relative; display:grid; grid-template-columns:.85fr 1.15fr; gap:80px; align-items:center }
.message-bust{ position:relative; display:flex; flex-direction:column; align-items:center; gap:24px }
.bust-frame{ position:relative; width:100%; max-width:420px; aspect-ratio:1/1.05; background:var(--cream); border:2px solid #000; overflow:hidden; box-shadow:14px 14px 0 var(--red); display:flex; align-items:flex-end; justify-content:center }
.bust-frame::before{ content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(0,0,0,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.04) 1px,transparent 1px); background-size:32px 32px }
.bust-frame::after{ content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:80%; height:30%; background:radial-gradient(ellipse at center bottom,rgba(248,39,79,0.18) 0%,transparent 70%) }
.bust-frame img{ position:relative; z-index:1; width:auto; height:100%; object-fit:contain; object-position:bottom; filter:drop-shadow(0 6px 0 rgba(0,0,0,0.12)) }
.bust-tag{ width:100%; max-width:420px; display:flex; justify-content:space-between; align-items:flex-end; font-family:var(--mono); font-size:12px; letter-spacing:.12em; opacity:.7 }
.bust-tag .name{ font-family:var(--jp); font-weight:900; font-size:18px; letter-spacing:-0.02em; color:#000; opacity:1; line-height:1.2 }
.bust-tag .name small{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:.18em; font-weight:400; opacity:.55; margin-bottom:4px }
.bust-tag .sig{ font-family:var(--en); font-weight:900; font-size:13px; letter-spacing:.18em; color:var(--red) }
.message-body{ display:flex; flex-direction:column }
.message-body .eyebrow{ color:var(--red); opacity:1 }
.message-body h2{ font-family:var(--jp); font-weight:900; font-size:clamp(36px,4.6vw,72px); line-height:1.15; letter-spacing:-0.035em; margin:24px 0 40px; text-wrap:balance }
.message-body h2 em{ font-style:normal; background:linear-gradient(transparent 60%, rgba(248,39,79,0.35) 60%, rgba(248,39,79,0.35) 92%, transparent 92%); padding:0 .04em }
.message-body .lede{ font-family:var(--jp); font-weight:500; font-size:17px; line-height:2.0; letter-spacing:.01em; margin:0 0 1.4em; max-width:50ch }
.message-body .lede:last-of-type{ margin-bottom:32px }
.message-body .sign-wrap{ max-width:50ch; font-family:var(--jp); font-size:17px; border-top:2px solid #000; padding-top:24px }
.message-body .sign{ display:flex; align-items:center; gap:18px; font-family:var(--mono); font-size:12px; letter-spacing:.12em; opacity:.7 }
.message-body .sign strong{ font-family:var(--jp); font-weight:900; font-size:14px; letter-spacing:-0.01em; opacity:1; color:#000 }

/* ============ 03 会社概要（テーブル・生成り） ============ */
.info{ background:var(--cream); color:#000; padding:140px 0; border-bottom:2px solid #000; position:relative; overflow:hidden }
.info-bg{ position:absolute; left:-2%; top:-12%; font-family:var(--en); font-weight:900; font-size:clamp(220px,26vw,440px); color:rgba(0,0,0,0.05); line-height:.85; letter-spacing:-0.04em; pointer-events:none; user-select:none; white-space:nowrap }
/* 会社概要は行長1200pxでセンター（design値） */
.info-head{ --read:1200px; width:min(var(--read), calc(100% - 2 * var(--gutter))); margin:0 auto 64px; position:relative; display:flex; justify-content:space-between; align-items:flex-end; gap:48px; flex-wrap:wrap }
.info-head h2{ font-family:var(--jp); font-weight:900; font-size:clamp(40px,5.4vw,88px); line-height:1.0; letter-spacing:-0.03em; margin:12px 0 0 }
.info-head h2 .en{ font-family:var(--en); font-weight:900; font-size:.7em; margin-right:.4em; opacity:.4 }
.info-head .since{ font-family:var(--mono); font-size:13px; letter-spacing:.15em; opacity:.55; display:flex; align-items:center; gap:14px }
.info-head .since strong{ font-family:var(--en); font-weight:900; font-size:36px; color:var(--red); letter-spacing:-0.02em; line-height:1; opacity:1 }
.info-table{ --read:1200px; width:min(var(--read), calc(100% - 2 * var(--gutter))); margin-inline:auto; background:#fff; border:2px solid #000; position:relative }
.info-row{ display:grid; grid-template-columns:280px 1fr; gap:0; border-bottom:2px solid #000; transition:background .15s ease }
.info-row:last-child{ border-bottom:none }
.info-row:hover{ background:var(--cream) }
.info-key{ padding:32px; background:transparent; border-right:2px solid #000; display:flex; flex-direction:column; gap:6px }
.info-key .en{ font-family:var(--en); font-weight:900; font-size:12px; letter-spacing:.2em; color:var(--red); text-transform:uppercase }
.info-key .jp{ font-family:var(--jp); font-weight:900; font-size:18px; letter-spacing:-0.02em; line-height:1.2 }
.info-val{ padding:32px 36px; display:flex; flex-direction:column; justify-content:center; font-size:16px; line-height:1.85; font-weight:500; letter-spacing:.005em }
.info-val .tel-big{ font-family:var(--en); font-weight:900; font-size:clamp(28px,3vw,40px); letter-spacing:-0.01em; color:#000; line-height:1; display:inline-flex; align-items:center; gap:14px; text-decoration:none; transition:color .15s }
.info-val .tel-big:hover{ color:var(--red) }
.info-val .tel-big small{ font-family:var(--mono); font-size:11px; letter-spacing:.15em; opacity:.55; font-weight:400 }
.info-val ul{ margin:0; padding:0; list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:8px 24px }
.info-val ul li{ padding-left:20px; position:relative; font-size:14.5px; line-height:1.7 }
.info-val ul li::before{ content:""; position:absolute; left:0; top:11px; width:10px; height:2px; background:var(--red) }
.info-val .contact-line{ display:flex; flex-wrap:wrap; align-items:center; gap:14px }
.info-val .contact-line a{ display:inline-flex; align-items:center; gap:10px; border:2px solid #000; padding:10px 18px; font-family:var(--jp); font-weight:800; font-size:14px; transition:background .15s,color .15s; text-decoration:none }
.info-val .contact-line a:hover{ background:#000; color:#fff }
.info-val .contact-line a .arrow{ font-family:var(--en); font-weight:800; transition:transform .25s }
.info-val .contact-line a:hover .arrow{ transform:translateX(4px) }
.info-note{ --read:1200px; width:min(var(--read), calc(100% - 2 * var(--gutter))); margin:32px auto 0; font-family:var(--mono); font-size:11px; letter-spacing:.08em; opacity:.5 }

/* =========================================================================
   レスポンシブ
   ========================================================================= */
@media (max-width:960px){
  .phero{ padding:48px 0 40px }
  .phero-inner{ grid-template-columns:1fr; gap:24px }
  .phero-text{ padding-top:8px }
  .phero-mascot{ justify-content:center }
  .phero-mascot img{ height:240px }
  /* SP：ヒーローの3項目リストは縦並び（design-source準拠） */
  .phero-meta{ flex-direction:column; gap:10px; margin-top:28px }

  .message{ padding:64px 0 }
  /* SP：MESSAGE.透かし（ピンク）を下部に見切れ表示（base の bottom:-18% は背高画面で消えるため design値 -4% に） */
  .message-bg{ right:-4%; bottom:-4%; font-size:44vw }
  .message-inner{ grid-template-columns:1fr; gap:40px }
  .message-bust{ order:-1 }
  .bust-frame{ max-width:300px }
  .bust-tag{ max-width:300px }
  .bust-tag .name{ font-size:16px }
  .message-body h2{ font-size:34px }
  .message-body .lede{ font-size:16px }
  .message-body .sign-wrap{ font-size:16px }

  .info{ padding:64px 0 }
  /* SP：PROFILE.透かし（グレー）を上部に表示（base の top:-12% は背高画面で上に消えるため design値 top:4px に） */
  .info-bg{ left:-3%; top:4px; font-size:40vw }
  .info-head{ margin-bottom:36px; gap:16px }
  /* SP：見出しは「Profile /」を上段・日本語を下段（縦並び）。design-source準拠 */
  .info-head h2{ font-size:40px; margin:12px 0 18px }
  .info-head h2 .en{ display:block; margin-right:0; margin-bottom:.1em }
  .info-head .since{ font-size:12px }
  .info-row{ grid-template-columns:1fr; gap:0 }
  .info-key{ border-right:none; border-bottom:1px dashed rgba(0,0,0,0.2); padding:20px 24px }
  .info-key .jp{ font-size:17px }
  .info-val{ padding:24px }
  .info-val .tel-big{ font-size:34px }
  .info-val ul{ grid-template-columns:1fr }
  .info-val ul li{ font-size:15px }
}