@charset "UTF-8";

.table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>th ,
.table.dataTable thead .sorting_asc:after, .table.dataTable thead .sorting_desc:after  ,
.table>tbody>tr>td .btn-lg , .btn-block.btn-lg , .card-action .btn-lg ,
#subscribe_data , .panel-body .nav a {
  line-height : 1.5;
  font-size:clamp(1.25rem, 0.977rem + 1.36vw, 4.25rem);
}

.table.dataTable tbody tr td , #learning .card-content ,
.modal , #summary , .detail-table tbody tr td ,
.product .list-group-item , .product table tr td , .product_detail table tr td {
  font-size:clamp(1rem, 0.571rem + 2.14vw, 4rem);
}

.h2 , h2 , .card .card-title , .product_title {
  color : #363636;
  font-size:clamp(2.5rem, 2.065rem + 2.17vw, 5rem);
  margin-bottom:clamp(1rem, 0.818rem + 0.91vw, 3rem);
}

.card .card-title {
  padding-left: 2.25em;
  text-indent: -1.25em;
}

.h3 , h3 {
  font-size:clamp(2rem, 1.818rem + 0.91vw, 4rem);
}

#navbar .list-group .list-group-item , #progress .panel-title {
  color : #363636;
  font-size:clamp(1.5rem, 1.364rem + 0.68vw, 3rem);
}

.list-group-item.btn.disabled {
  text-align:left;
  background-color:#fff;
}

#navbar-header {
  display:flex;
  flex-direction:row;
  justify-content:flex-end;
}

#navbar-header #account {
  font-size:clamp(1.25rem, 0.977rem + 1.36vw, 4.25rem);
  display:flex;
  flex-direction:column;
  justify-content:center;
  margin-right:20px;
}

#navbar-header .navbar-toggle:focus, #navbar-toggle .navbar-toggle:hover {
  color:#333;
  outline:none;
}

#navbar .list-group .list-group-item .fa {
  margin-right:0.5rem;
}

.list-group {
  border-top: 1px solid #ccc;
}

.list-group-item {
  border: 1px solid #ccc;
}

.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
  background-color: #f9fdff;
}

.tab-content > .active {
  border:1px solid #ededed;
  border-top:none;
  background-color: #f9fdff;
}

.card-pf-aggregate-status .card-pf-title ,
.card-pf-aggregate-status .card-pf-title .btn {
  font-size:clamp(2rem, 1.143rem + 4.29vw, 8rem);
}

.card-pf-aggregate-status .card-pf-body a ,
.card-pf-aggregate-status .card-pf-body .btn {
  color : #363636;
  font-size:clamp(3rem, 1.714rem + 6.43vw, 12rem);
}

.take-table {
  margin-top:clamp(1rem, 0.571rem + 2.14vw, 4rem);
}

.take-title {
  text-align:center;
  font-weight:bold;
}

.popover-content dl {
  font-size:clamp(1rem, 0.727rem + 1.36vw, 4rem);
}

.take-table thead , .detail-table tbody tr th , .detail-table thead {
  background-image:none;
  background-color : #555;
  color:#fff;
}

.take-table thead tr th , .detail-table tbody tr th , .detail-table thead {
  padding:10px 0px;
}

.take-table thead tr th:nth-of-type(1) {
  width:max(20vw,60px);
}

.take-table.dataTable thead .sorting_asc , .take-table.dataTable thead .sorting_desc ,
.detail-table.dataTable thead .sorting_asc , .detail-table.dataTable thead .sorting_desc {
  color:#cfac00 !important;
}

.take-table.dataTable thead .sorting_asc:before, .take-table.dataTable thead .sorting_desc:before ,
.detail-table.dataTable thead .sorting_asc:before, .detail-table.dataTable thead .sorting_desc:before {
  background:#cfac00;
  height:clamp(0.25rem, 0.208rem + 0.21vw, 0.75rem);
}

.modal-title , .modal-header .close .fa {
  font-size:clamp(2.5rem, 2.065rem + 2.17vw, 5rem);
}

#result .fa {
  font-size:min(512px,50vw);
}

#result .fa-circle-o {
  color:#0033ff;
}

#progress .panel-heading {
  background-image:none;
  padding:0px;
}

#progress .panel-default>.panel-heading {
  background-color:#fff;
}

#progress .panel-title>a {
  padding:15px;
}

#progress .panel-title>a:before {
  font-size:inherit;
}

.product {
  display:flex;
  flex-wrap: wrap;
  /* column-gap: 20px; */
}

.product > [class*='col-'] {
  display: flex;
    flex-direction: column;
    margin: 0px 10px;
}

@media (min-width: 1200px) {
  .product .col-lg-6 {
    width: calc(50% - 20px);
  }

  /* .product .col-lg-6:only-child, */
  /* .product .col-lg-6:last-child:nth-child(odd) { */
  /*   margin-left: 20px; */
  /* } */
}

@media (min-width: 992px) {
  .product .col-md-6 {
    width: calc(50% - 20px);
  }

  /* .product .col-md-6:only-child, */
  /* .product .col-md-6:last-child:nth-child(odd) { */
  /*   margin-left: 20px; */
  /* } */
}

.product .panel {
  display: flex;
  /* flex-direction: column; */
  flex: 1;
}

.product .panel-content {
  display: flex;
  flex-direction: column;
  border-left: 1px solid #ddd;
}

.product .panel-body {
  display: flex;
  flex-direction: column;
  flex-grow: 3;
}

.product .panel-body h3 ,
.product .panel table tr th ,
.product .panel .panel-footer .btn-lg {
  flex-grow: 1;
  font-size: clamp(2rem, 1.909rem + 0.45vw, 3rem);
}

.product .panel-body p.h3 ,  .product .panel table tr td {
  font-size: clamp(1.5rem, 1.909rem + 0.45vw, 2.5rem);
}

.product .panel-body p {
  border-top: 1px solid #d1d1d1;
}

.product .panel table {
  flex-grow: 1;
  table-layout:auto;
}

.product .panel table tr th ,  .product_detail table tr th {
  background-image:none;
  background-color:#eee;
}

.product .panel table tr th {
  font-size: clamp(2rem, 1.909rem + 0.45vw, 3rem);
}

.product .panel .panel-footer {
  flex-grow: 0;
  flex-shrink: 0;
}

.product_thumbnail img {
  width:100%;
  /* height:100%; */
  padding:0px 10px;
}

/* グラフ関連 */

.donut-tooltip-pf {
  font-size:clamp(1rem, 0.727rem + 1.36vw, 4rem);
  padding:10px;
}

.test .donut-title-big-pf {  /* テスト */
  font-size:5rem;
}

.test .donut-title-small-pf , .test .c3-chart-arc text {
  font-size:3rem;
}

@media (max-height: 1200px) {
  .test .donut-title-small-pf , .test .c3-chart-arc text {
    font-size:2.5rem;
  }
}

@media (max-height: 1024px) {
  .test .donut-title-small-pf , .test .c3-chart-arc text {
    font-size:2.25rem;
  }
}

@media (max-height: 960px) {
  .test .donut-title-small-pf , .test .c3-chart-arc text {
    font-size:2rem;
  }
}

@media (max-height: 820px) {
  .test .donut-title-big-pf {
    font-size:4rem;
  }

  .test .donut-title-small-pf , .test .c3-chart-arc text {
    font-size:1.5rem;
  }
}

@media (max-height: 768px) {
  .test .donut-title-small-pf , .test .c3-chart-arc text {
    font-size:1.25rem;
  }
}

@media (max-height: 640px) {
  .test .donut-title-big-pf {
    font-size:3.5rem;
  }

  .test .donut-title-small-pf , .test .c3-chart-arc text {
    font-size:1rem;
  }
}

@media (max-width: 480px) {
  .test .donut-title-big-pf {
    font-size:3.5rem;
  }

  .test .donut-title-small-pf , .test .c3-chart-arc text {
    font-size:1rem;
  }
}

@media (max-width: 360px) {
  .test .donut-title-big-pf {
    font-size:3rem;
  }
  .test .donut-title-small-pf {
    font-size:0.75rem;
  }
}

@media (max-width: 320px) {
  .test .donut-title-big-pf {
    font-size:2rem;
  }
  .test .donut-title-small-pf {
    font-size:0.75rem;
  }
}

.tab-pane .donut-title-big-pf { /* 講義 */
  font-size:6rem;
}

.tab-pane .donut-title-small-pf , .tab-pane .c3-chart-arc text {
  font-size:3rem;
}

@media (max-width: 1920px) {
  .tab-pane .donut-title-small-pf , .tab-pane .c3-chart-arc text {
    font-size:2.25rem;
  }
}

@media (max-width: 1280px) {
  .tab-pane .donut-title-big-pf {
    font-size:5rem;
  }

  .tab-pane .donut-title-small-pf , .tab-pane .c3-chart-arc text {
    font-size:1.75rem;
  }
}

@media (max-width: 1024px) {
  .tab-pane .donut-title-small-pf , .tab-pane .c3-chart-arc text {
    font-size:1.5rem;
  }
}

@media (max-width: 992px) {
  .tab-pane .donut-title-big-pf {
    font-size:6rem;
  }

  .tab-pane .donut-title-small-pf , .tab-pane .c3-chart-arc text {
    font-size:3rem;
  }

}

@media (max-width: 768px) {
  .tab-pane .donut-title-big-pf {
    font-size:5rem;
  }

  .tab-pane .donut-title-small-pf , .tab-pane .c3-chart-arc text {
    font-size:2rem;
  }
}

@media (max-width: 420px) {
  .tab-pane .donut-title-big-pf {
    font-size:3.5rem;
  }

  .tab-pane .donut-title-small-pf , .tab-pane .c3-chart-arc text {
    font-size:1.5rem;
  }
}

@media (max-width: 360px) {
  .tab-pane .donut-title-small-pf , .tab-pane .c3-chart-arc text {
    font-size:1.25rem;
  }
}

@media (max-width: 320px) {
  .tab-pane .donut-title-big-pf {
    font-size:3rem;
  }
}

#progress-info {
  padding:clamp(1rem, 0.727rem + 1.36vw, 4rem);
}

#google {
  width:215px;
  padding:0px;
}

#yahoo {
  background-color: #ff0033;
  color: white;
  width: 215px;
  font-size: 16px;
}

#yahoo img {
  padding-right: 5px;
}

#oauth {
  display:flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items:center;
  gap: 20px;
}