@property --kgp-theme-main {
  syntax: "<color>";
  inherits: false;
  initial-value: #2e8b57;
}

@property --kgp-theme-dark {
  syntax: "<color>";
  inherits: false;
  initial-value: #548c6c;
}

@property --kgp-theme-light {
  syntax: "<color>";
  inherits: false;
  initial-value: #A5CDB7;
}

@property --kgp-theme-header {
  syntax: "<color>";
  inherits: false;
  initial-value: #FFF;
}

@property --kgp-theme-body {
  syntax: "<color>";
  inherits: false;
  initial-value: #FAFAFA;
}

@property --kgp-theme-footer {
  syntax: "<color>";
  inherits: false;
  initial-value: #FFF;
}

@property --kgp-theme-sub {
  syntax: "<color>";
  inherits: false;
  initial-value: #862e8c;
}

@property --kgp-theme-sub2 {
  syntax: "<color>";
  inherits: false;
  initial-value: #2e358c;
}

@property --kgp-theme-placeholder {
  syntax: "<color>";
  inherits: false;
  initial-value: #aaa;
}



/******************************/
/**
 * body
 */
body {
  font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
/*
  background-color: var(--kgp-theme-light);
 */
}

.body-wrapper {
  background-color: var(--kgp-theme-body);
  position: relative;
  min-height: 100vh;
  padding-bottom: 250px;
}
/******************************/



/******************************/
/**
 * ANCHAT
 */
/* ANCHATボタンを画面右下に固定する */
.anchat-button {
  position: fixed;
  left: 50px;
  bottom: 50px;
}
/******************************/



/******************************/
/**
 * ヘッダー
 */
/* タイトル */
.kgp-title {
  color: var(--kgp-theme-main);
  text-shadow: 0 .4rem .2rem rgba(0, 0, 0, .25);
}

/* ヘッダーの共通設定 */
.header-container {
  background-color: var(--kgp-theme-header);
  text-shadow: 0 .1rem .1rem rgba(0, 0, 0, .5);
  box-shadow: 0 5px 15px 0 rgba(0, 0, 0, .1);
/*
  box-shadow: 0 5px 15px 0 rgba(0, 0, 0, .5);
  box-shadow:
    0 20px 0 -10px var(--kgp-theme-light),
    0 40px 0 -20px var(--kgp-theme-main),
    0 58px 0 -30px var(--kgp-theme-dark);
  box-shadow: 0 2px 10px 0 var(--kgp-theme-light);
 */
}

/* フォントカラー */
.nav-masthead .nav-link {
/*
  color: rgba(255, 255, 255, .7);
  border-bottom: .25rem solid transparent;
 */
  cursor: pointer;
  color: var(--kgp-theme-sub2);
  opacity: 0.7;
}

/* マウスオーバー時 */
.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
  border-bottom-color: rgba(255, 255, 255, .25);
/*
  border-bottom-color: var(--kgp-theme-sub2);
 */
}

/* メニュー間のマージン */
.nav-masthead .nav-link + .nav-link {
  margin-left: 1rem;
}

/* アクティブメニュー */
.nav-masthead .active {
/*
  color: #fff;
  border-bottom-color: #fff;
 */
  color: #999;
  border-bottom-color: var(--kgp-theme-light);
}
/******************************/



/******************************/
/**
 * フッター
 */
.footer-container {
  background-color: var(--kgp-theme-footer);
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  box-shadow: 0 -5px 15px 0 rgba(0, 0, 0, .1);
}
/******************************/



/******************************/
/**
 * Form
 */
.kgp-form {
  background-color: var(--kgp-theme-light);
}

/* 入力エリア */
.kgp-input-area {
  background-color: rgba(255, 255, 255);
}
/******************************/



/******************************/
/**
 * テーブル
 */
/* テーブルヘッダー固定 */
.sticky {
  position: sticky;
  top: 0;
  left: 0;
  border-top: none;
}

.selectable {
  cursor: pointer;
}
/******************************/



/******************************/
/**
 * placeholder の色を変更
 */
/* for Webkit */
.form-control::-webkit-input-placeholder {
    color: var(--kgp-theme-placeholder);
    font-size: 0.9em;
}

/* for Firefox */
.form-control::-moz-placeholder {
    color: var(--kgp-theme-placeholder);
    font-size: 0.9em;
}

/* for Firefox 18以前 */
.form-control:-moz-placeholder {
    color: var(--kgp-theme-placeholder);
    font-size: 0.9em;
}

/* for Windows IE */
.form-control:-ms-input-placeholder {
    color: var(--kgp-theme-placeholder);
    font-size: 0.9em;
}
/******************************/



/******************************/
/* トースト */
.toast {
  position: fixed;
  top: 10px;
  display: inline-block;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border-radius: 15px;
  padding: 8px 15px;
  border: none;
  z-index: 1000;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
  font-size: 13px;
}
/******************************/



/**
 * 丸←アイコン
 * Species から Home に戻るボタン
 */
.bi-arrow-left-circle {
  font-size: 25px;
  color: var(--kgp-theme-sub2);
}



/* ラベル右寄せ */
.label-right {
  display: inline-block;
  text-align: right;
  width: 100%;
}



/* 実行中のぐるぐる表示 */
#loading {
  background: rgba(0, 0, 0, .5);
  z-index: 10000;
}


/* Home の PR 画像 */
.pr-image{
 width: 25px;
 height: 25px;
}