/* YouTubeまとめ（2026-11-12）：/youtube.html・/youtube/<テーマ>.html・/youtube/ch/<slug>.html と、トップ・一覧ページの入口
   文字：本文16px・補足14px・最小13px。押す部分は44px以上。文字はコンテンツ幅の右端まで流す（balance・pretty・auto-phrase は使わない）
   動画は最初はサムネイル（i.ytimg.com を表示するだけ）と再生ボタン。押したときだけ youtube-nocookie の iframe（/assets/js/yt-lite.js） */
.yt-page h1,.yt-page h2,.yt-page h3,.yt-page p,.yt-page li,.yt-page dd,.yt-page dt,.yt-home h2,.yt-home h3,.yt-home p,.yt-cta p{word-break:normal; text-wrap:wrap}
.yt-page .dt-lede{max-width:none}
.yt-page .dt-sec{margin-top:5.6rem}
.yt-note{font-size:1.4rem; line-height:1.75; color:var(--sub); margin:0 0 1.6rem}
.yt-page .dt-sec > p a,.yt-links a,.yt-note a{text-decoration:underline; text-underline-offset:.2em}
.vh{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* 再生ボタン（押したら読み込む） */
.yt-lite{position:relative; aspect-ratio:16/9; background:#111; overflow:hidden}
.yt-lite iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.yt-play{position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; background:none; cursor:pointer; display:block}
.yt-play img{width:100%; height:100%; object-fit:cover; display:block}
.yt-play-icon{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:68px; height:48px; transition:transform .15s}
.yt-play:hover .yt-play-icon,.yt-play:focus-visible .yt-play-icon{transform:translate(-50%,-50%) scale(1.08)}
.yt-play:focus-visible{outline:3px solid var(--accent); outline-offset:-3px}
.yt-dur{position:absolute; right:.8rem; bottom:.8rem; padding:.1rem .6rem; background:rgba(0,0,0,.78); color:#fff; font-size:1.3rem; line-height:1.6; font-family:var(--f-en); font-variant-numeric:tabular-nums}

/* テーマの目次（節へのリンク） */
.yt-toc{display:flex; flex-wrap:wrap; gap:.8rem; margin:0 0 1.6rem; padding:0; list-style:none}
.yt-toc a{display:inline-flex; align-items:center; min-height:44px; padding:.6rem 1.6rem; border:1px solid var(--ink); background:#fff; font-size:1.5rem; line-height:1.5; color:var(--ink)}
.yt-toc a:hover{background:var(--ink); color:#fff; opacity:1}

/* チャンネルのカード（テーマのページ） */
.ch-list{list-style:none; margin:2.4rem 0 0; padding:0; display:grid; grid-template-columns:minmax(0,1fr); gap:2rem}
@media(min-width:640px){.ch-list{grid-template-columns:repeat(auto-fit,minmax(28rem,1fr))}} /* 2枚の節も幅いっぱいに並べる */
.ch{position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-top:2px solid var(--ink)}
.ch.is-link:hover{border-color:var(--ink)}
.ch-body{display:flex; flex-direction:column; gap:1rem; padding:1.8rem 1.8rem 2rem; flex:1}
.ch-name{font-size:1.9rem; font-weight:700; line-height:1.45; margin:0}
.ch-name a{color:var(--ink)}
.ch.is-link .ch-name a::after{content:""; position:absolute; inset:0; z-index:1}
.ch.is-link .ch-name a:hover{opacity:1; text-decoration:underline; text-underline-offset:.2em}
.ch .yt-lite,.ch-actions a{position:relative; z-index:2}
.ch-stat{margin:0}
.yt-tag{display:inline-block; padding:.2rem .8rem; background:var(--paper); border:1px solid var(--line); font-size:1.3rem; line-height:1.6; color:#3b3d42}
.ch-lead{font-size:1.6rem; line-height:1.8; margin:0}
.ch-tags{display:flex; flex-wrap:wrap; gap:.6rem; margin:0; padding:0; list-style:none}
.ch-tags li{padding:.2rem .8rem; border:1px solid var(--accent-line); color:var(--brand-d); font-size:1.3rem; line-height:1.6}
.ch-more{margin:auto 0 0; padding-top:.4rem; font-size:1.4rem; font-weight:700; color:var(--ink)}
.ch-more::after{content:" →"}
.ch-actions{display:flex; flex-wrap:wrap; gap:.8rem}
.yt-btn{display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:.8rem 1.8rem; border:1px solid var(--ink); background:#fff; color:var(--ink); font-size:1.5rem; font-weight:500; line-height:1.4}
.yt-btn-in::after{content:none}
.yt-page .yt-note a.yt-btn{text-decoration:none}
.yt-btn:hover{background:var(--ink); color:#fff; opacity:1}
.yt-btn::after{content:""; width:1.2rem; height:1.2rem; margin-left:.6rem; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4 1h7v7M11 1 4.5 7.5M9 7v4H1V3h4' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4 1h7v7M11 1 4.5 7.5M9 7v4H1V3h4' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E") center/contain no-repeat}

/* 節の「AI導入参謀で一緒に調べる」・見る前に */
.yt-links{list-style:none; margin:2rem 0 0; padding:0; display:grid; grid-template-columns:minmax(0,1fr); gap:0; border-top:1px solid var(--line)}
@media(min-width:760px){.yt-links{grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:2.4rem}}
.yt-links li{border-bottom:1px solid var(--line)}
.yt-links a{display:flex; align-items:center; min-height:48px; padding:.8rem 0; font-size:1.6rem; line-height:1.6; text-decoration:none!important}
.yt-links a::before{content:"→"; margin-right:.8rem; color:var(--accent)}
.yt-links a:hover{text-decoration:underline!important}
.yt-page .dt-sec > .yt-links-h{margin:3.6rem 0 0; font-size:1.4rem; font-weight:700; color:var(--sub)}
.yt-warn{margin:1.6rem 0 0; padding:2rem 2.2rem; background:#fff; border:1px solid var(--line); border-left:4px solid #C6444F}
.yt-warn-h{margin:0 0 .8rem; font-size:1.7rem; font-weight:700; line-height:1.5}
.yt-warn p{margin:0 0 .8rem; font-size:1.6rem; line-height:1.8}
.yt-warn p:last-child{margin-bottom:0}
.yt-rules{margin:0; padding-left:2rem}
.yt-rules li{margin:0 0 .8rem; font-size:1.6rem; line-height:1.8}

/* 入口とトップのテーマのカード */
.yt-themes{list-style:none; margin:2.4rem 0 0; padding:0; display:grid; grid-template-columns:minmax(0,1fr); gap:2rem}
@media(min-width:760px){.yt-themes{grid-template-columns:repeat(3,minmax(0,1fr))}}
.yt-theme{position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-top:2px solid var(--ink)}
.yt-theme:hover{border-color:var(--ink)}
.yt-theme-ph{position:relative; display:block; aspect-ratio:3/2; overflow:hidden; background:var(--paper2)}
.yt-theme-ph img{width:100%; height:100%; object-fit:cover; display:block}
.yt-theme-ph.none{display:flex; flex-direction:column; justify-content:flex-end; aspect-ratio:auto; height:17rem; padding:1.6rem 1.8rem; background:var(--paper)} /* 高さをそろえる（節の名前は1行ずつ・入りきらない分は…） */
.yt-theme-bars{position:absolute; left:0; right:0; top:0; height:.8rem; display:flex}
.yt-theme-bars i{flex:1}
.yt-theme-bars i:nth-child(1){background:var(--c-komatta)} .yt-theme-bars i:nth-child(2){background:var(--c-event)} .yt-theme-bars i:nth-child(3){background:var(--c-ai)} .yt-theme-bars i:nth-child(4){background:var(--c-mall)}
.yt-theme-bars i:nth-child(5){background:var(--c-hikaku)} .yt-theme-bars i:nth-child(6){background:var(--c-cart)} .yt-theme-bars i:nth-child(7){background:var(--c-shukyaku)} .yt-theme-bars i:nth-child(8){background:var(--c-news)}
.yt-theme-none-en{font-family:var(--f-en); font-size:1.4rem; letter-spacing:.06em; color:var(--sub); margin:0 0 .4rem}
.yt-theme-none-name{display:block; font-size:1.4rem; line-height:1.75; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.yt-theme-credit{margin:0; padding:.6rem 1.8rem 0; font-size:1.3rem; line-height:1.6; color:var(--sub)}
.yt-theme-body{display:flex; flex-direction:column; gap:.8rem; padding:1.4rem 1.8rem 2rem; flex:1}
.yt-theme-name{font-size:2rem; font-weight:700; line-height:1.45; margin:0}
.yt-theme-name a{color:var(--ink)}
.yt-theme-name a::after{content:""; position:absolute; inset:0; z-index:1}
.yt-theme-name a:hover{opacity:1}
.yt-theme-lead{font-size:1.6rem; line-height:1.8; margin:0; color:#2b2d31}
.yt-theme-go{margin-top:auto; padding-top:.4rem; font-size:1.4rem; font-weight:700}
.yt-theme-go::after{content:" →"}

/* 一覧ページの入口（1つだけ横長に） */
.yt-cta{position:relative; display:grid; grid-template-columns:minmax(0,1fr); gap:1.4rem; margin:4rem 0 0; padding:1.8rem; background:#fff; border:1px solid var(--line); border-top:2px solid var(--ink)}
@media(min-width:640px){.yt-cta{grid-template-columns:24rem minmax(0,1fr); gap:2rem; align-items:center}}
.yt-cta-ph{display:block; aspect-ratio:16/9; overflow:hidden; background:#111}
.yt-cta-ph img{width:100%; height:100%; object-fit:cover; display:block}
.yt-cta-h{margin:0 0 .4rem; font-size:1.4rem; font-weight:700; color:var(--brand-d)}
.yt-cta-t{margin:0 0 .6rem; font-size:1.8rem; font-weight:700; line-height:1.5}
.yt-cta-t a{color:var(--ink)}
.yt-cta-t a::after{content:""; position:absolute; inset:0}
.yt-cta-lead{margin:0; font-size:1.6rem; line-height:1.8}

/* チャンネルの詳細 */
.ytc-intro{display:grid; grid-template-columns:minmax(0,1fr); gap:1.6rem; margin:0 0 1.6rem}
.ytc-lead{font-size:1.7rem; line-height:1.85; margin:0}
.ytc-stats{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; margin:1.6rem 0 0; background:#fff; border-top:1px solid var(--line); border-left:1px solid var(--line)}
@media(min-width:760px){.ytc-stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ytc-stats > div{background:#fff; padding:1.4rem 1.6rem; border-right:1px solid var(--line); border-bottom:1px solid var(--line)}
.ytc-stats dt{font-size:1.4rem; color:var(--sub); line-height:1.5; margin:0}
.ytc-stats dd{margin:.2rem 0 0; font-size:2rem; font-weight:700; line-height:1.4; font-family:var(--f-en),var(--f-jp); font-variant-numeric:tabular-nums}
.ytc-stats dd.s{font-size:1.3rem; font-weight:400; color:var(--sub); line-height:1.6; font-family:var(--f-jp)}
.ytc-themes{list-style:none; margin:1.6rem 0 0; padding:0; display:grid; gap:1.6rem}
.ytc-themes > li{background:#fff; border:1px solid var(--line); padding:1.8rem 2rem}
.ytc-theme-h{margin:0 0 .8rem; font-size:1.7rem; font-weight:700; line-height:1.6}
.ytc-theme-q{margin:0 0 1rem; padding:1rem 1.4rem; background:var(--paper)}
.ytc-theme-q p{margin:0; font-size:1.6rem; line-height:1.8}
.ytc-theme-ql{font-size:1.4rem!important; color:var(--sub); margin-bottom:.4rem!important}
.ytc-theme-go{margin:0}
.ytc-theme-go a{display:inline-flex; align-items:center; min-height:44px; font-size:1.6rem; text-decoration:underline; text-underline-offset:.2em}
.ytv-list{list-style:none; margin:1.6rem 0 0; padding:0; display:grid; grid-template-columns:minmax(0,1fr); gap:2rem}
@media(min-width:640px){.ytv-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.ytv-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ytv{background:#fff; border:1px solid var(--line)}
.ytv-body{padding:1.2rem 1.4rem 1.6rem}
.ytv-title{margin:0 0 .6rem; font-size:1.6rem; font-weight:500; line-height:1.6}
.ytv-meta{margin:0; display:flex; flex-wrap:wrap; gap:.2rem 1.2rem; font-size:1.3rem; color:var(--sub); line-height:1.6}
.ytp-list{list-style:none; margin:1.6rem 0 0; padding:0; display:grid; grid-template-columns:minmax(0,1fr); gap:1.2rem}
@media(min-width:760px){.ytp-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ytp{display:grid; grid-template-columns:12rem minmax(0,1fr); gap:1.4rem; align-items:center; background:#fff; border:1px solid var(--line); padding:1rem}
.ytp-ph{display:block; aspect-ratio:16/9; overflow:hidden; background:var(--paper2)}
.ytp-ph img{width:100%; height:100%; object-fit:cover; display:block}
.ytp-title{margin:0; font-size:1.6rem; font-weight:500; line-height:1.55}
.ytp-title a{display:inline-block; min-height:44px; padding:.4rem 0; text-decoration:underline; text-underline-offset:.2em}
.ytp-n{margin:.2rem 0 0; font-size:1.4rem; color:var(--sub)}
.ytm{list-style:none; margin:2rem 0 0; padding:0; display:grid; grid-template-columns:repeat(var(--count),minmax(0,1fr)); gap:.4rem; align-items:end; height:20rem}
.ytm-i{display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; min-width:0}
.ytm-n{font-size:1.3rem; line-height:1.5; font-family:var(--f-en),var(--f-jp); white-space:nowrap}
.ytm-bar{width:72%; max-width:3.6rem; height:calc(var(--v) * 12rem); min-height:2px; background:var(--accent)}
.ytm-i.is-partial .ytm-bar{background:repeating-linear-gradient(45deg,var(--accent) 0 4px,#8F9AF7 4px 8px)}
.ytm-m{margin-top:.6rem; font-size:1.3rem; line-height:1.4; text-align:center; color:var(--sub); white-space:nowrap}
@media(max-width:639px){.ytm{gap:.2rem} .ytm-n{font-size:1.3rem} .ytm-br{display:block} .ytm-i:nth-child(odd):not(:first-child):not(:last-child) .ytm-n{visibility:hidden}}
.yto-list{list-style:none; margin:1.6rem 0 0; padding:0; display:grid; grid-template-columns:minmax(0,1fr); gap:1.6rem}
@media(min-width:760px){.yto-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
.yto{position:relative; display:grid; grid-template-columns:14rem minmax(0,1fr); align-items:center; gap:1.4rem; background:#fff; border:1px solid var(--line); padding:1.2rem}
.yto:hover{border-color:var(--ink)}
.yto-ph{display:block; aspect-ratio:16/9; overflow:hidden; background:var(--paper2)}
.yto-ph img{width:100%; height:100%; object-fit:cover; display:block}
.yto-name{margin:0 0 .4rem; font-size:1.7rem; font-weight:700; line-height:1.5}
.yto-name a::after{content:""; position:absolute; inset:0}
.yto-subs{margin:0 0 .4rem; font-size:1.3rem; color:var(--sub)}
.yto-lead{margin:0; font-size:1.4rem; line-height:1.75}
.ytc-more{margin:4.8rem 0 0}
.ytc-src{margin:4rem 0 0; padding-top:1.6rem; border-top:1px solid var(--line)}
.ytc-src p{font-size:1.4rem; line-height:1.8; color:var(--sub); margin:0 0 .6rem}

/* テーマのページの「ほかのテーマ」の下のボタン */
.yt-page .yt-others-go{margin:2.8rem 0 0}

/* トップの欄 */
.yt-home .yt-themes{margin-top:0}
.yt-home-note{margin:1.6rem 0 0; font-size:1.4rem; color:var(--sub)}