/* ===== Hint共通CSS（管理画面プレビュー & ユーザー表示共用） ===== */

.hint-content {
    font-size: 14px;
    color: #333;
    word-break: break-word;
    padding-bottom: 32px;
    background-color: #ffffff;
    /*padding: 16px;*/
}

/* 直下のマージン (公開: 直接の子 / 編集エリア: .vh-block ラッパー経由の子も対象) */
.hint-content > *,
.hint-content > .vh-block > *{
	margin-bottom: 16px;
}
.hint-content .mb-S{
	margin-bottom: 8px;
}
.hint-content .mb-M{
	margin-bottom: 32px;
}
.hint-content .mb-L{
	margin-bottom: 48px;
}
.hint-content .mb-XL{
	margin-bottom: 64px;
}

/* 左右余白 (全ブロック共通) — px-16 は旧データ後方互換 (現在は 20px) */
.hint-content .px-16,
.hint-content .px-20 {
	padding-left: 20px;
	padding-right: 20px;
}
/* 左右マージン (見出し用 — 下線が要素幅と一致するように) — mx-16 は旧データ後方互換 (現在は 20px) */
.hint-content .mx-16,
.hint-content .mx-20 {
	margin-left: 20px;
	margin-right: 20px;
}

/* 見出し */

.hint-content > h2,
.hint-content > h3,
.hint-content > h4,
.hint-content > .vh-block > h2,
.hint-content > .vh-block > h3,
.hint-content > .vh-block > h4{
	margin-bottom: 8px;
}
.hint-content h2 {
    font-size: 1.4rem;
    line-height: 1.5;
    font-weight: 800;
    padding-bottom: 0.4em;
    color: #111;
    border-bottom: 2px solid #eee;
    
}

.hint-content h3 {
    font-size: 1.15rem;
    line-height: 1.5;
    font-weight: 700;
    color: #222;
}
.hint-content h4 {
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 600;
    color: #374151;
}

/* 段落 */
.hint-content > p,
.hint-content > .vh-block > p {
    line-height: 1.8;
}

/* 太字（黄色マーカー） */
.hint-content strong {
    font-weight: 700;
    background: linear-gradient(transparent 60%, #fff06b 60%);
    padding: 0 2px;
}

/* 文字色（インライン装飾: ビジュアル編集のツールバーから付与） */
.hint-content .txt-blue  { color: #2563eb; }
.hint-content .txt-red   { color: #e53935; }
.hint-content .txt-green { color: #15a34a; }

/* リスト（角丸 白背景） */
.hint-content ul {
    padding-left:2.2em;
    list-style: disc;
}
.hint-content li {
    margin-bottom: 0.4em;
    line-height: 1.9;
    list-style: disc;
}
.hint-content li strong {
    font-weight: 700;
}
/* リストのグレー背景 (ビジュアル編集の「背景色」で付与) */
.hint-content ul.list-bg {
    background-color: #f0f0f0;
    border-radius: 8px;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-right: 16px;
}
.hint-content ul.list-bg li:last-child {
    margin-bottom: 0;
}

/* 画像 */
.hint-content img {
	display: block;
	margin-left: auto;
	margin-right: auto;
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
    /*border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);*/
}

/* 画像 */
.hint-content video{
	box-sizing: border-box;
}


/* リンク */
.hint-content a {
    color: #2563eb;
    text-decoration: underline;
}

/* <a>で包まれた画像はタップ可能にする（common.scssの img{pointer-events:none} を上書き） */
.hint-content a img {
    pointer-events: auto;
}

.hint-content a.btn1{
	display: block;
	width: 100%;
	padding: 0.5em 1em;
	text-align: center;
	border: 1px solid #2563eb;
	background-color: #ffffff;
	text-decoration: none;
	font-size: 16px;
	font-weight: 700;
	border-radius: 10px;
}


/* カスタム見出しクラス */
.hint-content .title-blue {
    color: #2563eb;
    border-bottom: 2px solid #2563eb;
    padding-bottom: 6px;
}

/* ステップ番号付き見出し */
.hint-content [class^="step-"] {
    display: flex;
    align-items: center;
    gap: 10px;
}
.hint-content [class^="step-"]::before {
    content: attr(data-step);
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #22c55e;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* ステップ（アプリの使い方）複合ブロック — 番号は data-step */
.hint-content .howto-step {
    /* 全体の左右に 20px の余白 */
    margin-left: 20px;
    margin-right: 20px;
}
.hint-content .howto-step__body {
    /* 全体をボーダーで囲う */
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
}
.hint-content .howto-step__head {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    line-height: 1.4;
    font-weight: 800;
    color: #111;
    /* タイトルの上下にも余白 */
    padding: 16px;
}
.hint-content .howto-step__head::before {
    content: attr(data-step);
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #4994ec;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.hint-content .howto-step__img {
    display: block;
    width: 100%;
    height: auto;
}
.hint-content .howto-step__desc {
    font-size: 16px;
    line-height: 1.8;
    /* テキストの上部にも余白（上下左右 16px） */
    padding: 16px;
    margin-bottom: 0;
}
.hint-content .howto-step__arrow {
    text-align: center;
    line-height: 1;
    margin-top: 8px;
}
.hint-content .howto-step__arrow svg { display: inline-block; vertical-align: top; }

/* :::highlight ブロック */
.hint-content .highlight {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    line-height: 1.8;
}

/* :::card ブロック */
.hint-content .card-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    background: #f0f0f0;
    border-radius: 10px;
}
.hint-content .card-icon {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: 10px;
    overflow: hidden;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hint-content .card-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hint-content .card-text {
    flex: 1;
    min-width: 0;
}
.hint-content .card-text h3,
.hint-content .card-text h4 {
    margin: 0px 0px 4px 0px;
}
.hint-content .card-text p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #6b7280;
}