/* ============================================================================
   📦 BLOCKS.CSS — 再利用ブロックの基本装飾
   ============================================================================
   ここには template-parts/blocks/ の各ブロックに対応するスタイルを書く。

   ファイルの役割:
   - block-* クラスの基本装飾（色、フォント、padding、内部レイアウト）
   - PC / SP 配置の自動切り替え（CSS 変数で）
   - pc-only / sp-only のヘルパー

   触ってよい範囲:
   - 各ブロックの装飾、フォントサイズ、padding、内部レイアウト
   - メディアクエリでの調整
   触ってはいけない範囲:
   - FFF Grid System 自体（theme-grid.css）
   ============================================================================ */

/* ===== PC / SP 配置の自動切り替え（CSS 変数）=====
   各ブロックは style 属性で --pc-row, --sp-row 等を持つ。
   ここで CSS 変数の var(--row) などを切り替える。 */

/* デフォルト：PC 配置を採用 */
.fff-grid__block {
  --row: var(--pc-row, 1);
  --col: var(--pc-col, 1);
  --w:   var(--pc-w, 1);
  --h:   var(--pc-h, 1);
}

/* SP / タブレット：SP 配置に切り替え（sp が無ければ pc を流用） */
@media (max-width: 1023px) {
  .fff-grid__block {
    --row: var(--sp-row, var(--pc-row, 1));
    --col: var(--sp-col, var(--pc-col, 1));
    --w:   var(--sp-w,   var(--pc-w, 1));
    --h:   var(--sp-h,   var(--pc-h, 1));
  }
}

/* ===== pc-only / sp-only ヘルパー ===== */
@media (min-width: 1024px) {
  .sp-only { display: none !important; }
}
@media (max-width: 1023px) {
  .pc-only { display: none !important; }
}

/* ============================================================================
   block-decoration — 装飾の黒塗り（中身なし）
   ============================================================================ */
.block-decoration {
  /* fff-grid__block--fill-black が背景を当てる、追加スタイル不要 */
}

/* ============================================================================
   block-label — 黒塗り + eyebrow + 白枠タイトル
   ============================================================================ */
.block-label {
  position: relative;
}
.block-label__inner {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4em;
}
.block-label__eyebrow {
  font-family: var(--font-accent);
  color: var(--fff-white);
  font-size: var(--fs-md);
  margin: 0;
  letter-spacing: 0.05em;
}
.block-label__pill {
  background: var(--fff-white);
  color: var(--fff-black);
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  font-weight: 600;
  padding: 0.4em 1.2em;
  margin: 0;
}

/* ============================================================================
   block-image — 画像のみ（中央配置で fit）
   ============================================================================ */
.block-image {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  overflow: hidden;
}
.block-image__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ============================================================================
   block-statement — 強調 lead + 本文
   ============================================================================ */
.block-statement {
  display: flex;
  align-items: flex-start;
  padding: 25px;
}
.block-statement p {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 300;
  line-height: 1.85;
  letter-spacing: 0.02em;
  margin: 0;
}
.block-statement__lead {
  font-weight: 600;
  font-size: var(--fs-md);
  display: inline-block;
  margin-bottom: 0.6em;
}

/* ============================================================================
   block-hero — PC: 画像 + eyebrow + title + lead
                SP: 画像 + eyebrow + title（lead は別ブロック）
   ============================================================================ */
.block-hero {
  position: relative;
  background: var(--fff-white);
  overflow: hidden;
}
.block-hero__visual {
  position: absolute;
  left: -10px;
  bottom: -10px;
  width: 50%;
  height: 90%;
  margin: 0;
  z-index: 1;
}
.block-hero__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left bottom;
}
.block-hero__inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 15px;
  z-index: 2;
}
.block-hero__eyebrow {
  align-self: flex-start;
  background: var(--fff-black);
  color: var(--fff-white);
  font-size: var(--fs-xs);
  padding: 0.3em 1em;
  margin: 0;
}
.block-hero__title {
  align-self: flex-end;
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  font-weight: 400;
  margin: 0;
  text-align: right;
}
.block-hero__lead {
  align-self: flex-end;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 1.7;
  margin: 0.8em 0 0;
  max-width: 60%;
  text-align: right;
}

/* block-hero-lead — SP 専用、独立ブロック */
.block-hero-lead {
  display: flex;
  align-items: center;
  padding: 20px;
}
.block-hero-lead p {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 300;
  line-height: 1.85;
  letter-spacing: 0.02em;
  margin: 0;
}

/* ============================================================================
   block-pmv (Purpose / Mission / Vision)
   PC: 1ブロックに title + lead + body を flex 縦並び
   SP: heading カード + body カードを別ブロックで重ねる
   ============================================================================ */

/* PC 用 */
.block-pmv--pc {
  display: flex;
  flex-direction: column;
  padding: 20px;
  gap: 0.6em;
}
.block-pmv__title {
  font-family: var(--font-accent);
  font-size: var(--fs-lg);
  color: var(--fff-black);
  margin: 0;
  letter-spacing: 0.05em;
}
.block-pmv__lead {
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1.5;
  margin: 0;
  color: var(--fff-black);
}
.block-pmv__body {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 1.85;
  margin: 0.6em 0 0;
  color: var(--color-ink);
}

/* SP 用 heading カード */
.block-pmv-heading {
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.8em;
  z-index: 2;
  position: relative;
}
.block-pmv-heading__title {
  font-family: var(--font-accent);
  font-size: var(--fs-lg);
  color: var(--fff-black);
  margin: 0;
  letter-spacing: 0.05em;
}
.block-pmv-heading__lead {
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1.6;
  margin: 0;
  color: var(--fff-black);
}

/* SP 用 body カード（heading と重なる、下に来る） */
.block-pmv-body {
  padding: 20px;
  padding-top: calc(var(--fff-grid-cell-size, 100px) * 2 + 20px);
  z-index: 1;
  position: relative;
}
.block-pmv-body__text {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 1.85;
  letter-spacing: 0.02em;
  margin: 0;
}

/* ============================================================================
   block-value-body — 段落多数
   ============================================================================ */
.block-value-body {
  padding: 30px;
  display: flex;
  align-items: center;
}
.block-value-body__inner {
  width: 100%;
}
.block-value-body p {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 2.1;
  letter-spacing: 0.02em;
  margin: 0 0 1em 0;
}
.block-value-body p:last-child {
  margin-bottom: 0;
}

/* ============================================================================
   block-profile-table — 会社概要テーブル
   ============================================================================ */
.block-profile-table {
  padding: 25px;
  display: flex;
  align-items: center;
}
.block-profile-table__table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
}
.block-profile-table__table tr {
  border-bottom: 1px solid var(--fff-beige);
}
.block-profile-table__table tr:last-child {
  border-bottom: none;
}
.block-profile-table__table th,
.block-profile-table__table td {
  padding: 12px 8px;
  text-align: left;
  vertical-align: top;
  line-height: 1.7;
}
.block-profile-table__table th {
  width: 25%;
  font-weight: 600;
  white-space: nowrap;
}

/* ============================================================================
   block-timeline — 職歴 + 年表
   ============================================================================ */
.block-timeline {
  padding: 25px;
  display: flex;
  flex-direction: column;
  gap: 1.5em;
  overflow-y: auto;
}
.block-timeline__career {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
}
.block-timeline__career-label {
  font-family: var(--font-accent);
  font-size: var(--fs-sm);
  color: var(--fff-black);
  margin: 0;
  letter-spacing: 0.05em;
}
.block-timeline__career-list {
  margin: 0;
  padding: 0 0 0 1em;
  list-style: disc;
  font-size: var(--fs-sm);
  line-height: 1.7;
}
.block-timeline__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6em;
}
.block-timeline__item {
  display: flex;
  gap: 1em;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 1.7;
}
.block-timeline__date {
  font-weight: 600;
  width: 3em;
  flex-shrink: 0;
}
.block-timeline__event { flex: 1; }

/* ============================================================================
   block-profile-body — PC: 1ブロックに 5要素 / SP: 5ブロック分割
   ============================================================================ */

/* PC 用 1ブロック：左カラム（写真+資格+SNS）と右カラム（名前+本文） */
.block-profile-body--pc {
  display: flex;
  flex-direction: row;
  gap: 20px;
  padding: 25px;
}
.block-profile-body__left {
  flex: 0 0 35%;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.block-profile-body__main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* 写真フレーム共通 */
.block-profile-body__photo {
  margin: 0;
  padding: 15px;
  overflow: visible;
}
.block-profile-body__photo-frame {
  border: 1px solid var(--fff-black);
  width: 100%;
  height: 100%;
  position: relative;
  overflow: visible;
}
.block-profile-body__photo-frame img {
  width: 100%;
  height: calc(100% + 12px);
  margin-top: -12px;
  object-fit: cover;
  object-position: center top;
}

/* 名前 */
.block-profile-body__name-wrap {
  padding: 10px 15px;
  text-align: right;
}
.block-profile-body__name {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.5em;
}
.block-profile-body__name-label {
  font-size: var(--fs-xs);
  font-weight: 400;
}
.block-profile-body__role {
  font-size: var(--fs-sm);
  font-weight: 400;
  margin: 0.3em 0 0;
}

/* 本文 */
.block-profile-body__body {
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 1em;
}
.block-profile-body__body p {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 1.85;
  letter-spacing: 0.02em;
  margin: 0;
}

/* 資格 */
.block-profile-body__credits {
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 0.6em;
}
.block-profile-body__credits-label {
  font-family: var(--font-accent);
  font-size: var(--fs-sm);
  color: var(--fff-black);
  letter-spacing: 0.05em;
}
.block-profile-body__credits ul {
  margin: 0;
  padding: 0 0 0 1em;
  list-style: disc;
}
.block-profile-body__credits li {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 1.7;
}

/* SNS */
.block-profile-body__socials {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px;
}
.block-profile-body__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--fff-black);
  color: var(--fff-white);
  border-radius: 50%;
  text-decoration: none;
}
.block-profile-body__social svg {
  width: 18px;
  height: 18px;
}

/* SP 用：各要素が独立ブロック → padding 等は共通スタイルを継承（上記）*/
.block-profile-body__photo-block,
.block-profile-body__name-block,
.block-profile-body__body-block,
.block-profile-body__credits-block,
.block-profile-body__socials-block {
  /* fff-grid__block の通常配置に従う */
}