/* CSS Document */
@charset "UTF-8";

img.aligncenter {
    margin-bottom: 1rem;
}

/* --- ボックス・囲み枠の基本スタイル --- */
.intro-box, .toc, .point, .summary-box {
    padding: 24px 26px !important;
    margin: 26px 0 !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
}

.intro-box {
    background: #f7fbff !important;
    border: 1px solid #d7e6f2 !important;
}

/* 重要：intro-boxやtocの中にあるh2は、通常の記事見出しの装飾を打ち消す */
.intro-box h2, .toc h2 {
    font-size: 20px !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    border-left: none !important;
    color: var(--main, #073f7e) !important;
}

.check-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid !important;
    gap: 10px !important;
}

.check-list li {
    padding-left: 31px !important;
    position: relative !important;
}

.check-list li:before {
    content: "✓" !important;
    position: absolute !important;
    left: 0 !important;
    top: .15em !important;
    background: var(--main2, #0b5fa5) !important;
    color: #fff !important;
    width: 21px !important;
    height: 21px !important;
    border-radius: 50% !important;
    display: grid !important;
    place-items: center !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

.toc {
    background: #fff !important;
    border: 1px solid #dce5f0 !important;
    border-left: 5px solid var(--main, #073f7e) !important;
}

.toc ol {
    margin: 0 !important;
    padding-left: 1.5em !important;
    color: #344f68 !important;
    font-weight: 700 !important;
}

.toc ol li a {
    text-decoration: underline;
}

/* --- 記事内の通常の見出しスタイル --- */
.entry-content > h2, .article > h2, .main > h2, body > h2 {
    font-size: 27px !important;
    line-height: 1.5 !important;
    color: var(--main, #073f7e) !important;
    margin: 50px 0 20px !important;
    padding: 16px 18px !important;
    background: #eef5fb !important;
    border-left: 5px solid var(--main, #073f7e) !important;
    border-radius: 6px !important;
}

.entry-content h3, .article h3, h3 {
    font-size: 20px !important;
    color: #082e5f !important;
    margin: 33px 0 12px !important;
    padding-left: 16px !important;
    position: relative !important;
}

.entry-content h3:before, .article h3:before, h3:before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: .55em !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: var(--accent, #f2a541) !important;
}

/* --- 2カラム・数値グリッド --- */
.stat-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    margin: 24px 0 !important;
}

.stat {
    background: #fff !important;
    border: 1px solid #dce5f0 !important;
    border-radius: 10px !important;
    padding: 22px !important;
    box-shadow: 0 8px 22px rgba(16,42,67,.05) !important;
}

.stat strong {
    display: block !important;
    font-size: 40px !important;
    line-height: 1 !important;
    color: var(--accent, #f2a541) !important;
}

.stat span {
    display: block !important;
    margin-top: 8px !important;
    font-weight: 800 !important;
    color: var(--main, #073f7e) !important;
}

/* --- 5カラム・流れ（フロー） --- */
.flow {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 10px !important;
    margin: 26px 0 !important;
}

.flow div {
    background: #f7fbff !important;
    border: 1px solid #dce5f0 !important;
    border-radius: 8px !important;
    padding: 15px 8px !important;
    text-align: center !important;
    font-weight: 800 !important;
    color: #35516e !important;
    font-size: 13px !important;
    position: relative !important;
}

.flow div:not(:last-child):after {
    content: "→" !important;
    position: absolute !important;
    right: -13px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: var(--main2, #0b5fa5) !important;
    font-weight: 900 !important;
}

/* --- 3カラム・カード --- */
.three-cards {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
    margin: 24px 0 !important;
}

.mini-card {
    padding: 20px !important;
    border: 1px solid #dce5f0 !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: 0 8px 22px rgba(16,42,67,.05) !important;
}

.mini-card .icon {
    font-size: 25px !important;
}

.mini-card b {
    display: block !important;
    color: var(--main, #073f7e) !important;
    margin: 7px 0 !important;
}
.mini-card .small {
    font-size: 14px !important;
}

/* --- テーブル --- */
.article table{
	width:100%;
	border-collapse:collapse;
	margin:30px 0;
	background:#fff;
}

.article th,
.article td{
	padding:14px 16px;
	border:1px solid var(--line);
	text-align:left;
	vertical-align:top;
}

.article th{
	width:30%;
	background:#eef5fb;
	color:var(--main);
	font-weight:700;
}

.article td{
	background:#fff;
}

/* --- ポイント・まとめボックス --- */
.point {
    background: #fff8ee !important;
    border: 1px solid #f7d9aa !important;
    border-left: 5px solid var(--accent, #f2a541) !important;
}

.point b {
    color: #91520a !important;
    margin-bottom: 1rem;
    display: block;
}

.summary-box {
    background: #f7fbff !important;
    border: 1px solid #d7e6f2 !important;
}

/* --- スマホ表示時のレスポンシブ調整 --- */
@media(max-width: 768px) {
    .stat-grid, .three-cards {
        grid-template-columns: 1fr !important;
    }
    .flow {
        grid-template-columns: 1fr !important;
    }
    .flow div:not(:last-child):after {
        content: "↓" !important;
        right: 50% !important;
        top: auto !important;
        bottom: -19px !important;
        transform: translateX(50%) !important;
    }
    .article table{
		font-size:14px;
	}

	.article th,
	.article td{
		padding:10px 12px;
	}
}