@charset "UTF-8";
/* 実践編コラムの記事部品。土台の色・文字・ヘッダーは ai-interface.css を使う。文字は18px以上。 */

/* 記事の骨格 */
.col-article{padding-block:60px 30px}
.col-body{max-width:880px}
.col-hero{padding-bottom:40px;border-bottom:1px solid var(--line);margin-bottom:45px}
.col-hero .eyebrow{margin-bottom:18px}
.col-hero h1{font-size:clamp(34px,4.3vw,54px);line-height:1.45;letter-spacing:-.045em;margin:0 0 26px}
.col-lead{font-size:22px;line-height:1.95;margin-bottom:24px}
.col-meta{font-size:18px;color:var(--muted);margin:0}
.col-meta a{color:var(--teal)}

/* 先に要点 */
.col-summary{background:#e9eee7;border-radius:10px;padding:30px 34px;margin:0 0 60px}
.col-summary .eyebrow{margin-bottom:12px}
.col-summary ol{margin:0;padding:0;list-style:none;counter-reset:pt}
.col-summary li{counter-increment:pt;position:relative;font-size:20px;line-height:1.8;padding:14px 0 14px 54px;border-top:1px solid #c6d2c4}
.col-summary li:first-child{border-top:0}
.col-summary li:before{content:"0" counter(pt);position:absolute;left:0;top:17px;color:var(--teal);font-weight:650;font-size:18px;line-height:1.6}

/* 本文の節 */
.col-section{margin:0 0 30px}
.col-section h2{font-size:clamp(28px,3vw,36px);line-height:1.55;margin:70px 0 28px;padding-top:40px;border-top:1px solid var(--line)}
.col-section:first-of-type h2{margin-top:0}
.col-section h3{font-size:25px;line-height:1.6;margin:42px 0 16px}
.col-body .prose p{font-size:20px;line-height:2}
.col-body .prose ul,.col-body .prose ol{font-size:20px;line-height:1.9;padding-left:1.4em;margin:0 0 22px}
.col-body .prose li{margin:8px 0}

/* 本人の記録 */
.col-record{border-left:4px solid var(--teal);background:#f0f2ea;padding:24px 28px;margin:34px 0 38px;border-radius:0 8px 8px 0}
.col-record>.eyebrow{margin-bottom:10px}
.col-record p{font-size:19px;line-height:1.95;margin:0 0 14px}
.col-record p:last-child{margin-bottom:0}
.col-record .quiet{font-size:18px}

/* 図（文字と枠で組む。JavaScriptなし） */
.col-figure{margin:42px 0 46px}
.col-figure>figcaption{font-size:18px;color:var(--muted);margin-top:16px;line-height:1.8}
.fig-title{font-size:18px;font-weight:650;color:var(--teal);margin:0 0 16px;letter-spacing:.02em}
.fig-compare{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.fig-card{border:1px solid #b9c4c0;border-radius:10px;padding:22px 24px;background:#fbfaf5;min-width:0}
.fig-card>span{display:block;font-size:18px;color:var(--muted);margin-bottom:6px}
.fig-card h3,.fig-card h4{font-size:24px;line-height:1.5;margin:0 0 12px}
.fig-card p{font-size:18px;line-height:1.85;margin:0 0 10px}
.fig-card p:last-child{margin-bottom:0}
.fig-card ul{font-size:18px;line-height:1.8;margin:0;padding-left:1.2em}
.fig-card.is-good{background:#e6eedc;border-color:#a6ba97}
.fig-card.is-good h3,.fig-card.is-good h4{color:var(--teal)}
.fig-card.is-dark{background:var(--ink);border-color:var(--ink);color:#fff}
.fig-card.is-dark>span{color:#c7e3c1}
.fig-card.is-dark h3,.fig-card.is-dark h4{color:var(--lime)}
.fig-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;counter-reset:fig}
.fig-three .fig-card{counter-increment:fig}
.fig-three .fig-card>span:before{content:"0" counter(fig) " ／ ";color:var(--teal);font-weight:650}
.fig-flow{display:grid;grid-template-columns:repeat(var(--steps,4),minmax(0,1fr));gap:30px;list-style:none;margin:0;padding:0}
.fig-flow li{position:relative;border-top:3px solid var(--teal);padding-top:14px;min-width:0}
.fig-flow li:not(:last-child):after{content:"→";position:absolute;right:-24px;top:10px;color:var(--teal);font-size:20px}
.fig-flow b{display:block;font-size:20px;line-height:1.5;margin-bottom:6px}
.fig-flow p{font-size:18px;line-height:1.8;color:var(--muted);margin:0}
.fig-flow li.is-human{border-top-color:#bb5715}
.fig-flow li.is-human b{color:#8f420f}
.fig-legend{display:flex;flex-wrap:wrap;gap:8px 26px;font-size:18px;color:var(--muted);margin:18px 0 0;padding:0;list-style:none}
.fig-legend li:before{content:"";display:inline-block;width:22px;height:3px;vertical-align:middle;margin-right:9px;background:var(--teal)}
.fig-legend li.is-human:before{background:#bb5715}

/* 試すための一行 */
.col-try{background:var(--ink);color:#fff;border-radius:12px;padding:34px 36px;margin:50px 0}
.col-try .eyebrow{color:var(--lime);margin-bottom:10px}
.col-try h2,.col-try h3{font-size:28px;line-height:1.55;margin:0 0 18px;color:#fff}
.col-try p{font-size:19px;line-height:1.9}
.col-prompt{display:block;background:#203e49;border:1px solid #4d6a6d;border-radius:8px;padding:20px 22px;margin:0 0 18px;font-size:20px;line-height:1.85;color:#f3f6ef;white-space:pre-wrap;user-select:all}
.col-try .quiet{color:#c9d6d1;margin:0}

/* どこまでAI、どこから人 */
.col-boundary{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;margin:36px 0 44px}
.col-boundary>div{padding:24px 26px;min-width:0}
.col-boundary>div+div{border-left:1px solid var(--line);background:#fbf3ea}
.col-boundary h3{font-size:22px;margin:0 0 12px}
.col-boundary>div:first-child h3{color:var(--teal)}
.col-boundary>div+div h3{color:#8f420f}
.col-boundary ul{margin:0;padding-left:1.2em;font-size:18px;line-height:1.85}
.col-boundary li{margin:6px 0}

/* 相談への案内 */
.col-cta{border-top:1px solid var(--line);padding:46px 0 10px;margin-top:60px}
.col-cta h2{font-size:clamp(27px,3vw,34px);line-height:1.6;margin:0 0 18px}
.col-cta p{font-size:19px;line-height:1.9}
.col-cta .button{margin:8px 0 18px}

/* シリーズ一覧（記事末尾） */
.col-series{border-top:1px solid var(--line);padding-block:50px 20px}
.col-series h2{font-size:28px;margin:0 0 8px}
.col-series>p{font-size:18px;color:var(--muted)}
.col-series ol{list-style:none;padding:0;margin:26px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.col-series a{display:grid;grid-template-columns:52px 1fr;gap:6px;text-decoration:none;border:1px solid var(--line);border-radius:8px;padding:16px 18px;min-height:64px;background:#fbfaf5;font-size:18px;line-height:1.7}
.col-series a b{color:var(--teal);font-weight:650}
.col-series a:hover{border-color:var(--teal)}
.col-series a[aria-current="page"]{background:#e6eedc;border-color:#a6ba97}
.col-series a[aria-current="page"]:after{content:"いま読んでいる記事";grid-column:2;font-size:18px;color:var(--teal)}

/* 素材と出典 */
.sources .fig-title{margin:34px 0 0}
.col-records{padding-left:25px;margin:18px 0 10px}
.col-records li{font-size:18px;line-height:1.8;margin:12px 0;padding-left:7px;color:var(--ink)}
.col-records a{color:var(--ink)}
.fig-card u{text-decoration-color:var(--teal);text-decoration-thickness:3px;text-underline-offset:6px}
.col-section>.col-prompt{margin:6px 0 26px}

/* コラム一覧：実践編 */
.series-head{border-top:1px solid var(--line);margin-top:70px;padding-top:50px}
.series-head h2{font-size:clamp(30px,3.4vw,42px);line-height:1.5;margin:0 0 16px}
.series-head p{font-size:20px;line-height:1.9;max-width:880px}
.series-grid{list-style:none;padding:0;margin:34px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.series-grid li{min-width:0}
.series-card{display:flex;flex-direction:column;height:100%;text-decoration:none;border:1px solid #b9c4c0;border-radius:12px;padding:26px 28px 24px;background:#fbfaf5}
.series-card:hover{border-color:var(--teal);background:#f3f6ee}
.series-card>span{font-size:18px;color:var(--teal);font-weight:650;margin-bottom:8px}
.series-card h3{font-size:25px;line-height:1.55;margin:0 0 18px}
.series-start{font-size:19px;line-height:1.9}
.series-start a{color:var(--teal);font-weight:650}
.series-card .series-worry{font-size:18px;line-height:1.85;color:var(--muted);margin:0 0 10px}
.series-card .series-worry:before{content:"こんなとき ／ ";color:var(--teal);font-weight:650}
.series-card b{margin-top:auto;font-size:18px;font-weight:650}

@media(max-width:760px){
  .col-article{padding-block:38px 20px}
  .col-hero h1{font-size:clamp(30px,8vw,40px)}
  .col-lead{font-size:20px}
  .col-summary{padding:22px 20px;margin-bottom:45px}
  .col-summary li{padding-left:44px;font-size:19px}
  .col-body .prose p,.col-body .prose ul,.col-body .prose ol{font-size:19px;line-height:1.95}
  .col-section h2{margin-top:50px;padding-top:30px}
  .fig-compare,.fig-three,.col-boundary,.col-series ol,.series-grid{grid-template-columns:1fr}
  .col-boundary>div+div{border-left:0;border-top:1px solid var(--line)}
  .fig-flow{grid-template-columns:1fr;gap:40px}
  .fig-flow li:not(:last-child):after{content:"↓";right:auto;left:0;top:auto;bottom:-37px;font-size:18px;line-height:1}
  .col-try{padding:26px 20px}
  .col-try h2,.col-try h3{font-size:25px}
  .col-prompt{font-size:19px;padding:16px}
  .col-record{padding:20px 18px}
  .series-card{padding:22px 20px}
  .col-cta .button{width:100%}
}
@media print{
  .col-try{background:#fff;color:#000;border:1px solid #777}
  .col-try *,.col-prompt{color:#000!important;background:#fff!important}
  .col-series,.col-cta .button{display:none!important}
}