div.document > p {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
div.document > h3{
  background:var(--gray-color-light);
  font-size: 1.5rem;
  padding: 0.5rem;
  border-radius: 10px;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}



.cover-box{
  background:var(--main-color-light);
  margin-top:1rem;
  padding:0;
  width:100%;
  border-radius: 10px;
}
.cover-content{
  background:var(--main-color);
  color:var(--white-color);
  border-radius: 10px;
  position:relative;
  transition:all .2s;
  height:100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.cover-content a{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}
.cover-content:hover{
  cursor:pointer;
  background:var(--main-color-light);
}

.color-palette-qr{
  width:150px;
  height:50px;
}

div.loading-message{
  display:none;
  text-align:center;
  position: absolute;
  z-index: 1;
  width:200px;
  height:auto;
  top: 50%;
  left: 50%;
  margin:1%;
  transform: translateY(-50%) translateX(-50%);
  background: var(--white-color);
  box-shadow: 0 0 8px gray;
  border-radius: 10px;

}

ul.sortable-list{
  list-style: none;
  margin:  0;
  padding: 0;
}

/*----------------------------------------------------*/
/*urlをコピーする時のみ使用*/
/*----------------------------------------------------*/
textarea.no-out-line:focus {
    outline: none;
}

/*----------------------------------------------------*/
/*bootstrapのオーバーライド*/
/*----------------------------------------------------*/
.form-check-input:checked{
  background:var(--main-color);
  border:var(--main-color-light);
}

a.page-link{
  color:var(--main-color);
}
a.page-link:hover{
  background:var(--main-color);
  color:#fff;
}
ul.pagination li.active .page-link{
  background:var(--main-color);
  border:var(--main-color);
  color:#fff;
}
.asc:after {
  content: " \2193";
}
.desc:after {
  content: " \2191";
}
.form-group{
  margin-top:1rem;
  margin-bottom:1rem;
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  color: var(--white-color);
  background: var(--main-color);
}


.lbl-input-required{
  color: var(--white-color);
  background: var(--input-required-color);
  padding-left:1rem;
  padding-right:1rem;
  margin-left:1rem;
  font-size:0.8rem;
}

.lbl-main{
  color: var(--white-color);
  background: var(--main-color);
  padding-left:1rem;
  padding-right:1rem;
  margin-left:1rem;
  font-size:0.8rem;
}

/*----------------------------------------------------*/
/*brand title/
/*----------------------------------------------------*/
.brand-font{
  font-family: 'Montserrat Subrayada', sans-serif;
  padding:1rem;
}

/*----------------------------------------------------*/
/*massege from cakephp style.css*/
/*----------------------------------------------------*/
div.message {
    text-align: center;
    cursor: pointer;
    display: block;
    font-weight: normal;
    padding: 0 1.5rem 0 1.5rem;
    transition: height 300ms ease-out 0s;
    background-color: var(--sub-color);
    color: var(--white-color);
    top: 15px;
    right: 15px;
    z-index: 999;
    overflow: hidden;
    /*height: 50px;*/
    line-height: 2.5em;
}

div.message:before {
    line-height: 0px;
    font-size: 20px;
    height: 12px;
    width: 12px;
    border-radius: 15px;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
    position: relative;
    left: -11px;
    background-color: var(--white-color);
    padding: 12px 14px 12px 10px;
    content: "i";
    color: var(--sub-color);
}

div.message.error {
    background-color: var(--point-color);
    color: var(--white-color);
}

div.message.error:before {
    padding: 11px 16px 14px 7px;
    color: var(--point-color);
    content: "x";
}
div.message.hidden {
    height: 0;
}


.side-bar{
    position: sticky;
    top: 0px;
    padding-top: 0.5rem;
    padding-right: 0;
    padding-left: 0;
    width: 100%;
}

.section-page-side-navigation{
  margin-right:0.5rem;

}
.section-page-side-navigation ul{
  list-style: none;
	overflow: hidden;
  padding-top: 1rem;
}
.section-page-side-navigation ul li{
	float: left;
  padding:0;
}
.section-page-side-navigation ul li a{
	font-size: 0.8rem;
  color:var(--white-color);
}
.section-page-side-navigation ul li a:hover{
}

/*table*/
table {
  border-collapse: collapse;
  width: 100%;
}

.tbl-base th,
.tbl-base td{
  padding: 10px;
  border: solid 1px var(--gray-color-light);
  text-align:center;
  box-sizing:border-box;
}
.tbl-base th {
  background: var(--main-color);
  color: var(--white-color);

}
@media screen and (max-width: 640px) {
  .tbl-base .head{
    display:none;
  }
  .tbl-base {
    width: 100%;
  }
  .tbl-base td,
  .tbl-base th{
    display: block;
    width: 100%;
    border-bottom:none;
  }
  .tbl-base td{
    padding: 0px 12px 0 0;
    display: block;
    width: 100%;
    line-height: 2.5;
    text-align:left;
  }
  .tbl-base td:before{
    color: var(--white-color);
    content: attr(data-label);
    font-weight: bold;
    padding: 0px 10px;
    display: inline;
    background-color: var(--main-color-light);
    margin-right: 10px;
    float: left;
  }
  .tbl-base td.multiple-lines-2:before{
    line-height:5;
  }
  .tbl-base td.multiple-lines-3:before{
    line-height:7.5;
  }
  .tbl-base td.multiple-lines-4:before{
    line-height:10;
  }

  .tbl-base tr:last-child{
    border-bottom: solid 1px #ccc;
  }
}

.tbl-count-every-week-hours{
  margin-top: 1rem;
}
.tbl-count-every-week-hours th {
  background: var(--gray-color-light);
  border: 1px solid var(--bootstrap-border-color);
  padding: 10px;

}
.tbl-count-every-week-hours  td {
  border: 1px solid var(--bootstrap-border-color);
  padding: 10px;
}

.tbl-base-view{
  margin-top: 1rem;
}
.tbl-base-view th {
  background: var(--gray-color-light);
  border: 1px solid var(--bootstrap-border-color);
  padding: 10px;
  width:30%;

}
.tbl-base-view  td {
  border: 1px solid var(--bootstrap-border-color);
  padding: 10px;
  width:70%;
}

@media screen and (max-width: 640px) {
  .last td:last-child {
    border-bottom: solid 1px var(--gray-color-light);
    width: 100%;
  }
  .tbl-base-view  {
    width: 100%;
  }
  .tbl-base-view  th,
  .tbl-base-view  td {
　　border-bottom: none;
    display: block;
    width: 100%;
  }
}

table.tbl-base-index{
  border: solid 1px #dee2e6;
  width:100%;
}
.tbl-base-index th {
  background: var(--gray-color-light);
  padding: 10px;
  border: solid 1px var(--bootstrap-border-color);
  text-align: center;
}
.tbl-base-index  td {
  padding: 10px;
  border: solid 1px var(--bootstrap-border-color);
  word-break: break-all
}
.tbl-base-index  td.actions {
  width:20%;
  padding: 10px;
}


/*ボタン　トップへ*/
#page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: -50px;
  bottom: 50px;
  background: var(--point-color);
  opacity: 0.8;
  border-radius: 50%;
}
#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 25px;
  color: var(--white-color);
  position: absolute;
  width: 25px;
  height: 25px;
  top: -5px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}

/*ボタン　戻るボタンへ*/
#history-back{
  width: 50px;
  height: 50px;
  position: fixed;
  right: -150px;
  bottom: 150px;
  background: var(--main-color);
  opacity: 0.8;
  border-radius: 50%;
}
#history-back a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#history-back a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f100';
  font-size: 25px;
  color: var(--white-color);
  position: absolute;
  width: 25px;
  height: 25px;
  top: -5px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}

/*========= titles  ===============*/
.title-category{
  font-size:4vw;
}
@media screen and (max-width: 768px) {
  .title-category{
    font-size: 1.5rem;
  }
}

.title-category-description{
  font-size:1.5vw;
}
@media screen and (max-width: 768px) {
  .title-category-description{
    font-size: 0.8rem;
  }
}
.title-contents{
  font-size:2vw;
}
@media screen and (max-width: 768px) {
  .title-contents{
    font-size: 1.5rem;
  }
}

.title-sentence{
  font-size:1.5vw;
  padding-top: 1rem;
}
@media screen and (max-width: 768px) {
  .title-sentence{
    font-size: 1.2rem;
  }
}

/*----------------------------------------------------*/
/*indent*/
/*----------------------------------------------------*/
.indent-1{
  text-indent: 1rem;
}
.indent-2{
  text-indent: 2rem;
}
.indent-3{
  text-indent: 3rem;
}
/*----------------------------------------------------*/
/*indent*/
/*----------------------------------------------------*/
/*----------------------------------------------------*/
/*html*/
/*----------------------------------------------------*/
/*-ページ内リンクゆっくりと--*/
/*-html { scroll-behavior: smooth;}--*/
/*----------------------------------------------------*/
/*charset*/
/*----------------------------------------------------*/
@charset "utf-8";

/*----------------------------------------------------*/
/*fonts*/
/*----------------------------------------------------*/


/*----------------------------------------------------*/
/*body*/
/*----------------------------------------------------*/
body{
  font-family:'メイリオ', 'Meiryo', sans-serif;
}

/*----------------------------------------------------*/
/*others*/
/*----------------------------------------------------*/
a{
  color: var(--main-color);
}

p{font-size: 1rem;}

/*----------------------------------------------------*/
/*背景色*/
/*----------------------------------------------------*/
.bg-main{
  background: var(--main-color);
}
.bg-main-light{
  background: var(--main-color-light);
}
.bg-main-super-light{
  background: var(--main-color-super-light);
}
.bg-sub{
  background: var(--sub-color);
}
.bg-sub-light{
  background: var(--sub-color-light);
}
.bg-point{
  background: var(--point-color);
}
.bg-point-light{
  background: var(--point-color-light);
}
.bg-white{
  background: var(--white-color);
}
.bg-gray-light{
  background: var(--gray-color-light);
}
.bg-gray-dark{
  background: var(--gray-color-dark);
}

/*----------------------------------------------------*/
/*文字色*/
/*----------------------------------------------------*/
.text-main{
  color: var(--main-color);
}
.text-sub{
  color: var(--sub-color);
}
.text-point{
  color: var(--point-color);
}
.text-white{
  color: var(--white-color);
}
.text-gray-light{
  color: var(--gray-color-light);
}
.text-gray-dark{
  color: var(--gray-color-dark);
}
/*----------------------------------------------------*/
/*position*/
/*----------------------------------------------------*/
.center{
  text-align: center;
}
.right{
  text-align: right;
}
.left{
  text-align: left;
}

/*----------------------------------------------------*/
/*font-size*/
/*----------------------------------------------------*/
.sm{
  font-size: 0.8rem;
}
.big{
  font-size: 1.2rem;
}
.so-big{
  font-size: 1.5rem;
}
.sm-for-link{
  font-size: 0.8rem;
}
/*----------------------------------------------------*/
/*margin*/
/*----------------------------------------------------*/
.margin{
  margin:1%;
}
.margin-vertical{
  margin-top:1%;
  margin-bottom:1%;
}
.margin-horizontal{
  margin-left:1%;
  margin-right:1%;
}

/*----------------------------------------------------*/
/*padding*/
/*----------------------------------------------------*/
.padding{
  padding:1%;
}
.padding-vertical{
  padding-top:1%;
  padding-bottom:1%;
}
.padding-horizontal{
  padding-left:1%;
  padding-right:1%;
}

/*----------------------------------------------------*/
/*image-size*/
/*----------------------------------------------------*/
.illustration{
  width:80%;
}
.illustration-small{
  width:30%;
}
.illustration-icon{
  width:10%;
}
/*----------------------------------------------------*/
/*PC/mb*/
/*----------------------------------------------------*/
.pc	{ display:inline!important; }
.mb	{ display:none!important; }
@media screen and (max-width: 768px) {
.pc	{ display:none!important; }
.mb { display:inline!important; }
}

/*----------------------------------------------------*/
/*row */
/*----------------------------------------------------*/
.row-base{
  padding-top:2%;
  padding-bottom:1%;
}


/*----------------------------------------------------*/
/*height */
/*----------------------------------------------------*/
.height-vh-70{
  min-height:70vh;
  height:auto !important;
  height:70vh;
}
.height-vh-100{
  min-height:100vh;
  height:auto !important;
  height:100vh;
}
/*----------------------------------------------------*/
/*button */
/*----------------------------------------------------*/
/*普通のボタン（color-main）*/
.btn-flat-border {
  display: inline-block;
  padding: 0.3em 1em;
  text-decoration: none;
  background: var(--main-color);
  color: white;
  border: solid 2px var(--main-color);
  border-radius: 3px;
  transition: .4s;
}

.btn-flat-border:hover {
  background: white;
  color: var(--main-color);
  text-decoration: none;
}

/*普通のボタン（color-point）*/
.btn-flat-border-point {
  display: inline-block;
  padding: 0.3em 1em;
  text-decoration: none;
  background: var(--point-color);
  border: solid 2px var(--point-color);
  border-radius: 3px;
  transition: .4s;
  color: var(--white-color);
}

.btn-flat-border-point:hover {
  background: white;
  color: var(--point-color);
  text-decoration: none;
}
/*検索結果の明細内*/
.btn-flat-border-action {
  text-decoration: none;
  background: var(--main-color);
  color: white;
  border: solid 2px var(--main-color);
  border-radius: 3px;
  transition: .4s;
  margin: 0.1rem;
}

.btn-flat-border-action:hover {
  background: white;
  color: var(--main-color);
  text-decoration: none;
  -webkit-animation: zoom .3s;
}

.btn-flat-border-action-sub {
  text-decoration: none;
  background: var(--sub-color);
  color: white;
  border: solid 2px var(--sub-color);
  border-radius: 3px;
  transition: .4s;
  margin: 0.1rem;
}

.btn-flat-border-action-sub:hover {
  background: white;
  color: var(--sub-color);
  text-decoration: none;
  -webkit-animation: zoom .3s;
}

.btn-flat-border-action-point {
  text-decoration: none;
  background: var(--point-color);
  color: white;
  border: solid 2px var(--point-color);
  border-radius: 3px;
  transition: .4s;
  margin: 0.1rem;
}

.btn-flat-border-action-point:hover {
  background: white;
  color: var(--point-color);
  text-decoration: none;
  -webkit-animation: zoom .3s;
}