にして、中の
![]()
に
class="session-thumb-image" を付けたまま透過PNGを指定する。
人物はカラーのまま、グレーの面の上に置く。
16:9のバナー画像（Canva製）を入れる回は is-cutout を付けなければ従来どおり。 */
.session-thumb-frame.is-cutout {
position: relative;
}
.session-thumb-frame.is-cutout .session-thumb-image {
object-fit: contain;
object-position: bottom center;
}
.session-card-meta {
margin-bottom: 12px;
}
/* 「PROGRAM 01｜分野」の黒ラベル */
.session-time-badge {
display: inline-block;
font-family: var(--font-en);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
line-height: 1.6;
color: var(--color-white);
background: var(--color-ink);
padding: 3px 10px;
margin-bottom: 12px;
}
.session-card-title {
font-size: 18px;
font-weight: 700;
line-height: 1.6;
color: var(--color-ink);
margin-bottom: 10px;
}
.speaker-line {
font-size: 13px;
color: var(--color-text-sub);
}
.speaker-line strong {
color: var(--color-ink);
font-size: 14px;
}
/* ---------- アコーディオン（セッション内容／登壇者紹介） ---------- */
.accordion {
border-top: 1px solid var(--color-border);
}
.accordion-q {
width: 100%;
text-align: left;
background: none;
border: none;
font-family: inherit;
font-size: 14px;
font-weight: 700;
padding: 16px 0;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
color: var(--color-ink);
}
.accordion-q::after {
content: "+";
font-family: var(--font-en);
font-size: 22px;
font-weight: 400;
line-height: 1;
flex-shrink: 0;
}
.accordion.is-open .accordion-q::after {
content: "−";
}
.accordion-a {
display: none;
padding: 0 0 20px;
font-size: 14px;
line-height: 1.9;
color: var(--color-text-sub);
}
.accordion-a p + p {
margin-top: 10px;
}
.accordion.is-open .accordion-a {
display: block;
}
/* ---------- おすすめ対象（チェックリスト） ---------- */
.check-list {
display: flex;
flex-direction: column;
list-style: none;
border-top: 1px solid var(--color-ink);
}
.check-list li {
position: relative;
padding: 18px 4px 18px 44px;
font-size: 15px;
font-weight: 700;
line-height: 1.8;
color: var(--color-ink);
border-bottom: 1px solid var(--color-border);
}
.check-list li::before {
content: "";
position: absolute;
left: 4px;
top: calc(18px + 0.9em - 11px);
width: 22px;
height: 22px;
background: var(--color-ink);
}
.check-list li::after {
content: "";
position: absolute;
left: 10px;
top: calc(18px + 0.9em - 6px);
width: 10px;
height: 5px;
border-left: 2px solid var(--color-white);
border-bottom: 2px solid var(--color-white);
transform: rotate(-45deg);
}
/* ---------- OUTLINE ---------- */
.outline-table {
width: 100%;
border-collapse: collapse;
border-top: 1px solid var(--color-ink);
}
.outline-table th,
.outline-table td {
text-align: left;
padding: 20px 16px;
border-bottom: 1px solid var(--color-border);
font-size: 14px;
vertical-align: top;
}
.outline-table th {
width: 160px;
color: var(--color-ink);
font-weight: 700;
background: var(--color-bg-alt);
}
.outline-table ul {
padding-left: 4px;
}
.outline-table li {
position: relative;
padding-left: 14px;
color: var(--color-text-sub);
font-size: 13px;
}
.outline-table li::before {
content: "・";
position: absolute;
left: 0;
}
/* ---------- 個人情報の取り扱い ---------- */
.privacy-links {
display: flex;
flex-wrap: wrap;
gap: 4px 16px;
margin: 10px 0 0;
list-style: none;
padding: 0;
}
.outline-table .privacy-links li {
padding-left: 0;
font-size: 12px;
line-height: 1.9;
}
.outline-table .privacy-links li::before {
content: none;
}
.privacy-links a {
color: var(--color-ink);
text-decoration: underline;
text-underline-offset: 3px;
}
.privacy-links a:hover {
color: var(--color-accent);
}
/* ---------- 申込みフォーム（右側常駐） ---------- */
/* HubSpotの申込フォームは縦に長く、素の sticky だとビューポートより高くなって
送信ボタンまでスクロールできなくなる。サイドバー自身をスクロールコンテナにする */
.form-sidebar {
grid-area: aside;
align-self: start;
position: sticky;
top: 24px;
max-height: calc(100vh - 48px);
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: var(--color-border) transparent;
}
.form-sidebar-inner {
background: var(--color-bg);
border: 1px solid var(--color-border);
border-top: 4px solid var(--color-ink);
padding: 28px 24px;
}
.form-sidebar-eyebrow {
font-size: 12px;
font-weight: 700;
color: var(--color-accent);
letter-spacing: 0.05em;
margin-bottom: 6px;
}
.form-sidebar-title {
font-size: 20px;
font-weight: 700;
color: var(--color-ink);
margin-bottom: 16px;
}
.form-sidebar-meta {
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid var(--color-border);
}
.form-sidebar-meta li {
font-size: 13px;
color: var(--color-text-sub);
padding-left: 16px;
position: relative;
}
.form-sidebar-meta li + li {
margin-top: 6px;
}
.form-sidebar-meta li::before {
content: "";
position: absolute;
left: 0;
top: 0.75em;
width: 6px;
height: 6px;
background: var(--color-ink);
}
.form-privacy-note {
margin: -8px 0 18px;
font-size: 11px;
line-height: 1.8;
color: var(--color-text-sub);
}
.form-privacy-note a {
color: var(--color-ink);
text-decoration: underline;
text-underline-offset: 2px;
}
.hubspot-form-target {
min-height: 200px;
}
.hubspot-placeholder {
border: 1px dashed var(--color-border);
background: var(--color-bg-alt);
color: var(--color-text-sub);
font-size: 13px;
text-align: center;
padding: 40px 16px;
}
/* ---------- 申込CTA（フォーム先頭へスクロール） ---------- */
.cta-block {
grid-area: cta;
display: block;
margin: 0 0 64px;
scroll-margin-top: 24px;
}
.cta-block-note {
font-size: 12px;
font-weight: 700;
color: var(--color-accent);
letter-spacing: 0.05em;
text-align: center;
margin-bottom: 10px;
}
.cta-block-button {
width: 100%;
font-size: 17px;
padding: 22px 40px;
}
/* ---------- レスポンシブ ---------- */
@media (max-width: 960px) {
.layout {
grid-template-columns: minmax(0, 1fr);
grid-template-areas:
"hero"
"cta"
"content"
"aside";
padding-top: 24px;
}
.cta-block {
margin: 0 0 56px;
}
.form-sidebar {
position: static;
max-height: none;
overflow-y: visible;
margin-bottom: 48px;
scroll-margin-top: 24px;
}
.content-block {
padding-bottom: 32px;
}
.outline-table th {
width: 110px;
}
}
/* 960〜1200pxは本文カラム自体が狭いので1列に戻す */
@media (max-width: 1200px) and (min-width: 961px) {
.session-list {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 640px) {
.session-list {
grid-template-columns: minmax(0, 1fr);
}
.doc-section,
.sessions {
margin-bottom: 64px;
}
}
@media (max-width: 560px) {
.layout {
padding: 20px 16px 0;
}
.form-sidebar-inner {
padding: 20px 16px;
}
.session-card > .session-card-meta,
.session-card > .accordion {
margin-left: 18px;
margin-right: 18px;
}
.issue-item {
grid-template-columns: 44px minmax(0, 1fr);
column-gap: 16px;
padding: 24px 0;
}
.outline-table th,
.outline-table td {
padding: 16px 10px;
}
.outline-table th {
width: 92px;
}
}
/* ---------- スクロール連動の表示アニメーション ----------
.has-reveal は のインラインスクリプトが付ける。
IntersectionObserver 非対応・JS無効の環境ではクラスが付かず、常時表示のまま */
.has-reveal .reveal {
opacity: 0;
transition:
opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.has-reveal .reveal-left {
transform: translateX(-28px);
}
.has-reveal .reveal-right {
transform: translateX(28px);
}
.has-reveal .reveal-up {
transform: translateY(24px);
}
.has-reveal .reveal.is-visible {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
.has-reveal .reveal,
.has-reveal .reveal.is-visible {
opacity: 1;
transform: none;
transition: none;
}
.btn-primary::after {
transition: none;
}
}
/* ============================================================
リッチ化（2026-10-09）
ワンスター様サイトの「黒い全面帯＋白の大きな英字」の見せ方を足して、
白黒の配色のまま奥行きと動きを出す
============================================================ */
/* 全幅の黒帯（ヒーロー）を 100vw で敷くため、横スクロールが出ないようにする */
html,
body {
overflow-x: clip;
}
/* ---------- ヒーロー：全幅の黒帯 ---------- */
.hero-block {
position: relative;
isolation: isolate;
color: var(--color-white);
}
.hero-block::before {
content: "";
position: absolute;
z-index: -1;
top: -40px;
bottom: 0;
/* ヒーローは左カラムにあり画面の中央にないので、左右に画面幅ぶん伸ばして
どの画面幅でも端まで届かせる（はみ出しは html/body の overflow-x: clip で切る） */
left: -100vw;
right: -100vw;
background:
linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 80px 80px,
linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 80px 80px,
#0a0a0a;
background-attachment: fixed;
}
.hero-block .title-block {
border-bottom: 0;
margin-bottom: 0;
padding-bottom: 64px;
}
.hero-block .hero-kicker,
.hero-block .seminar-title {
color: var(--color-white);
}
.hero-block .seminar-subtitle {
background: var(--color-white);
color: var(--color-ink);
}
.hero-block .lead-text {
color: #c4c4c4;
}
/* FV自体が黒地なので、黒帯に沈まないよう細い枠で輪郭を出す */
.fv-frame {
outline: 1px solid rgba(255, 255, 255, 0.22);
outline-offset: -1px;
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
}
/* 黒帯の上に載る申込カードは影で浮かせる */
.form-sidebar-inner {
box-shadow: 0 24px 50px rgba(0, 0, 0, 0.18);
}
.cta-block {
margin-top: 48px;
}
/* ---------- 見出し：背面に大きな白抜き英字 ---------- */
.block-title {
position: relative;
isolation: isolate;
}
.block-title-en[data-en]::before {
content: attr(data-en);
position: absolute;
z-index: -1;
top: -0.42em;
left: -0.04em;
font-size: 2.6em;
font-weight: 600;
line-height: 1;
letter-spacing: 0.02em;
white-space: nowrap;
color: transparent;
-webkit-text-stroke: 1px rgba(0, 0, 0, 0.09);
pointer-events: none;
}
/* ---------- 課題提起：黒いパネル ---------- */
#issue {
position: relative;
background: #0a0a0a;
color: var(--color-white);
padding: 64px 56px 40px;
overflow: hidden;
}
#issue .block-title,
#issue .issue-title,
#issue .section-lead strong {
color: var(--color-white);
}
#issue .block-title-en[data-en]::before {
-webkit-text-stroke-color: rgba(255, 255, 255, 0.1);
}
#issue .section-lead,
#issue .issue-item p {
color: #bdbdbd;
}
#issue .section-lead strong {
background: linear-gradient(transparent 62%, rgba(212, 0, 0, 0.55) 62%);
}
#issue .issue-list {
border-top-color: rgba(255, 255, 255, 0.5);
}
#issue .issue-item {
border-bottom-color: rgba(255, 255, 255, 0.15);
}
#issue .issue-icon {
stroke: var(--color-white);
}
#issue .issue-num {
color: #ff3b3b;
}
/* ---------- 手法名が流れる帯 ---------- */
.marquee {
overflow: hidden;
border-top: 1px solid var(--color-ink);
border-bottom: 1px solid var(--color-ink);
padding: 18px 0;
margin: -24px 0 72px;
}
.marquee-track {
display: flex;
width: max-content;
animation: marquee-scroll 38s linear infinite;
}
.marquee-track span {
display: inline-flex;
align-items: center;
font-family: var(--font-en);
font-size: 44px;
font-weight: 600;
letter-spacing: 0.04em;
line-height: 1;
white-space: nowrap;
color: var(--color-ink);
}
/* 1つおきに白抜き文字にして、帯にリズムをつける */
.marquee-track span:nth-child(even) {
color: transparent;
-webkit-text-stroke: 1px var(--color-ink);
}
.marquee-track span::after {
content: "";
width: 10px;
height: 10px;
margin: 0 36px;
background: var(--color-accent);
}
@keyframes marquee-scroll {
to {
transform: translateX(-50%);
}
}
/* ---------- 講演カード：番号と動き ---------- */
.session-list {
counter-reset: program;
}
.session-card {
counter-increment: program;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.session-card:hover {
transform: translateY(-4px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}
.session-thumb-frame {
position: relative;
}
.session-thumb-image {
transition: transform 0.5s ease;
}
.session-card:hover .session-thumb-image {
transform: scale(1.04);
}
/* 写真が未着の枠：斜線の地に大きなプログラム番号 */
.session-thumb-frame:has(.session-thumb-placeholder) {
background:
repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.035) 0 1px, transparent 1px 12px),
var(--color-bg-alt);
}
.session-thumb-frame:has(.session-thumb-placeholder)::before {
content: counter(program, decimal-leading-zero);
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-en);
font-size: 88px;
font-weight: 600;
line-height: 1;
color: transparent;
-webkit-text-stroke: 1.5px rgba(0, 0, 0, 0.28);
}
.session-thumb-frame:has(.session-thumb-placeholder) .session-thumb-placeholder {
align-items: flex-end;
padding-bottom: 14px;
font-size: 11px;
letter-spacing: 0.08em;
}
/* ---------- おすすめ対象：グレーの面 ---------- */
#recommend {
background: var(--color-bg-alt);
padding: 56px 48px 48px;
}
#recommend .check-list li {
border-bottom-color: #c9c9c9;
}
/* ---------- ボタン（黒地の上で使う白ボタン） ---------- */
.btn-invert {
background: var(--color-white);
border-color: var(--color-white);
color: var(--color-ink);
}
.btn-invert::after {
content: "→";
font-family: var(--font-en);
transition: transform 0.2s ease;
}
.btn-invert:hover {
background: transparent;
color: var(--color-white);
}
.btn-invert:hover::after {
transform: translateX(4px);
}
/* ---------- フッター ---------- */
.site-footer {
background:
linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 80px 80px,
linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 80px 80px,
#0a0a0a;
color: var(--color-white);
text-align: center;
padding: 88px 24px 96px;
}
.site-footer-en {
font-family: var(--font-en);
font-size: 15px;
font-weight: 600;
letter-spacing: 0.24em;
color: #ff3b3b;
margin-bottom: 14px;
}
.site-footer-title {
font-size: clamp(22px, 3vw, 32px);
font-weight: 700;
letter-spacing: 0.04em;
margin-bottom: 36px;
}
/* ---------- リッチ化分のレスポンシブ・動きを減らす設定 ---------- */
@media (max-width: 960px) {
.hero-block::before {
top: -24px;
}
.hero-block .title-block {
padding-bottom: 48px;
}
}
@media (max-width: 560px) {
.hero-block::before {
top: -20px;
}
#issue {
padding: 48px 20px 24px;
margin-left: -16px;
margin-right: -16px;
}
#recommend {
padding: 44px 20px 32px;
margin-left: -16px;
margin-right: -16px;
}
.marquee-track span {
font-size: 32px;
}
.marquee-track span::after {
margin: 0 22px;
}
.session-thumb-frame:has(.session-thumb-placeholder)::before {
font-size: 72px;
}
}
@media (prefers-reduced-motion: reduce) {
.marquee-track {
animation: none;
}
.session-card,
.session-card:hover,
.session-thumb-image,
.session-card:hover .session-thumb-image {
transition: none;
transform: none;
}
}
/* ---------- 登壇者写真の枠をリッチに（2026-10-16） ----------
写真が入った枠だけに効かせる。人物の後ろに大きな白抜きのプログラム番号、
中央が明るい面、人物の影、下端の差し色の線を重ねて奥行きを出す */
.session-thumb-frame.is-cutout:has(.session-thumb-image) {
background:
radial-gradient(70% 120% at 50% 100%, #ffffff 0%, rgba(255, 255, 255, 0) 70%),
linear-gradient(180deg, #e4e4e4 0%, #f3f3f3 100%);
}
.session-thumb-frame.is-cutout:has(.session-thumb-image)::before {
content: counter(program, decimal-leading-zero);
position: absolute;
z-index: 0;
right: 18px;
top: 50%;
transform: translateY(-50%);
font-family: var(--font-en);
font-size: 150px;
font-weight: 700;
line-height: 1;
letter-spacing: -0.02em;
color: transparent;
-webkit-text-stroke: 2px rgba(0, 0, 0, 0.14);
pointer-events: none;
}
.session-thumb-frame.is-cutout:has(.session-thumb-image)::after {
content: "";
position: absolute;
z-index: 2;
left: 0;
right: 0;
bottom: 0;
height: 4px;
background: var(--color-accent);
}
.session-thumb-frame.is-cutout .session-thumb-image {
position: relative;
z-index: 1;
filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.18));
}
@media (max-width: 560px) {
.session-thumb-frame.is-cutout:has(.session-thumb-image)::before {
font-size: 110px;
}
}
/* ---------- 登壇者写真を小さく・横並びに（2026-10-16） ----------
写真は補助的な扱いなので、カード上部の横長の帯をやめ、
講演タイトルの左に小さな正方形で置く。セッション内容などの開閉はカード幅いっぱい */
.session-card {
display: grid;
grid-template-columns: 128px minmax(0, 1fr);
column-gap: 20px;
align-content: start;
padding: 24px 24px 4px;
}
.session-card > .session-thumb-frame {
grid-column: 1;
grid-row: 1;
width: 128px;
aspect-ratio: 1 / 1;
margin: 0;
align-self: start;
}
.session-card > .session-card-meta {
grid-column: 2;
grid-row: 1;
margin: 0 0 16px;
}
.session-card > .accordion {
grid-column: 1 / -1;
margin: 0;
}
.session-card .session-card-title {
font-size: 17px;
}
/* 枠が小さくなった分、番号も小さく */
.session-thumb-frame.is-cutout:has(.session-thumb-image)::before {
font-size: 64px;
right: 6px;
top: 8px;
transform: none;
-webkit-text-stroke-width: 1.5px;
}
.session-thumb-frame:has(.session-thumb-placeholder)::before {
font-size: 52px;
}
.session-thumb-frame:has(.session-thumb-placeholder) .session-thumb-placeholder {
font-size: 10px;
padding-bottom: 8px;
}
.session-thumb-frame.is-cutout:has(.session-thumb-image)::after {
height: 3px;
}
@media (max-width: 560px) {
.session-card {
grid-template-columns: 96px minmax(0, 1fr);
column-gap: 14px;
padding: 20px 18px 4px;
}
.session-card > .session-thumb-frame {
width: 96px;
}
.session-card > .session-card-meta,
.session-card > .accordion {
margin-left: 0;
margin-right: 0;
}
.session-thumb-frame.is-cutout:has(.session-thumb-image)::before {
font-size: 48px;
}
.session-thumb-frame:has(.session-thumb-placeholder)::before {
font-size: 40px;
}
}
/* 小さな正方形では番号が顔に重なって見えにくいので、写真がある枠では番号を出さない */
.session-thumb-frame.is-cutout:has(.session-thumb-image)::before {
content: none;
}
.session-card .session-time-badge {
font-size: 11px;
letter-spacing: 0.06em;
}
/* ---------- 登壇者写真をカードの一番上に戻す（2026-10-16 再調整） ----------
写真の横に文字は置かない。写真は補助的な扱いなので、横長でも低めの帯（4:1）にして
人物を中央に小さく置く。上の「小さな正方形を横並び」の指定をここで打ち消している */
.session-card {
display: block;
padding: 0 0 4px;
}
.session-card > .session-thumb-frame {
width: 100%;
aspect-ratio: 4 / 1;
margin: 0 0 18px;
}
.session-card > .session-card-meta {
margin: 0 24px 12px;
}
.session-card > .accordion {
margin: 0 24px;
}
/* 写真のない枠の番号も帯の高さに合わせる */
.session-thumb-frame:has(.session-thumb-placeholder)::before {
font-size: 60px;
}
@media (max-width: 560px) {
.session-card {
padding: 0 0 4px;
}
.session-card > .session-thumb-frame {
width: 100%;
aspect-ratio: 3 / 1;
}
.session-card > .session-card-meta,
.session-card > .accordion {
margin-left: 18px;
margin-right: 18px;
}
.session-thumb-frame:has(.session-thumb-placeholder)::before {
font-size: 48px;
}
}
/* ---------- 登壇者写真の帯：スクロールで動かす（2026-10-16） ----------
画面に入ったら（.reveal → .is-visible）
・人物が下からせり上がる
・後ろの大きな番号が右からすべり込む
・下端の差し色の線が左から引かれる
さらにスクロール量に応じて人物と番号を少しずらす（--p は index.html のスクリプトが -1〜1 で入れる）。
帯そのものは動かさず、中身だけを動かす */
.session-card > .session-thumb-frame.reveal {
opacity: 1;
transform: none;
}
/* 写真のある帯にも大きな番号を戻す（帯が横長なので顔に重ならない右側に置く） */
.session-thumb-frame.is-cutout:has(.session-thumb-image)::before {
content: counter(program, decimal-leading-zero);
font-size: 110px;
right: 28px;
top: 50%;
transform: translate(calc(var(--p, 0) * 18px), -50%);
-webkit-text-stroke: 1.5px rgba(0, 0, 0, 0.16);
transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* 帯の左側にも、斜めの細いストライプで奥行きを足す */
.session-thumb-frame.is-cutout:has(.session-thumb-image) {
background:
repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.035) 0 1px, transparent 1px 14px) left / 38% 100% no-repeat,
radial-gradient(70% 120% at 50% 100%, #ffffff 0%, rgba(255, 255, 255, 0) 70%),
linear-gradient(180deg, #e2e2e2 0%, #f4f4f4 100%);
}
.session-thumb-frame.is-cutout .session-thumb-image {
translate: 0 calc(var(--p, 0) * -6px);
transition:
opacity 0.8s ease,
transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
scale 0.5s ease;
}
.session-thumb-frame.is-cutout:has(.session-thumb-image)::after {
transform-origin: left center;
transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1) 0.15s;
}
/* 画面に入る前の状態（JSが動く環境だけ） */
.has-reveal .session-thumb-frame.is-cutout:not(.is-visible) .session-thumb-image {
opacity: 0;
transform: translateY(32%);
}
.has-reveal .session-thumb-frame.is-cutout:has(.session-thumb-image):not(.is-visible)::before {
opacity: 0;
transform: translate(60px, -50%);
}
.has-reveal .session-thumb-frame.is-cutout:has(.session-thumb-image):not(.is-visible)::after {
transform: scaleX(0);
}
/* ホバーの拡大は transform ではなく scale で（せり上がりの transform とぶつけない） */
.session-card:hover .session-thumb-frame.is-cutout .session-thumb-image {
transform: none;
scale: 1.04;
}
@media (max-width: 560px) {
.session-thumb-frame.is-cutout:has(.session-thumb-image)::before {
font-size: 84px;
right: 18px;
}
}
@media (prefers-reduced-motion: reduce) {
.session-thumb-frame.is-cutout .session-thumb-image,
.session-thumb-frame.is-cutout:has(.session-thumb-image)::before,
.session-thumb-frame.is-cutout:has(.session-thumb-image)::after {
transition: none;
translate: none;
}
.has-reveal .session-thumb-frame.is-cutout:not(.is-visible) .session-thumb-image,
.has-reveal .session-thumb-frame.is-cutout:has(.session-thumb-image):not(.is-visible)::before,
.has-reveal .session-thumb-frame.is-cutout:has(.session-thumb-image):not(.is-visible)::after {
opacity: 1;
transform: none;
}
.session-thumb-frame.is-cutout:has(.session-thumb-image)::before {
transform: translateY(-50%);
}
}
/* ---------- 未着の箇所の「Coming Soon」表示（2026-10-16） ---------- */
.coming-soon {
font-family: var(--font-en);
font-weight: 600;
letter-spacing: 0.16em;
color: #9a9a9a;
}
/* ---------- PC幅ではFV下の申込ボタンを出さない（2026-10-16） ----------
右側に申込フォームが常駐しているので不要。フォームがページ下部に回る960px以下だけ表示する */
@media (min-width: 961px) {
.cta-block {
display: none;
}
}
/* ---------- FV周りの帯を明るいグレーに（2026-10-19） ----------
FV画像が黒地になったので、後ろの帯も黒だと輪郭が埋もれる。
帯を明るいグレーの方眼にして、FVの黒い四角がくっきり浮くようにする */
.hero-block {
color: var(--color-ink);
}
.hero-block::before {
background:
linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px) 0 0 / 80px 80px,
linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px) 0 0 / 80px 80px,
#ececec;
}
.hero-block .hero-kicker,
.hero-block .seminar-title {
color: var(--color-ink);
}
.hero-block .seminar-subtitle {
background: var(--color-ink);
color: var(--color-white);
}
.hero-block .lead-text {
color: var(--color-text-sub);
}
.hero-block .fv-frame {
outline: none;
box-shadow: 0 24px 50px rgba(0, 0, 0, 0.28);
}
/* ---------- BACKGROUND：各変化を扱う講演番号のラベル（2026-10-19） ---------- */
#issue .issue-progs {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 8px;
margin-top: 12px;
font-size: 12px;
color: #9a9a9a;
}
#issue .issue-progs span {
font-family: var(--font-en);
font-weight: 600;
font-size: 12px;
letter-spacing: 0.08em;
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.45);
padding: 1px 8px;
}
/* ---------- BACKGROUND：8つの施策の一覧（2026-10-19） ---------- */
#issue .measures {
margin-top: 48px;
}
#issue .measures-head {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 6px 16px;
font-size: 22px;
font-weight: 700;
color: #fff;
margin-bottom: 20px;
}
#issue .measures-head .en {
font-family: var(--font-en);
font-weight: 600;
font-size: 15px;
letter-spacing: 0.2em;
color: #ff3b3b;
}
#issue .measures-grid {
list-style: none;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1px;
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.15);
}
#issue .measure {
position: relative;
background: #141414;
padding: 20px 22px 18px;
transition: background 0.2s ease;
}
#issue .measure:hover {
background: #1c1c1c;
}
#issue .measure::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--color-accent);
}
#issue .measure-no {
font-family: var(--font-en);
font-weight: 600;
font-size: 12px;
letter-spacing: 0.12em;
color: #9a9a9a;
}
#issue .measure-cat {
display: inline-block;
margin-left: 10px;
font-size: 11px;
font-weight: 700;
color: #ff3b3b;
border: 1px solid rgba(255, 59, 59, 0.6);
padding: 0 7px;
vertical-align: 1px;
}
#issue .measure-title {
margin: 8px 0 6px;
font-size: 19px;
font-weight: 700;
line-height: 1.5;
color: #fff;
}
#issue .measure-desc {
font-size: 13px;
line-height: 1.8;
color: #c4c4c4;
}
#issue .measure-co {
margin-top: 10px;
font-size: 11px;
color: #8a8a8a;
}
@media (max-width: 640px) {
#issue .measures-grid {
grid-template-columns: minmax(0, 1fr);
}
}
/* ---------- BACKGROUND：施策を4つの切り口にまとめたカード（2026-10-19） ---------- */
#issue .groups-grid {
list-style: none;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
#issue .group {
position: relative;
background: #141414;
border: 1px solid rgba(255, 255, 255, 0.15);
border-top: 3px solid var(--color-accent);
padding: 22px 22px 18px;
}
#issue .group-no {
position: absolute;
right: 16px;
top: 6px;
font-family: var(--font-en);
font-weight: 700;
font-size: 54px;
line-height: 1;
color: transparent;
-webkit-text-stroke: 1px rgba(255, 255, 255, 0.18);
}
#issue .group-title {
font-size: 20px;
font-weight: 700;
color: #fff;
margin-bottom: 4px;
}
#issue .group-desc {
font-size: 13px;
color: #bdbdbd;
margin-bottom: 14px;
}
#issue .group-list {
list-style: none;
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
#issue .group-list li {
display: grid;
grid-template-columns: 30px minmax(0, 1fr) auto;
align-items: baseline;
gap: 10px;
padding: 9px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
#issue .group-list .no {
font-family: var(--font-en);
font-weight: 600;
font-size: 13px;
color: #ff3b3b;
}
#issue .group-list .nm {
font-size: 15px;
font-weight: 700;
color: #fff;
}
#issue .group-list .co {
font-size: 11px;
color: #8a8a8a;
text-align: right;
}
@media (max-width: 640px) {
#issue .groups-grid {
grid-template-columns: minmax(0, 1fr);
}
}
/* 施策名が折り返さないよう、会社名は施策名の下の行に置く */
#issue .group-list li {
grid-template-columns: 30px minmax(0, 1fr);
row-gap: 0;
}
#issue .group-list .co {
grid-column: 2;
text-align: left;
}
/* 各施策の具体的な中身を一言で（2026-10-19） */
#issue .group-list .ds {
grid-column: 2;
font-size: 12px;
line-height: 1.7;
color: #c4c4c4;
margin-top: 2px;
}
#issue .group-list .co {
grid-row: auto;
margin-top: 4px;
}
/* ---------- BACKGROUND：各変化を扱う講演の登壇者写真（2026-10-20） ----------
講演番号のラベルと同じ行の右端に置き、下端を区切り線にそろえる（立っているように見せる）。
絶対配置にすると幅によって本文やラベルにかぶるので、通常の流れの中に置く */
#issue .issue-foot {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 8px 16px;
margin-top: 12px;
margin-bottom: -28px; /* .issue-item の下余白ぶん下げて、写真の足元を区切り線に乗せる */
}
#issue .issue-foot .issue-progs {
flex: 1 1 180px;
margin-top: 0;
margin-bottom: 28px;
}
#issue .issue-faces {
display: flex;
align-items: flex-end;
margin-left: auto;
pointer-events: none;
}
#issue .issue-faces img {
width: 92px;
height: 92px;
object-fit: contain;
object-position: bottom;
filter: grayscale(1) contrast(1.08) brightness(0.92);
}
#issue .issue-faces img + img {
margin-left: -26px;
}
@media (max-width: 640px) {
#issue .issue-foot {
margin-bottom: -24px;
}
#issue .issue-foot .issue-progs {
margin-bottom: 24px;
}
#issue .issue-faces img {
width: 72px;
height: 72px;
}
#issue .issue-faces img + img {
margin-left: -20px;
}
}