/* コラム（記事・一覧）。LP の lp/site.css の後に読む。色・文字の段階は site.css の変数だけを使う。
   土台＝Codex の見本（コラム\デザイン見本_0927\column.css）。2026-09-28 に図（アイコンの一覧・流れ・横棒）と写真の枠を足した。 */
.column-page{background:var(--paper);color:var(--ink);font-size:var(--type-body)}
html:has(.column-page){scrollbar-color:#64646b #eeedeb;scroll-padding-top:96px}
.column-page ::selection{background:var(--pink);color:var(--paper)}
.column-page :is(a,button,input,summary):focus-visible{outline:2px solid var(--pink);outline-offset:4px}
.column-page .site-header{background:var(--paper)}
.column-page .button,.column-page .nav-entry{color:var(--paper)!important}
.column-page .button:hover{background:var(--ink);border-color:var(--ink)}
.column-page .nav-entry:hover{background:var(--ink)}
.column-page .skip{background:var(--paper)}
/* 語の途中で折らない：本文は文節の切れ目（build_column.mjs が入れる <wbr>）でだけ折る。1文節が行より長いときだけ途中で折る。
   「。」「）」が行の頭に来ない日本語の決まりは line-break:strict で効かせる */
.column-page main{word-break:keep-all;overflow-wrap:anywhere;line-break:strict}
/* 本文の段落・箇条書きは LP の本文と同じ普通の折り返し（行の右端まで詰める）。2026-09-28 社長「変なところで改行」 */
.column-page .column-body p,.column-page .column-body li,.column-page .column-list-lead{word-break:normal;text-wrap:wrap}
/* 上下の釦：本文の右（column.js）。幅の広い物の横では、その外へ滑らかに動く */
.column-page .scroll-control{transition:left .25s ease}
.column-page .nowrap{white-space:nowrap}
/* 文節のかたまり（build_column.mjs の .ph）。keep-all だけでは長音「ー」・「%」の後で折れるので、文節ごと1つの箱にする。
   下線は箱の中へ引き継がれないので、親の下線を受け取る */
.column-page .ph{display:inline-block;text-decoration:inherit}
.column-page .keep{display:inline;white-space:nowrap;vertical-align:baseline}
.column-page h1,.column-page h2,.column-page h3{text-wrap:initial}
.column-page p{text-wrap:pretty}
.column-page .ci{display:inline-flex;align-items:center;gap:8px}

/* 記事の頭 */
.column-breadcrumb{display:flex;align-items:center;gap:12px;padding-block:28px 0;font-size:var(--type-small);color:var(--muted)}
.column-breadcrumb a:hover{color:var(--pink);text-decoration:underline;text-underline-offset:4px}
.column-head{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,1fr);gap:48px;align-items:end;padding-block:40px}
.column-head .kicker{margin-bottom:16px}
.column-head h1,.column-list-head h1{font-size:var(--type-heading);line-height:1.5;letter-spacing:-.03em}
.column-meta{display:flex;flex-wrap:wrap;gap:4px 24px;color:var(--muted);font-size:var(--type-small);line-height:1.8}
.column-meta>span{white-space:nowrap}
.column-meta .ci::before{color:var(--pink)}
.reading-number{font-family:Jakarta,'Noto Sans JP Variable',sans-serif;font-variant-numeric:tabular-nums}
.column-head-side{padding-bottom:4px;min-width:0}
.column-summary{margin-top:20px;padding-top:20px;border-top:1px solid var(--ink)}
.summary-label{color:var(--pink);font-size:var(--type-small);font-weight:600;margin-bottom:12px}
.column-summary ul{padding:0;margin:0;list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.column-summary li{font-size:var(--type-body);line-height:1.8;padding-left:22px;position:relative;min-width:0}
.column-summary li::before{content:"";position:absolute;left:2px;top:.62em;width:10px;height:2px;background:var(--pink)}
.column-photo{background:var(--stage)}
.column-photo>img{aspect-ratio:3/1;height:auto;object-position:center 55%}
.column-photo figcaption{display:block;color:var(--paper);background:var(--stage);padding:12px max(56px,calc((100% - 1184px)/2));font-size:var(--type-small)}

/* 本文と目次 */
.column-reading{display:grid;grid-template-columns:232px minmax(0,1fr);gap:72px;padding-block:64px 88px;align-items:start}
.column-reading-main{min-width:0;max-width:760px}
.column-toc{position:sticky;top:96px;max-height:calc(100dvh - 120px);overflow:auto;scrollbar-width:thin;scrollbar-color:var(--line) var(--paper)}
.toc-title{font-size:var(--type-small);color:var(--muted);margin-bottom:16px}
.column-toc nav>a,.mobile-toc nav>a{display:block;padding:7px 0 7px 14px;border-left:2px solid var(--line);font-size:var(--type-small);line-height:1.8;color:var(--muted)}
.column-toc nav>a+a{margin-top:3px}
.column-toc nav>a[aria-current=location]{color:var(--ink);border-left-color:var(--pink);font-weight:600}
.column-toc nav>a:hover,.mobile-toc nav>a:hover{color:var(--pink)}
/* スマホ用の目次と追従する帯は、900px以下だけで出す */
.mobile-toc,.column-bar{display:none}
.column-body{font-size:var(--type-body);line-height:1.9}
.column-body>p,.column-body>ul{max-width:36em}
.column-body>p+p{margin-top:20px}
.column-body h2{font-size:var(--type-heading);line-height:1.5;margin:76px 0 24px;padding-top:28px;border-top:1px solid var(--line);display:flex;gap:14px;align-items:flex-start}
.column-body h2>.ci,.column-body h3>.ci{color:var(--pink);flex:none;margin-top:.22em}
.column-body h2>.ci::before{width:1.05em;height:1.05em}
.column-body h3{font-size:var(--type-body);line-height:1.7;margin:36px 0 12px;font-weight:700;display:flex;gap:10px;align-items:flex-start}
.column-body h3>.ci{margin-top:.18em}
.column-body ul{margin:20px 0;padding-left:1.25em}
.column-body li+li{margin-top:10px}
.column-body li::marker{color:var(--pink)}
.column-body strong{font-weight:700}
.column-body a{color:var(--pink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.column-point{background:#eeedeb;padding:24px 28px;margin-top:28px}
.column-point p{max-width:36em}
.column-point p+p{margin-top:10px}

/* 表 */
.column-body table{border-collapse:collapse;width:100%;margin:24px 0 28px;line-height:1.7;font-variant-numeric:tabular-nums}
.column-body th{font-size:var(--type-small);font-weight:600;color:var(--muted);text-align:left}
.column-body thead th,.column-body table:not(:has(thead)) tr:first-child>th{border-bottom:1px solid var(--ink);padding:12px 10px}
.column-body tbody td,.column-body tbody th,.column-body tr+tr>td{padding:12px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.column-body table :is(th,td):first-child{padding-left:10px}
.column-body table :is(th,td):last-child{padding-right:10px}
.column-body tbody tr:nth-child(even)>*{background:#efeeea}
.column-body .is-list td:first-child{width:200px;font-weight:600}
/* 比べる表（277）の1列目は短い項目名。iPhone は keep-all の表の幅を狭く見積もって語の途中で折るので、PC幅では折らない */
.column-body .is-stack td:first-child{white-space:nowrap;font-weight:600}
.pay-table :is(th,td):nth-last-child(-n+2),.discount-table :is(th,td):nth-last-child(-n+2){text-align:right}
/* 在籍人数ごとの額（197）：長さごとに「＋」で開く表 */
.pay-groups{margin:20px 0 32px;border-top:1px solid var(--ink)}
.pay-group{border-bottom:1px solid var(--line)}
.pay-group summary{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;padding:16px 0;list-style:none;cursor:pointer;font-weight:600}
.pay-group summary::-webkit-details-marker{display:none}
.pay-group .summary-mark{color:var(--pink);font-size:var(--type-heading);line-height:1;transition:transform .2s}
.pay-group[open] .summary-mark{transform:rotate(45deg)}
.pay-group summary:hover{color:var(--pink)}
.column-body .pay-group .pay-table{margin:0 0 18px}
.column-body .pay-group .pay-table :is(th,td){text-align:right}
.column-body .pay-group .pay-table tbody th{font-size:var(--type-body);color:var(--ink);font-weight:400}
.pay-group .pay-table small{display:block;font-size:var(--type-small);color:var(--muted);font-weight:400;white-space:nowrap}
.pay-table td{white-space:nowrap}
.pay-table td:first-child{white-space:normal}

/* 図：アイコンの一覧（176 仕事内容） */
.column-icon-list{list-style:none;padding:0!important;margin:28px 0!important;display:grid;gap:0;border-top:1px solid var(--ink)}
.column-icon-list>li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:16px;padding:18px 0;border-bottom:1px solid var(--line);margin:0!important}
.column-icon-list .ci{width:48px;height:48px;justify-content:center;background:#eeedeb;color:var(--pink);font-size:22px}
.icon-list-name{font-weight:700}
.column-icon-list p+p{margin-top:4px}

/* 図：順番に進むもの（選考の流れ・1年の流れ） */
.column-steps{list-style:none;padding:0;margin:28px 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;counter-reset:none}
.column-steps>li{position:relative;border-top:2px solid var(--pink);padding-top:18px;margin:0!important}
.step-mark{display:flex;align-items:center;gap:10px;color:var(--pink);font-size:22px;margin-bottom:10px}
.step-num{font-family:Jakarta,'Noto Sans JP Variable',sans-serif;font-weight:700;font-size:var(--type-heading);line-height:1}
.step-name{font-weight:700;margin-bottom:6px}
.column-steps p{font-size:var(--type-body)}

/* 図：報酬の流れ（277） */
.column-flow{list-style:none;padding:0;margin:24px 0;display:grid;gap:0}
.column-flow>li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:16px;align-items:center;padding:14px 0;position:relative;margin:0!important}
.column-flow>li:not(:last-child)::after{content:"";position:absolute;left:23px;bottom:-8px;width:2px;height:16px;background:var(--pink)}
.column-flow .ci{width:48px;height:48px;justify-content:center;background:#eeedeb;color:var(--pink);font-size:22px}

/* 図：首都圏の求人との比べ（197）＝表に横棒を添える */
.column-chart{margin:28px 0}
.column-chart .comparison-table{margin:0}
.column-body .comparison-table td:first-child{width:46%;padding-right:24px}
.comparison-table td:last-child{position:relative}
.comparison-table .bar{display:block;position:relative;height:16px;margin:6px 0;border-left:1px solid var(--ink)}
.comparison-table .bar>i{position:absolute;top:0;bottom:0;background:var(--muted)}
.comparison-table .bar.is-range>i{background:#eeedeb;border:1px solid var(--muted)}
.bar-value{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
/* 目盛りは2列目の中身（46% の後、左の余白10px）にそろえる */
.chart-axis{position:relative;height:22px;margin:6px 0 0 calc(46% + 10px);font-size:var(--type-small);color:var(--muted)}
.chart-axis>span{position:absolute;left:var(--at);transform:translateX(-50%);white-space:nowrap;font-variant-numeric:tabular-nums}
.chart-axis>span:first-child{transform:none}
.chart-axis>span:last-child{transform:translateX(-100%)}
.column-chart figcaption{margin-top:12px;font-size:var(--type-small);color:var(--muted)}

/* 写真（本文の途中） */
.column-inline-photo{margin:36px 0 8px;max-width:600px}
.column-inline-photo img{width:100%;height:auto;display:block}
.column-inline-photo figcaption{font-size:var(--type-small);color:var(--muted);margin-top:8px}

/* 最後の応募への導線 */
.column-cta{background:var(--stage);color:var(--paper);padding-block:64px}
.column-cta-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.column-cta .kicker{color:#ef8ebd;margin-bottom:14px}
.column-cta h2{font-size:var(--type-heading);line-height:1.5}
.column-cta-actions{display:grid;justify-items:start;gap:12px}
.column-cta .button{max-width:100%;font-size:var(--type-body);margin-top:0}
.column-cta .button>span{display:block;min-width:0}
.cta-note{font-size:var(--type-small);color:#c9c9ce;margin-bottom:10px}
/* LP の .stage-link は width:max-content。コラムでは画面幅に合わせて折り返す */
.column-cta .stage-link{display:grid;grid-template-columns:minmax(0,1fr) 20px;gap:16px;align-items:center;width:auto;max-width:100%;border:1px solid #66666d;color:var(--paper);font-size:var(--type-body);line-height:1.8;padding:10px 16px}
.column-cta .stage-link>span{min-width:0}
.column-cta .stage-link svg,.column-cta .button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2}
.column-cta .stage-link:hover{border-color:var(--paper)}

/* ほかのコラム */
.column-related{padding-block:72px}
.related-heading{display:flex;flex-wrap:wrap;gap:16px;align-items:baseline;justify-content:space-between;margin-bottom:28px}
.related-heading h2{font-size:var(--type-heading)}
.related-heading>a{font-size:var(--type-small);text-decoration:underline;text-underline-offset:4px;color:var(--pink)}
.column-related-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 48px}
.column-related-item{border-top:1px solid var(--line);padding-top:22px;display:grid;grid-template-columns:120px minmax(0,1fr);gap:20px;align-items:start}
.column-related-item>img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block}
.column-related-item .kicker{margin-bottom:8px}
.column-related-item h3{font-size:var(--type-body);line-height:1.8}
.column-related-item h3 a:hover{color:var(--pink);text-decoration:underline;text-underline-offset:4px}
.column-related-item .small{margin-top:14px;font-size:var(--type-small)}

/* 足元・上下の釦 */
.column-page .footer{border-top:1px solid var(--line)}
.footer-links{display:flex;gap:28px;align-items:center;flex-wrap:wrap}
.footer-links>a{display:inline-flex;align-items:center;gap:10px}
.footer-links>a:hover{color:var(--pink)}

/* 一覧 */
.column-list-head{padding-block:40px 48px}
.column-list-head .kicker{margin-bottom:16px}
.column-list-head h1{max-width:19em}
.column-list-lead{margin-top:20px;max-width:40em;color:var(--muted)}
.column-list{padding-bottom:72px}
.column-item{display:grid;grid-template-columns:280px minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:40px;row-gap:14px;border-top:1px solid var(--line);padding-block:32px;align-items:start}
.column-item>figure{grid-row:1/4;margin:0}
.column-item img{aspect-ratio:3/2;object-fit:cover;width:100%;height:auto;display:block}
.column-item-heading{min-width:0}
.column-item .kicker{margin-bottom:8px}
.column-item h2{font-size:var(--type-heading);line-height:1.5}
.column-item h2 a:hover{color:var(--pink);text-decoration:underline;text-underline-offset:5px}
.column-item-topics{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:0;margin:0;list-style:none;color:var(--muted);font-size:var(--type-small);line-height:1.8}
.column-item .column-meta{grid-column:2}

@media(max-width:1100px){
 .column-head{gap:32px}.column-reading{grid-template-columns:200px minmax(0,1fr);gap:40px}
 .column-item{grid-template-columns:240px minmax(0,1fr);column-gap:28px}
}
@media(max-width:900px){
 html:has(.column-page){scroll-padding-top:126px}
 .column-breadcrumb{padding-top:22px;gap:10px}
 .column-head{grid-template-columns:minmax(0,1fr);gap:26px;padding-block:28px 30px}
 .column-head h1,.column-list-head h1{line-height:1.5}
 .column-head .kicker{margin-bottom:12px}
 .column-head-side{padding-bottom:0}
 .column-summary{margin-top:18px;padding-top:18px}
 .column-photo>img{aspect-ratio:16/9}
 .column-photo figcaption{padding:10px 24px}
 .column-reading{display:block;padding-block:30px 56px}
 .column-toc{display:none}
 .mobile-toc{display:block;background:#f0efed;padding:14px 16px;margin-bottom:30px;scroll-margin-top:122px}
 .mobile-toc>summary{font-size:var(--type-body);line-height:1.8}
 .mobile-toc nav{margin-top:14px}
 .mobile-toc nav>a{font-size:var(--type-small);padding-block:9px;border-color:var(--line)}
 .column-body h2{margin-top:56px;padding-top:24px}
 .column-body h3{margin-top:30px}
 .column-point{padding:20px 18px;margin-top:24px}
 .column-body table{margin-block:20px 28px}
 .column-body thead th,.column-body tbody :is(td,th),.column-body tr+tr>td{padding:10px 6px}
 /* 2列の表は、項目の下に内容を縦に積む */
 .column-body .is-list,.column-body .is-list tbody{display:block}
 .column-body .is-list tr{display:block;padding:12px 0;border-bottom:1px solid var(--line)}
 .column-body .is-list tr:first-child{border-bottom:1px solid var(--ink)}
 .column-body .is-list :is(td,th){display:block;padding:0!important;border:0!important;width:auto!important}
 .column-body .is-list tr:first-child>:not(:first-child){display:none}
 .column-body .is-list td+td{margin-top:4px}
 /* 3列の比べる表（277）は、行ごとに縦に積み、欄の頭に列の名前 */
 .column-body .is-stack thead{display:none}
 .column-body .is-stack,.column-body .is-stack tbody{display:block}
 .column-body .is-stack tr{display:block;padding:14px 0;border-bottom:1px solid var(--line)}
 .column-body .is-stack td{display:block;padding:0!important;border:0!important}
 .column-body .is-stack td:first-child{font-weight:700}
 .column-body .is-stack td+td{margin-top:8px}
 .column-body .is-stack td+td::before{content:attr(data-label);display:block;font-size:var(--type-small);color:var(--muted)}
 .column-steps{grid-template-columns:minmax(0,1fr);gap:0}
 .column-steps>li{border-top:0;border-left:2px solid var(--pink);padding:0 0 22px 18px}
 /* 比べる図：スマホでは項目名の下に棒を全幅で置く */
 .column-body .comparison-table thead{display:none}
 .column-body .comparison-table,.column-body .comparison-table tbody{display:block}
 .column-body .comparison-table tr{display:block;padding:12px 0;border-bottom:1px solid var(--line)}
 .column-body .comparison-table td{display:block;width:auto!important;padding:0!important;border:0!important}
 .chart-axis{margin-left:0}
 .discount-table th:first-child{width:40%}
 .column-cta{padding-block:44px}
 .column-cta-inner{grid-template-columns:minmax(0,1fr);gap:26px}
 .column-cta-actions{justify-items:stretch}
 .column-cta .button{grid-template-columns:minmax(0,1fr) 20px;gap:10px;padding-inline:14px}
 .column-related{padding-block:46px}
 .related-heading{margin-bottom:24px}
 .column-related-grid{grid-template-columns:minmax(0,1fr);gap:24px}
 .column-related-item{padding-top:18px;grid-template-columns:96px minmax(0,1fr);gap:14px}
 .column-page .footer{padding-right:36px;gap:20px}
 .footer-links{gap:16px;grid-column:1/-1}
 .column-bar:not([hidden]){position:fixed;top:64px;left:0;right:36px;z-index:25;display:grid;grid-template-columns:1fr 1fr;height:44px;border-bottom:1px solid var(--line);background:var(--paper);font-size:var(--type-small)}
 .column-bar>button{border:0;background:transparent;color:var(--ink);font-weight:600;text-align:left;padding-inline:20px;display:flex;align-items:center;gap:10px;font-size:var(--type-small)}
 .column-bar>a{border-left:1px solid var(--line);color:var(--pink);font-weight:600;display:flex;align-items:center;justify-content:flex-start;padding-inline:20px;gap:10px}
 .column-list-head{padding-block:28px 34px}
 .column-item{grid-template-columns:104px minmax(0,1fr);gap:18px;padding-block:26px}
 .column-item>figure{grid-row:1}
 .column-item img{aspect-ratio:1}
 .column-item h2{font-size:var(--type-body);line-height:1.8;letter-spacing:-.04em}
 .column-item .kicker{margin-bottom:7px}
 .column-item-topics,.column-item .column-meta{grid-column:1/-1}
 .column-list{padding-bottom:36px}
}
@media(max-width:370px){
 .column-item{grid-template-columns:80px minmax(0,1fr);column-gap:12px}
 .column-body .pay-group .pay-table :is(th,td){padding-inline:6px}
 .column-body .discount-table :is(th,td){padding-inline:3px}
 .column-point{padding-inline:14px}
}
@media(prefers-reduced-motion:reduce){html:has(.column-page){scroll-behavior:auto}.column-page *{transition:none!important}}
/* 幅360px 以下（小さい iPhone など。LP と同じ境目）：記事の題を LP の見出しの大きさ（--type-heading）に、ほかのコラムの写真と見出しのアイコンの間を小さくして、「インストラクターの」「インストラクターに」が1行に入るように */
@media(max-width:360px){.column-related-item{grid-template-columns:72px minmax(0,1fr);gap:12px}.column-body h2{gap:8px}}