/* ==========================================================================
   fff-foundation — 05-components.css
   ブロックの見た目（カード・ラベル・画像・Hero・装飾）

   構造:
   - .fff-block             共通の枠（box-sizing, overflow 等）
   - .fff-block__content    内枠余白 + flex（中身の整列）
   - .fff-block--{type}     ブロックの種類ごとの調整
   - .fff-block--{variant}  色のバリエーション（default/light/dark/soft/accent）
   - .fff-block__title 等   中の要素

   variant の優先順位: type よりあとに variant を書いてるので variant が後勝ち
   ========================================================================== */

/* ==========================================================================
   共通: .fff-block / .fff-block__content
   ========================================================================== */
.fff-block {
    box-sizing: border-box;
    overflow: hidden;
    transition: background 0.2s ease, color 0.2s ease;
}

.fff-block__content {
    width: 100%;
    height: 100%;
    padding: var(--fff-block-padding);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--fff-space-2);
}

/* 中身の要素 */
.fff-block__title {
    font-family: var(--fff-font-heading);
    font-size: var(--fff-fs-lg);
    line-height: var(--fff-lh-tight);
    font-weight: normal;
    margin: 0;
}

.fff-block__body {
    font-family: var(--fff-font-body);
    font-size: var(--fff-fs-sm);
    line-height: var(--fff-lh-normal);
}

.fff-block__body p {
    margin: 0 0 var(--fff-space-2) 0;
}
.fff-block__body p:last-child {
    margin-bottom: 0;
}

.fff-block__eyebrow {
    font-family: var(--fff-font-accent);
    font-size: var(--fff-fs-xs);
    letter-spacing: var(--fff-ls-wide);
    line-height: 1;
    display: inline-block;
}

.fff-block__lead {
    font-family: var(--fff-font-body);
    font-size: var(--fff-fs-md);
    line-height: var(--fff-lh-normal);
    margin: 0;
}

/* ==========================================================================
   variant（色のバリエーション）
   light / gray-soft / gray / dark の 4 種
   ========================================================================== */
.fff-block--light {
    background: var(--fff-color-paper);
    color: var(--fff-color-ink);
}

.fff-block--gray-soft {
    background: var(--fff-color-gray-soft);
    color: var(--fff-color-ink);
}

.fff-block--gray {
    background: var(--fff-color-gray);
    color: var(--fff-color-paper);
}

.fff-block--dark {
    background: var(--fff-color-black);
    color: var(--fff-color-paper);
}

/* ==========================================================================
   block 種類別の調整
   ========================================================================== */

/* ===== block-text: テキストだけ、中央寄せ ===== */
.fff-block--text .fff-block__content {
    justify-content: center;
}

/* ===== block-card: タイトル+本文、中央寄せ ===== */
.fff-block--card .fff-block__content {
    justify-content: center;
    gap: var(--fff-space-3);
}

/* ===== block-label: 黒背景 + eyebrow(英字) + 白い矢印型ピル(日本語タイトル) =====
   PC: 縦長使用想定 (2マス x 3 行程度)
   SP: 横長使用想定 (8マス x 2 行程度) */
.fff-block--label {
    background: var(--fff-color-black);
    color: var(--fff-color-paper);
}
.fff-block--label .fff-block__content {
    justify-content: center;
    align-items: flex-end;       /* PC/タブレット: 右揃え（SP は 07-sp.css で左に戻す） */
    text-align: right;
    gap: var(--fff-space-3);
    padding: var(--fff-block-padding);
}

/* eyebrow: 英字（Yeseva）で大きめに */
.fff-block--label .fff-block__eyebrow {
    font-family: var(--fff-font-accent);
    font-size: var(--fff-fs-md);
    color: var(--fff-color-paper);
    letter-spacing: var(--fff-ls-wide);
}

/* タイトル: 白い形状ピルに入れる。
   形状は .fff-shape--{name} で切り替え（10 種類）
   ベースのスタイルはここ、形状ごとの clip-path は下の Shape 定義で */
.fff-block--label .fff-block__title {
    display: inline-block;
    background: var(--fff-color-paper);
    color: var(--fff-color-ink);
    font-family: var(--fff-font-heading);
    font-size: var(--fff-fs-md);
    line-height: 1;
    padding: var(--fff-space-2) calc(var(--fff-space-3) + 12px) var(--fff-space-2) calc(var(--fff-space-3) + 12px);
    /* 影で浮かせる（drop-shadow は clip-path と相性◎） */
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.15));
}

/* ==========================================================================
   Shape variants: 白いピルの形状（block-label のタイトル箱に適用）
   各 shape は clip-path で形を切る。pill / rounded は border-radius を使う
   ========================================================================== */

/* 1. right-arrow - 右側がとんがる旗型（デフォルト） */
.fff-shape--right-arrow .fff-block__title {
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
}

/* 2. left-arrow - 左側がとんがる */
.fff-shape--left-arrow .fff-block__title {
    clip-path: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 50%);
}

/* 3. both-arrow - 両端がとんがる */
.fff-shape--both-arrow .fff-block__title {
    clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%);
}

/* 4. chevron - 右側の中央が内側に凹む（シェブロン） */
.fff-shape--chevron .fff-block__title {
    clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%);
}

/* 5. notch - 右上だけ斜めカット */
.fff-shape--notch .fff-block__title {
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}

/* 6. ribbon - 両端の中央が内側に V カット（リボン裾） */
.fff-shape--ribbon .fff-block__title {
    clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%, 12px 50%);
}

/* 7. pill - 完全丸ピル（border-radius、clip-path 不使用） */
.fff-shape--pill .fff-block__title {
    border-radius: 9999px;
    clip-path: none;
}

/* 8. rounded - 軽い角丸 */
.fff-shape--rounded .fff-block__title {
    border-radius: var(--fff-radius-sm);
    clip-path: none;
}

/* 9. tag - 左に小さな V 切り欠き + 右に矢印（タグ風） */
.fff-shape--tag .fff-block__title {
    clip-path: polygon(0 50%, 8px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 8px 100%);
}

/* 10. bookmark - 下部が V カット（しおり） */
.fff-shape--bookmark .fff-block__title {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 12px), 0 100%);
    /* bookmark は下に伸びるので padding 調整 */
    padding-bottom: calc(var(--fff-space-2) + 12px);
}

/* 11. speech-bubble - 角丸 + 左下に三角しっぽ */
.fff-shape--speech-bubble .fff-block__title {
    border-radius: var(--fff-radius-md);
    clip-path: none;
    position: relative;
    overflow: visible;
}
.fff-shape--speech-bubble .fff-block__title::after {
    content: '';
    position: absolute;
    left: 28px;
    top: 100%;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 12px solid var(--fff-color-paper);
}

/* 12. thought-bubble - 角丸 + 下に小さな円 2 つ（思考雲） */
.fff-shape--thought-bubble .fff-block__title {
    border-radius: var(--fff-radius-md);
    clip-path: none;
    position: relative;
    overflow: visible;
}
.fff-shape--thought-bubble .fff-block__title::after {
    content: '';
    position: absolute;
    left: 24px;
    top: calc(100% + 6px);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--fff-color-paper);
    /* もう1つの小さい円は box-shadow で */
    box-shadow: -12px 8px 0 -3px var(--fff-color-paper);
}

/* 13. bordered - 太い黒枠（白背景、シンプル） */
.fff-shape--bordered .fff-block__title {
    border: 3px solid var(--fff-color-black);
    border-radius: 0;
    clip-path: none;
    filter: none;  /* 太枠が drop-shadow と重なると変なので影は消す */
}

/* ==========================================================================
   frame オプション: 親フレームの表示制御
   ========================================================================== */

/* frame='hide': 親の背景を透明に → 白ピルだけが見える */
.fff-block--label.fff-block--frameless {
    background: transparent;
    color: var(--fff-color-ink);
}
.fff-block--label.fff-block--frameless .fff-block__eyebrow {
    color: var(--fff-color-ink);
}

/* ==========================================================================
   eyebrow_style オプション: eyebrow の見た目
   ========================================================================== */

/* eyebrow_style='tag': 黒タグ風（POINT 等） */
.fff-eyebrow--tag .fff-block__eyebrow {
    background: var(--fff-color-black);
    color: var(--fff-color-paper);
    padding: 4px 12px;
    font-family: var(--fff-font-body);
    font-size: var(--fff-fs-xs);
    font-weight: bold;
    letter-spacing: var(--fff-ls-wide);
    line-height: 1;
    display: inline-block;
}
/* frameless 時も tag は黒のまま */
.fff-block--frameless.fff-eyebrow--tag .fff-block__eyebrow {
    color: var(--fff-color-paper);
    background: var(--fff-color-black);
}

/* ==========================================================================
   icon サポート: 見出しの上に円形アイコンが半分はみ出る形
   (参考: h2 + h2:before + h2 i の構造)

   - 円のサイズ: 80x80px
   - 円の border: 見出しと同じ太さ・色 → 連続感が出る
   - 円が見出しの上端に半分はみ出る (top: -40px)
   - bordered shape との相性が特に良い
   ========================================================================== */

.fff-block--label .fff-block__title-wrap {
    position: relative;
    display: inline-block;
}

/* icon ある時: title の上に円が半分はみ出る。
   円は title の box の外に top: -40px で配置。
   円の background が title の上 border を覆って「枠線が繋がる」演出。
   親（content）に margin-top で円の上半分の場所を確保 */
.fff-block--has-icon .fff-block__title-wrap {
    margin-top: 40px;
}

.fff-block--has-icon .fff-block__icon {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 80px;
    background: var(--fff-color-paper);
    border: 2px solid var(--fff-color-black);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    line-height: 1;
    z-index: 2;
}
.fff-block--has-icon .fff-block__icon svg {
    width: 36px;
    height: 36px;
}
.fff-block--has-icon .fff-block__title {
    margin-top: 0;
}

/* ==========================================================================
   shape: tag-pointed - 左に丸印 + 左がとんがった矢印（タグ風、白黒）
   ========================================================================== */
.fff-shape--tag-pointed .fff-block__title {
    clip-path: polygon(20px 0, 100% 0, 100% 100%, 20px 100%, 0 50%);
    padding-left: calc(var(--fff-space-3) + 24px);  /* 丸印用の左余白 */
    position: relative;
}
/* 丸印（::before だと clip-path に切られるので、別要素にしたい場合は title-wrap に乗せる）
   → clip-path の中に収めるため background-image で表現 */
.fff-shape--tag-pointed .fff-block__title {
    background-image: radial-gradient(
        circle 4px at 26px 50%,
        var(--fff-color-black) 0,
        var(--fff-color-black) 4px,
        transparent 4px
    );
    background-color: var(--fff-color-paper);
}

/* ==========================================================================
   block-ribbon-heading: 薄グレー親 + 黒リボン装飾 + 白枠見出し
   ========================================================================== */
.fff-block--ribbon-heading {
    background: var(--fff-color-gray-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--fff-space-3);
}

.fff-block--ribbon-heading .fff-block__inner {
    position: relative;
    background: var(--fff-color-paper);
    border: 2px solid var(--fff-color-black);
    padding: var(--fff-space-3) var(--fff-space-3) var(--fff-space-3) calc(var(--fff-space-3) + 50px);
    width: 100%;
    min-height: 70px;
    display: flex;
    align-items: center;
}

/* リボン: 黒い旗形の装飾を左上に */
.fff-block--ribbon-heading .fff-block__ribbon {
    position: absolute;
    left: -6px;
    top: -8px;
    width: 40px;
    height: 52px;
    background: var(--fff-color-black);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%);
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.2));
}

.fff-block--ribbon-heading .fff-block__title {
    font-family: var(--fff-font-heading);
    font-size: var(--fff-fs-lg);
    line-height: var(--fff-lh-tight);
    font-weight: normal;
    color: var(--fff-color-ink);
    margin: 0;
}

/* ===== block-image: 画像、パディングなし =====
   variant 指定時のみ padding が入る → 画像が枠より小さくなり、周囲に背景色が見える */
.fff-block--image {
    padding: 0;
}
.fff-block__image {
    width: 100%;
    height: 100%;
    object-fit: cover;  /* デフォルト */
    display: block;
}
.fff-block--fill-contain .fff-block__image {
    object-fit: contain;
}

/* variant 指定時: padding で画像を縮小（背景色が周囲に見える） */
.fff-block--image.fff-block--light,
.fff-block--image.fff-block--gray-soft,
.fff-block--image.fff-block--gray,
.fff-block--image.fff-block--dark {
    padding: var(--fff-space-3);
}

/* ===== block-hero: 大きい、左寄せ ===== */
.fff-block--hero .fff-block__content {
    justify-content: center;
    align-items: flex-start;
    gap: var(--fff-space-3);
}
.fff-block__eyebrow--hero {
    font-size: var(--fff-fs-display-xl);
    line-height: 1;
}
.fff-block__title--hero {
    font-size: var(--fff-fs-display);
    line-height: var(--fff-lh-tight);
}

/* ===== block-decoration: 中身なし、装飾だけ ===== */
.fff-block--decoration {
    /* 背景色は variant で決まる。padding 不要 */
    padding: 0;
}

/* outline variant: 黒い枠線だけ（背景なし） */
.fff-block--decoration.fff-block--outline {
    background: transparent;
    border: 2px solid var(--fff-color-black);
    box-sizing: border-box;
}

/* ==========================================================================
   block-hero with image: 画像と中身を 横並び（PC） / 縦並び（SP）
   ========================================================================== */
.fff-block--hero {
    overflow: hidden;
}
.fff-block--hero .fff-block__hero-visual {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.fff-block--hero .fff-block__hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* 画像 + content を持つ Hero の場合、絶対配置で重ねる */
.fff-block--hero .fff-block__hero-visual + .fff-block__content {
    position: absolute;
    inset: 0;
}

/* ==========================================================================
   block-statement: lead + 本文の強調ブロック
   ========================================================================== */
.fff-block--statement .fff-block__content {
    justify-content: center;
    text-align: center;          /* PC/タブレット: 中央寄せ（SP は 07-sp.css で左に戻す） */
    gap: var(--fff-space-3);
}

/* 個別要素のタイポ（margin は base.css でリセット済み） */
.fff-block__statement-lead {
    font-family: var(--fff-font-heading);
    font-size: var(--fff-fs-lg);
    line-height: var(--fff-lh-tight);
    font-weight: bold;           /* PC/タブレット: 太字（SP は 07-sp.css で normal に戻す） */
}
.fff-block__statement-body {
    font-family: var(--fff-font-body);
    font-size: var(--fff-fs-sm);
    line-height: var(--fff-lh-normal);
}

/* ==========================================================================
   block-pmv: Purpose / Mission / Vision
   PC: 1 ブロック / SP: heading + body 2 ブロック分離
   ========================================================================== */

/* 共通: 中身レイアウト */
.fff-block--pmv .fff-block__content {
    justify-content: center;
    gap: var(--fff-space-3);
}

/* 個別要素のタイポ（margin は base.css でリセット済み） */
.fff-block__pmv-title {
    font-family: var(--fff-font-accent);
    font-size: var(--fff-fs-xl);
    line-height: 1;
    color: var(--fff-color-ink);
}
.fff-block__pmv-lead {
    font-family: var(--fff-font-heading);
    font-size: var(--fff-fs-md);
    line-height: var(--fff-lh-tight);
}
.fff-block__pmv-body {
    font-family: var(--fff-font-body);
    font-size: var(--fff-fs-sm);
    line-height: var(--fff-lh-normal);
}

/* SP: PMV heading ブロックを body ブロックより上に重ねる */
.fff-block--pmv-heading {
    z-index: 5;
}

/* PC 専用（1024px+）: 「タイトル上固定 + 本文 (lead + body) 中央寄せ」
   margin: auto テクニックで、3 ブロックでタイトル高さ揃え + 上下に均等な余白
   ※ min-width:1024px に閉じ込め → タブレット(.fff-block--pmv)/SP には漏れない */
@media (min-width: 1024px) {
    .fff-block--pmv .fff-block__content {
        justify-content: flex-start;
        gap: 0;
    }
    .fff-block__pmv-title {
        font-size: var(--fff-fs-display);
        margin-top: var(--fff-space-4);    /* タイトル位置を下げる */
        margin-bottom: var(--fff-space-3);
    }
    .fff-block__pmv-lead {
        font-weight: bold;                   /* PC のみ太字 */
        margin-top: auto;                    /* title と lead の間に flex 余白を push */
        margin-bottom: var(--fff-space-4);   /* lead と body の間に余白（PC） */
    }
    .fff-block__pmv-body {
        margin-bottom: auto;                 /* body と下端の間に flex 余白を push */
    }
}

/* ==========================================================================
   block-value-body: 段落多数の本文
   ========================================================================== */
.fff-block--value-body .fff-block__content {
    justify-content: center;
    gap: var(--fff-space-2);
    overflow-y: auto;
}

.fff-block--value-body p {
    font-family: var(--fff-font-body);
    font-size: var(--fff-fs-sm);
    line-height: var(--fff-lh-normal);
}

/* PC 専用（1024px+）: パディング増 + 中央寄せ + 段落間/行間広め
   ※ min-width:1024px に閉じ込め → タブレット/SP には漏れない */
@media (min-width: 1024px) {
    .fff-block--value-body .fff-block__content {
        padding: var(--fff-space-4);
        text-align: center;
        gap: var(--fff-space-3);
    }
    .fff-block--value-body p {
        line-height: var(--fff-lh-loose);
    }
}

/* ==========================================================================
   block-table: 会社概要等のテーブル
   ========================================================================== */
.fff-block--table .fff-block__content {
    justify-content: center;
    overflow-y: auto;
}
.fff-block__table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fff-fs-sm);
}
.fff-block__table th,
.fff-block__table td {
    text-align: left;
    padding: var(--fff-space-2) 0;
    border-bottom: 1px solid var(--fff-color-line);
    vertical-align: top;
    line-height: var(--fff-lh-normal);
}
.fff-block__table th {
    font-weight: normal;
    color: var(--fff-color-muted);
    width: 30%;
    padding-right: var(--fff-space-3);
}
.fff-block__table tr:last-child th,
.fff-block__table tr:last-child td {
    border-bottom: none;
}
/* テーブル内のリンクは base.css の a スタイル（accent 色 + 下線）を継承 */

/* ==========================================================================
   block-timeline: 職歴 + 年表
   ========================================================================== */
.fff-block--timeline .fff-block__content {
    justify-content: center;
    gap: var(--fff-space-3);
    overflow-y: auto;
}
.fff-block__timeline-career-label,
.fff-block__timeline-credits-label {
    font-family: var(--fff-font-accent);
    font-size: var(--fff-fs-xs);
    letter-spacing: var(--fff-ls-wide);
    color: var(--fff-color-muted);
    margin: 0 0 var(--fff-space-1) 0;
}
.fff-block__timeline-career-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: var(--fff-fs-sm);
    line-height: var(--fff-lh-normal);
}

/* 職歴とタイムラインの間に横線 */
.fff-block__timeline-career {
    padding-bottom: var(--fff-space-2);
    border-bottom: 1px solid var(--fff-color-line);
}
/* タイムライン: 縦線 + 各エントリに点（dot）が並ぶスタイル */
.fff-block__timeline-list {
    list-style: none;
    padding: 0 0 0 var(--fff-space-3);  /* dot 用の左スペース */
    margin: 0;
    position: relative;
}

/* 縦線: list 全体を貫く（先頭の dot と最後の dot の間） */
.fff-block__timeline-list::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 18px;
    bottom: 18px;
    width: 1px;
    background: var(--fff-color-ink);
    opacity: 0.35;
}

.fff-block__timeline-item {
    display: flex;
    gap: var(--fff-space-3);
    padding: var(--fff-space-2) 0;
    font-size: var(--fff-fs-sm);
    position: relative;
}

/* 点（dot）: 各 item の左に配置、縦線の上に重なる */
.fff-block__timeline-item::before {
    content: '';
    position: absolute;
    left: -19px;
    top: 18px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--fff-color-ink);
}

.fff-block__timeline-date {
    font-family: var(--fff-font-accent);
    color: var(--fff-color-accent);
    flex-shrink: 0;
    min-width: 50px;
}
.fff-block__timeline-event {
    line-height: var(--fff-lh-normal);
}

/* ==========================================================================
   block-profile: プロフィール（写真+名前+本文+資格+SNS）
   ========================================================================== */
.fff-block--profile .fff-block__content {
    flex-direction: row;
    gap: var(--fff-space-3);
    overflow-y: auto;
    align-items: flex-start;
    justify-content: flex-start;
}
.fff-block__profile-left {
    flex-shrink: 0;
    width: 40%;
    display: flex;
    flex-direction: column;
    gap: var(--fff-space-3);
}
/* 左カラム内の写真と資格を 80% 幅に揃える（下に余白を確保） */
.fff-block__profile-left .fff-block__profile-photo,
.fff-block__profile-left .fff-block__profile-credits {
    width: 80%;
}
.fff-block__profile-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--fff-space-2);
}
/* プロフィール写真: 3段構造
   外側 figure (白背景 + padding で外余白) → 内側 frame (黒border) → img (上にはみ出す) */
.fff-block__profile-photo {
    margin: 0;
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: var(--fff-space-2);              /* 外余白 (黒縁と画像ボックスの間) */
    background: var(--fff-color-paper);
    overflow: visible;
    box-sizing: border-box;
    position: relative;
}
.fff-block__profile-photo-frame {
    width: 100%;
    height: 100%;
    border: 1px solid var(--fff-color-black);   /* 黒縁デザイン */
    overflow: visible;                          /* 頭が上にはみ出るため */
    position: relative;
    box-sizing: border-box;
}
.fff-block__profile-photo img {
    display: block;
    width: 100%;
    /* 画像を frame より縦に大きく + margin-top でマイナス → 頭が上にはみ出る */
    height: calc(100% + clamp(1.3rem, 2.2vw, 1.9rem));
    margin-top: calc(-1 * clamp(1.3rem, 2.2vw, 1.9rem));
    object-fit: cover;
    object-position: center top;
    position: relative;
}
.fff-block__profile-name {
    font-family: var(--fff-font-heading);
    font-size: var(--fff-fs-xl);
    line-height: var(--fff-lh-tight);
    margin: 0;
    font-weight: normal;
}
.fff-block__profile-name-label {
    display: block;
    font-family: var(--fff-font-accent);
    font-size: var(--fff-fs-xs);
    letter-spacing: var(--fff-ls-wide);
    color: var(--fff-color-muted);
    margin-bottom: var(--fff-space-1);
}
.fff-block__profile-role {
    font-size: var(--fff-fs-sm);
    color: var(--fff-color-muted);
    margin: 0 0 var(--fff-space-2) 0;
}
.fff-block__profile-body {
    display: flex;
    flex-direction: column;
    gap: var(--fff-space-2);
}
.fff-block__profile-body p {
    font-size: var(--fff-fs-sm);
    line-height: var(--fff-lh-normal);
    margin: 0;
}
/* 資格・学習背景: 黒枠 + 左上の黒タグ風ラベル + ・印リスト */
.fff-block__profile-credits {
    position: relative;
    border: 1px solid var(--fff-color-black);
    padding: calc(var(--fff-space-3) + var(--fff-space-1)) var(--fff-space-2) var(--fff-space-2);
    margin-top: var(--fff-space-2);  /* 上のタグ分の余白 */
}

.fff-block__profile-credits-label {
    /* 黒タグ風（box の左上に重なる） */
    position: absolute;
    top: 0;
    left: var(--fff-space-2);
    transform: translateY(-50%);
    background: var(--fff-color-black);
    color: var(--fff-color-paper);
    padding: 4px 10px;
    font-family: var(--fff-font-body);
    font-size: var(--fff-fs-xs);
    font-weight: bold;
    letter-spacing: var(--fff-ls-wide);
    line-height: 1;
    display: inline-block;
}

.fff-block__profile-credits ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: var(--fff-fs-xs);
    line-height: var(--fff-lh-loose);  /* 行間広めで読みやすく */
}

.fff-block__profile-credits li {
    position: relative;
    padding-left: var(--fff-space-2);
}

/* 各項目の左に・印（アクセント色） */
.fff-block__profile-credits li::before {
    content: '·';
    position: absolute;
    left: 0;
    top: -2px;
    color: var(--fff-color-accent);
    font-size: var(--fff-fs-md);
    font-weight: bold;
    line-height: 1;
}
.fff-block__profile-socials {
    display: flex;
    gap: var(--fff-space-2);
    flex-wrap: wrap;
}
.fff-block__profile-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--fff-color-ink);
    border: 1px solid var(--fff-color-line);
    transition: color 0.2s ease, border-color 0.2s ease;
}
.fff-block__profile-social:hover {
    color: var(--fff-color-accent);
    border-color: var(--fff-color-accent);
}
.fff-block__profile-social svg {
    width: 22px;
    height: 22px;
}