/* ==========================================================================
   pages/social.css — /social/ 専用CSS
   --------------------------------------------------------------------------
   出自：live style9301.css（.c-heading-2__icon / [class*=social-] /
   7件の background-image）を、現行の見た目のまま新サイトの規約に合わせて移植。

   - www/social/index.html の <head> に追加されていたインライン
     <style>（.c-heading-2__icon の display:flex 版）は削除し、ここに一本化した。
     <i class="fa-brands ...">も
     7個削除し、live2/_converted と同じ空の <span> に戻している
   - 数値・単位は現行のまま（em のrem変換はしない）
   - ブレークポイントは新サイトの規約（min-width:769px / max-width:768px）

   .c-heading-2__icon 自体の display は変更しない（.c-heading-2 のまま）。
   アイコン側（[class*="social-"]）を inline-block にしてテキストと横並びに
   する方式。SPでは見出し全体のfont-sizeを上げてアイコンも
   連動して拡大する。
   ========================================================================== */

@media (max-width: 768px) {
  .c-heading-2__icon {
    font-size: 1.3em;
  }
}
.c-heading-2__icon [class*="social-"] {
  display: inline-block;
  vertical-align: middle;
  width: 1.438em;
  height: 1.438em;
  margin-right: 0.5em;
  background: no-repeat 0 0 / 100%;
}
.c-heading-2__icon .social-ins  { background-image: url(/corporations/assets/img/common/icon-social-ins.svg); }
.c-heading-2__icon .social-x    { background-image: url(/corporations/assets/img/common/icon-social-x.svg); }
.c-heading-2__icon .social-yt   { background-image: url(/corporations/assets/img/common/icon-social-yt.svg); }
.c-heading-2__icon .social-fb   { background-image: url(/corporations/assets/img/common/icon-social-fb.svg); }
.c-heading-2__icon .social-tt   { background-image: url(/corporations/assets/img/common/icon-social-tt.svg); }
.c-heading-2__icon .social-line { background-image: url(/corporations/assets/img/common/icon-social-line.svg); }
.c-heading-2__icon .social-note { background-image: url(/corporations/assets/img/common/icon-social-note.png); }


/* --- ボタンの幅・gap・折り返し（現行 .c-boxCol.c-boxCol--2 > .c-boxCol__item
   > .c-linkButton2 から移植。本ページのみにスコープ） -------------------
   原因：新サイトの .btn（components.css）は min-width:300px、.c-boxCol2
   （components.css）は flex-wrap 未指定（nowrap既定）。3ボタンが折り返せず
   min-width:300px×3で.c-cardGrid--2の列を押し広げていた（grid blowout。
   -9999px/200vw等ではない）。

   現行（style9301.css）の対応箇所：
   - .c-boxCol { --gap:14px; --col:0; --col-item:1; display:flex;
       flex-wrap:wrap; gap:var(--gap); }
   - .c-boxCol--2 { --col:1; --col-item:2; }
   - .c-boxCol__item（PC・min-width:768px）
       { width: calc((100% - var(--gap) * var(--col)) / var(--col-item)); }
     → --gap:14px, --col:1, --col-item:2 を代入すると
       width: calc((100% - 14px) / 2) ＝ 14pxのgapを引いた残りを均等2分割
   - .c-boxCol__item（SP・max-width:767px）{ width: 100%; }（1列で縦積み）
   - .c-linkButton2 自体には幅指定なし（親の width に対して自然に埋まるだけ）

   /social/ 以外に .c-cardGrid > .c-boxCol2 > .btn×3以上 の組み合わせは
   無いことを確認済み。core（components.css）は変更しない。
   min-width:0 は横スクロール対策として維持し、幅は flex-basis で別途指定する。
   --------------------------------------------------------------------- */
.c-boxCol2 {
  flex-wrap: wrap;
  gap: 14px;
}
.c-boxCol2 .c-boxCol {
  flex: 0 1 calc((100% - 14px) / 2);
}
.c-boxCol2 .btn {
  min-width: 0;
}
@media (max-width: 768px) {
  /* components.css 1350-1354行：.c-boxCol2 はSPで flex-direction:column に
     なる（core側の既存仕様）。column化するとメイン/クロスアクスが入れ替わり、
     .c-boxCol2 .c-boxCol { flex-basis:100% }（旧稿）は高さの指定になってしまい
     幅には効かない。ここでは align-items をstretchにしてクロスアクス（横幅）
     方向に子を親いっぱいへ広げる。 */
  .c-boxCol2 {
    align-items: stretch;
  }
  .c-boxCol2 .btn {
    width: 100%;
  }
}
