/* ============================================
   追加CSS 目次
     1. WORKS   … 本文を最初から全文表示
     2. SERVICE … 写真のサイズ統一・枠の高さ揃え
     3. COMPANY … PCでひと回り縮小
     4. NINE-GRID … 3×3の写真グリッド
     5. スマホ表示(600px以下)の調整
============================================ */


/* ============================================
   1. WORKS — 「詳しく見る」を廃止して本文を全文表示
   (テーマ側の開閉スタイルを打ち消すため !important を使用)
============================================ */
.block .detail {
  display: block !important;
  max-height: none !important;
  height: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow: visible !important;
  white-space: pre-line;   /* 元コードの空行を段落の区切りとして表示 */
}


/* ============================================
   2. SERVICE — 写真と枠の整え
============================================ */

/* 写真:形を4:3にそろえ、マスからはみ出させない
   (テーマ側の画像スタイルを打ち消すため !important を使用) */
.svc-photo {
  width: 100% !important;
  max-width: 100% !important;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;       /* はみ出た部分は切る */
  display: block;
  margin-bottom: 16px;
}

/* マス目が写真の大きさに引っぱられて広がるのを防ぐ */
.grid[data-kind="service"] .cell {
  min-width: 0;
  overflow: hidden;
}

/* 3つの枠の高さを揃える */
.svc-box {
  height: 100%;
  box-sizing: border-box;
}


/* ============================================
   3. COMPANY — PCでは約20%縮小
============================================ */
.company {
  max-width: 610px;        /* 横幅 760px → 610px */
  padding: 64px 5vw;       /* 余白 80px → 64px */
}

.company h2 {
  font-size: 11px;         /* COMPANY見出し 14px → 11px */
}

.company .mission {
  font-size: 16px;         /* 理念の一言 20px → 16px */
}

.company .sub-label {
  font-size: 10px;         /* PROFILE / HISTORY 12px → 10px */
}

.company th,
.company td {
  font-size: 11px;         /* 表の文字 14px → 11px */
  padding: 11px 6px;       /* 行間もひと回り詰める */
}


/* ============================================
   4. NINE-GRID — 3×3の写真グリッド
============================================ */


/* ============================================
   5. スマホ表示(600px以下)の調整
============================================ */
@media (max-width: 600px) {

  /* WORKS 本文:文字を小さく、左揃えに */
  .block .detail {
    font-size: 13px;
    line-height: 2;
    text-align: left;
    padding: 0 24px;
  }

  /* WORKS 見出しまわりもひと回り小さく */
  .block h2 {
    font-size: 16px;
    letter-spacing: 0.05em;
  }

  .block .desc {
    font-size: 13px;
    margin-bottom: 24px;   /* 一言と長文の間に呼吸を入れる */
  }

  /* セクションの上下余白を詰めて間延びを防ぐ */
  .block {
    padding: 40px 0;
  }

  /* COMPANY:PC用の縮小設定をスマホでは解除 */
  .company {
    max-width: 100%;
    padding: 40px 20px;
  }
}