/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 2019/02/20, 21:08:59
    Author     : user
*/
@media screen and (max-width: 480px) { 
    /*　画面サイズ 480pxまで適用　*/
}
@media screen and (min-width:1024px) {
/*　画面サイズ 1024px以上から適用　*/
}
/*
#F6B352 薄いオレンジ
#FC913A 濃いオレンジ
#F68655 更に濃いオレンジ
#4C4C4C 黒っぽい灰色
#FFFFFF 白
*/
/*
#0091db 薄い青色
#0054e5 濃い青色
#000080 ネイビー
#4C4C4C 黒っぽい灰色
#FFFFFF 白
*/


/*----------------------------------共通--------------------------------------*/
/*----- ヘッダー -----*/
header {
    margin-bottom: 20px;
    font-size: 18px;
    display: flex;
    justify-content: center;
    background-color: #0091db;
    color: #ffffff;
}
header img {
    width: 50px;
    height: 50px;
}
.logo-image{
    margin-top: 10px;
}
.header-title {
    text-align: center;
    width: 70%;
    margin: auto 0px;
}
@media screen and (max-width: 480px) {
    header {
        font-size: 10px;
    }
    header img {
        width: 25px;
        height: 25px;
    }
}

/*----- フッター -----*/
footer {
    margin-top: 20px;
    font-size: 18px;
    color: #ffffff;
    background-color: #0091db;
    text-align: center;
}
footer input[type="button"] {
    font-size: 18px;
    width: 128px;
    color: #ffffff;
    background-color: #0054e5;
    border-style: none;
    margin: 8px 24px;
    border-radius: 10px;
}
footer input[type="button"]:hover{
    background-color: #ffffff;
    color: #0054e5;
}
@media screen and (max-width: 480px) {
    footer {
        font-size: 10px;
    }
    footer input {
        font-size: 10px;
        width: 70px;
        margin: 0px 0px;
    }
}
/*--------------------------------共通部品-----------------------------------*/
/*-----ラッパー-----*/
.wrapper {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

/* iOSのスタイルを消去*/
input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  -webkit-text-size-adjust: none;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}

/*-----通常サブミットボタン-----*/
input[type="submit"] {
    font-size: 14px;
    background-color: #0091db;
    color: #FFFFFF;
    border-style: groove;
}
@media screen and (max-width: 480px) {
    
}
.w-submit {
    width: 100%;
}
.h-submit {
    height: 45px;
}
input[type="search"] {
    width: 100%;        
}

/*-----丸いでかサブミットボタン-----*/
input[type="submit"].round {
    background-color: #0054e5;
    color: #FFFFFF;
    border-color: #0091db;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    margin: 10px 15px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
}
@media screen and (max-width: 480px) {
    input[type="submit"].round{
            font-size: 13px;
            border-radius: 10%;
            width: 90px;
            height: 45px;          
            margin: 20px 15px;            
        }
}

/*-----丸くて小さいサブミットボタン-----*/
input[type="submit"].small-round{
    background-color: #0054e5;
    color: #FFFFFF;
    border-color: #0091db;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    margin: 10px 15px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
}
@media screen and (max-width: 480px) {
    input[type="submit"].small-round {
            font-size: 13px;
            border-radius: 10%;
            width: 70px;
            height: 45px;        
            margin: 20px 15px;          
        }
}
/*-----Pタグ-----*/
p {
    text-align: center;
    margin: 0px 0px;
}
/*-----テーブル-----*/
.table-wraper {
    display: flex;
    justify-content: center;
}
.table-container {
    display: block;
    overflow: auto;
}

table {
    margin: 10px 10px;
    border-collapse: collapse;
    border: solid 1px #000080;
    font-size: 14px;
    table-layout: fixed;
    white-space: nowrap;
}

table th,td {
    border: solid 1px #000080;
    padding: 0px 5px;
}
table caption {
    font-size: 16px;
    background-color: #0054e5;
    color: #FFFFFF;
    padding: 10px 0px;
}
.sat {
    background-color: #00ffff;
}
.sun {
    background-color: #e0ffff;
}
.submit-cell {
    background-color: #FFFFFF;
    padding: 0px;
}
.table-td-a {
    text-align: center;
}
.table-td-b {
    text-align: right;
}
.w-th {
    padding: 5px 10px;
}
.sp-submit {
    width: 100%;
    height: 45px;
}
.w-td {
    width: 250px;
    height: 40px;
}
input[type="password"], input[type="text"] {
    width: 250px;
    height: 20px;
}
@media screen and (max-width: 480px) {
    input[type="password"], input[type="text"] {
        width: 200px;
        height: 20px;
    }
}
select {
    width: 250px;
    height: 25px;
}
@media screen and (max-width: 480px) {
    select {
        width: 200px;
        height: 25px;
    }
}
select.con {
    width: 100px;
}

/*--------------------------------index.php-----------------------------------*/
/*-----ログインフォーム-----*/
.index-wraper {    
    display: flex;
    justify-content: center;
    align-items: center;
}
.index-container{
    background-color: #FFFFFF;
    height: 400px;
    width: 70%;
    text-align: center;
    font-size: 18px;
    color: #0054e5;
    border: solid 1px #0091db;
    border-radius: 10px;
}
@media screen and (max-width: 480px) {
    .index-container {
        font-size: 12px;
        width: 100%;
    }
}
.index {
    margin: 10px 20px;
    padding: 5px;
}
/*--------------------------------main.php-----------------------------------*/
.main-form {
    display: flex;
    justify-content: center;
}
.main-form-item1 {
    text-align: center;
    margin: 10px 80px;
}
@media screen and (max-width: 480px) {
    .main-form-item1 {
        margin: 15px 10px;
    }
}
form.schedule {
    display: flex;
    justify-content: center;
}
/*--------------------------------admin.php-----------------------------------*/
.admin-menu {
    display: flex;
    justify-content: center;
    margin: 15px 0px;
    flex-wrap: wrap;
}
.admin-pagenation {
    display: flex;
    justify-content: center;
}
.admin-wrapper {
    display: flex;
    justify-content: center;
    flex-direction: column;
}
input.admin-input {
    width: 160px;
    height: 40px;
}
/*-----------------------------singUpStaff.php--------------------------------*/


/*-------------------------------logput.php-----------------------------------*/
.logout-container {
    align-self: center;
    background-color: #FFFFFF;
    height: 250px;
    width: 70%;
    text-align: center;
    font-size: 18px;
    color: #0054e5;
    border: solid 1px #0091db;
    border-radius: 10px;
}

.image {
    width: 40px;
}
.image-cell {
    padding: 0px;
}
.min-select {
    width: 100px;
    height: 25px;
}
.csv {
    width: 100px;
}

form.back {
    text-align: center;
}

.work {
    text-align: center;
    background-color: #ffff00;
}
.holiday{
    text-align: center;
    background-color: #e0ffff;
}
.training{
    text-align: center;
    background-color: #ffd700;
}
.p-holi-all{
    text-align: center;
    background-color: #00ff00;
}
.p-holi-half{
    text-align: center;
    background-color: #00fa9a;
}
.initial-training{
    text-align: center;
    background-color: #ffe4e1;
}
/*--　20180822_追加部分 */
.late{
    text-align: center;
    background-color: #dc143c;
    color: #ffffff;
}
.absence{
    text-align: center;
    background-color: #ff0000;
    color: #ffffff;
}
/*--　20180822_追加部分　ここまで */

/*-------------------------------info.php-----------------------------------*/
.info-wraper {    
    display: flex;
    justify-content: center;
    align-items: center;
}
.info-container{
    background-color: #FFFFFF;
    height: 200px;
    width: 70%;
    text-align: center;
    font-size: 18px;
    color: #0054e5;
    border: solid 1px #0091db;
    border-radius: 10px;
    overflow-y: scroll; 
}
@media screen and (max-width: 480px) {
    .info-container {
        font-size: 12px;
        width: 100%;
    }
}
.info {
    margin: 10px 20px;
    padding: 5px;
}
.space{
    height: 10px;
}

/* ----------   stressCheck   ---------- */

.stresscheck {
    margin: 0 auto;
    width: 50%;
}
@media screen and (max-width: 480px) {
    .stresscheck {
        font-size: 12px;
        width: 100%;
    }
}
.stresscheck li {
    list-style: decimal;
}
.stresscheck p {
    font-size: 14px;
    text-align: left;
}
@media screen and (max-width: 480px) {
    .stresscheck p {
        font-size: 12px;
    }
}
.stresscheck h1 {
    text-align: center;
}
@media screen and (max-width: 480px) {
    .stresscheck h1 {
        font-size: 18px;
    }
}
.stresscheck h2 {
    background-color: #0091db;
    color: #e0ffff;
    padding: 10px;
}
@media screen and (max-width: 480px) {
    .stresscheck h2 {
        font-size: 13px;
    }
}
.stresscheck .hidden {
    display: none;
}
@media screen and (max-width: 480px) {
    .stresscheck .hidden {
        display: inline;
    }
}
.stresscheck .btn-wrapper {
    text-align: center;
}
@media screen and (max-width: 480px) {
    .stresscheck .btn-wrapper {
        
    }
}
.stresscheck button {
    width: 150px;
    margin: 0 auto;
}
@media screen and (max-width: 480px) {
    .stresscheck button {
        
    }
}