@charset "utf-8";
/*
 1.Basic Elements
 2.Generic Classes
 3.Basic Layout
 4.Content
*/
/***********************************************************
 1.Basic Elements
***********************************************************/
@font-face {
  font-family: "Ned-font";
  src: url("/css/font/Kisosapo595.otf") format("opentype");
}
html {
  touch-action: manipulation;
}
html:not(.nav-link) {
  scroll-behavior:initial !important;
}
body {
  font-family: "メイリオ", Meiryo, "ヒラギノ丸ゴ Pro W4","Hiragino Maru Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Helvetica, sans-serif;
}
header {
  background: #fff;
}
header #col-logo {
  min-width: 300px;
  padding: 16px;
  white-space: nowrap;
  width: 300px;
  z-index: 1;
}
header #col-logo img {
  width: 160px;
}
header .nav-scroller {
  white-space: nowrap;
  line-height: 48px;
}
header .nav-scroller .nav {
  flex-wrap: nowrap;
}
header .nav-scroller [type=button]:not(:disabled):active {
  cursor: grabbing;
}
header img.program-logo {
  height: 16px;
}
mark {
  border-radius: 3px;
  padding: 0.1em;
  background-color: #fcf1b9;
}
label {
  cursor: pointer;
}
h5 i, .play-link i,
h5 i, .guide-link i {
   margin-right: 7px;
}
.card {
  border: 1px solid rgba(0,0,0,.15);
}
.tag i {
  margin-right: 0.1rem;
}
select {
  cursor: pointer;
}
#btn-qrcode-container select {
  border-radius: 18px;
  font-size: .9rem;
  padding: 4px 24px 4px 16px;
}
/* 動画プレーヤー */
#bvplayer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.vjs-mouse.vjs-playlist {
  font-size: .8rem;
}
.vjs-playlist {
  background-color: transparent;
}
.vjs-playlist .vjs-playlist-now-playing-text {
  background: #0d6fb8;
  border-radius: 2px;
  font-size: 11px;
  font-weight: normal;
  line-height: 1;
  color: #fff;
  padding: 3px 4px;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  margin: 8px 4px;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
}
.vjs-playlist .vjs-playlist-duration {
  border-radius: 2px;
  font-size: 11px;
  position: absolute;
  top: 8px;
  left: 4px;
  line-height: 1;
  padding: 3px 4px;
  background-color: rgba(0, 0, 0, .9);
}
.vjs-playlist-item {
  opacity: .5;
}
.vjs-playlist .vjs-selected img {
  opacity: 1;
}
.vjs-playlist-item:hover {
  opacity: 1;
}
.vjs-playlist .vjs-selected, .vjs-playlist.vjs-mouse .vjs-selected {
  background-color: transparent;
  opacity: 1;
}
.vjs-playlist .vjs-playlist-title-container {
  padding: 4px 8px;
}
.vjs-playlist .vjs-playlist-name {
  padding: 0 4px;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, .75)
}
.vjs-playlist .vjs-playlist-title-container {
  padding: 2px;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, .75)
}
.vjs-playlist .vjs-up-next-text {
  padding: 0 4px;
}
.vjs-playlist-ad-overlay {
  display: none;
}
.vjs-playlist {
  aspect-ratio: 606 / 103;
  width: 100%;
}
#videoModal .vjs-playlist {
  max-width: 606px;
}
.badge-new {
  padding: 2px 4px;
  border-radius: 2px;
  background: #e83040;
  font-size: 10px;
  font-weight: normal;
  color: #fff;
  margin-left: 8px;
  line-height: 1;
  vertical-align: 2px;
}
.pack .badge-new,
.category .badge-new,
#guide #tags-block .badge-new {
  background: inherit;
  color: #e83040;
  font-weight: bold;
  padding: 0;
  margin: 0px -2px 0 6px;
  vertical-align: 1px;
}
.nav-link {
  position: relative;
}
.nav-link .badge-new {
  position: absolute;
  top: 4px;
  left: -12px;
  background: inherit;
  color: #e83040;
  font-weight: bold;
}
.video-js .vjs-control-bar {
  display: flex !important;
 }
 /* Modal */
 .modal-dialog {
  max-width: 640px;
}
.modal-dialog .modal-header {
  color: #fff;
  background: #0d6fb8;
}
.modal-dialog .modal-footer {
  border: none;
  display: block;
}
.modal-dialog .memo {
  list-style: none;
  padding-left: 1.5em;
  margin: 16px 0 0 0.5em;
}
.modal-dialog .memo li {
  color: #696969;
  font-size: .9rem;
  padding: 4px 0 0;
  text-indent: -1.5em;
}
#howtoModal .modal-dialog .modal-body {
  padding: 2rem 2rem 0.5rem;
  text-align: left;
}
.modal-dialog p:last-child {
  margin: 0;;
}
.modal-dialog ol li {
  line-height: 1.8;
  padding: 4px 0;
}
@media (max-width: 768px) {
  header #col-logo img {
    width: 120px;
  }
}
#logo-title {
  color: #0d6fb8;
  font-size: 1.25rem;
  font-weight: bold;
}
/***********************************************************
 2.Generic Classes
***********************************************************/
/* Theme Color */
.border-theme {
  border-color: #0d6fb8 !important;
}
.bg-theme {
  background-color: #0d6fb8 !important;
}
/* Button */
.btn-theme {
  color: #fff;
  background: #0d6fb8;
  transition: .2s ;
}
.btn-theme:hover {
  color: #fff;
  background: #0a5996;
}
.btn-outline-theme {
  color: #0d6fb8;
  border: 1px solid #0d6fb8;
  transition: .2s ;
}
.btn-outline-theme:hover {
  color: #fff;
  background: #0d6fb8;
}
.btn-theme2 {
  color: #fff;
  background-color: #00b535;
}.btn-theme3 {
  color: #fff;
  background-color: #fe9601;
}
.btn-theme.btn-lg,
.btn-theme2.btn-lg,
.btn-theme3.btn-lg {
  padding: 8px 16px;
}
.btn-theme2:hover,
.btn-theme3:hover {
  color: #fff;
  opacity: .9;
}
/* Brightcove Video Cloud Player */
.vjs-title-bar {
  display: none;
}

a img.btn-game, 
a img.btn-card,  
a img.btn-guide,  
a img.btn-video {
  width: 22px;
  height: 22px;
  margin: 2px 4px 4px 0;
  opacity: .8;
}
a:hover img.btn-game,
a:hover img.btn-card,
a:hover img.btn-guide,
a:hover img.btn-video {
  opacity: 1;
}
#btn-pause {
  display: none;
}
.btn-circle {
  background-color: #fff;
  border: 1px solid #000;
  border-radius: 50%;
  height: 38px;
  line-height: 1;
  margin: 6px;
  width: 38px;
  padding: 10px 0;
}
.btn-unit {
  background-color: #fff;
  border: 1px solid #000;
  border-radius: 19px;
  height: 38px;
  line-height: 1;
  margin: 6px 4px;
  padding: 10px 0;
  width: 58px;
}
.btn-unit.disabled {
  background-color: #0000000d;
  border: 1px solid #c0c0c0;
  color: #808080;
}
.btn-clear {
  color: #000;
  background-color: #fff;
  border: 1px solid #000;
  border-radius: 19px;
  line-height: 1;
  width: 100%;
  padding: 8px;
}
.btn-round-white {
  color: #000;
  background-color: #fff;
  border: 1px solid #000;
  border-radius: 19px;
  line-height: 1;
  padding: 8px 24px;
}
.btn-round-white.selected {
  color: #fff;
  background-color: #000;
}
/* Unit Button */
.btn-unit.selected {
  color: #fff;
  background-color: #000;
}
.img-guard {
  position:relative;
  width: 100%;
  height: 100%;
}
.guard-nopic {
  position:absolute;
  display:block;
  width:100%;
  height:100%;
  background: url(/img/guard.png);
}
.ned-font {
  font-family: "Ned-font","メイリオ", Meiryo, "ヒラギノ丸ゴ Pro W4","Hiragino Maru Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Helvetica, sans-serif;
  font-size: 20px;
  line-height: 1.3;
}
/* Tag */
.tag {
  color: #707581;
  font-size: .75rem;
}
.hidden {
  display: none;
}
/***********************************************************
 3.Basic Layout
***********************************************************/
#cheader {
  padding: 12px 16px;
  z-index: 1030;
}
#cheader .nav-pills .nav-link {
  color: #08c;
  border-radius: 16px;
}
#cheader .nav-pills .nav-link:hover {
  background: #0000000d;
  color: #005580;
}
#cheader .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
  color: #fff;
  background-color: #0d6fb8;
}
#cheader .nav-item > a {
  padding: 4px 16px;  
  margin: 4px 8px;
}
#cheader .dropdown-menu {
  margin: 6px 0 !important;
  padding: 0;
  transform: translate3d(0, 2px, 0px);
}
#cheader .dropdown {
  padding: 8px;
}
#cheader .dropdown-menu a {
  padding: 8px 16px;  
}
#cheader .dropdown-menu hr {
  margin: 0;
}
.tab-content .row {
  padding: 0 8px 40px
}
.tab-content .tab-pane .col-lg-3,
.tab-content .tab-pane .col-lg-4,
.tab-content .tab-pane .col-md-4,
.tab-content .tab-pane .col-md-6 {
  padding: .75rem .75rem 1rem .75rem;
}
.tab-content .tab-pane .card-body {
  padding: 0.75rem 1rem;
}
.tab-content  .tab-pane .card {
  min-width: 210px;
}
.tab-content .tab-pane .card .tag span {
  margin: 0 0 0 4px;
  white-space: nowrap;
}
#page-top {
  bottom: 32px;
  display: none;
  font-size: 24px;
  opacity: .5;
  position: fixed;
  right: 1rem;
}
#page-top:hover {
  opacity: 1;
}
#page-top a {
  background: #000;
  text-decoration: none;
  color: #fff;
  text-align: center;
  border-radius: 28px;
  width: 50px;
  height: 50px;
  display: block;
  line-height: 50px;
}
footer#copyright {
  color: #808080;
  font-size: 12px;
  margin: 32px 0 0;
  text-align: center;
  white-space: nowrap;
}
footer.footer-dark {
  background: #3e3e3e;
  color: #fff;
}
footer.footer-dark .copyright{
  font-size: .75rem;
  margin: 0;
  padding: 0.5rem;
  text-align: center;
}
/* Modal - QR */
#qrModal {
  padding: 0 8px !important;
}
#qrModal .modal-dialog {
  margin: auto;
  max-width: 370px;
}
#qrModal .modal-body {
  padding: 2rem 2rem 0.5rem;
  text-align: center;
}
#qrModal #qrcode {
  cursor: pointer;
  font-size: 12px;
  width: 100%;
  height: 100%;
}
#flashcard #qrcode:hover,
#analytics #qrcode:hover {
  text-decoration: underline;
}
/* feedback */
#feedback {
  border-radius: 0.3rem 0.3rem 0 0;
  box-shadow:0 .125rem .25rem rgba(0,0,0,.075);
  position: fixed;
  bottom: 0;
  font-size: .9rem;
  right: 16px;
  width: 350px;
  z-index: 10;
}
#feedback #feedback-link {
  background: #00b535;
  border-radius: 0.3rem 0.3rem 0 0;
  color: #fff;
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;  
  opacity: .75;
  padding: 8px 16px;
  transition: .5s ;
}
#feedback #feedback-link:hover,
#feedback #feedback-link.active {
    opacity: 1;
}
#feedback  #feedback-link img {
  width: 20px;
  height: 20px;
  margin-right: 6px;
  vertical-align: -4px;
}
#feedback  #feedback-link i {
  float: right;
}
#feedback #feedback-wrap {
  background: #fff;
  border-top: 1px solid #00b535;
  border-right: 1px solid #00b535;
  border-left: 1px solid #00b535;
  display: none;
  height: 368px;
  padding: 8px 16px 16px;
}
#feedback #count {
  font-size: .7rem;
  margin: 4px 2px;
  text-align: right;
}
#feedback p {
  margin-bottom: 4px;
}
#feedback ::placeholder {
  color: #c0c0c0;
}
#feedback input {
  font-size: 1rem;
}
#feedback label {
  color: #808080;
  font-size: .9rem;
}
#feedback .form-floating>.form-control:focus, .form-floating>.form-control:not(:placeholder-shown) {
  padding-top: 2rem;
}
#feedback textarea {
  font-size: .9rem;
  height: 104px;
  margin-top: 2px;
}
#feedback #btn-submit {
  width: 100%;
}
#feedback .thanks {
  font-size: 1rem;
  padding: 16px;
  line-height: 2;
  background: #f5f5f5;
  border-radius: 0.3rem;
  margin: 8px 0px 16px;
}
#feedback #btn-feedback-close {
  display: none;
  margin: 0 auto;
}
#feedback #rating span {
  background: #ddd;
  border-radius: 2px;
  cursor: pointer;
  display: inline-block;
  font-size: 1rem;
  width: 56px;
  height: 32px;
  margin: 0 1px;
  line-height: 32px;
  text-align: center;
}
#feedback #rating span:hover,
#feedback #rating span.active {
  background: #00b535;
  color: #fff;
}
#feedback #rating {
  margin: 2px 0 16px;
}
#feedback #rating p {
  margin-bottom: 8px;
}
#rating-text {
  font-size: 11px;
  display: flex;
  justify-content: space-between;
}
#feedback #rating-text span {
  font-size: 10px;
}
#feedback #rate-btn {
  margin: 2px 0;
  display: flex;
  justify-content: space-between;  
}
#feedback  p.note {
  line-height: 1.6;
  padding-left: 1em;
  text-indent: -1em;
  font-size: .775rem;
}
@media (max-width: 992px) {
  #cheader {
    padding: 12px 0;
  }
  #cheader .nav-item > a {
    padding: 4px 12px;  
    margin: 0 4px;
  }
  #cheader .dropdown {
    padding: 0;
  }  
  #feedback {
    display: none;
  }
}
@media print{
  #feedback {
    display: none;
  }
}
/***********************************************************
 4.Content
***********************************************************/
#analytics .container-fluid,
#card .container-fluid,
#guide .container-fluid,
#video .container-fluid {
  display: -webkit-flex;
  display: flex;
  padding: 0;
}
#analytics h5,
#card .sidebar h5,
#guide h5 {
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 8px;
}
#card .row, 
#video .row {
  --bs-gutter-x: 0;
}
#flashcard #expired-count, 
#video-detail #expired-count {
  background: #198754;
  position: fixed;
  top: 8px;
  right: 8px;
  display: inline-block;
  padding: 0.35em 0.65em;
  font-size: .75em;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 2px;
  z-index: 10;
}
span[id*="cnt"].badge {
  height: 18px;
  margin: 0 0 0 5px;
  padding: 0;
  width: 24px;
  line-height: 18px;
}
/* Tag */
#tags .tag,
#categories .category,
#packs .pack {
  border: 1px solid #000;
  border-radius: 1rem;
  color: #333;
  cursor: pointer;
  display: inline-block;
  font-size: .75rem;
  padding: 0 10px;
  margin: 4px 0;
  white-space: nowrap;
}
#tags .tag.selected,
#categories .category.selected,
#packs .pack.selected {
  color: #fff;
  background-color: #000;
}
/* badge */
.badge {
  border-radius: 2px;
  font-size: 12px;
  font-weight: normal;
  margin: 0 .5rem;
  padding: 3px 5px;
  vertical-align: 1px;
}
/* Table */
.table {
  --bs-table-striped-bg: rgba(0, 0, 0, 0.02);
}
.table th {
  font-size: 13px;
  font-weight: normal;
}
.table th.tag {
  width: 140px;
}
.table th.unit {
  text-align: center;
  width: 120px;
}
.table td {
  padding: 12px 8px;
  vertical-align: middle;
}
.table td.unit {
  text-align: center;
}
#nav-03 {
  padding: 0 1rem;
}
#nav-03 .table td {
  padding: .25rem 1rem;
}
#nav-03 .table td .bi-volume-up-fill {
  color: #c0c0c0;
}
#nav-03 .table td.alphabet {
  padding: 0 .5rem;
}
#nav-03 #links {
  color: #c0c0c0;
  margin: .5rem;
}
#nav-03 #links span,
#nav-03 #links a {
  margin-right: .5rem;
}
#nav-03 #links a {
  text-decoration: none;
  color: #333;
}
#nav-03 #links a:hover {
  text-decoration: underline;
}
.badge-unit {
  border: 1px solid #707581;
  border-radius: 2px;
  color: #707581;
  font-size: .7rem;
  line-height: 1;
  margin: 0 4px 0 0;
  padding: 1px 4px;
  white-space: nowrap;
}
/* 再生ボタン */
a.play-link {
  color: #666;
  font-size: .85rem;
  font-weight: bold;
  margin: 0 24px 0 0;
  text-decoration: none;
  white-space: nowrap;
}
a.play-link:hover {
  color: #000;
}
a.play-link i {
  color: #0d6fb8;
  font-size: 22px;
  vertical-align: sub;
}
a.play-link:hover i {
  color: #fe9800;
}
/* 活動案ボタン（仮） */
a.guide-link {
  color: #666;
  font-size: .85rem;
  font-weight: bold;
  margin: 1rem 1.5rem 0 0;
  text-decoration: none;
  white-space: nowrap;
}
a.guide-link:hover {
  color: #000;
}
a.guide-link i {
  background: #198754;
  font-size: 10px;
  color: #fff;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: inline-block;
  text-align: center;
  line-height: 22px;
}
a.guide-link:hover i {
  background: #187247;
  color: #fff;
}
a.download-link {
  color: #666;
  font-size: .85rem;
  font-weight: bold;
  margin: 1rem 1.5rem 0 0;
  text-decoration: none;
  white-space: nowrap;
}
a.download-link:hover {
  color: #000;
}
a.download-link:hover .icon-center {
  background-color: #0056b3 !important;
}
/* ミッシングゲーム/フラッシュカードボタン（仮） */
a.game-link,
a.card-link {
  color: #666;
  font-size: .85rem;
  font-weight: bold;
  margin: 1rem 1.5rem 0 0;
  text-decoration: none;
  white-space: nowrap;
}
a.game-link:hover,
a.card-link:hover {
  color: #000;
}
a.game-link i,
a.card-link i {
  background: #0d6fb8;
  color: #fff;
  border-radius: 50%;
  font-size: 16px;
  margin: 0 4px 0 0;
  width: 22px;
  height: 22px;
  display: inline-block;
  text-align: center;
  line-height: 22px;
  padding: 0;
}
a.card-link i {
  font-size: 13px;
}
a.game-link:hover i,
a.card-link:hover i {
  background: #fe9800;
  color: #fff;
}

/* Sidebar */
.sidebar {
  box-shadow: inset -1px 0 0 #0000001a;
  height: calc(100vh - 64px);
  min-width: 300px;
  overflow-y: scroll;  
  padding: 1rem;
  width: 300px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.sidebar::-webkit-scrollbar {  
  display: none;
}
.sidebar section {
  margin: 10px 0;
}
.sidebar label {
  font-weight: bold;
  margin-bottom: .5rem;
}
.sidebar #textbook-block, 
.sidebar #keyword-block,
.sidebar #tags-block {
  margin-bottom: 1rem;
}
.sidebar #textbook-block.active, 
.sidebar #keyword-block.active, 
.sidebar #tags-block.active {
  transform: translatex(0);
}
.sidebar #keyword-block {
  position: relative;
}
.sidebar #keyword-block input[name=keyword] {
  padding-left: 34px;
}
.sidebar #keyword-block i {
  position: absolute;
  left: 10px;
  top: 6px;
  color: #9ba3b0;
}
#nodata {
  padding: 16px;
}

/* Modal Dialog - Video Player */
#videoModal .modal-header {
  color: #000;
  display: block;
  position: relative;
}
#videoModal .modal-header.playlist {
  aspect-ratio: 638 / 518;
  width: 100%;
}
#videoModal .modal-body {
  padding: 0;
}
#videoModal .modal-header h5 {
  margin: .5rem 0 .25rem;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}
#videoModal .modal-dialog {
  max-width: 640px;
}
#videoModal #qrcode {
  font-size: 11px;
  cursor: pointer;
  display: none;
}
#videoModal #qrcode canvas {
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
  position: absolute;
  top: 172px;
  left: 50%;
  padding: 10px;
  transform: translateY(-50%) translateX(-50%);
  background: #fff;
}
#videoModal #qr-title {
  position: absolute;
  top: 55px;
  left: 50%;
  font-weight: bold;
  font-size: 1rem;
  transform: translateY(-50%) translateX(-50%);
}
#videoModal #qr-url {
  position: absolute;
  top: 282px;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);  
}
#videoModal #qrcode:hover #qr-url {
  text-decoration: underline;
}
#videoModal #btn-copy {
  display: none;
  position: absolute;
  top: 317px;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  font-size: .9rem;
  border-radius: 16px;
  height: 32px;
}
#videoModal .modal-dialog .modal-header {
  background: #fff;
}
#videoModal .modal-dialog .modal-footer {
  border-top: 1px solid #dee2e6;
  border-bottom-right-radius: calc(0.3rem - 1px);
  border-bottom-left-radius: calc(0.3rem - 1px);
  display: flex;
}
.modal-footer .btn {
  font-size: .9rem;
  border-radius: 16px;
  height: 32px;
  line-height: 1;
  padding: 4px 12px;
}
/* Modal Dialog - Video Player */
#guideModal .modal-header {
  display: block;
  position: relative;
}
#guideModal .modal-body {
  padding: 24px 24px 0;
}
#guideModal .modal-header h5 {
  margin: .5rem 0 .25rem;
  font-size: 18px;
  font-weight: bold;
}
#guideModal .modal-dialog {
  max-width: 960px;
}
#guideModal .modal-footer {
  justify-content: center;
  border: none;
}

/* NED動画プレーヤー対応 */
.video_content {
  width: 100%;
  aspect-ratio: 16 / 9;
}
#videoModal .video-container #bvplayer.blur {
  filter: blur(2px);
  opacity: .3;
}
#videoModal .modal-footer {
  justify-content: center; 
}
#videoModal img.speaker {
  background-color: #fff;
  border: .5px solid #c0c0c0;
  border-radius: 9999px;
  padding: 1px;
  width: 32px;
}
#videoModal .speaker1-3 {
  position: absolute;
  left: 5px;
  top: 0;
}
#videoModal .speaker2-3 {
  position: absolute;
  left: 15px;
  top: 0;
}
#videoModal .speaker3-3 {
  position: absolute;
  left: 25px;
  top: 0;
}
#videoModal .speaker1-2 {
  position: absolute;
  left: 8px;
  top: 0;
}
#videoModal .speaker2-2 {
  position: absolute;
  left: 24px;
  top: 0;
}
#videoModal .time {
  color: #c0c0c0;
  text-align: right;
  font-size: .8rem;;
}
#videoModal .script-row {
  display: flex;
  align-items: center;
  padding: .25rem 1rem .25rem 0.5rem;
}
#videoModal .script-row:not(.no-time) {
  cursor: pointer;
}
#videoModal .script-row .script {
  padding: 0 .25rem;
}
#videoModal .script-row.highlight,
#videoModal .script-row:hover {
  background: #f3f3f3;
}
#videoModal .script-row .script .japanese {
  color: #6c757d;
  font-size: .8rem;
}
#videoModal .speaker-block {
  min-height: 32px;
  min-width: 64px;
  position: relative;
  text-align: center;
}
#videoModal div.time {
  flex-grow: 1;
}
/***********************************************************
 4.Content - Login
***********************************************************/
body#login {
  background: linear-gradient(180deg,rgba(13,111,184, 0.15),rgba(13,111,184, 0) 1000px);
  display: flex;
  height: 100%;
  line-height: 1.8;
}
#login main {
  margin: auto;
  width: 780px;
  text-align: center;
}
#login main p {
  margin: 0;
}
#login img#logo {
  margin: 0 auto 4px;
  max-width: 280px;
  width: 100%;
}
#login .form-floating {
  margin: 0 auto;
  position: relative;
  width: 270px;
}
#login .form-floating .bi {
  font-size: 18px;
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  cursor: pointer;
  opacity: .6;
}
#login a {
  color: #000;
  opacity: .6;
  text-decoration: none;
}
#login .bi:hover,
#login a:hover {
  opacity: 1;
  text-decoration: underline;
}
#login .form-check {
  margin: 0 auto;
  text-align: left;
  width: 270px;
}
#login .btn {
  margin: 16px auto 24px;
  width: 270px;
}
#login form {
  margin: 32px auto;
}
#login p.text-danger {
  margin: 0 0 4px;
}
#login .text-danger::before {
  content: "";
  display: inline-block;
}
#login input#login_id {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
#login input[type="password"] {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
@media (max-width: 768px) {
  #login img#logo {
    width: 240px;
  }
  #login main {
    margin: 32px 16px;
  }
  #login form {
    margin: 8px auto;
    width: auto;
    padding: 0;
  }   
  #login p.text-danger {
    text-align: center;
  }
}
/***********************************************************
 4.Content - top
***********************************************************/
#tools-logo {
  height: 40px;
}
#top #news {
  background: #ffd100;
  padding: 4px;
  text-align:center
}
#top #news a {
  color: #000;
  opacity: .7;
  text-decoration: none;
}
#top #news a:hover {
  color: #000;
  opacity: 1;
  text-decoration: underline;
}
#top #top-carousel {
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.6)) ,url(/img/top/background.jpg) no-repeat center center;
}
#top #top-carousel .carousel-item {
  height: 400px;
}
#top #top-carousel .col-lg-6:first-child {
  padding: 40px;
  text-align: center;
}
#top #top-carousel .row {
  background: rgba(255, 255, 255, .6);
}
#top #top-carousel .img-wrap {
  height: 320px;
  display: flex;
  justify-content: center;
  align-items: center;
}
#top #top-carousel img {
  filter: drop-shadow(0 .5rem 1rem rgba(0,0,0,.15));
  max-height: 100%;
  max-width: 100%;  
}
#top #top-carousel .col-lg-6:last-child {
  padding: 48px 64px 0 0;
}
#top #top-carousel .carousel-indicators [data-bs-target] {
  width: 8px;
  height: 8px;
  margin-right: 6px;
  margin-left: 6px;
  border-radius: 50%;
}
#top #top-carousel.carousel-dark .carousel-indicators [data-bs-target] {
  background-color: #666 !important;
}
#top #top-carousel h2 {
  font-size: 2.4rem;
  line-height: 1.4;
  margin-bottom: 16px;
  font-weight: bold;
  text-align: left;
}
#top #top-carousel .badge-new {
  font-size: .8rem;
  margin: 0;
  padding: 2px 8px;
}
#top .list-link {
  margin-top: 16px;
}
#top .list-link a {
  color: #000;
  font-size: .9rem;
  opacity: .7;
  text-decoration: none;
}
#top .list-link a:hover {
  opacity: 1;
  text-decoration: underline;
}
#top .carousel-control-next, .carousel-control-prev {
  width: 8%;
}
#top .container-fluid {
  background: linear-gradient(180deg ,rgba(0,175,229,0.25),rgba(255,255,255,0) 1200px);
  padding: 16px 48px;
}
#top .container-fluid .row{
  margin-bottom: 16px;
}
#top #summary .btn-theme {
  min-width: 200px; 
}
#top #kisosapo-link {
  margin-top: 16px;
}
#top .col-md-4 {
  padding: 16px;
}
#top .card-body {
  padding: 8px 24px;
}
#top h4 {
  font-size: 1.2rem;
  margin: 16px 0;
}
#top .col-md-4 .img-tn {
  margin-bottom: 16px;
}
#top .col-md-4 img.tn {
  width: 100%;
}
#top #kisosapo-lead {
  font-size: 1.4rem;
  max-width: 840px;
  margin: 48px auto;
  line-height: 1.8;
  text-align: center;
}
#top #kisosapo-lead .memo {
  font-size: .9rem;
  color: #666;
}
#top #kisosapo-link .btn{
  margin-right: 8px;
}
#top footer {
  font-size: .8rem;
  padding: 48px 0 16px;
}
/* Trend */
#top article#trend {
  margin-bottom: 24px;
  margin-top: -8px;
}
#top article#trend .trend {
  background-color: #fff;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 0.25rem;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
  margin: 8px 4px;
  padding: 8px 24px;
}
#top article#trend .trend img.program-logo {
  height: 16px;
  margin-bottom: 6px;
}
#list-flashcard .title,
#top article#trend #list-video .content {
  font-weight: bold;
}
#list-flashcard .content {
  color: #808080;
  font-size: 12px;
  line-height: 24px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
#list-video dl,
#list-flashcard dl {
  margin-bottom: 0;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 0.25rem;
}
#list-video dt,
#list-flashcard dt {
  float: left;
}
#list-video dd.caption,
#list-flashcard dd.caption {
  margin: 0;
  padding: 6px 6px 6px 104px;
  height: 92px;
  position: relative;
}
#list-video dd.caption::after,
#list-flashcard dd.caption::after {
  content: "";
  position: absolute;
  top: 45%;
  right: 16px;
  width: 80px;
  height: 80px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  transform: translateY(-50%);
  opacity: 0.45;
  pointer-events: none;
}
#list-video > .ranking:nth-of-type(1) dd.caption::after,
#list-flashcard > .ranking:nth-of-type(1) dd.caption::after {
  background-image: url('/img/prize/1.png');
}
#list-video > .ranking:nth-of-type(2) dd.caption::after,
#list-flashcard > .ranking:nth-of-type(2) dd.caption::after {
  background-image: url('/img/prize/2.png');
}
#list-video > .ranking:nth-of-type(3) dd.caption::after,
#list-flashcard > .ranking:nth-of-type(3) dd.caption::after {
  background-image: url('/img/prize/3.png');
}
#list-video dt.cover, 
#list-flashcard dt.cover{
  display: inline-block;
  background-color: #fff;
  background-position: center center;
  background-repeat: no-repeat;
  width: 92px;
  height: 92px;
  background-size: cover;
  border-right: 1px solid rgba(0, 0, 0, .15);
  border-top-left-radius: 0.2rem;
  border-bottom-left-radius: 0.2rem;
}
#list-video .icon-view,
#list-flashcard .icon-view {
  color: #808080;
  display: none;
  font-size: .825rem;
  position: absolute;
  top: 8px;
  right: 16px;
}

#top #map-list {
  background-color: #fff;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 0.25rem;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
  margin: 0 4px;
  padding: 8px 24px;
}
#top #map-list [class^="col-"] {
  padding: 16px;
  text-align: center;
}
#top #map-list [class^="col-"] a {
  margin-bottom: 4px;
  color: #000;
  opacity: .85;
  text-decoration: none;  
  transition: .2s ;
}
#top #map-list [class^="col-"] a:hover {
  opacity: 1;
  text-decoration: underline;
}
#top #map-list [class^="col-"] img {
  border-radius: 4px;
  margin-bottom: 6px;
}
@media (max-width: 992px) {
  #top .container-fluid {
    padding: 16px 32px;
  }
  #top #main-panel {
    background: rgba(255, 255, 255, .9);
    margin: 0 0 16px;
  }
  #top #portal-link {
    text-align: center;
  }
  #top #top-carousel .col-lg-6:last-child {
    height: 400px;
    padding: 48px 96px 0;
    text-align: center;
  }  
  #top #top-carousel .col-lg-6 h2 {
    margin-bottom: 32px;
  } 
}
@media (max-width: 768px) {
  #top .container-fluid {
    padding: 16px 16px 0;
  }
  #top #top-carousel {
    display: none;
  }
  #top div.lead {
    font-size: 1rem;
    line-height: 1.8;
    margin: 16px auto;
  }
  #top #kisosapo-link .btn{
    margin-bottom: 16px;
    width: 100%;
  }
  #top .col-md-4 {
    padding: 0 16px 16px;
  }
  #top .col-md-4 img.tn {
    height: auto;
    max-height: none;
    width: 100%;
  }
  #top #main-header {
    margin: 0 0 16px;
    padding: 16px;
  }
  #top .col-lg-8 {
    padding: 0
  }
  #top .col-md-6 {
    margin-bottom: 16px;
  }
  #top .btn-theme {
    width: 100%;
  }
  #top h4 {
    font-size: 1.2rem;
  }
  #top #kisosapo-lead {
    margin: 24px auto 0;
    padding: 0 8px;
    text-align: left;
  }
  #top #kisosapo-lead .memo {
    font-size: .875rem;
  }
  #top #map-list [class^="col-"] {
    padding: 8px;
  }
  #top article#trend {
    margin-bottom: 0;
    margin-top: -16px;
  }
  #top article#trend .col-md-6:first-child {
    margin-bottom: 8px;
  }
  #top article#trend #list-video .content {
    display: none;
  }  
}
/***********************************************************
 4.Content - Videos
***********************************************************/
#video {
  overflow: hidden;
}
#video main {
  background: #fff;
  flex: 1;
  height: calc(100vh - 64px);
  position: relative;
  overflow-y: scroll;
}
#video #video-header {
  background: #f5f5f5;
  height: 60px;
  margin-bottom: 12px;
}
#video #video-header #col-menu {
  padding: 4px 16px;
  overflow-x: scroll;
  position: relative;
  scrollbar-width: none; /*Firefox対応のスクロールバー非表示コード*/  
  -ms-overflow-style: none;/*Internet Explore対応のスクロールバー非表示コード*/   
}
#video #video-header .nav-pills .nav-link {
  margin-right: 20px;
  opacity: 0.3;
  padding: 0;
}
#video #video-header .nav-pills .nav-link.active,
#video #video-header .nav-pills .nav-link:hover {
  background-color: transparent;
  opacity: 1;
  transition: .5s ;
}
/* 番組概要 */
#video #summary.row {
  padding: 0 12px 40px
}
#video #summary .logo-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
#video #summary .card-body {
  padding-bottom: 27%;
}
#video #summary .content-num {
  border: 1px solid #707581;
  border-radius: 2px;
  color: #707581;
  font-size: .7rem;
  line-height: 1;
  padding: 1px 8px;
  white-space: nowrap;
}
#video #summary .card .badge-new {
  border: 1px solid #e83040;
  display: inline-block;
  font-size: .7rem;
  line-height: 1;
  margin: 0;
  padding: 1px 8px;
  position: initial;
  vertical-align: 1px;
}
#video #summary.row .col-lg-6,
#video #summary.row .col-xl-4 {
  padding: 12px;
}
#video #summary .target {
  margin: 0 -4px 0 0;
}
#video  #summary .target span {
  font-size: 11px;
  margin-right: 3px;
  padding: 4px;
}
#video #summary .program-logo {
  max-height: 22px;
  max-width: 100%;
}
#video #summary p {
  margin: 6px 0 0;
}
#video #col-menu::-webkit-scrollbar {  
  display: none;
}
#video #units {
  margin-top: 12px;
}
#video .card .badge-new,
#video .card .badge-update {
  position: absolute;
  top: 8px;
  right: 8px;
}
/* 対象学年 */
#video .target,
#guide-detail .target {
  font-size: 14px;
  margin: 0 20px -4px 0;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
}
#video .target span,
#guide-detail .target span {
  display: inline-block;
  border-radius: 50%;
  color: #fff;
  font-size: 12px;
  margin: 0 3px 0 0;
  padding: 5px;
}
#video .target span.target0,
#guide-detail .target span.target0 {
  background: #d3d3d3;
}
#video .target span.target1,
#guide-detail .target span.target1 {
  background: #333;
}
#video .radio-block {
  margin: .5rem 0;
}
/* メニューバーリンク */
#video .nav-scroller #btn-prev,
#video .nav-scroller #btn-next {
  cursor: pointer;
  display: none;
  position: absolute;
  top: 6px;
}
#video .nav-scroller #btn-prev {
  background: -moz-linear-gradient(left, #f5f5f5, #f5f5f5 50%,rgba(255,255,255, 0));
  background: -webkit-linear-gradient(left, #f5f5f5, #f5f5f5 50%,rgba(255,255,255, 0));
  background: linear-gradient(to right, #f5f5f5, #f5f5f5 50%,rgba(255,255,255, 0));
  display: none;
  padding-right: 24px;
  left: 12px;
}
#video .nav-scroller #btn-next {
  background: -moz-linear-gradient(left, rgba(255,255,255, 0),#f5f5f5 50%, #f5f5f5);
  background: -webkit-linear-gradient(left, rgba(255,255,255, 0),#f5f5f5 50%, #f5f5f5);
  background: linear-gradient(to right, rgba(255,255,255, 0),#f5f5f5 50%, #f5f5f5);
  padding-left: 24px;
  right: 12px;
}
#video .nav-scroller #btn-prev i,
#video .nav-scroller #btn-next i {
  color: #0d6fb8;
  font-size: 32px;
  opacity: .5;
  transition: opacity 0.25s ease;
}
#video .nav-scroller #btn-prev i:hover,
#video .nav-scroller #btn-next i:hover {
  opacity: 1;
}
#video .nav-scroller:hover #btn-prev,
#video .nav-scroller:hover #btn-next {
  opacity: 1;
}
#video .unit-area {
  border-top: .5px solid #d3d3d3;
  border-bottom: .5px solid #c0c0c0;
  padding: 1px 0 3px;
  margin: 8px 0 0;
}
#video .unit-area .tag > span {
  cursor: pointer;
}
#video .unit-area .tag > span:hover {
  color: #000;
}
#video #guide #line {
  border-bottom: 1px solid;
  height: 1px;
  position: absolute;
  top: 82px;
  width: calc(100% - 48px);
  z-index: 1;
}
#video .list-link {
  cursor: pointer;
}
#video .list-link:hover .card-footer {
  text-decoration: underline;
}
#video #recommend-flashcard .divider {
  border-top: 1px dashed rgba(0, 0, 0, .15);
  margin: 0 1.5rem;
  padding: 24px 0;
}
#video #recommend-flashcard #list-flashcard .row .col-md-6{
  padding: 0 .75rem 1rem ;
}
#video .video-container {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  max-width: 100%;
}
a.howto-link,
a.pdf-link {
  color: #000;
  display: block;
  opacity: .75;
  font-size: .9rem;
  text-decoration: none;
}
a.howto-link:hover,
a.pdf-link:hover {
  opacity: 1;
  text-decoration: underline;
}
@media (max-width: 992px) {
  #video #recommend-flashcard #list-flashcard {
    width: 100%;
  }
}
/***********************************************************
 4.Content - Quiz
***********************************************************/
body#video-detail {
  background : rgba(0,0,0, .025);
}
#video-detail .container-fluid {
  max-width: 780px;
  padding: 48px 56px;
  overflow: hidden;
  text-align: center;
}
#video-detail img#logo {
  display: block;
  margin: 0 auto 16px;
  width: 160px;
}
#video-detail img#program-logo {
  max-width: 340px;
  width: auto;
  max-height: 60px;
}
#video-detail h1 {
  font-weight: bold;
  font-size: 1rem;
  margin: 1.5rem 0;
}
#video-detail h1 span {
  color: #666;
  display: block;
  font-weight: normal;
  margin-top: .5rem;
}
#video-detail .btn-theme.btn-lg {
  width: 300px;
}
#video-detail p {
  margin: 0 0 8px;
}
#video-detail .balloon {
  filter: blur(5px);
}
/* Brightcove Player */
#video-detail .video-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;
}
#video-detail #quiz-section {
  margin: 24px 0 0;
}
#video-detail #card-section {
  margin: 24px 0 0;
}
#video-detail .quiz {
  background: #fff;
  border: 1px solid #c0c0c0;
  border-radius: 16px;
  display: none;
  padding: 32px;
  position: relative;
  margin: 32px 0 64px;
}
#video-detail .quiz .qno {
  background: #666;
  border-radius: 50%;
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  height: 54px;
  left: -27px;
  line-height: 54px;
  position: absolute;
  text-align: center;
  top: -24px;
  width: 54px;
}
#video-detail #btn-again {
  display: none;
  font-weight: bold;
  z-index: 1000;
}
#video-detail .quiz .question {
  font-size: 1.3rem;;
  font-weight: bold;
  line-height: 1.8;
  margin-bottom: 1rem;
  text-align: left;
}
#video-detail .btn-option div[id*="area_lb"],
#video-detail .btn-option div[id*="area_audio"],
#video-detail .question div[id*="area_lb"],
#video-detail .note div[id*="area_lb"] {
  display: none;
}
#video-detail .question div[id*="area_audio"],
#video-detail .note div[id*="area_audio"] {
  display: inline-block;
  margin: 0 0.5rem;
  opacity: .75;
}
#video-detail .question div[id*="area_audio"]:hover,
#video-detail .note div[id*="area_audio"]:hover {
  opacity: 1;
}
#video-detail .note div[id*="area_lb"] {
  margin: 0 0.5rem;
}
#video-detail .img-quiz {
  border-radius: 5px;
  margin: 1rem 0;
  width: 100%;
}
#video-detail img.icon-play {
  cursor: pointer;
  height: 36px;
  margin: 0 8px;
  width: 36px;
  vertical-align: -10px;
}
#video-detail img.icon-play:hover {
  opacity: .85;
}
#video-detail .quiz .question audio {
  display: block;
  margin: 1rem auto;
}
#video-detail .btn-option {
  border: 2px solid #dcdcdc;
  border-radius: 5px;
  color: #696969;
  cursor: pointer;
  line-height: 28px;
  margin: 0 0 10px;
  padding: 8px;
  position: relative;
  text-align: left;
}
#video-detail .btn-option .icon-speaker {
  height: 16px;
  margin: 0 8px;
  width: 16px;
}
#video-detail .btn-option.btn-image {
  display: inline-block;
  margin: .5rem;
  width: 100%;
  max-width: 170px;
}
#video-detail .btn-option.btn-image img.img-option {
  margin: 0.5rem 0;
  width: 100%;
}
#video-detail .btn-option.btn-sort-image {
  display: inline-block;
  margin: .5rem;
  width: 100%;
  max-width: 254px;
  text-align: center;
}
#video-detail .btn-option.btn-sort-image .img-quiz {
  margin: 0;
}
#video-detail .btn-option.btnn-sort-image img {
  width: 100%;
}
#video-detail li.vjs-playlist-item {
  padding: 4px 0;
}
#tools i {
  color: #fff;
  background: red;
  border-radius: 50%;
  font-size: 90px;
  max-width: 64px;
  width: 64px;
  height: 64px;
}
#video-detail .btn-option:not(.disabled):hover {
  border: 2px solid #000;
  color: #000;
}
#video-detail .btn-option.selected {
  background: #fe9800;
  border: 2px solid #000;
  color: #000;
}
/* 並べ替え問題 */
#video-detail .btn-option.sorted {
  border: 2px solid #000;
}
#video-detail .btn-option.sorted:after{
  position:absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color:#fff;
  font-size: 96px;
  border-radius: 3px;
  background-color: #fe9800b3;
  line-height: 278px;
}
#video-detail .btn-option.sorted.wrong:after{
  background-color: transparent;
}
#video-detail .btn-option.sorted1:after {content:"１";}
#video-detail .btn-option.sorted2:after {content:"２";}
#video-detail .btn-option.sorted3:after {content:"３";}
#video-detail .btn-option.sorted4:after {content:"４";}
#video-detail .btn-option.disabled {
  cursor: initial;
}
#video-detail .btn-option.disabled {
  opacity: .5;
}
#video-detail .btn-option.disabled.selected,
#video-detail .btn-option.disabled.sorted {
  opacity: 1;
}
#video-detail .btn-option.sorted.correct:after {
  background-color: #25c7f94d;
}
#video-detail .btn-option.sorted.wrong:after {
  background-color: #ff63634d;
}
#video-detail .btn-option.selected.correct,
#video-detail .btn-option.sorted.correct {
  background: #25c7f9;
  color: #fff;
}
#video-detail .btn-option.wrong {
  background: #ff6363;
  border: 2px solid #000;
  color: #000;
}
#video-detail .note {
  font-size: 1.4rem;
  line-height: 38px;
  margin: 2rem 0;
  text-align: left;
}
#video-detail #btn-start {
  transition: transform .2s;
}
#video-detail #btn-start:active {
  transform: scale(.95);
}
#video-detail .option-no {
  border: 2px solid #dcdcdc;
  border-radius: 50%;
  color: #dcdcdc;
  display: inline-block;
  height: 28px;
  line-height: 24px;
  margin-right: 8px;
  text-align: center;
  width: 28px;
}
#video-detail .selected .option-no {
  border: 2px solid #808080;
  color: #808080;
}
#video-detail .btn-option:not(.disabled):hover .option-no {
  border: 2px solid #000;
  color: #000;
}
#video-detail .btn-option.btn-image .judge,
#video-detail .btn-option.btn-sort-image .judge {
  height: 48px;
  position: absolute;
  top: -20px;
  right: -20px;
  width: 48px;
  z-index: 10;
}
#video-detail .btn-option.d-flex .judge {
  height: 48px;
  position: absolute;
  right: -16PX;
  width: 48px;
  z-index: 10;
  position: absolute;
  top: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
}
#video-detail .btn-option.selected .option-no {
  border: 2px solid #000;
  color: #000;
}
#video-detail .btn-option.selected.correct .option-no {
  border: 2px solid #fff;
  color: #fff;
}
#video-detail .btn-option.wrong .option-no {
  border: 2px solid #000;
  color: #000;
}
#video-detail .btn-image .option-no {
  margin: 0 8px 0 0 ;
}
#video-detail .btn-answer {
  padding: 8px 32px;
  margin: 16px 0;
  min-width: 210px;
  transition: transform .2s;
}
#video-detail .btn-answer:active {
  transform: scale(.95);
}
#video-detail #reward {
  padding: 5%;
  position: relative;
}
#video-detail img#perfect {
  position: absolute;
  top: 34%;
  right: -3%;
  width: 34%;
}
#video-detail #reward .picture {
  position: absolute;
  top: 24%;
  left: 0;
}
#video-detail #reward  .picture img {
  width: 40%;
}
#video-detail #reward .word {
  line-height: 80px;
  margin: 32px 0 0;
}
#video-detail #reward .word img {
  height: 100%;
  margin: auto;
  width: auto;
}
#video-detail .options {
  position: relative;
  z-index: 1;
}
#video-detail #copyright {
  color: #808080;
  font-size: 12px;
  margin-top: 32px;
}
/* comprehension-check */
#video-detail #comprehension-check {
  margin: 64px 0 0;
  height: 134px;
}
#comprehension-check .btn {
  margin: 8px;
  width: 30%;
}
#video-detail #comprehension-check ul{
  display: flex;
  margin: 0;
  padding: 0;
 }
#video-detail #comprehension-check li {
  cursor: pointer;
  display: inline-block;
  list-style: none;
  margin: 8px;
  width: 33.3%;
  border-radius: 4px;
  opacity: .9;
  padding: 8px;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
}
#video-detail #comprehension-check li i {
  display: block;
  font-size: 48px;
}
#video-detail #comprehension-check li.color1 {
  background: #fe9800;
}
#video-detail #comprehension-check li.color2 {
  background: #01aee5;
}
#video-detail #comprehension-check li.color3 {
  background: #00b434;
}
#video-detail #comprehension-check li:hover {
  opacity: 1;
  box-shadow: none;
} 
@media (max-width: 768px) {
  #video-detail .container-fluid {
    padding: 16px;
  }
  #video-detail .quiz {
    border-radius: 8px;
    padding: 16px;
    position: relative;
    margin: 32px 0;
  }
  #video-detail .quiz .qno {
    font-size: 16px;
    font-weight: bold;
    height: 36px;
    left: -12px;
    line-height: 36px;
    top: -16px;
    width: 36px;
  }
  #video-detail .btn-option.d-flex .judge {
    right: -24PX;
  }
  #video-detail .btn-option.btn-image {
    margin: 4px 2px;
    width: 100%;
    max-width: 89px;
  }
  #video-detail #reward .word {
    line-height: 64px;
    margin: 8px 0 0;
  }  
  #video-detail #reward .word img {
    max-height: 48px !important;
  }
}
@media (max-width: 376px) {
  #video-detail .btn-option.btn-image {
    max-width: 84px;
  }
}
/***********************************************************
 4.Content - card
***********************************************************/
#card {
  overflow: hidden;
}
#card main {
  background: #fff;
  flex: 1;
  height: calc(100vh - 64px);
  position: relative;
  overflow-y: scroll;
}
#card .sidebar #packs h5 a.howto {
  color: #000;
  opacity: .3;
  transition: opacity 0.5s ease;
}
#card .sidebar #packs h5 a.howto:hover {
  opacity: 1;
}
#card #btn-game {
  position: relative;
}
#card #packs .pack.disabled,
#card #categories .category.disabled {
  background-color: #0000000d;
  border: 1px solid #c0c0c0;
  color: #808080;
  cursor: default;
  opacity: .65;
}
#card #btn-game .badge-new {
  position: absolute;
  top: -8px;
  left: -8px;
  margin: 0;
}
/* 紹介動画 */
#card main.disabled {
  pointer-events: none;
  opacity: .75;
}
#card main.disabled video-js,
#card main.disabled a {
  pointer-events: auto;
}
#card main #disabled-mask {
  display:block;
  font-size: 36px;
  position:absolute;
  top: 0;
  left:0;
  width:100%;
  height:100%;
  color:#fff;
  margin-bottom: 24px;
  text-align:center;
  background-color: rgba(0, 0, 0, 0.5);
  padding: calc((45vh - 60px) / 2) 32px 0;
  -ms-overflow-style: none;
  z-index: 2;
}
#card main #disabled-mask p {
  font-size: 20px;
  margin: 24px 0;
}
#card main #disabled-mask span.button {
  border: 3px solid #fff;
  border-radius: 32px;
  display: inline-block;
  font-size: 24px;
  padding: 0 16px;
  margin: 0 8px;
  vertical-align: 6px;
}
#card main.disabled::-webkit-scrollbar{
  display: none;
}
#card main #disabled-mask .video-container {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  max-width: 540px;
  margin: 0 auto;
}

#card header #col-menu {
  background: #f5f5f5;
  padding: 4px 0;
  text-align: right;
  white-space: nowrap;
  width: 100%;
}
#card #link-select-all {
    display: none;
}
#card #btn-print {
  margin: 10px 25px 10px 0;
}
#card #card-list-header {
  padding: 16px 16px 0;
}
#card #card-list {
  padding: 0 8px 48px;
}
#card #btn-function {
  text-align: right;
}
#card #btn-function .btn-micro {
  border: 1px solid #c0c0c0;
  border-radius: 3px;
  font-size: .8rem;
  padding: 0 .5rem;
  margin-left: 0.25rem;
  vertical-align: middle;
  opacity: .8;
}
#card #btn-function .btn-micro:hover {
  opacity: 1;
}
#card .card {
  position: relative;
}
#card #s-count {
  color: #666;
  font-size: .9rem;;
  margin-right: 8px;
  vertical-align: middle;
}
#card #s-count:hover {
  color: #000;
  cursor: pointer;
  text-decoration: underline;
}
#card .card:hover {
  transition: .5s ;
}
#card .card.selected {
  background-color: #4db76f4d;
}
#card .card-body {
  padding: 1.5rem 1rem 1rem;
}
#card .card-body .badge-new {
  position: absolute;
  top: 8px;
  right: 8px;
}
#card .bi-volume-up-fill {
  font-size: 20px;
  cursor: pointer;
  margin-left: 5px;
  opacity: .5;
  vertical-align: middle;
}
#card .bi-volume-up-fill:hover {
  opacity: 1;
}
#card .card i.bi-image {
  font-size: 4rem;
  opacity: .25;
}
#card .card-body i.bi-square {
  color: #d3d3d3;
}
#card .card-body i.bi-check-square {
  color: #666;
}
#card .card-body i.bi-square,
#card .card-body i.bi-check-square {
  cursor: pointer;
  position: absolute;
  top: 8px;
  left: 8px;
  line-height: 1;
  background: #fff;
}
#card .card-body p {
  font-weight: bold;
  margin: 0;
}
#card .picture {
  cursor: pointer;
  margin: .5rem 0 1rem;
  width: 100%;
}
/***********************************************************
 4.Content - Flashcard
***********************************************************/
body#flashcard {
  background: rgba(0,175,229,0.05);
}
#flashcard .container-fluid {
  overflow: hidden;
  padding: 32px;
}
#flashcard .balloon {
  filter: blur(6px);
}
/* swiper */
#flashcard .swiper {
  margin: 0 auto;
  aspect-ratio: 3 / 4;
  max-height: calc(100vh - 64px);
  height: 100%;
}
#flashcard .swiper-slide {
  border: 1px solid #666;
  border-radius: 18px;
  text-align: center;
}
#flashcard .swiper-slide .card-img img {
  width: 100%;
  border-radius: 0.25rem!important;
}
/* controller */
#controller {
  border-radius: 8px;
  bottom: 8px;
  left: 48px;
  padding: 16px;
  position: fixed;
  white-space: nowrap;
  z-index: 2;
}
#controller h1 {
  font-size: 1.4rem;
}
#flashcard .form-switch{
  line-height: 16px;
  margin-bottom: 8px;
  padding: 0;
}
#flashcard .form-switch:last-child{
  margin-bottom: 0;
}
#controller .form-switch .form-check-input {
  float: inherit;
  margin: 0;
}
#controller .form-check.form-check-inline {
  margin-right: 0.75rem;
  white-space: nowrap;
}
#controller .button-block {
  display: block;
  margin-top: 8px;
}
#controller .button-block .btn-circle {
  margin: 2px;
}
#flashcard .card-img {
  padding: 12% 12% 8%;
}
#flashcard .img-wrap {
  height: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#flashcard img.word,
#flashcard img.blind {
  max-height: 100%;
  max-width: 100%;
  height: auto;
  width: auto;
  object-fit: contain;
}
#flashcard #controller #btn-shuffle-sp {
  color: #333;
}
#flashcard #controller .radio-speeds {
  margin: -8px 0 8px 0;
}
#flashcard #controller.portrait {
  text-align: center;
  position: inherit;
  bottom: inherit;
  left: inherit;
  width: 240px;
  margin: 8px auto;
}
#flashcard .icon-play {
  cursor: pointer;
  height: 38px;
  width: 38px;
  margin: 4% auto 0;
}
#flashcard img#logo {
  display: none;
  margin: 0 auto 32px;
  width: 200px;
}
@media (max-width: 768px) {
  body#flashcard {
    background: none;
  }
  #flashcard .swiper {
    margin: 16px auto 24px;
    max-width: 420px;
    width: 100%;
    aspect-ratio: 3 / 4;
    max-height: none;
    height: auto;
  }
  #flashcard .container-fluid {
    max-width: 420px;
    padding: 32px 64px 0;
  }
  #flashcard .modal-body {
    padding: 32px 0 0.5rem;
  }  
  #flashcard img#logo {
    display: block;
  }
  #flashcard #controller {
    text-align: center;
    position: inherit;
    bottom: inherit;
    left: inherit;
    width: 240px;
    margin: 8px auto;
    padding: 8px;
  }
  #flashcard #controller #btn-fullscreen {
    display: none;
  }
  #flashcard h1 {
    display: none;
  }
}
/***********************************************************
 4.Content - printout
***********************************************************/
body#printout {
  background: #efefef;
}
#printout .container {
  background: #fff;
  max-width: 900px;
  padding: 3rem;
}
#printout .waku {
  break-before: page;
  border: 1px solid #000;
  border-radius: 30px;
  padding: 1.3rem 1.3rem 0 1.3rem;
  margin-bottom: 60px;
}
#printout .word-container {
  border: 10px solid #000;
  border-radius: 30px;
  padding: 2rem;
  text-align: center;
}
#printout .word {
  line-height: 210px;
}
#printout .copyright {
  margin: 0 2rem;
  text-align: right;
}
#printout .picture {
  width: 600px;
  height: 600px;
  padding: 3rem;
  margin: 1rem auto;
}
#printout .picture img:not(.no-image) {
  height: 100%;
  aspect-ratio: 1 / 1;
}
#printout .text-wrap {
  line-height: 120px;
  margin: 40px 0 60px;
}
#printout img.word {
  width: auto;
  height: 100%;
  margin: auto;
}
@media print{
  @page {
    size: 210mm 275mm;
    margin: 2rem;
  }
  body#printout  {
    background: #fff;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  #printout .container {
    padding: 0;
    max-width: none;
  }
  #printout .word-container,
  #printout .waku {
    margin: 0;
  }
}
/***********************************************************
 4.Content - Guide
***********************************************************/
#guide #targets .target {
  border: 1px solid #000;
  border-radius: 1rem;
  color: #333;
  cursor: pointer;
  display: inline-block;
  font-size: .75rem;
  padding: 0 10px;
  margin: 4px 0;
  white-space: nowrap;
}
#guide main {
background: #fff;
display: block;
padding: 16px 1.5rem;
width: 100%;
position: sticky;
overflow-y: scroll;
height: calc(100vh - 64px);
}
#analytics #line,
#guide #line {
border-bottom: 1px solid;
height: 1px;
position: absolute;
top: 55px;
width: 100%;
width: calc(100% - 48px);
}
#guide .table th {
font-size: .8rem;
background: #fff;
}
#guide td.img-guide img {
height: 48px;
width: 48px;
object-fit: cover;
}
#guide .table-container {
background: #fff;
border: 1px solid rgba(0,0,0,.125);
border-radius: 0.25rem;
padding: 24px;
position: relative;
}
#table-wrap {
height: calc(100vh - 184px);
overflow-y: scroll;
}
#table-wrap-dialog {
max-height: 503px;
overflow-y: scroll;
position: relative;
}
#guide .table {
margin: 0;
}
#guide .table th, 
#guide .table td:not(.guide-title) {
padding: 6px 12px;
text-align: center;
white-space: nowrap;
}
#guide .table td.guide-title {
padding: 8px 0;
}
#guide .table td.target {
font-size: 14px;
margin-right: 1rem;
line-height: 1;
white-space: nowrap;
}
#guide .target span.target0 {
background: #d3d3d3;
}
#guide .target span.target1 {
background: #333;
}
#guide .target span {
display: inline-block;
border-radius: 50%;
color: #fff;
font-size: 12px;
margin: 0 2px;
padding: 5px;
}
td span.none {
color: #c0c0c0;
}
#guide #targets-block .target.selected {
color: #fff;
background-color: #000;
}
#guide #count {
line-height: 1;
margin: 8px 0;
}
#guide .tag span {
  margin-right: 0.5rem;
  white-space: nowrap;
}
/***********************************************************
 4.Content - Guide Detail
***********************************************************/
body#guide-detail {
  background: #efefef;
}
#guide-detail main {
  margin: 24px 0;
}
#guide-detail .container-fluid {
  background: #fff;
  margin: 32px auto;
  padding: 64px;
  width: calc(100vw - 128px);
}
#guide-detail h1 {
  font-size: 30px;
  margin: 36px 0 12px;
}
#guide-detail h2 {
  background: #000;
  color: #fff;
  font-size: 18px;
  display: inline-block;
  padding: 2px 16px;
}
#guide-detail .table th {
  text-align: center;
  white-space: nowrap;
}
#guide-detail .table th:first-child {
  width: 5%;
}
#guide-detail .table th:nth-child(2) {
  width: 25%;
}
#guide-detail .table th:nth-child(3) {
  width: 45%;
}
#guide-detail .table th:nth-child(4) {
  width: 25%;
}
#guide-detail .table td {
  font-size: .9rem;
  line-height: 1.6;
  vertical-align: top;
}
#guide-detail .table td p {
  margin-bottom: .75rem;
}
#guide-detail .table td p:last-child {
  margin: 0;
}
#guide-detail .text-blue {
  color: #006ee0;
}
#guide-detail td.time {
  text-align: center;
  white-space: nowrap;
}
#guide-detail td.content {
  width: 40%;
}
#guide-detail td.content p:last-child{
  margin-bottom: 0;
}
#guide-detail td.content li p:last-child {
  margin-bottom: 10px;
}
#guide-detail td.content li:last-child p:last-child {
  margin-bottom: 0;
}
#guide-detail td.content li + li {
  padding: 4px 0;
}
#guide-detail td ul {
  margin: 0 0 0 -16px;
}
#guide-detail td ol li > ul {
  list-style-type: disc;
  margin-top: 16px;
  margin-bottom: 8px;
}
#guide-detail td ol {
  margin: 0 0 0 -8px;
}
#guide-detail .btn-action {
  align-items: center;
  display: flex;
  line-height: 1.2;
  margin: 8px 0 0 0;
  text-align: left;
  white-space: nowrap;
  min-width: 168px;
}
#guide-detail .button-image {
  margin: 0 6px 0 -4px;
  height: 32px;
  background: rgba(255, 255, 255, 0.75);
  border-radius: .2rem;
  padding: 2px;
}
#guide-detail .copyright {
  color: #808080;
  font-size: .75rem;
  margin-top: 32px;
  text-align: center;
}
@media print {
  @page {
    size: 210mm 275mm;
    margin: 2rem;
  }
  #guide-detail .container-fluid {
    box-shadow: none;
    font-size: 12px;
    padding: 0;
  }
  body#guide-detail {
    background: #fff;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  #guide-detail .container-fluid {
    box-shadow: none !important;
    margin: 0;
    padding: 0;
    width: 100%;
  }
  #guide-detail #btn-print,
  #guide-detail #btn-close {
    display: none;
  }
  #guide-detail .btn {
    background: #d3d3d3;
    border: none;
    color: #fff;
  }
  #guide-detail .table td,
  #guide-detail .table th {
    font-size: 12px;
    padding: 8px;
  }
  #guide-detail td ol {
    margin: 0 0 0 -16px;
  }
  #guide-detail td ol li > ul {
    margin: 8px 0 0 -20px;
  }
}
/***********************************************************
 4.Content - Junior
***********************************************************/
body#junior {
  background-color: #f8f9fa !important;
}
body#junior .container-fluid {
  padding: 0 64px;
}
#junior #link-grade {
  background: #f5f5f5;
  height: 59px;
  padding: 10px 0;
  text-align: center;
  top: 65px;
}
#junior #link-grade .nav-pills .nav-link {
  color: #08c;
  border-radius: 16px;
  margin: 4px 8px;
  padding: 4px 16px;
}
#junior #link-grade .nav-pills .nav-link:hover {
  background: #0000000d;
  color: #005580;
}
#junior #link-grade .nav-pills #pills-grade1-tab.nav-link.active {
  color: #fff;
  background-color: #56C2E3;
}
#junior #link-grade .nav-pills #pills-grade2-tab.nav-link.active {
  color: #fff;
  background-color: #FF8585
}
#junior h1 {
  font-size: 30px;
  margin: 32px 0 12px;
}
#junior p.lead {
  color: #666;
  margin: 0;
}
/* card */
#junior .card {
  min-height: 300px;
}
#junior .card .card-header {
  color: #fff;  
  font-size: 1.2rem;
  text-align: center;
}
#junior .card.grade1 {
  border-color:#56C2E3;
}
#junior .card.grade1 .card-header {
  background: #56C2E3;
  border: 0;
}
#junior .card.grade1 .card-footer {
  background: #ecfaff;
}
#junior .card .nodata {
  color: #a9a9a9;
  padding: 150px 0;
  text-align: center;
}
#junior .card.grade2 {
  border-color:#FF8585;
  min-height: 368px;
}
#junior .card.grade2 .card-header {
  background: #FF8585;
  border: 0;
  color: #fff;
}
#junior .card.grade2 .card-footer {
  background: #fff1f1;
}
#junior .card p {
  margin: 0 0 8px;
}
#junior .card p.card-text.goal {
  font-weight: bold;
  margin-bottom: 8px;
}
#junior .card p.card-text.content {
  font-size: .875em;
  margin-bottom: 8px;
}
#junior .card p.card-text.vocabulary {
  font-size: .875em;
}
#junior  .card .list-group-item {
  padding: 16px;
}
#junior .card .expression,
#junior-detail .expression {
  background: #fff;
  border-radius: 4px;
  font-size: .9rem;
  line-height: 1.6;
  padding: 8px 16px;
  margin: 12px 0;
  position: relative;
}
#junior .card.grade1 .expression,
#junior-detail .grade1 .expression {
  border: 2px dashed #56C2E3;
}
#junior .card.grade2 .expression,
#junior-detail .card.grade2 .expression {
  border: 1px dashed #FF8585;
}
#junior .card .badge-tltle,
#junior-detail .badge-tltle,
#junior-print .badge-tltle {
  display: inline-block;
  font-size: 12px;
  line-height: 1;
  margin: 0 0 6px 0;
  border-radius: 3px;
  padding: 4px 16px;
  font-weight: bold;
}
#junior .card.grade1 .badge-tltle,
#junior-detail .grade1 .badge-tltle,
#junior-print .grade1 .badge-tltle {
  border: 1.5px solid #56C2E3;
  color: #56C2E3;
}
#junior .card.grade2 .badge-tltle,
#junior-detail .grade2 .badge-tltle,
#junior-print .grade2 .badge-tltle {
  border: 1.5px solid #FF8585;
  color: #FF8585
}
#junior-detail .modal-dialog {
  max-width: 640px;
}
#junior-detail .modal-body {
  line-height: 1.6;
  padding: 16px 32px 8px;
}
@media (max-width: 992px) {
  #junior main {
    padding: 0;
  }
  body#junior .container-fluid {
    padding: 0 16px;
  }   
}
/***********************************************************
 4.Content - Junior
***********************************************************/
body#junior-print {
  background: #fff;
}
body#junior-print .container-fluid {
  padding: 0 64px;
}
#junior-print #link-grade {
  display: none;
}
#junior-print #link-grade .nav-pills .nav-link {
  color: #08c;
  border-radius: 16px;
  margin: 4px 8px;
  padding: 4px 16px;
}
#junior-print #link-grade .nav-pills .nav-link:hover {
  background: #0000000d;
  color: #005580;
}
#junior-print #link-grade .nav-pills #pills-grade1-tab.nav-link.active {
  color: #fff;
  background-color: #56C2E3;
}
#junior-print #link-grade .nav-pills #pills-grade2-tab.nav-link.active {
  color: #fff;
  background-color: #FF8585
}
#junior-print h1 {
  font-size: 30px;
  margin: 64px 0 12px;
}
#junior-print p.lead {
  color: #666;
  margin: 0;
}
/* card */
#junior-print .card {
  min-height: 300px;
}
#junior-print .card .card-header {
  color: #fff;  
  font-size: 1.2rem;
  text-align: center;
}
#junior-print .card.grade1 {
  border-color:#56C2E3;
}
#junior-print .card.grade1 .card-header {
  background: #56C2E3;
  border: 0;
}
#junior-print .card.grade1 .card-footer {
  background: rgb(61 108 168 / 10%);
}
#junior-print .card .nodata {
  color: #a9a9a9;
  padding: 150px 0;
  text-align: center;
}
#junior-print .card.grade2 {
  border-color:#FF8585;
  min-height: 368px;
}
#junior-print .card.grade2 .card-header {
  background: #FF8585;
  border: 0;
  color: #fff;
}
#junior-print .card.grade2 .card-footer {
  background: rgb(227 84 126 / 10%);
}
#junior-print .card p {
  margin: 0 0 8px;
}
#junior-print .card p.card-text.goal {
  font-weight: bold;
  margin-bottom: 8px;
}
#junior-print .card p.card-text.content {
  font-size: .875em;
  margin-bottom: 8px;
}
#junior-print .card p.card-text.vocabulary {
  font-size: .875em;
}
#junior-print  .card .list-group-item {
  padding: 16px;
}
#junior-print .card .expression {
  background: #fff;
  border-radius: 4px;
  font-size: .9rem;
  line-height: 1.6;
  padding: 8px 16px;
  margin: 12px 0;
  position: relative;
}
#junior-print .card.grade1 .expression {
  border: 2px dashed #56C2E3;
}
#junior-print .card.grade2 .expression {
  border: 2px dashed #FF8585;
}
#junior-print footer#copyright {
  margin: 0 0 48px;
}
@media (max-width: 992px) {
  #junior-print main {
    padding: 0;
  }
  body#junior-print .container-fluid {
    padding: 0 16px;
  }   
}
/***********************************************************
 4.Content - Junior-detail
***********************************************************/
body#junior-detail {
  background: #efefef;
}
#junior-detail .container-fluid {
  background: #fff;
  margin: 32px auto;
  padding: 64px;
  width: calc(100vw - 128px);
}
#junior-detail h1 {
  font-size: 30px;
  margin: 16px 0 12px;
  text-align: center;
}
#junior-detail h3 {
  color: #666;
  font-size: 20px;
  margin: 16px 0;
  text-align: center;
}
#junior-detail .howto-link i {
  border: 1px solid #666;
  width: 32px;
  padding: 8px;
  border-radius: 50%;
  margin-right: 18px;
  display: inline;
  font-size: 16px;
}
#junior-detail .howto-link:hover i {
  background: #000;
  color: #fff;
}
#junior-detail #summary {
  margin: 32px 0;
  text-align: left;
}
#junior-detail #summary .table,
#junior-detail #video-list .table{
  margin: 0;
}
#junior-detail #video-list {
  margin: 8px 0 16px;
}
#junior-detail #summary table td {
  padding: 16px;
  width: 33%;
}
#junior-detail table td {
  padding: 12px;
}
#junior-detail .tab-content .row {
  padding: 0;
}

#junior-detail #video-list table td.action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
#junior-detail #video-list table td.action .action-row {
  display: flex;
  justify-content: center; /* Center align items horizontally */
  gap: 16px; /* Provide some gap between image and links */
  margin-top: 4px;
}
#junior-detail #video-list table img.tn {
  border-radius: 2px;
  max-width: 128px;
}
#junior-detail nav {
  position: relative;
}
#junior-detail a.howto-link {
  display: inline-block;
  position: absolute;
  top: 4px;
  right: 8px;
}
#junior-detail .nav-tabs .nav-link {
  color: #808080;
  margin-right: 8px;
}
#junior-detail .nav-link,
#junior-detail .nav-link:hover {
  background-color: #dee2e659;
  margin-right: 8px;
}
#junior-detail .nav-link.active,
#junior-detail .nav-link:hover {
  background-color: transparent;
  color: #000;
}
#junior-detail .table {
  margin: 0;
}
#junior-detail .table th {
  text-align: center;
  white-space: nowrap;
  padding: 4px 0;
}
#junior-detail .table td {
  font-size: .9rem;
  line-height: 1.6;
  vertical-align: top;
}
#junior-detail #nav-tabContent {
  border: 1px solid #dee2e6;
  border-color: #fff #dee2e6 #dee2e6 #dee2e6;
  padding: 16px;
}
#junior-detail td.min {
  text-align: center;
  white-space: nowrap;
}
#junior-detail .table td p {
  margin-bottom: .75rem;
}
#junior-detail .table td p:last-child {
  margin: 0;
}
#junior-detail td.content {
  width: 40%;
}
#junior-detail td.content p:last-child{
  margin-bottom: 0;
}
#junior-detail td.content li p:last-child {
  margin-bottom: 10px;
}
#junior-detail td.content li:last-child p:last-child {
  margin-bottom: 0;
}
#junior-detail td.content li + li,
#junior-detail td.memo li + li {
  padding: 4px 0;
}
#junior-detail td.memo {
  width: 30%;
}
#junior-detail td ul {
  margin: 0 0 0 -16px;
}
#junior-detail td ol li > ul {
  list-style-type: disc;
  margin-top: 16px;
  margin-bottom: 8px;
}
#junior-detail td ol {
  margin: 0 0 0 -8px;
}
#junior-detail td.greeting table td {
  padding: 2px 4px 0 2px;
}
#junior-detail a.play-link {
  display: inline-block; /* Make the links inline-block elements */
  margin: 4px 0;
}
#junior-detail table td.list-title {
  width: 168px;
}
#junior-detail #video-list table th:nth-child(1) {
  width: 5%;
}
#junior-detail #video-list table th:nth-child(2) {
  width: 35%;
}
#junior-detail #btn-block {
  margin: 24px;
}
#junior-detail .copyright {
  color: #808080;
  font-size: .75rem;
  margin-top: 32px;
  text-align: center;
}
/* Modal */
#junior-detail .modal h5.title {
  font-size: 18px;
  font-weight: bold;
  margin: 8px 0;
}
@media print {
  @page {
    size: 210mm 275mm;
    margin: 2rem;
  }
  #junior-detail .container-fluid {
    box-shadow: none;
    font-size: 12px;
    padding: 0;
  }
  body#junior-detail {
    background: #fff;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  #junior-detail .container-fluid {
    box-shadow: none !important;
    margin: 0;
    padding: 0;
    width: 100%;
  }
  #junior-detail #video-list table img.program-logo {
    height: 16px;
    margin: 4px 0;
  }  
  #junior-detail #video-list table img.tn {
    width: 160px;
  }  
  #junior-detail #btn-block {
    display: none;
  }
  #junior-detail .btn {
    background: #d3d3d3;
    border: none;
    color: #fff;
  }
  #junior-detail .table td,
  #junior-detail .table th {
    font-size: 12px;
    padding: 8px;
  }
  #junior-detail td ol {
    margin: 0 0 0 -16px;
  }
  #junior-detail td ol li > ul {
    margin: 8px 0 0 -20px;
  }
}
/***********************************************************
 4.Content - error
***********************************************************/
#error .container-fluid {
  display: inherit;
  padding: 90px 1rem;
  text-align: center;
}
#error img#logo {
  filter: drop-shadow(2px 2px 2px rgba(0,0,0,.25));
  max-width: 160px;
  width: 75%;
}
#error h1 {
  font-weight: bold;
  font-size: 1rem;
  line-height: 2.2;
  margin: 32px 0;
}
#error #copyright {
  color: #808080;
  font-size: 12px;
  margin: 60px 0 30px;
}
#error img#charactor {
  max-width: 200px;
  width: 100%;
}
/***********************************************************
 4.Content - game
***********************************************************/
body#game {
  align-items: center;
  background: linear-gradient(180deg,rgba(0,175,229,0.2),rgba(239,252,248,0) 1200px);
  display: flex;
  height: 100%;
}
#game .container-fluid {
  padding: 32px 32px 64px;
}
#game .card {
  border-radius: 16px;
}
#game .card.hide {
  background: transparent;
  border: 3px dashed #c0c0c0;
  box-shadow: none !important;
  box-sizing: border-box;
}
#game .card.hide i,
#game .card.hide .img-guard {
  display: none;
}
#game .picture {
  cursor: pointer;
  padding: 32px;
  position: relative;
}
#game .picture i {
  position: absolute;
  top: 16px;
  left: 24px;
  opacity: .25;
  font-size: 24px;
  opacity: .1;
  z-index: 2;
}
#game .picture:hover i {
  opacity: 1;
}
#game .card.hide div[id*="area_audio"] {
  opacity: 0;
}
#game .card.hide .img-question {
  opacity: .25;
  margin: 16px 0 22px;  
}
#game .card.hide .picture:hover .img-question {
  opacity: .5;
}
#game .icon-play {
  cursor: pointer;
  height: 38px;
  margin: 0 auto;
  opacity: .75;
  width: 38px;
}
#game .hide .icon-play{
  display: none;
}
#game .icon-play:hover {
  opacity: 1;
}
#game .balloon {
  filter: blur(5px);
}
#game .modal-dialog {
  max-width: 640px;
}
#game #howtoModal ol li {
  line-height: 1.8;
  padding: 4px 0;
}
#game .item-block {
  display: grid;
  justify-content: center;
  padding: 0 56px;
}
#game .item-block.item2 {
  gap: 64px;
  grid-template-columns: 40% 40%;
}
#game .item-block.item3 {
  gap: 40px;
  grid-template-columns: 33% 33% 33%;
}
#game .item-block.item4 {
  gap: 32px;
  grid-template-columns: 25% 25% 25% 25%;
}
#game .item-block.item5 {
  gap: 24px;
  grid-template-columns: 20% 20% 20% 20% 20%;
}
#game .item-block .card {
  padding: 0 0 24px;
}
/***********************************************************
 4.Content - analytics
***********************************************************/
#analytics main {
  background: #fff;
  display: block;
  padding: 16px 1.5rem;
  width: 100%;
  position: sticky;
  overflow-y: scroll;
  height: calc(100vh - 64px);
}
#analytics #count {
  line-height: 1;
  margin: 8px 0;
}
#analytics .note span {
  font-size: .725rem;
  padding: 4px 6px 4px 4px;
  background: transparent;
}
#analytics .note .color0 {
  color: #d3d3d3;
}
#analytics .note .color1 {
  color: #fe9800;
}
#analytics .note .color2 {
  color: #01aee5;
}
#analytics .note .color3 {
  color: #00b434;
}
#analytics main .table-container {
  background: #fff;
  border: 1px solid rgba(0,0,0,.125);
  border-radius: 0.25rem;
  font-size: .9rem;
  position: relative;
  padding: 24px;
}
#analytics .table th {
  text-align: center;
  white-space: nowrap;
  font-size: .8rem;
  background: #fff;
  padding: 6px 8px;
}#analytics th.action {
  min-width: 110px;
}
#analytics td {
  padding: 12px 4px;
}
#analytics td .btn-circle {
  margin: 2px 1px;
}
#analytics td.created {
  padding: 12px 0 12px 8px;
}
#analytics td.created span{
  white-space: nowrap;
}
#analytics td .exec-per {
  font-size: 11px;
  margin-bottom: 2px;
  text-align: center;
}
#analytics .status {
  color: #666;
  font-size: 11px;
  margin: 4px 0 0 0;
}
#analytics .status span {
  margin-right: 8px;
}
#analytics .words {
  color: #666;
  font-size: 12px;
  line-height: 1.2;
}
#analytics td.content-img {
  text-align: center;
  width: 96px;
}
#analytics td.content-img img {
  border-radius: 2px;
  height: 48px;
}
#analytics td.special {
  text-align: center;
  font-size: 12px;
  color: #666;
  line-height: 1;
}
#analytics td.special img {
  display: block;
  margin: 0 auto 2px;
  width: 30px;
}
#analytics .program-logo {
  display: block;
  height: 16px;
  margin-bottom: 4px;
}
#analytics .rating span {
  padding: 0 4px;
}
#analytics .progress {
    height: 10px;
    min-width: 80px;
    border-radius: 8px;
}
#analytics .rating i {
  margin-right: 4px;
}
#analytics .color1 {
  background: #fe9800;
}
#analytics .color2 {
  background: #01aee5;
}
#analytics .color3 {
  background: #00b434;
}
#analytics .badge-valid {
  padding: 2px 16px;
  background: #36eb9729;
  border: 1px solid #198754;
  border-radius: 2px;
  display: inline-block;
  font-size: 11px;
  color: #198754;
  line-height: 1;
  margin-bottom: 2px;
  white-space: nowrap;
}
#analytics .badge-invalid {
  padding: 2px 5px;
  border: 1px solid #a9a9a9;
  border-radius: 2px;
  display: inline-block;
  font-size: 11px;
  color: #a9a9a9;
  line-height: 1;
  margin-bottom: 2px;
  white-space: nowrap;
}
#analytics .btn-circle.disabled {
  opacity: .25;
}
#analytics .alert {
  position: absolute;
  top: 82px;
  right: 16px;
  z-index: 2;
  padding: 12px 16px;
  min-width: 360px;
}
.btn-container {
  display: inline-block;
}
#analytics span.target {
  padding: 2px 6px;
  background: #fff;
  border: 1px solid #666;
  border-radius: 2px;
  font-size: 11px;
  color: #666;
  line-height: 1;
  white-space: nowrap;
  margin-left: 4px;
}
#analytics .btn-qr span {
  margin-top: -10px;
  padding: 10px;
}
#analytics .form-check .note {
  color: #666;
  font-size: .85rem;
}
#analytics .form-check .note p {
  margin: 0 0 8px 0;
}
#analytics .form-check .note ul {
  margin: 0 0 8px -32px; 
}
#analytics .form-check .note ul li {
  list-style: none;
}
/***********************************************************
 4.Content - mypage
***********************************************************/
#mypage {
  background: rgba(0, 0, 0, .025);
  margin: 32px 24px;
  text-align: center;
}
#mypage img#logo {
  margin: 0 auto 16px;
  width: 240px;
}
#mypage .col-md-4 {
  margin-bottom: 32px;
}
#mypage .program-logo {
  margin: 0 auto 8px;
  height: 18px;
  width: auto;
}
#mypage .balloon {
  filter: blur(5px);
}
#mypage .card {
  position: relative;
}
#mypage .expired-count {
  background: #198754;
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-block;
  padding: 0.35em 0.65em;
  font-size: .75em;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 2px;
  z-index: 10;
}
#mypage .modal-fullscreen .modal-content {
  height: 100vh;
  width: 100vw;
}
#mypage #copyright {
  color: #808080;
  font-size: 12px;
}
#mypage .content {
  color: #6c757d;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5em;
  min-height: 72px;
}
#mypage .content .title {
  color: #212529;
  font-weight: 700 !important;
}
#mypage .btn {
  white-space: nowrap;
}
#mypage .view-count {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: .9em;
  white-space: nowrap;
  z-index: 10;
}
#mypage .card-img-container {
  background: #f5f5f5;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}
#mypage .card-img-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#mypage .content span {
  white-space: nowrap;
}
#mypage-link {
  color: #666;
  position: fixed;
  text-decoration: none;
  top: 12px;
  left: 12px;
}
#mypage-link:hover {
  color: #000;
  text-decoration: underline;
}
@media (max-width: 768px) {
  #mypage .content {
    min-height: auto;
  }
}