.dougulog-article {
line-height: 1.9;
font-size: 16px;
color: #263238;
}
.dougulog-article p {
margin: 0 0 1.2em;
}
.dougulog-article h2 {
margin: 2.6em 0 1em;
padding: 0.75em 0.9em;
border-left: 7px solid #1976d2;
border-radius: 10px;
background: linear-gradient(90deg, #e3f2fd 0%, #fff8e1 100%);
color: #12324a;
font-size: 1.35em;
box-shadow: 0 2px 8px rgba(25, 118, 210, 0.09);
}
.dougulog-article h2::before {
content: "🧳 ";
}
.dougulog-article h3 {
margin: 1.8em 0 0.8em;
padding: 0.35em 0.65em;
border-left: 4px solid #ff9800;
border-bottom: 1px solid #ffe0b2;
background: #fffaf0;
color: #17445a;
font-size: 1.1em;
}
.dougulog-article .lead-box,
.dougulog-article .check-box,
.dougulog-article .point-box,
.dougulog-article .caution-box,
.dougulog-article .link-box,
.dougulog-article .summary-box,
.dougulog-article .product-box,
.dougulog-article .image-placeholder {
margin: 1.5em 0;
padding: 1em 1.1em;
border-radius: 12px;
}
.dougulog-article .lead-box {
background: linear-gradient(135deg, #e3f2fd 0%, #fffde7 100%);
border: 1px solid #90caf9;
box-shadow: 0 2px 8px rgba(25, 118, 210, 0.08);
}
.dougulog-article .check-box {
background: #ffffff;
border: 2px solid #64b5f6;
box-shadow: 0 3px 10px rgba(25, 118, 210, 0.1);
}
.dougulog-article .check-box::before {
content: "✅ この記事でわかること";
display: inline-block;
margin-bottom: 0.5em;
font-weight: bold;
color: #1565c0;
}
.dougulog-article .point-box {
background: #fff8e1;
border: 1px solid #ffd54f;
}
.dougulog-article .point-box::before {
content: "🌿 POINT";
display: inline-block;
margin-bottom: 0.5em;
font-weight: bold;
color: #00897b;
}
.dougulog-article .caution-box {
background: #fff3e0;
border: 1px solid #ffb74d;
}
.dougulog-article .caution-box::before {
content: "⚠ 注意";
display: inline-block;
margin-bottom: 0.5em;
font-weight: bold;
color: #e65100;
}
.dougulog-article .link-box {
background: #eefaf6;
border: 1px solid #80cbc4;
}
.dougulog-article .link-box::before {
content: "🔗 関連記事";
display: inline-block;
margin-bottom: 0.5em;
font-weight: bold;
color: #00796b;
}
.dougulog-article .summary-box {
background: linear-gradient(135deg, #e3f2fd 0%, #fffde7 100%);
border: 1px solid #90caf9;
}
.dougulog-article .product-box {
background: #fff8e1;
border: 2px solid #ffcc80;
box-shadow: 0 3px 10px rgba(255, 152, 0, 0.12);
}
.dougulog-article .product-box::before {
content: "🧳 初心者向けシートバッグの例";
display: inline-block;
margin-bottom: 0.5em;
font-weight: bold;
color: #ef6c00;
}
.dougulog-article .image-placeholder {
border: 2px dashed #64b5f6;
background: #f8fcff;
color: #455a64;
font-size: 0.95em;
}
.dougulog-article ul {
margin: 0.8em 0 1.2em 1.3em;
padding: 0;
}
.dougulog-article li {
margin: 0.35em 0;
}
.dougulog-article table {
width: 100%;
border-collapse: collapse;
margin: 1.3em 0;
font-size: 0.94em;
}
.dougulog-article th,
.dougulog-article td {
border: 1px solid #bbdefb;
padding: 0.75em;
vertical-align: top;
}
.dougulog-article th {
background: #e3f2fd;
font-weight: bold;
}
.dougulog-article .table-wrap {
overflow-x: auto;
margin: 1.3em 0;
}
.dougulog-article .small-note {
font-size: 0.92em;
color: #607d8b;
}
.dougulog-article a {
color: #0077aa;
font-weight: bold;
}
.dougulog-article a:hover {
text-decoration: underline;
}
.dougulog-article figcaption {
margin-top: 0.5em;
color: #607d8b;
font-size: 0.9em;
text-align: center;
}