@charset "UTF-8";
/* ==========================================================================
   $BASE-PICKER
   ========================================================================== */
/**
 * Note: the root picker element should *NOT* be styled more than what’s here.
 */
.picker {
  font-size: 16px !important;
  text-align: left !important;
  line-height: 1.2 !important;
  color: #000 !important;
  position: absolute !important;
  z-index: 10000 !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
  outline: none !important; }

/**
 * The picker input element.
 */
.picker__input {
  cursor: default !important; }

/**
 * When the picker is opened, the input element is “activated”.
 */
.picker__input.picker__input--active {
  border-color: #0089ec !important; }

/**
 * The holder is the only “scrollable” top-level container element.
 */
.picker__holder {
  width: 100% !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important; }

/*!
 * Default mobile-first, responsive styling for pickadate.js
 * Demo: http://amsul.github.io/pickadate.js
 */
/**
 * Note: the root picker element should *NOT* be styled more than what’s here.
 */
/**
 * Make the holder and frame fullscreen.
 */
.picker__holder,
.picker__frame {
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  -ms-transform: translateY(100%) !important;
  transform: translateY(100%) !important; }

/**
 * The holder should overlay the entire screen.
 */
.picker__holder {
  position: fixed !important;
  transition: background 0.15s ease-out, transform 0s 0.15s !important;
  -webkit-backface-visibility: hidden !important; }

/**
 * The frame that bounds the box contents of the picker.
 */
.picker__frame {
  position: visible !important;
  margin: 0 auto !important;
  margin-top: 10% !important;
  min-width: 256px !important;
  max-width: 666px !important;
  width: 100% !important;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)" !important;
  filter: alpha(opacity=0) !important;
  -moz-opacity: 0 !important;
  opacity: 0 !important;
  transition: all 0.15s ease-out !important; }

@media (min-width: 576px) {
  .picker__frame {
    padding-left: 4rem !important;
    padding-right: 4rem !important; } }

@media (min-height: 33.875em) {
  .picker__frame {
    overflow: visible !important;
    margin-top: 10% !important;
    max-height: 80% !important; } }

@media (min-height: 40.125em) {
  .picker__frame {
    margin-top: 7.5% !important; } }

/**
 * The wrapper sets the stage to vertically align the box contents.
 */
.picker__wrap {
  display: table !important;
  width: 100% !important;
  height: 100% !important; }

@media (min-height: 33.875em) {
  .picker__wrap {
    display: block !important; } }

/**
 * The box contains all the picker contents.
 */
.picker__box {
  background: #fff !important;
  display: table-cell !important;
  vertical-align: middle !important; }

@media (min-height: 26.5em) {
  .picker__box {
    font-size: 1.25em !important; } }

@media (min-height: 33.875em) {
  .picker__box {
    display: block !important;
    font-size: 1.33em !important;
    border: 1px solid #777 !important;
    border-top-color: #898989 !important;
    border-bottom-width: 0 !important;
    border-radius: 5px 5px 0 0 !important;
    box-shadow: 0 12px 36px 16px rgba(0, 0, 0, 0.24) !important; } }

@media (min-height: 40.125em) {
  .picker__box {
    font-size: 1.5em !important;
    border-bottom-width: 1px !important;
    border-radius: 5px !important; } }

/**
 * When the picker opens...
 */
.picker--opened .picker__holder {
  -ms-transform: translateY(0) !important;
  transform: translateY(0) !important;
  background: transparent !important;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#1E000000,endColorstr=#1E000000)" !important;
  zoom: 1 !important;
  background: rgba(0, 0, 0, 0.32) !important;
  transition: background 0.15s ease-out !important; }

.picker--opened .picker__frame {
  -ms-transform: translateY(0) !important;
  transform: translateY(0) !important;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)" !important;
  filter: alpha(opacity=100) !important;
  -moz-opacity: 1 !important;
  opacity: 1 !important; }

@media (min-height: 33.875em) {
  .picker--opened .picker__frame {
    top: auto !important;
    bottom: 0 !important; } }

.picker__table thead tr th:first-child {
  color: red; }

.picker__table thead > tr > th {
  border: 1px solid #dee2e6; }

.picker__table thead > tr > td {
  border: 1px solid #dee2e6; }

.picker__table tbody > tr > th {
  border: 1px solid #dee2e6; }

.picker__table tbody > tr > td {
  border: 1px solid #dee2e6; }

/* 土日に色を付ける */
.picker__table thead tr th:first-child {
  color: red; }

.picker__table tbody tr td:first-child {
  color: red; }

.picker__table thead tr th:last-child {
  color: blue; }

.picker__table tbody tr td:last-child {
  color: blue; }

/* 年と月を選択するプールダウン上のテキスト表示範囲を微調整 */
select.picker__select--year {
  padding: 0.35rem; }

select.picker__select--month {
  padding: 0.35rem; }

.picker__select--month {
  width: auto;
  background-color: white; }

.picker__select--year {
  width: auto;
  background-color: white; }