@charset "utf-8";
/*--------------------------------------
 * style css (会社用CSS)
 *------------------------------------*/
/*--------------------------------------
 * 全体の定義
 * ページ背景色・背景画像
 * 文字色・サイズ
 *------------------------------------*/
body {
    background-color:#ffffff;
    color:#333333;
    font-size:15px;
    line-height:150%;
    margin: 0px;
    padding: 0px;
    text-align:center;
    font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HiraKakuPro-W3","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",Arial, Helvetica,sans-serif;
}
tr,td,th,div {
    color: #333333;
    font-size: 15px;
    line-height: 150%;
}
form {
    margin: 0px;
    padding: 0px;
}
img {
    border:0px;
}
hr {
    border:none;
    border-top: 1px dashed #afaeae;
    height: 1px;
    color:#ffffff;
}
ul {
    margin:0px;
    padding:2px;
    list-style-type: disc;
    list-style-position: outside;
}
li {
    padding:0px;
    margin:2px 0px 2px 20px;
}

span.hidden {
    display: none;
}

.smart_disp {
    display: none;
}

.t10    { font-size: 10px;line-height: 130%; }
.t12    { font-size: 12px;line-height: 130%; }
.t18    { font-size: 18px;line-height: 150%; }

.floatleft  { float: left; }
.floatright { float: right; }
.left       { text-align: left; }
.center     { text-align: center; }
.right      { text-align: right; }

/*--------------------------------------
 * リンク 通常時(link,visited,active)
 * リンク マウスが当たっている時(hover)
 *------------------------------------*/
a:link    { color:#1a9bd2; text-decoration:underline; }
a:visited { color:#1a9bd2; text-decoration:underline; }
a:active  { color:#1a9bd2; text-decoration:underline; }
a:hover   { color:#b57100; text-decoration:underline; background-color:#fff7b2; }
a.blocklink {width:100%;display:block;}

a.gray:link    { color:#c0c0c0; text-decoration:underline; }
a.gray:visited { color:#c0c0c0; text-decoration:underline; }
a.gray:active  { color:#c0c0c0; text-decoration:underline; }
a.gray:hover   { color:#b57100; text-decoration:underline; background-color:#fff7b2; }

a.bgtrans:link    { text-decoration:none; }
a.bgtrans:visited { text-decoration:none; }
a.bgtrans:active  { text-decoration:none; }
a.bgtrans:hover   { text-decoration:none; background-color: transparent; }

/*--------------------------------------
 * input box / text area / select menu
 *------------------------------------*/
.frm_num {
    border: 1px solid #afaeae;
    background-color:#ffffff;
    font-size:15px;
    color:#333333;
    ime-mode: disabled;
}

.frm_str {
    border: 1px solid #afaeae;
    background-color:#ffffff;
    font-size:15px;
    color:#333333;
    ime-mode: active;
}

.frm_y {
    border: 1px solid #afaeae;
    background-color:#ffffff;
    font-size:15px;
    ime-mode: disabled;
    width: 55px !important;
}

.frm_m, .frm_d, .frm_h, .frm_i {
    border: 1px solid #afaeae;
    background-color:#ffffff;
    font-size:15px;
    ime-mode: disabled;
    width: 50px !important;
}

.frm_area {
    border: 1px solid #afaeae;
    background-color:#ffffff;
    font-size:15px;
    color:#333333;
    overflow-y:auto;
    ime-mode: active;
}

input[type="text"][disabled],
input[type="text"][readonly],
input[type="tel"][disabled],
input[type="tel"][readonly],
input[type="url"][disabled],
input[type="url"][readonly],
textarea[disabled],
textarea[readonly],
select[disabled] {
    border: 1px solid #afaeae;
    background-color:#e4e4e4;
    color:#666666;
}

input[type="button"], input[type="submit"] {
    font-size: 15px;
}

/*--------------------------------------
 * 外枠
 *------------------------------------*/
#wrapper {
    background-color:#ffffff;
    width: 960px;
    margin: 0px auto;
}

#wrapper_flex {
    background-color:#ffffff;
    width: 100%;
    margin: 0px auto;
}

/*--------------------------------------
 * ドロワーメニュー
 *------------------------------------*/
#drawer_area {
    display: none;
}

/*--------------------------------------
 * ヘッダ
 *------------------------------------*/
#header_area {
    background-color: #303030;
    border-top:solid 1px #afaeae;
    border-left:solid 1px #afaeae;
    border-right:solid 1px #afaeae;
    border-bottom:solid 1px #afaeae;
    padding: 5px 5px;
    text-align: left;
    position: relative;
}

#header_logo {
    float: left;
    margin: 0;
}

#header_navi {
    float: right;
    margin: 5px;
}
#header_navi::after {
  content: "";
  clear: both;
  display: block;
}
#header_navi ul {
    margin: 0;
    padding: 0;
    list-style-type:none;
}
#header_navi ul li {
    float: left;
    padding: 0 10px 0 10px;
    margin: 0;
    color: #fff;
}
#header_navi ul li:not(:first-child) {
    border-left: 1px solid #fff;
    padding: 0 10px 0 10px;
}
#header_navi ul li:last-child {
    padding: 0 0 0 10px;
}
#header_navi ul li a:link,
#header_navi ul li a:visited,
#header_navi ul li a:active {
    color: #fff;
    text-decoration:none;
}
#header_navi ul li a:hover {
    color: #b57100;
    text-decoration:underline;
    background-color:#fff7b2;
}

/*--------------------------------------
 * フッタ
 *------------------------------------*/
#footer_area {
    background-color:#ffffff;
    border-left:solid 1px;
    border-right:solid 1px;
    border-bottom:solid 1px;
    border-color:#afaeae;
    padding:0px 0px 0px 0px;
    text-align:center;
}
.footer {
    font-size: 15px;
    color: #909090;
}

/*--------------------------------------
 * メインコンテンツ
 *------------------------------------*/
#main_area {
    background-color:#ffffff;
    border-left:solid 1px;
    border-right:solid 1px;
    border-color:#afaeae;
    margin: 0px;
    text-align:center;
    min-height: 460px;
}

#main_cont {
    background-color:#ffffff;
    text-align:left;
    /* padding:10px; */
    /* padding:10px 80px 20px 80px; */
    padding:10px 60px 20px 60px;
}

.clearing {
    clear: both;
    font-size: 1px;
    height: 1px;
}

/*--------------------------------------
 * 共通枠
 *------------------------------------*/
.waku {
    border: 1px solid;
    border-color: #afaeae;
    padding:10px;
    margin:0px auto;
}

/*--------------------------------------
 * ページタイトル
 *------------------------------------*/
.title  {
    font-size: 18px;
    font-weight: bold;
    color: #666666;
    background-color: #ffffff;
    border-bottom:3px solid #afaeae;
    padding: 5px 3px 3px 0.5em;
    margin:0px 0px 8px 0px;
}

.title2 {
    font-size: 15px;
    font-weight: bold;
    color: #666666;
    background-color: #ffffff;
    border-left: 10px solid #7f0119;
    padding: 3px 3px 3px 0.5em;
    margin:0px 0px 3px 0px;
}

/*--------------------------------------
 * テーブル
 *------------------------------------*/
/* 通常テーブル枠 */
.tbl, .tbl_leave {
    border-collapse: collapse;
    border: 1px solid #cccccc;
}
.tbl th, .tbl_leave th {
    border: 1px solid #cccccc;
    background-color: #f0f0f0;
    padding: 3px;
    color:#333333;
    text-align: left;
    font-weight: normal;
    white-space:nowrap;
}
.tbl td, .tbl_leave td {
    border: 1px solid #cccccc;
    background-color: #ffffff;
    padding: 3px;
    color:#333333;
}

/* 個別背景色指定 */
.tbl th.gray, .tbl td.gray,
.tbl_leave th.gray, .tbl_leave td.gray {
    background-color:#e4e4e4;
}
.tbl th.yellow, .tbl td.yellow,
.tbl_leave th.yellow, .tbl_leave td.yellow {
    background-color:#fffab4;
}

.tbl th.today, .tbl td.today,
.tbl_leave th.today, .tbl_leave td.today {
    background-color:#ffffcc;
}
.tbl th.holiday, .tbl td.holiday,
.tbl_leave th.holiday, .tbl_leave td.holiday {
    background-color:#fff0f0;
}
.tbl th.saturday, .tbl td.saturday,
.tbl_leave th.saturday, .tbl_leave td.saturday {
    background-color:#f0f7ff;
}

/* 横線のみ指定 */
.row_only th, .row_only td {
    border-width: 1px 0px !important;
}

/* 縦線のみ指定 */
.col_only th, .col_only td {
    border-width: 0px 1px !important;
}

/*------------------------------------*/
.tbl_trans, .tbl_trans th, .tbl_trans td {
    border-style: none;
}

/*--------------------------------------
 * 強調文字
 *------------------------------------*/
.stress {
    color: #cc0000;
    font-weight: bold;
}
.stress2 {
    color: #cc0000;
}

/*--------------------------------------
 * フォーム注意書き文字
 *------------------------------------*/
.note {            /* stress */
    font-size: 10px;
    color: #ff0000;
}
.note2 {        /* normal */
    font-size: 10px;
    color: #333333;
}

/*--------------------------------------
 * エラーメッセージボックス
 *------------------------------------*/
.errbox {
    background-color: #ffffcc;
    border: 1px solid;
    border-color: #ff0000;
    padding: 4px 2px 4px 5px;
    margin:10px auto;
    text-align: left;
    color:#ff0000;
    font-size:14px;
}

.errmsg {
    color:#ff0000;
}

/*--------------------------------------
 * 更新完了メッセージボックス
 *------------------------------------*/
.updatedbox {
    background-color: #ffffef;
    border: 1px solid;
    border-color: #cccccc;
    padding: 4px 2px 4px 5px;
    margin:10px auto;
    text-align: left;
    color:#666666;
    font-size:14px;
}

/*--------------------------------------
 * 強調メッセージボックス
 *------------------------------------*/
.stressbox {
    background-color: #ffeae0;
    border: 1px solid;
    border-color: #ff809f;
    padding: 4px 2px 4px 5px;
    margin:10px auto;
    text-align: left;
    color:#333333;
    font-size:14px;
}

/*--------------------------------------
 * お知らせボックス
 *------------------------------------*/
.infobox {
    border: 1px solid;
    border-color: #cccccc;
    padding: 4px 2px 4px 5px;
    margin:10px;
    text-align: left;
    color:#666666;
    font-size:14px;
}

/*--------------------------------------
 * リンク抑制文字色
 *------------------------------------*/
.linkoff {
    color: #c0c0c0;
    text-decoration: underline;
}

/*--------------------------------------
 * 入力支援カレンダー(calendar.js)関連
 *------------------------------------*/
/* カレンダーボタン */
.cal_btn {
    background: url(img/icon_calendar.gif) no-repeat center;
    border: solid 1px #cccccc;
    margin:0px 1px 2px 0px;
    padding: 0px;
    color: #999999;
    background-color:#ffffff;
    width: 22px;
    height: 20px;
    vertical-align:middle;
}
/* カレンダーウィンドウ */
.lyrCalCalendar {
    visibility:hidden;
    position:absolute;
    z-index:10;
}

/*--------------------------------------
 * スケジュール管理
 *------------------------------------*/

/* サイネージ選択 */
.sche_select {
    float: left;
}
.sche_add {
    float: left;
    margin-left: 20px;
}

/* スケジュール一覧テーブル */
.sche_tbl {
    border-collapse: collapse;
    border: 1px solid #cccccc;
}
.sche_tbl th {
    border: 1px solid #cccccc;
    background-color: #f0f0f0;
    padding: 3px;
    color:#333333;
    text-align: left;
    font-weight: normal;
    white-space:nowrap;
}
.sche_tbl td {
    border: 1px solid #cccccc;
    background-color: #ffffff;
    padding: 3px;
    color:#333333;
}

/* 開始時間・動画URL等入力フォームテーブル */
.sche_video_tbl {
    border-collapse: collapse;
    border: 1px solid #cccccc;
}
.sche_video_tbl th {
    border: 1px solid #cccccc;
    background-color: #f0f0f0;
    padding: 3px;
    color:#333333;
    text-align: left;
    font-weight: normal;
    white-space:nowrap;
}
.sche_video_tbl td {
    border: 1px solid #cccccc;
    background-color: #ffffff;
    padding: 3px;
    color:#333333;
}

/*--------------------------------------
 * smart
 *------------------------------------*/
@media screen and (max-width: 767px) {

    .smart_hidden {
        display: none;
    }
    .smart_disp {
        display: inline;
    }

    /*--------------------------------------
     * input box / text area / select menu
     *------------------------------------*/
    input[type="text"],
    input[type="tel"],
    input[type="url"],
    input[type="password"],
    input[type="file"],
    select:not(.width_not100),
    textarea {
        width: 100%;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    /*--------------------------------------
     * テーブル
     *------------------------------------*/
    .tbl {
        border: none !important;
        width: 100%;
        margin: 0px;
        padding: 0px;
    }
    .tbl tr {
        display: block;
    }
    .tbl th {
        font-weight: bold;
    }
    .tbl th, .tbl td {
        display: list-item;
        border: none;
        list-style-type: none;
        margin: 0px;
        padding: 3px 3px;
        width: 100%;
    }

    /*--------------------------------------
     * カレンダーのテーブル
     *------------------------------------*/
    .lyrCalCalendar table.tbl {
        border-collapse: collapse;
        border: 1px solid #cccccc;
        width: auto !important;
    }
    .lyrCalCalendar table.tbl tr {
        display: table-row !important;
    }
    .lyrCalCalendar table.tbl th {
        border: 1px solid #cccccc;
        background-color: #f0f0f0;
        padding: 3px;
        color:#333333;
        text-align: left;
        font-weight: normal;
        white-space:nowrap;
        display: table-cell !important;
        width: 20px !important;
    }
    .lyrCalCalendar table.tbl td {
        border: 1px solid #cccccc;
        background-color: #ffffff;
        padding: 3px;
        color:#333333;
        display: table-cell !important;
        width: 20px !important;
    }
    /*--------------------------------------
     * 外枠
     *------------------------------------*/
    #wrapper {
        width: 100%;
    }

    /*--------------------------------------
     * ドロワーメニュー
     *------------------------------------*/
    #drawer_area {
        display: block;
    }
    .drawer-hamburger {
        position: absolute;
        padding: 12px;
    }
    .drawer-hamburger-icon,
    .drawer-hamburger-icon::before,
    .drawer-hamburger-icon::after {
        /* height: 2px; */
        /* background-color: #222; */
        height: 3px;
        background-color: #fff;
    }

    ul.drawer-menu li {
        border-bottom: 1px solid #afaeae;
        margin: 0;
        padding: 0;
        text-align: left;
    }
    a.drawer-menu-item {
        color: #666;
        text-decoration:none;
    }

    /*--------------------------------------
     * ヘッダ
     *------------------------------------*/
    #header_navi {
        display: none;
    }

    /*--------------------------------------
     * メインコンテンツ
     *------------------------------------*/
    #main_area {
        min-height: 350px;
    }

    #main_cont {
        padding:10px 10px 20px 10px;
    }

    /*--------------------------------------
     * スケジュール管理
     *------------------------------------*/

    /* サイネージ選択 */
    .sche_select {
        float: none;
    }
    .sche_add {
        float: none;
        text-align: center;
        margin-left: 0;
        margin-top: 20px;
    }

    /* スケジュール一覧テーブル */
    .sche_tbl {
        border-collapse: separate;
        border: 0;
    }
    .sche_tbl thead {
        display: none;
    }
    .sche_tbl td {
        border: none;
        display: block;
        width: 100%;
        text-align:left;
    }
    .sche_tbl td::before {
        content: attr(data-title) "";
    }
    .sche_tbl td:nth-child(1) {
        text-align: left;
        background-color: #f0f0f0;
    }
    .sche_tbl td:nth-child(3) {
        border-bottom: 1px solid #cccccc;
        margin-bottom: 10px;
	text-align: right;
    }

    /* 開始時間・動画URL等入力フォームテーブル */
    .sche_video_tbl {
        border-collapse: separate;
        border: 0;
    }
    .sche_video_tbl thead {
        display: none;
    }
    .sche_video_tbl td {
        border: none;
        display: block;
        width: 100%;
        text-align:left;
    }
    .sche_video_tbl td::before {
        content: attr(data-title) "";
    }
    .sche_video_tbl td:nth-child(1) {
        text-align: left;
        background-color: #f0f0f0;
    }
    .sche_video_tbl td:nth-child(5) {
        border-bottom: 1px solid #cccccc;
        margin-bottom: 10px;
    }
    .sche_video_tbl tr:last-child th {
        display: none;
    }
    .sche_video_tbl td input[type="url"] {
        width: 80% !important;
    }
}