@charset "utf-8"; /* ========================================================================= HoloLab Conference 2026 専用スタイル ------------------------------------------------------------------------- 対象ページ : /event/holoconf26/ 内容 : 2トラック（ホールA / ホールB）同時進行のタイムテーブルと セッション詳細カード メモ : source/assets/css/ に置くと gulp の "css" タスクで build/assets/css/ へコピーされます ========================================================================= */ /* ページ内アンカーはアニメーションさせず即座に移動させる （サイト共通の style.css の html{scroll-behavior:smooth} を打ち消す） */ html { scroll-behavior: auto; } /* サイト共通の html/body { overflow-x: hidden } はスクロールコンテナを作るため、 表ヘッダーの position: sticky が効かなくなる。 clip は横のはみ出しを隠しつつスクロールコンテナを作らないので、 このページだけ clip に置き換える */ html, body { overflow-x: clip; } /* サイト共通の style.css は section#contact に padding-top: 80px を当てている （トップページのお問い合わせ用）。このページでは .hc26-h2 の上余白と二重になり PC表示でだけ不自然に空くため打ち消す */ .hc26 section#contact { padding-top: 0; } .hc26 { --hc-a: #345579; /* ホールA（彩度を落としたブルー） */ --hc-b: #a06331; /* ホールB（彩度を落としたアンバー） */ --hc-key: #1d334e; /* 基調講演・全体プログラム */ --hc-accent: #c8442a; /* 差し色。お申込みボタンの塗りに使う */ --hc-accent-ink: #b03a22; /* 差し色の文字用。細い文字は同じ色でも明るく見えるため、 ボタンの塗りと同じ濃さに見えるよう一段落としている */ --hc-ink: #16273d; --hc-sub: #4d5c6b; --hc-line: #dbe2ea; --hc-line-dark: #b9c3cd; /* 準備中バッジなど、一段濃いグレー */ --hc-soft: #f1f4f7; --hc-mist: #fcfdfe; /* パネルのごく淡い下地 */ --hc-id: #e5347f; /* セッション番号バッジ */ --hc-ex: #1f8a76; /* 展示（セッションと色を分ける） */ --hc-ex-bg: #e6f3f0; /* 本文の Noto Sans JP はサイト共通の meta.html で読み込み済み。 見出しの Zen Kaku Gothic New はこのページの でのみ読み込む */ --hc-font-display: "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif; --hc-font-body: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", -apple-system, BlinkMacSystemFont, sans-serif; --tt-gutter: 62px; font-family: var(--hc-font-body); color: var(--hc-ink); line-height: 1.7; letter-spacing: .08rem; /* 文字間 0.08rem */ /* 日本語をなるべく文節で折り返し、最終行が1文字だけになるのを避ける。 いずれも継承するプロパティなので、ここで指定すれば配下すべてに効く （未対応ブラウザでは無視され、既定の折り返しになる） */ line-break: strict; word-break: auto-phrase; overflow-wrap: break-word; text-wrap: pretty; } .hc26 a { color: inherit; } /* 絞り込みで隠す要素に付けるクラス。JS から付け外しする */ .hc26 .is-hidden { display: none !important; } /* ------------------------------------------------------------------------- 写真 ------------------------------------------------------------------------- いずれも 3:2 で書き出す前提。aspect-ratio を持たせて、読み込み前でも 場所が確保されるようにしている */ /* ------------------------------------------------------------------------- キービジュアル ------------------------------------------------------------------------- 写真列（最大1224px）と横幅を揃える。16:9で固定しておくので、 差し替え画像の縦横比が多少違っても表示は崩れない */ .hc26-kv { max-width: 1224px; margin: 0 0 8px; } .hc26-kv img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--hc-soft); border-radius: 4px; margin: 0; } /* 写真は3枚1組で並べる。1枚あたり最大400px（400×3 + gap 12px×2 = 1224px）に収め、 どのセクションでも同じ大きさ・同じ位置から始まるようにしている */ .hc26-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 1224px; margin: 4px 0 14px; } /* 2枚だけ並べる場合。3枚組と同じ 1224px の幅を2枚で分ける（1枚606px）ので、 右側が空かず、他セクションの写真列と横幅が揃う */ .hc26-photos--2 { grid-template-columns: repeat(2, 1fr); } /* 写真の縦横比は3:2で統一（元画像も3:2なのでトリミングは発生しない） */ .hc26-photos img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--hc-soft); border-radius: 4px; margin: 0; } /* ------------------------------------------------------------------------- 開催概要 ------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- 開催概要 ------------------------------------------------------------------------- 囲み枠・角丸・見出し列の塗りは使わず、横罫だけで区切る。 紙面の「開催要項」に近い、素っ気ない見せ方にしている */ .hc26-outline { display: grid; grid-template-columns: 120px 1fr; margin: 0 0 24px; border-top: 1px solid var(--hc-line); } .hc26-outline dt, .hc26-outline dd { margin: 0; padding: 9px 0; border-bottom: 1px solid var(--hc-line); line-height: 1.7; } .hc26-outline dt { font-size: 12.5px; font-weight: 700; color: var(--hc-sub); } .hc26-outline dd { font-size: 13.5px; } .hc26-strong { font-weight: 700; font-size: 14px; color: var(--hc-a); } .hc26-sublist { margin-top: 2px; } .hc26-sublist li { list-style: disc !important; margin-left: 1.3em !important; font-size: 13px; line-height: 1.7; } /* ------------------------------------------------------------------------- ページ内ナビ / 見出し / 一覧 ------------------------------------------------------------------------- */ .hc26-h2 { font-family: var(--hc-font-display); font-size: 28px; font-weight: 500; line-height: 1.5; letter-spacing: .02em; margin: 72px 0 18px; scroll-margin-top: 130px; } /* 見出しの下に短いアクセントの線を敷く */ .hc26-h2::after { content: ""; display: block; width: 56px; height: 3px; margin-top: 14px; border-radius: 2px; background: var(--hc-a); } /* 本文 16px / 行間175%（タイポグラフィ階層③） */ /* リード文中の強調（テーマのひとこと）を差し色にする */ .hc26-lead strong { color: var(--hc-accent-ink); } .hc26-lead { font-size: 16px; line-height: 1.75; color: var(--hc-ink); margin-bottom: 24px; } /* ------------------------------------------------------------------------- 代表メッセージ ------------------------------------------------------------------------- 本文と同じ幅・同じ文字サイズだと地の文に埋もれるので、 左の罫と淡い下地で「語り」のブロックとして区切る */ .hc26-message { max-width: 1224px; margin: 4px 0 28px; padding: 20px 24px; border: 0; border-left: 3px solid var(--hc-key); border-radius: 0 4px 4px 0; background: var(--hc-mist); quotes: none; } .hc26-message p { font-size: 15px; line-height: 1.9; color: var(--hc-ink); margin: 0 0 10px; } .hc26-message p:last-child { margin-bottom: 0; } /* 署名も p なので、上の .hc26-message p より詳細度を上げて打ち消す */ .hc26-message .hc26-message-name { margin: 6px 0 0; font-size: 13px; font-weight: 700; color: var(--hc-sub); text-align: right; } .hc26-subhead { font-family: var(--hc-font-display); font-size: 16px; font-weight: 700; margin: 18px 0 4px; } /* 表内・リスト 14px / 行間175% */ .hc26-list { font-size: 14px; line-height: 1.75; color: var(--hc-ink); margin: 4px 0 20px; } /* サイト共通の li のリセットが効くため !important で指定する */ .hc26-list li { list-style: disc !important; margin-left: 1.3em !important; } .hc26-list li.is-more { list-style: none !important; margin-left: 0 !important; color: var(--hc-sub); font-size: 13px; } /* キャプション 12px Medium / 行間150% */ .hc26-note { font-size: 12px; font-weight: 500; line-height: 1.5; color: var(--hc-sub); margin-bottom: 24px; } /* ========================================================================= お申し込み ========================================================================= */ .hc26-entry-btn { /* 抽選スケジュールの下に、ページ中央で置く */ display: block; width: fit-content; margin: 36px auto 20px; /* サイト共通では border-box を全体に当てていないため、 スマホの width: 100% で左右パディングぶんはみ出すのを防ぐ */ box-sizing: border-box; min-width: 220px; text-align: center; padding: 14px 28px; border-radius: 999px; font-size: 15px; font-weight: 700; line-height: 1.5; background: var(--hc-accent); color: #fff !important; text-decoration: none !important; transition: filter .2s; } a.hc26-entry-btn:hover { filter: brightness(.94); } .hc26-entry-btn.is-disabled { background: var(--hc-line); color: #fff !important; cursor: default; } /* --- 抽選スケジュール --- */ .entry-steps { margin: 6px 0 0; } .entry-step { position: relative; display: grid; grid-template-columns: 168px 148px 1fr; align-items: baseline; gap: 0 16px; padding: 0 0 20px 28px; list-style: none !important; margin-left: 0 !important; } /* 縦のつなぎ線 */ .entry-step::before { content: ""; position: absolute; left: 5px; top: 12px; bottom: 0; width: 2px; background: var(--hc-line); } .entry-step:last-child { padding-bottom: 0; } .entry-step:last-child::before { display: none; } /* 丸 */ .entry-step::after { content: ""; position: absolute; left: 0; top: 7px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--hc-a); box-sizing: border-box; } .entry-step-date { font-size: 14.5px; font-weight: 700; color: var(--hc-a); font-variant-numeric: tabular-nums; } .entry-step-label { font-size: 14.5px; font-weight: 700; } .entry-step-note { font-size: 13px; line-height: 1.8; color: var(--hc-sub); } .entry-step.is-done .entry-step-date, .entry-step.is-done .entry-step-label { color: var(--hc-line-dark); } .entry-step.is-done::after { border-color: var(--hc-line); background: var(--hc-line); } .entry-step--event::after { background: var(--hc-a); } /* ========================================================================= 展示 ========================================================================= */ .ex-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 16px; } .ex { background: #fff; border: 1px solid var(--hc-line); border-top: 4px solid var(--hc-ex); border-radius: 6px; padding: 18px 20px; scroll-margin-top: 130px; } .ex-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12px; } .ex-no { background: var(--hc-ex); color: #fff; font-weight: 700; letter-spacing: .04em; border-radius: 2px; padding: 1px 9px; line-height: 1.8; } .ex-cat { background: var(--hc-ex-bg); color: var(--hc-ex); font-weight: 700; border-radius: 2px; padding: 0 9px; line-height: 1.8; } .ex-img { margin-bottom: 12px; } .ex-img img { width: 100%; height: auto; border-radius: 2px; display: block; } .ex-title { font-size: 16px; font-weight: 700; line-height: 1.6; } .ex-owner { margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--hc-ex); } .ex-desc { margin-top: 10px; font-size: 13.5px; line-height: 1.9; color: var(--hc-ink); } /* ========================================================================= タイムテーブル ========================================================================= */ .tt-wide { margin-bottom: 20px; } /* ------------------------------------------------------------------------- 絞り込み（カテゴリ／ホール・複数選択可） ------------------------------------------------------------------------- */ /* 絞り込み。パネルで囲わず、下の罫線だけで表と切り分ける */ .hc26-filter { padding: 0 0 12px; margin-bottom: 20px; border-bottom: 1px solid var(--hc-line); } .hc26-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .hc26-filter-row + .hc26-filter-row { margin-top: 10px; } .hc26-filter-label { font-size: 12.5px; font-weight: 700; color: var(--hc-sub); width: 92px; flex: none; } .hc26-filter-row button { font-family: inherit; font-size: 13px; font-weight: 700; line-height: 1.4; cursor: pointer; border: 1px solid var(--hc-line); background: #fff; color: var(--hc-sub); border-radius: 2px; padding: 4px 14px; transition: background .2s, color .2s, border-color .2s; } .hc26-filter-row button:hover { border-color: var(--hc-ink); color: var(--hc-ink); } .hc26-filter-row button[aria-pressed="true"] { background: var(--hc-ink); border-color: var(--hc-ink); color: #fff; } .hc26-filter-row button[data-hall="a"][aria-pressed="true"] { background: var(--hc-a); border-color: var(--hc-a); } .hc26-filter-row button[data-hall="b"][aria-pressed="true"] { background: var(--hc-b); border-color: var(--hc-b); } .hc26-filter-foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px; margin-top: 10px; font-size: 12px; color: var(--hc-sub); } .hc26-filter-count b { font-size: 14px; font-weight: 700; color: var(--hc-ink); font-variant-numeric: tabular-nums; } .hc26-filter-reset { font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; border: 0; background: none; color: var(--hc-sub); text-decoration: underline; padding: 0; } .hc26-filter-reset:hover { color: var(--hc-ink); } .hc26-empty { border: 1px solid var(--hc-line); border-radius: 6px; padding: 30px 20px; text-align: center; font-size: 13.5px; color: var(--hc-sub); } /* --- ホール名のヘッダ（PCのみ／スクロール追従） --- */ .tt-head { display: grid; grid-template-columns: var(--tt-gutter) 1fr 1fr; gap: 12px; position: sticky; top: 107px; z-index: 6; background: #fff; padding: 10px 0 8px; margin-bottom: 6px; border-bottom: 2px solid var(--hc-line); box-shadow: 0 10px 10px -10px rgba(22, 39, 61, .25); } .tt-head-time { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--hc-sub); align-self: center; text-align: right; } /* ホール名の帯。ベタ塗りだと面積が大きく主張しすぎるので、 淡い下地＋色文字＋下線でホールを示す */ .tt-head-track { border-radius: 6px; padding: 6px 0; text-align: center; font-size: 17px; font-weight: 700; color: #fff; letter-spacing: .04em; } .tt-head-track--a { background: var(--hc-a); } .tt-head-track--b { background: var(--hc-b); } /* --- 1つの時間帯 --- */ .tt-row { display: grid; grid-template-columns: var(--tt-gutter) 1fr 1fr; gap: 12px; margin-bottom: 12px; } .tt-row--full .tt-cell { grid-column: 2 / 4; } .tt-time { font-size: 17px; font-weight: 700; color: var(--hc-sub); text-align: right; padding-top: 6px; font-variant-numeric: tabular-nums; letter-spacing: .02em; } .tt-cell { display: flex; flex-direction: column; gap: 8px; min-width: 0; } /* --- セッションカード --- */ .tt-card { display: grid; grid-template-columns: 100px 1fr; background: #fff; border: 1px solid var(--c, var(--hc-line)); border-radius: 6px; overflow: hidden; text-decoration: none !important; color: inherit !important; transition: box-shadow .2s, transform .2s; } a.tt-card:hover { opacity: 1; box-shadow: 0 6px 18px rgba(22, 39, 61, .16); transform: translateY(-1px); } .tt-card { scroll-margin-top: 175px; } .tt-card--a { --c: var(--hc-a); } .tt-card--b { --c: var(--hc-b); } .tt-card--key { --c: var(--hc-key); } /* 所要時間ごとの高さ。同じ長さのセッションは同じ高さになり、 45分カードの下端が「20分＋休憩＋20分」の下端と揃います */ .tt-card--d15 { min-height: 130px; } .tt-card--d20 { min-height: 170px; } .tt-card--d40 { min-height: 130px; } .tt-card--d45 { min-height: 379px; } .tt-card--d120 { min-height: 120px; } .tt-card-meta { background: var(--c); color: #fff; padding: 12px 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; } .tt-card-meta::before { content: attr(data-hall); display: none; white-space: nowrap; font-size: 11px; font-weight: 700; background: rgba(255, 255, 255, .22); border-radius: 999px; padding: 2px 10px; } /* 時刻は本文の文字間（0.08rem）を持ち込むと帯からはみ出すので詰める */ .tt-card-time { letter-spacing: normal; font-size: 12.5px; font-weight: 700; line-height: 1.4; font-variant-numeric: tabular-nums; white-space: nowrap; } .tt-dur { font-size: 11px; font-weight: 700; line-height: 1.6; opacity: .8; white-space: nowrap; } .tt-cat { display: inline-block; background: #fff; color: var(--c); font-size: 11px; font-weight: 700; line-height: 1.6; padding: 1px 10px; border-radius: 999px; white-space: nowrap; } .tt-card-body { position: relative; padding: 11px 14px 13px; } .tt-card-fmt { font-size: 11px; font-weight: 700; line-height: 1.5; color: var(--c); margin-bottom: 3px; } .tt-card-title { font-size: 15px; font-weight: 700; line-height: 1.6; } .tt-card-sub { margin-top: 4px; font-size: 12.5px; font-weight: 700; line-height: 1.6; color: var(--hc-sub); } .tt-card-speakers { margin-top: 7px; font-size: 12.5px; line-height: 1.7; color: var(--hc-sub); } .tt-card-speakers span { display: block; } .tt-card--key .tt-card-title { font-size: 17px; } /* 全幅カードは横幅に余裕があるので登壇者を1行にまとめる */ .tt-card--key .tt-card-speakers span { display: inline; } .tt-card--key .tt-card-speakers span + span::before { content: "／"; color: var(--hc-line-dark); } /* --- 空きコマ（同時刻のカードを左右で揃えるための透明な箱） --- */ .tt-spacer { visibility: hidden; } .tt-spacer--d15 { height: 130px; } .tt-spacer--d20 { height: 170px; } .tt-spacer--d40 { height: 130px; } .tt-spacer--d45 { height: 379px; } /* --- 休憩・アナウンス --- */ .tt-break, .tt-info { text-align: center; border-radius: 4px; line-height: 1.9; } .tt-break { background: var(--hc-soft); color: #7b8794; font-size: 12px; height: 23px; line-height: 23px; } .tt-info { background: #e4e9ef; color: #4b5a6b; font-size: 13px; font-weight: 700; } /* --- 凡例 --- */ /* 凡例と注記は、表の時刻カラム分だけ右に寄せて 「ホールA」列の左端に揃える（PCのみ） */ @media only screen and (min-width: 1024px) { .hc26-legend, .hc26-legend + .hc26-note { padding-left: calc(var(--tt-gutter) + 12px); } } .hc26-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; font-size: 12.5px; color: var(--hc-sub); margin-top: 16px; margin-bottom: 6px; } .hc26-legend span { display: inline-flex; align-items: center; gap: 6px; } .hc26-legend i { width: 14px; height: 14px; border-radius: 3px; font-style: normal; } .hc26-legend .is-a { background: var(--hc-a); } .hc26-legend .is-b { background: var(--hc-b); } .hc26-legend .is-key { background: var(--hc-key); } /* ========================================================================= セッション詳細 ========================================================================= */ .ses-group { margin-bottom: 34px; } .ses-group-title { font-family: var(--hc-font-display); font-size: 18px; font-weight: 700; color: var(--hc-sub); margin: 30px 0 14px; } .ses { background: #fff; border: 1px solid var(--hc-line); border-left: 6px solid var(--c, var(--hc-line)); border-radius: 6px; padding: 20px 24px; margin-bottom: 14px; scroll-margin-top: 130px; } .ses--a { --c: var(--hc-a); } .ses--b { --c: var(--hc-b); } .ses--key { --c: var(--hc-key); } .ses-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 12px; } .ses-id { background: var(--hc-id); color: #fff; font-weight: 700; letter-spacing: .04em; border-radius: 2px; padding: 1px 9px; line-height: 1.8; } .ses-hall { border: 1px solid var(--c); color: var(--c); font-weight: 700; border-radius: 2px; padding: 0 9px; line-height: 1.8; } .ses-cat { background: var(--c); color: #fff; font-weight: 700; border-radius: 2px; padding: 0 9px; line-height: 1.8; } .ses-fmt { color: var(--hc-sub); font-weight: 700; } .ses-time { color: var(--hc-sub); font-weight: 700; font-variant-numeric: tabular-nums; } .ses-dur { border: 1px solid var(--hc-line); color: var(--hc-sub); font-weight: 700; border-radius: 2px; padding: 0 9px; line-height: 1.8; } .ses-title { font-size: 19px; font-weight: 700; line-height: 1.6; margin-bottom: 16px; } .ses-sub { font-size: 15px; font-weight: 700; line-height: 1.6; color: var(--hc-sub); margin: -10px 0 16px; } /* --- 登壇者（顔写真つき） --- */ .ses-speakers { display: flex; flex-wrap: wrap; gap: 14px 28px; margin-bottom: 16px; } .ses-speaker { display: flex; align-items: center; gap: 12px; min-width: 0; } /* 写真が入るまではシルエットのプレースホルダーを表示 */ .ses-photo { position: relative; flex: none; width: 64px; height: 64px; border-radius: 50%; background: var(--hc-soft); overflow: hidden; } .ses-photo::before, .ses-photo::after { content: ""; position: absolute; left: 50%; background: var(--hc-line); } .ses-photo::before { width: 22px; height: 22px; top: 13px; border-radius: 50%; transform: translateX(-50%); } .ses-photo::after { width: 40px; height: 24px; bottom: 0; border-radius: 20px 20px 0 0; transform: translateX(-50%); } .ses-photo img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; } .ses-speaker-name { min-width: 0; } .ses-speaker-name b { display: block; font-size: 15px; font-weight: 700; line-height: 1.5; } .ses-speaker-name span { display: block; color: var(--hc-sub); font-size: 12.5px; line-height: 1.6; } .ses-abstract { font-size: 14.5px; line-height: 1.95; color: var(--hc-ink); } .ses-abstract.is-tbd { color: var(--hc-sub); } .ses-back { display: inline-block; margin-top: 12px; font-size: 12.5px; font-weight: 700; color: var(--hc-sub) !important; text-decoration: none !important; } .ses-back:hover { color: var(--hc-ink) !important; } /* ========================================================================= 準備中（TBD）表示 ------------------------------------------------------------------------- 内容が確定したカードからは --tbd 系のクラスを外してください ========================================================================= */ .tt-card--tbd { background: var(--hc-mist); } .tt-card--tbd .tt-card-meta { background: #fff; color: var(--c); border-right: 1px solid var(--hc-line); } .tt-card--tbd .tt-card-meta::before, .tt-card--tbd .tt-cat { background: var(--hc-soft); color: var(--hc-sub); } .tt-card--tbd .tt-dur { color: var(--hc-sub); } .tt-card--tbd .tt-card-title { color: var(--hc-sub); } .tt-card--tbd .tt-card-speakers { color: #97a3af; } .ses--tbd { background: var(--hc-mist); border-color: var(--hc-line); border-left: 6px solid var(--c); } .ses--tbd .ses-title { font-size: 16px; color: var(--hc-sub); } .ses--tbd .ses-id { background: var(--hc-soft); color: var(--hc-sub); } .ses--tbd .ses-cat { background: var(--hc-soft); color: var(--hc-sub); } /* ========================================================================= スマートフォン・タブレット（サイト共通のブレークポイント 1024px 未満） ========================================================================= */ @media only screen and (max-width: 1023px) { .hc26 { line-height: 1.8; } /* サイト共通では .block-txt が左右10pxの余白を作っているが、 .hc26 は独自クラスが多いので section 側でまとめて持たせる */ .hc26 > section { padding-left: 10px; padding-right: 10px; } .hc26 > section .block-txt { margin-left: 0; margin-right: 0; } /* 幅が足りないので2列に */ .hc26-photos { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; } /* 3枚目は2段目に1枚だけ残って収まりが悪いので、この幅では2枚だけ表示する */ .hc26-photos img:nth-child(n + 3) { display: none; } .hc26-outline { grid-template-columns: 1fr; } .hc26-outline dt { padding: 10px 0 0; border-bottom: 0; font-size: 12px; } .hc26-outline dd { padding: 0 0 10px; font-size: 13px; } .hc26-h2 { font-size: 22px; margin: 52px 0 14px; scroll-margin-top: 76px; } .hc26-h2::after { width: 44px; margin-top: 12px; } .hc26-lead, .hc26-draft, .hc26-dummy { font-size: 13px; } .hc26-message { margin-bottom: 22px; padding: 16px 16px; } .hc26-message p { font-size: 13.5px; line-height: 1.85; } .hc26-list { font-size: 13.5px; } .hc26-note { font-size: 12px; } .hc26-subhead { font-size: 14px; } .hc26-filter { padding: 0 0 10px; } .hc26-filter-label { width: 100%; margin-bottom: 2px; } .hc26-filter-row button { font-size: 12px; padding: 5px 13px; } /* --- タイムテーブルはホールA・Bを横並びのまま出す。 狭い画面では「ホール」の絞り込みで1ホールに減らせる。 横幅を稼ぐため、時刻は左の列ではなく行の見出しとして上に置く --- */ .tt-head { grid-template-columns: 1fr 1fr; gap: 8px; top: 60px; /* サイト共通のSP固定ヘッダーの高さ */ padding: 8px 0 6px; } .tt-head-time { display: none; } .tt-head-track { font-size: 13px; padding: 5px 0; } .tt-row { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; } .tt-time { grid-column: 1 / -1; text-align: left; font-size: 15px; padding-top: 0; padding-bottom: 2px; border-bottom: 1px solid var(--hc-line); } .tt-row--full .tt-cell { grid-column: 1 / -1; } /* 時刻のない行は見出しを詰める。 空のホール列は、左右の列がずれないよう残しておく */ .tt-time:empty { display: none; } .tt-card { grid-template-columns: 1fr; /* 所要時間ぶんの最低高さで余った分は、時刻の帯ではなく本文側に配分する （grid の既定では auto の行どうしで山分けされ、帯が間延びする） */ grid-template-rows: auto 1fr; scroll-margin-top: 70px; } /* ホールを1つだけ選んだときは、そのホールを横いっぱいに広げて読みやすくする （空になった列は JS が畳む。もう片方と高さを揃える必要もなくなるので、 所要時間ぶんの最低高さと位置合わせのスペーサーも解除する） */ .tt.is-single-hall .tt-head, .tt.is-single-hall .tt-row { grid-template-columns: 1fr; } /* カードが残っていないホールの列を畳む（1カラム化とセットで効かせる）。 PCでは畳まないので、絞り込んでもホールA・Bの列位置は変わらない */ .tt.is-single-hall .tt-cell.is-empty { display: none; } .tt.is-hall-a .tt-head-track--b, .tt.is-hall-b .tt-head-track--a { display: none; } .tt.is-single-hall .tt-spacer { display: none; } .tt.is-single-hall .tt-card--d15, .tt.is-single-hall .tt-card--d20, .tt.is-single-hall .tt-card--d40, .tt.is-single-hall .tt-card--d45, .tt.is-single-hall .tt-card--d120 { min-height: 0; } /* 横幅に余裕ができるので、時刻の帯はPCと同じ横並びに戻す */ .tt.is-single-hall .tt-card { grid-template-columns: 96px 1fr; grid-template-rows: auto; } .tt.is-single-hall .tt-card-meta { flex-direction: column; justify-content: center; text-align: center; padding: 10px 6px; } /* ただし両ホールにまたがるカード（基調講演・懇親会・開場）は、 縦帯に入れると「ホールA・B」が折り返してしまうので帯を上に置いたままにする */ .tt.is-single-hall .tt-row--full .tt-card { grid-template-columns: 1fr; } .tt.is-single-hall .tt-row--full .tt-card-meta { flex-direction: row; justify-content: flex-start; text-align: left; padding: 6px 10px; } .tt-card-meta { flex-direction: row; justify-content: flex-start; flex-wrap: wrap; gap: 4px 8px; padding: 6px 10px; text-align: left; } .tt-card-time { font-size: 12px; } /* 列の位置とホールヘッダでどちらのホールか分かるので、 カード内のホール名は両ホールにまたがる行だけに出す */ .tt-row--full .tt-card-meta::before { display: inline-block; } .tt-card--tbd .tt-card-meta { border-right: 0; border-bottom: 1px solid var(--hc-line); } .tt-card-body { padding: 10px 10px 12px; } .tt-card-title { font-size: 14px; } .tt-card-sub { font-size: 12px; } .ses-sub { font-size: 13.5px; margin: -8px 0 12px; } .tt-card-speakers { font-size: 12px; } .hc26-entry-btn { width: 100%; min-width: 0; padding: 13px 20px; font-size: 14px; } /* 日付とラベルは1行に並べる（縦積みだと「抽選」だけ落ちて不自然になる）。 説明文がある行は、その下に横いっぱいで回り込ませる */ .entry-step { grid-template-columns: auto 1fr; gap: 2px 12px; padding: 0 0 18px 24px; } .entry-step-note { grid-column: 1 / -1; } .entry-step-date, .entry-step-label { font-size: 13.5px; } .entry-step-note { font-size: 12.5px; } .ex-list { grid-template-columns: 1fr; gap: 12px; } .ex { padding: 14px 16px; scroll-margin-top: 76px; } .ex-title { font-size: 14.5px; } .ex-desc { font-size: 13px; } .ses { padding: 16px; scroll-margin-top: 76px; } .ses-title { font-size: 16px; margin-bottom: 12px; } .ses-speakers { display: block; margin-bottom: 12px; } .ses-speaker { max-width: 100%; margin-bottom: 12px; } .ses-speaker:last-child { margin-bottom: 0; } .ses-photo { width: 52px; height: 52px; } .ses-photo::before { width: 18px; height: 18px; top: 10px; } .ses-photo::after { width: 33px; height: 20px; } .ses-speaker-name b { font-size: 13.5px; } .ses-speaker-name span { font-size: 12px; } .ses-abstract { font-size: 13.5px; } .ses--tbd .ses-title { font-size: 14.5px; } }