@charset "UTF-8";
/* 時刻 */
/*========================== */
.picker { display: none; touch-action: none; background-color: rgba(0, 0, 0, 0.3); transition: opacity 0.15s; font-size: 1rem; z-index: 5; }

.picker-open { opacity: 0; display: block; }

.picker-opened { opacity: 1; }

.picker-opened > .picker-dialog { bottom: 0 !important; }

.picker-fixed { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 101; }

.picker-fixed > .picker-dialog { position: absolute; bottom: -100%; transition: bottom .3s; }

.picker-dialog { width: 100%; background: white; }

.picker-header { display: none; }

.picker-grid { display: flex; justify-content: space-between; }

.picker-grid > div { position: relative; width: 50%; font-size: 1.3em; }

.picker-grid > div:first-of-type { border-right: 1px solid #eee; }

.picker-grid > div::before, .picker-grid > div::after { content: ""; display: block; position: absolute; width: 100%; z-index: 3; }

.picker-grid > div::before { background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05)); top: 0; bottom: 50%; margin-bottom: calc(1.3em / 2 + 7px); }

.picker-grid > div::after { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05)); bottom: 0; top: 50%; margin-top: calc(1.3em / 2 + 7px); }

.picker-cell__body { position: relative; overflow: hidden; }

.picker-cell__body::before, .picker-cell__body::after { content: ""; height: 4rem; width: 100%; position: absolute; z-index: 2; }

.picker-cell__body::before { background-image: linear-gradient(to top, rgba(255, 255, 255, 0), white); top: 0; }

.picker-cell__body::after { background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), white); bottom: 0; }

.picker-list { position: relative; }

.picker-list li { text-align: center; padding: 7px 0; }

.picker-picked { color: #5c80b7; font-size: 1.3em; }

.picker-footer { display: flex; justify-content: space-between; }

.picker-footer button { width: 50%; text-align: center; background: transparent; padding: 1rem 0; font-size: 1.3em; border-bottom: 1px solid #eee; }

.picker-footer button:first-of-type { border-right: 1px solid #eee; }

.picker-confirm { color: #5c80b7; }

.picker-body .picker-full-size .picker-hours, .picker-body .picker-full-size .picker-minutes { width: 100%; }

@media all and (max-width: 320px) { .picker-grid { font-size: .9em; } }