@charset "UTF-8";

/**
 * ファイル名: work.css
 * 更新日: 2026-04-02
 * 管理部署: システム管理課
 * --------------------------------------------------------------------------
 * 【管理メモ】
 * 1. メインビジュアルのレスポンシブ・英字対応
 * 2. 導入カード、ステップボックスの基本装飾
 * 3. 青帯ベルト見出し（ワイドラベル対応）
 * 4. 4枚/2枚構成の情報整理グリッド
 * 5. 専門業務カード・募集フロー・連携テーブルの各部署専用スタイル
 * 6. PC/SP 画像出し分け設定
 * --------------------------------------------------------------------------
 */

/* ==========================================================================
   1. メインビジュアル
   ========================================================================== */
.c-main-visual {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
    background: #fff;
}

.c-main-visual img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;           /* 比率を保ち枠を埋める */
    object-position: center 20%;  /* 顔が切れないよう調整 */
}

.c-main-visual__box {
    position: absolute;
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.9);
    padding: 30px 60px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    text-align: center;
}

/* 英字タイトル用 */
.c-main-visual__en {
    display: block;
    font-size: 1.25rem;
    letter-spacing: 0.1em;
    margin-top: 10px;
    font-weight: normal;
    color: #666;
}

/* ==========================================================================
   2. 基本コンポーネント（カード・ステップ）
   ========================================================================== */
/* 導入カード：見出しボックス */
.c-intro-card {
    background: #fff;
    border: 1px solid #e0e7ed;
    padding: 40px;
    margin: 50px 0;
    border-radius: 8px;
}

.c-intro-card__title {
    display: inline-block;
    background: #0070b8; /* 御幸ブルー */
    color: #fff;
    padding: 10px 30px;
    margin-bottom: 25px;
    border-radius: 4px;
}

/* 青背景のベルト見出し */
.c-sales-belt {
    background: #0070b8;
    color: #ffffff;
    padding: 20px;
    margin: 60px 0 30px;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
}

/* ステップ解説ボックス：ピンク線 */
.c-step-box {
    border-left: 8px solid #e6007e; /* ミユキピンク */
    background: #fff;
    padding: 25px 30px;
    margin-bottom: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* ステップラベルの強化版 */
.c-step-box__label {
    display: inline-block; /* 横幅を内容に合わせる */
    color: #e6007e;        /* ミユキピンク */
    font-size: 1.5rem;    /* サイズを大きく（元の約1.5倍） */
    font-weight: 800;      /* かなり太めに設定 */
    margin-bottom: 20px;   /* 下のカードとの余白をしっかり取る */
    letter-spacing: 0.05em; /* 文字の間隔を少し広げて読みやすく */
}

/* スマホでは少しだけサイズを調整 */
@media screen and (max-width: 768px) {
    .c-step-box__label {
        font-size: 1.3rem;
    }
}
/* ==========================================================================
   3. フロー図（画像運用セクション）
   ========================================================================== */
.c-flow-heading {
    text-align: center;
    font-weight: bold;
    margin: 40px 0 20px;
    font-size: 1.25rem;
    color: #333;
}

.c-flow-image-wrap {
    width: 100%;
    margin-bottom: 50px;
}

.c-flow-image-wrap img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* ==========================================================================
   4. 汎用・レスポンシブ
   ========================================================================== */
.u-text-center { text-align: center; }
.u-bold        { font-weight: bold; }
.u-mt-40       { margin-top: 40px; }
.u-mb-20       { margin-bottom: 20px; }

/* スマホ対応 */
@media screen and (max-width: 768px) {
    .c-main-visual { height: 350px; }
    .c-main-visual__box { padding: 20px 30px; width: 80%; }
    .c-sales-belt { font-size: 18px; padding: 15px; }
    .c-intro-card { padding: 20px; }
}


/* ==========================================================================
   PC/SP 画像出し分け設定（最優先）
   ========================================================================== */

/* 初期状態：PC版を表示、スマホ版を隠す */
.c-flow-pc-box {
    display: block !important;
}
.c-flow-sp-box {
    display: none !important;
}

/* 画像自体のレスポンシブ設定 */
.c-flow-image-wrap img {
    width: 100%;
    height: auto;
    display: block;
}

/* スマホ表示への切り替え（768px以下） */
@media screen and (max-width: 768px) {
    .c-flow-pc-box {
        display: none !important; /* PC版を消す */
    }
    .c-flow-sp-box {
        display: block !important; /* スマホ版を出す */
    }
}/* 独立した見出し：質問・導入用 */
.c-question-box {
    background-color: #f0f4f9; /* 薄いグレーブルーで背景を独立させる */
    border-left: 8px solid #0070b8; /* 御幸ブルーのアクセント線 */
    padding: 25px 30px;
    margin: 60px 0 30px;
    text-align: center;
}

.c-question-box__title {
    font-size: 1.5rem; /* 通常より大きく */
    font-weight: bold;
    color: #0070b8;
    line-height: 1.5;
    margin: 0;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
    .c-question-box__title {
        font-size: 1.2rem;
        text-align: left; /* スマホでは左寄せの方が見やすい場合が多いです */
    }
}/* 情報を整理する4つのカードセクション */
.c-info-grid {
    display: flex;
    justify-content: space-between;
    align-items: stretch; /* 高さを自動で揃える */
    gap: 15px;
    margin-top: 30px;
}

.c-info-item {
    flex: 1;
    background: #fff;
    border: 1px solid #0070b8; /* 全体を細い青枠で囲む */
    display: flex;
    flex-direction: column;
}

/* カード内の余白とテキスト配置 */
.c-info-card-body {
    padding: 25px 20px;
    height: 100%;
}

.c-info-card-title {
    font-weight: bold;
    text-align: center;
    font-size: 1.1rem;
    margin-bottom: 20px;
    color: #333;
}

/* タイトル下のアクセント線（画像通りに中央に配置） */
.c-info-card-title::after {
    content: "";
    display: block;
    width: 80%;
    height: 1px;
    background-color: #0070b8;
    margin: 15px auto 0;
}

.c-info-card-text {
    font-size: 0.95rem;
    line-height: 1.8; /* 行間を広げて読みやすく */
    color: #444;
    text-align: left;
}

/* スマホ対応（768px以下） */
@media screen and (max-width: 768px) {
    .c-info-grid {
        flex-direction: column;
        gap: 20px;
    }
    .c-info-card-body {
        padding: 20px;
    }
}
/* ステップ2用：青い背景のボックス */
.c-think-grid {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-top: 30px;
}

.c-think-item {
    flex: 1;
    background-color: #0070b8; /* 御幸ブルーで塗りつぶし */
    color: #ffffff;           /* 文字は白 */
    padding: 25px 15px;
    display: flex;
    align-items: center;      /* 上下中央 */
    justify-content: center;   /* 左右中央 */
    text-align: center;
    border-radius: 4px;       /* わずかに角を丸く（画像通り） */
}

.c-think-item p {
    font-size: 0.95rem;
    font-weight: bold;
    margin: 0;
    line-height: 1.4;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
    .c-think-grid {
        flex-direction: column;
        gap: 10px;
    }
    .c-think-item {
        padding: 20px;
    }
}

/* ステップ3：情報カード内の整理 */
.c-info-card-body.u-text-center {
    padding: 25px 15px;
}

/* 項目タイトル（一番上の見出し） */
.c-keyword-header {
    font-size: 1.1rem;
    font-weight: bold;
    color: #333;
    padding-bottom: 12px;
    margin-bottom: 15px;
    border-bottom: 2px solid #0070b8; /* 下線を少し太くして安定感を出す */
}

/* --- キーワードラベル：文字位置と帯のバランス調整 --- */
.c-keyword-label {
    display: block !important;
    width: 100% !important;
    color: #ffffff !important;
    background-color: #0070b8 !important;
    /* 上下10px、左右25pxの余白を設けて「寄りすぎ」を解消 */
    padding: 10px 25px !important; 
    font-weight: bold !important;
    font-size: 0.95rem !important;
    margin: 25px 0 15px !important;
    border: none !important;
    border-radius: 0 !important;
    text-decoration: none !important;
    /* 文字を左寄せにする（念のため） */
    text-align: left !important; 
    /* ボックスサイズ計算をパディング込みにする */
    box-sizing: border-box !important; 
}
/* 説明文：標準黒色・境界線消去設定 */
.c-keyword-desc {
    color: #333 !important;       /* 文字色は落ち着いた黒（濃いグレー） */
    padding: 0 15px !important;
    margin-bottom: 25px !important;
    line-height: 1.7 !important;
    border: none !important;      /* 説明文の下線も完全に消去 */
    text-decoration: none !important;
}

/* カード内の各ブロックを独立させる（余白による区切り） */
.c-info-item .u-text-center > div {
    margin-bottom: 25px;       /* 項目ごとのまとまりを余白で表現 */
}
/* スマホ対応：カード間の余白調整 */
@media screen and (max-width: 768px) {
    .c-keyword-header {
        margin-bottom: 10px;
    }
}/* ステップ5：提案内容の3カラムボックス */
.c-proposal-grid {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 30px;
}

.c-proposal-item {
    flex: 1;
    border: 1px solid #ccc; /* 画像通りの細いグレー枠 */
    padding: 25px 15px;
    background-color: #fff;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.c-proposal-title {
    color: #0070b8; /* 御幸ブルー */
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 10px;
}

.c-proposal-text {
    font-size: 0.95rem;
    color: #333;
    line-height: 1.5;
    margin: 0;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
    .c-proposal-grid {
        flex-direction: column;
        gap: 15px;
    }
}

/* ステップ6：連携テーブルのデザイン（横スクロール対応） */
.c-scroll-container {
    width: 100%;
    overflow-x: auto;
    margin-bottom: 40px;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.c-collab-table {
    width: 100%;
    min-width: 1000px; /* 文字が詰まらないよう幅を確保 */
    border-collapse: collapse;
    background: #fff;
    font-size: 0.95rem;
}

/* ヘッダー：濃い青背景に白文字 */
.c-collab-table thead th {
    background-color: #0070b8;
    color: #ffffff;
    padding: 15px;
    border: 1px solid #005bac;
    text-align: center;
    font-weight: bold;
}

/* 各セルの基本設定 */
.c-collab-table th, 
.c-collab-table td {
    border: 1px solid #dce4ec;
    padding: 15px 20px;
    vertical-align: middle;
    line-height: 1.6;
}

/* 部署名（左列）：薄い青背景 */
.c-collab-table tbody th {
    background-color: #f0f7ff;
    color: #333;
    width: 18%;
    text-align: left;
    font-weight: normal;
}

/* 汎用：文字強調（ピンク・ブルー） */
.u-text-pink { color: #e6007e; font-weight: bold; }
.u-text-blue { color: #0070b8; font-weight: bold; border-bottom: 1px solid #0070b8; }

/* テーブル内箇条書き（「・」の整列） */
.c-table-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.c-table-list li {
    position: relative;
    padding-left: 1.2em;
    margin-bottom: 4px;
}

.c-table-list li::before {
    content: "・";
    position: absolute;
    left: 0;
}/* 導入セクションのメインタイトル */
.c-page-intro-header {
    text-align: center;
    margin: 60px 0 40px;
    padding-bottom: 20px;
    position: relative;
}

/* 青いドット線（アクセント） */
.c-page-intro-header::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    border-bottom: 2px dotted #0070b8; /* 画像通りの青いドット線 */
}

/* タイトルと英字サブテキスト */
.c-page-intro-header__title {
    font-size: 1.8rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
    letter-spacing: 0.05em;
}

.c-page-intro-header__en {
    display: block;
    font-size: 1rem;
    color: #555;
    font-weight: normal;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
    .c-page-intro-header__title { font-size: 1.3rem; }
    .c-page-intro-header__en { font-size: 0.8rem; }
}
/* 導入パネル：角丸グレー枠 + 青タイトルボックス */
.c-intro-panel {
    border: 1px solid #dce4ec; /* 薄いグレーの枠線 */
    border-radius: 8px;        /* 角丸 */
    padding: 40px;
    margin: 40px 0;
    background-color: #fff;
    position: relative;
}

/* 左上の見出しボックス */
.c-intro-panel__title {
    display: inline-block;
    background-color: #0070b8; /* 御幸ブルー */
    color: #fff;
    padding: 12px 30px;
    font-size: 1.25rem;
    font-weight: bold;
    border-radius: 4px;
    margin-bottom: 30px; /* 下のテキストとの余白 */
}

/* パネル内のメインテキスト */
.c-intro-panel__text {
    font-size: 1rem;
    line-height: 1.8;
    color: #333;
    text-align: left;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
    .c-intro-panel { padding: 25px 20px; }
    .c-intro-panel__title { font-size: 1.1rem; padding: 10px 20px; }
}

/* 設計部用のポリシーボックス（アクセント付き） */
.c-policy-box {
    background-color: #f0f7ff;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 20px;
    border-left: 5px solid #0070b8;
}

/* 専門業務カード（各部署詳細用グリッド） */
.c-special-grid {
    display: flex;
    gap: 12px;
    margin-top: 25px;
}

.c-special-card {
    flex: 1;
    background: #fff;
    border: 1px solid #dce4ec;
    padding: 15px;
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

/* 強調表示（工事監理等） */
.c-special-card.--highlight {
    border: 1px solid #0070b8;
    background-color: #fafcfe;
}

.c-special-card__title {
    color: #0070b8;
    font-weight: bold;
    border-bottom: 1px solid #dce4ec;
    padding-bottom: 8px;
    margin-bottom: 10px;
    font-size: 0.95rem;
}

/* フロー内の各項目（区切り） */
.c-work-flow-item {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #eee;
}
.c-work-flow-item:last-child { border-bottom: none; }

/* スマホ対応：カードの縦並び */
@media screen and (max-width: 768px) {
    .c-special-grid { flex-direction: column; }
}

/* --- タイルグリッド：幅を青帯と合わせ、高さを揃える --- */
.c-delivery-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); 
    gap: 10px;
    width: 100%;                /* 青帯と同じ100%幅に固定 */
    box-sizing: border-box;
    align-items: stretch;       /* 中のカードの高さを自動で揃える */
}

.c-delivery-card {
    background-color: #f8f9fa;
    border: 1px solid #dce4ec;
    padding: 12px 10px;
    border-radius: 4px;
    text-align: center;
    /* 高さを揃えるための追加設定 */
    display: flex;
    align-items: center;        /* 文字の上下中央揃え */
    justify-content: center;    /* 文字の左右中央揃え */
    min-height: 60px;           /* 最低限の高さを確保してガタつきを防止 */
    font-size: 0.85rem;
    line-height: 1.4;
}

.c-delivery-card__dept {
    color: #0070b8;
    font-weight: bold;
    font-size: 0.9rem;
    margin-bottom: 5px;
    border-bottom: 1px solid #dce4ec;
    padding-bottom: 3px;
}

/* スマホ対応：2列化調整 */
@media screen and (max-width: 768px) {
    .c-delivery-grid { grid-template-columns: repeat(2, 1fr); }
    .c-delivery-grid .c-delivery-card:last-child { grid-column: span 2; }
}

/* 入居募集ステップのグリッド（3列） */
.c-recruit-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 20px;
}

.c-recruit-step {
    background-color: #ffffff;
    border: 1px solid #dce4ec;
    padding: 15px;
    border-radius: 6px;
    position: relative;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.c-recruit-step.--highlight {
    border-color: #0070b8;
    background-color: #f0f7ff;
}

.c-recruit-step__num {
    display: block;
    color: #0070b8;
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 5px;
}

/* スマホ対応：縦並び化 */
@media screen and (max-width: 768px) {
    .c-recruit-grid { grid-template-columns: 1fr; }
}

/* 不動産事業部・募集フロー：専用コンテナ */
.c-recruit-full-box {
    margin-top: 30px;
    padding: 25px;
    background-color: #f4f9ff;
    border: 1px solid #dce4ec;
    border-radius: 8px;
}

.c-recruit-full-box__title {
    font-size: 1.1rem;
    font-weight: bold;
    color: #0070b8;
    border-bottom: 2px solid #0070b8;
    display: inline-block;
    margin-bottom: 25px;
}

/* 各ステップのグループ（区切り線付き） */
.c-recruit-step-group {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px dashed #c1d5e6;
}

.c-recruit-step-group:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.c-recruit-step-group__label {
    display: block;
    font-weight: bold;
    color: #e6007e; /* ピンク */
    margin-bottom: 10px;
    font-size: 1.05rem;
}

/* タイムラインラベル：御幸ブルー背景のカプセルラベル */
.c-timeline-label {
    display: inline-block;
    background-color: #0070b8; /* 御幸建設のブルー */
    color: #ffffff;
    font-weight: bold;
    font-size: 0.85rem;
    padding: 2px 12px;
    border-radius: 4px;
    margin-bottom: 12px;
    position: relative;
}

/* 各項目の余白と区切り（共通） */
.c-work-flow-item {
    margin-bottom: 30px;
    border-bottom: 1px solid #eef2f6; /* 最後に薄い区切り線 */
    padding-bottom: 20px;
}

.c-work-flow-item:last-child {
    border-bottom: none;
}

/* 入居募集フロー（管理会社向け）：専用コンテナ */
.c-recruit-flow-box {
    margin-top: 30px;
    padding: 25px;
    background-color: #f4f9ff;
    border: 1px solid #dce4ec;
    border-radius: 8px;
}

.c-recruit-flow-box__title {
    font-size: 1.15rem;
    font-weight: bold;
    color: #0070b8;
    border-bottom: 2px solid #0070b8;
    display: inline-block;
    margin-bottom: 25px;
}

/* 各Stepの単位（余白調整） */
.c-recruit-step-unit {
    margin-bottom: 30px;
}

.c-recruit-step-unit:last-child {
    margin-bottom: 0;
}

/* ステップバッジ（ピンク背景の番号ラベル） */
.c-step-badge {
    display: inline-block;
    background-color: #e6007e;
    color: #ffffff;
    font-weight: bold;
    font-size: 0.9rem;
    padding: 2px 10px;
    border-radius: 4px;
    margin-right: 8px;
    vertical-align: middle;
}

.c-step-title {
    font-weight: bold;
    color: #e6007e;
    font-size: 1.05rem;
    display: inline-block;
    vertical-align: middle;
}

/* 建物お引き渡し後の管理会社セクション */
.c-partner-section {
    margin-bottom: 40px;
}

.c-partner-title {
    color: #e6007e; /* ピンク */
    font-weight: bold;
    font-size: 1.25rem;
    border-bottom: 2px solid #e6007e;
    display: inline-block;
    padding-bottom: 5px;
    margin-bottom: 25px;
}

/* 信頼のメッセージボックス（御幸ブルーアクセント） */
.c-message-box {
    padding: 30px;
    background-color: #f4f9ff;
    border-left: 5px solid #0070b8; /* 御幸ブルー */
    border-radius: 4px;
    line-height: 1.8;
}

/* ボックス内の区切り線（ダッシュ線） */
.c-message-box__divider {
    border: 0;
    border-top: 1px dashed #dce4ec;
    margin: 25px 0;
}

/* 特定キーワードの強調カラー（ブルー） */
.u-text-focus {
    color: #0070b8;
    font-weight: bold;
}

/* --------------------------------------------------------------------------
   Navigation: 追従型サイドジャンプメニュー
   Memo: 画面右側に固定され、長いページでの回優性を確保します。
   -------------------------------------------------------------------------- */

/* スムーズスクロールを有効化（既にある場合は不要） */
html {
    scroll-behavior: smooth;
}

/* ナビゲーション全体の固定位置設定 */
.c-sticky-nav {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%); /* 画面中央に配置 */
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 1000; /* 他の要素より上に表示 */
}

/* ボタンの基本デザイン */
.c-sticky-btn {
    display: block;
    width: 140px;
    padding: 12px 10px;
    background-color: rgba(255, 255, 255, 0.95); /* 少し透かした白 */
    color: #0070b8;           /* 御幸ブルー */
    border: 2px solid #0070b8;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: bold;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

/* ホバー時の変化：ミユキピンク */
.c-sticky-btn:hover {
    background-color: #e6007e;
    border-color: #e6007e;
    color: #fff;
    transform: translateX(-5px); /* 左に少し動かしてアピール */
}

/* 「TOPに戻る」ボタンの特別装飾 */
.c-sticky-btn--top {
    background-color: #0070b8;
    color: #fff;
    margin-top: 10px;
}
.c-sticky-btn--top:hover {
    background-color: #333; /* TOPに戻るは落ち着いた色に変化 */
    border-color: #333;
}

/* スマホ表示では邪魔になるため、下部に横並びで固定するか非表示を検討 */
@media screen and (max-width: 1024px) {
    .c-sticky-nav {
        position: static; /* 追従を解除 */
        transform: none;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        padding: 20px;
        right: auto;
    }
    .c-sticky-btn {
        width: calc(50% - 10px); /* 2列並びに変更 */
    }
}

/* --------------------------------------------------------------------------
   Design Adjustment: 設計・監理カードの開始位置の統一
   Memo: 左側のカードと開始位置を揃えつつ、①～④の丸数字を綺麗に配置します。
   -------------------------------------------------------------------------- */

/* 左側：設計業務カードのレイアウト（現在の設定を維持・再確認） */
.c-special-card .u-small p {
    padding-left: 8em;   /* 記号が入るスペースを確保 */
    text-indent: -8em;   /* ②などの記号を左に突き出す */
    margin-bottom: 0.8em;
    line-height: 1.7;
}

/* 右側：工事監理業務カードのレイアウト修正（左に寄せる） */
.c-special-card ol {
    list-style: none;      /* デフォルトの「1.」を非表示 */
    margin: 0;
}

.c-special-card ol li {
    position: relative;
    padding-left: 1em;   /* ①などの記号とテキストの間の距離 */
    margin-bottom: 0.8em;
    line-height: 1.7;
}

/* 数字を「①」などの丸数字に変更し、左端に固定 */
.c-special-card ol li::before {
    position: absolute;
    left: 0;               /* padding-left: 1.5em の範囲内で左端に配置 */
    font-weight: bold;
}
.c-special-card ol li:nth-child(1)::before { content: "①"; }
.c-special-card ol li:nth-child(2)::before { content: "②"; }
.c-special-card ol li:nth-child(3)::before { content: "③"; }
.c-special-card ol li:nth-child(4)::before { content: "④"; }

/* ピンクの注釈の開始位置を④の本文に合わせる */
.u-text-pink {
    display: block;        /* 改行させる */
    margin-top: 2px;
}