@charset "UTF-8";

/********************
 * 全体
 ********************/
* {
  font-size: 16px;
  scroll-behavior: smooth;
}

body.manage {
  background-color: #eeeeee;
}

input[type="radio"],
input[type="checkbox"] {
  height: 16px;
  width: 16px;
}

.page-header {
  margin-top: 20px;
  padding-top: 2px;
  background-color: #3366ff;
  color: #ffffff;
  text-align: center;
  min-width: 290px;
}

.page-header.orange {
  background-color: orange;
 color: #000000;
}

.page-header.page-header-manage {
  background-color: #006400;
  margin-top: 0px;
  padding-top: 0px;
}

.page-header.page-header-manage h1 {
  margin-top: 37px;
}

.page-header h1 a {
  display:block;
  width: 100%;
  margin-top: -22px;
  padding-top: 22px;
  margin-bottom: -19px;
  padding-bottom: 19px;
  font: inherit;
  color: inherit;
}

.page-header.page-header-manage h1 a {
  padding-top: 37px;
  margin-top: -37px;
}

.page-header h1 a:hover {
  text-decoration: none;
}

.page-header .titlelogo {
  height: 43px;
  margin-bottom: 7px;
  margin-right: 7px;
  font: inherit;
}

.page-header .btn-logout {
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}

.container {
  padding-top: 15px;
  padding-bottom: 25px;
  min-width: 290px;
}
.container.container-small {
  max-width: 600px;
}

p, div {
  word-wrap: break-word;
  overflow-wrap : break-word;
}

.subtitle {
  margin-top: 50px;
  margin-bottom: 15px;
  padding-top: 1px;
  padding-bottom: 5px;
  background-color: #3366ff;
  color: #ffffff;
  text-align: center;
  min-width: 290px;
}

.manage .subtitle {
  background-color: #006400;
}

p.attention-message {
  padding-top: 10px;
  padding-bottom: 6px;
}

p.attention-message strong {
  font-size: 30px;
}

a img.img-responsive {
  display: inline-block
}

table.vertical-center tr td,
table.vertical-center tr th {
  vertical-align: middle;
}

.none-mark-list {
  list-style-type: none;
}

.square-list {
  list-style-type: square;
}

.circle-list {
  list-style-type: circle;
}

input[type=submit].font-awesome {
  font-family: FontAwesome;
}

.btn.emphatic-btn {
  border-radius: 30px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.btn.emphatic-btn strong {
  font-size: 24px;
}

.panel .small-space-list {
  padding-left: 20px;
}

.text-underline {
  text-decoration: underline;
}

.link-in-sentence:before {
  content: "　";
}
.link-in-sentence:after {
  content: "　";
}

.chkbox {
	margin:			0 0 10px 20px;
}
/* ラベルのスタイル　*/
.chkbox label {
	padding-left:		38px;			/* ラベルの位置 */
	font-size:		32px;
	line-height:		32px;
	display:		inline-block;
	cursor:			pointer;
	position:		relative;
}

/* ボックスのスタイル */
.chkbox label:before {
	content:		'';
	width:			32px;			/* ボックスの横幅 */
	height:			32px;			/* ボックスの縦幅 */
	display:		inline-block;
	position:		absolute;
	left:			0;
	background-color:	#fff;
	box-shadow:		inset 1px 2px 3px 0px #000;
	border-radius:		6px 6px 6px 6px;
}
/* 元のチェックボックスを表示しない */
.chkbox input[type=checkbox] {
	display:		none;
}
/* チェックした時のスタイル */
.chkbox input[type=checkbox]:checked + label:before {
	content:		'\2713';		/* チェックの文字 */ 
	font-size:		34px;			/* チェックのサイズ */
	color:			#fff;			/* チェックの色 */
	background-color:	#06f;			/* チェックした時の色 */
}

/*
.listTest {
   display: flex;
    align-items: center;
    flex-direction: column;
}
.listTest ul {
    list-style: none;
    padding-left: 15px;
}
.listTest ul li {

}
*/

.caution-red {
    color: rgb(235, 0, 0);
}

.caution-red-b {
    color: rgb(235, 0, 0);
    font-weight: bold;
}

.mintitle {
  font-size: 1.2em;
  font-weight: bold;
  margin-top: 20px;
  margin-bottom: 10px;
}

/********************
 * エラーメッセージ
 ********************/
#errorMessage,
#message {
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-top: 20px;
}

.display-table-td .error-form-group {
  margin-left: -15px;
  margin-right: -15px;
  padding-left: 15px;
  padding-right: 15px;
}

.error-form-group {
  padding-top: 10px;
  padding-bottom: 10px;
  border: solid 1px #A94442;
}

/********************
 * bootstrapの設定変更
 ********************/
.input-lg,
.btn-lg {
  font-size: 16px;
}

.form-horizontal .form-group .form-group {
  margin-left: 0px;
  margin-right: 0px;
}

.form-control[readonly] {
  cursor: not-allowed;
}

.hasDatepicker[readonly] {
  cursor: pointer;
}

.well.well-success {
  background-color: #dff0d8;
  background-image: linear-gradient(to bottom, #d0e9c6 0px, #dff0d8 100%);
  border-color: #d6e9c6;
}

div.table-responsive .table {
  white-space: nowrap;
}

/********************
 * datepickerの設定変更
 ********************/
.ui-datepicker select.ui-datepicker-year[data-event=change],
.ui-datepicker select.ui-datepicker-month[data-event=change] {
  color: #2e6e9e;
}
.ui-datepicker select.ui-datepicker-year[data-event=change] {
  width: 42%;
  margin-right: 2%;
}
.ui-datepicker select.ui-datepicker-month[data-event=change] {
  width: 40%;
  margin-left: 4%;
}

/********************
 * フォーム
 ********************/
.required {
  background: #ff8205;
  color: #ffffff;
  padding: 3px 5px;
  border-radius: 5px;
  margin-left: 1px;
}

div.form-group>label.control-label,
div.form-control-static{
  margin-top: 3px;
  margin-bottom: 3px;
}

.format {
  background: #b8d200;
  color: #ffffff;
  padding: 3px 5px;
  border-radius: 5px;
  margin-left: 1px;
}
.detail-box {
  margin-top: 7px;
}

/********************
 * テーブルレイアウト
 ********************/
.panel-primary .display-table-th {
  background-color: #8BB9DE;
  color: #FFFFFF;
}

.display-table-th,
.display-table-td {
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 10px;
  padding-bottom: 2px;
}

.panel-primary .display-table-td div:first-child:not(.has-error) .label-group:first-child:not(.has-error) {
    margin-top: -10px;
}
.panel-primary .display-table-td div:not(.has-error) .label-group:not(.has-error) {
    background-color: rgb(242, 250, 253);
    margin-left: -15px;
    margin-right: -15px;
    margin-bottom: 10px;
    padding: 10px 15px 5px;
}

/********************
 * サイズxs
 ********************/
@media screen and (max-width: 767px){
  /**************
   * 全体
   **************/
  h1 {
    font-size: 24px;
  }

  h2 {
    font-size: 22px;
    margin-top: 5px;
    margin-bottom: 2px;
  }
  
  .subtitle h2 {
    margin-top: 20px;
    margin-bottom: 10px;
  }

  .container {
    padding-left: 3px;
    padding-right: 3px;
  }

  .page-header .titlelogo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 33px;
  }

  .out-of-panel-contents {
    padding-left: 12px;
    padding-right: 12px;
  }

  p.attention-message strong {
    font-size: 22px;
  }

  .row {
    margin-left: -3px;
    margin-right: -3px;
  }

  .row .btn-area:not(:last-child) {
    margin-bottom: 10px;
  }

  th.vertical-writing-xs span,
  td.vertical-writing-xs span {
    -ms-writing-mode: tb-rl;      /* IE用　*/
    -webkit-writing-mode: tb-rl;  /* chrome用　*/
    -o-writing-mode: vertical-rl; /* opera用　*/
    writing-mode: vertical-rl;
  }

  th.vertical-writing-xs,
  td.vertical-writing-xs {
    width: 40px;
  }

  .btn.emphatic-btn strong {
    font-size: 18px;
  }

  .panel-primary .display-table-th,
  .panel-primary .display-table-td {
    border-bottom: solid 1px #337AB7;
  }

  /********************
   * エラーメッセージ
   ********************/
  #errorMessage,
  #message {
    padding-left: 12px;
    padding-right: 12px;
  }

  /**************
   * フォーム
   **************/
  button.btn-lg {
    margin-top: 5px;
    padding: 6px 12px;
  }

  .input-group-btn .btn-lg.icon {
    padding: 10px 16px;
    font-size: 18px;
    margin-top: 0px;
  }

  /* ラジオボタン */
  .radio-inline.xs-block {
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .radio-inline.xs-block + .radio-inline.xs-block {
    margin-top: -5px;
    margin-left: 0px;
  }
  /* セレクトボックス用幅設定 */
  .form-inline .bootstrap-select.col-xs-5 {
    width: 41.66666667%;
  }
  .form-inline .bootstrap-select.col-xs-4-5 {
    width: 37.5%;
  }
  .form-inline .bootstrap-select.col-xs-4 {
    width: 33.33333333%;
  }
  .form-inline .bootstrap-select.col-xs-3 {
    width: 25%;
  }
  .form-inline .bootstrap-select.col-xs-3-5 {
    width: 29.16666667%;
  }
}

/********************
 * サイズsm以上
 ********************/
@media screen and (min-width: 768px){
  /**************
   * 全体
   **************/
  * {
    font-size: 18px;
  }
  input[type="radio"],
  input[type="checkbox"] {
    height: 18px;
    width: 18px;
  }

  .media-right-sm {
    display: table-cell;
    vertical-align: top;
    padding-left: 10px;
  }

  /********************
   * bootstrapの設定変更
   ********************/
  .input-lg,
  .btn-lg {
    font-size: 18px;
  }

  /********************
   * datepickerの設定変更
   ********************/
   #ui-datepicker-div.ui-datepicker {
     width: 20em;
   }

  /**************
   * テーブルレイアウト
   **************/
  .display-table {
    display: table;
    table-layout : fixed;
    width: 100%;
  }
  .display-table-tr {
    display: table-row;
    width: 100%;
  }
  .display-table-th,
  .display-table-td {
    display: table-cell;
    float: none;
    vertical-align: top;
  }
  .panel-primary .display-table-th,
  .panel-primary .display-table-td {
    border-bottom: solid 1px #337AB7;
  }

  /**************
   * フォーム
   **************/
  .radio-inline.xs-block.has-next {
    margin-right: 15px;
  }
  .hrgreen {
  border-top: 8px solid #32CD32;
  }
  .DLbtn {
  padding: 30px 60px;
  background:red;
  color: #ffffff;
  }
  .DLbtn:hover {
  opacity: 0.7;
 }
 .minitext {
 font-size: 13.5px;
 }
}

/********************
 * クエスタント
 ********************/
.button-qt a {
    color: #ffffff;
    background: rgb(242, 124, 50);

    border-radius: 8px;

    margin: 0 auto;
    max-width: 400px;

    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 25px;

    text-decoration: none;
}

.button-qt a span {
  	flex: 1;
  	font-size: 26px;
    text-align: center;
    font-weight: bold;
}

.button-qt a i {
  	font-size: 28px;
    margin-left: auto;
}

.border-line-qt {
    border-bottom: 2px solid #8b8b8b;
    width: 90%;
    margin: 10px auto;
}

/********************
 * 年間スケジュール
 ********************/
 .deadline-scope,
.deadline-scope * {
  all: revert;
}

.deadline-scope {
  --border:#333;
  --cell:#8b8b8b;
  --left:#d3e6ea;
  --text:#333;
  --bg:#fff;

  color:var(--text);
  background:transparent;
  line-height:1.6;
}

.deadline-scope .deadline-table{
  width:100%;
  border:3px solid var(--border);
  border-collapse:separate;
  border-spacing:0;
  background:var(--bg);

  table-layout: fixed;
}

.deadline-scope .col-label{ width: 12rem; }

.deadline-scope .deadline-table th,
.deadline-scope .deadline-table td{
  padding: 4px 2px !important;
  text-align:center;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: anywhere;

  border-right:2px solid var(--cell);
  border-bottom:2px solid var(--cell);

  font-size: clamp(16px, 1.9vw, 20px);
}

.deadline-scope .deadline-table th:not(.rowhead):not(:first-child),
.deadline-scope .deadline-table td:not(:first-child) {
  padding: 4px 2px !important;

  font-size: clamp(16px, 1.9vw, 20px) !important;

  letter-spacing: 0.02em;

  line-height: 1.25;
}

.deadline-scope thead th:not(.rowhead):not(:first-child) {
  font-size: clamp(16px, 1.9vw, 20px) !important;
  padding: 6px 8px !important;
}

.deadline-scope .rowhead{ background:var(--left); text-align:left; }

.deadline-scope .deadline-table :is(th,td):last-child{ border-right:none; }
.deadline-scope .deadline-table tbody tr:last-child :is(th,td){ border-bottom:none; }

/********************
 * 利用区分
 ********************/
/* コンテナで完全スコープ */
.usage-category-list {
  margin-top: 0.5em;
  display: flex;
  flex-direction: column;
  gap: 24px;
  font-family: sans-serif;
}

/* 各行 */
.usage-category-item {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* 左側ラベル */
.usage-category-label {
  margin-left: 1em;
  min-width: 120px;
  padding: 8px 12px;
  border-radius: 6px;
  color: #ffffff;
  font-weight: bold;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ラベル番号 */
.usage-label-number {
  font-size: 1.2em;
}

/* 個別色指定（画像に近いブルー） */
.usage-label-general,
.usage-label-student,
.usage-label-reduction-general,
.usage-label-reduction-student {
  background-color: #6ea6d7;
}

/* 説明文 */
.usage-category-text {
  line-height: 1.2;
}