/**
 * 利用者・ご家族向けガイドページ共通CSS
 *
 * ショートコード:
 *   [kaigo_start_guide]        — 介護の始め方3分ガイド
 *   [service_comparison_chart] — 目的別の早見表
 *   [visit_checklist]          — 見学・問い合わせ前チェックリスト
 */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * リセット・共通
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ugp *,
.ugp *::before,
.ugp *::after {
    box-sizing: border-box;
}

.ugp {
    max-width: 1068px !important;
    margin: 0 auto !important;
    padding: 32px 20px 60px !important;
    font-family: "筑紫A丸ゴシック", "Tsukushi A Round Gothic", "Hiragino Maru Gothic Pro", sans-serif !important;
    color: #1a1a1a !important;
    line-height: 1.7 !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * パンくずリスト
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ugp-breadcrumb {
    font-size: 14px !important;
    color: #6b7280 !important;
    margin-bottom: 32px !important;
}
.ugp-breadcrumb a {
    color: #2563EB !important;
    text-decoration: none !important;
}
.ugp-breadcrumb a:hover {
    text-decoration: underline !important;
    color: #1e40af !important;
}
.ugp-breadcrumb__sep {
    margin: 0 8px !important;
    color: #9ca3af !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * ヘッダー
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ugp__header {
    text-align: center !important;
    margin-bottom: 40px !important;
}
.ugp__title {
    font-size: 30px !important;
    font-weight: 700 !important;
    color: #0A0A0A !important;
    margin: 0 0 16px !important;
    line-height: 1.3 !important;
    display: inline-block !important;
    padding-bottom: 16px !important;
    border-bottom: none !important;
    /* Figma: Line 1 / Line 2 のピンク/ブルー点線を SVG で描画 */
    background-repeat: no-repeat !important;
    background-position: bottom center !important;
    background-size: 100% 3px !important;
    /* 日本語は文節単位で自然に折り返す */
    word-break: auto-phrase !important;
    line-break: strict !important;
    overflow-wrap: break-word !important;
}
.ugp__subtitle {
    font-size: 16px !important;
    color: #4A5565 !important;
    margin: 0 !important;
    line-height: 1.7 !important;
}

/* 共通: 装飾アイコンは疑似要素に SVG 背景として配置 */
.ugp__title--hero::before,
.ugp__title--hero::after,
.ugp__title--inline::before,
.ugp__title--inline::after {
    content: "" !important;
    display: inline-block !important;
    width: 49px !important;
    height: 49px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    vertical-align: middle !important;
}

/* ヒーロータイトル: pepicons 風ピンクの？ + ピンクの点線 */
.ugp__title--hero {
    background-image: url('../images/user-guide/line-1.svg') !important;
}
.ugp__title--hero::before {
    background-image: url('../images/user-guide/icon-question.svg') !important;
    margin-right: 12px !important;
    transform: rotate(-15deg) !important; /* 左: 反時計回り 15° */
}
.ugp__title--hero::after {
    background-image: url('../images/user-guide/icon-question.svg') !important;
    margin-left: 12px !important;
    transform: rotate(30deg) !important;
}

/* 早見表セクション内タイトル: クリップボードアイコン + ブルーの点線
   Figma: 30px、ライン幅は 620px 相当を確保（min-width で折り返し防止） */
.ugp__title--inline {
    font-size: 30px !important;
    margin: 0 0 10px !important;
    background-image: url('../images/user-guide/line-2.svg') !important;
    min-width: min(620px, 100%) !important;
}
.ugp__title--inline::before {
    background-image: url('../images/user-guide/icon-clipboard.svg') !important;
    margin-right: 12px !important;
    /* 左: 正面（回転なし）。SVG export 自体が傾いている場合はここを rotate(15deg) で戻す */
}
.ugp__title--inline::after {
    background-image: url('../images/user-guide/icon-clipboard.svg') !important;
    margin-left: 12px !important;
    transform: rotate(15deg) !important;
}

/* .ugp__header--inline: ヒーローより詰めたマージン */
.ugp__header--inline {
    text-align: center !important;
    margin-bottom: 28px !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * CTA ボックス（共通）
 *   白背景 + 薄青ボーダー、プライマリ=ピンク / セカンダリ=アウトライン青
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ugp-cta {
    margin-top: 40px !important;
    padding: 34px 34px !important;
    background: #fff !important;
    border: 1px solid #DBEAFE !important;
    border-radius: 12px !important;
    text-align: center !important;
}
.ugp-cta__label {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #0A0A0A !important;
    margin: 0 0 16px !important;
}
.ugp-cta__buttons {
    display: flex !important;
    gap: 16px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
}
.ugp-cta__btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    min-height: 52px !important;
    padding: 0 28px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    transition: all 0.2s !important;
    box-sizing: border-box !important;
}
.ugp-cta__btn--primary {
    background: #D2497E !important; /* Figma pink */
    color: #fff !important;
    border: 2px solid #D2497E !important;
}
.ugp-cta__btn--primary:hover {
    background: #B03A69 !important;
    border-color: #B03A69 !important;
    color: #fff !important;
    text-decoration: none !important;
}
.ugp-cta__btn--secondary {
    background: #fff !important;
    color: #155DFC !important; /* Figma blue text */
    border: 2px solid #2B7FFF !important;
}
.ugp-cta__btn--secondary:hover {
    background: #EFF6FF !important;
    color: #155DFC !important;
    text-decoration: none !important;
}
.ugp-cta__btn svg {
    flex-shrink: 0 !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * [kaigo_start_guide] 介護の始め方3分ガイド
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ステップカード
   構造: [left num-wrap (cream bg, STEP N + icon 縦積み)] [right body (white bg, 内容)] */
.ugp-steps {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}
.ugp-steps__item {
    display: flex !important;
    align-items: stretch !important;
    gap: 24px !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 14px !important;
    background: #fff !important;
    overflow: hidden !important;
    padding: 0 25px 0 0 !important; /* Figma: 右のみ 25 */
}
.ugp-steps__num-wrap {
    flex: 0 0 170px !important;
    background: #FEFBEF !important; /* Figma: STEP カラムのクリーム */
    padding: 32px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
}
.ugp-steps__num-label {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #FE9A00 !important; /* Figma orange */
    letter-spacing: 0.02em !important;
    line-height: 1 !important;
}
.ugp-steps__num-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.ugp-steps__num-icon svg,
.ugp-steps__num-icon img {
    width: 40px !important;
    height: 40px !important;
    display: block !important;
}
.ugp-steps__body {
    flex: 1 !important;
    min-width: 0 !important;
    padding: 24px 0 !important;
}
.ugp-steps__title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #0A0A0A !important;
    margin: 0 0 8px !important;
}
.ugp-steps__desc {
    font-size: 14px !important;
    color: #4A5565 !important;
    margin: 0 0 12px !important;
    line-height: 1.7 !important;
}
.ugp-steps__list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.ugp-steps__list li {
    position: relative !important;
    padding-left: 28px !important;
    font-size: 14px !important;
    color: #374151 !important;
    margin-bottom: 8px !important;
    line-height: 1.7 !important;
}
.ugp-steps__list li::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 4px !important;
    width: 18px !important;
    height: 18px !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='8.5' stroke='%23DB2777' stroke-width='1.5'/%3E%3Cpath d='M6 10.2l2.5 2.5L14 7.5' stroke='%23DB2777' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    border: none !important;
    border-radius: 0 !important;
}

/* Q&A: クリーム背景コンテナ + 中に白い Q&A アイテム */
.ugp-qa {
    margin-top: 40px !important;
    padding: 33px !important;
    border-radius: 14px !important;
    background: #FFFBEB !important; /* Figma Q&A 背景 */
    border: none !important;
}
.ugp-qa__title {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #0A0A0A !important;
    margin: 0 0 24px !important;
}
.ugp-qa__item {
    background: #fff !important;
    padding: 20px !important;
    border-radius: 10px !important;
    margin-bottom: 16px !important;
    border-bottom: none !important;
}
.ugp-qa__item:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 20px !important;
}
.ugp-qa__q {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #101828 !important;
    margin: 0 0 6px !important;
}
.ugp-qa__a {
    font-size: 14px !important;
    color: #4A5565 !important;
    margin: 0 !important;
    line-height: 1.7 !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * 目的別の早見表セクション（[kaigo_start_guide] 内 #services-chart）
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ugp-chart {
    background: #EFF6FF !important; /* Figma: ServicesPage 背景 */
    border-radius: 16px !important;
    padding: 64px 64px !important;
    margin: 64px 0 0 !important;
    scroll-margin-top: 24px !important; /* アンカー遷移時にヘッダー分の余白確保 */
}
.ugp-chart__label {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #0A0A0A !important;
    margin: 0 0 16px !important;
}
.ugp-chart__filters {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 32px !important;
}
.ugp-chart__filter-btn {
    min-height: 44px !important;
    padding: 0 16px !important;
    border: 2px solid #D1D5DC !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #364153 !important; /* Figma chip text */
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.ugp-chart__filter-btn:hover {
    border-color: #D2497E !important;
    color: #D2497E !important;
}
.ugp-chart__filter-btn.is-active {
    border-color: #D2497E !important;
    background: #D2497E !important; /* Figma pink */
    color: #fff !important;
}
/* アクティブ状態にチェックマーク */
.ugp-chart__filter-btn.is-active::after {
    content: "" !important;
    width: 16px !important;
    height: 16px !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M4 10.5l3.5 3.5L16 5.5' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    margin-left: 0 !important;
}

.ugp-chart__rec-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #0A0A0A !important;
    margin: 32px 0 20px !important;
}

.ugp-chart__panel {
    display: none !important;
}
.ugp-chart__panel.is-active {
    display: block !important;
}

.ugp-chart__cards {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
}
.ugp-chart__card {
    background: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 24px !important;
    position: relative !important;
}
.ugp-chart__card-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #0A0A0A !important;
    margin: 0 0 16px !important;
}

/* 「向いている人」「確認ポイント」のカラーラベル */
.ugp-chart__tag {
    display: inline-block !important;
    padding: 3px 10px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    border-radius: 4px !important;
    margin-bottom: 8px !important;
    line-height: 1.4 !important;
}
.ugp-chart__tag--suited {
    background: #FEF3C7 !important; /* amber-100 */
    color: #92400E !important;       /* amber-800 */
}
.ugp-chart__tag--check {
    background: #DBEAFE !important; /* blue-100 */
    color: #1E40AF !important;       /* blue-800 */
    margin-top: 16px !important;
}
.ugp-chart__card-text {
    font-size: 14px !important;
    color: #4A5565 !important;
    margin: 0 !important;
    line-height: 1.7 !important;
}

/* 早見表セクション内の CTA は上部マージンだけ調整（見た目は共通の白+青ボーダー） */
.ugp-chart .ugp-cta {
    margin-top: 32px !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * [visit_checklist] チェックリスト
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* アクションボタン */
.ugp-cl__actions {
    display: flex !important;
    gap: 10px !important;
    margin-bottom: 28px !important;
}
.ugp-cl__action-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 10px 20px !important;
    border: 1.5px solid #d1d5db !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #374151 !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}
.ugp-cl__action-btn:hover {
    border-color: #9ca3af !important;
    background: #f9fafb !important;
}

/* カテゴリ */
.ugp-cl__categories {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
}
.ugp-cl__category {
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    padding: 24px !important;
    background: #fff !important;
}
.ugp-cl__cat-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
}
.ugp-cl__cat-icon {
    display: flex !important;
    flex-shrink: 0 !important;
}
.ugp-cl__cat-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    margin: 0 !important;
}

/* チェックリストアイテム */
.ugp-cl__items {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.ugp-cl__item {
    margin-bottom: 12px !important;
}
.ugp-cl__item:last-child {
    margin-bottom: 0 !important;
}
.ugp-cl__label {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    cursor: pointer !important;
    font-size: 16px !important;
    color: #374151 !important;
    line-height: 1.6 !important;
}
.ugp-cl__checkbox {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}
.ugp-cl__check-mark {
    flex-shrink: 0 !important;
    width: 20px !important;
    height: 20px !important;
    border: 2px solid #d1d5db !important;
    border-radius: 4px !important;
    margin-top: 2px !important;
    position: relative !important;
    transition: all 0.2s !important;
    background: #fff !important;
}
.ugp-cl__checkbox:checked + .ugp-cl__check-mark {
    background: #2563EB !important;
    border-color: #2563EB !important;
}
.ugp-cl__checkbox:checked + .ugp-cl__check-mark::after {
    content: "" !important;
    position: absolute !important;
    left: 5px !important;
    top: 1px !important;
    width: 6px !important;
    height: 10px !important;
    border: solid #fff !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) !important;
}
.ugp-cl__checkbox:checked ~ .ugp-cl__text {
    color: #374151 !important;
}

/* メモ */
.ugp-cl__memo {
    margin-top: 32px !important;
}
.ugp-cl__memo-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    margin: 0 0 12px !important;
}
.ugp-cl__memo-textarea {
    width: 100% !important;
    padding: 16px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    color: #374151 !important;
    resize: vertical !important;
    font-family: inherit !important;
    line-height: 1.6 !important;
    background: #fff !important;
}
.ugp-cl__memo-textarea:focus {
    outline: none !important;
    border-color: #93c5fd !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
}
.ugp-cl__memo-textarea::placeholder {
    color: #9ca3af !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * レスポンシブ
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * タブレット（641〜1024px）: カード間隔とセクション余白を少し詰める
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 641px) and (max-width: 1024px) {
    .ugp {
        padding: 24px 24px 48px !important;
    }
    .ugp-chart {
        padding: 48px 32px !important;
    }
    .ugp-chart__cards {
        grid-template-columns: 1fr 1fr !important;
    }
    .ugp-steps__num-wrap {
        flex: 0 0 140px !important;
        padding: 24px 12px !important;
    }
    .ugp-steps__body {
        padding: 20px 0 !important;
    }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * モバイル（≤640px）
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 640px) {
    .ugp {
        padding: 20px 16px 40px !important;
    }

    /* パンくず */
    .ugp-breadcrumb {
        font-size: 12px !important;
        margin-bottom: 20px !important;
    }
    .ugp-breadcrumb__sep {
        margin: 0 4px !important;
    }

    /* タイトル */
    .ugp__header {
        margin-bottom: 28px !important;
    }
    .ugp__title {
        font-size: 22px !important;
        padding-bottom: 12px !important;
        line-height: 1.35 !important;
    }
    .ugp__title--inline {
        font-size: 22px !important;
        min-width: 0 !important; /* Figma 620px 指定は解除、画面幅に追従 */
    }
    .ugp__subtitle {
        font-size: 14px !important;
    }
    .ugp__subtitle br {
        display: none !important;
    }
    /* モバイルでは装飾アイコンを小さく */
    .ugp__title--hero::before,
    .ugp__title--hero::after,
    .ugp__title--inline::before,
    .ugp__title--inline::after {
        width: 30px !important;
        height: 30px !important;
        margin-left: 6px !important;
        margin-right: 6px !important;
    }

    /* モバイル: タイトル折り返し時にアイコンが末尾行に取り残されないよう
       flex で「左アイコン / テキスト / 右アイコン」を左右固定・中央揃えに */
    .ugp__title--hero,
    .ugp__title--inline {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-wrap: nowrap !important;
        text-align: center !important;
        width: 100% !important;
        gap: 6px !important;
    }
    .ugp__title--hero::before,
    .ugp__title--hero::after,
    .ugp__title--inline::before,
    .ugp__title--inline::after {
        flex: 0 0 30px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* ステップ: 左カラムを縮小しつつ横並び維持 */
    .ugp-steps {
        gap: 12px !important;
    }
    .ugp-steps__item {
        padding: 0 16px 0 0 !important;
        gap: 16px !important;
    }
    .ugp-steps__num-wrap {
        flex: 0 0 96px !important;
        padding: 16px 8px !important;
        gap: 8px !important;
    }
    .ugp-steps__num-label {
        font-size: 15px !important;
    }
    .ugp-steps__num-icon svg,
    .ugp-steps__num-icon img {
        width: 30px !important;
        height: 30px !important;
    }
    .ugp-steps__body {
        padding: 18px 0 !important;
    }
    .ugp-steps__title {
        font-size: 16px !important;
    }
    .ugp-steps__desc,
    .ugp-steps__list li {
        font-size: 13px !important;
    }
    .ugp-steps__list li {
        padding-left: 24px !important;
    }
    .ugp-steps__list li::before {
        width: 16px !important;
        height: 16px !important;
    }

    /* Q&A */
    .ugp-qa {
        padding: 24px 18px !important;
        margin-top: 32px !important;
    }
    .ugp-qa__title {
        font-size: 18px !important;
        margin-bottom: 16px !important;
    }
    .ugp-qa__item {
        padding: 16px !important;
        margin-bottom: 12px !important;
    }
    .ugp-qa__q {
        font-size: 14px !important;
    }
    .ugp-qa__a {
        font-size: 13px !important;
    }

    /* CTA */
    .ugp-cta {
        padding: 24px 20px !important;
        margin-top: 32px !important;
    }
    .ugp-cta__label {
        font-size: 16px !important;
    }
    .ugp-cta__buttons {
        flex-direction: column !important;
        gap: 10px !important;
    }
    .ugp-cta__btn {
        width: 100% !important;
        min-height: 48px !important;
        font-size: 15px !important;
        padding: 0 20px !important;
    }

    /* 早見表セクション */
    .ugp-chart {
        padding: 28px 18px !important;
        margin-top: 40px !important;
    }
    .ugp-chart__label,
    .ugp-chart__rec-title {
        font-size: 16px !important;
    }
    .ugp-chart__cards {
        grid-template-columns: 1fr !important;
    }
    .ugp-chart__card {
        padding: 18px !important;
    }
    .ugp-chart__card-title {
        font-size: 16px !important;
    }
    .ugp-chart__filters {
        gap: 6px !important;
    }
    .ugp-chart__filter-btn {
        min-height: 40px !important;
        font-size: 13px !important;
        padding: 0 14px !important;
        gap: 6px !important;
    }
    .ugp-chart__filter-btn.is-active::after {
        width: 14px !important;
        height: 14px !important;
    }

    /* チェックリスト */
    .ugp-cl__category {
        padding: 18px 16px !important;
    }
    .ugp-cl__actions {
        flex-wrap: wrap !important;
    }
}

/* 小型スマホ（≤380px）: ステップカードは縦積みに切り替え */
@media (max-width: 380px) {
    .ugp-steps__item {
        flex-direction: column !important;
        padding: 0 !important;
    }
    .ugp-steps__num-wrap {
        flex: 0 0 auto !important;
        width: 100% !important;
        flex-direction: row !important;
        justify-content: center !important;
        padding: 12px 16px !important;
    }
    .ugp-steps__body {
        padding: 16px 18px !important;
    }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * 印刷スタイル
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media print {
    /* 不要要素を非表示 */
    .ugp-cl__actions,
    .ugp-cta,
    .ugp-breadcrumb {
        display: none !important;
    }

    /* A4 1枚に収めるための全体調整 */
    @page {
        size: A4;
        margin: 10mm 12mm;
    }
    body {
        margin: 0 !important;
        padding: 0 !important;
    }
    .ugp {
        max-width: 100% !important;
        padding: 0 !important;
        line-height: 1.4 !important;
    }

    /* ヘッダーをコンパクトに */
    .ugp__header {
        margin-bottom: 12px !important;
    }
    .ugp__title {
        font-size: 18px !important;
        margin-bottom: 4px !important;
    }
    .ugp__subtitle {
        font-size: 11px !important;
    }

    /* カテゴリをコンパクトに */
    .ugp-cl__categories {
        gap: 8px !important;
    }
    .ugp-cl__category {
        padding: 8px 12px !important;
        border-radius: 6px !important;
        break-inside: avoid !important;
    }
    .ugp-cl__cat-header {
        margin-bottom: 4px !important;
        gap: 6px !important;
    }
    .ugp-cl__cat-icon svg {
        width: 16px !important;
        height: 16px !important;
    }
    .ugp-cl__cat-title {
        font-size: 13px !important;
    }

    /* チェック項目をコンパクトに */
    .ugp-cl__item {
        margin-bottom: 3px !important;
    }
    .ugp-cl__label {
        font-size: 11px !important;
        gap: 6px !important;
        line-height: 1.3 !important;
    }
    .ugp-cl__check-mark {
        width: 14px !important;
        height: 14px !important;
        border-width: 1.5px !important;
        border-color: #374151 !important;
        margin-top: 1px !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    .ugp-cl__checkbox:checked + .ugp-cl__check-mark {
        background: #2563EB !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    .ugp-cl__checkbox:checked + .ugp-cl__check-mark::after {
        left: 3px !important;
        top: 0px !important;
        width: 4px !important;
        height: 8px !important;
    }

    /* メモ欄をコンパクトに */
    .ugp-cl__memo {
        margin-top: 10px !important;
    }
    .ugp-cl__memo-title {
        font-size: 13px !important;
        margin-bottom: 4px !important;
    }
    .ugp-cl__memo-textarea {
        font-size: 11px !important;
        padding: 6px 8px !important;
        min-height: 40px !important;
        height: 40px !important;
    }
}