/**
 * Columns (お役立ちコラム) 専用スタイル
 *
 * このファイルは投稿タイプ「columns」のページでのみ読み込まれます。
 * columns専用のスタイルをここに追加してください。
 *
 * @since 2025-12-18
 */

/* ==========================================================================
   Columns Single Page Styles
   ========================================================================== */

/*
 * 以下にcolumns専用のスタイルを追加してください
 * 例:
 *
 * .column_wrap {
 *   // スタイル
 * }
 */

body.column_wrap  {
   font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
   line-height: 1.6;
   color: #333;
   max-width: 800px;
   margin: 0 auto;
   padding: 20px;
}
.column_wrap h1, .column_wrap h2, .column_wrap h3, .column_wrap h4, .column_wrap h5, .column_wrap h6 {
   font-weight: 700;
   margin-top: 1.5em;
   margin-bottom: 0.5em;
}
.column_wrap h1 {
   font-size: 2em;
   border-bottom: 2px solid #f0f0f0;
   padding-bottom: 0.3em;
}
.column_wrap h2 {
   font-size: 1.75em;
   text-align: left;
   border-bottom: 1px solid #f0f0f0;
   padding-bottom: 0.2em;
}
.column_wrap h3 {
   font-size: 1.5em;
   text-align: left;
   border-left: 3px solid #3182ce;
   border-top: none;
   border-bottom: none;
   padding: 0 0 0 1rem;
}
.column_wrap h4 { font-size: 1.25em; }
.column_wrap h5 { font-size: 1em; }
.column_wrap h6 { font-size: 0.85em; }
.column_wrap p { margin: 1em 0; }
.column_wrap ul { margin: 1em 0; padding-left: 2em; }
.column_wrap li { margin: 0.5em 0; }
.column_wrap img {
   max-width: 100%;
   height: auto;
   display: block;
   margin: 1.5em auto;
}
.column_wrap strong {
   background: linear-gradient(transparent 50%, rgba(255, 150, 150, 0.3) 50%);
   font-weight: 600;
   padding: 0 2px;
   white-space: pre-wrap;
   word-break: break-word;
}
.column_wrap em {
   font-style: normal;
   text-decoration: none;
   background: linear-gradient(transparent 50%, rgba(255, 200, 0, 0.2) 50%);
   font-weight: 600;
   padding: 0 2px;
   white-space: pre-wrap;
   word-break: break-word;
}
.column_wrap pre {
   background-color: #f8f9fa;
   border-radius: 4px;
   padding: 1rem;
   margin-bottom: 1rem;
   overflow-x: auto;
   font-size: 0.875rem;
   -webkit-overflow-scrolling: touch;
   max-width: 100%;
   white-space: pre-wrap;
   display: block;
}
.column_wrap code {
   font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
   font-size: 0.9em;
   color: #333;
}
.column_wrap table {
   border-collapse: collapse;
   width: 100%;
   margin: 1.5rem 0;
   font-size: 1.5rem;
   line-height: 1.5;
}
.column_wrap thead {
   background-color: #f1f5f9;
}
.column_wrap th {
   font-weight: 600;
   text-align: left;
   padding: 0.75rem;
   border: 1px solid #e2e8f0;
}
.column_wrap td {
   padding: 0.75rem;
   border: 1px solid #e2e8f0;
   vertical-align: top;
}
.column_wrap tr:nth-child(even) {
   background-color: #f8fafc;
}