/* =====================================================================
   page-company.css — 会社概要ページ固有（design/Sun Creative_update.xd 準拠）
   対応アートボード: 会社概要_w1920_マージン260_PC / 会社概要_w390_マージン40_SP
   実測値は design/xd-spec/company-pc.txt・company-sp.txt

   前提:
     body に page-top2 / page-sub / page-sub--company を併記する。
       page-top2 … top.css のトークン（--sky/--mg/--u/--serif-en 等）と
                   ヘッダー・ドロワー・右端レール・Contact帯・フッターの共通部品
       page-sub  … page.css（パンくず + ヒーロー、ナビのドロップダウン、xd-btn）
     本ファイルはこのページにしか出てこない 3 セクション
       ① 代表メッセージ ② 会社情報 ③ 提携企業
     だけを定義する。top.css / page.css / style.css は編集しない。

   単位: PC は 1920 基準の vw（XDのpx ÷ 19.2）、
         SP は calc(N * var(--u))（--u は top.css が 1023px 以下で 100vw/390 と定義）。
   ===================================================================== */

/* =====================================================================
   セクション見出し（XD: Noto Sans JP / 40 / SemiBold / 文字間100）
   「提携企業」だけ見出しの右に補足文（16px Medium）が並ぶ。
   XD では SP の「代表メッセージ」だけ Bold・文字間300 になっているが、
   他の 2 見出しと不揃いなので SemiBold・文字間100 に揃えた。
   ===================================================================== */
.co-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .938vw;                    /* 18px（見出し右端→補足文 左端） */
}
.co-head__title {
  font-family: var(--gothic);
  font-size: 2.083vw;             /* 40px */
  font-weight: 600;
  letter-spacing: .1em;
  line-height: 1.3;
  margin: 0;
}
.co-head__note {
  font-size: .833vw;              /* 16px Medium */
  font-weight: 500;
  line-height: 1.5;
  margin: 0;
}

/* =====================================================================
   ① 代表メッセージ（黒背景）
   XD: 見出し → 左に写真 557x608(x=260)、右にメッセージ本文(w=645, x=872)。
       右カラムは写真の下端に揃う。
       装飾として SNS 投稿サムネ(137x242)の帯が 2 本入り、
       上段は画面右端、下段は画面左端へ抜ける（下段は写真の背面）。
   ===================================================================== */
.co-msg {
  position: relative;
  overflow: hidden;               /* サムネ帯の画面外へのはみ出しを切る */
  background: #000;
  color: #fff;
  padding-block: 2.344vw 1.667vw; /* XD: 黒帯上端450 → 見出し45 / 写真下端→黒帯下端32 */
}
.co-msg__inner { padding-inline: var(--mg); }

.co-msg__grid {
  position: relative;             /* サムネ帯の位置基準（左端=260 / 右端=1660） */
  display: grid;
  grid-template-columns: 29.01vw 1fr;   /* 写真 557px */
  column-gap: 2.865vw;                  /* 写真右端817 → 本文左端872 = 55px */
  align-items: end;                     /* XD: 右カラムは写真の下端揃え */
  margin-top: .583vw;                   /* 見出し下端 → 写真上端 11px */
}

/* --- 写真（XD の AI 生成プレースホルダーは使わず既存の実写に差し替え） --- */
.co-msg__photo {
  position: relative;
  z-index: 1;                     /* 下段サムネ帯より前面 */
  aspect-ratio: 557 / 608;
  margin: 0;
  background: #111;
  /* overflow は切らない。縦組みの YOKOTA NAOTO が XD どおり写真下端を
     わずかに超えて流れるため（画像は object-fit:cover が自身のボックスに
     収まるのでクリップは不要） */
}
/* 親が aspect-ratio で高さを持つので絶対配置で確実に塗り切る */
.co-msg__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 15%;       /* 縦長原寸(870x1076)を 557x608 に収めても顔が切れないように */
  display: block;
}
/* XD: Times New Roman/15/文字間1000・写真の上に白文字。
   XD上でこのテキストは 90°回転（transform b=1 c=-1）した縦組みラベルで、
   写真の左端を上から下へ流れる。基準点（回転前のベースライン開始位置）は
   アートボード座標 (273, 874) ＝ 写真左上から (13, 316)。
   transform-origin を 0 0 にして回転するとベースラインは
   「ボックス上端からアセント分だけ左」に来るため、left にアセント分を足して戻す。 */
.co-msg__caption {
  position: absolute;
  left: 1.333vw;                  /* 13px + アセント約12.6px */
  top: 16.458vw;                  /* 316px */
  transform: rotate(90deg);
  transform-origin: 0 0;
  z-index: 2;
  font-family: var(--serif-en);
  font-size: .781vw;              /* 15px */
  letter-spacing: 1em;
  line-height: 1;
  color: #fff;
  text-shadow: 0 0 .4vw rgba(0,0,0,.6);   /* 写真の明部でも読めるように（XDには無い最小限の保険） */
  white-space: nowrap;
  pointer-events: none;
}

/* --- 右カラム --- */
.co-msg__body { max-width: 33.594vw; }    /* XD テキストフレーム幅 645px */
.co-msg__text {
  font-size: .833vw;              /* 16px Regular */
  line-height: 1.875;             /* 行間30 */
}
.co-msg__text p { margin: 0; }
.co-msg__text p + p { margin-top: 1.875em; }   /* XD: 段落間に空行1行 */

.co-msg__profile {
  display: flex;
  align-items: flex-start;
  gap: 1.354vw;                   /* 氏名ブロック右端 → 実績リスト左端 26px */
  margin-top: 1.276vw;            /* 本文下端 → 氏名ブロック上端 24.5px */
  padding-block: 1.146vw;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
}
.co-msg__name {                   /* XD: Noto Sans JP/33/Light/文字間50 */
  font-size: 1.719vw;
  font-weight: 300;
  letter-spacing: .05em;
  line-height: 1.3;
  white-space: nowrap;
  margin: 0;
}
.co-msg__role {                   /* XD: Noto Sans JP/14/Medium/文字間50 */
  font-size: .729vw;
  font-weight: 500;
  letter-spacing: .05em;
  line-height: 1.5;
  white-space: nowrap;
  margin: .25vw 0 0;
}
/* 実績3行（XD の「□」はグリフ欠けの箱ではなく箇条書きマーカー。
   footer の .t2-footer-menu__link::before と同じ白枠の四角で表現する） */
.co-msg__facts {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: .729vw;              /* 14px Regular */
  line-height: 1.786;             /* 行間25 */
}
.co-msg__facts li {
  display: flex;
  align-items: flex-start;
  gap: .7em;
}
.co-msg__facts li::before {
  content: "";
  flex: none;
  width: .521vw; height: .521vw;  /* 10px */
  margin-top: .39vw;              /* 1行目の文字の中心に合わせる */
  border: 1px solid rgba(255,255,255,.6);
}

/* --- 装飾：SNS投稿サムネの帯 --- */
.co-msg__strip {
  position: absolute;
  z-index: 0;
  display: flex;
  gap: .26vw;                     /* 5px */
  pointer-events: none;
  user-select: none;
}
.co-msg__strip--top    { top: 0;    right: calc(-1 * var(--mg)); }              /* 右端は画面右端(1920)まで */
.co-msg__strip--bottom { bottom: 0; left:  calc(-1 * var(--mg) - 8.448vw); }    /* 左端は画面外 x=-162 まで */
.co-msg__strip img {
  width: 7.135vw;                 /* 137px */
  height: 12.604vw;               /* 242px */
  object-fit: cover;
  display: block;
}

/* =====================================================================
   ② 会社情報（黒背景・2カラムの定義リスト）
   XD: ラベル x=331(版面+71) 幅89 / 値 x=550、行ピッチ 50px。
       「所在地」「事業内容」だけ値が複数行になり行間30（SPは22）。
   ===================================================================== */
.co-info {
  background: #000;
  color: #fff;
  padding-block: 2.76vw 5.313vw;  /* XD: 53px / 102px */
}
.co-info__inner { padding-inline: var(--mg); }

/* XD は行ごとの罫線を持たず、表の上下に白1px＋ラベル列と値列を分ける縦罫のみ */
.co-info__list {
  position: relative;             /* 縦罫（::before）の位置基準 */
  margin: 1.01vw 0 0;             /* 見出し下端 → 表上端 19px */
  padding-left: 3.698vw;          /* 版面左端 → ラベル左端 71px */
  padding-block: .917vw 1.589vw;  /* XD: 上端罫→1行目 / 最終行→下端罫 */
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
}
/* ラベル列と値列を分ける縦罫（XD x=473・上下は罫線から22px内側） */
.co-info__list::before {
  content: "";
  position: absolute;
  left: 11.094vw;                 /* 版面左端 → 縦罫 213px */
  top: 1.146vw;
  bottom: 1.146vw;
  width: 1px;
  background: #fff;
}
.co-info__row {
  display: grid;
  grid-template-columns: 4.635vw 1fr;   /* ラベル 89px */
  column-gap: 6.771vw;                  /* ラベル枠右端420 → 値550 = 130px */
}
.co-info__row dt,
.co-info__row dd {
  margin: 0;
  font-size: .833vw;              /* 16px Medium */
  font-weight: 500;
  line-height: 3.125;             /* 行間50 */
}
/* 複数行になる行は行間30。1行目を他行と同じ50px行の中央に合わせる */
.co-info__row--wide dt,
.co-info__row--wide dd { align-self: start; }
.co-info__row--wide dd { line-height: 1.875; padding-top: .521vw; }  /* (50-30)/2 */

.co-info__wrap { margin-left: 1em; }   /* PC は「〒…」と住所を1行に（SPでは改行） */

/* XD ではメールに下線は無い（ホバーでのみ色を変える） */
.co-info__link {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition);
}
.co-info__link:hover { color: var(--sky); }

/* =====================================================================
   ③ 提携企業（白背景）
   XD: カテゴリ見出しは 1400x47 の枠（線 #707070 1px・影 0,5 ぼかし3 黒16%）。
       その下に提携先を横並び。区切りは縦罫（PC）／横罫（SP）。
       1行の高さは 130px、ロゴ 101x105 は上下中央、丸矢印は右下ぞろえ。
   ===================================================================== */
.co-partners-sec {
  background: #fff;
  color: #000;
  padding-block: 3.906vw 3.93vw;  /* XD: 75px / 75.5px */
}
.co-partners-sec__inner { padding-inline: var(--mg); }

.co-partner-cat { margin-top: 4.01vw; }              /* カテゴリ間 77px */
.co-partner-cat:first-of-type { margin-top: 1.625vw; }  /* 見出し下端 → 1枚目の枠 31px */

.co-partner-cat__bar {
  display: flex;
  align-items: center;
  height: 2.448vw;                /* 47px */
  padding-inline: 2.292vw;        /* 枠左端 → 文字 44px */
  border: 1px solid #707070;
  font-family: var(--gothic);
  font-size: 1.042vw;             /* 20px SemiBold */
  font-weight: 600;
  line-height: 1;
  margin: 0;
}

.co-partners {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* XD: 縦罫が 1400/3 の位置 = 3等分 */
  margin-top: 1.068vw;                     /* 枠下端 → 行上端 20.5px */
}

.co-partner {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 6.771vw;            /* 130px（＝XDの縦罫の長さ） */
  padding: 0 1.042vw 0 1.563vw;   /* 右20px / 左30px */
  color: inherit;
  text-decoration: none;
}
.co-partner + .co-partner { border-left: 1px solid #000; }

.co-partner__logo {
  flex: none;
  display: block;
  width: 5.26vw;                  /* 101px */
  height: 5.469vw;                /* 105px */
}
.co-partner__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;            /* ロゴなので切り抜かず全体を見せる */
  display: block;
}
/* XD でロゴ未支給のパートナーは #A2A2A2 のベタ塗り（デザイナーのプレースホルダー） */
.co-partner__logo--tbd { background: #A2A2A2; }
/* ロゴ画像が未着手のパートナーは枠ごと非表示にして文字を左に寄せる（画像が届いたら
   co-partner__logo--empty を外して <img> を追加する） */
.co-partner__logo--empty { display: none; }

.co-partner__body {
  margin-left: .833vw;            /* ロゴ右端 → 文字 16px */
  min-width: 0;
}
.co-partner__cat {                /* XD: Noto Sans JP/24/SemiBold/文字間100/#40A9FA */
  display: block;
  font-size: 1.25vw;
  font-weight: 600;
  letter-spacing: .1em;
  line-height: 1.25;              /* 2行になる「エステ・レンタルルーム」の行間30 */
  color: var(--sky);
}
.co-partner__name {               /* XD は 14px と 16px が混在。16px に統一 */
  display: block;
  font-size: .833vw;
  font-weight: 600;
  letter-spacing: .05em;
  line-height: 1.4;
  margin-top: .469vw;             /* 青文字ベースライン → 社名ベースライン 26px */
  transition: color var(--transition);
}

.co-partner__arrow {              /* XD: 円 r16.5・黒1px・中に「＞」 */
  flex: none;
  margin-left: auto;
  align-self: flex-end;           /* XD: 行の右下ぞろえ */
  width: 1.719vw; height: 1.719vw;
  border: 1px solid #000;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #000;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.co-partner__arrow svg { width: .78vw; height: .78vw; }

a.co-partner:hover .co-partner__arrow { background: var(--sky); border-color: var(--sky); color: #fff; }
a.co-partner:hover .co-partner__name  { color: var(--sky); }

/* =====================================================================
   SP（XD: 390px / マージン20 のアートボード準拠）
   - サムネ帯は SP のアートボードに存在しないため非表示
   - 写真は 390x281 の全幅（＝横位置のトリミング）
   - 提携先は 1列に積み、区切りは横罫
   ===================================================================== */
@media (max-width: 1023px) {

  /* PC専用の強制改行は SP では自然折返しに戻す */
  .co-br-pc { display: none; }

  /* ---- 見出し ---- */
  .co-head { flex-direction: column; align-items: flex-start; gap: calc(2 * var(--u)); }
  .co-head__title { font-size: calc(23 * var(--u)); }
  .co-head__note  { font-size: calc(12 * var(--u)); font-weight: 600; letter-spacing: .05em; }

  /* ---- ① 代表メッセージ ---- */
  .co-msg { padding-block: calc(21 * var(--u)) 0; }
  .co-msg__inner { padding-inline: calc(20 * var(--u)); }

  .co-msg__grid {
    display: block;
    margin-top: calc(8 * var(--u));
  }
  .co-msg__photo {
    width: calc(390 * var(--u));            /* 全幅ブリード */
    max-width: none;
    margin-left: calc(-20 * var(--u));
    aspect-ratio: 390 / 281;
  }
  /* SPは横長ボックス(390x281)に縦長原寸(870x1076)を cover で流し込むため、
     Y位置が浅いと顔が下端へ寄って胸から下が切れる。61% で頭を上寄せし、
     フーディのロゴまで収まる（=見出し直下に顔が来る）構図にする */
  .co-msg__photo img { object-position: 50% 61%; }
  /* SP も 90°回転。XD基準点 (23, 416) ＝ 写真(y=333)左上から (23, 83) */
  .co-msg__caption {
    left: calc(31 * var(--u));    /* 23px + アセント約8.4px */
    top: calc(83 * var(--u));
    font-size: calc(10 * var(--u));
    text-shadow: 0 0 calc(6 * var(--u)) rgba(0,0,0,.6);
  }

  .co-msg__body { max-width: none; margin-top: calc(22 * var(--u)); }
  .co-msg__text { font-size: calc(13 * var(--u)); line-height: calc(22 / 13); }

  /* SP は氏名と肩書を同じベースラインで横並び、実績はその下 */
  .co-msg__profile { display: block; margin-top: calc(28 * var(--u)); padding-block: calc(16 * var(--u)); }
  .co-msg__person  { display: flex; align-items: baseline; gap: calc(8 * var(--u)); }
  .co-msg__name    { font-size: calc(24 * var(--u)); }
  .co-msg__role    { font-size: calc(13 * var(--u)); font-weight: 400; margin: 0; }
  .co-msg__facts   {
    margin-top: calc(4 * var(--u));
    font-size: calc(12 * var(--u));
    line-height: calc(22 / 12);
  }
  .co-msg__facts li::before {
    width: calc(9 * var(--u)); height: calc(9 * var(--u));
    margin-top: calc(6 * var(--u));
  }

  .co-msg__strip { display: none; }   /* SP のアートボードにサムネ帯は無い */

  /* ---- ② 会社情報 ---- */
  .co-info { padding-block: calc(78 * var(--u)) calc(110 * var(--u)); }
  .co-info__inner { padding-inline: calc(20 * var(--u)); }
  .co-info__list  { margin-top: calc(40 * var(--u)); padding-left: calc(11 * var(--u)); padding-block: calc(10 * var(--u)) calc(16 * var(--u)); }
  /* 縦罫はラベル列(89px)と値列の隙間の中央＝104.5 に置いていたが、ラベルは最長でも
     「代表取締役」の 65px しかなく列幅を使い切らないため、見た目は値側に寄ってしまう。
     実測のラベル右端76と値の左端109の中間に置く（XD_SP に縦罫は無く実装側の判断値） */
  .co-info__list::before { left: calc(92.5 * var(--u)); top: calc(6 * var(--u)); bottom: calc(10 * var(--u)); }
  .co-info__row   { grid-template-columns: calc(89 * var(--u)) 1fr; column-gap: calc(9 * var(--u)); padding-block: calc(6 * var(--u)); }
  .co-info__row dt,
  .co-info__row dd { font-size: calc(13 * var(--u)); font-weight: 400; line-height: calc(50 / 13); }
  .co-info__row--wide dd { line-height: calc(22 / 13); padding-top: calc(14 * var(--u)); }  /* (50-22)/2 */
  .co-info__wrap { display: block; margin-left: 0; }

  /* ---- ③ 提携企業 ---- */
  .co-partners-sec { padding-block: calc(34 * var(--u)) calc(60 * var(--u)); }
  .co-partners-sec__inner { padding-inline: calc(20 * var(--u)); }

  .co-partner-cat { margin-top: calc(54 * var(--u)); }
  .co-partner-cat:first-of-type { margin-top: calc(19 * var(--u)); }
  .co-partner-cat__bar {
    height: calc(47 * var(--u));
    padding-inline: calc(15 * var(--u));
    font-size: calc(18 * var(--u));
  }

  .co-partners { grid-template-columns: 1fr; margin-top: calc(20 * var(--u)); }

  .co-partner {
    min-height: calc(130 * var(--u));
    padding: 0 calc(1 * var(--u)) 0 calc(25 * var(--u));
  }
  /* 区切りは横罫。行間の中央に引くため擬似要素で描く（padding で行高を崩さない） */
  .co-partner + .co-partner { border-left: 0; margin-top: calc(96 * var(--u)); }
  .co-partner + .co-partner::before {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: calc(-48 * var(--u));
    border-top: 1px solid #000;
  }

  .co-partner__logo { width: calc(101 * var(--u)); height: calc(105 * var(--u)); }
  .co-partner__body { margin-left: calc(21 * var(--u)); }
  .co-partner__cat  { font-size: calc(24 * var(--u)); }
  .co-partner__name { font-size: calc(14 * var(--u)); margin-top: calc(9 * var(--u)); }
  .co-partner__arrow { width: calc(33 * var(--u)); height: calc(33 * var(--u)); }
  .co-partner__arrow svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
}