/* ==========================================================================
   workshop.css — ワークショップ事業ページ固有スタイル
   株式会社Session Webサイト
   ========================================================================== */

/* ==========================================================================
   ページヒーロー（ワークショップページ固有）
   ========================================================================== */

.workshop-hero {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.42)),
    url('../images/workshop-hero-bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--header-height-sp) 0 var(--header-height-sp);
}

@media (min-width: 1024px) {
  .workshop-hero {
    padding: var(--header-height) 0 var(--header-height);
  }
}

.workshop-hero-eyebrow {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--color-accent);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* ==========================================================================
   セクション共通パーツ（ワークショップページ内）
   ========================================================================== */

/* eyebrow ラベル（Programs / Philosophy） */
.ws-eyebrow {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--color-accent);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* セクション見出し */
.ws-section-title {
  font-family: var(--font-accent);
  font-size: 1.5rem; /* SP: --fs-2xl(32px)→1.5rem(24px)に縮小。768px以上は--fs-3xlで上書き */
  font-weight: 700;
  color: var(--color-secondary);
  letter-spacing: 0.08em;
  line-height: 1.4;
  margin-bottom: 16px;
}

/* セクションリード */
.ws-section-lead {
  font-size: var(--fs-sm);
  color: var(--color-text-light);
  line-height: 1.9;
  letter-spacing: 0.04em;
}

/* セクションヘッダーブロック（中央寄せ） */
.ws-section-header {
  text-align: center;
  margin-bottom: 48px;
}

/* ==========================================================================
   フィロソフィーセクション（2カラム統合）
   ========================================================================== */

.workshop-philosophy {
  padding: var(--section-padding-sp);
  background-color: var(--color-bg);
}

/* 2カラムブロック（SP: 縦積み） */
.ws-philosophy-columns {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* 左列：1つの約束（SP: 中央寄せ） */
.ws-promise-col {
  text-align: center;
}

/* 横線コネクター（SP: 非表示） */
.ws-col-connector {
  display: none;
}

/* 右列：3つのキーワード */
.ws-cycle-col {
  /* SP: full width */
}

/* キャプションリスト + SVG の内部フレックス（SP: 縦積み） */
.ws-cycle-inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* キャプションリスト（SP: 縦並び） */
.ws-cycle-captions {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 0;
}

.ws-cycle-caption-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 22px;
  border-left: 2px solid rgba(192, 80, 45, 0.3);
}

.ws-cap-num {
  font-family: var(--font-accent);
  font-size: var(--fs-xs);
  color: var(--color-accent);
  letter-spacing: 0.18em;
}

.ws-cap-kw {
  font-family: var(--font-accent);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-secondary);
  letter-spacing: 0.08em;
  line-height: 1.3;
}

.ws-cap-text {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-text-light);
  letter-spacing: 0.03em;
  line-height: 1.75;
  margin-bottom: 6px;
}

.ws-cap-detail {
  font-size: var(--fs-sm);
  color: rgba(85, 85, 85, 0.75);
  letter-spacing: 0.02em;
  line-height: 1.8;
}

/* --- 1つの約束ブロック --- */

.ws-promise {
  max-width: none;
  margin: 0 0 24px;
  padding: 0;
  text-align: center;
}

/* 1つの約束ラベル（ws-keywords-elevated と統一：— テキスト — スタイル） */
.ws-promise-label {
  font-family: var(--font-accent);
  font-size: var(--fs-sm);
  letter-spacing: 0.25em;
  color: var(--color-accent);
  margin-bottom: 14px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.ws-promise-label::before,
.ws-promise-label::after {
  content: '';
  display: block;
  width: 36px;
  height: 1px;
  background-color: var(--color-accent);
  opacity: 0.4;
  flex-shrink: 0;
}

/* COMPLETE TAILOR-MADE */
.ws-promise-en {
  font-size: var(--fs-xs);
  letter-spacing: 0.32em;
  color: var(--color-text-light);
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* 完全オーダーメイド（大見出し・ブランドカラー） */
.ws-promise-heading {
  font-family: var(--font-accent);
  font-size: var(--fs-2xl); /* SP: --fs-3xl(40px)→--fs-2xl(32px)に縮小 */
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.08em;
  line-height: 1.2;
  margin-bottom: 16px;
}

/* タグライン（引用） */
.ws-promise-tagline {
  font-family: var(--font-accent);
  font-size: var(--fs-md);
  color: var(--color-secondary);
  letter-spacing: 0.06em;
  line-height: 1.7;
  margin-bottom: 28px;
}

/* 箇条書き（左寄せ・ブランドドット） */
.ws-promise-list {
  list-style: none;
  text-align: left;
  max-width: 440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ws-promise-list li {
  font-size: var(--fs-sm);
  color: var(--color-text-light);
  line-height: 1.8;
  letter-spacing: 0.03em;
  padding-left: 18px;
  position: relative;
}

.ws-promise-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-primary);
  opacity: 0.7;
}

/* --- トランジション（だからこそ〜） --- */

.ws-transition {
  text-align: center;
  padding: 8px 0 0;
  position: relative;
}

/* 細い縦線を上に添える */
.ws-transition::before {
  content: '';
  display: block;
  width: 1px;
  height: 32px;
  background-color: var(--color-accent);
  opacity: 0.35;
  margin: 0 auto 24px;
}

.ws-transition-text {
  font-family: var(--font-accent);
  font-size: var(--fs-lg);
  color: var(--color-secondary);
  letter-spacing: 0.08em;
  line-height: 1.6;
}

/* --- 実現する3つのキーワード（昇格ラベル） --- */

.ws-keywords-elevated {
  text-align: center;
  font-family: var(--font-accent);
  font-size: var(--fs-sm);
  color: var(--color-accent);
  letter-spacing: 0.25em;
  margin-bottom: 24px;

  /* 両脇に細い横線を添える */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.ws-keywords-elevated::before,
.ws-keywords-elevated::after {
  content: '';
  display: block;
  width: 36px;
  height: 1px;
  background-color: var(--color-accent);
  opacity: 0.4;
  flex-shrink: 0;
}

/* --- 縦線区切り（ws-cycle-divider）--- */

/* SP: 非表示 */
.ws-cycle-divider {
  display: none;
}

/* --- 循環ダイアグラム --- */

.ws-cycle-wrapper {
  width: 100%;
}

.ws-cycle-svg {
  width: 100%;
  height: auto;
  display: block;
}

/* SVGサークルグループ：フェードイン */
.ws-cycle-g {
  opacity: 0;
  transition: opacity 0.7s ease;
}

.ws-cycle-g.is-visible {
  opacity: 1;
}

/* サークルホバー：ほのかなグロウ */
.ws-cycle-g circle {
  transition: filter 0.4s ease;
}

.ws-cycle-g:hover circle {
  filter: brightness(1.12) drop-shadow(0 0 10px rgba(192, 80, 45, 0.25));
}

/* 矢印：描画アニメーション */
.ws-arrow {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  opacity: 0;
}

.ws-arrow.is-animating {
  animation: ws-flow 4.5s ease-in-out infinite;
}

/* 矢印ごとに出発タイミングをずらす（JSでも設定するが保険） */
.ws-arrow-1 { animation-delay: 0s; }
.ws-arrow-2 { animation-delay: 1.5s; }
.ws-arrow-3 { animation-delay: 3s; }

/* アローヘッド：線が描き終わる 33% のタイミングで出現・線と同期して消える */
.ws-arrowhead {
  opacity: 0;
}

.ws-arrowhead.is-animating {
  animation: ws-arrowhead-show 4.5s ease-in-out infinite;
}

/* .ws-arrow と同じ遅延でCSS側も保険設定 */
.ws-arrowhead-1 { animation-delay: 0s; }
.ws-arrowhead-2 { animation-delay: 1.5s; }
.ws-arrowhead-3 { animation-delay: 3s; }

@keyframes ws-arrowhead-show {
  0%,  28%  { opacity: 0; }
  33%        { opacity: 1; }   /* 完全不透明で背後の線を隠す */
  42%        { opacity: 0; }
  43%, 100%  { opacity: 0; }
}

/* 矢印が順番に描かれ、消えて次へ渡すループアニメーション */
@keyframes ws-flow {
  0% {
    stroke-dashoffset: 100;
    opacity: 0;
  }
  5% {
    opacity: 0.85;
  }
  33% {
    stroke-dashoffset: 0;
    opacity: 0.85;
  }
  35% {
    /* 矢じりがopacity:1で完全カバー中に線を消す → 透け防止 */
    opacity: 0;
    stroke-dashoffset: 0;
  }
  36%, 100% {
    stroke-dashoffset: 100;
    opacity: 0;
  }
}

/* 縦線コネクター：光が上→下へ流れるアニメーション */
@keyframes ws-connector-flow {
  0%   { transform: translateY(-100%); opacity: 0; }
  10%  { opacity: 1; }
  55%  { transform: translateY(220%); opacity: 0; }
  100% { transform: translateY(-100%); opacity: 0; }
}

/* ==========================================================================
   研修ラインナップセクション（プログラム12種）
   ========================================================================== */

.workshop-lineup {
  padding: var(--section-padding-sp);
  background-color: var(--color-bg-dark);
}

.lineup-grid {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* カード共通 */
.lineup-card {
  background-color: var(--color-white);
  padding: 32px 28px;
  border-bottom: 2px solid transparent;
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base),
    transform var(--transition-base);
}

.lineup-card:hover {
  border-bottom-color: var(--color-accent);
  box-shadow: 0 6px 28px rgba(26, 39, 68, 0.08);
  transform: translateY(-2px);
}

.lineup-card-title {
  font-family: var(--font-accent);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--color-secondary);
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}

.lineup-card-text {
  font-size: var(--fs-sm);
  color: var(--color-text-light);
  line-height: 1.8;
  letter-spacing: 0.03em;
}

/* AI研修カード（バッジ＋上ボーダー） */
.lineup-card--featured {
  border-top: 2px solid var(--color-accent);
}

.lineup-card-badge {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm);
  padding: 2px 10px;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}

/* コア3領域（SP: 1カラム → PC: 3カラム） */
.lineup-core-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

/* コアコールアウト（全幅バナー） */
.lineup-core-callout {
  background-color: rgba(192, 80, 45, 0.06);
  border-left: 3px solid var(--color-primary);
  padding: 16px 24px;
  margin-bottom: 32px;
}

.lineup-core-callout-text {
  font-family: var(--font-accent);
  font-size: var(--fs-sm);
  color: var(--color-accent);
  letter-spacing: 0.04em;
  line-height: 1.7;
}

/* コア3領域カード（リーダーシップ・営業・AI） */
.lineup-card--core {
  border: 2px solid var(--color-primary);
}

.lineup-card--core .lineup-card-title {
  color: var(--color-primary);
}

/* カード内テキストリンク */
.lineup-card-link {
  display: inline-block;
  margin-top: 8px;
  font-size: var(--fs-xs);
  color: var(--color-accent);
  text-decoration: underline;
  letter-spacing: 0.04em;
  transition: color var(--transition-base);
}

.lineup-card-link:hover {
  color: var(--color-primary);
}

/* 無人島カード（ダークトーン） */
.lineup-card--survivor {
  background-color: var(--color-secondary);
  position: relative;
}

.lineup-card--survivor .lineup-card-title {
  color: var(--color-white);
}

.lineup-card--survivor .lineup-card-text {
  color: rgba(255, 255, 255, 0.7);
}

.lineup-card--survivor:hover {
  border-bottom-color: var(--color-accent);
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.2);
}

/* スペシャルプログラムバッジ（上：HTML要素 / 下：::after） */
.lineup-card-special {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: var(--fs-xs);
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm);
  padding: 2px 10px;
  letter-spacing: 0.06em;
}

.lineup-card--survivor::after {
  content: 'スペシャルプログラム';
  position: absolute;
  bottom: 14px;
  right: 14px;
  font-size: var(--fs-xs);
  font-family: var(--font-primary);
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm);
  padding: 2px 10px;
  letter-spacing: 0.06em;
}

/* ==========================================================================
   Trustセクション（実績 / 信頼の証明）
   ========================================================================== */

.workshop-trust {
  padding: var(--section-padding-sp);
  background-color: var(--color-secondary);
}

/* ダークセクション内：eyebrow・タイトル色上書き */
.workshop-trust .ws-eyebrow {
  color: var(--color-accent);
}

.workshop-trust .ws-section-title {
  color: var(--color-white);
}

/* 2カラム（SP: 縦積み） */
.trust-columns {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* カラム見出し */
.trust-col-heading {
  font-family: var(--font-accent);
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: 0.1em;
  margin-bottom: 28px;
  text-align: center;
}

/* --- A列：円形メーター --- */

/* 2メーター横並び */
.trust-meters {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-bottom: 28px;
}

/* 各メーター */
.trust-meter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* 数値（大きく） */
.trust-meter-number {
  font-family: var(--font-accent);
  font-size: var(--fs-4xl);
  font-weight: 700;
  color: var(--color-white);
  letter-spacing: 0.02em;
  line-height: 1;
}

.trust-meter-unit {
  font-size: var(--fs-xl);
}

/* SVGリング */
.trust-meter-ring-wrap {
  position: relative;
}

.trust-meter-svg {
  width: 130px;
  height: 130px;
  display: block;
}

.trust-ring {
  transition: stroke-dashoffset 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* メーターラベル */
.trust-meter-label {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0.1em;
}

/* 注釈 */
.trust-footnote {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.45);
  text-align: center;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}

/* 引用テキスト */
.trust-quote {
  font-family: var(--font-accent);
  font-size: var(--fs-base);
  color: rgba(255, 255, 255, 0.75);
  text-align: center;
  letter-spacing: 0.05em;
  line-height: 1.8;
}

/* --- B列：動画 --- */

.trust-video-client {
  font-family: var(--font-accent);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--color-white);
  letter-spacing: 0.06em;
  margin-bottom: 10px;
  text-align: center;
}

.trust-video-desc {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0;
  line-height: 1.8;
  margin-bottom: 20px;
  text-align: center;
}

/* 16:9 動画プレースホルダー */
.trust-video-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-bottom: 20px;
}

.trust-video-placeholder {
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}

.trust-video-play {
  font-size: 44px;
  color: rgba(255, 255, 255, 0.35);
}

.trust-video-coming-soon-text {
  font-family: var(--font-accent);
  font-size: var(--fs-sm);
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.45);
}

.trust-video-quote {
  font-family: var(--font-accent);
  font-size: var(--fs-base);
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.05em;
  line-height: 1.9;
  text-align: center;
}

/* 円内数値（ゴールド・中央絶対配置） */
.trust-meter-inner-num {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
  line-height: 1;
}

.trust-meter-inner-value,
.trust-meter-inner-unit {
  font-family: var(--font-accent);
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--color-accent);
}

/* ==========================================================================
   フェードインアニメーション（IntersectionObserver制御）
   ========================================================================== */

.js-fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.js-fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ラインナップカード：staggered delay（最初の6枚） */
.lineup-card:nth-child(1) { transition-delay: 0s; }
.lineup-card:nth-child(2) { transition-delay: 0.06s; }
.lineup-card:nth-child(3) { transition-delay: 0.12s; }
.lineup-card:nth-child(4) { transition-delay: 0.18s; }
.lineup-card:nth-child(5) { transition-delay: 0.24s; }
.lineup-card:nth-child(6) { transition-delay: 0.3s; }

/* ==========================================================================
   メディアクエリ（モバイルファースト）
   ========================================================================== */

/* Tablet: 768px以上 */
@media (min-width: 768px) {
  .ws-section-title {
    font-size: var(--fs-3xl);
  }

  /* ラインナップ：2カラム */
  .lineup-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

/* PC: 1024px以上 */
@media (min-width: 1024px) {
  .workshop-philosophy {
    padding: var(--section-padding);
  }

  .workshop-trust {
    padding: var(--section-padding);
  }

  /* Trust：2カラム横並び */
  .trust-columns {
    flex-direction: row;
    align-items: flex-start;
    gap: 64px;
  }

  .trust-stats-col,
  .trust-video-col {
    flex: 1;
  }

  .trust-col-heading,
  .trust-footnote,
  .trust-quote,
  .trust-video-client,
  .trust-video-desc,
  .trust-video-quote {
    text-align: left;
  }

  .trust-meters {
    justify-content: flex-start;
  }

  /* コア3領域：PC 3カラム */
  .lineup-core-row {
    grid-template-columns: repeat(3, 1fr);
  }

  .workshop-lineup {
    padding: var(--section-padding);
  }

  .ws-section-header {
    margin-bottom: 64px;
  }

  /* 縦並びレイアウト（Promise中央→縦コネクター→SVG左 / テキスト右） */
  .ws-philosophy-columns {
    flex-direction: column;
    align-items: stretch; /* 子要素を全幅に引き伸ばす */
    gap: 0;
  }

  /* 約束ブロック：中央寄せ・幅に上限（align-selfで個別に中央寄せ） */
  .ws-promise-col {
    width: 100%;
    max-width: 640px;
    text-align: center;
    align-self: center;
  }

  /* 約束見出し：中央配置時はやや抑えめに */
  .ws-promise-col .ws-promise-heading {
    font-size: var(--fs-2xl);
  }

  /* 1つの約束ラベル：中央寄せ（— テキスト —） */
  .ws-promise-col .ws-promise-label {
    justify-content: center;
  }

  /* だからこそトランジション：縦線を中央に */
  .ws-promise-col .ws-transition::before {
    margin: 0 auto 24px;
  }

  /* 1つの約束リスト：幅制限を復元 */
  .ws-promise-col .ws-promise-list {
    max-width: 440px;
    margin: 0 auto;
  }

  /* 縦線コネクター：中央に配置・光が上→下へ流れる */
  .ws-col-connector {
    display: block;
    position: relative;
    width: 1px;
    height: 64px;
    background: rgba(212, 148, 58, 0.22);
    overflow: hidden;
    margin: 8px auto;
  }

  /* 光が上→下へ流れるシマー */
  .ws-col-connector::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(180deg,
      transparent,
      var(--color-accent),
      transparent
    );
    animation: ws-connector-flow 3s ease-in infinite;
  }

  /* キーワード列：全幅 */
  .ws-cycle-col {
    width: 100%;
    padding-left: 0;
  }

  /* SVG左50%・キャプション右50%：上のコネクター縦線と揃える */
  .ws-cycle-inner {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
  }

  /* 縦線区切り：PC時のみ表示 */
  .ws-cycle-divider {
    display: block;
    flex-shrink: 0;
    width: 1px;
    background: rgba(212, 148, 58, 0.35);
    align-self: stretch;
    margin: 0 64px; /* 左右64pxでSVG・キャプションを外側へ押し出す */
  }

  /* SVGを左半分に固定（縦線の左マージン分を引いて中央線を揃える） */
  .ws-cycle-wrapper {
    flex: 0 0 calc(50% - 64.5px);
    max-width: calc(50% - 64.5px);
  }

  /* キャプション：右半分に配置・上のコネクター線と border-left が揃う */
  .ws-cycle-captions {
    flex: 1;
    min-width: 0;
    gap: 32px;
    align-self: flex-start;
  }

  /* ラインナップ：3カラム */
  .lineup-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}