/* ==========================================================================
   fff-foundation — 07-sp.css
   スマホ（〜767px）専用の見た目差分

   ★ ルール: このファイルは「@media (max-width: 767px)」1個だけ。
     スマホで変えたい所だけを、ここに書く（PC=ベースを上書き）。
     タブレット（768-1023）とは 767/768 で隣接 → 絶対に重ならない。
   ========================================================================== */
@media (max-width: 767px) {

    /* ===== block-label: content の gap を詰める + 左揃えに戻す（ベースは右揃え）===== */
    .fff-block--label .fff-block__content {
        gap: var(--fff-space-1);
        align-items: flex-start;     /* ベース(PC)の右揃えを SP では左に戻す */
        text-align: left;
    }

    /* ===== block-hero: タイポ + lead の改行を消す（PC でだけ明示改行） ===== */
    .fff-block__eyebrow--hero {
        font-size: 20px;
    }
    .fff-block__title--hero {
        font-size: 16px;
    }
    /* eyebrow と title の間隔を縮める */
    .fff-block--hero .fff-block__content {
        gap: var(--fff-space-1);
    }
    /* lead を本文共通サイズに合わせる → Statement body 等と完全一致 */
    .fff-block--hero .fff-block__lead,
    .fff-block--hero-lead .fff-block__lead {
        font-size: var(--fff-fs-sm);
        line-height: 1.5;
    }
    .fff-block--hero .fff-block__lead br,
    .fff-block--hero-lead .fff-block__lead br {
        display: none;
    }

    /* ===== block-statement: lead 16px/通常太さ + body 行間 + 左揃え（ベースは中央/太字）===== */
    .fff-block__statement-lead {
        font-size: 16px;
        font-weight: normal;         /* ベース(PC)の bold を SP では通常に戻す */
    }
    .fff-block__statement-body {
        line-height: 1.5;            /* normal(1.6) → 1.5 */
    }
    .fff-block--statement .fff-block__content {
        gap: var(--fff-space-1);     /* lead と body の間 space-3 → space-1 */
        text-align: left;            /* ベース(PC)の中央寄せを SP では左に戻す */
    }

    /* ===== block-pmv: heading を body より上に重ねる（SP は別ブロック構造） ===== */
    .fff-block--pmv-heading {
        overflow: visible;
    }
    .fff-block--pmv-heading .fff-block__content {
        overflow: visible;
    }
    .fff-block--pmv-heading .fff-block__pmv-lead {
        white-space: nowrap;
    }
    /* pmv-body の本文を下に押し下げる（heading に隠れないように）
       justify-content: flex-start で上寄せ → padding-top が効くようにする */
    .fff-block--pmv-body .fff-block__content {
        padding-top: 100px;
        justify-content: flex-start;
    }

    /* ===== block-table: 縦並び（ラベル上、値下）+ ラベルにアクセント色の縦線 ===== */
    .fff-block__table,
    .fff-block__table tbody,
    .fff-block__table tr,
    .fff-block__table th,
    .fff-block__table td {
        display: block;
        width: 100%;
    }
    .fff-block__table tr {
        padding: var(--fff-space-1) 0;  /* space-2(10px) → space-1(5px) */
        border-bottom: 1px solid var(--fff-color-line);
        line-height: 1.5;                /* 行間 */
    }
    .fff-block__table tr:last-child {
        border-bottom: none;
    }
    .fff-block__table th {
        font-size: var(--fff-fs-xs);
        font-family: var(--fff-font-accent);
        letter-spacing: var(--fff-ls-wide);
        color: var(--fff-color-ink);
        padding: 0 0 var(--fff-space-1) calc(var(--fff-space-2) + 3px);
        border-bottom: none;
        position: relative;
        width: 100%;
    }
    /* ラベル左にアクセント色の縦線 */
    .fff-block__table th::before {
        content: '';
        position: absolute;
        left: 0;
        top: 4px;
        bottom: 4px;
        width: 3px;
        background: var(--fff-color-accent);
    }
    .fff-block__table td {
        padding: 0 0 0 calc(var(--fff-space-2) + 3px);
        border-bottom: none;
        font-size: var(--fff-fs-sm);
    }

    /* ===== block-timeline: 行間 & 余白を詰める ===== */
    .fff-block__timeline-item {
        padding: var(--fff-space-1) 0;   /* space-2(10px) → space-1(5px) */
        line-height: 1.5;
    }
    .fff-block__timeline-event {
        line-height: 1.5;                 /* normal(1.6) → 1.5 */
    }
    .fff-block__timeline-career-list {
        line-height: 1.5;
    }
    .fff-block__timeline-career {
        padding-bottom: var(--fff-space-1);   /* 職歴の下余白も詰める */
    }

    /* ===== block-profile: 縦並びに ===== */
    .fff-block--profile .fff-block__content {
        flex-direction: column;
    }
    .fff-block__profile-left {
        width: 100%;
    }
    .fff-block__profile-photo {
        max-width: 200px;
        margin: 0 auto;
    }
    /* SP の専用 photo ブロック: grid (3x4) の box にフル
       padding を縮めて中の frame + img を相対的に大きく */
    .fff-block--profile-photo .fff-block__profile-photo {
        width: 100%;
        margin: 0 auto;
        max-width: none;
        padding: 0;
    }
    /* SP の name (Kasumi) を縮小 → box に余裕作る */
    .fff-block__profile-name {
        font-size: 18px;            /* fff-fs-lg(20px) → 18px に少し下げる */
        line-height: 1.3;
    }
    /* SP の name ブロックの padding-top（「代表」を下に押す）を少し詰める */
    .fff-block--profile-name .fff-block__content {
        padding-top: 20px;          /* 30px → 20px */
    }
    /* role (思考設計コンサルタント) も少し詰める */
    .fff-block__profile-role {
        margin: 0;
        font-size: 12px;             /* fff-fs-sm(13px) → 12px に少し下げる */
        line-height: 1.4;
    }

    /* ===== block-label 細部: title 高さ縮小 + 左はみ出し / eyebrow 1行固定 ===== */
    .fff-block--label .fff-block__title {
        padding-block: var(--fff-space-1);
        margin-left: -20px;
        white-space: nowrap;
    }
    .fff-block--label .fff-block__eyebrow {
        white-space: nowrap;
        font-size: 13px;
    }
    /* credits の長い英数字も改行する
       flex item の min-width: auto を解除して、自動改行が効くようにする */
    .fff-block__profile-credits {
        min-width: 0;
    }
    .fff-block__profile-credits li {
        overflow-wrap: break-word;
        word-break: break-word;
    }
    /* credits 行間詰めて box に収める */
    .fff-block__profile-credits ul {
        line-height: 1.6;
    }
    /* SNS アイコンを等間隔配置 + サイズ縮小 + gap 詰め */
    .fff-block--profile-socials-block .fff-block__profile-socials {
        justify-content: space-evenly;
        gap: var(--fff-space-1);
        flex-wrap: nowrap;
    }
    .fff-block--profile-socials-block .fff-block__profile-social {
        width: 26px;
        height: 26px;
    }
    .fff-block--profile-socials-block .fff-block__profile-social svg {
        width: 14px;
        height: 14px;
    }
}