@charset "UTF-8";

/* ============================================================
   SOPHIA スタッフ管理アプリ／業務管理システム（第1段階）
   プロフィール ワイヤーフレーム 第6試作
   styles_STAFF.css ／ 配置・大きさ・線の太さだけを書くファイル

   ・このファイルは色の値を1つも持ちません
   ・色はすべて theme_STAFF.css の22個の変数を参照します
   ・配色を変えるときは theme_STAFF.css だけを触ってください
   ・外部読み込み 0（外部フォント・外部画像・外部の取り込みなし）
   ============================================================ */


/* ---------- 土台 ---------- */

*{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  padding:0 0 56px;
  background:var(--色-背景);
  color:var(--色-文字);
  font-family:"Meiryo","Yu Gothic","Hiragino Kaku Gothic ProN","MS PGothic",sans-serif;
  font-size:14px;
  line-height:1.7;
}

[hidden]{ display:none; }

a{ color:var(--色-強調); }


/* ---------- 見出し帯 ---------- */

.帯{
  background:var(--色-見出し帯);
  color:var(--色-見出し帯文字);
  padding:12px 16px;
}
.帯-題{ font-size:15px; letter-spacing:.06em; }
.帯-副{ font-size:11px; }


/* ---------- 画面の枠 ---------- */

.画面{
  max-width:480px;
  margin:0 auto;
  padding:0 14px;
}

.画面区分{
  font-size:12px;
  color:var(--色-文字薄);
  margin:14px 0 12px;
  border-left:3px solid var(--色-アクセント);
  padding-left:9px;
}


/* ---------- カード ---------- */

.カード{
  background:var(--色-面);
  border:1px solid var(--色-罫線);
  border-radius:10px;
  padding:14px;
  margin:0 0 14px;
}

.カード見出し{
  font-size:13px;
  color:var(--色-強調);
  margin:0 0 9px;
  padding-bottom:6px;
  border-bottom:2px solid var(--色-アクセント);
}


/* ---------- 提出状況 ---------- */

.提出状況{ font-size:13px; margin:0; }
.提出状況 b{ color:var(--色-強調); }


/* ---------- カレンダー ---------- */

.カレンダー{ position:relative; }

.月移動ボタン{
  position:absolute;
  top:0;
  width:40px;
  height:34px;
  padding:0;
  font-family:inherit;
  font-size:15px;
  line-height:1;
  background:var(--色-入口面);
  color:var(--色-入口文字);
  border:1px solid var(--色-入口枠);
  border-radius:8px;
  cursor:pointer;
}
.月移動ボタン-前{ left:0; }
.月移動ボタン-次{ right:0; }

.月移動ボタン:disabled{
  background:var(--色-面);
  color:var(--色-使用不可);
  border:1px dashed var(--色-使用不可);
  cursor:default;
}

.月名{
  text-align:center;
  font-size:15px;
  color:var(--色-強調);
  margin:0 0 10px;
  padding:5px 48px;
}

.カレンダー表{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
}
.カレンダー表 th,
.カレンダー表 td{
  border:1px solid var(--色-罫線);
  padding:3px 0 4px;
  text-align:center;
  vertical-align:top;
}

.曜日{
  font-size:11px;
  font-weight:normal;
  color:var(--色-文字薄);
  background:var(--色-背景);
  padding:4px 0;
}

.日{ height:58px; }
.日-空{ background:var(--色-背景); }

.日付{
  display:block;
  font-size:11px;
  line-height:1.2;
  color:var(--色-文字薄);
}

/* 記号の行。まると「昼」を横に並べます */
.記号行{
  display:block;
  line-height:1.15;
  white-space:nowrap;
}

.記号{
  display:inline-block;
  vertical-align:middle;
  font-size:17px;
  line-height:1.15;
}
.記号-可{     color:var(--色-記号-可); }
.記号-条件付{ color:var(--色-記号-条件付); font-weight:bold; }
.記号-不可{   color:var(--色-記号-不可); }
.記号-未入力{ color:var(--色-記号-未入力); }

/* 昼の印。色を外しても「昼」の文字だけで意味が伝わります */
.昼{
  display:inline-block;
  vertical-align:middle;
  margin-left:2px;
  padding:0 2px;
  font-size:9px;
  line-height:1.3;
  border-radius:3px;
  background:var(--色-昼面);
  color:var(--色-昼文字);
}

/* 勤務可能時間。×と－の日は中身が空のまま高さだけ確保します */
.時間{
  display:block;
  min-height:13px;
  font-size:9px;
  line-height:1.3;
  letter-spacing:0;
  white-space:nowrap;
  color:var(--色-時間);
}

.日-今日{ background:var(--色-今日); }
.日-今日 .日付{ color:var(--色-強調); font-weight:bold; }

.凡例{
  margin:10px 0 0;
  font-size:11px;
  color:var(--色-文字薄);
}
.凡例 span{ margin-right:12px; white-space:nowrap; }

/* 時間の意味の注意（凡例のすぐ下。月を変えても常に見えます）*/
.時間注意{
  margin:10px 0 0;
  padding:9px 11px;
  background:var(--色-アクセント面);
  border:1px solid var(--色-アクセント);
  border-radius:8px;
  font-size:11px;
  line-height:1.6;
  color:var(--色-文字);
}
.時間注意 b{ color:var(--色-強調); }


/* ---------- この月に出した勤務可能時間・条件 ---------- */

.条件一覧{
  margin:12px 0 0;
  background:var(--色-アクセント面);
  border:1px solid var(--色-アクセント);
  border-radius:8px;
  padding:10px 12px;
}
.条件一覧見出し{
  font-size:12px;
  color:var(--色-強調);
  margin:0 0 6px;
}
.条件一覧 ul{ margin:0; padding-left:1.2em; font-size:12px; }
.条件一覧 li{ margin:0 0 3px; }
.条件一覧 b{ color:var(--色-強調); }
.条件一覧注記{
  margin:6px 0 0;
  font-size:11px;
  color:var(--色-文字薄);
}


/* ---------- 入口 ---------- */

.入口一覧{ list-style:none; margin:0; padding:0; }
.入口項目{ margin:0 0 9px; }

.入口ボタン{
  display:block;
  background:var(--色-入口面);
  color:var(--色-入口文字);
  border:1px solid var(--色-入口枠);
  border-radius:8px;
  padding:12px 14px;
  text-decoration:none;
  font-size:14px;
}

.入口注記{
  display:block;
  font-size:11px;
  color:var(--色-文字薄);
  margin:4px 0 0;
  padding-left:2px;
}


/* ---------- まだ作っていないもの（押せない表示）---------- */

.未作成{
  display:block;
  border:1px dashed var(--色-使用不可);
  color:var(--色-使用不可);
  border-radius:8px;
  padding:11px 14px;
  font-size:14px;
}


/* ---------- 表紙ページ ---------- */

.戻る{ font-size:12px; margin:14px 0 10px; }

.表紙題{
  font-size:19px;
  color:var(--色-強調);
  margin:0 0 6px;
  border-left:5px solid var(--色-アクセント);
  padding-left:10px;
}
.表紙説明{
  font-size:12px;
  color:var(--色-文字薄);
  margin:0 0 14px;
}

.項目一覧{ list-style:none; margin:0; padding:0; }
.項目{ margin:0 0 9px; }


/* ---------- 注意書き・脚注 ---------- */

.注意{
  font-size:11px;
  color:var(--色-文字薄);
  border:1px dashed var(--色-罫線);
  border-radius:8px;
  padding:10px 12px;
  margin:0 0 14px;
}

.脚注{
  font-size:11px;
  color:var(--色-文字薄);
  text-align:center;
  margin:18px 0 0;
}


/* ---------- 画面が狭いとき（320px 前後の端末）---------- */

@media (max-width:359px){
  .画面{ padding:0 10px; }
  .カード{ padding:10px; }
  .時間{ font-size:8px; }
  .昼{ font-size:8px; margin-left:1px; }
}


/* ---------- 画面が広いとき ---------- */

@media (min-width:600px){
  .画面{ max-width:560px; }
  .日{ height:66px; }
  .記号{ font-size:19px; }
  .時間{ font-size:11px; min-height:16px; }
  .昼{ font-size:10px; }
}


/* ============================================================
   ここから第5試作で追加した分です。
   第4試作までの記述は1行も変更・削除していません。
   色の値は1つも持ちません。すべて theme_STAFF.css の変数です。
   ============================================================ */


/* ---------- 本人カード（トップ画面の小さなカード）---------- */

.本人カード{
  display:flex;
  align-items:center;
  gap:11px;
  padding:8px;
}

.本人-写真{
  flex:0 0 auto;
  width:44px;
  height:44px;
  border:1px dashed var(--色-使用不可);
  border-radius:8px;
  color:var(--色-使用不可);
  font-size:10px;
  line-height:44px;
  text-align:center;
}

.本人-名{
  flex:1 1 auto;
  font-size:14px;
}

.本人-入口{
  flex:0 0 auto;
  width:auto;
  padding:8px 13px;
  font-size:12px;
}


/* ---------- プロフィールの項目行 ---------- */

.プロフ表{ margin:0; font-size:13px; }

.プロフ行{
  display:flex;
  gap:10px;
  padding:7px 0;
  border-top:1px solid var(--色-罫線);
}
.プロフ行:first-child{ border-top:none; padding-top:0; }
.プロフ行:last-child{ padding-bottom:0; }

.プロフ名{
  flex:0 0 7em;
  margin:0;
  font-size:12px;
  color:var(--色-文字薄);
}

.プロフ値{ flex:1 1 auto; margin:0; }

.プロフ注{ font-size:11px; color:var(--色-文字薄); }

/* 顔写真の枠。画像ファイルは使いません */
.写真枠{
  display:block;
  width:64px;
  height:64px;
  border:1px dashed var(--色-使用不可);
  border-radius:8px;
  color:var(--色-使用不可);
  font-size:11px;
  line-height:64px;
  text-align:center;
}


/* ---------- 取扱いに注意する項目の注記 ---------- */

.取扱い注意{
  margin:9px 0 0;
  padding:8px 10px;
  background:var(--色-アクセント面);
  border:1px solid var(--色-アクセント);
  border-radius:8px;
  font-size:11px;
  line-height:1.6;
  color:var(--色-文字);
}


/* ---------- 勤務条件 ---------- */

.条件表{ margin:0; font-size:13px; }

.条件行{
  display:flex;
  gap:10px;
  padding:7px 0;
  border-top:1px solid var(--色-罫線);
}
.条件行:first-child{ border-top:none; padding-top:0; }
.条件行:last-child{ padding-bottom:0; }

.条件名{
  flex:0 0 9em;
  margin:0;
  font-size:12px;
  color:var(--色-文字薄);
}

.条件値{ flex:1 1 auto; margin:0; }


/* ---------- 学期の行 ---------- */

.学期一覧{ list-style:none; margin:0; padding:0; font-size:13px; }

.学期{
  display:flex;
  align-items:center;
  gap:9px;
  padding:8px 0;
  border-top:1px solid var(--色-罫線);
}
.学期:first-child{ border-top:none; padding-top:0; }
.学期:last-child{ padding-bottom:0; }

.学期名{ flex:0 0 3.2em; color:var(--色-強調); }

.学期状態{ flex:1 1 auto; font-size:12px; }
.学期状態-未{ color:var(--色-文字薄); }

/* 押せない試作表示です。button ではありません */
.学期操作{
  flex:0 0 auto;
  border:1px dashed var(--色-使用不可);
  border-radius:8px;
  padding:5px 10px;
  font-size:12px;
  color:var(--色-使用不可);
}


/* ---------- 変更履歴 ---------- */

.履歴なし{ margin:0; font-size:13px; color:var(--色-文字薄); }


/* ---------- 画面が狭いとき（第5試作の追加分）---------- */

@media (max-width:359px){
  .プロフ名{ flex-basis:6em; }
  .条件名{ flex-basis:7.5em; }
  .本人-入口{ padding:8px 9px; }
  .本人カード{ gap:9px; }
}