@charset "UTF-8";
/* ==========================================================
   かぶサポ セミナーLP
   デザイン：go100.jp セミナーページの見出し・本文・記事レイアウトを踏襲
   カラー：kabu-sapo.com 本体サイト（assets/css/main.css）準拠
   - Primary Blue : #0366b3（go100のオレンジの役割を置換）
   - Text         : #444850 / 見出し #171717（go100準拠のグレースケール）
   ========================================================== */

:root {
  --color-primary: #0366b3;
  --color-pale-primary: rgba(3, 102, 179, .5);
  --color-grayscale-1: #171717;
  --color-grayscale-2: #444850;
  --color-grayscale-3: #889199;
  --color-grayscale-4: #c4cfd6;
  --color-pale-grayscale-1: rgba(23, 23, 23, .5);
  --color-base-1: #f7f6f5;
  --color-base-blue: #eef7fe;
  --color-white: #fff;
  --radius-button: 45px;
  --radius-image: 10px;
  --shadow-apply: 2px 2px 15px 2px rgba(110, 146, 167, .2);
  /* 見出しアイコン（go100と同配置・かぶサポブルーで作成） */
  --icon-light: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"%3E%3Cdefs%3E%3ClinearGradient id="g" x1="0" y1="0" x2="1" y2="1"%3E%3Cstop offset="0" stop-color="%23024e89"/%3E%3Cstop offset=".55" stop-color="%230366b3"/%3E%3Cstop offset="1" stop-color="%232b8ed0"/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill="url(%23g)" d="M16 2a9.5 9.5 0 0 0-5.3 17.4c.9.6 1.8 1.8 1.8 2.8v.3h7v-.3c0-1 .9-2.2 1.8-2.8A9.5 9.5 0 0 0 16 2zm-3.5 22.5h7v2.2h-7zM14 28.7h4L16.9 30h-1.8z"/%3E%3C/svg%3E');
  --icon-book: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"%3E%3Cdefs%3E%3ClinearGradient id="g" x1="0" y1="0" x2="1" y2="1"%3E%3Cstop offset="0" stop-color="%23024e89"/%3E%3Cstop offset=".55" stop-color="%230366b3"/%3E%3Cstop offset="1" stop-color="%232b8ed0"/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill="url(%23g)" d="M16 6.2C13.2 4.3 8.4 3.7 4 4.1v20.4c4.4-.4 9.2.2 12 2.1 2.8-1.9 7.6-2.5 12-2.1V4.1c-4.4-.4-9.2.2-12 2.1zm-1.5 2.5v14.6c-2.4-1-5.4-1.4-8-1.4V6.6c2.9-.1 6 .5 8 2.1zm11 13.2c-2.6 0-5.6.4-8 1.4V8.7c2-1.6 5.1-2.2 8-2.1z"/%3E%3C/svg%3E');
  --icon-speak: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"%3E%3Cdefs%3E%3ClinearGradient id="g" x1="0" y1="0" x2="1" y2="1"%3E%3Cstop offset="0" stop-color="%23024e89"/%3E%3Cstop offset=".55" stop-color="%230366b3"/%3E%3Cstop offset="1" stop-color="%232b8ed0"/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill="url(%23g)" d="M16 4C8.8 4 3 8.7 3 14.5c0 3.4 2 6.4 5 8.3L6.6 28l6.3-2.7c1 .2 2 .3 3.1.3 7.2 0 13-4.7 13-10.5S23.2 4 16 4z"/%3E%3C/svg%3E');
  --icon-clock: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"%3E%3Cdefs%3E%3ClinearGradient id="g" x1="0" y1="0" x2="1" y2="1"%3E%3Cstop offset="0" stop-color="%23024e89"/%3E%3Cstop offset=".55" stop-color="%230366b3"/%3E%3Cstop offset="1" stop-color="%232b8ed0"/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill="url(%23g)" d="M16 3a13 13 0 1 0 0 26 13 13 0 0 0 0-26zm0 2.8a10.2 10.2 0 1 1 0 20.4 10.2 10.2 0 0 1 0-20.4zM14.7 9v8l6.2 4.1 1.5-2.3-4.9-3.3V9z"/%3E%3C/svg%3E');
  --icon-program: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"%3E%3Cdefs%3E%3ClinearGradient id="g" x1="0" y1="0" x2="1" y2="1"%3E%3Cstop offset="0" stop-color="%23024e89"/%3E%3Cstop offset=".55" stop-color="%230366b3"/%3E%3Cstop offset="1" stop-color="%232b8ed0"/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill="url(%23g)" d="M10 2v3H6.5A2.5 2.5 0 0 0 4 7.5V27a2.5 2.5 0 0 0 2.5 2.5h19A2.5 2.5 0 0 0 28 27V7.5A2.5 2.5 0 0 0 25.5 5H22V2h-3v3h-6V2h-3zM7 12h18v14.5H7V12zm2.5 3v3h3v-3h-3zm5.5 0v3h3v-3h-3zm5.5 0v3h3v-3h-3zM9.5 20.5v3h3v-3h-3zm5.5 0v3h3v-3h-3z"/%3E%3C/svg%3E');
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
img { max-width: 100%; height: auto; vertical-align: bottom; }

body {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: .04em;
  color: var(--color-grayscale-2);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--color-primary); transition: color .2s, opacity .2s; }
a:hover { color: #2b8ed0; }
.sp-only { display: none; }

/* ---------- header ---------- */
.header {
  background: var(--color-white);
  border-bottom: 1px solid #e9ecf1;
}
.header__inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header__logo a { display: inline-flex; align-items: center; }
.header__logo svg { height: 42px; width: auto; }
.header__org { font-size: 13px; color: var(--color-grayscale-3); }

/* ---------- article layout（go100：1カラム記事型） ---------- */
.main { padding: 40px 24px 96px; }
.article { max-width: 760px; margin: 0 auto; }

/* タイトル（.article__heading 踏襲：24〜26px / lh1.5） */
.article__heading {
  font-size: clamp(24px, 1.3567rem + .2981vw, 26px);
  line-height: 1.5;
  overflow-wrap: anywhere;
  color: var(--color-grayscale-1);
}

/* メインビジュアル */
.article__image { margin-top: 24px; }
.article__image img {
  display: block;
  width: 100%;
  border-radius: var(--radius-image);
}
/* ラベル＋開催日（.article__meta 踏襲） */
.article__meta {
  margin-top: 32px;
  display: flex;
  flex-direction: row;
  column-gap: 16px;
  justify-content: space-between;
  align-items: center;
}
.labels { display: flex; flex-wrap: wrap; gap: 6px; }
.seminar-label {
  display: inline-block;
  padding: 6px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.8;
  white-space: nowrap;
}
.seminar-label.has-blue-color {
  color: var(--color-primary);
  border: 1px solid var(--color-pale-primary);
}

/* 日付（Outfit・丸囲み曜日：go100踏襲） */
.article__dates {
  display: flex;
  column-gap: 20px;
  align-items: center;
}
.seminar-date {
  display: inline-flex;
  column-gap: 6px;
  align-items: center;
  font-family: Outfit, sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 1;
  color: var(--color-grayscale-1);
  white-space: nowrap;
}
.seminar-date.is-regular { font-size: 24px; line-height: 1.3; }
.seminar-week {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  aspect-ratio: 1;
  border: 1px solid var(--color-pale-grayscale-1);
  border-radius: 50%;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 20px;
  font-weight: 700;
  /* 文字を丸の上下左右中央に（bodyのletter-spacing/line-heightによる左下ズレを打ち消す） */
  letter-spacing: 0;
  line-height: 1;
}
.seminar-date.is-regular .seminar-week { width: 30px; font-size: 16px; }
.article__time { margin-top: 4px; text-align: right; }
.seminar-time {
  font-family: Outfit, "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.5;
  color: var(--color-grayscale-3);
}

/* こんな方にオススメ（浮き出しラベル付きカード型） */
.seminar-recommend-for {
  position: relative;
  margin-top: 44px;
  padding: 30px 32px 24px;
  background: linear-gradient(135deg, var(--color-base-blue) 0%, #fff 85%);
  border: 1px solid rgba(3, 102, 179, .22);
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(3, 102, 179, .08);
}
.seminar-recommend-for__title {
  position: absolute;
  top: 0;
  left: 24px;
  translate: 0 -50%;
  display: inline-flex;
  align-items: center;
  column-gap: 10px;
  background: linear-gradient(135deg, #024e89 0%, var(--color-primary) 55%, #2b8ed0 100%);
  color: var(--color-white);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .12em;
  border-radius: 40px;
  padding: 10px 22px;
  box-shadow: 0 2px 8px rgba(3, 102, 179, .3);
  white-space: nowrap;
}
.seminar-recommend-for__title::before {
  content: "";
  width: 12px;
  height: 7px;
  border-left: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: rotate(-45deg) translateY(-2px);
}
.seminar-recommend-for__content { text-align: left; font-weight: 500; }

/* ---------- 本文（.article__seminar__inner 踏襲） ---------- */
.article__seminar__inner { margin-top: 64px; }
.article__seminar__inner p {
  font-size: 14px;
  margin-bottom: 1.8em;
  overflow-wrap: anywhere;
}
.article__seminar__inner ul,
.article__seminar__inner ol {
  font-size: 14px;
  margin-left: 1.5em;
  margin-bottom: 1.8em;
  overflow-wrap: anywhere;
}
.article__seminar__inner li { margin-bottom: .4em; }

/* h2（下線見出し：go100踏襲） */
.article__seminar__inner h2 {
  margin-top: 64px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-grayscale-4);
  font-size: clamp(20px, .9635rem + .5961vw, 24px);
  line-height: 1.5;
  overflow-wrap: anywhere;
  color: var(--color-grayscale-1);
}

/* アイコン付き見出し（.art--seminar__cont__hdg 踏襲／アイコンは見出し文字と上下中央揃え） */
.seminar-hdg {
  display: flex;
  align-items: center;
  column-gap: 8px;
}
.seminar-hdg::before {
  content: "";
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.hdg-ico-light::before { background-image: var(--icon-light); }
.hdg-ico-book::before { background-image: var(--icon-book); }
.hdg-ico-speak::before { background-image: var(--icon-speak); }
.hdg-ico-clock::before { background-image: var(--icon-clock); }
.hdg-ico-program::before { background-image: var(--icon-program); }

/* ---------- 当日のスケジュール ---------- */
.program { margin-top: 24px; }
.program__item {
  padding: 20px 24px;
  border-radius: 8px;
  background-color: var(--color-base-blue);
}
.program__item + .program__item { margin-top: 16px; }
.article__seminar__inner p.program__ttl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 12px;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-grayscale-1);
  margin-bottom: .8em;
}
.program__part {
  display: inline-block;
  flex-shrink: 0;
  padding: 2px 12px;
  border-radius: 4px;
  background: linear-gradient(135deg, #024e89 0%, var(--color-primary) 55%, #2b8ed0 100%);
  color: var(--color-white);
  font-size: 13px;
  line-height: 1.7;
  white-space: nowrap;
}
.article__seminar__inner p.program__desc { margin-bottom: 0; }

/* その他詳細の項目ラベル（.art--seminar__cont__other-info-ttl 踏襲／オレンジ→かぶサポブルー） */
.article__seminar__inner p.other-info-ttl {
  font-weight: 700;
  font-size: 16px;
  color: var(--color-primary);
  margin-bottom: 0;
}

/* ラベルと内容を1行で表示する項目 */
.article__seminar__inner p.other-info-line {
  font-size: 14px;
  margin-bottom: 1.8em;
}
.other-info-line .other-info-label {
  font-weight: 700;
  font-size: 16px;
  color: var(--color-primary);
}

/* 開催日時・場所（行頭記号なし／第1回・第2回の間隔を広めに） */
.article__seminar__inner ul.venue-list {
  list-style: none;
  margin-left: 0;
}
.article__seminar__inner ul.venue-list > li { margin-bottom: 0; }
.article__seminar__inner ul.venue-list > li + li { margin-top: 1.6em; }

/* 登壇者（丸型写真：go100踏襲） */
.speaker { margin-top: 24px; }
.speaker__img-wrapper {
  overflow: hidden;
  display: inline-block;
  position: relative;
  border-radius: 50%;
  width: 150px;
  aspect-ratio: 1;
  margin-bottom: 1em;
  border: 1px solid var(--color-base-1);
}
.speaker__img-wrapper img {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  min-width: 150px;
  min-height: 150px;
  object-fit: cover;
}
.article__seminar__inner p.speaker__name-prefix {
  color: var(--color-grayscale-3);
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 0;
}
.article__seminar__inner p.speaker__name {
  font-weight: 700;
  font-size: 15px;
  color: var(--color-grayscale-1);
  margin-bottom: 1em;
}

/* ---------- ボタン（.button.is-primary 踏襲） ---------- */
.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--color-pale-grayscale-1);
  border-radius: var(--radius-button);
  padding: 16px 40px;
  font-weight: 700;
  font-size: 15px;
  color: var(--color-grayscale-1);
  text-align: center;
  max-width: 100%;
  white-space: nowrap;
  line-height: 1.8;
  cursor: pointer;
  text-decoration: none;
  transition: color .3s, background-color .3s, border-color .3s;
}
.button.is-primary {
  border-color: var(--color-primary);
  background: linear-gradient(135deg, #024e89 0%, var(--color-primary) 55%, #2b8ed0 100%);
  color: var(--color-white);
  min-width: min(360px, 100%);
  padding-inline: 56px;
  column-gap: 12px;
}
.button.is-primary::after {
  /* 矢印アイコン（currentColorなのでホバー時の色反転にも追従） */
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}
.button.is-primary:hover {
  background: transparent;
  color: var(--color-primary);
}
.inline-cta { text-align: center; margin: 40px 0 8px; }

/* ---------- 申込ボックス（.seminar-apply 踏襲） ---------- */
.seminar-apply {
  margin-top: 64px;
  padding-top: 10px; /* 上部の色帯 */
  box-shadow: var(--shadow-apply);
  border-radius: 10px;
  background: linear-gradient(90deg, #024e89 0%, var(--color-primary) 55%, #2b8ed0 100%);
}
.seminar-apply__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  padding: 40px clamp(20px, -.1826rem + 2.9806vw, 40px);
  background-color: var(--color-white);
}
.seminar-apply__text1 {
  font-weight: 700;
  font-size: 24px;
  color: var(--color-grayscale-2);
}
.seminar-apply__title {
  margin-top: 8px;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  color: var(--color-grayscale-1);
}
.seminar-apply__datetime {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: 8px;
  margin-top: 16px;
  line-height: 1.4;
}
.seminar-apply__datetime p {
  display: flex;
  align-items: center;
  column-gap: 12px;
}
.seminar-apply__datetime .seminar-time { font-size: 15px; line-height: 1.4; }
.seminar-apply__action { margin-top: 24px; }

/* ---------- footer ---------- */
.footer {
  background: var(--color-grayscale-2);
  color: var(--color-white);
  padding: 40px 24px 48px;
  text-align: center;
}
.footer__logo { margin-bottom: 20px; }
.footer__logo a {
  display: inline-block;
  line-height: 0;
  transition: opacity .2s;
}
.footer__logo a:hover { opacity: .8; }
.footer__logo svg { height: 40px; width: auto; }
.footer__links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 24px;
  margin-bottom: 20px;
}
.footer__links a { color: var(--color-white); font-size: 13px; text-decoration: none; }
.footer__links a:hover { text-decoration: underline; }
.footer__copy { font-size: 12px; color: rgba(255, 255, 255, .6); }

/* ---------- SP固定CTA ---------- */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, .15);
  padding: 10px 16px;
  text-align: center;
}
.sticky-cta__btn {
  display: block;
  background: linear-gradient(135deg, #024e89 0%, var(--color-primary) 55%, #2b8ed0 100%);
  border: 1px solid var(--color-primary);
  color: var(--color-white);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--radius-button);
  padding: 12px 10px;
}

/* ==========================================================
   SP（〜768px）
   ========================================================== */
@media (max-width: 768px) {
  .sp-only { display: block; }

  .header__inner { padding: 12px 16px; }
  .header__logo svg { height: 34px; }
  .header__org { font-size: 11px; }

  .main { padding: 24px 16px 80px; }

  .article__heading { font-size: 22px; }

  .article__meta {
    flex-direction: column;
    align-items: flex-start;
    row-gap: 12px;
    margin-top: 24px;
  }
  .seminar-label { font-size: 13px; padding: 5px 6px; }
  .article__dates { column-gap: 14px; }
  .seminar-date { font-size: clamp(20px, .2958rem + 4.0712vw, 36px); }
  .seminar-week {
    width: clamp(22px, .5401rem + 3.5623vw, 36px);
    font-size: clamp(12px, .2729rem + 2.0356vw, 20px);
  }
  .article__time { text-align: left; margin-top: 8px; }
  .seminar-time { font-size: clamp(15px, .6393rem + 1.2723vw, 20px); }

  .seminar-recommend-for { padding: 28px 18px 20px; }
  .seminar-recommend-for__title {
    left: 16px;
    font-size: 13px;
    padding: 9px 18px;
  }

  .article__seminar__inner { margin-top: 48px; }
  .article__seminar__inner h2 { margin-top: 40px; padding-bottom: 8px; }
  .seminar-hdg::before {
    width: 24px;
    height: 24px;
  }
  .program__item { padding: 16px 18px; }
  .article__seminar__inner p.program__ttl { font-size: 15px; }
  /* 幅が狭く1行に収まらないため、ラベルの「：」の後で改行する（内容が短い .is-inline は1行のまま） */
  .other-info-line .other-info-label {
    display: block;
    font-size: 15px;
  }
  .other-info-line.is-inline .other-info-label { display: inline; }

  .seminar-apply { margin-top: 40px; }
  .seminar-apply__text1 { font-size: 16px; }
  .seminar-apply__datetime p { flex-direction: column; row-gap: 2px; }
  .button { padding: 14px 32px; white-space: normal; }
  .button.is-primary { min-width: 100%; padding-inline: 32px; }

  .footer { padding: 32px 16px 96px; } /* SP固定CTAと重ならない余白 */
}