@charset "UTF-8";
/* ==========================================================================
   media.css — セミナー／お知らせ／実績／お客様の声 の追加スタイル
   ids.css の後に読み込む。色・余白は ids.css のトークン（--s1〜--s7, --ink 等）を使う。
   対象：seminar.html, information*.html, works.html, works-01.html,
         works-voice-*.html, company-cs.html, sitemap.html
   ========================================================================== */
:root{
  --media-thumb-bg:var(--band);   /* アイキャッチの余白部分 */
  --media-note:var(--ink-soft);   /* 一覧下の注記（gray より読みやすく） */
}

/* 一覧下の注記 ------------------------------------------------------------ */
.list-note{margin-top:var(--s4);font-size:13.5px;line-height:1.8;color:var(--media-note);}
.list-note .lx{margin:0 .2em;font-weight:700;}

/* 記事ページのパンくず：最後の項目（記事名）は1行で省略 ------------------- */
.art-hero .crumb>span:last-child{flex:1 1 10em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* お知らせ一覧：日付＋タイトルだけのシンプルなリスト ---------------------- */
.news-simple a{grid-template-columns:110px 1fr 24px;}
@media (max-width:980px){
  .news-simple a{grid-template-columns:90px 1fr;}
}
@media (max-width:640px){
  .news-simple a{grid-template-columns:1fr;gap:2px;padding:var(--s2) 0;}
  .news-simple .date{font-size:13px;}
}

/* セミナー一覧：アイキャッチ付きカード ----------------------------------- */
.sem-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);}
.sem-card{min-width:0;}
.sem-card .thumb{background:var(--media-thumb-bg);}
.sem-card .thumb img{aspect-ratio:16/9;object-fit:contain;background:var(--media-thumb-bg);}
.sem-card .thumb img.ph{object-fit:cover;}
.sem-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px var(--s1);}
.sem-tag{font-size:11.5px;font-weight:700;line-height:1.6;padding:2px 10px;border-radius:999px;background:var(--yellow-pale);color:var(--gold);white-space:nowrap;}
.sem-held{font-family:var(--en);font-size:12.5px;font-weight:600;color:var(--ink-soft);}
.sem-card h3{overflow-wrap:anywhere;}
.sem-card h3 small{color:var(--ink-soft);}
.sem-card p{font-size:13.5px;line-height:1.8;}
@media (max-width:980px){
  .sem-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:640px){
  .sem-grid{grid-template-columns:1fr;}
}

/* 実績：お客様の声への小さなリンク --------------------------------------- */
.voice-link{margin-top:var(--s4);font-size:14px;}

/* 顧客満足度：お客様の声（絞り込み＋もっと見る） ------------------------- */
.voice-sec{scroll-margin-top:110px;}
.voice-filter{margin-bottom:var(--s2);}
.voice-count{font-size:13px;color:var(--media-note);margin-bottom:var(--s3);}
.voice-more{margin-top:var(--s4);text-align:center;}
.voice-card{min-width:0;overflow-wrap:anywhere;}
.voice-card[hidden],.voice-filter[hidden],.voice-count[hidden],.voice-more[hidden]{display:none;}

/* ==========================================================================
   お客様の声 詳細（works-voice-0001〜0085）
   ・本文＋右に会社プロフィール（980px 以下は1カラム、プロフィールを本文の上）
   ・質問＝赤の Q マーク＋太字、回答＝黄の A マーク＋本文（赤=IDS／黄=お客様）
   ・IDS 側の取組は淡い赤の枠で、お客様の発言と分ける
   ・本文は .reveal を付けない（画面が低いと FV の下が空白になるため）
   ========================================================================== */
:root{
  --vd-side:320px;                 /* プロフィール枠の幅 */
  --vd-mk:28px;                    /* Q/A マークの大きさ */
  --vd-indent:calc(var(--vd-mk) + 14px);
  --vd-q:var(--red);
  --vd-a-bg:var(--yellow-pale);
  --vd-a-line:var(--yellow);
  --vd-a-ink:var(--gold);
  --vd-reply-bg:var(--pale);
}

/* FV のリード（最初の回答の冒頭） */
.vd-lead{padding-left:var(--s2);border-left:3px solid var(--vd-a-line);}

/* レイアウト */
.vd-body{padding-top:var(--s5);}
.vd-layout{display:grid;grid-template-columns:minmax(0,1fr) var(--vd-side);gap:var(--s5) var(--s6);align-items:start;max-width:1180px;}
.vd-article{grid-column:1;grid-row:1;min-width:0;max-width:none;}
.vd-prof{grid-column:2;grid-row:1;position:sticky;top:110px;min-width:0;background:#fff;border:1px solid var(--line);border-top:3px solid var(--red);padding:var(--s3);}

/* プロフィール */
.vd-kicker{display:flex;align-items:center;gap:8px;font-family:var(--en);font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);}
.vd-name{margin-top:10px;font-size:17px;font-weight:900;line-height:1.55;color:var(--ink);overflow-wrap:anywhere;}
.vd-meta{margin-top:var(--s2);border-top:1px solid var(--line);}
.vd-meta div{display:grid;grid-template-columns:3.2em minmax(0,1fr);gap:var(--s2);padding:10px 0;border-bottom:1px solid var(--line);}
.vd-meta dt{font-size:12px;font-weight:700;line-height:1.9;color:var(--ink-soft);}
.vd-meta dd{font-size:13.5px;font-weight:700;line-height:1.75;color:var(--ink);overflow-wrap:anywhere;white-space:pre-line;}
.vd-meta dd a{color:var(--red);}
.vd-meta dd a:hover{text-decoration:underline;text-underline-offset:3px;}
.vd-back{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);margin-top:var(--s3);padding:12px var(--s2);border:1px solid var(--line);font-size:14px;font-weight:700;color:var(--ink);transition:border-color .3s var(--ease-sweep);}
.vd-back span{color:var(--red);transition:transform .5s var(--ease-io);}
.vd-back:hover{border-color:var(--red);}
.vd-back:hover span{transform:translateX(4px);}

/* 見出し（話題のまとまり） */
.vd-article h2{margin-top:var(--s5);font-size:22px;}
.vd-part:first-child h2{margin-top:0;}

/* 質問と回答 */
.vd-qa{margin-top:var(--s4);}
.vd-article h2+.vd-qa{margin-top:var(--s3);}
.vd-mk{position:absolute;left:0;top:0;display:flex;align-items:center;justify-content:center;width:var(--vd-mk);height:var(--vd-mk);font-family:var(--en);font-size:13px;font-weight:800;line-height:1;}
.vd-article .vd-q{position:relative;margin:0;padding-left:var(--vd-indent);font-size:16px;font-weight:700;line-height:1.75;color:var(--ink);}
.vd-q .vd-mk{background:var(--vd-q);color:#fff;}
.vd-a{position:relative;margin-top:var(--s2);padding-left:var(--vd-indent);}
.vd-a .vd-mk{top:2px;background:var(--vd-a-bg);border:1px solid var(--vd-a-line);color:var(--vd-a-ink);}
.vd-article .vd-a p{margin-top:var(--s2);}
.vd-article .vd-a p:first-of-type{margin-top:0;}

/* IDS 側の取組（お客様の発言と分ける） */
.vd-reply{margin-top:var(--s5);padding:var(--s4);background:var(--vd-reply-bg);border-left:4px solid var(--red);}
.vd-reply .eyebrow{color:var(--ink-soft);}
.vd-article .vd-reply h2{margin-top:8px;padding-left:0;border-left:0;font-size:18px;}
.vd-article .vd-reply p{margin-top:var(--s2);color:var(--ink);}

/* 0080：お客様の EC サイト紹介 */
.vd-site{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s3);align-items:center;margin-top:var(--s3);padding:var(--s3);border:1px solid var(--line);}
.vd-article .vd-site p{margin-top:8px;font-size:14.5px;line-height:1.9;}
.vd-article .vd-site .vd-site-name{margin-top:0;font-size:16px;font-weight:700;line-height:1.7;}
.vd-site-name a{color:var(--red);text-decoration:underline;text-underline-offset:3px;}
.vd-site-logo{display:block;width:200px;max-width:100%;}
.vd-site-logo img{width:100%;height:auto;}

@media (max-width:1180px){
  :root{--vd-side:280px;}
  .vd-layout{column-gap:var(--s5);}
}
@media (max-width:980px){
  .vd-layout{grid-template-columns:minmax(0,1fr);row-gap:var(--s4);}
  .vd-prof,.vd-article{grid-column:auto;grid-row:auto;}
  .vd-prof{position:static;padding:var(--s2) var(--s3) var(--s3);}
  .vd-meta div{padding:6px 0;}
  .vd-back{margin-top:var(--s2);padding:10px var(--s2);}
}
/* セミナー詳細：FVは左アイキャッチ、右はタイトル・開催情報・申込 */
.sem-fv{padding-bottom:var(--s5);}
.sem-fv .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);column-gap:var(--s5);row-gap:var(--s3);align-items:center;}
.sem-fv .crumb{grid-column:1 / -1;}
.sem-fv-visual{margin:0;}
.sem-fv-visual img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;}
.sem-fv h1{max-width:none;font-size:clamp(22px,2.15vw,34px);}
.sem-fv .art-meta{gap:var(--s2) var(--s4);margin-top:var(--s3);}
.sem-fv .actions{margin-top:var(--s4);}
@media (max-width:900px){
  .sem-fv .wrap{grid-template-columns:minmax(0,1fr);}
  .sem-fv-visual img{max-height:220px;}
}
/* セミナー詳細：対象者 → 概要 → プログラム → スピーカー → 開催概要 */
.sem-who .c h3{font-size:16px;line-height:1.6;}
.sem-who .c p{margin-top:var(--s2);font-size:14px;line-height:1.8;color:var(--ink-soft);}
.sem-prog{display:grid;gap:var(--s3);}
.sem-prog article{padding:var(--s3) var(--s4);background:#fff;border:1px solid var(--line);border-left:4px solid var(--red);}
.sem-prog h3{font-size:17px;line-height:1.6;}
.sem-prog .ck{margin-top:var(--s2);}
.sem-speaker{display:grid;grid-template-columns:168px minmax(0,1fr);gap:var(--s4);align-items:start;max-width:820px;}
.sem-speaker img{display:block;width:168px;height:210px;object-fit:cover;object-position:center 18%;}
.sem-speaker .role{font-size:13px;font-weight:700;color:var(--gray);}
.sem-speaker h3{margin-top:6px;font-size:22px;}
.sem-speaker .bio{margin-top:var(--s2);line-height:1.9;}
.sem-facts{max-width:820px;}
@media (max-width:720px){
  .sem-speaker{grid-template-columns:1fr;}
}
@media (max-width:640px){
  :root{--vd-mk:24px;--vd-indent:calc(var(--vd-mk) + 10px);}
  .vd-body{padding-top:var(--s4);}
  .vd-article h2{font-size:19px;}
  .vd-article .vd-q{font-size:15px;}
  .vd-mk{font-size:12px;}
  .vd-reply{padding:var(--s3);}
  .vd-site{grid-template-columns:minmax(0,1fr);}
}