/* 全て ****************************************************************************************************/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,700,1,200');
* {
  font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", "Helvetica Neue", "Helvetica", sans-serif;
  /*font-size: 16px;*/
  /*color: #302A54;*/
}

body {
  font-size: 16px;
  color: #302A54;
  /*background-color: #fffcf9;*/
}
article {
  margin: 0;
  padding: 0;
}

a, a:hover, a:visited, a:active, a:focus {
  text-decoration: none;
}
a:hover {
  opacity:0.6;
  transition:0.1s;
}

.material-icons, .material-symbols-rounded {
  display: inline-flex !important;
  vertical-align: middle !important;
  align-items: center !important;
  overflow: hidden !important;
}

.btn {
  border-radius: 15px;
  padding: 10px 15px;
  font-size: 100%;
  font-weight: bold;
  box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2);
}

.btn-info, .btn-success, .btn-warning, .btn-danger, .btn-primary {
  i, span {
    color: #ffffff;
  }
}

.f_10 { font-size: 10px; }
.f_12 { font-size: 12px; }
.f_14 { font-size: 14px; }
.f_16 { font-size: 16px; }
.f_18 { font-size: 18px; }
.f_20 { font-size: 20px; }
.f_22 { font-size: 22px; }
.f_24 { font-size: 24px; }
.f_26 { font-size: 26px; }
.f_28 { font-size: 28px; }
.f_30 { font-size: 30px; }
.f_32 { font-size: 32px; }
.f_34 { font-size: 34px; }
.f_36 { font-size: 36px; }


/* レイアウト ****************************************************************************************************/

/* ヘッダー・ナビ ******************************/

.navbar {
  border-radius: 0;
  border-top: 0;
  border-left: 0;
  border-right: 0;
}

.nav_icon {
  color: #302A54;
  font-size: 32px !important;
  font-weight: bold;
}
.nav_text {
  color: #302A54;
  font-size: 12px !important;
  font-weight: bold;
}

/* ナビ直下アラート枠 */
.nav_alert {
  margin: -30px 0 5px 0;
  padding: 10px 0 0 0;
  width: 100%;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  a {
    text-decoration: underline;
  }
}


/* サイドメニュー ******************************/
aside {
  margin-top: -21px;
  margin-left: -10px;
  margin-right: 10px;
}

#MenuSide {
  font-size: 16px;
  font-weight: bold;

  .panel {
    color: #302A54;
    border-radius: 0;
  }
  .list-group-item {
    color: #302A54;
    padding: 12px 15px;
    border-radius: 0;
  }
  .list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus {
    background-color: #FFFAE1;
    border-color: #dddddd;
  }
  .list-group-item-warning {
    background-color: #FFD029;
  }
  .list-group-item-primary {
    background-color: #ECF1FC;
  }
  .bg_text {
    opacity: 0.6;
    background-color: #DDD;
  }

  /*開閉アイコン*/
  .list-group-item[aria-expanded="false"]:after {
    font-size: 24px;
    position: absolute;
    top: 6px;
    right: 12px;
    font-family: "Material Icons";
    content: '\e313';
  }
  .list-group-item[aria-expanded="true"]:after {
    font-size: 24px;
    position: absolute;
    top: 6px;
    right: 12px;
    font-family: "Material Icons";
    content: '\e316';
  }

  /*padding-bottom: 10000px;*/
  /*margin-bottom: -10000px;*/
  /*background-color: #ffffff;*/

}



/* フッター ******************************/

footer {
  margin-top: 30px;
  margin-bottom: 70px;
  border-top: 1px #e7e7e7 solid;
}


/* ボタン ****************************************************************************************************/

/* ボタン形 共通 */
.btn_box, .btn_line, .btn_line2, .btn_line3 {
  color: #302A54;
  display: inline-block;
  position: relative;
  border-radius: 10px;
  min-height: 50px;
  width: 100%;
  text-decoration: none;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
  text-align: center;
  user-select: none;
}

/***** ボタン形 BOX型 *****/
.btn_box {
  padding: 15px 5px;
  .icon {
    font-size: 40px;
    max-width: 40px;
  }
  .h5 {
    font-size: 16px;
    margin: 5px 0;
    font-weight: bold;
  }
  .h6 {
    font-size: 12px;
    margin: 0;
    color: #FF7A00;
    font-weight: bold;
    padding: 5px 0;
  }
}

/***** ボタン形 LINE型 *****/
.btn_line {
  padding: 20px 5px;
  .h6 {
    display: inline-block;
    font-size: 12px;
    margin: 0 5px;
    color: #FF7A00;
    font-weight: bold;
  }
}
.btn_line:after {
  position: absolute;
  right: 15px;
  content: "\e5e1";
  font-family: "Material Icons";
  font-weight: bold;
}

/***** ボタン形 LINE型2 (アイコン付き) *****/
.btn_line2 {
  padding: 10px;
  text-align: left;
  .icon {
    font-size: 40px;
    max-width: 40px;
  }
  .h5 {
    font-size: 16px;
    margin: 5px 50px;
    font-weight: bold;
  }
  .h6 {
    margin: 5px 50px;
    color: #FF7A00;
    font-weight: bold;
  }
}
.btn_line2:after {
  position: absolute;
  top: 20px;
  right: 15px;
  content: "\e5e1";
  font-family: "Material Icons";
}

/***** ボタン形 LINE型3 (アイコン付き 白背景) *****/
.btn_line3 {
  padding: 10px;
  text-align: left;
  border: 2px #b5b0a6 solid;
  background: #FFFFFF;
  .icon {
    font-size: 40px;
    max-width: 40px;
  }
  .h5 {
    font-size: 16px;
    margin: 5px 50px;
    font-weight: bold;
  }
  .h6 {
    font-size: 12px;
    margin: 5px 50px;
    color: #FF7A00;
    font-weight: bold;
  }
}
.btn_line3:after {
  position: absolute;
  top: 20px;
  right: 15px;
  content: "\e5e1";
  font-family: "Material Icons";
}


/* ボタン色 ******************************/

.btn_main {
  background: #FFD029;
  border: 2px #BF9C1F solid;
  box-shadow: 0 4px 0 0 #FFFFFF inset, 0 -4px 0 rgba(0, 0, 0, 0.2) inset, 0 2px 2px rgba(0, 0, 0, 0.1);
}
.btn_main2 {
  background: #FFFAE1;
  border: 2px #BFB696 solid;
  box-shadow: 0 4px 0 0 #FFFFFF inset, 0 -4px 0 rgba(191, 182, 150, 0.8) inset, 0 2px 2px rgba(0, 0, 0, 0.1);
}
.btn_sub {
  color: #FFFFFF;
  background: #4483EB;
  border: 2px #4774BE solid;
  box-shadow: 0 4px 0 0 #B8D3FF inset, 0 -4px 0 rgba(0, 0, 0, 0.2) inset, 0 2px 2px rgba(0, 0, 0, 0.1);
  .h5, .h6 {
    color: #FFFFFF;
  }
}
.btn_sub2 {
  background: #CCDFFF;
  border: 2px #A2B2C8 solid;
  box-shadow: 0 4px 0 0 #FFFFFF inset, 0 -4px 0 #A2B2C8 inset, 0 2px 2px rgba(0, 0, 0, 0.1);
}

/* ボタン色 ( LINE型3 用の特殊 ) ******************************/
.btn_main_line3 {
  box-shadow: 0 4px 0 0 #FFF inset, 0 -4px 0 rgba(0, 0, 0, 0.2) inset, -65px 0 0 -20px #FFD029 inset, 0 2px 2px rgba(0, 0, 0, 0.1);
}
.btn_main2_line3 {
  box-shadow: 0 4px 0 0 #FFF inset, 0 -4px 0 rgba(0, 0, 0, 0.2) inset, -65px 0 0 -20px #FFFAE1 inset, 0 2px 2px rgba(0, 0, 0, 0.1);
}
.btn_sub_line3 {
  box-shadow: 0 4px 0 0 rgba(255, 255, 255, 0.7) inset, 0 -4px 0 rgba(0, 0, 0, 0.2) inset, -65px 0 0 -20px #4483EB inset, 0 2px 2px rgba(0, 0, 0, 0.1);
}
.btn_sub2_line3 {
  box-shadow: 0 4px 0 0 #FFF inset, 0 -4px 0 rgba(0, 0, 0, 0.2) inset, -65px 0 0 -20px #CCDFFF inset, 0 2px 2px rgba(0, 0, 0, 0.1);
}


/* パネル ****************************************************************************************************/

/* パネルの形 */
.panel {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.panel-heading {
  font-weight: bold;
  padding: 12px 15px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.panel > .table:first-child > thead:first-child > tr:first-child td:last-child, .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:last-child, .panel > .table:first-child > tbody:first-child > tr:first-child td:last-child, .panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:last-child, .panel > .table:first-child > thead:first-child > tr:first-child th:last-child, .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:last-child, .panel > .table:first-child > tbody:first-child > tr:first-child th:last-child, .panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:last-child {
  border-top-right-radius: 8px;
}
.panel > .table:first-child > thead:first-child > tr:first-child td:first-child, .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:first-child, .panel > .table:first-child > tbody:first-child > tr:first-child td:first-child, .panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:first-child, .panel > .table:first-child > thead:first-child > tr:first-child th:first-child, .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:first-child, .panel > .table:first-child > tbody:first-child > tr:first-child th:first-child, .panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:first-child {
  border-top-left-radius: 8px;
}


/* パネルの色 */
.panel-warning {
  color: #302A54;
  border-color: #FFD029;
}
.panel-warning > .panel-heading {
  color: #302A54;
  background-color: #FFD029;
}

.panel-primary {
  border-color: #4483EB;
}
.panel-primary > .panel-heading {
  color: #ffffff;
  background-color: #4483EB;
}

/* ヘッダーがないパネル */
.panel-noheader {
  border-radius: 10px;
}


/* ヘッダーがないパネル */
.panel-noheader-a {
  padding: 15px;
  margin-bottom: 15px;
  border-radius: 10px;
  border: 1px #FFD029 solid;
}




/* 背景 ****************************************************************************************************/

.bg_main {
  padding: 15px;
  margin-bottom: 15px;
  background: #FFFAE1;
}
.bg_sub {
  padding: 15px;
  margin-bottom: 15px;
  background: #F3F7FF;
}

@media (max-width: 768px) {
  .bg_wide {
    margin-right: -15px;
    margin-left: -15px;
  }
}


/* チケット ******************************/

.ticket_number {
  color: #FF7A00;
  font-weight: 800;
  font-size: 24px;
  float: right;
}

.ticket_text {
  font-weight: 800;
  font-size: 16px;
  margin-top: 4px;
  float: right;
  margin-left: 6px;
}


/* 受講回数(ホーム画面) ******************************/

/* 受講回数のパネル */
.panel_count_main {
  height: 100px; 
  padding: 12px 0 10px 0; 
  margin-top: 15px; 
  border-radius: 10px; 
  background-color: #FFFAE1; 
}

.panel_count_sub {
  height: 100px; 
  padding: 12px 0 10px 0; 
  margin-top: 15px; 
  border-radius: 10px; 
  background-color: #F3F7FF; 
}

/* 受講回数 - 回数 */
.text_count {
  text-align: center; 
  margin: 0;
}

.text_count_under { 
  margin-top: 6px;
  text-align: center;
}

.news_label {
  font-size: 14px;
  color: #4483EB;
  background: #F3F7FF;
}

.news_text {
  font-weight: bold;
  font-size: 16px;
  color: #302A54;
  padding: 10px 0;
}

.margin-top16 {
  margin-top: 16px;
}

.margin-top20 {
  margin-top: 20px;
}

.margin-btm20 {
  margin-bottom: 20px;
}

.margin-btm30 {
  margin-bottom: 30px;
}

.margin-btm40 {
  margin-bottom: 40px;
}

.border {
  border-bottom: 0.8px 
  solid #CBCBCB; 
  margin: 10px 0 30px;
}