@charset "UTF-8";
/* =========================================================================
   経営者向け生成AI活用実践講座 LP スタイル
   - デザイントークンは :root に集約（色・余白は直書きせず変数を参照）
   - クラス接頭辞は aic-
   - 高さは固定せず padding で決める／スマホ最優先
   ========================================================================= */

/* ===== デザイントークン ===== */
:root{
  /* 色 */
  --aic-color-primary:#ff6b35;
  --aic-color-primary-dark:#e25320;
  --aic-color-primary-soft:#fff4ee;
  --aic-color-flame:#ff3b2e;            /* 情熱のレッド（差し色） */
  --aic-color-ember:#e4172b;            /* 深い赤（グラデ終点・強調） */
  --aic-color-ink:#15202b;
  --aic-color-text:#41505c;
  --aic-color-muted:#6b7a86;
  --aic-color-bg:#ffffff;
  --aic-color-bg-soft:#f7f9fa;
  --aic-color-border:#e8ebed;

  /* 情熱のグラデーション（FV・CTA帯で使用） */
  --aic-gradient-flame:linear-gradient(135deg,#ff8a3d 0%,#ff5a24 42%,var(--aic-color-ember) 100%);
  /* キーワードのマーカー強調 */
  --aic-marker:linear-gradient(transparent 58%,rgba(255,107,53,.32) 58%);

  /* フォント */
  --aic-font-base:"Noto Sans JP",system-ui,-apple-system,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  --aic-font-heading:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;

  /* 形状 */
  --aic-radius:12px;
  --aic-radius-lg:16px;
  --aic-shadow:0 10px 30px rgba(21,32,43,.06);
  --aic-shadow-hover:0 16px 40px rgba(21,32,43,.12);

  /* レイアウト */
  --aic-container:1080px;
  --aic-container-narrow:760px;
  --aic-pad-inline:clamp(1.25rem,5vw,2rem);
  --aic-pad-block:clamp(3rem,7vw,5rem);
}

/* ===== リセット / ベース ===== */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--aic-font-base);
  color:var(--aic-color-text);
  background:var(--aic-color-bg);
  line-height:1.8;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--aic-font-heading);color:var(--aic-color-ink);line-height:1.38;font-weight:700}
/* キーワードのマーカー強調（情熱の温度を上げる） */
.aic-mark{background:var(--aic-marker);padding:0 .08em;font-weight:inherit}
.aic-flame-text{color:#c81d25}  /* 白背景でAA(4.5:1)を満たす濃い赤 */

/* ===== 共通ラッパー / セクション ===== */
.aic-wrap{max-width:var(--aic-container);margin-inline:auto;padding-inline:var(--aic-pad-inline);width:100%}
.aic-wrap--narrow{max-width:var(--aic-container-narrow)}
.aic-section{padding-block:var(--aic-pad-block)}
.aic-section--soft{
  /* 淡い背景テクスチャ（暖色オーバーレイ。白地テクスチャ版と色味で差別化） */
  background:linear-gradient(rgba(255,245,238,.82),rgba(255,245,238,.82)),
             url("../images/section-bg.jpg") center/cover no-repeat;
}
/* 固定ヘッダー分、アンカー着地位置を下げて見出しが隠れないようにする */
[id]{scroll-margin-top:72px}

.aic-label{
  display:block;font-family:var(--aic-font-heading);font-weight:700;
  font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--aic-color-primary-dark);margin-bottom:.75rem;  /* コントラスト確保のため濃いめのオレンジ */
}
.aic-section-title{font-size:clamp(1.7rem,4.3vw,2.5rem);margin-bottom:.75rem;font-weight:900;letter-spacing:.01em}
.aic-section-lead{color:var(--aic-color-text);margin-bottom:2.5rem;max-width:44em}

/* ===== ボタン ===== */
.aic-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--aic-font-heading);font-weight:700;font-size:1rem;
  border-radius:999px;padding:.95em 2.1em;border:2px solid transparent;
  cursor:pointer;text-decoration:none;transition:background .2s,color .2s,transform .2s,box-shadow .2s;
  text-align:center;line-height:1.3;
}
.aic-btn-primary{background:var(--aic-gradient-flame);color:#fff;box-shadow:0 6px 16px rgba(226,23,43,.22)}
.aic-btn-primary:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 16px 36px rgba(226,23,43,.4)}
/* 小さいボタン（ヘッダーCTA等）は常時の影を外してすっきり見せる */
.aic-btn-sm{box-shadow:none}
.aic-btn-sm:hover{box-shadow:0 8px 20px rgba(226,23,43,.3)}
.aic-btn-ghost{background:#fff;color:var(--aic-color-ink);border-color:var(--aic-color-border)}
.aic-btn-ghost:hover{border-color:var(--aic-color-flame);color:var(--aic-color-flame);transform:translateY(-2px)}
.aic-btn-sm{padding:.6em 1.3em;font-size:.88rem}
.aic-btn-lg{padding:1.15em 2.8em;font-size:1.15rem}
/* FV（濃い背景）上の白ボタン */
.aic-btn-on-dark{background:#fff;color:var(--aic-color-ember)}
.aic-btn-on-dark:hover{background:#fff;color:var(--aic-color-ember);transform:translateY(-3px) scale(1.03);box-shadow:0 16px 40px rgba(0,0,0,.25)}
.aic-btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.aic-btn-outline-light:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff;transform:translateY(-2px)}

/* ===== ヘッダー ===== */
.aic-header{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--aic-color-border);
}
.aic-header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.7rem}
.aic-brand{font-family:var(--aic-font-heading);font-weight:500;font-size:.85rem;color:var(--aic-color-muted);text-decoration:none;line-height:1.3}
.aic-brand strong{display:block;font-weight:700;font-size:1.02rem;color:var(--aic-color-ink)}
/* ヘッダーの小さいCTAは単色オレンジ（グラデの赤端が角に出るのを防ぐ）。影も無し。 */
.aic-header-cta{flex:none;background:var(--aic-color-primary);background-image:none;box-shadow:none}
.aic-header-cta:hover{background:var(--aic-color-primary-dark);background-image:none;box-shadow:none;transform:translateY(-1px) scale(1.02)}

/* ===== 1. FV（情熱の濃いグラデ背景・白文字） ===== */
.aic-fv{
  position:relative;overflow:hidden;color:#fff;
  /* 背景画像（ぼかしオフィス）に炎グラデを半透明で重ねる＝写真の奥行き＋ブランド色＋白文字の可読性 */
  background:
    linear-gradient(135deg,rgba(255,138,61,.85) 0%,rgba(255,90,36,.9) 45%,rgba(228,23,43,.92) 100%),
    url("../images/fv-bg.jpg") center/cover no-repeat;
}
/* 奥行きを出す光のにじみ */
.aic-fv::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(60% 50% at 85% 8%,rgba(255,255,255,.28),transparent 60%),
    radial-gradient(55% 45% at 12% 100%,rgba(196,17,37,.55),transparent 60%),
    linear-gradient(90deg,rgba(120,10,20,.28),transparent 58%); /* 左側を少し締めて白文字の可読性を確保 */
}
@keyframes aic-flame-shift{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}
.aic-fv-inner{
  position:relative;z-index:1;padding-block:clamp(3.5rem,8vw,6rem);
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center;
}
.aic-fv-visual img{
  width:100%;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--aic-radius-lg);
  box-shadow:0 24px 60px rgba(120,10,20,.3);
  border:5px solid rgba(255,255,255,.85);
  background:#fff4ee;
}
.aic-fv-tag{
  display:inline-block;background:rgba(21,32,43,.28);color:#fff;
  border:1px solid rgba(255,255,255,.4);
  font-family:var(--aic-font-heading);font-weight:700;font-size:.82rem;
  padding:.45em 1.1em;border-radius:999px;backdrop-filter:blur(2px);
}
.aic-fv-title{
  font-size:clamp(2.05rem,6.4vw,4rem);margin:1.3rem 0 1.1rem;
  letter-spacing:.01em;font-weight:900;line-height:1.28;color:#fff;
  text-shadow:0 6px 24px rgba(120,10,20,.35);
  white-space:nowrap;  /* 「AIを知るだけで、」を途中で折り返させない（改行は <br> のみ） */
}
.aic-hl{
  color:#fff;position:relative;white-space:nowrap;
  background:linear-gradient(transparent 62%,rgba(255,255,255,.28) 62%);
}
.aic-fv-sub{font-size:1.1rem;max-width:35em;margin-bottom:1.2rem;color:#fff;text-shadow:0 1px 10px rgba(120,10,20,.4)}
.aic-fv-meta{
  list-style:none;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;
  color:#fff;font-weight:500;font-size:.98rem;margin:1.4rem 0 2rem;text-shadow:0 1px 8px rgba(120,10,20,.35);
}
.aic-fv-meta li{position:relative;padding-left:1.1em}
.aic-fv-meta li::before{content:"";position:absolute;left:0;top:.72em;width:7px;height:7px;border-radius:50%;background:#fff}
.aic-fv-actions{display:flex;flex-wrap:wrap;gap:.8rem}

/* ===== カード共通 ===== */
.aic-cards{display:grid;gap:1.25rem}
.aic-cards--3{grid-template-columns:repeat(3,1fr)}
.aic-card{
  background:#fff;border:1px solid var(--aic-color-border);border-radius:var(--aic-radius-lg);
  padding:1.75rem;box-shadow:var(--aic-shadow);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.aic-card:hover,.aic-voice:hover,.aic-step:hover,.aic-flow-step:hover{
  transform:translateY(-6px);box-shadow:var(--aic-shadow-hover);border-color:#f3d2c4;
}
.aic-voice,.aic-step,.aic-flow-step{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.aic-card-num{font-family:var(--aic-font-heading);font-weight:900;font-size:1.7rem;color:var(--aic-color-primary);line-height:1}
.aic-card-title{font-size:1.12rem;margin:.5rem 0 .55rem}
.aic-card-text{font-size:.95rem;color:var(--aic-color-text)}

/* 2. WHY NOW 締め */
.aic-why-close{margin-top:2rem;font-weight:700;color:var(--aic-color-ink);font-size:1.05rem}

/* ===== 3. 学べること（ステップ縦リスト） ===== */
.aic-steps{list-style:none;display:grid;gap:1rem}
.aic-step{
  display:grid;grid-template-columns:auto 1fr;gap:1.25rem;align-items:center;
  background:#fff;border:1px solid var(--aic-color-border);border-radius:var(--aic-radius-lg);
  padding:1.4rem 1.6rem;box-shadow:var(--aic-shadow);
}
.aic-step-badge{
  display:inline-flex;align-items:center;justify-content:center;
  width:64px;height:64px;border-radius:50%;
  background:var(--aic-color-primary-soft);color:var(--aic-color-primary-dark);
  font-family:var(--aic-font-heading);font-weight:900;font-size:1.15rem;flex:none;
}
.aic-step-title{font-size:1.1rem;margin-bottom:.2rem}
.aic-step-body p{font-size:.95rem;color:var(--aic-color-text)}

/* ===== 4. 講座内容の一例 ===== */
.aic-topic-no{
  display:inline-block;background:var(--aic-color-primary-soft);color:var(--aic-color-primary-dark);
  font-family:var(--aic-font-heading);font-weight:700;font-size:.8rem;
  padding:.3em .9em;border-radius:999px;margin-bottom:.9rem;
}
.aic-topic-q{font-weight:700;color:#c2410c;margin:.4rem 0 .6rem;font-size:1rem}  /* 白背景でAAを満たす濃いオレンジ */
.aic-topic-band{
  margin-top:1.75rem;text-align:center;background:var(--aic-color-primary-soft);
  color:var(--aic-color-ink);font-weight:700;border-radius:var(--aic-radius);
  padding:1rem 1.25rem;font-size:.98rem;
}

/* ===== 5. 受講者の声 ===== */
.aic-voice{
  background:#fff;border:1px solid var(--aic-color-border);border-radius:var(--aic-radius-lg);
  padding:1.75rem;box-shadow:var(--aic-shadow);display:flex;flex-direction:column;gap:1rem;
}
.aic-voice blockquote{font-size:1rem;color:var(--aic-color-ink);font-weight:500;line-height:1.85;position:relative;padding-top:1.6rem}
.aic-voice blockquote::before{content:"\201C";position:absolute;top:-.4rem;left:-.2rem;font-family:Georgia,serif;font-size:3rem;color:var(--aic-color-primary);opacity:.35;line-height:1}
.aic-voice figcaption{color:var(--aic-color-muted);font-size:.9rem;font-weight:700;margin-top:auto}
/* 実績（初期は非表示コメント内／将来用のスタイル） */
.aic-stats{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2rem;text-align:center}
.aic-stat-num{display:block;font-family:var(--aic-font-heading);font-weight:900;font-size:2.2rem;color:var(--aic-color-primary)}
.aic-stat-label{color:var(--aic-color-muted);font-size:.9rem}

/* ===== 6. 開催概要テーブル ===== */
.aic-howit{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:center}
.aic-howit-visual img{
  width:100%;aspect-ratio:16/9;object-fit:cover;
  border-radius:var(--aic-radius-lg);box-shadow:var(--aic-shadow);
}
.aic-spec{display:grid;gap:.6rem}
.aic-spec-row{
  display:grid;grid-template-columns:150px 1fr;gap:1rem;align-items:center;
  background:#fff;border:1px solid var(--aic-color-border);border-radius:var(--aic-radius);padding:.95rem 1.3rem;
}
.aic-spec-row dt{font-family:var(--aic-font-heading);font-weight:700;color:var(--aic-color-ink);font-size:.95rem}
.aic-spec-row dd{font-weight:700;color:var(--aic-color-ink)}

/* ===== 7. 学びから行動へ ===== */
.aic-flow{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;position:relative}
.aic-flow-step{
  background:#fff;border:1px solid var(--aic-color-border);border-radius:var(--aic-radius-lg);
  padding:1.6rem;box-shadow:var(--aic-shadow);position:relative;
}
.aic-flow-num{font-family:var(--aic-font-heading);font-weight:900;font-size:1.5rem;color:var(--aic-color-primary)}
.aic-flow-title{font-size:1.1rem;margin:.3rem 0 .4rem}
.aic-flow-step p{font-size:.95rem;color:var(--aic-color-text)}
.aic-flow-band{
  margin-top:1.75rem;text-align:center;background:var(--aic-color-ink);color:#fff;
  border-radius:var(--aic-radius);padding:1.1rem 1.25rem;font-weight:700;font-size:.98rem;
}

/* ===== 8. FAQ ===== */
.aic-faq{display:grid;gap:.8rem}
.aic-faq-item{background:#fff;border:1px solid var(--aic-color-border);border-radius:var(--aic-radius);overflow:hidden}
.aic-faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  background:none;border:0;cursor:pointer;text-align:left;
  font-family:var(--aic-font-heading);font-weight:700;color:var(--aic-color-ink);font-size:1.02rem;
  padding:1.2rem 1.4rem;line-height:1.5;
}
.aic-faq-icon{position:relative;width:16px;height:16px;flex:none}
.aic-faq-icon::before,.aic-faq-icon::after{
  content:"";position:absolute;background:var(--aic-color-primary);border-radius:2px;transition:transform .25s;
}
.aic-faq-icon::before{top:7px;left:0;width:16px;height:2px}
.aic-faq-icon::after{top:0;left:7px;width:2px;height:16px}
.aic-faq-q[aria-expanded="true"] .aic-faq-icon::after{transform:scaleY(0)}
.aic-faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.aic-faq-a p{padding:0 1.4rem 1.3rem;color:var(--aic-color-text);font-size:.97rem}

/* ===== 9. クロージングCTA（情熱グラデ・白文字） ===== */
.aic-cta{
  position:relative;overflow:hidden;color:#fff;text-align:center;
  background:var(--aic-gradient-flame);
  padding-block:clamp(3.5rem,8vw,6rem);
}
.aic-cta::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(55% 60% at 85% 10%,rgba(255,255,255,.22),transparent 60%);
}
.aic-cta-inner{position:relative;z-index:1;max-width:var(--aic-container-narrow)}
.aic-cta-title{font-size:clamp(1.8rem,5vw,2.7rem);margin-bottom:.9rem;color:#fff;font-weight:900;text-shadow:0 6px 24px rgba(120,10,20,.3)}
.aic-cta-lead{color:rgba(255,255,255,.95);margin-bottom:2rem}
.aic-cta-note{margin-top:1.4rem;color:rgba(255,255,255,.85);font-size:.9rem}
.aic-form-embed{margin-top:2rem}
.aic-form-embed iframe{border-radius:var(--aic-radius);border:1px solid var(--aic-color-border);background:#fff}

/* ===== フッター ===== */
.aic-footer{background:var(--aic-color-ink);color:#fff;padding-block:2.5rem}
.aic-footer-inner{display:grid;gap:.5rem}
.aic-footer-brand{font-family:var(--aic-font-heading);font-weight:700;font-size:1.05rem}
.aic-footer-nav a{color:#fff;opacity:.85;text-decoration:underline;font-size:.9rem}
.aic-footer-nav a:hover{opacity:1}
.aic-footer-copy{color:rgba(255,255,255,.7);font-size:.85rem}

/* ===== 追従CTA ===== */
.aic-sticky-cta{
  position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:60;
  display:flex;flex-direction:column;align-items:center;gap:.1rem;
  background:var(--aic-color-primary);color:#fff;text-decoration:none;
  padding:.85rem 1.6rem;border-radius:999px;box-shadow:0 12px 30px rgba(226,83,32,.4);
  font-family:var(--aic-font-heading);line-height:1.3;
  opacity:0;visibility:hidden;transform:translateY(16px);transition:opacity .3s,transform .3s,visibility .3s,background .2s;
}
.aic-sticky-cta.is-visible{opacity:1;visibility:visible;transform:translateY(0);animation:aic-cta-pulse 2.4s ease-in-out infinite}
.aic-sticky-cta:hover{background:var(--aic-color-primary-dark);animation-play-state:paused;transform:translateY(-2px) scale(1.04)}
@keyframes aic-cta-pulse{
  0%,100%{box-shadow:0 12px 30px rgba(226,83,32,.4)}
  50%{box-shadow:0 12px 40px rgba(226,23,43,.65)}
}
.aic-sticky-cta-sub{font-size:.72rem;font-weight:500;opacity:.9}
.aic-sticky-cta-main{font-size:.98rem;font-weight:700}

/* ===== スクロール連動フェードイン ===== */
.aic-reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.aic-reveal.is-in{opacity:1;transform:translateY(0)}

/* =========================================================================
   画像リッチ化（写真カード・アバター・バナー・背景テクスチャ）
   ========================================================================= */
/* トピックカード上部の写真（カード幅いっぱい・上角丸） */
.aic-card--photo{padding-top:0;overflow:hidden}
.aic-card-img{display:block;width:calc(100% + 3.5rem);margin:0 -1.75rem 1.4rem;aspect-ratio:4/3;object-fit:cover}

/* 受講者アバター */
.aic-voice-cap{display:flex;align-items:center;gap:.7rem;margin-top:auto}
.aic-voice-avatar{width:46px;height:46px;border-radius:50%;flex:none;box-shadow:0 2px 8px rgba(21,32,43,.12)}
.aic-voice-cap span{color:var(--aic-color-muted);font-size:.9rem;font-weight:700}

/* 「学びから行動へ」バナー画像 */
.aic-action-visual{margin-bottom:2.2rem}
.aic-action-visual img{width:100%;aspect-ratio:2.5/1;object-fit:cover;border-radius:var(--aic-radius-lg);box-shadow:var(--aic-shadow)}

/* セクション背景テクスチャ（白地の代わりに淡い画像。白オーバーレイで可読性確保） */
.aic-section--texture{
  background:linear-gradient(rgba(255,255,255,.76),rgba(255,255,255,.76)),
             url("../images/section-bg.jpg") center/cover no-repeat;
}

/* =========================================================================
   レスポンシブ（基準=PC、下位を max-width で上書き）
   ========================================================================= */
@media (max-width:768px){
  body{font-size:16px}
  .aic-fv-inner{grid-template-columns:1fr}
  .aic-fv-visual{max-width:460px;width:100%;margin-inline:auto}
  .aic-howit{grid-template-columns:1fr}
  .aic-cards--3,.aic-flow{grid-template-columns:1fr}
  .aic-spec-row{grid-template-columns:120px 1fr}
  .aic-brand{font-size:.72rem}
  .aic-brand strong{font-size:.9rem}
  .aic-fv-actions .aic-btn{width:100%}
  .aic-stats{grid-template-columns:repeat(3,1fr);gap:.5rem}
}

@media (max-width:480px){
  .aic-step{grid-template-columns:1fr;text-align:left;gap:.8rem}
  .aic-step-badge{width:52px;height:52px;font-size:1rem}
  .aic-spec-row{grid-template-columns:1fr;gap:.2rem}
  .aic-spec-row dt{font-size:.82rem;color:var(--aic-color-muted)}
  .aic-sticky-cta{left:clamp(1rem,4vw,2rem);align-items:center}
}

/* ===== アニメーション抑制設定 ===== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .aic-reveal{opacity:1;transform:none;transition:none}
  .aic-sticky-cta{transition:opacity .2s}
  .aic-fv,.aic-sticky-cta.is-visible{animation:none !important}
  *{transition-duration:.01ms !important}
}