/* Company (会社概要) CSS
 * HPP HP — Figma file hTk2UtIZPusbWScukKNgMV
 * Node: 136:2611 (PC/会社概要-white)
 *
 * 会社概要ページの固有セクション:
 *   - .philosophy : 経営理念見出しブロック
 *   - .mvv-card   : Mission / Vision / Value カード (navy + rainbow blend)
 *   - .greeting   : 代表メッセージ (写真 + 本文)
 *   - .company-info : 会社情報の定義表
 *
 * PC のみ。SP は responsive.css に書く。
 */

/* =====================
 * 経営理念 (Figma 136:2626)
 * ===================== */

.philosophy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}

.philosophy__label {
  font-family: var(--font-jp-sans);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: 0.9px;
  color: var(--color-navy-primary);
}

.philosophy__heading {
  font-family: 'Shippori Mincho', serif;
  font-weight: 500;
  font-size: 48px;
  line-height: 1.5;
  letter-spacing: 2.4px;
  color: var(--color-navy-primary);
  font-feature-settings: 'palt' 1;
}

.philosophy__lead {
  font-family: var(--font-jp-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.75;
  color: var(--color-navy-secondary);
}

/* =====================
 * Mission / Vision / Value カード
 * Figma 136:2630 — 1080×878 / radius 40 / navy + rainbow blend
 * ===================== */

.mvv-card {
  position: relative;
  width: 100%;
  max-width: 1080px;          /* Figma 136:2630 の基本幅 */
  margin-inline: auto;        /* margin: 0 auto だと親側の section gap (margin-top) が消える */
  border-radius: 40px;
  overflow: hidden;
  background-color: var(--color-blue-primary);
}

/* rainbow image, mix-blend-multiply (Figma 136:2632) */
.mvv-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../images/page-header-bg.jpg");
  background-size: cover;
  background-position: center;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.mvv-card__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 64px;
  padding: 80px;
}

.mvv-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 80px;
  align-items: start;
}

.mvv-row__label {
  font-family: var(--font-en-serif);  /* Cormorant Garamond */
  font-weight: 700;
  font-size: 48px;
  line-height: 1.5;
  letter-spacing: 2.4px;
  text-align: center;
  font-feature-settings: 'palt' 1;
  background: linear-gradient(160deg, var(--gradient-gold-start) 0%, var(--gradient-gold-end) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mvv-row__body {
  display: flex;
  flex-direction: column;
  gap: 26px;
  min-width: 0;
}

.mvv-row__title {
  font-family: 'Shippori Mincho', serif;
  font-weight: 600;
  font-size: 32px;
  line-height: 1.5;
  letter-spacing: 1.6px;
  color: var(--color-white);
  font-feature-settings: 'palt' 1;
}

/* Figma 136:2643/2653 は whitespace-nowrap。基本サイズ (≥1200px) は 1 行固定。
 * Google Fonts 版 Shippori Mincho には palt (全角→比例幅) が含まれないため、
 * Figma に比べて Japanese 文字が広がりがち。letter-spacing をやや負にして補正。
 * <1200px ではカード幅が縮むので折り返しを許可。 */
@media (min-width: 1200px) {
  .mvv-row__title {
    white-space: nowrap;
    letter-spacing: -0.04em;
  }
}

.mvv-row__text {
  font-family: var(--font-jp-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.75;
  color: #f4f9ff;             /* blue/100 */
}

.mvv-row__text p + p { margin-top: 0; }

/* Divider lines (Figma 136:2639) */
.mvv-card__divider {
  height: 1px;
  background-color: rgba(244, 249, 255, 0.3);
  border: none;
  margin: 0;
}

/* =====================
 * 代表メッセージ (Figma 136:2656)
 * 1080 grid: 352px image + text
 * ===================== */

.greeting {
  display: grid;
  grid-template-columns: 352px 1fr;
  gap: 96px;
  align-items: start;
}

.greeting__image {
  width: 352px;
  height: 352px;
}

.greeting__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.greeting__body {
  display: flex;
  flex-direction: column;
  gap: 40px;
  color: var(--color-navy-primary);
}

.greeting__lead {
  font-family: 'Shippori Mincho', serif;
  font-weight: 500;
  font-size: 32px;
  line-height: 1.5;
  letter-spacing: 1.6px;
}

.greeting__text {
  display: flex;
  flex-direction: column;
  gap: 24px;
  font-family: var(--font-jp-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.75;
}

.greeting__signature {
  text-align: right;
}

/* =====================
 * 会社概要テーブル (Figma 136:2665)
 * Figma 上は 640px のリスト。シンプルな dl/dt/dd で組む。
 * ===================== */

.company-info {
  width: 640px;
  max-width: 100%;
  margin-inline: auto;        /* 上に同じ理由: margin-top を section gap に委ねる */
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.company-info__heading {
  font-family: var(--font-jp-sans);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.5;
  letter-spacing: 1.2px;
  text-align: center;
  color: var(--color-navy-primary);
  font-feature-settings: 'palt' 1;
}

.company-info__list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.company-info__row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 40px;
  align-items: center;
  padding: 24px 0;
  border-bottom: 1px solid rgba(26, 35, 50, 0.15);
  font-size: 18px;
  letter-spacing: 0.9px;
  color: var(--color-navy-primary);
}

.company-info__row:first-child { padding-top: 0; }
.company-info__row:last-child  { border-bottom: none; }

.company-info__row dt {
  font-family: var(--font-jp-sans);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

.company-info__row dd {
  font-family: var(--font-jp-sans);
  font-weight: 400;
  line-height: 1.75;
  margin: 0;
}