/* ==========================================================
   目的別クラス指導ページ 改修用 追加CSS
   既存のCPページ用CSSの「後」に読み込んでください
   ========================================================== */

/* --- 見出しタグ変更（h1→h2, h2→h3）による見た目の差を吸収 ---
   既存CSSが「.Cpheader-inner h1」「h2.cpTitle-main」のように
   タグ名で指定している場合は、既存のセレクタに
   「.Cpheader-inner h2.cp-area-title」「h3.cpTitle-main」を追記してください。
   ここではブラウザ標準の余白だけリセットしておきます。 */
.Cpheader-inner h2.cp-area-title,
h3.cpTitle-main,
h2.cp-form-title {
  margin: 0;
}
h2.cp-form-title {
  font-size: inherit;
  font-weight: inherit;
}

/* --- <p>&nbsp;</p> の代わりの余白 --- */
.cp-header-lead {
  margin-top: 1.5em;
}

/* --- インラインstyleの置き換え --- */
.cpTitle-icon-y {
  min-width: 100px;
}
.cp-note-light,
.cp-note-light p {
  color: #fff;
}
.cp-note-light {
  padding-bottom: 40px;
}

/* --- 日程リスト（span → ul/li 化。span側の既存スタイルはそのまま効く） --- */
ul.schedule-day {
  list-style: none;
  margin: 0;
  padding: 0;
}
ul.schedule-day > li {
  display: inline;
}

/* --- ジャンプメニュー --- */
.cp-jump-nav {
  max-width: 960px;
  margin: 24px auto 40px;
  padding: 0 16px;
}
.cp-jump-nav ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.cp-jump-nav a {
  display: block;
  height: 100%;
  padding: 12px 10px;
  border: 2px solid currentColor;
  border-radius: 6px;
  background: #fff;
  color: #0068b7; /* サイトのメインカラーに合わせて調整 */
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  line-height: 1.4;
}
.cp-jump-nav a span {
  display: block;
  font-size: 0.85em;
  font-weight: normal;
}
.cp-jump-nav a:hover,
.cp-jump-nav a:focus-visible {
  background: #0068b7;
  color: #fff;
}
@media (max-width: 767px) {
  .cp-jump-nav ul {
    grid-template-columns: 1fr;
  }
}

/* アンカー移動時に固定ヘッダーに隠れないように（ヘッダーの高さに合わせて調整） */
#course-chu3,
#mokutekibetsu-group,
#mokutekibetsu-group-mizusawa,
#Form {
  scroll-margin-top: 80px;
}

/* --- キャンペーン告知文 --- */
.cp-campaign-text {
  margin-top: 16px;
  font-weight: bold;
  line-height: 1.7;
}

/* --- 受講料の諸経費行 --- */
.cp-fee-sub {
  font-size: 0.9em;
}

/* --- 読み上げ専用テキスト（画面には表示しない） --- */
.cp-vh {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- 講座自動選択後にフォームの該当欄を一瞬強調 --- */
.cp-course-flash {
  outline: 3px solid #f5c400;
  outline-offset: 4px;
  transition: outline-color 1.2s ease;
}
@media (prefers-reduced-motion: reduce) {
  .cp-course-flash { transition: none; }
}

/* ==========================================================
   2026冬期 追加分
   ========================================================== */

/* --- 受付終了した講座 --- */
.cp-content-inner.is-closed .cpWrap {
  opacity: 0.6;
}
.deadline.cp-deadline-closed {
  background: #777;
  color: #fff;
}
.cp-closed-label {
  margin: 24px auto 0;
  padding: 14px;
  max-width: 420px;
  border-radius: 6px;
  background: #e5e5e5;
  color: #555;
  font-weight: bold;
  text-align: center;
}
.cp-option-closed {
  color: #999;
  text-decoration: line-through;
}

/* --- 電話での申込み・問合せ --- */
.cp-contact {
  max-width: 960px;
  margin: 0 auto;
  padding: 40px 16px;
  text-align: center;
}
.cp-contact-title {
  margin: 0 0 16px;
  font-size: 1.25em;
}
.cp-contact-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.cp-contact-list li {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 240px;
  padding: 14px 20px;
  border: 2px solid #0068b7; /* サイトのメインカラーに合わせて調整 */
  border-radius: 6px;
  background: #fff;
}
.cp-contact-name {
  font-weight: bold;
}
.cp-contact-tel {
  font-size: 1.5em;
  font-weight: bold;
  color: #e60012;
  text-decoration: none;
  letter-spacing: 0.02em;
}
.cp-contact-tel:hover,
.cp-contact-tel:focus-visible {
  text-decoration: underline;
}
.cp-contact-note {
  margin-top: 12px;
  font-size: 0.9em;
}
@media (max-width: 767px) {
  .cp-contact-list li {
    width: 100%;
  }
}

/* --- 情報AIドリル --- */
.cp-ai-drill .obi-school {
  background: #e8541e;
  color: #fff;
}

/* --- 別枠講座（情報AIドリル）：チラシのオレンジ枠に合わせたデザイン --- */
.cp-feature {
  --cpf-orange: #ea5b2c;
  --cpf-orange-dark: #d4461a;
  --cpf-yellow: #fff200;
  padding: 50px 16px;
  background: #fff;
}
.cp-feature-box {
  max-width: 960px;
  margin: 0 auto;
  border: 3px solid var(--cpf-orange);
  background: #fff;
  overflow: hidden;
}
.cp-feature-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 16px 0 0;
}
.cp-feature-tab {
  flex: 0 0 auto;
  align-self: stretch;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 12px 26px 12px 14px;
  background: var(--cpf-yellow);
  color: var(--cpf-orange);
  font-weight: bold;
  font-size: 1.1em;
  line-height: 1.3;
  text-align: center;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
}
.cp-feature-titles {
  flex: 1 1 auto;
  padding: 12px 0;
}
.cp-feature-sub {
  margin: 0 0 4px;
  font-weight: bold;
  color: #222;
}
.cp-feature-title {
  margin: 0;
  color: var(--cpf-orange);
  font-weight: 900;
  line-height: 1.2;
}
.cp-feature-title-pre {
  display: inline-block;
  margin-right: 0.3em;
  font-size: 1.1rem;
}
.cp-feature-title-main {
  font-size: 2.4rem;
  letter-spacing: 0.02em;
}
.cp-feature-badge {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 104px;
  height: 104px;
  margin: 8px 0;
  border-radius: 50%;
  background: var(--cpf-orange);
  color: #fff;
  font-weight: bold;
  font-size: 0.95em;
  line-height: 1.3;
  text-align: center;
}
.cp-feature-body {
  display: flex;
  align-items: stretch;
}
.cp-feature-text {
  flex: 1 1 60%;
  padding: 0 0 20px;
}
.cp-feature-catch {
  margin: 0 0 14px;
  padding: 10px 20px;
  background: linear-gradient(90deg, var(--cpf-orange-dark), var(--cpf-orange) 70%, rgba(234, 91, 44, 0));
  color: #fff;
  font-weight: bold;
  font-size: 1.25em;
  line-height: 1.4;
}
.cp-feature-desc {
  margin: 0 20px 10px;
  line-height: 1.7;
}
.cp-feature-price {
  display: inline-block;
  margin: 6px 20px 0;
  padding: 8px 18px;
  border: 2px solid var(--cpf-orange);
  border-radius: 8px;
  color: var(--cpf-orange);
  text-align: center;
}
.cp-feature-price p {
  margin: 0;
  font-weight: bold;
}
.cp-feature-price strong {
  font-size: 1.8em;
  margin: 0 0.1em;
}
.cp-feature-price-sub {
  font-size: 0.85em;
  color: #333;
}
.cp-feature-img {
  flex: 0 0 34%;
  display: flex;
  align-items: flex-end;
}
.cp-feature-img img {
  display: block;
  width: 100%;
  height: auto;
}
.cp-feature-cta {
  padding: 0 20px 24px;
  text-align: center;
}
.cp-feature-cta a {
  display: inline-block;
  min-width: 280px;
  padding: 14px 28px;
  border-radius: 999px;
  background: var(--cpf-orange);
  color: #fff;
  font-weight: bold;
  text-decoration: none;
}
.cp-feature-cta a:hover,
.cp-feature-cta a:focus-visible {
  background: var(--cpf-orange-dark);
}
.cp-feature.is-closed .cp-feature-box {
  opacity: 0.6;
}
@media (max-width: 767px) {
  .cp-feature-head {
    flex-wrap: wrap;
    padding: 0;
  }
  .cp-feature-tab {
    align-self: auto;
    padding: 8px 24px 8px 12px;
    font-size: 1em;
  }
  .cp-feature-titles {
    flex-basis: calc(100% - 140px);
    padding: 10px 0;
  }
  .cp-feature-title-main {
    font-size: 1.8rem;
  }
  .cp-feature-badge {
    width: 84px;
    height: 84px;
    margin: 0 12px 8px auto;
    font-size: 0.85em;
  }
  .cp-feature-body {
    flex-direction: column-reverse;
  }
  .cp-feature-img {
    flex-basis: auto;
    justify-content: center;
  }
  .cp-feature-img img {
    max-width: 320px;
  }
  .cp-feature-catch {
    font-size: 1.1em;
  }
  .cp-feature-cta a {
    min-width: 0;
    width: 100%;
  }
}

/* --- ジャンプメニューが青背景の下端に詰まらないように --- */
.cp-jump-nav {
  margin-bottom: 0;
  padding-bottom: 40px;
}

/* ==========================================================
   LP（[pl_lp]）共通：画像＋講座カード
   ========================================================== */
.lp-wrap {
  max-width: 640px;
  margin: 0 auto;
}
.lp-img img {
  display: block;
  width: 100%;
  height: auto;
}
.lp-img-link {
  display: block;
}
.lp-img-link:hover img,
.lp-img-link:focus-visible img {
  opacity: 0.9;
}

/* 講座カード（一関桜町校LPのオレンジ背景） */
.lpc {
  padding: 24px 16px 20px;
  background: linear-gradient(180deg, #ee7a00 0%, #eb9500 45%, #e95504 100%);
}
.lpc-card {
  margin: 0 0 22px;
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.lpc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #33bab7;
  color: #fff;
}
.lpc-card--blue .lpc-head {
  background: #33b9eb;
}
.lpc-grade {
  font-size: 1.25em;
  font-weight: bold;
}
.lpc-cap {
  padding: 2px 8px;
  border-radius: 3px;
  background: #fff;
  color: #231815;
  font-size: 0.85em;
  font-weight: bold;
}
.lpc-body {
  padding: 14px 16px 18px;
}
.lpc-title {
  margin: 0 0 10px;
  color: #eb5e00;
  font-size: 1.45em;
  font-weight: 900;
  line-height: 1.35;
  text-align: center;
}
.lpc-lead {
  margin: 0 0 12px;
  font-size: 0.95em;
  line-height: 1.7;
}
.lpc-info {
  margin: 0 0 16px;
}
.lpc-row {
  display: flex;
  align-items: flex-start;
  margin: 0 0 6px;
}
.lpc-row dt {
  flex: 0 0 4.2em;
  margin: 0 10px 0 0;
  padding: 1px 0;
  border-radius: 3px;
  background: #ec6934;
  color: #fff;
  font-size: 0.85em;
  font-weight: bold;
  text-align: center;
}
.lpc-row dd {
  flex: 1 1 auto;
  margin: 0;
  line-height: 1.6;
}
.lpc-row--price dd {
  padding: 2px 6px;
  background: #fff242;
  font-weight: bold;
}
.lpc-row--price s {
  color: #555;
  font-weight: normal;
}
.lpc-row--price strong {
  color: #eb5e00;
  font-size: 1.4em;
}
.lpc-btn {
  display: block;
  max-width: 360px;
  margin: 0 auto;
  padding: 12px 16px;
  border-radius: 999px;
  background: #e60012;
  color: #fff;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
}
.lpc-btn:hover,
.lpc-btn:focus-visible {
  background: #c4000f;
  color: #fff;
}
.lpc-card.is-closed {
  opacity: 0.6;
}
.lpc-notes {
  margin: 0;
  padding: 12px 14px;
  border-radius: 4px;
  background: #fff;
  font-size: 0.8em;
  line-height: 1.7;
}
.lp-wrap .cp-contact {
  max-width: none;
  padding: 32px 16px;
}