@charset 'utf-8';

html{
  scroll-behavior: smooth;
}
body { background: white; color: rgba(0,0,0,0.87);
       font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 8px; }
input[type='text'] { font-size:16px; }
select { font-size:16px; }
textarea { font-size:16px; font-family: Roboto, Helvetica, Arial, sans-serif; }
label { font-size:14px; }
.logo { width:100px; }

h1 { font-size:1.6rem; }
h2 { font-size:1.4rem; }
h3 { font-size:1.2rem; }

#message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px; border-radius: 3px; }
#message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
#message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
#message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
#message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
#message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
#load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }

.sendbtn { font-size:1.2em; padding:0 1em; }

.settingdiv { display:none; border:1px solid #ccc; padding:8px; }

.shamei { width:20em; }
.hour { width:5em; text-align:right; padding-right:0.5em; }


.clickele { cursor:pointer; }
.clickele:hover { /* box-shadow:0 0 3px 0px #999; */ filter:drop-shadow(0 1px 1px #ccc); }
#closebtn { position:absolute; top:3px; left:3px; }

.uploadtext { width:30em; height:10em; }

.clickmenu { border:1px solid #ccc; background:white; padding:2px;
               margin:1px; width:25em; font-size:0.8em; }
.clickmenu:hover { box-shadow:0 0 6px 0px #999; cursor:pointer; }

#maincontent { display:none; }

#userinfo { background:#779; color:white; font-size:0.9em; }
#userinfo .logout { margin-left:5px; padding:2px; background:#eee; color:#555;
            font-size:0.9em; cursor:pointer; }
#userinfo .logout:active { background:#fff; }

  .reloadbtn { font-size:1.5em; width:6em; }

#menudiv { position:absolute; left:5px; top:40px; /*width:400px;*/
          background:white; box-shadow:1px 1px 8px #aaa;
          padding:4px; }
#menudiv div { margin:6px; padding:3px 6px; background:#88a; color:white; }

dl dd label { display:inline-block; padding:1px 4px 1px 1px; background:#ccd;
              border-radius:3px; }
@media (min-width:601px) {
  dl dt { width:100px; text-align:right; padding:2px 4px; font-size:0.8em;
          clear:both; float:left; }
  dl dd { float:none;
           width:calc( 100% - 70px); padding:2px 4px; }

  dl dd input[type='text'] { width: calc( 100% - 70px ); }
  dl dd textarea { width:calc( 100% - 70px ); }

}
@media (max-width: 600px) {
  body, #message { margin-top: 0; background: white; box-shadow: none; }
  body { border-top: 16px solid #02b; }
  dl dt { font-size:0.8em; }
  dl dd { margin-left:0.5em;  }
  .shamei { width:95%; }
  dl dd input[type='text'] { width: calc( 100% - 1em ); }
  dl dd textarea { width:calc( 100% - 1em ); }

}

@media print {
  .title,#userinfo,#menudiv { display:none; }
}


.loader{
  display: none;
  position:fixed;
  top:0;
  left:0;

  margin: 0 0;
  height: 100%;
  width: 100%;
  background:#555;
  opacity:0.7;
  text-align: center;
  z-index:10;
}
.loader svg { margin-top:45%; }

.messagebox { color:#555; background:white;
       border:2px solid #ccc; padding:1em; margin:1em; }

/*
  Set the color of the icon
*/
svg path,
svg rect{
  fill: #FFFFFF;
}

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24;
  vertical-align: bottom;
}
.icons { font-size:18px; }

/**
 * 検索結果リスト表示div
 */
.listview { box-shadow: 0 0 6px 1px #777;
            position:absolute; top:30px; background:white; }
.listview div { border:1px solid #ccc; padding:4px; }
.desc { white-space:pre-wrap; }
#resultdiv { display:flex; flex-wrap:wrap; }
#resultdiv .textbox { flex:max-content; margin-left:0.3em; min-width:320px; }

/**
 * ユーザ管理メニュー
 */
#useradmin { display:none; border:1px solid #bbb;
             padding:0.5em; margin:0.5em; }

/**
 * マニュアルページ用
 */
.wm { width:250px; }
.wl { width:400px; }
.wxl { width:600px; }
.manual img { box-shadow:1px 1px 6px 2px #ccc; }
.adminmanual { display:none; }
.admintitle { font-size:0.9em; opacity:0.5; }

/**
 * リストビュー
 */
.textbox { display:block; background:white;
           margin:4px 0px; padding:2px 4px;
           box-shadow:1px 1px 5px 1px #ccc; }

.childview { background:#ded; padding:2px; border-radius:4px; }

.themeBox { border:1px solid #5bd; }
.taskBox { border:1px solid #8b3; }

/**
 * テーブル
 */
.sticky_table { font-size:0.9em; white-space:nowrap; }
.sticky_table thead tr { background:#bbb; color:white; text-align:center; }
.sticky_table thead td { position:sticky; background:#999; top:0px; }

.sticky_table tbody tr:nth-child(even) { background:#ddd; }
.sticky_table tbody tr:hover { background:#777; color:white; }
.sticky_table td { padding:0.2em 0.4em; }
.num1 { text-align:right; }
.model { text-align:left; }

/**
 * 購買ドキュメント
 */
.koubaidoc { margin:1em; /*box-shadow:1px 1px 6px #bbb;*/
            border-top:2px solid #ccc; padding:0.5em; }
.koubaidoc span { display:block; line-height:2em; /*padding:4px; border:1px solid #eee;*/ }

.koubaidoc span span { margin-left:2em; }
.koubaidoc span.menubtn { display:inline-block; }
.koubaidoc svg span { margin-left: 0; }
.koubaidoc img { max-width:400px; cursor:zoom-in; }
/*.koubaidoc img:hover { max-width:1000px; }*/
.koubaidoc ul { margin:4px 4px 4px -20px; line-height:2em; }
.koubaidoc ol { margin:4px 4px 4px -20px; line-height:2em; }

.mermaid { white-space:pre; }
.mermaid svg { max-width:1000px; max-height:700px; }

span.all2 { padding:0px 4px; }
.all2 span,h5 { padding:0px 4px; margin-top:3px; margin-bottom:3px; }

/**
 * タグ
 */
.tagbox { display:inline-block; font-size:0.8em;
           padding:1px 3px; border-radius:4px; border:1px solid #ccc; }

.default { background:#f1f0ef; }
.blue { background:#ceddeb; }
.brown { background:#eee0da; }
.gray { background:#e3e2e0; }
.green { background:#ddedea; }
.orange { background:#fadec9; }
.pink { background:#f5e0e9; }
.purple { background:#eae4f2; }
.red { background:#ffe2dd; }
.yellow { background:#fdecc8; }

.bold { font-weight:bold; }
/**
 * 課題/進捗
 */
.name { font-size:1.1em; font-weight:bold; }
.parent { /*border:1px solid #edd;*/ color:#779; filter:drop-shadow(0 0 2px #ccf); }

/**
 * 入力フォーム
 */
.formdiv { display:none; background:#f0f7f0;
            position:fixed; width:calc( 100% - 30px ); top:100px;
            border:1px solid #bbb; padding:0.5em;
            box-shadow:1px 1px 5px 1px #ccc;
            z-index:1; }
.themeformdiv { display:none; background:#fff;
            position:fixed; width:calc( 100% - 30px ); top:100px;
            border:1px solid #bbb; padding:0.5em;
            box-shadow:1px 1px 5px 1px #ccc;
            z-index:1; }
.editformdiv { display:none; background:#fff;
              position:fixed; width:calc( 100% - 30px ); top:100px;
              border:1px solid #bbb; padding:0.5em;
              box-shadow:1px 1px 5px 1px #ccc;
              z-index:1; }
.formdiv input, textarea { border:1px solid #ddd; }
.formdiv .formtitle { background:#070; color:white;
                          margin-left:50px; padding:3px; }

.editformdiv input, textarea { border:1px solid #eee; }
.editformdiv .formtitle { background:#009; color:white;
                          margin-left:50px; padding:3px; }

input[type=text].inputerror { border:1px solid red; }


/**
 * 常に一番下
 */
.hideele { display:none; }
.viewele { display:block; }

.noview { display:none; }

.strikethrough { text-decoration: solid line-through 2px; }
.underline { text-decoration: solid underline 2px; }