@charset "UTF-8";
@import url("/css/reset.css");

*{
	font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans", Meiryo, sans-serif;
}

img{
	width: 100%;
}

input,
select,
button{
	font-size: 0.9rem!important;
}

/*  ヘッダー
------------------------------------------------*/
header.s-header{
	width: 100%;
	height: 65px;
	color: #fff;
	background: #395670;
	position: fixed;
	top: 0;
	box-sizing: border-box;
	z-index: 100;
}

.s-header__container{
	width: 100%;
	max-width: 2500px;
}

.s-header__container a:hover{
	background: #5A7389;
}

.s-headerBar__logo{
	display: flex;
	align-items: center;
	padding: 0 20px;
	width: 200px;
	height: 65px;
	text-align: center;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.s-headerBar__toggleBtn{
    display: none;
}

@media only screen and (max-width: 767px) {
	.s-headerBar__logo {
		display: none;
	}
	.s-headerBar__toggleBtn {
		display: table-cell;
	}
}

.s-headerBar__userMenu{
	display: flex;
	justify-content: space-around;
	align-items: center;
	min-width: 190px;
	height: 65px;
	padding: 0 15px;
	color: #fff;
}

.s-headerBar__userMenuPopover{
	position: absolute;
	top: 65px;
	right: 15px;
	margin-top: 0.5rem;
	background: #fff;
	display: none;
}

.s-headerBar__userMenuPopover > .arrow{
	position: absolute;
	width: 1rem;
	height: 0.5rem;
    margin: 0 0.3rem;
	top: calc((0.5rem + 1px) * -1);
	left: 60px;
}

.s-headerBar__userMenuPopover > .arrow:before{
	position: absolute;
	display: block;
	content: "";
	border-color: transparent;
	border-style: solid;
	border-bottom-color: rgba(0, 0, 0, 0.25);
	border-width: 0 0.5rem 0.5rem 0.5rem;
}

.s-headerBar__userMenuPopover > .arrow:after{
	position: absolute;
	display: block;
	content: "";
	border-color: transparent;
	border-style: solid;
	border-bottom-color: #fff;
	border-width: 0 0.5rem 0.5rem 0.5rem;
}


/*  メイン
------------------------------------------------*/
main.s-container{
	margin: 0 auto;
	margin-top: 65px;
	width: 100%;
	max-width: 2500px;
	min-width: 1024px;
}


/*  メニュー
------------------------------------------------*/
.s-mainNavArea{
	padding-top: 65px;
	width: 220px;
	height: 100%;
	background: #f3f4f6;
	border-right: 1px solid #d6d9e0;
	position: fixed;
	top: 0;
	left: 0;
	overflow-y: auto;
	z-index: 50;
	transition: width 0.3s ease;
}

@media only screen and (min-width: 768px) and (max-width: 1279px) {
	.s-mainNavArea {
		width: 160px;
	}
	.s-mainNavArea__navItem * {
		font-size: 14px!important;
	}
}

@media only screen and (max-width: 767px) {
	.s-mainNavArea {
		left: -220px;
		width: 0;
		height: 0;
		opacity: 0;
	}
}

.s-mainNavArea__navItem > a{
	transform: translateX(0);
	display: block;
	border-bottom: 1px solid #d6d9e0;
	padding: 10px 15px;
	font-size: 16px;
	color: #263542;
	cursor: pointer;
	position: relative;	
}

.s-mainNavArea__navItemTitle i.bi-chevron-down{
    position: absolute;
    top: 10px;
    right: 15px;
    transition: transform 0.1s ease;
}

.s-mainNavArea__navItemTitle i.bi-chevron-down.rotate{
    transform: rotate(180deg);
}

.s-mainNavArea__navItem ul {
    background: #fff;
    color: #54687A;
    display: none;
}

.s-mainNavArea__navItem li{
	position: relative;
}

.s-mainNavArea__nav > li:hover > a,
.s-mainNavArea__nav ul > li:hover > a{
	opacity: 0.8;
}

.s-mainNavArea__navItem li > a {
    display: block;
    padding: 10px 30px 10px 40px;
    text-align: left;
    color: inherit;
    font-size: inherit;
    cursor: pointer;
}

.s-mainNavArea__backGround{
	width: 0;
	height: 0;
	background: rgba(0, 0, 0, 0.5);
	position: fixed;
	z-index: 30;
	opacity: 0;
}

@media only screen and (max-width: 767px) {
	.s-mainNavArea.is-active{
		width: 220px;
		height: 100%;
		left: 0;
		opacity: 1;
	}
	.s-mainNavArea__backGround.is-active{
		width: 100%;
		height: 100vh;
		opacity: 1;
	}
}

.s-mainNavArea .unapproved{
	width: 22px;
	height: 22px;
	padding-right: 1px;
	background: #ff0000;
	border-radius: 11px;
	color: #fff;
	font-size: 0.7rem!important;
	text-align: center;
	line-height: 22px;
	position: absolute;
	top: 8px;
	right: 5px;
}

/*  コンテンツ
------------------------------------------------*/
.s-contentsArea{
	margin-left: 220px;
}

@media only screen and (min-width: 768px) and (max-width: 1279px) {
	.s-contentsArea {
		margin-left: 160px;
	}
}

@media only screen and (max-width: 767px) {
	.s-contentsArea {
		margin-left: 0;
	}
}

.s-pageTitle{
	display: flex;
	align-items: center;
	background: #fff;
	margin-bottom: 20px;
	padding: 15px;
}

.s-contentsArea__primary{
	padding: 0 15px 60px 15px;
}

.card{
	background: none;
	border: none;
}

.card-header{
	background: #fff;
	border-top-left-radius: 0.375rem;
	border-top-right-radius: 0.375rem;
	font-size: 0.9rem;
}

.card-body{
	padding: 1.25rem;
	background: #fff;
	font-size: 0.9rem;
}

.s-conversionArea{
	width: calc(100% - 220px);
	position: fixed;
	bottom: 0;
	right: 0;
	text-align: right;
	z-index: 100;
	background: rgba(47, 63, 78, 0.7);
	padding: 10px 25px;
}

@media only screen and (min-width: 768px) and (max-width: 1279px) {
	.s-conversionArea {
		width: calc(100% - 160px);
	}
}

@media only screen and (max-width: 767px) {
	.s-conversionArea {
		width: 100%;
	}
}

.s-conversionArea *{
	font-size: 0.9rem;
}

.alert-success i{
	font-weight: bold;
}

.alert-success > span{
	font-size: 0.9rem;
	font-weight: bold;
}

.alert-dismissible .close {
	position: absolute;
	top: 0;
	right: 0;
	padding: 0.3rem 1.25rem;
	color: inherit;
	font-size: 1.3rem;
}

.tooltip-inner {
	text-align: left;
}

.spinner-back{
	border-radius: 0.375rem;
	background: rgba(0, 0, 0, 0.7);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 100;
	display: none;
}

.spinner-back > div{
	position: absolute;
	top: 50%;
	left: 50%;
}

.pagination{
    color: inherit;
}

.pagination .page-item .page-link{
    color: inherit;
}

.pagination .page-item.active .page-link{
    background: #6c757d;
    border-color: #6c757d;
    color: #fff;
}

.pagination .page-item.disabled .page-link{
    background: inherit;
    opacity: 0.7;
}

/*
.d-flex > span{
	white-space: nowrap;
} */

.text-bg-primary{
	background-color: #437ec4!important;
}

/*  file upload
------------------------------------------------*/
.media.border-dashed{
	border: 1px dashed #ccc;
}

.media i{
	font-size: 3rem;
	color: lightgray;
}

.s-form__fileUploadThumbnail{
	display: inline-block;
	width: 170px;
	height: 170px;
	margin: 4px;
	background-color: #f5f6f8;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	position: relative;
}

.s-form__fileUploadThumbnail .delete-image{
	display: none;
	font-size: 1.6rem;
	line-height: 1;
	color: #fff;
	background: rgba(0, 0, 0, 0.7);
	border-radius: 3px;
	position: absolute;
	text-align: right;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	padding: 3px;
}

.s-form__fileUploadThumbnail:hover > .delete-image{
	display: block;
}

.s-form__fileUploadThumbnail:hover > .delete-image i{
	cursor: pointer;
	z-index: 100;
}

.s-form__fileUploadThumbnail:hover > .delete-image i:hover{
	color: #f5f5f5;
}

#setting-ogp .s-form__fileUploadThumbnail{
	width: 340px;
	height: 180px;
}

#setting-logo .card-body .row:nth-child(1) .s-form__fileUploadThumbnail{
	width: 450px;
	height: 180px;
}

#setting-logo .card-body .row:nth-child(2) .s-form__fileUploadThumbnail{
	width: 180px;
	height: 180px;
}

#setting-logo .card-body .row:nth-child(3) .s-form__fileUploadThumbnail{
	width: 180px;
	height: 180px;
}

#setting-logo .card-body .row:nth-child(4) .s-form__fileUploadThumbnail{
	width: 480px;
	height: 160px;
}

#setting-logo .card-body .row:nth-child(5) .s-form__fileUploadThumbnail{
	width: 510px;
	height: 120px;
}

/*  home
------------------------------------------------*/
#home .order-status,
#home .chart-statistics{
	background: #fff;
	font-size: 0.9rem;
	height: 100%;
}

#home .order-status li:hover{
	background: #cfe2ff;
	color: #fff;
}

#home #tabs a:not(.active):hover{
	background: #f2f2f2;
	color: #6c757d;
}

#home .chartjs-render-monitor{
	display: block;
	width: 100%;
	max-height: 216px;
}

/*  artist
------------------------------------------------*/
#artist .col8{
	width: 8%;
}

#artist .col10{
	width: 10%;
}

#artist .col12{
	width: 12%;
}

#artist .col14{
	width: 14%;
}

#artist .col28{
	width: 28%;
}

#artist .col36{
	width: 36%;
}

#artist .s-form__fileUploadThumbnail{
	width: 38px;
	height: 38px;
	padding-left: 38px;
}

#artist .search-list-item{
	margin-bottom: 1rem;
	padding-bottom: 1.5rem;
}

#artist .search-list-item span{
	white-space: nowrap;
}

#artist-details .card-body div.d-flex span{
	white-space: nowrap;
}

#artist-details .download_link{
	color: #0d6efd;
	text-decoration: underline;
}

#artist-details .download_link:hover{
	opacity: 0.25;
}

#artist-details #idCardCheckModal .modal-body{
	max-height: 500px;
	overflow-y: scroll;
}

#artist-details button.search-bank{
	font-size: 0.7rem!important;
}

/*  searchBankModal
------------------------------------------------*/
#searchBankModal .search-list .list-group-item,
#searchBranchModal .search-list .list-group-item{
	font-size: 0.9rem;
	position: relative;
}

#searchBankModal .search-list .list-group-item:nth-child(n+2),
#searchBranchModal .search-list .list-group-item:nth-child(n+2){
	cursor: pointer;
}

#searchBankModal .search-list ul,
#searchBranchModal .search-list ul{
	max-height: 400px;
	overflow-y: scroll;
}

#searchBankModal .search-list .list-group-item .item-choice,
#searchBranchModal .search-list .list-group-item .item-choice{
	display: none;
	font-size: 1.6rem;
	line-height: 1;
	color: #fff;
	background: rgba(188, 221, 255, 0.5);
	position: absolute;
	text-align: right;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	padding: 17px 3px;
}

#searchBankModal .search-list .list-group-item:hover > .item-choice,
#searchBranchModal .search-list .list-group-item:hover > .item-choice{
	display: block;
}

/*  popupDelete
------------------------------------------------*/
#popupDelete h5{
	font-weight: bold;
}

/*  customer
------------------------------------------------*/
#customer .col8{
	width: 8%;
}

#customer .col10{
	width: 10%;
}

#customer .col12{
	width: 12%;
}

#customer .col14{
	width: 14%;
}

#customer .col36{
	width: 36%;
}

#customer .search-list-item .d-flex > span{
	white-space: nowrap;
}

#customer-details .col10{
	width: 10%;
}

#customer-details .col14{
	width: 14%;
}

#customer-details .col36{
	width: 36%;
}

#customer-details .download_link{
	color: #0d6efd;
	text-decoration: underline;
}


/*  character
------------------------------------------------*/
#character .search-list-item span{
	white-space: nowrap;
}

#character .list-group-item .edit-box{
	height: 56px;
}


/*  taste
------------------------------------------------*/
#taste .search-list-item span{
	white-space: nowrap;
}

#taste .list-group-item .edit-box{
	height: 56px;
}


/*  product
------------------------------------------------*/
#product .col8{
	width: 8%;
}

#product .col9{
	width: 9%;
}

#product .col10{
	width: 10%;
}

#product .col11{
	width: 11%;
}

#product .col30{
	width: 30%;
}

#product .s-form__fileUploadThumbnail{
	width: 27px;
	height: 38px;
	padding-left: 27px;
}

#product .search-list-item span{
	white-space: nowrap;
}

#product-details .s-form__fileUploadThumbnail{
	width: 170px;
	height: 242px;
}

#product-details .sortable > div{
	cursor: grab;
}

#product-details .sortable > div i{
	cursor: pointer;
}


/*  notice
------------------------------------------------*/
#notice .col8{
	width: 8%;
}

#notice .col16{
	width: 16%;
}

#notice-post .ql-container{
	height: 400px;
}


/*  inquiry
------------------------------------------------*/
#inquiry-artist .col8,
#inquiry-customer .col8{
	width: 8%;
}

#inquiry-artist .col16,
#inquiry-customer .col16{
	width: 16%;
}

#inquiry-artist .col24,
#inquiry-customer .col24{
	width: 24%;
}


/*  sales
------------------------------------------------*/
#sales .search-list-item span{
	white-space: nowrap;
}

#sales-artist .search-list-item span{
	white-space: nowrap;
}

#sales-artist .col10{
	width: 10%;
}

#sales-artist .col21{
	width: 21%;
}

#sales-artist .col25{
	width: 25%;
}

#sales-artist .download_link{
	color: #0d6efd;
	text-decoration: underline;
}

#sales-artist .t-line{
	background: #ba2636;
	color: #fff;
}

#sales-payment .search-list-item span{
	white-space: nowrap;
}