/* ==========================================================================
   会社情報ページ — design/Company.dc.html
   ※ このページは 768px に加えて 1100px の分岐を持つ（design の実装どおり）。
      代表メッセージの2カラム崩しと代表写真の斜め枠が 1100px で切り替わる。
   ========================================================================== */

/* ページ全体を白ベースにし、PC では影を落とす（design の fullpageStyle） */
.site--boxed { margin: 0 auto 40px; box-shadow: 0 30px 80px rgba(0, 0, 0, .18); }
@media (max-width: 768px) {
  .site--boxed { margin: 0; box-shadow: none; }
}

/* --- 共通のセクション見出し ---------------------------------------------- */
.sec__head { margin-bottom: 56px; }
.sec__head .kicker { margin-bottom: 22px; }
.sec__h2 {
  font-family: var(--f-head);
  font-size: var(--fs-h2);
  font-weight: 900;
  color: var(--c-navy);
  line-height: var(--lh-head);
  margin: 0;
}

/* --- 01 MESSAGE ----------------------------------------------------------
   PC は2列×2行のグリッド。
     1行目: 左＝キッカー＋見出し / 右＝空
     2行目: 左＝代表写真       / 右＝本文
   こうすると本文の開始位置が写真の上辺にそのまま揃う。 */
.cp-message {
  background: #fff;
  padding: clamp(56px, 10vw, 180px) clamp(20px, 8vw, 100px);
  display: grid;
  grid-template-columns: minmax(0, 34fr) minmax(0, 60fr);
  column-gap: clamp(40px, 5.5vw, 80px);
  row-gap: 48px;                 /* 見出しと写真／本文の間 */
  align-items: start;
}
.cp-message__head {
  grid-column: 1;
  grid-row: 1;
  container-type: inline-size;   /* 見出しの 10cqi のため */
}
.cp-message__h2 {
  font-family: var(--f-head);
  font-size: clamp(26px, 10cqi, 44px);
  font-weight: 900;
  color: var(--c-navy);
  line-height: var(--lh-head);
  margin: 0;
}
.cp-message__right { grid-column: 2; grid-row: 2; min-width: 0; max-width: 760px; }
.cp-message__right p {
  font-size: 16px;
  line-height: 2;
  color: var(--c-text);
  margin: 0 0 28px;
}
.cp-message__right p:last-of-type { margin-bottom: 48px; }

.cp-sign { font-size: 15px; font-weight: 700; color: var(--c-navy); }
.cp-sign__en { font-weight: 400; color: var(--c-text); margin-left: 12px; font-size: 13px; }

/* 代表写真の枠：平行四辺形。内側の写真は逆方向に skew して歪ませない */
.cp-photo {
  grid-column: 1;
  grid-row: 2;
  width: 100%;
  aspect-ratio: 9 / 10;
  position: relative;
  transform: var(--skew-frame);
  box-shadow: var(--shadow-photo), 0 0 0 1px rgba(16, 28, 76, .18);
  overflow: hidden;
  /* 見出しとの間隔は grid の row-gap が作る（本文の開始位置を写真と揃えるため） */
}
.cp-photo__inner { transform: skewX(6deg) scale(1.15); width: 100%; height: 100%; }
.cp-photo__inner img { width: 100%; height: 100%; object-fit: cover; }

/* --- 02 OUTLINE ---------------------------------------------------------- */
.cp-outline { background: var(--bg-section); padding: clamp(48px, 10vw, 160px) clamp(20px, 8vw, 100px); }
.cp-outline__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(32px, 4vw, 60px);
  max-width: 1100px;
  border-bottom: 1px solid var(--line-navy);
}
.cp-row {
  display: flex;
  gap: 32px;
  padding: 26px 0;
  border-top: 1px solid var(--line-navy);
}
.cp-row__label { flex: 0 0 clamp(96px, 11vw, 140px); font-size: 15px; font-weight: 700; color: var(--c-navy); }
.cp-row__value { font-size: 15px; line-height: 1.9; color: var(--c-text); }

/* --- 03 HISTORY ---------------------------------------------------------- */
.cp-history { background: #fff; padding: clamp(48px, 10vw, 160px) clamp(20px, 8vw, 100px); }
.cp-history__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(32px, 4vw, 60px);
  max-width: 1100px;
}
.cp-history__col { position: relative; padding-left: 8px; }
/* 縦の軸線 */
.cp-history__col::before {
  content: '';
  position: absolute;
  left: 94px; top: 10px; bottom: 10px;
  width: 1px;
  background: rgba(16, 28, 76, .15);
}
.cp-hist {
  display: flex;
  gap: 32px;
  min-height: 130px;
  padding: 18px 0;
  align-items: baseline;
  position: relative;
}
.cp-hist__date {
  flex: 0 0 60px;
  font-family: var(--f-en);
  font-weight: 800;
  font-style: italic;
  font-size: 18px;
  color: var(--c-navy);
}
/* 軸線上の赤い点（円形。角丸禁止の例外） */
.cp-hist__dot {
  position: absolute;
  left: 82px; top: 27px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--c-red);
}
.cp-hist__text { margin-left: 28px; font-size: 14px; line-height: 1.8; color: var(--c-text); }

/* --- 04 ACCESS ----------------------------------------------------------- */
.cp-access { background: var(--bg-section); padding: clamp(48px, 10vw, 160px) clamp(20px, 8vw, 100px); }
.cp-access__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(24px, 2.8vw, 40px);
}
.cp-office { background: #fff; }
.cp-office__map {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-page);
}
.cp-office__map iframe {
  width: 100%; height: 100%;
  filter: saturate(.85) contrast(1.02);
}
.cp-office__body { padding: 32px 36px; }
.cp-office__name { font-size: 18px; font-weight: 700; color: var(--c-navy); margin-bottom: 12px; }
.cp-office__addr { font-size: 15px; line-height: 1.9; color: var(--c-text); }

/* ==========================================================================
   1100px 以下：代表メッセージを縦積みにし、写真の斜め枠を解除する
   ========================================================================== */
@media (max-width: 1100px) {
  /* 1列に積む。順序は 見出し → 写真 → 本文（DOM の並びのまま） */
  .cp-message { grid-template-columns: 1fr; row-gap: 0; }
  .cp-message__head,
  .cp-photo,
  .cp-message__right { grid-column: 1; grid-row: auto; }
  .cp-message__right { margin-top: 40px; }
  .cp-photo {
    aspect-ratio: 4 / 3;
    transform: none;
    box-shadow: 0 0 0 1px rgba(16, 28, 76, .18);
    margin-top: 32px;
  }
  .cp-photo__inner { transform: none; }
}

/* ==========================================================================
   SP（768px 以下）
   ========================================================================== */
@media (max-width: 768px) {
  .cp-outline__grid { display: flex; flex-direction: column; }
  .cp-history__grid { display: flex; flex-direction: column; gap: 32px; }
  .cp-access__grid { grid-template-columns: 1fr; gap: 24px; }
}