@charset "UTF-8";

/* =========================================================
   会社概要ページ 固有スタイル（company.html）
   共通パーツは common.css を参照（ヘッダー/フッター/CTA/ボタン/
   パンくず/ページヒーロー/セクション見出し .section-head）。
   #ffe4da（Figma「女性サブカラー」）はこのページ限定のためローカル定義。
   ========================================================= */

/* ページヒーロー：company-hero.jpg はビルを見上げる構図。
   common の center 63% だと空ばかりになるため下寄りに上書き（このページ固有） */
.page-hero__bg {
  object-position: center 70%;
}

/* ---------- セクション共通レイアウト ---------- */
.company-sec {
  padding: 50px 20px;
}
.company-sec__inner {
  /* サイト共通 700px 系コンテンツ幅で統一 */
  max-width: 700px;
  margin: 0 auto;
}
/* 画像グリッド系（FC実績・メディア掲載）は広めの共通コンテンツ幅で表示 */
.company-sec__inner--wide {
  max-width: var(--content);
}
.company-sec__inner > .section-head {
  margin-bottom: 30px;
}

/* ビジョン：上から下へ #ffe4da → #ef9f84 → #df5a2e のグラデ帯（Figma 準拠） */
.company-sec--vision {
  background: linear-gradient(180deg, #ffe4da 0%, #ef9f84 50%, #df5a2e 100%);
}
/* 実績：女性ベースカラー帯 */
.company-sec--record {
  background: var(--color-base);
}

/* =========================================================
   会社情報（dl で key-value。SP では dt/dd が縦積みになり横スクロール不要）
   ========================================================= */
.company-table {
  margin: 0;
}
.company-table__row {
  display: flex;
  gap: 100px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 14px;
  line-height: 1.26;
}
.company-table__row:first-child {
  padding-top: 0;
}
.company-table dt {
  flex: 0 0 60px;
  font-weight: 700;
  color: var(--color-text);
}
.company-table dd {
  margin: 0;
  color: var(--color-text);
}
.company-table dd .company-table__note {
  display: block;
  font-size: 12px;
  line-height: 1.43;
}
/* 事業内容のドット付き横並び */
.company-biz {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}
.company-biz li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.company-biz li::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
}

/* =========================================================
   ビジョンカード
   ========================================================= */
.vision-card {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 30px;
  background: var(--color-white);
  border-radius: var(--radius-card);
}
/* 理念 / ビジョン：ラベル + 一文の2行 */
.vision-card__statements {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
}
.vision-card__statement {
  display: flex;
  gap: 20px;
  align-items: baseline;
}
.vision-card__label {
  flex: 0 0 80px;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-primary);
}
.vision-card__text {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  font-weight: 700;
  font-size: clamp(17px, 2.4vw, 20px);
  line-height: 1.5;
  color: var(--color-text);
}

/* 大切にする4つの価値：2×2 グリッド */
.vision-values {
  padding-top: 30px;
  border-top: 1px solid var(--color-border);
}
.vision-values__title {
  margin-bottom: 20px;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  color: var(--color-text);
}
.vision-values__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.vision-values__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 20px;
  background: #ffe4da;
  border-radius: 12px;
}
.vision-values__name {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  color: var(--color-primary);
}
.vision-values__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.57;
  color: var(--color-text);
}

/* =========================================================
   代表挨拶カード
   ========================================================= */
.message-card {
  display: flex;
  gap: 30px;
  align-items: flex-start;
  background: var(--color-white);
}
.message-card__photo {
  flex: 0 0 220px;
  width: 220px;
  height: 220px;
  border-radius: var(--radius-card);
  overflow: hidden;
}
.message-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 45% 20%;   /* 顔（上寄り）を見せる */
}
.message-card__body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.message-card__head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-accent-gold);
}
.message-card__name {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
  color: var(--color-text);
}
.message-card__title {
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-text);
}
.message-card__text {
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-size: 14px;
  line-height: 1.57;
  color: var(--color-text);
}
.message-card__text p {
  margin: 0;
}

/* =========================================================
   実績（本文 + 主な実績事例ボックス）
   ========================================================= */
.record-text {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 30px;
  font-size: 14px;
  line-height: 1.71;
  color: var(--color-text);
}
.record-text p {
  margin: 0;
}
.record-text .is-accent {
  font-weight: 700;
  color: var(--color-primary);
}

/* オレンジヘッダー + 白ボディの枠（実績・メディアで共用） */
.panel {
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-white);
}
.panel__head {
  padding: 10px;
  background: var(--color-primary);
  color: var(--color-white);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.1;
  text-align: center;
}
.panel__body {
  border: 1px solid var(--color-primary);
  border-top: none;
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  padding: 20px 30px;
}

/* 実績事例の各行 */
.case-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.case-row {
  display: flex;
  gap: 20px;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-border);
  font-size: 14px;
  line-height: 1.71;
  color: var(--color-text);
}
.case-row:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
.case-row__tag {
  flex: 0 0 auto;
  align-self: flex-start;
  padding: 1px 4px;
  background: var(--color-accent-gold);
  color: var(--color-white);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.83;
  white-space: nowrap;
}
.case-row__text {
  margin: 0;
}
.case-row__text .is-accent {
  font-weight: 700;
  color: var(--color-primary);
}

/* =========================================================
   メディア掲載（3カラムのパネル）
   ========================================================= */
.media-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.media-grid .panel__body {
  padding: 20px;
}
.media-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.media-row {
  display: flex;
  gap: 10px;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-border);
}
.media-row:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
.media-row__logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: #ffe4da;        /* 女性サブカラー（ロゴ未投入時のプレースホルダ・ローカル定義） */
  border-radius: 4px;
  font-size: 10px;
  color: var(--color-text);
}
.media-row__name {
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-text);
}

/* =========================================================
   FC実績（バナー3カラムグリッド）
   ========================================================= */
.bnr-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.bnr-grid__item {
  display: block;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
}
.bnr-grid__item img {
  width: 100%;
  height: auto;
  display: block;
}

/* =========================================================
   メディア掲載（カテゴリ別 画像ギャラリー）
   ========================================================= */
.media-cat {
  margin-bottom: 48px;
}
.media-cat:last-child {
  margin-bottom: 0;
}
.media-cat__head {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
  color: var(--color-navy);
  margin-bottom: 20px;
}
.media-cat__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px 20px;
  align-items: start;
}
/* テレビ出演：横長画像は1カラム全幅 */
.media-cat__grid--full {
  grid-template-columns: 1fr;
  gap: 28px;
}
.media-item {
  margin: 0;
}
.media-item img {
  width: 100%;
  height: auto;
  display: block;
  /* 元画像が小さい表紙系を拡大しすぎないよう上限を設ける */
  max-width: 240px;
  border-radius: 6px;
}
.media-cat__grid--full .media-item img {
  max-width: 100%;
}
.media-item__thumb {
  display: block;
}
.media-item__title {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-primary);
  text-decoration: underline;
}
.media-item__caption {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text);
}

/* =========================================================
   レスポンシブ（ブレイクポイント 768px）
   ========================================================= */
@media (max-width: 768px) {
  .company-sec {
    padding: 40px 20px;
  }

  /* 会社情報：ラベルと値を縦積みに（横スクロール回避の定番対応） */
  .company-table__row {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .company-table dt {
    flex-basis: auto;
  }

  /* 理念・ビジョン：ラベルを上に、4つの価値は1カラム */
  .vision-card {
    padding: 24px;
  }
  .vision-card__statement {
    flex-direction: column;
    gap: 6px;
  }
  .vision-card__label {
    flex-basis: auto;
  }
  .vision-values__list {
    grid-template-columns: 1fr;
  }

  /* 代表挨拶：写真上 + 本文下 */
  .message-card {
    flex-direction: column;
    align-items: center;
  }
  .message-card__photo {
    flex-basis: auto;
  }
  .message-card__body {
    width: 100%;
  }

  /* メディア掲載（旧3パネル）：3カラム → 1カラム縦積み */
  .media-grid {
    grid-template-columns: 1fr;
  }

  /* FC実績・メディア表紙系：3カラム → 2カラム（テレビは1カラムのまま） */
  .bnr-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .media-cat__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .media-cat__grid--full {
    grid-template-columns: 1fr;
  }
}