@charset "UTF-8";
/* =============================================
   COMPANYページ（2026リニューアル / Figma CAMPANY_PC node 265:2924）
   - カラーは _variables.scss の変数を使用（$ink / $yellow / $white / $gray-soft）
   - 単位: サイズは em() 関数で指定（_mixins.scss）。PC = Figmaのpx値をそのまま em(px)。
     font-size を持つ要素（とその子）は第2引数で補正: em(px, 親font-size)
     例外で残すもの: border幅 / 999px（ピル型radius）
   - SP: Figma SPフレーム未提供のためPCデザインを基にした暫定実装（440px幅基準）。
     正式SPデザイン受領後に後追い調整する
============================================= */
/*--- em単位の基準（COMPANYページのみ） ---*/
/* style_company.css はスラッグ判定で company ページ限定読み込み（header.php）。
   common.css の body{font-size:1.4rem}(SP) より後に読み込まれるので本ルールが優先される。
   PC: 16px固定 → em(24) = 24px
   SP: 3.6364vw（Figma SPフレーム440px基準）→ em値がvw追従 */
body {
  font-size: 16px;
}
@media screen and (max-width: 768px) {
  body {
    font-size: 3.6363636364vw;
  }
}

/* 全ページ共通(style.css)の main{padding-top:160px / SP 26.7vw} を打ち消し、
   固定ヘッダー分のオフセットは .company 側に集約する（style_top.scss と同じ考え方）。
   style_company.css は style.css より後に読み込まれるため同一詳細度でも本ルールが優先される */
main {
  padding-top: 0;
}
@media screen and (max-width: 768px) {
  main {
    padding-top: 0;
  }
}

/*--- ページラッパー ---*/
.company {
  color: #2c2c2c;
  /* チェックバック: 見出しの高さを全ページで統一。基準は PHILOSOPHY / OUR BUSINESS の em(208)。
     旧値 em(215)（Figma実測の見出し上余白125px）は他ページより7px下がっていた */
  padding-top: 13em;
  /* Figma: カード下端→footer上端 約139px。common.scss の .footer{margin-top:100px} との差分を持つ */
  padding-bottom: 2.4375em;
}
@media screen and (max-width: 768px) {
  .company {
    /* チェックバック: SPの見出し位置も全ページ統一。基準は PHILOSOPHY の em(104)
       （SP固定ヘッダー 70.4px = 16vw ＋ 見出し上余白 33.6px）。旧値 em(150.4) */
    padding-top: 6.5em;
    padding-bottom: 1.25em;
  }
}

/*--- ページ見出し ---*/
/* チェックバック: 見出しの高さを全ページで統一（基準 = PHILOSOPHY / OUR BUSINESS）。
   基準ページは line-height 未指定で、common.scss の body{line-height:1.5em} の
   計算値24pxをそのまま継承している（単位付きのため計算値が継承される）。
   ここに line-height:1.24（=80.6px）を指定していると行ボックスの半レディング差で
   文字の見た目上端が約28px下がるため、PCでは指定しない。
   SPは基準が未確定なので従来どおり 1.24 を維持する */
.company__heading {
  font-family: "Kumbh Sans", sans-serif;
  font-weight: 600;
  font-size: 4.0625em;
  letter-spacing: 0.05em;
  text-align: center;
  /* Figma: 見出し下端(y≒296)→hero上端(y=340) の44px に、
     line-height を外したことで縮む要素高さ56.6px と padding-top の-7px を足して、
     下のコンテンツ位置を従来どおりに保つ（44 + 56.6 + 7） */
  margin-bottom: 1.6553846154em;
}
@media screen and (max-width: 768px) {
  .company__heading {
    /* SPも基準(PHILOSOPHY)に統一: font-size em(46) / line-height は指定せず継承(27.2px)。
       margin-bottom は元の30pxに、line-height を外して縮む要素高さ22.4px(49.6→27.2)を足し、
       見出し〜hero の間隔を従来どおりに保つ（基準は自身のfont-size 46px） */
    font-size: 2.875em;
    margin-bottom: 1.1391304348em;
  }
}

/*--- セクション見出しラベル（社長メッセージ／会社概要／グループ会社 共通） ---*/
.company__label {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 700;
  font-size: 1.25em;
  line-height: 1.448;
  letter-spacing: 0.1em;
}
@media screen and (max-width: 768px) {
  .company__label {
    font-size: 1.125em;
  }
}

.company__label-icon {
  width: 1.25em;
  height: auto;
}

/*--- 1. 社長メッセージ ---*/
.company-hero {
  background-color: #FFF226;
  padding: 6.1875em 0 6.1875em;
  /* 装飾の .company-hero__ooh は写真から左へ -62px はみ出す設計。画面が狭いと
     ビューポート外へ出て横スクロールバーが出てしまうため、セクション幅で切る。
     写真の下へのはみ出し(bottom:-79px)は活かしたいので、切るのは横方向だけ */
  overflow-x: clip;
}
@media screen and (max-width: 768px) {
  .company-hero {
    padding: 3.75em 0 3.75em;
  }
}

.company-hero__inner {
  /* Figma: フレーム1200のうちコンテンツ幅1000（左右余白 各100） */
  max-width: 62.5em;
  /* チェックバック: max-width だけだと1000px未満のブラウザ幅で画面いっぱいに張り付き、
     左右の余白が無くなって OOHグラフィックが画面外へ出ていた。%を併用して必ず余白を作る */
  width: 92%;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .company-hero__inner {
    max-width: none;
    width: auto; /* SPは下のpaddingで余白を作るため%指定を打ち消す */
    padding: 0 1.5625em;
  }
}

.company-hero__body {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 0.8125em;
}
@media screen and (max-width: 768px) {
  .company-hero__body {
    display: block;
    margin-top: 1.25em;
  }
}

.company-hero__photo {
  position: relative;
  width: 27.375em;
  flex-shrink: 0;
}
@media screen and (max-width: 768px) {
  .company-hero__photo {
    width: 20.625em;
    margin: 0 auto;
  }
}

.company-hero__photo-img {
  display: block;
  width: 100%;
  height: auto;
}

/* 装飾「OOH!」グラフィック。写真の左下からはみ出す配置
   ※Auto Layout非使用フレームのため座標差からの逆算値。実装後にスクショ突合すること */
.company-hero__ooh {
  position: absolute;
  left: -3.875em;
  bottom: -4.9375em;
  width: 30.6875em;
  max-width: none;
  height: auto;
}
@media screen and (max-width: 768px) {
  .company-hero__ooh {
    width: 22.5em;
    left: -1.5625em;
    bottom: -3.125em;
  }
}

.company-hero__text {
  width: 30.625em;
}
@media screen and (max-width: 768px) {
  .company-hero__text {
    width: auto;
    /* OOH!グラフィックの写真下へのはみ出し分を確保 */
    margin-top: 6.25em;
  }
}

.company-hero__catch {
  /* Figma: キャッチ下端→本文1段落目上端 26px */
  margin-bottom: 1.625em;
}
@media screen and (max-width: 768px) {
  .company-hero__catch {
    margin-bottom: 0.625em;
  }
}

.company-hero__catch-img {
  display: block;
  width: 24.25em;
  height: auto;
}
@media screen and (max-width: 768px) {
  .company-hero__catch-img {
    width: 18.75em;
  }
}

.company-hero__paragraph {
  font-weight: 500;
  font-size: 0.875em;
  line-height: 2;
  letter-spacing: 0.1em;
  text-align: justify;
}

.company-hero__paragraph + .company-hero__paragraph {
  margin-top: 1.4285714286em;
}

.company-hero__signature {
  margin-top: 3.3125em;
  text-align: right;
}

.company-hero__signature-img {
  display: inline-block;
  width: 15.4375em;
  height: auto;
  /* Figma指定: 黄背景に署名スキャンを馴染ませる */
  mix-blend-mode: multiply;
}

/* チェックバック: タブレット帯（769〜1080px）で横並びが破綻していた対策。
   横並びの成立条件は「写真438 + 本文490 + 見た目の余白」＝ .company-hero__inner に
   概ね 970px 以上。inner は 92% なのでビューポート約1052px が下限になる。
   それ未満では本文(flex-shrink既定=1)だけが潰れて行長が崩れ、さらに写真と本文が
   隣接して見えるため、SPと同じ縦積みに切り替える。
   ※769px下限を付けているのは、768px以下の @include sp 側の値を上書きしないため */
@media screen and (min-width: 769px) and (max-width: 1080px) {
  .company-hero__inner {
    /* 縦積みでは本文が inner 幅いっぱいに広がる。14pxの本文が長すぎる行長に
       ならないよう、この帯だけ内側の上限を絞る */
    max-width: 42.5em;
  }
  .company-hero__body {
    display: block;
  }
  .company-hero__photo {
    max-width: 100%;
    margin: 0 auto;
  }
  .company-hero__text {
    width: auto;
    /* OOHグラフィックが写真下へはみ出す分を確保（SPと同じ考え方） */
    margin-top: 6.25em;
  }
}
/*--- 2. 会社概要 ---*/
.company-overview {
  margin-top: 5.3125em;
}
@media screen and (max-width: 768px) {
  .company-overview {
    margin-top: 3.75em;
  }
}

.company-overview__inner {
  /* Figma: テーブル幅815・中央寄せ。ラベルもテーブル左端に揃う */
  max-width: 50.9375em;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .company-overview__inner {
    max-width: none;
    padding: 0 1.5625em;
  }
}

.company-overview__table {
  width: 100%;
  /* Figma: ラベル下端→テーブル上端 75px */
  margin-top: 2.1875em;
  border-collapse: collapse;
}
@media screen and (max-width: 768px) {
  .company-overview__table {
    margin-top: 1.25em;
  }
}

.company-overview__row {
  border-top: 1px solid #2c2c2c;
}
.company-overview__row:last-child {
  border-bottom: 1px solid #2c2c2c;
}

.company-overview__label {
  width: 11.6em;
  background-color: #f3f3f3;
  padding: 1.6em 0.6666666667em 1.6em 0.6666666667em;
  font-weight: 500;
  font-size: 0.9375em;
  line-height: 1.448;
  letter-spacing: 0.1em;
  text-align: center;
  vertical-align: middle;
}
@media screen and (max-width: 768px) {
  .company-overview__label {
    width: 7.1428571429em;
    padding: 1.1428571429em 0.5714285714em 1.1428571429em 0.5714285714em;
    font-size: 0.875em;
  }
}

.company-overview__value {
  padding: 1.6em 0.6666666667em 1.6em 1.9333333333em;
  font-weight: 500;
  font-size: 0.9375em;
  line-height: 1.448;
  letter-spacing: 0.1em;
  vertical-align: middle;
}
@media screen and (max-width: 768px) {
  .company-overview__value {
    padding: 1.1428571429em 0 1.1428571429em 1em;
    font-size: 0.875em;
  }
}

.company-overview__value ul li {
  text-indent: -1.1em;
  padding-left: 1.1em;
}

.company-overview__address {
  font-size: 1em;
}
@media screen and (max-width: 768px) {
  .company-overview__address {
    font-size: 1em;
  }
}

.company-overview__address + .company-overview__address {
  margin-top: 1.4666666667em;
}

/* 事業内容の行のみラベル上揃え・リストはline-height 2.0 */
.company-overview__row--business .company-overview__value {
  line-height: 2;
}

/*--- 3. グループ会社 ---*/
.company-group {
  margin-top: 5.9375em;
}
@media screen and (max-width: 768px) {
  .company-group {
    margin-top: 5em;
  }
}

.company-group__inner {
  max-width: 50.9375em;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .company-group__inner {
    max-width: none;
    padding: 0 1.5625em;
  }
}

.company-group__name {
  margin-top: 1.5em;
  font-weight: 700;
  font-size: 1.125em;
  line-height: 1.448;
  letter-spacing: 0.1em;
}
@media screen and (max-width: 768px) {
  .company-group__name {
    font-size: 1em;
  }
}

.company-group__card {
  display: block;
  width: 40.625em;
  /* 高さ161: 上27 + ロゴ70 + 間15 + ピル26 + 下23 */
  margin: 1.6875em auto 0;
  padding: 1.6875em 0 1.4375em;
  background-color: #fff;
  border: 1px solid #2c2c2c;
  border-radius: 0.9375em;
  text-align: center;
  text-decoration: none;
  transition: opacity 0.3s;
}
@media screen and (max-width: 768px) {
  .company-group__card {
    width: 100%;
  }
}

.company-group__card:hover {
  opacity: 0.85;
}

.company-group__logo {
  display: block;
  width: 13.4375em;
  height: auto;
  margin: 0 auto;
}

.company-group__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6618133686em;
  width: 14.0083829693em;
  height: 2.8678579307em;
  margin: 1.6545334216em auto 0;
  background-color: #2c2c2c;
  border-radius: 999px;
  font-family: "Jost", sans-serif;
  font-weight: 500;
  font-size: 0.566625em;
  letter-spacing: 0.05em;
  color: #fff;
}
@media screen and (max-width: 768px) {
  .company-group__cta {
    font-size: 0.6875em;
  }
}

.company-group__cta-arrow {
  width: 0.6618133686em;
  height: auto;
}
/*# sourceMappingURL=style_company.css.map */