/************************************************
 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

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

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

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

:root{

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

  --btn-radius:100px;

}


/* ===============================
   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;

}


/* ===============================
   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;
}