/* ポートフォリオ作成コラム（/column 一覧・/column/<記事> 記事）
   公開トップ・お知らせと同じヘッダー／フッター・読みものの枠（style-v2-news-portal.css の .news-page-main）を使い、
   コラムの一覧カードと記事の中身（重要度・理由・OK例／NG例の見本・ひな形・まとめ）の見た目だけをここに持つ。
   OK＝緑・NG＝赤（v2 のセマンティックカラー）。 */

/* ---------- 一覧（/column） ---------- */
body.column-page .column-index-head,
body.column-page .column-list {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

.column-index-head {
    margin-bottom: 22px;
}

.column-index-title {
    margin: 0 0 8px;
    font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
    font-size: clamp(22px, 2.8vw, 28px);
    font-weight: 900;
    line-height: 1.4;
    color: var(--v2-ink);
}

.column-index-lead {
    margin: 0;
    font-size: 14px;
    line-height: 1.8;
    color: var(--v2-muted);
}

/* リード文のリンクは文字色（サイトのトンマナはモノクロ。2026-10-15 /portfolio-guide へのリンク） */
.column-index-lead a {
    color: var(--v2-ink);
    text-underline-offset: 3px;
}

.column-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.column-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px 20px;
    padding: 18px 20px;
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-lg);
    background: var(--v2-surface);
    color: var(--v2-ink);
    text-decoration: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.column-card:hover {
    border-color: var(--v2-ink);
    background: var(--v2-panel);
}

.column-card:focus-visible {
    outline: 2px solid var(--v2-ink);
    outline-offset: 2px;
}

.column-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin: 0 0 6px;
    font-size: 12px;
    color: var(--v2-muted);
}

.column-card-title {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.5;
    text-wrap: balance;
}

.column-card-lead {
    margin: 0;
    font-size: 13px;
    line-height: 1.75;
    color: var(--v2-muted);
}

.column-card-more {
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.column-chip {
    display: inline-block;
    padding: 2px 10px;
    border: 1px solid var(--v2-line);
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--v2-ink);
    background: var(--v2-surface);
}

.column-chip-importance {
    border-color: var(--v2-ink);
}

/* ---------- 記事（/column/<記事>） ---------- */
body.column-page .column-article {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    color: var(--v2-ink);
}

.column-kicker {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    align-items: center;
    margin: 0 0 12px;
    font-size: 12.5px;
    color: var(--v2-muted);
}

.column-title {
    margin: 0 0 16px;
    font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 900;
    line-height: 1.45;
    text-wrap: balance;
}

.column-lead {
    margin: 0 0 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--v2-line);
    font-size: 15.5px;
    line-height: 1.95;
}

.column-section {
    margin: 0 0 36px;
}

.column-section h2 {
    margin: 0 0 14px;
    font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
    font-size: 20px;
    font-weight: 900;
    line-height: 1.45;
    text-wrap: balance;
}

.column-section h3 {
    margin: 20px 0 6px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.55;
}

.column-section p,
.column-section li {
    font-size: 15px;
    line-height: 1.95;
}

.column-section p {
    margin: 0 0 12px;
}

/* 重要度（10段階） */
.column-importance {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px 22px;
    margin: 0 0 36px;
    padding: 18px 22px;
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-lg);
    background: var(--v2-panel);
}

.column-importance-label {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--v2-muted);
}

.column-importance-score {
    margin: 0;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.column-importance-score strong {
    font-size: 40px;
    font-weight: 900;
    line-height: 1;
    color: var(--v2-accent);
}

.column-importance-score span {
    margin-left: 4px;
    font-size: 15px;
    font-weight: 700;
    color: var(--v2-muted);
}

.column-importance-bar {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.column-importance-bar li {
    height: 10px;
    border-radius: 2px;
    background: var(--v2-line);
}

.column-importance-bar li.is-on {
    background: var(--v2-accent);
}

.column-importance-note {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 13px;
    line-height: 1.75;
    color: var(--v2-muted);
}

/* キャリアアドバイザーの確認観点の引用 */
.column-viewpoint {
    margin: 20px 0 0;
    padding: 14px 18px;
    border-left: 3px solid var(--v2-ink);
    background: var(--v2-panel);
}

.column-viewpoint p {
    margin: 0;
    font-size: 14px;
    line-height: 1.85;
}

.column-viewpoint cite {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    font-style: normal;
    color: var(--v2-muted);
}

/* OK例・NG例の見本（ポートフォリオの1ページを簡略化した図） */
.column-verdict {
    display: inline-block;
    margin-right: 8px;
    padding: 1px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 900;
    vertical-align: 2px;
}

.column-verdict-ok {
    background: var(--v2-positive-soft);
    color: var(--v2-positive);
}

.column-verdict-ng {
    background: var(--v2-negative-soft);
    color: var(--v2-negative);
}

.column-sample {
    margin: 0 0 16px;
    padding: 14px;
    border: 2px solid var(--v2-line);
    border-radius: var(--v2-r-lg);
    background: var(--v2-surface);
}

.column-sample.is-ok {
    border-color: var(--v2-positive);
}

.column-sample.is-ng {
    border-color: var(--v2-negative);
}

.column-sample figcaption {
    margin: 12px 0 0;
    font-size: 12px;
    color: var(--v2-muted);
}

/* 見本のページ（ポートフォリオの1ページ）。実際のポートフォリオに多い A4横の比率・
   「WORKS 03」の見出し・ページ番号・作品画像＋仕様欄（制作物／担当領域／使用ソフト／メンバー構成）の形を模す。
   作品画像は架空のECアプリの画面（一覧・購入手続き・商品詳細）をスマホの枠で描く。 */
.pf-page {
    display: flex;
    flex-direction: column;
    gap: 10px;
    aspect-ratio: 297 / 210;
    max-width: 100%;
    padding: 16px 18px 10px;
    border: 1px solid #e3e1dc;
    border-radius: 4px;
    background: #fbfaf7;
    box-sizing: border-box;
    box-shadow: 0 1px 2px rgba(37, 32, 23, 0.06), 0 8px 24px rgba(37, 32, 23, 0.06);
    overflow: hidden;
    color: #252017;
    font-family: "Noto Sans JP", "Zen Kaku Gothic New", sans-serif;
}

.pf-page-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #252017;
}

.pf-works {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: #e0602a;
}

.pf-page-title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.pf-page-cat {
    margin-left: auto;
    font-size: 10px;
    color: #6e727a;
}

.pf-page-body {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 16px;
    min-height: 0;
}

/* 作品画像: スマホの画面を3枚、中央を少し大きく重ねる */
.pf-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    border-radius: 3px;
    background: linear-gradient(160deg, #efe9df 0%, #e4ddd1 100%);
    overflow: hidden;
    min-height: 0;
}

.pf-phone {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5%;
    width: 30%;
    aspect-ratio: 9 / 19;
    margin: 0 -2%;
    padding: 5% 5% 4%;
    border: 3px solid #1b1d24;
    border-radius: 14px;
    background: #fff;
    box-sizing: border-box;
    box-shadow: 0 6px 16px rgba(27, 29, 36, 0.18);
    overflow: hidden;
}

.pf-phone.is-front {
    z-index: 1;
    width: 35%;
}

.pf-phone-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pf-phone-bar i {
    width: 34%;
    height: 5px;
    border-radius: 2px;
    background: #1b1d24;
}

.pf-phone-bar b {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #e0602a;
}

.pf-phone-search {
    height: 9px;
    border-radius: 999px;
    background: #efeff1;
}

.pf-phone-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
}

.pf-phone-grid i {
    aspect-ratio: 3 / 4;
    border-radius: 3px;
}

.pf-phone .c1 { background: #d8c3a5; }
.pf-phone .c2 { background: #8e9aaf; }
.pf-phone .c3 { background: #cbc0d3; }
.pf-phone .c4 { background: #b5838d; }

.pf-phone-tab {
    display: flex;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 5px;
    border-top: 1px solid #efeff1;
}

.pf-phone-tab i {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: #c9cbd1;
}

.pf-phone-tab i:first-child {
    background: #1b1d24;
}

/* 購入手続き（3ステップの表示） */
.pf-phone-steps {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 6%;
}

.pf-phone-steps span {
    display: grid;
    place-items: center;
    width: 14px;
    height: 14px;
    border: 1px solid #c9cbd1;
    border-radius: 50%;
    font-size: 8px;
    font-weight: 700;
    color: #9a9ca3;
    background: #fff;
}

.pf-phone-steps span.is-done {
    border-color: #1b1d24;
    background: #1b1d24;
    color: #fff;
}

.pf-phone-steps span.is-now {
    border-color: #e0602a;
    color: #e0602a;
}

.pf-phone-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pf-phone-item i {
    flex: none;
    width: 28%;
    aspect-ratio: 1;
    border-radius: 3px;
}

.pf-phone-item span {
    flex: 1;
    height: 5px;
    border-radius: 2px;
    background: #d5d7db;
}

.pf-phone-total {
    height: 6px;
    width: 55%;
    margin-left: auto;
    border-radius: 2px;
    background: #1b1d24;
}

.pf-phone-cta {
    margin-top: auto;
    padding: 5px 0;
    border-radius: 999px;
    background: #e0602a;
    color: #fff;
    font-size: 7.5px;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
}

.pf-phone-cta.is-sub {
    background: #1b1d24;
}

.pf-phone-hero {
    aspect-ratio: 1;
    border-radius: 4px;
}

.pf-phone-lines {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pf-phone-lines span {
    height: 5px;
    border-radius: 2px;
    background: #d5d7db;
}

.pf-phone-lines span.short {
    width: 60%;
}

/* 仕様欄（実際のポートフォリオでよく使われる見出しの形） */
.pf-spec {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    font-size: 10.5px;
    line-height: 1.55;
    overflow: hidden;
}

.pf-spec-dl {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 3px 10px;
    margin: 0;
}

.pf-spec-dl dt {
    font-weight: 700;
    color: #6e727a;
    white-space: nowrap;
}

.pf-spec-dl dd {
    margin: 0;
}

.pf-spec-label {
    margin: 4px 0 0;
    font-weight: 700;
    color: #6e727a;
}

.pf-phases {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 3px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pf-phases li {
    padding: 2px 0;
    border: 1px solid #d5d7db;
    border-radius: 3px;
    font-size: 8.5px;
    text-align: center;
    color: #9a9ca3;
    white-space: nowrap;
    overflow: hidden;
}

.pf-phases li.is-on {
    border-color: #252017;
    background: #252017;
    color: #fff;
    font-weight: 700;
}

.pf-spec-text {
    margin: 0;
}

.pf-spec-text.is-vague {
    margin-top: 6px;
    color: #6e727a;
}

.pf-spec-result {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: auto 0 0;
    padding-top: 6px;
    border-top: 1px solid #e3e1dc;
}

.pf-spec-result span {
    color: #6e727a;
    font-weight: 700;
}

.pf-spec-result strong {
    font-size: 15px;
    font-weight: 900;
    color: #e0602a;
    font-variant-numeric: tabular-nums;
}

.pf-page-foot {
    display: flex;
    justify-content: space-between;
    font-size: 8.5px;
    letter-spacing: 0.08em;
    color: #9a9ca3;
}

/* ---------- 見本の部品（記事ごとに組み合わせて使う） ----------
   どれも架空の作品を HTML/CSS で描いた簡略図。実際のポートフォリオに多い形
   （Webサイトの画面・写真を使ったバナー・ページの並び・目次・ファイルの情報など）を模す。 */

/* 作品画像の中の写真・商品の代わりに置く色 */
.column-sample .c1 { background: #d8c3a5; }
.column-sample .c2 { background: #8e9aaf; }
.column-sample .c3 { background: #cbc0d3; }
.column-sample .c4 { background: #b5838d; }
.column-sample .c5 { background: #9fb8ad; }
.column-sample .c6 { background: #e8b78a; }

/* 作品画像を大きく見せるページ（説明は下に1〜2行） */
.pf-page-body.is-visual-first {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 8px;
}

.pf-page-body.is-visual-first .pf-visual {
    min-height: 150px;
}

/* 説明文が紙面の多くを占めるページ（NG例） */
.pf-page-body.is-text-heavy {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
}

.pf-caption {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 14px;
    font-size: 10.5px;
    line-height: 1.55;
}

.pf-caption b {
    font-weight: 700;
    color: #6e727a;
}

.pf-longtext {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    font-size: 9.5px;
    line-height: 1.6;
    overflow: hidden;
}

.pf-longtext h4 {
    margin: 0;
    font-size: 10.5px;
    font-weight: 700;
}

/* Webサイトの画面（ブラウザの枠） */
.pf-browser {
    display: flex;
    flex-direction: column;
    width: 86%;
    max-width: 100%;
    aspect-ratio: 16 / 10;
    border: 2px solid #1b1d24;
    border-radius: 6px;
    background: #fff;
    box-sizing: border-box;
    box-shadow: 0 6px 16px rgba(27, 29, 36, 0.18);
    overflow: hidden;
}

.pf-browser-bar {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 4px 6px;
    background: #efeff1;
}

.pf-browser-bar i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #c9cbd1;
}

.pf-browser-bar span {
    flex: 1;
    height: 6px;
    margin-left: 6px;
    border-radius: 999px;
    background: #fff;
}

.pf-lp {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 6px 8px 8px;
    min-height: 0;
}

.pf-lp-nav {
    display: flex;
    align-items: center;
    gap: 7px;
}

.pf-lp-nav b {
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.06em;
    color: #1b1d24;
}

.pf-lp-nav span {
    width: 9%;
    height: 4px;
    border-radius: 2px;
    background: #c9cbd1;
}

.pf-lp-nav b + span {
    margin-left: auto;
}

.pf-lp-hero {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 6px;
    padding: 0 9%;
    border-radius: 3px;
    background: linear-gradient(120deg, #f4ecdf 0%, #e8d6ba 100%);
    overflow: hidden;
    min-height: 0;
}

.pf-lp-copy {
    position: relative;
    z-index: 1;
    font-size: 11.5px;
    font-weight: 900;
    line-height: 1.4;
    color: #1b1d24;
}

.pf-lp-sub {
    position: relative;
    z-index: 1;
    font-size: 7.5px;
    color: #4b4f57;
}

.pf-lp-btn {
    position: relative;
    z-index: 1;
    padding: 3px 10px;
    border-radius: 999px;
    background: #e0602a;
    color: #fff;
    font-size: 7.5px;
    font-weight: 700;
    white-space: nowrap;
}

/* 商品（瓶）の写真の代わり */
.pf-lp-product {
    position: absolute;
    right: 12%;
    bottom: -6%;
    width: 15%;
    aspect-ratio: 1 / 2.3;
    border-radius: 7px 7px 4px 4px;
    background: linear-gradient(90deg, #fffdf8 0%, #f1e7d6 100%);
    box-shadow: 0 4px 10px rgba(80, 60, 30, 0.2);
}

.pf-lp-product::before {
    content: "";
    position: absolute;
    left: 28%;
    right: 28%;
    top: -9%;
    height: 11%;
    border-radius: 2px;
    background: #7a6a55;
}

.pf-lp-product::after {
    content: "";
    position: absolute;
    left: 14%;
    right: 14%;
    top: 38%;
    height: 22%;
    border-radius: 2px;
    background: #e0602a;
    opacity: 0.85;
}

.pf-lp-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
}

.pf-lp-cards span {
    padding: 4px 5px;
    border-radius: 2px;
    background: #f5f3ef;
    font-size: 7px;
    font-weight: 700;
    line-height: 1.35;
    color: #4b4f57;
    white-space: nowrap;
    overflow: hidden;
}

/* ダミーのまま（NG例）: 画像の代わりの灰色の枠と「NO IMAGE」 */
.pf-lp-hero.is-dummy {
    background:
        linear-gradient(to top right, transparent calc(50% - 0.5px), #c9cbd1 calc(50% - 0.5px), #c9cbd1 calc(50% + 0.5px), transparent calc(50% + 0.5px)),
        linear-gradient(to bottom right, transparent calc(50% - 0.5px), #c9cbd1 calc(50% - 0.5px), #c9cbd1 calc(50% + 0.5px), transparent calc(50% + 0.5px)),
        #ececee;
}

.pf-dummy-label {
    position: absolute;
    right: 8%;
    bottom: 10%;
    padding: 2px 6px;
    background: #ececee;
    font-size: 7.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #9a9ca3;
}

/* ワイヤーフレーム（検討段階の資料）。線だけで描く */
.pf-browser.is-wire {
    border-color: #9a9ca3;
    box-shadow: none;
}

.pf-browser.is-wire .pf-lp-hero {
    background: #fff;
    border: 1px dashed #9a9ca3;
}

.pf-browser.is-wire .pf-lp-copy,
.pf-browser.is-wire .pf-lp-nav b {
    color: #6e727a;
}

.pf-browser.is-wire .pf-lp-btn {
    background: #fff;
    border: 1px solid #6e727a;
    color: #6e727a;
}

.pf-browser.is-wire .pf-lp-cards span {
    background: #fff;
    border: 1px dashed #c9cbd1;
    color: #9a9ca3;
}

/* 段階の注記（「ワイヤーフレーム」「ラフ」など） */
.pf-stage {
    position: absolute;
    left: 6px;
    top: 6px;
    z-index: 2;
    padding: 2px 7px;
    border-radius: 2px;
    background: #252017;
    color: #fff;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

/* 写真を使ったバナー（架空の旅行キャンペーン）。写真は色の重なりで描く */
.pf-banner {
    position: relative;
    width: 94%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 6px 16px rgba(27, 29, 36, 0.18);
}

.pf-scene {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #f6c9a0 0%, #f3a98c 40%, #9dbbcf 62%, #4f7f9f 100%);
}

.pf-scene i {
    position: absolute;
    display: block;
}

.pf-scene .sun {
    left: 60%;
    top: 20%;
    width: 17%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, #fff6df 0%, #ffdca6 55%, rgba(255, 220, 166, 0) 72%);
}

.pf-scene .isle1 {
    left: -4%;
    bottom: 35%;
    width: 50%;
    height: 27%;
    background: #3d5a6e;
    clip-path: polygon(0 100%, 26% 34%, 52% 8%, 78% 44%, 100% 100%);
}

.pf-scene .isle2 {
    left: 50%;
    bottom: 35%;
    width: 38%;
    height: 16%;
    background: #5b7a8f;
    clip-path: polygon(0 100%, 34% 20%, 62% 0, 100% 100%);
}

.pf-scene .sea {
    left: 0;
    right: 0;
    bottom: 0;
    height: 36%;
    background:
        repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0 1px, transparent 1px 6px),
        linear-gradient(180deg, #6593b0 0%, #3f6b8a 100%);
}

.pf-banner-copy {
    position: absolute;
    left: 7%;
    top: 13%;
    display: flex;
    flex-direction: column;
    gap: 3px;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.pf-banner-copy span {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.pf-banner-copy strong {
    font-size: 14px;
    font-weight: 900;
    line-height: 1.35;
}

.pf-banner-btn {
    position: absolute;
    left: 7%;
    bottom: 9%;
    padding: 3px 10px;
    border-radius: 999px;
    background: #fff;
    color: #1b1d24;
    font-size: 7.5px;
    font-weight: 700;
}

/* フリー素材のウォーターマーク（NG例） */
.pf-watermark {
    position: absolute;
    inset: -30% -20%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-content: space-around;
    transform: rotate(-20deg);
    pointer-events: none;
}

.pf-watermark span {
    padding: 8px 0;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-align: center;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.6);
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.35);
}

/* 解像度が足りない画像（NG例）: ぼやけと圧縮のブロック */
.pf-banner.is-lowres .pf-scene,
.pf-banner.is-lowres .pf-banner-copy,
.pf-banner.is-lowres .pf-banner-btn {
    filter: blur(1.6px);
}

.pf-banner.is-lowres::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.07) 0 5px, transparent 5px 10px),
        repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.06) 0 5px, transparent 5px 10px);
}

/* 小さく並べすぎた作品画像（NG例） */
.pf-thumbs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3px;
    width: 24%;
    align-self: flex-start;
    margin: 8px 0 0 8px;
}

.pf-thumbs i {
    aspect-ratio: 1;
    border-radius: 1px;
}

.pf-visual.is-sparse {
    justify-content: flex-start;
    align-items: flex-start;
    background: #f1efea;
}

/* 部分の拡大（細部を見せる） */
.pf-visual-detail {
    position: absolute;
    right: 5%;
    bottom: 7%;
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 22%;
}

.pf-visual-detail span {
    padding: 4px;
    border: 2px solid #fff;
    border-radius: 3px;
    background: #fff;
    box-shadow: 0 3px 8px rgba(27, 29, 36, 0.18);
    font-size: 7px;
    font-weight: 700;
    color: #4b4f57;
}

.pf-visual-detail span i {
    display: block;
    height: 18px;
    margin-bottom: 3px;
    border-radius: 2px;
}

/* ---------- ページの並び（PDFのページ一覧を模す） ---------- */
.pf-strip {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border-radius: 4px;
    background: #e9e7e2;
    color: #252017;
}

.pf-strip-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 12px;
    font-size: 11px;
    font-weight: 700;
    color: #6e727a;
}

.pf-strip-head strong {
    color: #252017;
    font-variant-numeric: tabular-nums;
}

.pf-strip-pages {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 12px 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pf-strip-pages.is-large {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.column-section .pf-strip-pages li {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    font-size: inherit;
    line-height: inherit;
}

.pf-strip-more {
    display: grid;
    place-items: center;
    aspect-ratio: 297 / 210;
    border: 1px dashed #b9b6ae;
    border-radius: 2px;
    font-size: 10px;
    font-weight: 700;
    color: #6e727a;
    text-align: center;
}

.pf-mini-cap {
    font-size: 10.5px;
    line-height: 1.4;
    color: #4b4f57;
}

.pf-mini-cap b {
    margin-right: 4px;
    font-weight: 700;
    color: #9a9ca3;
    font-variant-numeric: tabular-nums;
}

.pf-strip-pages li.is-flag .pf-mini {
    outline: 2px solid var(--v2-negative);
    outline-offset: 1px;
}

.pf-strip-pages li.is-flag .pf-mini-cap {
    color: var(--v2-negative);
    font-weight: 700;
}

.pf-strip-pages li.is-good .pf-mini {
    outline: 2px solid var(--v2-positive);
    outline-offset: 1px;
}

.pf-strip-pages li.is-good .pf-mini-cap {
    color: var(--v2-positive);
    font-weight: 700;
}

/* 1ページの縮小図 */
.pf-mini {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: 6%;
    aspect-ratio: 297 / 210;
    max-width: 100%;
    padding: 7%;
    border-radius: 2px;
    background: #fbfaf7;
    box-sizing: border-box;
    box-shadow: 0 1px 2px rgba(37, 32, 23, 0.14);
    overflow: hidden;
}

.pf-mini .mt {
    grid-column: 1 / -1;
    width: 46%;
    height: 5px;
    border-radius: 1px;
    background: #252017;
}

.pf-mini .mv {
    border-radius: 1px;
    min-height: 0;
}

.pf-mini .ml {
    min-height: 0;
    background: repeating-linear-gradient(180deg, #cfd1d5 0 3px, transparent 3px 7px);
}

.pf-mini .mx {
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.1em;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
}

/* 人物写真の代わり */
.pf-mini .mc {
    aspect-ratio: 1;
    align-self: center;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 38%, #8e7f74 0 21%, transparent 22%),
        radial-gradient(ellipse at 50% 102%, #8e7f74 0 44%, transparent 45%),
        #ddd6cd;
}

.pf-mini.is-full {
    grid-template-columns: minmax(0, 1fr);
}

.pf-mini.is-text {
    grid-template-columns: minmax(0, 1fr);
}

.pf-mini.is-cover,
.pf-mini.is-divider {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    place-items: center;
    background: #252017;
    color: #fff;
}

.pf-mini.is-divider {
    background: #e0602a;
}

.pf-mini.is-toc {
    grid-template-columns: minmax(0, 1fr);
}

.pf-mini.is-toc .ml {
    background: repeating-linear-gradient(180deg, #cfd1d5 0 2px, transparent 2px 6px);
}

.pf-mini.is-profile {
    grid-template-columns: 28% minmax(0, 1fr);
}

.pf-mini.is-selfie {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    place-items: center;
    padding: 5%;
}

.pf-mini.is-selfie .mc {
    height: 100%;
    width: auto;
}

.pf-mini.is-selfie .mx {
    color: #6e727a;
}

.pf-mini.is-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: auto;
    align-content: start;
    gap: 3px;
}

.pf-mini.is-grid .mv {
    aspect-ratio: 1;
}

.pf-mini.is-grid .mt {
    margin-bottom: 3px;
}

/* ページごとに形がばらばら（NG例）に使う変形 */
.pf-mini .mt.is-center {
    justify-self: center;
}

.pf-mini .mt.is-end {
    justify-self: end;
}

.pf-mini .mt.is-accent {
    background: #e0602a;
}

.pf-mini .mt.is-thin {
    width: 30%;
    height: 3px;
}

.pf-mini.is-rev {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
}

.pf-mini.is-bottom {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) 14% auto;
}

/* ---------- 目次・作品一覧のページ ---------- */
.pf-toc {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 5px 10px;
    margin: 0;
    font-size: 10.5px;
    line-height: 1.45;
}

.pf-toc-row {
    display: contents;
}

.pf-toc-no {
    font-weight: 700;
    color: #9a9ca3;
    font-variant-numeric: tabular-nums;
}

.pf-toc-title {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.pf-toc-title i {
    flex: none;
    width: 26px;
    height: 17px;
    border-radius: 2px;
}

.pf-toc-title span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pf-toc-year,
.pf-toc-page {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-align: right;
}

.pf-toc-year.is-old {
    color: var(--v2-negative);
    font-weight: 700;
}

.pf-toc-year.is-none {
    color: #9a9ca3;
}

.pf-toc-page {
    color: #9a9ca3;
}

.pf-tag {
    display: inline-block;
    flex: none;
    padding: 0 5px;
    border: 1px solid #c9cbd1;
    border-radius: 2px;
    font-size: 8.5px;
    font-weight: 700;
    color: #6e727a;
    white-space: nowrap;
}

.pf-tag.is-client {
    border-color: #252017;
    color: #252017;
}

.pf-toc-group {
    grid-column: 1 / -1;
    margin-top: 4px;
    padding-bottom: 2px;
    border-bottom: 1px solid #e3e1dc;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.12em;
    color: #e0602a;
}

.pf-toc-group:first-child {
    margin-top: 0;
}

.pf-page.is-toc-page .pf-page-body {
    grid-template-columns: minmax(0, 1fr);
}

.pf-page.is-toc-page .pf-toc {
    gap: 12px 14px;
    font-size: 12.5px;
}

.pf-page.is-toc-page .pf-toc-title i {
    width: 46px;
    height: 32px;
}

/* 作品の時期の内訳（直近3年以内の割合） */
.pf-meter {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: auto;
    font-size: 10px;
    color: #6e727a;
}

.pf-meter-bar {
    position: relative;
    height: 8px;
    border-radius: 999px;
    background: #e3e1dc;
    overflow: hidden;
}

.pf-meter-bar i {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: 999px;
    background: var(--v2-positive);
}

.pf-meter-bar.is-low i {
    background: var(--v2-negative);
}

.pf-meter strong {
    color: #252017;
    font-variant-numeric: tabular-nums;
}

/* ---------- ファイルの情報（ファイルサイズ） ---------- */
.pf-file {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 18px;
    border-radius: 4px;
    background: #fbfaf7;
    box-shadow: 0 1px 2px rgba(37, 32, 23, 0.06), 0 8px 24px rgba(37, 32, 23, 0.06);
    color: #252017;
}

.pf-file-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.pf-file-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px;
    height: 42px;
    border-radius: 3px 10px 3px 3px;
    background: #b23b3b;
    color: #fff;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.04em;
}

.pf-file-name {
    min-width: 0;
    font-size: 13px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.pf-file-meta {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 400;
    color: #6e727a;
}

.pf-file-size {
    margin-left: auto;
    font-size: 20px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pf-file-size.is-heavy {
    color: var(--v2-negative);
}

.pf-file-size.is-light {
    color: var(--v2-positive);
}

.pf-scale {
    position: relative;
    height: 10px;
    margin: 6px 0 18px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(47, 111, 94, 0.25) 0 20%, rgba(214, 160, 40, 0.3) 20% 33.3%, rgba(178, 59, 59, 0.22) 33.3% 100%);
}

.pf-scale i {
    position: absolute;
    top: -4px;
    width: 3px;
    height: 18px;
    margin-left: -1px;
    border-radius: 2px;
    background: #252017;
}

.pf-scale span {
    position: absolute;
    top: 14px;
    font-size: 9.5px;
    color: #6e727a;
    white-space: nowrap;
    transform: translateX(-50%);
    font-variant-numeric: tabular-nums;
}

.pf-scale span:first-of-type {
    transform: none;
}

.pf-scale span:last-of-type {
    transform: translateX(-100%);
}

.pf-file-note {
    font-size: 11.5px;
    line-height: 1.6;
    color: #4b4f57;
}

.pf-file-note.is-alert {
    padding: 8px 10px;
    border-radius: 3px;
    background: var(--v2-negative-soft);
    color: var(--v2-negative);
    font-weight: 700;
}

/* ---------- 文章の見本（誤字・言葉づかい） ---------- */
.pf-copy {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    font-size: 11px;
    line-height: 1.75;
}

.pf-copy h4 {
    margin: 0;
    font-size: 11.5px;
    font-weight: 700;
}

.pf-typo {
    padding: 0 1px;
    background: rgba(178, 59, 59, 0.1);
    color: inherit;
    text-decoration: underline wavy var(--v2-negative);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

/* ---------- 課題→成果の流れ・制作の過程 ---------- */
.pf-flow {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pf-flow li {
    display: grid;
    grid-template-columns: 5.8em minmax(0, 1fr);
    gap: 6px;
    font-size: 9.5px;
    line-height: 1.5;
}

.pf-flow li b {
    padding: 0 4px;
    border-radius: 2px;
    background: #efe9df;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
}

.pf-flow li.is-result b {
    background: #e0602a;
    color: #fff;
}

.pf-process {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.column-section .pf-process li {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    font-size: 8.5px;
    line-height: 1.35;
    font-weight: 700;
    color: #4b4f57;
}

.pf-process-frame {
    position: relative;
    aspect-ratio: 4 / 3;
    border: 1px solid #d5d7db;
    border-radius: 2px;
    background: #fff;
    overflow: hidden;
}

.pf-process-frame.is-memo {
    background: repeating-linear-gradient(180deg, #fff 0 6px, #eef1f5 6px 7px);
}

.pf-process-frame.is-memo::before,
.pf-process-frame.is-memo::after {
    content: "";
    position: absolute;
    width: 34%;
    height: 30%;
    background: #f7df8f;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.pf-process-frame.is-memo::before {
    left: 10%;
    top: 14%;
    transform: rotate(-4deg);
}

.pf-process-frame.is-memo::after {
    right: 12%;
    top: 46%;
    background: #f4b8a0;
    transform: rotate(3deg);
}

.pf-process-frame.is-wire::before {
    content: "";
    position: absolute;
    inset: 12% 10% 40%;
    border: 1px dashed #9a9ca3;
}

.pf-process-frame.is-wire::after {
    content: "";
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: 12%;
    height: 18%;
    background: repeating-linear-gradient(90deg, #d5d7db 0 28%, transparent 28% 36%);
}

.pf-process-frame.is-rough {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3px;
    padding: 8% 6%;
}

.pf-process-frame.is-rough i {
    border-radius: 2px;
}

.pf-process-frame.is-final {
    border-color: #252017;
}

.pf-process-frame.is-final i {
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, #f4ecdf 0%, #e8d6ba 100%);
}

.pf-process-frame.is-final b {
    position: absolute;
    left: 10%;
    top: 30%;
    width: 44%;
    height: 12%;
    border-radius: 1px;
    background: #1b1d24;
}

.pf-process-frame.is-final em {
    position: absolute;
    left: 10%;
    top: 52%;
    width: 26%;
    height: 12%;
    border-radius: 999px;
    background: #e0602a;
}

/* ---------- ページの見出しの比べ（案件名が分かるか） ---------- */
.pf-heads {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.column-section .pf-heads li {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 12px;
    padding: 10px 14px;
    border-radius: 3px;
    background: #fbfaf7;
    box-shadow: 0 1px 2px rgba(37, 32, 23, 0.1);
    color: #252017;
    font-size: inherit;
    line-height: 1.5;
}

.pf-heads .pf-page-title {
    font-size: 14px;
}

.pf-heads .pf-page-sub {
    font-size: 10.5px;
    color: #6e727a;
}

.pf-heads .pf-page-cat {
    font-size: 10.5px;
}

/* 説明だけのページ（目次・文章の見本など）と、作品画像だけのページ */
.pf-plain {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    min-height: 0;
}

.pf-page-body.is-single {
    grid-template-columns: minmax(0, 1fr);
}

.pf-page-body.is-visual-first .pf-visual > .pf-browser,
.pf-page-body.is-visual-first .pf-visual > .pf-banner {
    width: auto;
    height: 88%;
}

/* 完成品と検討段階の資料を並べる */
.pf-dual {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    width: 94%;
}

.pf-dual-item {
    position: relative;
    display: flex;
    justify-content: center;
}

.pf-dual .pf-browser {
    width: 100%;
}

/* 説明だけのページでも、見本の中の文字は小さめにそろえる */
.pf-plain {
    font-size: 10.5px;
    line-height: 1.55;
}

/* LPのPC表示とスマホ表示を並べる */
.pf-pcsp {
    position: relative;
    width: 94%;
    padding-bottom: 24%;
}

.pf-pcsp .pf-browser {
    width: 84%;
}

.pf-sp {
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 27%;
    aspect-ratio: 9 / 19;
    padding: 9px 7px 8px;
    border: 3px solid #1b1d24;
    border-radius: 12px;
    background: #fff;
    box-sizing: border-box;
    box-shadow: 0 6px 16px rgba(27, 29, 36, 0.22);
    overflow: hidden;
}

.pf-sp-hero {
    position: relative;
    flex: 0 0 44%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 6px;
    border-radius: 3px;
    background: linear-gradient(160deg, #f4ecdf 0%, #e8d6ba 100%);
    font-size: 7.5px;
    font-weight: 900;
    line-height: 1.35;
    color: #1b1d24;
    overflow: hidden;
}

.pf-sp-hero i {
    position: absolute;
    right: 10%;
    top: 12%;
    width: 22%;
    aspect-ratio: 1 / 2.3;
    border-radius: 4px 4px 2px 2px;
    background: #fffdf8;
    box-shadow: 0 2px 6px rgba(80, 60, 30, 0.2);
}

/* プロセスの見開き: 成果物を縦長の枠で並べる */
.pf-plain > .pf-process .pf-process-frame {
    aspect-ratio: 2 / 3;
}

/* 見本ページの外にある文章（ファイルの情報など）に、記事本文の段落の指定が効かないようにする */
.column-section .pf-file .pf-file-note {
    margin: 0;
    font-size: 11.5px;
    line-height: 1.6;
}

@media screen and (max-width: 600px) {
    /* 狭い画面ではプロセスの枠を2列にするので、縦長にしない */
    .pf-plain > .pf-process .pf-process-frame {
        aspect-ratio: 4 / 3;
    }
}

/* 記事本文の段落の指定（.column-section p）が見本ページの中に効かないよう、見本の中では打ち消す */
.column-sample .pf-page p {
    margin: 0;
    font-size: inherit;
    line-height: inherit;
}

.column-sample .pf-page .pf-spec-label {
    margin-top: 4px;
}

.column-sample .pf-page .pf-spec-text.is-vague {
    margin-top: 6px;
}

.column-sample .pf-page .pf-spec-result {
    margin-top: auto;
}

/* 見本に重ねる注記（どこが良い／足りないか） */
.column-marks {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.column-marks li {
    position: relative;
    padding-left: 28px;
    font-size: 14.5px;
    line-height: 1.85;
}

.column-marks li::before {
    position: absolute;
    left: 0;
    top: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 900;
    line-height: 20px;
    text-align: center;
}

.column-marks.is-ok li::before {
    content: "✓";
    background: var(--v2-positive-soft);
    color: var(--v2-positive);
}

.column-marks.is-ng li::before {
    content: "!";
    background: var(--v2-negative-soft);
    color: var(--v2-negative);
}

/* 書き方のひな形 */
.column-template {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    line-height: 1.75;
}

.column-template th,
.column-template td {
    padding: 10px 12px;
    border: 1px solid var(--v2-line);
    text-align: left;
    vertical-align: top;
}

.column-template th {
    width: 9.5em;
    background: var(--v2-panel);
    font-weight: 700;
    white-space: nowrap;
}

.column-template td small {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--v2-muted);
}

.column-table-wrap {
    overflow-x: auto;
}

/* まとめ */
.column-closing {
    padding: 22px 24px;
    border-radius: var(--v2-r-lg);
    background: var(--v2-panel);
}

.column-closing h2 {
    margin-top: 0;
}

.column-checklist {
    margin: 0 0 16px;
    padding-left: 1.3em;
}

.column-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.column-cta a {
    text-decoration: none;
}

.column-cta .column-cta-sub {
    display: inline-flex;
    align-items: center;
    padding: 10px 16px;
    border: 1px solid var(--v2-ink);
    border-radius: var(--v2-r-md);
    background: var(--v2-surface);
    color: var(--v2-ink);
    font-size: 14px;
    font-weight: 700;
}

.column-cta .column-cta-sub:hover {
    background: var(--v2-panel);
}

.column-foot {
    margin-top: 36px;
    padding-top: 18px;
    border-top: 1px solid var(--v2-line);
    font-size: 13.5px;
}

/* 一覧: カテゴリへの移動・カテゴリごとのまとまり */
.column-index-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 760px;
    margin: 0 auto 30px;
    padding: 0;
    list-style: none;
}

.column-index-nav a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid var(--v2-line);
    border-radius: 999px;
    background: var(--v2-surface);
    color: var(--v2-ink);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.column-index-nav a:hover {
    border-color: var(--v2-ink);
}

.column-index-nav a:focus-visible {
    outline: 2px solid var(--v2-ink);
    outline-offset: 2px;
}

.column-index-nav span {
    color: var(--v2-muted);
    font-variant-numeric: tabular-nums;
}

.column-group {
    max-width: 760px;
    margin: 0 auto 32px;
    scroll-margin-top: 96px;
}

.column-group-title {
    margin: 0 0 4px;
    font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
    font-size: 19px;
    font-weight: 900;
    line-height: 1.45;
}

.column-group-lead {
    margin: 0 0 14px;
    font-size: 13.5px;
    line-height: 1.75;
    color: var(--v2-muted);
}

.column-group .column-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}

/* 一覧のカード: 重要度と記事名だけ。2列に並べて、一画面に多くの記事が見えるようにする */
.column-card.is-index {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: start;
    gap: 6px 12px;
    height: 100%;
    padding: 12px 14px;
    box-sizing: border-box;
}

.column-card.is-index .column-chip {
    justify-self: start;
    font-size: 11px;
    padding: 1px 8px;
}

.column-card.is-index .column-card-title {
    grid-column: 1;
    margin: 0;
    font-size: 14.5px;
    line-height: 1.55;
    text-wrap: pretty;
}

.column-card.is-index .column-card-more {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    color: var(--v2-muted);
}

@media screen and (max-width: 600px) {
    .column-group .column-list {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .column-card.is-index {
        grid-template-columns: minmax(0, 1fr) auto;
    }
}

/* 記事: 業界による違いの注記 */
.column-section .column-note {
    margin: 18px 0 0;
    padding: 10px 14px;
    border-radius: var(--v2-r-md);
    background: var(--v2-panel);
    font-size: 13.5px;
    line-height: 1.8;
}

.column-note b {
    margin-right: 10px;
    font-weight: 700;
}

/* 記事の最後: 同じカテゴリのコラム */
.column-related {
    margin-top: 36px;
}

.column-related h2 {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 900;
}

.column-related .column-list {
    margin: 0;
}

.column-card.is-compact {
    padding: 14px 18px;
}

.column-card.is-compact .column-card-meta {
    margin-bottom: 4px;
}

.column-card.is-compact .column-card-title {
    margin: 0;
    font-size: 15px;
}

@media (max-width: 600px) {
    .column-card {
        grid-template-columns: minmax(0, 1fr);
    }

    .column-importance {
        grid-template-columns: minmax(0, 1fr);
    }

    /* 狭い画面では見本ページを縦に積む（作品画像の下に仕様欄） */
    .pf-page {
        aspect-ratio: auto;
    }

    .pf-page-body {
        grid-template-columns: minmax(0, 1fr);
    }

    .pf-visual {
        aspect-ratio: 16 / 10;
    }

    .pf-page-body.is-text-heavy {
        grid-template-columns: minmax(0, 1fr);
    }

    .pf-process {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pf-file-size {
        font-size: 17px;
    }

    .column-section p,
    .column-section li,
    .column-lead {
        font-size: 14.5px;
    }

    .column-closing {
        padding: 18px;
    }
}

/* 記事: NG例とOK例を比べる（左に NG例・右に OK例、下に「ここが違う」）。
   見本は横幅が要るので、比べるところだけ本文（760px）より広げ、読みものの枠（.news-page-main の内側）いっぱいまで使う。
   狭い画面では本文の幅に戻し、NG例 → OK例 の順に縦に並べる。 */
.column-compare-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
    margin: 0 0 20px;
}

@media screen and (min-width: 980px) {
    .column-compare-grid {
        position: relative;
        left: 50%;
        width: min(1080px, calc(96vw - 80px));
        transform: translateX(-50%);
    }
}

.column-compare-side {
    min-width: 0;
    padding: 16px 16px 4px;
    border-radius: var(--v2-r-lg);
}

.column-compare-side.is-ng {
    background: var(--v2-negative-soft);
}

.column-compare-side.is-ok {
    background: var(--v2-positive-soft);
}

.column-section .column-compare-title {
    margin: 0 0 12px;
    font-size: 16px;
    line-height: 1.55;
    text-wrap: balance;
}

.column-compare-side .column-sample {
    margin-bottom: 12px;
}

.column-compare-side .column-marks li {
    font-size: 14px;
    line-height: 1.85;
}

/* ここが違う: 何が ／ NG例 → OK例 を1行ずつ */
.column-diff {
    margin: 0 0 16px;
    padding: 16px 20px;
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-lg);
    background: var(--v2-surface);
}

.column-section .column-diff-title {
    margin: 0 0 10px;
    font-size: 16px;
}

.column-diff-list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: diff;
}

.column-section .column-diff-list li {
    display: grid;
    grid-template-columns: 8.5em minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: baseline;
    gap: 4px 12px;
    padding: 10px 0;
    border-top: 1px solid var(--v2-line);
    font-size: 14px;
    line-height: 1.7;
}

.column-section .column-diff-list li:first-child {
    border-top: none;
    padding-top: 2px;
}

.column-diff-what {
    font-weight: 700;
}

.column-diff-what::before {
    counter-increment: diff;
    content: counter(diff) ". ";
    color: var(--v2-muted);
    font-variant-numeric: tabular-nums;
}

.column-diff-ng,
.column-diff-ok {
    min-width: 0;
    overflow-wrap: anywhere;
}

.column-diff-ng {
    color: var(--v2-muted);
}

.column-diff-ok {
    font-weight: 700;
}

.column-diff-ng small,
.column-diff-ok small {
    display: inline-block;
    margin-right: 6px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    vertical-align: 1px;
}

.column-diff-ng small {
    background: var(--v2-negative-soft);
    color: var(--v2-negative);
}

.column-diff-ok small {
    background: var(--v2-positive-soft);
    color: var(--v2-positive);
}

.column-diff-arrow {
    color: var(--v2-muted);
}

@media (max-width: 760px) {
    .column-compare-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .column-section .column-diff-list li {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }

    .column-diff-arrow {
        display: none;
    }
}

/* 比べるところの見本は横幅が半分になるので、狭い画面（600px 以下）と同じ並べ方にして、はみ出しや切れを防ぐ */
.column-compare-side {
    container-type: inline-size;
}

@container (max-width: 600px) {
    .pf-page {
        aspect-ratio: auto;
    }

    .pf-page-body,
    .pf-page-body.is-text-heavy {
        grid-template-columns: minmax(0, 1fr);
    }

    .pf-visual {
        aspect-ratio: 16 / 10;
    }

    .pf-process {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pf-plain > .pf-process .pf-process-frame {
        aspect-ratio: 4 / 3;
    }

    .pf-file-size {
        font-size: 17px;
    }
}

/* 記事の最後（同じカテゴリのコラムの前）・コラム一覧の最後: その観点を直すときに役立つツール・ガイドへ */
.column-tools {
    margin-top: 36px;
}

.column-tools h2 {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 900;
}

body.column-page .column-index-tools {
    max-width: 760px;
    margin: 8px auto 0;
}

.column-tool-links {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.column-tool-links a {
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid var(--v2-line);
    border-left: 3px solid var(--v2-accent);
    border-radius: 0 var(--v2-r-md) var(--v2-r-md) 0;
    background: var(--v2-surface);
    color: var(--v2-ink);
    text-decoration: none;
}

.column-tool-links a:hover {
    background: var(--v2-panel);
}

.column-tool-links a:focus-visible {
    outline: 2px solid var(--v2-ink);
    outline-offset: 2px;
}

.column-tool-links b {
    font-size: 14px;
    line-height: 1.5;
}

.column-tool-links b::after {
    content: " →";
}

.column-tool-links span {
    font-size: 12.5px;
    line-height: 1.65;
    color: var(--v2-muted);
}

/* PDF のページ一覧（サムネイル）の見本（/column/page-size）。ページの大きさ・向きの違いを並べて見せる */
.pf-deck {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 8px;
    padding: 18px 10px 10px;
    border-radius: 4px;
    background: #e9e6e0;
    overflow: hidden;
}

.pf-deck-page {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    height: 46px;
    aspect-ratio: 297 / 210;
    margin-bottom: 16px;
    padding: 6px;
    border: 1px solid #d6d2ca;
    border-radius: 2px;
    background: #fbfaf7;
    box-sizing: border-box;
    box-shadow: 0 1px 2px rgba(37, 32, 23, 0.08);
}

.pf-deck-page.is-portrait {
    aspect-ratio: 210 / 297;
}

.pf-deck-page.is-large {
    height: 64px;
    aspect-ratio: 1 / 1;
}

.pf-deck-page i {
    width: 100%;
    height: 100%;
    border-radius: 1px;
}

.pf-deck-page i.is-tall {
    width: 32%;
}

.pf-deck-page small {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -16px;
    font-size: 10px;
    text-align: center;
    color: #6e727a;
}

@media (max-width: 420px) {
    .pf-deck {
        gap: 5px;
    }

    .pf-deck-page {
        height: 30px;
        padding: 4px;
    }

    .pf-deck-page.is-large {
        height: 42px;
    }
}