body {
      margin: 0;
      line-height: normal;
      overflow-x: hidden;
}

/* 色の定義 */
:root {
      --primary-color: #0d996f;
      --accent-color: #ec981a;
      --stripe-color: #f4f07a;
      /* --アラート */
      --alert-color: #d54d4d;
      --bg-color: #FFF;
      --text-color: #222;
      --primary-bg-color: #0EA25B;
      --secondary-bg-color: #FFFEE1;
      --tertiary-bg-color: #0FBC74;
}

/* ヘッダー */
.header {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding: 0 1vw;
      background-color: var(--bg-color);
      position: relative;
      top: 0;
      z-index: 100;
      margin: 1vw;
}
.header__logo {
      position: static;
      width: 25vw;
}
.button6 {
      display: flex;
      align-items: center;
      padding: 0vw 1vw;
      gap: 2vw;
}
.button7 {
      width: 15vw;
      white-space: nowrap;
      display: flex;
      align-items: center;
}
.button8 {
      width: 15vw;
      display: flex;
      align-items: center;
      justify-content: center;
}
.button8 img {
      display: block;
}
.nav-btn {
      font-size: 1vw;
}


/* メインコンテンツ */
.slide-169-1 {
      font-size: 3.333vw;
}
.main-contents {
      width: 100%;
}


/* コンテンツ背景（各セクション内のコンポーネントスコープ絶対配置）*/
/* bg-icon6: .top 内 — 白楕円アーチ(.top → .syoukai の境界遷移) */
.bg-icon6 {
      position: absolute;
      top: 35vw;
      left: 50%;
      transform: translateX(-50%);
      width: 100vw;
      height: 88.021vw;
      background-color: var(--bg-color);
      clip-path: ellipse(100% 88% at 50% 100%);
}
/* bg-icon4: .plan 内 — 薄い緑の斜め三角（bg-icon3 の下に重ねる） */
.bg-icon4 {
      position: absolute;
      top: 1vw;
      left: 50%;
      transform: translateX(-50%);
      width: 100vw;
      height: 100%;
      background-color: var(--tertiary-bg-color);
      clip-path: polygon(
            0 0,
            100% 10%,
            100% 100%,
            0 100%
            );
      z-index: -2;
}
/* bg-icon3: .plan 内 — 濃い緑の斜め三角（section 背景下半） */
.bg-icon3 {
      position: absolute;
      top: 20vw;
      left: 50%;
      transform: translateX(-50%);
      width: 100vw;
      height: 85%;
      background-color: var(--primary-bg-color);
      clip-path: polygon(
            100% 0%,
            0 10%,
            0 100%,
            100% 100%
            );
      z-index: -1;
}
/* bg-icon2: .plan 内 — 緑矩形（section 底部の追加背景） */
.bg-icon2 {
      position: absolute;
      bottom: -5vw;
      left: 50%;
      transform: translateX(-50%);
      width: 100vw;
      height: 10vw;
      background-color: var(--primary-bg-color);
      z-index: -2;
}
/* bg-icon: .past-webinar 内 — 黄色の section 背景 */
.bg-icon {
      position: absolute;
      top: -5vw;
      left: 50%;
      transform: translateX(-50%);
      width: 100vw;
      height: calc(100% + 10vw);
      background-color: var(--secondary-bg-color);
      z-index: -2;
}

/* トップセクション */
.top {
      width: 100%;
      padding: 4.531vw 4.531vw 15vw 4.531vw;
      display: flex;
      flex-direction: column;
      background-color: var(--secondary-bg-color);
      align-items: center;
}
.top-title {
      font-weight: 900;
      color: var(--primary-color);
      /* 白の縁取り */
      -webkit-text-stroke: 0.125vw var(--bg-color);

      /* ただしこれだけだと白だけなので、
      緑はfilterのdrop-shadowで外側に追加 */
      filter: drop-shadow(0.125vw 0.125vw 0vw var(--primary-color))
            drop-shadow(0.125vw 0.125vw 0vw var(--primary-color))
            drop-shadow(0.125vw 0.125vw 0vw var(--primary-color));

      position: relative;
      z-index: 1;
}
.first-line,
.second-line {
      white-space: nowrap;
      display: flex;
      align-items: baseline;
      font-size: larger;
}
.span {
      font-size: 2.708vw;
}
.top-description {
      font-size: 1.771vw;
      line-height: 2.812vw;
      display: flex;
      margin-top: 5vw;
}
.top-plan-row {
      display: flex;
      align-items: center;
      gap: 15vw;
      margin-top: 3vw;
      width: 100%;
      justify-content: center;
}
.top-plan {
      border-radius: 2.604vw;
      background-color: var(--accent-color);
      width: 22.396vw;
      height: 4.688vw;
      display: flex;
      align-items: center;
      padding: 0.521vw 1.562vw;
      cursor: pointer;
      justify-content: center;
      font-size: 1.562vw;
}
.top-plan-btn {
      white-space: nowrap;
      position: relative;
      margin: auto;
}
.top-plan-icon {
      width: 12.24vw;
      flex-shrink: 0;
}
.fa-solid, .fa-angle-right {
      width: 2vw;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
}

.group-parent {
      position: absolute; /* .main-contents 相対。underline-stripe の装飾コンテナなのでコンポーネントスコープ絶対配置を維持 */
      top: 4.25%;
      left: 21.354vw;
}
.rectangle-parent {
}
/* 黄色アンダーラインストライプ共通 */
.underline-stripe {
      position: absolute;
      border-radius: 2px;
      background-color: var(--stripe-color);
      width: var(--stripe-width);
      height: 1.172vw;
      transform: rotate(var(--stripe-rotate));
}
.underline-stripe--first {
      top: 0.905vw;
      left: 0;
}
.underline-stripe--second {
      top: 1.744vw;
      left: var(--stripe-left);
}
.rectangle-group {
      position: absolute;
      left: 32.135vw;
}

/* 紹介セクション */
.syoukai {
      font-size: 2.5vw;
      color: var(--primary-color);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4vw;
      position: relative;
      z-index: 1;
}
.syoukai-title {
      border-bottom: solid 2px var(--primary-color);
}
.syoukai-sub-title {
      text-align: center;
}
.syoukai-description {
      font-size: 1.25vw;
      text-align: center;
      color: var(--text-color);
      width: 100%;
      white-space: nowrap;
}
/* syoukai内 quo */
.syoukai__quo-wrapper {
      width: 44.844vw;
}
/* before_login.css の px/rem 値を vw に上書き */
.syoukai__quo-wrapper .quo__outer {
      padding: 0;
}
.syoukai__quo-wrapper .quo {
      max-width: 100%;
      padding: 3.073vw 2.969vw 2.292vw 2.188vw;
      gap: 1.517vw;
}
.syoukai__quo-wrapper .quo::after {
      width: 1.885vw;
      height: 1.927vw;
}
.syoukai__quo-wrapper .quo__illust {
      width: 10.202vw; /* 195.88px */
      flex-shrink: 0;
}
.syoukai__quo-wrapper .quo__illust img {
      width: 100%;
      height: auto;
}
.syoukai__quo-wrapper .quo__cont {
      width: calc(100% - 12vw);
      color: var(--text-color);
}
.syoukai__quo-wrapper .quo__ttl {
      font-size: 1.5vw;
      margin-bottom: 1.146vw;
}
.syoukai__quo-wrapper .quo__txt {
      font-size: 0.9vw;
      gap: 0.417vw;
}
.syoukai__points {
      display: flex;
      gap: 3vw;
      width: 60vw;
      font-weight: 700;
}
.syoukai__point {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.5vw;
      color: var(--text-color);
}
.syoukai__point__img {
}
.syoukai__point__ttl {
      font-size: 2vw;
      font-weight: 800;
      color: var(--primary-color);
}
.syoukai__point__txt {
      font-size: 0.75vw;
      line-height: 1.8;
      text-align: left;
}



/* ===== 協賛プランセクション ===== */
.plan {
      padding-top: 10vw;
      padding-bottom: 4vw;
      font-size: 1.25vw;
      color: var(--bg-color);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3vw;
      position: relative; /* bg-icon3/4/2 の containing block */
}
/* ヘッダー（タイトル・説明） */
.plan__header {
      position: relative;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1vw;
      padding-top: 6vw;
}
.plan__illust {
      position: absolute;
      top: -1vw;
      left: 30vw;
      width: 8.802vw;
}
.plan__title {
      font-size: 2.5vw;
}
.plan__desc {
      text-align: center;
      line-height: 2.083vw;
      font-weight: 700;
      margin: 0;
}
/* プランカード群 */
.plan__cards {
      display: flex;
      gap: 0.833vw;
      color: var(--text-color);
}
/* プランカード共通 */
.plan-card {
      width: 18.75vw;
      border-radius: 1.25vw;
      background-color: var(--bg-color);
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 2.083vw 0.833vw;
      position: relative;
      gap: 3px;
}
/* サークル（背景 + プラン名） */
.plan-card__circle {
      width: 10.417vw;
      height: 10.417vw;
      position: relative;
      text-align: center;
}
.plan-card__circle-bg {
      position: absolute;
      inset: 0;
      border-radius: 50%;
}
.plan-card__circle-bg--trial    { background: linear-gradient(180deg, #6ccd9b, rgba(108, 205, 155, 0.1) 49.52%, #6ccd9b); }
.plan-card__circle-bg--gold     { background: linear-gradient(180deg, #ffd65e, rgba(255, 230, 94, 0.1) 49.52%, #ffe65e); }
.plan-card__circle-bg--platinum { background: linear-gradient(180deg, #b0dcfc, rgba(176, 220, 252, 0.1) 49.52%, #b0dcfc); }
.plan-card__name {
      display: flex;
      height: 100%;
      flex-direction: column;
      justify-content: center;
      position: relative;
      z-index: 1;
}
.plan-card__name-main { font-size: 1.5vw; font-weight: 800; }
.plan-card__name-sub  { }
/* 料金 */
.plan-card__price {
      height: 5vw;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0.417vw 0;
      gap: 0.5vw;
}
.plan-card__price-main      { font-size: 2.5vw; }
.plan-card__price-main--lg  { font-size: 3.333vw; }
.plan-card__price-unit      { font-weight: 700;  align-self: flex-end; }
/* 特典リスト */
.plan-card__features {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding: 0.833vw 0;
      gap: 0.5vw;
      font-size: 1.146vw;
}
.plan-card__features li {
      display: flex;
      align-items: flex-start;
      gap: 0.5vw;
}
.plan-card__features li::before {
  content: "\f058"; /* fa-circle-check の Unicode */
  font-family: "Font Awesome 6 Free";
  margin-top: 0.4vw;
  flex-shrink: 0;
}
/* 申し込みボタン */
.plan-card__btn-wrapper {
      display: flex;
      justify-content: center;
      padding: 0.833vw 0;
}
.plan-card__btn {
      height: 3.125vw;
      width: 13.021vw;
      border-radius: 0.625vw;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      letter-spacing: 0.05em;
      cursor: pointer;
}
.plan-card__btn--trial    { background-color: #7bd2a5; border-color: #0d996f; }
.plan-card__btn--gold     { background-color: #ffee92; border-color: #fdd500; }
.plan-card__btn--platinum { background-color: #c9e7fc; border-color: #83c6f6; }
/* バッジ（お試し導入）: .plan-card(position:relative)基準のコンポーネントスコープ絶対配置 */
.plan-card__badge {
      position: absolute;
      top: 14vw;
      left: 63%;
      transform: translateX(-50%);
      border-radius: 2.604vw;
      background-color: var(--accent-color);
      padding: 1.5px 0.521vw;
      z-index: 4;
      font-size: 0.833vw;
      color: var(--bg-color);
      white-space: nowrap;
}
/* ===== プラン比較 ===== */
.plan__comparison {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1vw;
      color: var(--text-color);
}
.plan__comparison-title {
      font-size: 1.25vw;
      color: var(--bg-color);
}
.plan-table {
      border-radius: 0.833vw;
      background-color: var(--bg-color);
      display: flex;
      padding: 0.417vw;
      font-size: 1.042vw;
}
.plan-table__menu-col { }
.plan-table__data-col {
      width: 10.417vw;
      display: flex;
      flex-direction: column;
}
.plan-table__header {
      border-radius: 0.417vw 0.417vw 0 0;
      padding: 0.833vw;
      display: flex;
      justify-content: center;
}
.plan-table__header--menu     { background-color: #b7e1d4; justify-content: center; }
.plan-table__header--trial    { background-color: #128361; color: #fff; }
.plan-table__header--gold     { background-color: #ffee92; }
.plan-table__header--platinum { background-color: #c9e7fc; }
.plan-table__row {
      height: 3.646vw;
      border-bottom: 1px solid #d9d9d9;
      padding: 0.417vw 0.833vw;
      align-content: center;
}
.plan-table__data-col .plan-table__row {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
}
.plan-table__row--last       { border-bottom: none; }
.plan-table__row--last-left  { border-radius: 0 0 0 0.417vw; }
.plan-table__row--last-right { border-radius: 0 0 0.417vw 0; }
.plan-table__note { font-size: 0.833vw; line-height: 120%; }


/* 過去のウェビナーセクション */
.past-webinar {
      width: 57.344vw;
      margin: 0 auto;
      padding-top: 10vw;
      padding-bottom: 4vw;
      font-size: 2.5vw;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2vw;
      position: relative; /* side-deco の absolute 基準 */
}
/* タイトル＋イラストを横並びにする行 */
.past-webinar__top-row {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 2vw;
}
.past-webinar__description {
      font-size: 1.25vw;
      line-height: 2.083vw;
      white-space: nowrap;
      text-align: center;
      padding: 1vw 0;
}
.past-webinar__illust {
      width: 10.26vw; /* 元の 17.89% × 57.344vw */
      position: absolute;
      right: 2vw;
      top: 7vw;
}
.past-webinar__video-wrapper {
      border-radius: 0.833vw;
      background-color: #eaeaea;
      width: 90.83%;
      aspect-ratio: 16 / 9;
      overflow: hidden;
      color: #ec981a;
}
.past-webinar__video-frame {
      display: block;
      width: 100%;
      height: 100%;
}
.past-webinar__video-frame iframe {
      width: 100%;
      height: 100%;
      display: block;
      border: none;
}
/* スマホではYouTubeプレイヤー内部のUIが枠に対して相対的に大きく見えるため、
   iframeを実サイズ(640x360=16:9)で描画してから、
   枠の実効幅（57.344vw × 90.83%）に合わせて縮小し、
   動画の表示サイズは変えずにUIだけ縮小する */
@media (max-width: 768px) {
      .past-webinar__video-wrapper {
            position: relative;
      }
      .past-webinar__video-frame iframe {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 640px;
            height: 360px;
            transform: translate(-50%, -50%) scale(calc(57.344vw * 0.9083 / 640px));
            transform-origin: center center;
      }
}
.past-webinar__video-frame--preparing {
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: rgba(233, 233, 233, 0.5);
      color: #000;
      font-size: 2.5vw;
}
/* side-deco: .past-webinar(position:relative)基準のコンポーネントスコープ絶対配置 */
.past-webinar__side-deco {
      position: absolute;
      bottom: 4vw;
      left: 0;
      width: 5.36vw; /* 元の 9.35% × 57.344vw */
}
.past-webinar__title-block {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.833vw;
      color: var(--primary-color);
      border-bottom: var(--primary-color) solid 1px;
      padding: 1vw;
}
.past-webinar__title {
      align-self: stretch;
      position: relative;
}


/* お問い合わせセクション */
.contact {
      width: 100vw;
      background-color: var(--bg-color);
      position: relative; /* deco-right/left の absolute 基準 */
      padding: 10vw 0 6vw;
      font-size: 1.25vw;
}
/* コンテンツを中央に絞り込むラッパー */
.contact__inner {
      width: 57.344vw;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 7vw;
}
.contact__description {
      line-height: 2.083vw;
      text-align: center;
      white-space: nowrap;
}
.contact__form-group {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 0.833vw;
      font-size: 1.042vw;
}
.form-label-block {
      position: relative;
      min-width: 25%;
}
.form-label-text {
      position: absolute;
      height: 55.68%;
      top: 35.05%;
      display: flex;
      align-items: center;
      color: var(--text-color);
}
.form-required-group {
      display: flex;
      flex-direction: column;
      min-width: 10%;
      font-size: 0.729vw;
      color: var(--bg-color);
      align-self: end;
}
.form-required-badge-row {
      height: 2.604vw;
      display: flex;
      align-items: center;
      justify-content: center;
}
.form-required-pill {
      border-radius: 0.208vw;
      background-color: var(--alert-color);
      padding: 2px 0.208vw;
}
.form-field-hint {
      padding: 0.208vw 0.521vw;
}
.form-input-short {
      width: 15.677vw;
      height: 2.656vw;
      border-radius: 0.208vw;
      background-color: #fffee1;
      border: 1px solid #808080;
      box-sizing: border-box;
      display: flex;
      align-items: flex-start;
      padding: 0.521vw;
      font: inherit;
      color: var(--text-color);
}
.form-row-kana {
      align-self: stretch;
      height: 5.052vw;
      display: flex;
      align-items: flex-start;
      gap: 0.833vw;
      font-size: 0.833vw;
      color: #808080;
}
.form-field-col {  }
.form-row {
      display: flex;
      gap: 0.833vw;
      color: #808080;
}
.form-field-email {
      height: 4.219vw;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      font-size: 0.833vw;
      color: #808080;
}
.form-input-wide {
      width: 32.135vw;
      height: 2.656vw;
      border-radius: 0.208vw;
      background-color: #fffee1;
      border: 1px solid #808080;
      box-sizing: border-box;
      display: flex;
      align-items: flex-start;
      padding: 0.521vw;
      font: inherit;
      color: var(--text-color);
}
.form-label-confirm-text {
      position: absolute;
      height: 55.68%;
      width: 7.5vw;
      top: 35.05%;
      left: 0%;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      color: var(--text-color);
}
.form-field-confirm {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      text-align: left;
      font-size: 0.833vw;
      color: #808080;
}
.form-error-message {
      color: #d0342c;
      font-size: 0.833vw;
}
.form-field-standard {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      font-size: 0.833vw;
      color: #808080;
}
.form-field-hidden-text {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      font-size: 0.833vw;
      color: #808080;
}
.form-select {
      width: 32.135vw;
      height: 2.656vw;
      border-radius: 0.208vw;
      background-color: #fffee1;
      border: 1px solid #808080;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      padding: 0.521vw;
      gap: 0.521vw;
      color: #222;
      font: inherit;
}
.form-select-display {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 0.417vw;
      flex-shrink: 0;
}
.form-select-placeholder {
      height: 2.083vw;
      flex: 1;
      position: relative;
      display: flex;
      align-items: center;
}
.form-select-arrow {
      align-self: stretch;
      width: 2.083vw;
      position: relative;
      max-height: 100%;
      flex-shrink: 0;
}
.form-actions {
      display: flex;
      align-items: center;
      padding: 4vw;
      gap: 1.25vw;
      text-align: center;
      align-self: center;
}
.form-btn-submit {
      height: 3.125vw;
      width: 13.021vw;
      border-radius: 0.625vw;
      background-color: #0d996f;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0.521vw 1.562vw;
      box-sizing: border-box;
      color: #fff;
      border: none;
      font: inherit;
      cursor: pointer;
}
.form-flash {
      align-self: center;
      border-radius: 0.417vw;
      padding: 0.833vw 1.667vw;
      font-size: 1vw;
      text-align: center;
}
.form-flash--notice {
      background-color: #e6f7f0;
      color: #0d996f;
      border: 1px solid #0d996f;
}
.form-flash--alert {
      background-color: #fdecec;
      color: #d93025;
      border: 1px solid #d93025;
}
/* deco-right/left: .contact(position:relative, 100vw)基準のコンポーネントスコープ絶対配置 */
.contact__deco-right {
      position: absolute;
      top: 4.5vw;
      right: 20vw;
      width: 4.5vw;
}
.contact__deco-left {
      position: absolute;
      top: 5vw;
      right: 25vw;
      width: 6vw;
}
.contact__title-block {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.729vw;
      flex-shrink: 0;
      font-size: 2.5vw;
      color: #128361;
}
.contact__title-underline {
      width: 24.948vw;
      height: 3px;
      position: relative;
      background-color: #d9d9d9;
      border-top: 3px solid #128361;
      box-sizing: border-box;
}
.rectangle-container {
      position: absolute;
      top: 0;
      left: 14.062vw;
      width: 21.771vw;
      height: 2.917vw;
}
.span18 {
      font-size: 0.833vw;
}
.lucidemail-icon {
      height: 1.729vw;
      width: 1.771vw;
      position: relative;
}



/* フッター */
.footer {
      width: 100vw;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1vw;
      padding: 2vw 0;
}
.footer__logo {
      width: 20vw;
}
.policy__link {
      font-size: 1vw;
}
.footer__copy {
      font-size: 1vw;
}