/************************************************
 BUTTON SYSTEM
 reusable ui component
***********************************************

■ Primary（メインボタン）

<a class="kiin-btn kiin-btn--primary">
申し込む
</a>


■ Primary Large（大きいCTA）

<a class="kiin-btn kiin-btn--primary kiin-btn--lg">
今すぐ申し込む
</a>


■ Secondary（白ボタン）

<a class="kiin-btn kiin-btn--secondary">
詳細を見る
</a>


■ Ghost（ナビ用ボタン）

<a class="kiin-btn kiin-btn--ghost">
戻る
</a>


■ Danger（削除ボタン）

<button class="kiin-btn kiin-btn--danger">
削除
</button>


■ Small Button（管理画面）

<button class="kiin-btn kiin-btn--secondary kiin-btn--sm">
編集
</button>


■ Full Width Button（フォーム）

<button class="kiin-btn kiin-btn--primary kiin-btn--block">
送信
</button>


■ Slide Animation（左からスライド）

<a class="kiin-btn kiin-btn--primary kiin-btn--slide">
申し込む
</a>


■ Slide + Large（LP CTA）

<a class="kiin-btn kiin-btn--primary kiin-btn--lg kiin-btn--slide">
無料体験を始める
</a>


================================================
CLASS LIST
================================================

kiin-btn               : base button
kiin-btn--primary      : navy button
kiin-btn--secondary    : white button
kiin-btn--ghost        : transparent button
kiin-btn--danger       : delete button

kiin-btn--sm           : small
kiin-btn--lg           : large
kiin-btn--block        : width 100%

kiin-btn--slide        : slide hover animation

kiin-btn kiin-btn--deposit kiin-btn--sm 
kiin-btn kiin-btn--primary kiin-btn--sm 

================================================

************************************************/

/* ===============================
   COLOR VARIABLES
=============================== */

:root{

  --btn-primary:#211d4d;
  --btn-danger:#d33;

  --btn-deposit: #7397e4;
  --btn-deposit-hover: #47567e;
  --btn-radius: 20px;




  --course_e: #50912b;
  --course_p: #f78da7;
  --course_p: #9e5166;
  --course_b: #3E87E5;
  --course_o: #777;


}
  




/* =========================
   色の基準（ここだけ管理）
========================= */
.course-e { --kiin-color: var(--course_e); }
.course-b { --kiin-color: var(--course_b); }
.course-p { --kiin-color: var(--course_p); }
.course-o { --kiin-color: var(--course_o); }

/* =========================
   新UI（kiin系）
========================= */
.kiin-course-header {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.kiin-course-code-box {
    padding: 6px 12px;
    border-radius: 6px;
    color: #fff;

    
    font-weight: bold;
    background-color: var(--kiin-color);
}

.kiin-course-title {
    font-size: 1.1em;
    font-weight: bold;
    color: var(--kiin-color);
}

/* =========================
   既存クラス（壊さず統一）
========================= */

/* list系 */
.list-e { --kiin-color: var(--course_e); }
.list-b { --kiin-color: var(--course_b); }
.list-p { --kiin-color: var(--course_p); }
.list-o { --kiin-color: var(--course_o); }

.list-e .course-id,
.list-b .course-id,
.list-p .course-id,
.list-o .course-id {
    background-color: var(--kiin-color);
    color: #fff;
}

.list-e .course-title,
.list-b .course-title,
.list-p .course-title,
.list-o .course-title {
    color: var(--kiin-color);
}

/* code-box */
.list-e .code-box,
.list-b .code-box,
.list-p .code-box {
    background-color: var(--kiin-color);
}

/* テキスト */
.text-e .text-green { color: var(--course_e); }
.text-b .text-blue { color: var(--course_b); }
.text-p .text-pink{ color: var(--course_p); }
.text-o .text-default { color: var(--course_o); }

/* bg系（そのまま残す） */
.bg-green   { background-color: var(--course_e); }
.bg-blue    { background-color: var(--course_b); }
.bg-pink    { background-color: var(--course_p); }
.bg-default { background-color: var(--course_o); }


/* hr */
hr.lec_info.bg-green   { border-top: 1px solid var(--course_e); }
hr.lec_info.bg-blue    { border-top: 1px solid var(--course_b); }
hr.lec_info.bg-pink    { border-top: 1px solid var(--course_p); }
hr.lec_info.bg-default { border-top: 1px solid var(--course_o); }




/* ===============================
   BASE BUTTON
=============================== */

.kiin-btn{

  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  gap:.5em;

  padding:.6em 1.6em;

  border-radius:var(--btn-radius);
  border:1px solid transparent;

  font-size:.9rem;
  text-decoration:none;

  cursor:pointer;

  overflow:hidden;

  transition:
    background .35s ease,
    color .35s ease,
    border .35s ease,
    transform .1s ease;

}

.kiin-btn:active{
  transform:scale(.97);
}


/* ===============================
   BUTTON CONTENT
=============================== */

.kiin-btn__label{

  position:relative;
  z-index:2;

}


/* ===============================
   BUTTON ICON
=============================== */

.kiin-btn__icon{

  display:inline-flex;
  align-items:center;
  justify-content:center;

  width:1.3em;
  height:1.3em;

  flex-shrink:0;

  position:relative;
  z-index:2;
  top:4px;

}

.kiin-btn__icon svg{

  width:100%;
  height:100%;

  fill:currentColor;

}



/* ===============================
   PRIMARY
=============================== */

.kiin-btn--primary{

  background:var(--btn-primary);
  color:#fff;
  border:1px solid var(--btn-primary);

}

.kiin-btn--primary:hover{

  background:#fff;
  color:var(--btn-primary);
  
  border:1px solid var(--btn-primary);

}


/* ===============================
   SECONDARY
=============================== */

.kiin-btn--secondary{

  background:#fff;
  color:var(--btn-primary);
  border:1px solid var(--btn-primary);

}

.kiin-btn--secondary:hover{

  background:var(--btn-primary);
  color:#fff;
  border:1px solid #fff;

}




/* ===============================
   btn-deposit
=============================== */

.kiin-btn--deposit{

  background:var(--btn-deposit);
  color:#fff;
  border:1px solid var(--btn-deposit);


}

.kiin-btn--deposit:hover{
  background:var(--btn-deposit-hover);
  color:#fff;
  border:1px solid var(--btn-deposit-hover);

}



/* ===============================
   GHOST
=============================== */

.kiin-btn--ghost{

  background:transparent;
  color:var(--btn-primary);

}

.kiin-btn--ghost:hover{

  background:rgba(33,29,77,.08);

}


/* ===============================
   DANGER
=============================== */

.kiin-btn--danger{

  background:var(--btn-danger);
  color:#fff;
  border:1px solid var(--btn-danger);

}

.kiin-btn--danger:hover{

  background:#fff;
  color:var(--btn-danger);
  border:1px solid var(--btn-danger);

}


/* ===============================
   DANGER白抜き
=============================== */

.kiin-btn--danger2{

  background:#fff;
  color:var(--btn-danger);
  border:1px solid var(--btn-danger);

}

.kiin-btn--danger2:hover{

  background:var(--btn-danger);
  color:#fff;
  border:1px solid #fff;

}



/* ===============================
   SIZE
=============================== */

.kiin-btn--sm{

  padding:.35em 1em;
  font-size:.8rem;

}

.kiin-btn--lg{

  padding:.9em 2.4em;
  font-size:1.1rem;

}

.kiin-btn--block{

  width:100%;

}


/* ===============================
   SLIDE HOVER EFFECT
=============================== */

.kiin-btn--slide::before{

  content:"";
  position:absolute;

  top:0;
  left:-100%;

  width:100%;
  height:100%;

  background:currentColor;

  opacity:.15;

  border-radius:var(--btn-radius);

  transition:left .45s ease;

  z-index:1;

}

.kiin-btn--slide:hover::before{

  left:0;

}


.kiin-form-submit{
  text-align:center;
  margin-top:24px;

  margin-bottom:24px;
}




/*********************/
/*管理画面のボタン*/
/*********************/
.btn_deposit {
  margin-top: 0.2rem;
  text-decoration: none; /* ← これでアンダーラインを消します */
  background: #7397e4;
  color: #fff;
  border: none;
  padding: 4px 12px;
  font-size: 14px;
  border-radius: 9999px; /* 完全な丸み（pill型） */
  cursor: pointer;
  transition: background 0.3s ease;


}



.btn_deposit:hover {
  background: #47567e;
}


/* 無効化スタイル */


.btn_deposit_disabled {
  background: #fff;
  color: #94a3b8;
  border: 1px solid #cbd5e1;
  padding: 4px 12px;
  font-size: 14px;
  border-radius: 9999px; /* 同じく丸く */
  cursor: not-allowed;
}


/*********************/
/*管理画面のボタン*/
/*********************/
.btn_deposit2 {
  margin-top: 0.2rem;
  text-decoration: none; /* ← これでアンダーラインを消します */
  background: #56b375;
  color: #fff;
  border: none;
  padding: 4px 12px;
  font-size: 14px;
  border-radius: 9999px; /* 完全な丸み（pill型） */
  cursor: pointer;
  transition: background 0.3s ease;
}


.btn_deposit2:hover {
  background: #37704a;
}
/* 無効化スタイル */
.btn_deposit2_disabled {
  background: #fff;
  color:#15311f;
  border: 1px solid #cbd5e1;
  padding: 4px 12px;
  font-size: 14px;
  border-radius: 9999px; /* 同じく丸く */
  cursor: not-allowed;
}




/*********************/
/*講座コードの表記も*/
/*ここで定義しておきます*/
/*********************/

/* レイアウト */
.kiin-course-header {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* コードBOX */
.kiin-course-code-box {
    padding: 6px 12px;
    border-radius: 6px;
    color: #fff;
    font-weight: bold;
    font-size: 0.95em;
}

/* タイトル */
.kiin-course-title {
    font-size: 1.1em;
    font-weight: bold;
}

/* ===== 色定義 ===== */

/* E（緑） */
.kiin-course-header.course-e .kiin-course-code-box {
    background-color: var(--course_e);
}
.kiin-course-header.course-e .kiin-course-title {
    color: var(--course_e);
}

/* B（青） */
.kiin-course-header.course-b .kiin-course-code-box {
    background-color: var(--course_b);
}
.kiin-course-header.course-b .kiin-course-title {
    color: var(--course_b);
}

/* P（ピンク） */
.kiin-course-header.course-p .kiin-course-code-box {
    background-color: var(--course_p);
}
.kiin-course-header.course-p .kiin-course-title {
    color: var(--course_p);
}

/* その他 */
.kiin-course-header.course-o .kiin-course-code-box {
    background-color: var(--course_o);
}
.kiin-course-header.course-o .kiin-course-title {
    color: var(--course_o);
}