html {font-size: 62.5%;}

body {overflow-x: hidden;font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
  padding-bottom: 70px;font-weight: 500;font-size: 10px; font-size: 1.4rem;}

/* TODO: メニュー幅可変対応の全体適用後廃止予定 */
.container {
  max-width: none !important;
  width: 1200px; /*固定したい幅に設定*/
}

#container {
  display: grid;
  grid-template-columns: auto 1fr;
  width: 1200px;
  margin: 0 auto;
  padding: 0;
}

#menu {
  position: relative;
  width: 300px;
  padding: 1px 15px;
}

#menu_handle {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  line-height: 30px;
  margin-top: 4px;
  margin-left: -33px;
  border: solid 1px #ddd;
  border-radius: 3px;
  cursor: pointer;
}

#menu_handle:hover {
  background-color: #eee;
}

#menu .panel {
  width: 270px;
  border: solid 1px #ddd;
  border-radius: 4px;
  overflow: hidden;
  -webkit-box-shadow: none;
  box-shadow: none;
}

#menu .list-group-item {
  margin-bottom: 0;
  border: none;
  border-top: solid 1px #ddd;
  border-radius: 0 !important;
}

#menu .panel > .list-group-item:first-child {
  border-top: none;
}

#content {
  flex-grow: 1;
  padding: 0 15px;
}

.navbar-collapse {
  display: block !important;
  height: auto !important;
  padding-bottom: 0;
  overflow: visible !important;
}

.navbar-toggle {
  display: none;
}

.navbar-brand {
  margin-left: -15px;
}

.middle-table > tbody > tr > td,
.middle-table > thead > tr > th {
  vertical-align: middle;
}
th{white-space: nowrap;}
td:first-child {max-width: 340px;}
td:last-child {white-space: nowrap;}

#planlist img {width: 2rem;}
#planlist .radio-inline {margin-right: 15px;}
#planlist .radio-inline:last-child {margin-right: 0;}

.logo_img {
  display: block;
  margin: 10px auto;
  width: 200px;
}

.middle-table .lradio-inlineogo_img {
  display: block;
  margin: 10px auto;
  width: 200px;
}

.lead {margin-right: 1rem;}

/* summernote 画像URL指定部分を非表示 */
.note-group-image-url {display: none;}

.holiday a {color:red !important;}

.popover { font-size:10px; padding: 0;}

.lock_box {
  min-height: 20px;
  padding: 26px;
  margin-bottom: 20px;
  color: #FFF;
  background-color: #E88486;
  border: 1px solid #DF585A;
  border-radius: 4px;
  text-align: center;
}

.badge-red{
  background-color: red;
}

.article_title , .tag_title {
  display: block;overflow: hidden;
  text-overflow: ellipsis;
  width: 20em;
  white-space: nowrap;
}
.tag_title {width:4em;}
/*.article_title:before {content:"A： ";}
.article_title_b:before {content:"B： ";}*/

/* CMSと表の表示を合わせる .note-editorにCSSを当てていく */
/* 引用 */
blockquote {
  position: relative;
  width: 100%;
  margin:0  auto 10px;
  padding: 10px 15px 10px 60px;
  box-sizing: border-box;
  background: #f5f5f5;
  color: #777777;
  border-left: 4px solid #FFBA75;
}

blockquote:before{
  display: inline-block;
  position: absolute;
  top: 15px;
  left: 15px;
  vertical-align: middle;
  content: "\f10d";
  font-family: FontAwesome;
  color: #FFBA75;
  font-size: 30px;
  line-height: 1;
}

blockquote p {
  padding: 0;
  margin: 7px 0;
  line-height: 1.7;
}

blockquote cite {
  display: block;
  text-align: right;
  color: #888888;
  font-size: 0.9em;
}

blockquote p {
  padding: 0;
  margin: 7px 0;
  line-height: 1.7;
}

blockquote cite {
    display: block;
    text-align: right;
    color: #888888;
    font-size: 0.9em;
}

.note-editor h1{
  font-size: 3rem;
  border-bottom: solid 2px #ED7600;
  border-top: solid 2px #ED7600;
  padding: 10px;
}
.note-editor h2{ background-color: none;border: none; font-size: 2.6rem; border-bottom: 2px solid #ED7600;padding: 10px;}
.note-editor h3{ font-size: 2rem; border-left: 4px solid #ED7600;padding: 10px;}
.note-editor p{font-size: 1.6rem;}
.note-editor p:after {content: "";display: block;clear: both;}

/* 記事内画像中央 */
.note-editor .article_img {display: block;margin: 20px auto 30px;}

/* 記事内画像　左画像 */

/* CSVダウンロードボタン表示 */
.flex-container{display: flex;}
.flex-item-r {margin-left: auto;}
.dl-number-txt{font-size:1.4rem;font-weight:700; padding-right:1rem;}

.exl_dl_box{padding: 3rem;}
.exl_dl_box input{margin-right: 1rem;}

.cancel-btn-set {position: absolute;top:0;right: 1rem;}

/*フリーミアム会員に出るアラート*/
.alert-freemium {width: 75%;margin:20px auto;}

/*フリーミアム規約画面*/
.free_agree_area {
  width: 60%;
  height: 15vh;
  margin:40px auto;
  padding:0 30px 20px;
  overflow: scroll;
  border: solid 1px #CCC;
  border-radius: 4px;
  background-color: #FFF;
}
.free_agree_area h1 {font-size:1.2rem;}
.free_agree_area h2 {font-size:1rem;}
.free_agree_area p , .free_agree_area ol {font-size:.8rem;}

ol.parentheses li{
  list-style-type:none;
  list-style-position:inside;
  counter-increment: cnt;
}
ol.parentheses li:before{
  display: marker;
  content: "(" counter(cnt) ") ";
}

/*資料登録方法*/
.manual-area {display: flex;flex-direction: column;}
.manual-area .row{margin-bottom: 20px;}
.manual-area h2 , .manual-area h3 ,.manual-area h4 {
  margin-bottom: 20px; padding: 1rem 1.5rem;color: #FFF; font-size: 2rem;background-color: #2E7AB6;
}
.manual-area h3 {color: #000; background-color: #d9edf7;}
.manual-area h4 {border-left: solid 4px #d9edf7; padding: .7rem 1rem; color: #000; background-color: #FFF;}
.manual-area p {font-size: 1.6rem;}
.manual-area img {width: 100%;border: solid 1px #DDD;}

.stepBar {display: flex;padding-left: 0; width: 600px;position: relative;margin: 20px auto;text-align: center;}
.stepBar li {
  font-size: 12px;
  list-style: none;
  position: relative;
  width: 33.333%;
}
.stepBar li:after {
  background: #D0E1F9;
  content: "";
  width: calc(100% - 24px);
  height: 4px;
  position: absolute;
  left: calc(-50% + 12px);
  top: 10px;
}
.stepBar li:first-child:after {
  display: none;
}
.stepBar li span {
  background: #D0E1F9;
  color: #ffffff;
  display: inline-block;
  height: 24px;
  margin-bottom: 5px;
  line-height: 24px;
  width: 24px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}
.stepBar .visited:after {
  background: #4D648D;
}
.stepBar .visited span {
  background: #4D648D;
}

/* 成果報酬 on/offボタン*/
/* 共通*/
.switch input[type=checkbox] {
    display: none;
}
.switch label>input[type=checkbox]~span {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 60px;
    height: 28px;
    font-size: 11px;
    border-style: none;
    border-radius: 15px; // =(丸ボタンのサイズ÷2)+(丸ボタンのmargin)
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);box-shadow
}
/*  スイッチがONのとき */
.switch label>input[type=checkbox]:checked+span {
    display: flex;
    padding-left: 8px;
    color: white;
    background-color: #28a745;
}
.switch label>input[type=checkbox]:checked+span+span {
    display: none;
}
/* スイッチがOFFのとき  */
.switch label>input[type=checkbox]+span {
    display: none;
}
.switch label>input[type=checkbox]+span+span {
    display: flex;
    padding-right: 8px;
    color: gray;
    background-color: lightgray;
}
/* 丸ボタンのデザイン */
.switch label>input[type=checkbox]:checked+span::after, label>input[type=checkbox]+span+span::before {
    display: block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    margin: 3px;
    border-radius: 50%;
    background-color: white;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
    content: "";
}

/* ---- デリートボタンのfontawesome ---- */
.btndelete {font-family: FontAwesome;}

/* UI datepicker */
.ui-datepicker { z-index: 10000!important; }


/* TOPへ戻るボタン */
#page-top {
  position: fixed;
  bottom: 50px;
  right: 20px;
  font-size: 80%;
  z-index:2000;
}

#page-top a {
  display: block;
  background: #0ABDE3;
  color: #fff;

  padding: 15px 10px;
  text-align: center;
  text-decoration: none;
  border-radius: 5px;
}

#page-top a:hover {
  background: #CFF2FA;
  text-decoration: none;
}

/* エラーページ */
.error_box{height: 100vh;display: flex;align-items: center;justify-content: center;}
.error_box .panel{width: 70%;}
#error{margin: 0;padding: 0;}



.mt0 {margin-top: 0!important;}
.mt10 {margin-top: 10px!important;}
.mt20 {margin-top: 20px!important;}
.mt40 {margin-top: 40px!important;}
.mr20 {margin-right: 20px!important;}
.m20 {margin: 20px!important;}
.mb0 {margin-bottom: 0!important;}
.mb10 {margin-bottom: 10px!important;}
.mb20 {margin-bottom: 20px!important;}
.ml10{margin-left: 10px!important;}
.ml20{margin-left: 20px!important;}
.pdr10 {padding-right:10px!important;}
.p0{padding: 0!important;}

.tal{text-align: left;}
.tac{text-align: center;}
.tar{text-align: right;}

.fw-normal {font-weight: normal!important;}

.position-relative {position: relative;}

.bg-none {background: none;}
.bg-white {background-color: #fff;}

.w100{width:100%;}
.w75{width:75%;}

.service_add table:last-child{margin-bottom: 0;}

.red{color:red;}

/* ---- 基本機能追加テーブル ---- */
#basic_function_table  {margin-bottom: 0;}
#basic_function_table th {font-size: 1.5rem;border-bottom: none;}
#basic_function_table td {padding:10px;}
#basic_function_table td:nth-child(2n+1) {display: flex;flex-direction: column;}
#basic_function_table td:nth-child(2n) {width: 3rem;text-align: center;}
#basic_function_table input[type="text"] {margin-bottom: 10px;}


/* Sortable */
.sortable > * {
  cursor: move;
}

#operator_wrapper {
  display: flex;
  margin: 30px 0;
  justify-content: flex-start;
  align-items: center;
}
#operator_wrapper form {
  margin-right: 20px;
}
#tab_wrapper {
  display: flex;
}
#operator_wrapper .tab {
  width: 150px;
  padding: 5px 10px;
  line-height: 1.5;
  text-align: center;
  border-top: solid 1px #ddd;
  border-bottom: solid 1px #ddd;
  border-right: solid 1px #ddd;
  color: #337ab7;
  font-size: 12px;
}
#operator_wrapper .tab:first-child {
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  border-left: solid 1px #ddd;
}
#operator_wrapper .tab:last-child {
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}
#operator_wrapper .tab.selected {
  background-color: #337ab7;
  color: #ffffff;
  border-color: #337ab7;
}
#operator_wrapper .tab:not(.selected) {
  cursor: pointer;
}
#operator_wrapper .tab:not(.selected):hover {
  color: #333;
  background-color: #e6e6e6;
}

#content .table tbody td {
  border-top: none;
  border-bottom: solid 1px #ddd;
}