.column-article {
padding: 32px 0 48px;
}
.column-article__header {
margin-bottom: 24px;
}
.column-article__categories {
display: flex;
gap: 8px;
margin-bottom: 12px;
}
.column-article__category {
display: inline-block;
font-size: 12px;
font-weight: 700;
color: #fff;
background-color: #333;
padding: 2px 10px;
border-radius: 3px;
text-decoration: none;
}
.column-article__category:hover {
background-color: #555;
}
.column-article__title {
font-size: 24px;
font-weight: 700;
line-height: 1.4;
color: #222;
margin: 0 0 8px;
}
.column-article__date {
font-size: 13px;
color: #888;
}
.column-article__thumbnail {
margin: 0 0 24px;
}
.column-article__thumbnail img {
width: 100%;
height: auto;
border-radius: 4px;
}
.column-article__body {
font-size: 15px;
line-height: 1.8;
color: #333;
}
.column-article__body h2 {
font-size: 20px;
font-weight: 700;
margin: 32px 0 12px;
padding-bottom: 8px;
border-bottom: 2px solid #e0e0e0;
}
.column-article__body h3 {
font-size: 17px;
font-weight: 700;
margin: 24px 0 8px;
}
.column-article__body p {
margin: 0 0 16px;
}
.column-article__body img {
max-width: 100%;
height: auto;
border-radius: 4px;
}
.column-article__body ul,
.column-article__body ol {
margin: 0 0 16px;
padding-left: 1.5em;
}
.column-article__body ul {
list-style: disc;
}
.column-article__body ol {
list-style: decimal;
}
.column-article__body li {
margin-bottom: 4px;
}
.column-article__footer {
margin-top: 40px;
padding-top: 20px;
border-top: 1px solid #e0e0e0;
}
.column-article__back {
font-size: 14px;
color: #333;
text-decoration: none;
}
.column-article__back:hover {
text-decoration: underline;
}  .column-article__body [class*="is-style-notice-box"] {
border-radius: 6px;
margin: 24px 0;
font-size: 14px;
line-height: 1.8;
} .column-article__body .is-style-notice-box,
.column-article__body .is-style-notice-box-yellow,
.column-article__body .is-style-notice-box-red,
.column-article__body .is-style-notice-box-blue {
padding: 20px 24px;
}
.column-article__body .is-style-notice-box {
background-color: #f0f9f4;
border-left: 4px solid #34a853;
}
.column-article__body .is-style-notice-box-yellow {
background-color: #fef9ee;
border-left: 4px solid #f0a800;
}
.column-article__body .is-style-notice-box-red {
background-color: #fef2f2;
border-left: 4px solid #dc3545;
}
.column-article__body .is-style-notice-box-blue {
background-color: #eff6ff;
border-left: 4px solid #2563a0;
} .column-article__body .is-style-notice-box-titled,
.column-article__body .is-style-notice-box-titled-yellow,
.column-article__body .is-style-notice-box-titled-red,
.column-article__body .is-style-notice-box-titled-blue {
padding: 0;
overflow: hidden;
border-left: 4px solid #34a853;
background-color: #f0f9f4;
}
.column-article__body .is-style-notice-box-titled-yellow {
border-left-color: #f0a800;
background-color: #fef9ee;
}
.column-article__body .is-style-notice-box-titled-red {
border-left-color: #dc3545;
background-color: #fef2f2;
}
.column-article__body .is-style-notice-box-titled-blue {
border-left-color: #2563a0;
background-color: #eff6ff;
}
.column-article__body .is-style-notice-box-titled > *:first-child,
.column-article__body .is-style-notice-box-titled-yellow > *:first-child,
.column-article__body .is-style-notice-box-titled-red > *:first-child,
.column-article__body .is-style-notice-box-titled-blue > *:first-child {
margin: 0;
padding: 10px 20px;
font-size: 14px;
font-weight: 700;
color: #fff;
}
.column-article__body .is-style-notice-box-titled > *:first-child {
background-color: #34a853;
}
.column-article__body .is-style-notice-box-titled-yellow > *:first-child {
background-color: #f0a800;
}
.column-article__body .is-style-notice-box-titled-red > *:first-child {
background-color: #dc3545;
}
.column-article__body .is-style-notice-box-titled-blue > *:first-child {
background-color: #2563a0;
}
.column-article__body .is-style-notice-box-titled > *:not(:first-child),
.column-article__body .is-style-notice-box-titled-yellow > *:not(:first-child),
.column-article__body .is-style-notice-box-titled-red > *:not(:first-child),
.column-article__body .is-style-notice-box-titled-blue > *:not(:first-child) {
padding-left: 20px;
padding-right: 20px;
}
.column-article__body .is-style-notice-box-titled > *:nth-child(2),
.column-article__body .is-style-notice-box-titled-yellow > *:nth-child(2),
.column-article__body .is-style-notice-box-titled-red > *:nth-child(2),
.column-article__body .is-style-notice-box-titled-blue > *:nth-child(2) {
padding-top: 16px;
} .column-article__body [class*="is-style-notice-box"] > *:last-child {
margin-bottom: 0;
padding-bottom: 20px;
} .column-article__body details {
border: 1px solid #e0e0e0;
border-radius: 6px;
margin: 24px 0;
overflow: hidden;
}
.column-article__body details summary {
padding: 14px 20px;
font-weight: 700;
font-size: 15px;
cursor: pointer;
background-color: #f8f8f8;
list-style: none;
display: flex;
align-items: center;
gap: 8px;
}
.column-article__body details summary::-webkit-details-marker {
display: none;
}
.column-article__body details summary::before {
content: "";
display: inline-block;
width: 8px;
height: 8px;
border-right: 2px solid #555;
border-bottom: 2px solid #555;
transform: rotate(-45deg);
transition: transform 0.2s ease;
flex-shrink: 0;
}
.column-article__body details[open] summary::before {
transform: rotate(45deg);
}
.column-article__body details summary:hover {
background-color: #f0f0f0;
}
.column-article__body details > *:not(summary) {
padding: 0 20px;
}
.column-article__body details > p:nth-of-type(1),
.column-article__body details > div:nth-of-type(1) {
padding-top: 16px;
}
.column-article__body details > p:last-child,
.column-article__body details > div:last-child {
padding-bottom: 16px;
} .column-article__body .bubble {
display: flex;
align-items: flex-start;
gap: 16px;
margin: 24px 0;
}
.column-article__body .bubble--right {
flex-direction: row-reverse;
}
.column-article__body .bubble__avatar {
display: flex;
flex-direction: column;
align-items: center;
flex-shrink: 0;
gap: 4px;
}
.column-article__body .bubble__icon {
width: 64px;
height: 64px;
border-radius: 50%;
object-fit: cover;
}
.column-article__body .bubble__name {
font-size: 11px;
font-weight: 700;
color: #666;
text-align: center;
line-height: 1.3;
max-width: 80px;
word-break: keep-all;
}
.column-article__body .bubble__body {
position: relative;
background-color: #f5f5f5;
border: 1px solid #e8e8e8;
border-radius: 12px;
padding: 16px 20px;
font-size: 14px;
line-height: 1.8;
min-width: 0;
flex: 1;
}
.column-article__body .bubble__body::before {
content: "";
position: absolute;
top: 20px;
width: 0;
height: 0;
border-style: solid;
}
.column-article__body .bubble--left .bubble__body::before {
left: -8px;
border-width: 6px 8px 6px 0;
border-color: transparent #e8e8e8 transparent transparent;
}
.column-article__body .bubble--right .bubble__body::before {
right: -8px;
border-width: 6px 0 6px 8px;
border-color: transparent transparent transparent #e8e8e8;
}
.column-article__body .bubble__body::after {
content: "";
position: absolute;
top: 20px;
width: 0;
height: 0;
border-style: solid;
}
.column-article__body .bubble--left .bubble__body::after {
left: -6px;
border-width: 6px 6px 6px 0;
border-color: transparent #f5f5f5 transparent transparent;
}
.column-article__body .bubble--right .bubble__body::after {
right: -6px;
border-width: 6px 0 6px 6px;
border-color: transparent transparent transparent #f5f5f5;
}
.column-article__body .bubble__body p {
margin: 0;
}
@media (max-width: 599px) {
.column-article__body .bubble {
flex-direction: column;
gap: 8px;
}
.column-article__body .bubble--right {
flex-direction: column;
align-items: flex-end;
}
.column-article__body .bubble__avatar {
flex-direction: row;
gap: 8px;
}
.column-article__body .bubble__icon {
width: 40px;
height: 40px;
}
.column-article__body .bubble__name {
max-width: none;
}
.column-article__body .bubble__body::before,
.column-article__body .bubble__body::after {
display: none;
}
}