/* v28: 魅せるHPへ、文字を減らして作品を前に出す(本人 2026-09-25「上の部分もうちょいコンパクトで」「全体でも改善して」)。
   戻す時は index.html の compact.css の1行を外す。 */

/* 1. 作品の詳細画面: 種類・題名・別タブ・閉じるを見出しの1段に。題名の2回目と枠の見出しは出さない */
#output-dialog .dialog-head{display:grid;grid-template-columns:minmax(0,1fr) auto 44px;grid-template-areas:"kicker link close" "title title close";column-gap:18px;row-gap:2px;align-items:center;padding:16px 28px 14px}
#output-dialog .dialog-titles{display:contents}
#output-dialog #output-kicker{grid-area:kicker;font-size:13px;letter-spacing:.04em;color:#6b7788;margin:0;line-height:1.5;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#output-dialog #output-title{grid-area:title;font-size:22px;line-height:1.4;margin:0}
#output-dialog .head-link{grid-area:link;font-size:14px;white-space:nowrap;padding:10px 0;margin:-10px 0;justify-self:end}
#output-dialog .dialog-head .close{grid-area:close;align-self:center;width:44px;height:44px}
#output-dialog.room-open .head-link{display:none}
#output-dialog.showcase-open .dialog-copy{display:none}

#output-dialog.work-open .dialog-copy{display:flex;flex-wrap:wrap;align-items:center;column-gap:16px;padding:14px 32px 2px}
#output-dialog.work-open .dialog-copy>*{flex:0 0 100%}
#output-dialog.work-open #back-showcase{order:0;flex:0 0 auto;min-height:40px;margin:0 0 4px}
#output-dialog.work-open #output-description{order:1;font-size:16px;line-height:1.7;margin:0 0 12px;color:#4d5868}
#output-dialog.work-open .skill-log-inline{order:2;flex:0 1 auto;margin:0 0 12px;font-size:14px}
#output-dialog.work-open .skill-metadata{order:3;flex:0 0 auto;margin:0 0 12px}
#output-dialog.work-open .skill-metadata summary{min-height:32px;font-size:13px}
#output-dialog.work-open .skill-metadata[open]{flex-basis:100%}
#output-dialog.work-open .example-heading{order:4;margin:0 0 12px}
#output-dialog.work-open:not(.skill-open) .example-heading{display:none}
#output-dialog.skill-open .example-heading{padding-top:12px;border-top:1px solid #eceff4}
#output-dialog.skill-open .example-heading>div{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px}
#output-dialog.skill-open .example-heading span{font-size:13px}
#output-dialog.skill-open .example-heading h3{font-size:17px;line-height:1.5;margin:0}
#output-dialog.work-open #output-view>iframe{height:70vh}
#output-view .work-note{font-size:13px;line-height:1.7;color:#6b7788;margin:10px 4px 0}
#output-view .work-note+.output-connections{padding-top:28px}

@media(max-width:600px){
 #output-dialog .dialog-head{padding:12px 14px 10px 18px;column-gap:10px}
 #output-dialog #output-title{font-size:18px}
 #output-dialog .head-link{font-size:13px}
 #output-dialog.work-open .dialog-copy{padding:10px 18px 0}
 #output-dialog.work-open #output-description{font-size:14px;margin-bottom:10px}
 #output-dialog.skill-open .example-heading h3{font-size:15px}
 #output-dialog.work-open #output-view>iframe{height:64vh}
}

/* 2. LP本文: 見出し1つ+短い1行に。削った説明の空きを詰める */
#loop .pl-explain{display:none}
#loop .pl-title{margin-bottom:18px}
#works .showcase-footer{justify-content:flex-end}
#dpro .chapter-intro{display:block}
#dpro .connected-steps h3{margin:0}
#loop .pl-disclosure,#start .steps p,#dpro .conditions,#editions .offer-note p{text-wrap:balance}
#skills .skill-log-ranking{margin-left:14px}

/* 3. 隅々の点検(2026-09-25)で見つかった崩れの直し */
/* スキルのタイルの版・更新回数の行(style.css の span{display:block} に負けて縦に崩れていた) */
.related-skills .skill-log-meta,.machine-skill-list .skill-log-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0}
.related-skills .skill-log-meta>span,.machine-skill-list .skill-log-meta>span{display:inline-block;width:auto;margin:0;line-height:1.6}
@media(max-width:600px){.skill-tile .skill-log-meta{grid-column:1/-1}}
/* 詳細画面の種類ラベルは切らない。スマホでは別タブのリンクを見出しの下の行へ */
#output-dialog #output-kicker{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
@media(max-width:600px){
 #output-dialog .dialog-head{grid-template-columns:minmax(0,1fr) 44px;grid-template-areas:"kicker close" "title close" "link link"}
 #output-dialog .head-link{justify-self:start;padding:12px 0;margin:-6px 0 -12px}
}
/* 紹介映像: PC・タブレット横で、シーンの一言と作品リンクまで1画面に収める */
@media(min-width:1000px){.secondview-stage{width:min(100%,calc((100svh - 370px)*16/9))}.secondview-heading{margin-top:14px}.secondview-caption{margin-top:12px}}
/* 作品一覧: 1枚目を見出しの左端にそろえる */
#rail{scroll-padding-inline:var(--pad)}
/* ループ実演: PCで広告が舞台からはみ出さない */
@media(min-width:1001px){#loop .pl-ad{max-width:531px}}
@media(min-width:1500px){#loop .pl-ad{max-width:636px}}
/* 広告の原寸表示: 広告全体を1画面で */
.pl-viewer{height:fit-content}.pl-viewer-image{width:auto;max-width:min(100%,1024px);height:auto;max-height:calc(95vh - 120px);margin:0 auto}
/* 申込の画面: スマホでも申込フォームへのボタンを常に見える位置に */

/* 登壇バナーの拡大: 日付とリンクまで収める */
#seminar-dialog[open]{display:flex;flex-direction:column;overflow:hidden}
#seminar-dialog .seminar-dialog-head,#seminar-dialog .seminar-dialog-foot{flex:none}
#seminar-dialog-image{flex:1 1 auto;min-height:0;max-height:none;height:auto;object-fit:contain}

/* 4. 日本語を語の途中で折らない(見出し以外の短い文・ボタン・カードにも広げる。点検で見つかった所) */
.audience,footer small,.crew-card-bottom,.crew-previews span,.ab-set strong,.receive-both a,.offer-note strong,.receive-choices strong,#receive-form,.team-copy p,.cartridge-name,.steps p,.room-sample strong,.pill,.text-link,.skill-tile-name,.secondview-caption h3,.setup-demo-note,.showcase-detail-copy h3,.showcase-examples button,.work-note{word-break:keep-all;overflow-wrap:anywhere;line-break:strict;text-wrap:balance}
@supports (word-break:auto-phrase){.audience,footer small,.crew-card-bottom,.crew-previews span,.ab-set strong,.receive-both a,.offer-note strong,.receive-choices strong,#receive-form,.team-copy p,.cartridge-name,.steps p,.room-sample strong,.pill,.text-link,.skill-tile-name,.secondview-caption h3,.setup-demo-note,.showcase-detail-copy h3,.showcase-examples button{word-break:auto-phrase}}
@media(max-width:600px){.audience{padding:0 16px}}

/* 5. 点検の細部(スキル詳細の上部・棚の本数・横向き・フッター・映像の空白) */
#output-dialog .dialog-head{background:#fff}
@media(max-width:600px){
 #output-dialog.work-open .skill-metadata{display:none}
 #output-dialog.work-open .skill-log-inline{font-size:13px;gap:4px 10px;margin-bottom:8px}
 #output-dialog.work-open #output-description{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
 #output-view .showcase-detail{gap:16px}#output-view .showcase-detail>img{max-height:40svh;width:auto;max-width:100%;margin:0 auto}
}

#output-view>video{background:transparent;object-fit:contain}
#team-film,#dpro-film{background:#eef1f6}
.footer-meta{font-size:14px;color:#6b7788;margin:10px 0 6px}.footer-meta a{color:inherit;display:inline-block;padding:10px 2px}
@media(orientation:landscape) and (max-height:500px){
 .nav{height:44px}
 .section{padding-top:36px}
 #output-dialog.work-open #output-description{display:none}
 #output-dialog.work-open #output-view>iframe{height:78vh}
}

/* 6. 確認のやり直しで見つかった残り(2026-09-25 夜) */
.nw{white-space:nowrap}
.footer-meta{color:#4d5868}.footer-meta span{white-space:nowrap}
/* 申込の画面: SEでは説明を詰めて選択欄とボタンを最初の画面に。固定のボタンは画面の高さに余裕がある時だけ(影はWebKitで黒く出るので付けない) */
@media(max-width:600px){#receive-dialog>p:first-of-type{display:none}#receive-title{margin:8px 0 6px}.receive-choices{margin:10px 0}.receive-choices strong{font-size:18px;white-space:nowrap;word-break:normal;overflow-wrap:normal}}
@media(max-width:600px){#receive-form{position:sticky;bottom:10px;z-index:2}}
@media(max-height:500px){#receive-form{position:sticky;bottom:8px;z-index:2}}
/* スキルの棚: 画面幅ではなく棚の幅で本数を決める(iPadの2列画面で細くなりすぎていた) */
.skill-rack{container-type:inline-size}
@container (min-width:520px){.rack-cartridge{flex-basis:calc((100% - 32px)/3)}}
@container (min-width:760px){.rack-cartridge{flex-basis:calc((100% - 48px)/4)}}
.machine-skill-list .skill-tile-name,.related-skills .skill-tile-name{color:#1d2330}
/* ファーストビュー: PC・タブレット横で、絵の下の一文まで最初の画面に。案内は上のメニューと重ならないよう、メニューが見える幅では出さない */
@media(min-width:601px){#top picture{display:block}#top picture img{max-height:calc(100svh - 190px);width:auto;max-width:100%;margin-inline:auto;display:block}}
@media(min-width:801px){#top .chapter-nav{display:none}}
@media(max-width:360px){#top .chapter-nav{padding:0 16px;gap:8px 12px;flex-wrap:wrap;justify-content:center}}
/* 詳細画面の映像: 左右の黒い帯を出さない */
#output-view .output-movie video{background:transparent;width:auto;max-width:100%;margin:0 auto;display:block}
/* 押しやすさ・見やすさ */
.work-card:focus-visible{outline-offset:-3px}
.film-audio,.ab-full,.skill-index>summary,#ab-history select{min-height:44px}
.seminar-close{min-width:44px;min-height:44px}
#rail-position{color:#5f6470}.connected-steps span{color:#5a6f8a}.receive-flow li span{color:#3f67ad}.steps article>span{color:#767986}
.seminar-dialog-head p,#seminar-dialog-date{color:#5f6b7c}
#seminar-dialog-title{word-break:keep-all;overflow-wrap:anywhere;text-wrap:balance}
.work-note{text-wrap:pretty}
/* スマホの章の見出し画像: 読み込み前から縦長の高さを取っておく(移動先がずれない) */
@media(max-width:600px){picture.chapter-art img{aspect-ratio:2/3;height:auto}}
/* 全76スキルの一覧: スマホで検索と絞り込みを上に残す */
.skill-index .library-head{position:sticky;top:0;background:#fff;z-index:2}
:is(p,small,li,a,strong,h1,h2,h3,div) span.nw{all:unset;white-space:nowrap}

/* v28 2026-09-26: 見出しの語で折る(320px の Chrome で「名前で探/す」)。区切りは phrase.js の <wbr> */
.skill-index>summary{word-break:keep-all;overflow-wrap:anywhere;line-break:strict;text-wrap:balance}
#output-description{word-break:keep-all;overflow-wrap:anywhere;line-break:strict}
/* v28 2026-09-26 セルフリファイン1: 押せる範囲だけ広げる(見た目・表示/非表示は変えない。display は足さない) */
.nav nav a:not(.pill){padding-block:12px;margin-block:-12px}
.chapter-nav a{padding-block:14px;margin-block:-14px}
.nav .pill.small{min-height:44px}
/* v28 2026-09-26 セルフリファイン2: 原寸表示の題も語で折る(スマホで「未来を持/ち帰る」) */
.ab-view-title,.pl-viewer-title{word-break:keep-all;overflow-wrap:anywhere;line-break:strict}
@supports (word-break:auto-phrase){.ab-view-title,.pl-viewer-title{word-break:auto-phrase}}
/* v28 2026-09-26 セルフリファイン3: スマホの足元で区切りの「・」が行頭に来ないよう、1行ずつ並べて点を隠す */
@media (max-width:600px){.footer-meta>span:first-child{display:block}.footer-meta .sep{display:none}.footer-meta>span+span{margin:0 7px}footer{padding:40px 20px}footer p{margin:10px 0 14px}.footer-meta{margin:6px 0 4px}#works .showcase-footer{justify-content:flex-start}}
.machine-description,.skill-tile-description{line-break:strict;word-break:auto-phrase}
/* v36(本人 9/27「動き止める必要特にない」ほかを抽象化): 見る人に要らない操作・入口の重複は出さない。要素はスクリプトが読むので残して隠す */
.pl-toggle,.pl-view-links,#seminar-original-link,.seminar-copy a,.ab-side .ab-full,.ab-original,.skill-id{display:none!important}
@media (max-width:800px){#top .hero-bottom .text-link{display:none}}
/* v36: スマホで縦に間延びさせない。8チームと登壇は横に送る1行、媒体は3列、A/B は左右に並べる(360px 以下は1列)。狭くなった文は語で折る(phrase.js が keep-all の要素に文節の区切りを入れる) */
@media (max-width:600px){.crew-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding-bottom:8px}.crew-grid>.crew-card{flex:0 0 84%;scroll-snap-align:start}.creator-event-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding-bottom:8px}.creator-event-grid>.creator-event{flex:0 0 84%;scroll-snap-align:start}.dpro-platform-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.ab-pair{grid-template-columns:1fr 1fr;gap:10px}.ab-side-label{display:none}.ab-choice select{font-size:13px;padding-left:8px;padding-right:22px}}@media (max-width:360px){.ab-pair{grid-template-columns:1fr}.ab-side-label{display:inline}.dpro-platform-list span{font-size:13px}.dpro-platform-list li{padding-left:3px;padding-right:3px}}@media (min-width:361px) and (max-width:600px){.ab-caption{font-size:13px}}.ab-caption,.seminar-host,.dpro-platform-list span{word-break:keep-all;overflow-wrap:anywhere;line-break:strict}.ab-caption,.seminar-host,.dpro-platform-list span{word-break:auto-phrase}