/*Font*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap');
body{
  font-family: 'Noto Sans JP', sans-serif !important;
}
/*Browser reset*/
ul,li
{
	list-style-type: none;
	padding-left: 0;
}

/*暫定*/
.scroll-hint-icon{z-index: 999}
.adv_form{
  background-color: rgba(44,105,153,0.1);
  border-radius:10px !important;
  margin-bottom: 20px !important;
  padding:40px 10px !important;
}

#adv_list h4{
  font-weight: 900 !important;
  font-size: 30px !important;
  color:#ffffff !important;
  padding: 10px 30px !important;
  line-height:50px !important;
  background-color: rgb(44,105,153) !important;
  border-radius:60px !important;
}

.card .adv_form .card{
  background-color: inherit !important;
  border:2px dotted rgb(44,105,153) !important;
  margin:20px 0px !important;
}

.btn-primary.ad_remove,.btn-primary.ad_add,
.btn-primary.reward_remove,
.btn-primary.reward_add,.btn-primary.site_remove,.btn-primary.site_add,.btn-primary.site_copy{

  padding:5px 8px !important;
  margin:5px !important;
}

td .btn{
  padding:3px 5px !important;
  max-width:100px;
  min-width: 100px;
  margin:2px auto;
  letter-spacing: .2em;
}

td:has(.btn){padding:7px}



.col-sm-9 h3{
  font-size: 20px;
  font-weight: 800;
  display: inline-block;
}



table td:has(input[type="checkbox"]){
  width:10px;
}

table#alliance_result{
  white-space: nowrap;
}


table#alliance_result .posting_url .input-group.mb-3{
  width: 500px;
}
/*検索*/
#accordion_body .bg-light{background-color: #fbfbfb !important;}
#accordion_body .card-body{
   background-color: #fbfbfb;
}

.select2-container--default .select2-selection--single,.form-control:not(textarea){
  height:2rem !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height: inherit !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  margin-top: -1px !important;
}

.input-group-text{
  padding: 0 10px !important;
}
.form-group {
    margin-bottom: 0.4rem !important;
}


/*pace
.pace .pace-activity, .pace .pace-activity:before{
  border-color: #dc016a transparent transparent !important;
}
.pace {
left: 50vw !important;
right: 50vw !important;
}
.progress_mask{
  background: rgba(255,255,255, 0.3) !important;
  backdrop-filter: blur(3px);
}
*/

.preloader{
  background-color: rgba(255,255,255,0.9) !important;
  backdrop-filter: blur(10px) !important;
}


/*scrollbar*/

.table-bordered{border: inherit !important;}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;


}

::-webkit-scrollbar-track {
  background-color: #fbfbfb;
  border-radius: 100px;
}

::-webkit-scrollbar-thumb {
  border-radius: 100px;
  border: 3px solid transparent;
  background-clip: content-box;
  background-color: rgba(0,0,0,0.1);
}

/*請求支払スクロールバー*/
div:has(table#statement_list)::-webkit-scrollbar {
    width: 24px;
    height: 24px;
}

/*/scrollbar*/

/*Container*/

.container{
  max-width: 100% !important;
}


/*Login*/
body.login-page,
.content-wrapper{
background-image: url(https://sfa.msys.cloud/images/sfa_bg.jpg);
background-size:  cover;
background-size:  200%;
background-attachment: fixed;
background-repeat: no-repeat;
/*-webkit-animation: ping 10s ease-in-out infinite both;
animation: ping 10s ease-in-out infinite both;*/
}
.content-wrapper:before{
 content: '';
  position: absolute;
  top: -0px;
  bottom: -0px;
  left: -0px;
  right: -0px;
  background: inherit;
  filter: blur(50px);
}

.login-page .login-logo img[height="50"]{display:none;}
.login-page .card-primary.card-outline{border-top:none !important;}
.login-page .card-header {display:none;}
.login-page .card-footer {display:none;}


.brand-link .brand-image-xs {
  max-height: 50px !important;
}
.brand-image.img-circle.elevation-3.logo-xs{box-shadow:inherit !important;}

/*.logo-xl.brand-image-xs, .logo-xs.brand-image-xs {
  left: 45px;
}
*/
.brand-link .brand-image {
    margin-left: .4rem !important;
}


.login-box button{border:inherit;border-radius:2px;}

.form-control:focus,.login-card-body .input-group .form-control:focus~.input-group-append .input-group-text, .register-card-body .input-group .form-control:focus~.input-group-append .input-group-text{
border-color: #7695ac!important;
}

.logo_image {
    width: 600px !important;
    margin-left: -110px;
}

.login-box .card{
background-color:rgba(255,255,255,0);
}

.login-box .login-card-body{
background-color:rgba(255,255,255,0.2);
backdrop-filter:blur(15px);
border-radius:5px;

}


.user-menu a span:before{
  font-family:"Line Awesome Free";
content:"\f502";
font-weight: 900;
font-size:20px;
margin-right:10px
}
/*/Login*/







/*item*/
label span.badge-danger{border-radius: 60px !important;font-size: 11px !important;padding:2px 10px !important;}

.btn{
  white-space: nowrap;
  border-radius: 60px !important;
  box-shadow: 0px 2px 5px rgba(0,0,0,0.1) !important;
  font-size: 12px !important;
  padding:10px 20px !important;
  transition:all 0.3s 0s ease-in-out;
}
.btn:not(.bg-transparent):hover,
.btn_func i:hover,.pdf_icon i:hover{
  transform: translateY(2px)scale(0.95) !important;
  transition:all 0.3s 0s ease-in-out;
}

.btn-primary:not(#step_remove):not(#step_add):not(.disabled):not(:disabled),.btn-info,
.custom-control-input:checked~.custom-control-label::before{
background: rgb(44,105,153) !important;
background: linear-gradient(146deg, rgba(44,105,153,1) 50%, rgba(74,146,181,1) 100%) !important;
border:none !important;
}

.btn-danger,#step_remove,#step_add{
background: rgb(255,66,66) !important;
background: linear-gradient(146deg, rgba(255,66,66,1) 50%, rgba(253,45,122,1) 100%) !important;
border: none !important;
}
button.bg-gradient-info,button.bg-gradient-info.btn:hover{
  background: linear-gradient(146deg, rgba(44,105,153,1) 50%, rgba(74,146,181,1) 100%) !important;
  border: none !important;
}
.btn-block{
box-shadow: none !important;
display: inherit;
  width: inherit;
}

.btn.disabled,
.btn:disabled
{
  background: #999999 !important;
  background-color:#999999  !important;
  border: none !important;
}

#form_submit{
  width: 60%;
  height:60px;
  margin: 0 auto;
  font-size: 22px !important;
  font-weight: 700;
  border:2px solid #fbfbfb ;

}


.content-header{
  padding: 0 !important;
}

nav.main-header{
  height: 50px;
  font-size: 14px;
}

ul.navbar-nav li a.nav-link{
  display: flex;
  align-items: center;
}

.navbar-white{
  background: rgba(0,0,0,0) !important;
  border-bottom: none !important;
}
.login-box button,
.page-item.active .page-link
 {
background: linear-gradient(146deg, rgba(44,105,153,1) 50%, rgba(74,146,181,1) 100%) !important;
backdrop-filter: blur(20px) !important;
box-shadow: none !important;
border-color: #dee2e6!important;
color:#ffffff !important;
}
.page-link{color:#000000!important;}

/*Pagenation*/
ul.pagination{
  margin: 10px 0 !important;
}
ul.pagination li a,ul.pagination li span{
  border: none;
  background-color: inherit;
  border-radius: 0.25rem;
  margin:0 2px;

}

[class*=sidebar-dark] .brand-link{
  border-bottom: inherit !important;
}
/*CARD*/
.card{border-radius: 18px !important;
box-shadow: 2px 4px 12px rgb(0 0 0 / 8%) !important;
    transition: all .3s cubic-bezier(0,0,.5,1) !important;
}
.card-header{
  font-size: 40px !important;
  font-weight: 900 !important;
  color:#000000 !important;
  font-family: 'Noto Sans JP', sans-serif;
  letter-spacing:-1px !important;
  border-bottom: none !important;
}
.card .card{
  /*background-color:#fbfbfb !important;*/
  box-shadow: none !important;
}
.card .card .card-header{
  font-size: 30px !important;
}

.card .modal-footer{border-top:none;}

div[id*="_append"] > div{width: 100%;padding:30px 5px}
div[id*="_append"] > div:nth-of-type(even){
  background-color: #f5f5f5;
  border-radius: 10px;
}

div[id*="_append"] .form-group.row {
  margin:0 !important;
}

/*/card*/


/*Sidebar*/

[class*=sidebar-dark-]{background-color: #ffffff !important;}

.sidebar #group_change_form{
  margin-top:10px !important;
}
.sidebar #group_change_form select{
  border:none !important;
}
[class*=sidebar-dark-] .nav-header{
  color: #000000 !important;
  font-weight: 700 !important;
}
[class*=sidebar-dark-] .sidebar a,
[class*=sidebar-dark-] .sidebar a:hover{
  color:#000000 !important;
  font-weight: 600 !important;
  font-size: 12px !important;
}
[class*=sidebar-dark-] .sidebar a i{margin-right:5px !important;}
[class*=sidebar-dark-] .sidebar a i:not(.afad_icon):not(.cats_icon):not(.affilicode_icon):not(.mads_icon):not(.mads_icon):not(.adjust_icon):not(.adebis_icon):not(.precs_icon):not(.ecforce_icon){
  font-size: 20px !important;
}

.nav-link{
  display: flex !important;
}


[class*=sidebar-dark-] .nav-sidebar>.nav-item.menu-open>.nav-link, [class*=sidebar-dark-] .nav-sidebar>.nav-item:hover>.nav-link, [class*=sidebar-dark-] .nav-sidebar>.nav-item>.nav-link:focus{
  color: #000000 !important;
}
.sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link.active, .sidebar-light-primary .nav-sidebar>.nav-item>.nav-link.active{
background-color: #ffffff !important;
}

.card .form-group .col{
  padding:0 1px !important;
}
.nav-treeview li{
  margin-left:20px ;
}


/*Form*/
input[type="radio"][type="checkbox"]{
  accent-color:#003567 !important;
}

.form-group label + .col-sm-9{
  display: flex !important;
  flex-wrap: wrap !important;
}

label:not(.form-check-label):not(.custom-file-label):not(.toggle-on){
  text-align: right !important;
  font-weight: 700 !important;
  font-size: 12px !important;
}

.form-group .col label.col-form-label{
  text-align: center !important;
  font-size: 10px !important;
  margin-bottom:10px !important;
  }

.card .form-group input{
  font-size: 12px !important;
  padding:0 !important;
  text-indent: 1.2em !important;
  color:#000000 !important;
  font-weight: 500 !important;
}

.card .form-group .select2{

  font-size: 12px !important;
  /**/width:100%;
}
.card .form-group col select{/*width:100%;*/}
select,.select2-results__options{font-size: 12px !important;}

.bank_edit{
  width:100% !important;
  color:#003567 !important;
  background-color:inherit !important;
  border-radius: 3px !important;
  padding:9px !important;
  box-shadow: none !important;}
.text-muted{
  color:#9da9b5 !important;
  font-size: 10px !important;
  font-weight: 300 !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered,.form-control{
  color: #000000 !important;
  font-weight: 500 !important;
  font-size: 12px !important;
}

/*requiredマーク*/
label.from_required:before{
  content:"※";
  color:#ff7373;
}

/*アコーディオンのinput調整*/
input#advertiser_regist,
input#media_regist{
  transform: scale(2);
  margin-top: 16px;
  margin-right: 30px;
  position: absolute;
  right:0
}
/*Flexテーブルの調整*/
div[id*="_append"] .form-group.row{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: start;
}
div[id*="_append"] .form-group.row .col{
  flex-basis: calc(100% / 6);
  flex-grow: 1;
  }


/*取引先マスタ*/
div[id*="_append"] > div:nth-of-type(odd){
  background-color: #fbfbfb;
  border-radius: 10px;
}
div[id*="_append"] > div{
  margin:10px 0;
  position: relative;
}

div[id*="_append"]{
  counter-reset: number 0;
/* number のカウンタを 0 にセット */
}

div[id*="_append"] > div:before {
counter-increment: number;
content: counter(number) " ";
background-color: #2C6999;
width: 30px;height: 30px;
line-height: 30px;
color: #ffffff;
font-weight: 900;
border-radius: 10px;
text-align: center;
display: inline-block;
position: absolute;
top: 5px;
}

input[disabled],select[disabled]{
  background-color:rgba(0,0,0,0.03) !important;
}

/*ASP入稿*/
.change_reservation{
  padding: 1em;
  margin-top: 10px;
  border-radius: 10px;
  }
.reservation_text{margin-bottom: 10px;font-size: 15px;font-weight: 900;}
.reservation_text:before{
  font-family: "Line Awesome Free", "Line Awesome Brands";
    font-weight: 900;
    content: "\f017";
}

/*提携*/
.card.step_area{
  background-color: rgba(44, 105, 153, 0.1);
  width:98%;
  margin-left: 2%;
   box-shadow: 0px 5px 5px -4px #dcdcdc;
   animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.find_site{
width: 98%;
margin-top: 40px;
margin-left: 2%;
background-color: rgba(44, 105, 153, 0.1);
padding: 1em;
border-radius: 10px;
}

.site_set{
  margin:20px 0;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0px 5px 5px -4px #dcdcdc;
  background-color:rgba(255,255,255,0.5);
  animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.site_set:nth-of-type(odd){
  background-color:rgba(255,255,255,0.8);
}

#step_2{
counter-reset: number 0;
}

.card.step_area:before {
    counter-increment: number;
    content: counter(number) " ";
    background-color: #2C6999;
    width: 30px;
    height: 30px;
    line-height: 30px;
    color: #ffffff;
    font-weight: 900;
    border-radius: 10px;
    text-align: center;
    display: inline-block;
    position: absolute;
    top: 5px;
    left:5px
}

.set_alliance h3{
  margin-left: 20px;
}


/*TABLE*/
table{
  color:#000000 !important;
  width:100% !important;
}
.table-bordered{border: none !important;}
thead{border: inherit !important;}
table:not(.details), table:not(.details) thead, table:not(.details) tr,  table:not(.details) th, table:not(.details) td
{
	font-size: 12px !important;
}
table:not(.table-condensed):not(div.xdsoft_calendar>table):not(.details) th {
   position: sticky !important;
   top: 0 !important;
   z-index: 9;
   background-color: #fbfbfb;
   vertical-align:middle !important;
   text-align: center !important;
   white-space: nowrap !important;
   padding:20px 5px !important;
}

/*ソートボタン*/
.sortable.desc:after,.sortable:after{
position: absolute;
bottom: 0;
right: 0;
}

table:not(.table-condensed) thead tr{
  background-color: #f5f5f5 !important;
}

tbody tr:nth-child(even){
 background-color: #fdfdfd !important;
}

tr td{
  min-height: 100px;
  white-space: nowrap;
  padding:10px 5px;
  vertical-align:middle !important;
  text-align: center;
}


.table-bordered td, .table-bordered th{
  border: none !important;
}

.table-bordered th:not(:last-child) {
    border-right: 2px solid #ffffff !important;
}

#schedule_log tbody tr.even,#log_list tbody tr.even,
#trading_list tbody tr.even{
  background-color: #fbfbfb !important;
}

td:has(form){
  padding: 0 !important;
}
td:has(form) select{
  padding: 0 !important;
}

/**********************************
Tableカスタム
***********************************/
td.clm_main.exp_name {
  color:#333333 !important;
}
tr.level2 td {
    background-color: inherit !important;
}
tr.level3 td {
    background-color: inherit !important;
}
td:has(.la-arrow-circle-down)~ td{
  font-weight: 900;
  background-color: #fbfbfb !important;
}
tbody tr:nth-child(even):hover,tbody tr:hover{
  background-color:#f4fbfc !important;
}

tr.detail_header td,
tr.level2.detail_header td,
tr.level3.detail_header td
{
  font-size: 8px !important;
  height:10px;
  padding: 0;
  background-color: #FBFBFB !important;
}
.detail_header i{font-size: 12px !important;}


/*2行目のラベル消し

div[id*="_append"] div[class*="_form_set"]:not(:first-of-type) label{
  display: none !important;
}
*/
/*Search icon*/
#accordion_body .card-header button[data-target="#search_collapse"]::before{
  font-family: "Line Awesome Free","Line Awesome Brands";
    font-weight: 900;
    content: "\f002";
    color:#000000;
    font-size: 30px;
    margin-top: -13px;
    margin-left: -35px;
    position: absolute;
}

/*SP*/
@media only screen and (max-width: 992px) {
body.login-page, .content-wrapper{
animation: none;
background-size: cover !important;
}
.login-logo .logo_image{width:100% !important;margin-left: 0px!important;}
.content-wrapper>.content{padding:0 !important;}

.dataTables_wrapper .row:nth-child(2){overflow-x: scroll;}

table {min-width:1200px}
.card .card-header{font-size: 30px !important;}
.card .card .card-header{font-size: 25px !important;}
.dataTables_length{text-align: right !important;}

label:not(.form-check-label):not(.custom-file-label){
text-align: left !important;
}
div[id*="_append"] div.form-group{
flex-wrap: wrap;
flex-direction: column;
}
div[id*="_append"] div.form-group .col{
  width: 100% !important;
}
.form-group .col label.col-form-label{
  text-align: left !important;
  }

.btn{
  transition:none !important
}
.btn:hover{
  transform: none !important;
  transition: none;
}
/*アコーディオンのinput調整*/
input#advertiser_regist,
input#media_regist{
  transform: scale(1);
}

div[id*="_append"] .form-group.row{
flex-direction: column;

}

}

/*********************************
入稿サイドピーク
**********************************/
i.close_button.la-angle-double-right{
  position: absolute;
  top:10px;
  left:10px;
  font-size: 20px;

}

.ad_button{
  width: 300px;
  position: absolute;
  margin-top: -70px;
  margin-left: 300px !important;
}
.ad_button.change_mode{
  margin-top: -35px;
  margin-left: 0 !important;
}


#ad_click{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;

  counter-reset: number 0;
}
#ad_click .ad_single{
  width: 30%;
  font-size: 12px;
  margin: 5px;
  position: relative;
}

#ad_click .ad_single:before{
  counter-increment: number;
    content:"\5E83\544A" counter(number) " ";
    background-color: #2C6999;
    width: 60px;
    height: 20px;
    line-height: 20px;
    color: #ffffff;
    font-weight: 900;
    border-radius: 10px;
    text-align: center;
    display: inline-block;
    position: absolute;
    top: 5px;
    left: 5px;
}

#ad_click .ad_single a{
  color:#000000;
  display: block;
  font-weight: 900;
  background-color: #E9F0F5;
  border-radius: 5px;
  padding: 30px;
}

/******************************
請求支払管理
****************/

ul.statement_status li
{
	list-style-type: none;
	padding-left: 0;
}

.statement_status
{
	margin-top: 2px;
}

.statement_status .nav-link
{
	border-radius: 5px !important;
}

ul.statement_status li
{
	padding: 0 2px;
	position: relative;
}

ul.statement_status li div
{
	justify-content: center;
}

ul.statement_status li div.select
{
	color: #ffffff;
	background: #606060;
	background-size: 400% 400%;
}

ul.statement_status li div.nav-link
{
	border: 2px solid #606060;
}

ul.statement_status .status_count
{
	font-size: 14px;
	font-weight: bold;
}

ul.statement_status .status_title
{
	font-size: 14px;
	font-weight: bold;
}

ul.statement_status span.select .status_count
{
	animation: animScale 3s infinite ease-out;
	animation-play-state: running;
	transform-origin: 50% 50%;
}

.nav-tabs
{
	border-bottom: inherit !important;
}

.pdf_icon i{font-size: 20px;}

span[class*="_status"],
span[class*="_flag"]
{
  display: block;
  border: 1px solid;
  border-radius: 10px;
  font-size: 9px;
}

.payment_status_0,.billing_status_0{
  color: #eb5e68;
  }

.payment_status_60,.billing_status_60{
  color: #5cc1d6;
}

.billing_status_50
{
  color: #ab3bab;
}

.payment_status_25,.billing_status_25
{
  color: #a9a9a9;
}

.expense_flag_0,.income_flag_0,
.expense_flag_30,.income_flag_30,
.expense_flag_40
{
  background-color: #eb5e68;
  color: #ffffff;
}

.income_flag_40
{
  background-color: #ab3bab;
  color: #ffffff;
}

.expense_flag_10,.income_flag_10{
  background-color: #ffd230;
  color: #ffffff;
}

.expense_flag_20,.income_flag_20{
  background-color: #5cc1d6;
  color: #ffffff;
}

div.table_div{
  overflow-x: scroll !important;
  max-height: 100vh;
  /*--
  max-height: calc(100vh - 440px) !important;
  scrollbar-width: thin;
  --*/
}

table#statement_list{
  tr.sum th{
    top:0;
    z-index: 999;
  }
  tr.sum th:first-of-type{
    z-index: 1000;
    position: sticky;
    left: 0;
  }
  tr.sum + tr th{
    top:46px !important;
    z-index: 990;
  }
  td.clm_cb{
    z-index: 995;
    position: sticky;
    left: 0;
    background-color: #ffffff;
  }
  tr.sum + tr th.clm_cb{
    position: sticky;
    left: 0;
    z-index: 998;
  }
}



@media print{button.add_row{display: none;}}

/* ----------------------------------------------
 * Generated by Animista on 2022-1-6 15:11:51
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation heartbeat
 * ----------------------------------------
 */
@-webkit-keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: center center;
            transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91);
            transform: scale(0.91);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87);
            transform: scale(0.87);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  45% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
@keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: center center;
            transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91);
            transform: scale(0.91);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87);
            transform: scale(0.87);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  45% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
/**
 * ----------------------------------------
 * animation ping
 * ----------------------------------------
 */

@keyframes ping {
  0% {
    background-size: cover;
      background-size: 200%;

  }
  50% {
    background-size: cover;
    background-size: 100%;

  }
  100% {
    background-size: cover;
    background-size: 220%;

  }
}

/**
 * ----------------------------------------
 * animation slide-top
 * ----------------------------------------
 */

@keyframes slide-top {
  0% {
     transform: translateY(110px);
  }
  100% {
    transform: translateY(0px);
  }
}

/**
 * ----------------------------------------
 * ASP icon
 * ----------------------------------------
 */
i.mads_icon:before
{
	content: '' !important;
	display: inline-block !important;
	width: 20px !important;
	height: 20px !important;
	background-size: contain !important;
	vertical-align: text-top !important;
	background-repeat: no-repeat !important;
	background-image: url(../images/mads.png);
}
i.ads6_icon:before
{
	content: '' !important;
	display: inline-block !important;
	width: 20px !important;
	height: 20px !important;
	background-size: contain !important;
	vertical-align: text-top !important;
	background-repeat: no-repeat !important;
	background-image: url(../images/ads6.png);
}
i.afad_icon:before
{
	content: '' !important;
	display: inline-block !important;
	width: 20px !important;
	height: 20px !important;
	background-size: contain !important;
	vertical-align: text-top !important;
	background-repeat: no-repeat !important;
	background-image: url(../images/afad.png);
}
i.cats_icon:before
{
	content: '' !important;
	display: inline-block !important;
	width: 20px !important;
	height: 20px !important;
	background-size: contain !important;
	vertical-align: text-top !important;
	background-repeat: no-repeat !important;
	background-image: url(../images/cats.png);
}
i.affilicode_icon:before
{
	content: '' !important;
	display: inline-block !important;
	width: 20px !important;
	height: 20px !important;
	background-size: contain !important;
	vertical-align: text-top !important;
	background-repeat: no-repeat !important;
	background-image: url(../images/affilicode.png);
}

#accordion_body .btn:focus
{
	outline: 0;
	box-shadow: 0 0 0 transparent;
}
#accordion_body .card-header button[data-toggle="collapse"].collapsed::after
{
	font-family:"Line Awesome Free","Line Awesome Brands";
	font-weight: 900;
	content: "\f103";/* angle-double-down */
	float: right;
}
#accordion_body .card-header button[data-toggle="collapse"]::after
{
	font-family:"Line Awesome Free","Line Awesome Brands";
	font-weight: 900;
	content: "\f102";/* angle-double-up */
	float: right;
}

.sortable.asc:after
{
	font-family: 'Line Awesome Free';
	content: "\f884";
	margin-right: 5px;
	color: #c04000;
	font-size: 10px;
}
.sortable.desc:after
{
	font-family: 'Line Awesome Free';
	content: "\f160";
	margin-right: 5px;
	color: #c04000;
	font-size: 10px;
}
.sortable:after
{
	font-family: 'Line Awesome Free';
	content: "\f338";
	margin-right: 5px;
	color: #808080;
	font-size: 10px;
}
/**********************************
検索フォーム
**********************************/
#search_form .col-sm-10 {
  width: 80%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  flex-basis: 70%;
}
#search_form .col-sm-10 div{
  flex-basis: 150px;
}



/**********************************
モーダルカスタム（右からスライド）
**********************************/
.modal-side-btn{width: 100%;font-size: 14px;margin-bottom:10px;}
.modal-side .modal-dialog{
  margin:0;
  max-width: 900px;
  /*モーダル位置*/
  position: absolute;
  right: 0;
}
.modal-side .modal-content{
  border-radius: 0;/*reset*/
  border:none;/*reset*/
  min-height: 100vh;
  min-width:500px;
}
.modal-side .modal-header{
  position: sticky;
  top: 0;
  background-color: #ffffff;
  z-index: 9999;
}
.modal-side .modal-body{
  width: 100%;
  overflow-x: scroll;
}
.modal-side .modal-title,
.modal-side .modal-body ul li a:not(.page-link){
/*テキストの省略*/
display: inline-block;
text-overflow: ellipsis;
white-space: nowrap;
width: 80%;
overflow: hidden;
}

/*右からスライド*/
.modal.modal-side.fade .modal-dialog {transform: translate(220%, 0px);}
.modal.modal-side.show .modal-dialog {transform: none;}

/*モーダル時の背景*/
.modal-backdrop.show{opacity: 0.1;}

/*モーダルサイドオリジナル*/
.modal-side .modal-header{flex-direction:column;}
.modal-header h2#log_modal_title{width:100%;font-weight: 900;}
.modal-header h2#log_modal_title:before{
font-family: "Line Awesome Free","Line Awesome Brands";
  font-weight: 900;
  content: "\f1da";
}

.modal-side table#log_list{min-width:700px;}