body{
  background-color: #EBEBEB;
}
.row {
  margin-right: 0px !important;
}
/***** 共通 *****/
/* フォント色 */
.font-color-white       {  color: #FFFFFF; }
.font-color-background  {  color: #F1F1F1; }
.font-color-localmenu   {  color: #EBEBEB; }
.font-color-focus       {  color: #F3F3F3; }
.font-color-line        {  color: #DFDFDF; }
.font-color-body        {  color: #303030; }
.font-color-button-body {  color: #E8EAED; }
.font-color-textlink    {  color: #004299; }
.font-color-primary     {  color: #1BADCF; }
.font-color-secondary   {  color: #FF9900; }
.font-color-warning     {  color: #DE3517; }

/* 線色 */
.border-white       {  border: solid 1px #FFFFFF; }
.border-background  {  border: solid 1px #F1F1F1; }
.border-localmenu   {  border: solid 1px #EBEBEB; }
.border-focus       {  border: solid 1px #F3F3F3; }
.border-line        {  border: solid 1px #DFDFDF; }
.border-body        {  border: solid 1px #303030; }
.border-button-body {  border: solid 1px #E8EAED; }
.border-textlink    {  border: solid 1px #004299; }
.border-primary     {  border: solid 1px #1BADCF; }
.border-second      {  border: solid 1px #FF9900; }
.border-warning     {  border: solid 1px #DE3517; }

/* 背景色 */
.bg-white       {  background-color: #FFFFFF; }
.bg-background  {  background-color: #F1F1F1; }
.bg-localmenu   {  background-color: #EBEBEB; }
.bg-focus       {  background-color: #F3F3F3; }
.bg-line        {  background-color: #DFDFDF; }
.bg-body        {  background-color: #303030; }
.bg-button-body {  background-color: #E8EAED; }
.bg-textlink    {  background-color: #004299; }
.bg-primary     {  background-color: #1BADCF; }
.bg-second      {  background-color: #FF9900; }
.bg-warning     {  background-color: #DE3517; }

/* ボタン色 */
.btn-white,       .btn-white:hover        {  background-color: #FFFFFF; color: #303030; border: solid 1px #DFDFDF; }
.btn-background,  .btn-background:hover   {  background-color: #F1F1F1; color: #FFFFFF; }
.btn-localmenu,   .btn-localmenu:hover    {  background-color: #EBEBEB; color: #FFFFFF; }
.btn-focus,       .btn-focus:hover        {  background-color: #F3F3F3; color: #FFFFFF; }
.btn-line,        .btn-line:hover         {  background-color: #F3F3F3; color: #303030; border: solid 1px #DFDFDF; }
.btn-line-category                        {  background-color: #009f9d; color: #FFFFFF; }
.btn-body,        .btn-body:hover         {  background-color: #303030; color: #FFFFFF; border: solid 1px #DFDFDF; }
.btn-button-body, .btn-button-body:hover  {  background-color: #E8EAED; color: #FFFFFF; }
.btn-textlink,    .btn-textlink:hover     {  background-color: #004299; color: #FFFFFF; }
.btn-primary,     .btn-primary:hover      {  background-color: #1BADCF; color: #FFFFFF; border: solid 1px #DFDFDF; }
.btn-second,      .btn-second:hover       {  background-color: #FF9900; color: #FFFFFF; border: solid 1px #DFDFDF; }
.btn-warning,     .btn-warning:hover      {  background-color: #DE3517; color: #FFFFFF; }
.btn-color-add                            {  background-color: #49bdd9; color: #FFFFFF; border: solid 1px #DFDFDF; }
.btn-all-color-add                        {  background-color: #595959; color: #FFFFFF; border: solid 1px #DFDFDF; }
.btn:hover{
  opacity: 0.8;
}
.btn-line-category:hover{
  background-color: #23d2b7;
  color: #FFFFFF;
  opacity: 1;
}
.btn-color-add:hover{
  background-color: #7fd1e4;
  color: #FFFFFF;
  opacity: 1;
}
.btn-all-color-add:hover{
  background-color: #8A8A8A;
  color: #FFFFFF;
  opacity: 1;
}
/* フォーム */
input[type=text],
input[type=number],
input[type=tel],
input[type=password],
textarea,
select{
  font-size: 14px !important;
  padding: 12px 20px !important;
  border: 1px solid #DFDFDF;
  border-radius: 8px;
  background-color: #F1F1F1 !important;
}
label{
  font-size: 12px;
}
.invalid-feedback{
  font-size: 12px;
}

/* テーブル(表) */
.table th{
  text-align: center;
}
/* ページャー */
.page-item{
  min-width: 48px;
  margin: 0 1px;
  text-align: center;
}
.page-item .page-num{
  width: 97px;
  display: block;
  padding: 6px 12px;
  font-size: 16px;
  text-align: center;
}
/***** ヘッダー関連 *****/
header{
  height: auto;
  background-color: #FFFFFF;
}
header .left,
header .sp-left{
  padding-top: 25px;
  padding-left: 40px;
  white-space: nowrap;
}
header .left h1,
header .sp-left h1{
  font-size: clamp(18px, 1.6vw, 28px);
  font-weight: bold;
  margin-top: .5rem;
}
header .middle,
header .sp-middle{
  padding-top: 25px;
  text-align: right;
  white-space: nowrap;
}
header .middle button.counter,
header .sp-middle button.counter{ /* ヘッダーの｢営業対応窓口｣のボタン */
  background-color: #004097;
  color: #FFF;
  font-size: clamp(12px, 1.2vw, 16px);
}
header .middle button.support,
header .sp-middle button.support{ /* ヘッダーの｢ご注文サポートセンター｣のボタン */
  width: 244px;
  color: #FFF;
  background-color: #05A13E;
}
header .right,
header .sp-right{
  padding-top: 20px;
}
header .right button.login,
header .sp-right button.login{ /* ヘッダーの｢ログイン｣のボタン */
  width: 128px;
  background-color: #000;
  color: #FFF;
}
header .right .info_bell_area,
header .sp-right .info_bell_area{
  display: block;
  position: relative;
}
header .right .info_bell,
header .sp-right .info_bell{
  position: absolute;
  top: 3px;
}
header .right .info_bell_cnt,
header .sp-right .info_bell_cnt{
  background-color: #DE3517;
  width: 20px;
  height: 14px;
  font-size: 10px;
  font-weight: bold;
  color: #FFF;
  text-align: center;
  border-radius: 7px;
  padding: 0;
  position: absolute;
  left: 20px;
  top: 0px;
  line-height: 11px;
}
header .right .username,
header .sp-right .username{
  font-size: clamp(12px, 1.2vw, 16px);
  font-weight: bold;
  color: #000000;
}
header .right .userid,
header .sp-right .userid{
  font-size: clamp(8px, 1vw, 12px);
  color: #000000;
}
header button{
  height: 39px;
  font-size: 16px;
  font-weight: bold;
}
header .header-flex{
  display: flex;
  gap: 0px 10px;
}
header .profile{
  width: 44px !important;
  height: 44px !important;
}
#logout_form{
  font-size: clamp(12px, 1.2vw, 16px);
}
@media screen and (min-width: 900px) {
  header .sp-left{
    display: none;
  }
  header .sp-middle{
    display: none;
  }
  header .sp-right{
    display: none;
  }
}
@media screen and (max-width: 900px) {
  header .left{
    display: none !important;
  }
  header .middle{
    display: none !important;
  }
  header .right{
    display: none !important;
  }
  header .sp-middle{
    padding-top: 15px;
    padding-left: 20px;
    display:flex;
    flex-flow: column;
  }
}

/***** メイン関連 *****/
main{
}
main #left-side{
  padding-top: 48px;
  padding-left: 40px;
}
main #left-side ul{
  list-style-type: none;
}
main #left-side ul li{
  min-height: 48px;
  padding-top: 11px;
  font-size: 16px;
  font-weight: bold;
  color: #303030;
}
main #left-side ul li a{
  color: #303030;
  text-decoration: none;
}
main #right-side{
  padding: 56px 64px;
}
main #right-side button{
  font-size: 16px;
  font-weight: bold;
  margin-top: 5px;
}
main #right-side .card{
  border-radius: 16px;
}
main #right-side .card-header{
  padding: 40px 40px 20px;
  background-color: #FFFFFF;
  border-bottom: none;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}
main #right-side .card-body{
  border-radius: 16px;
  padding: 20px 40px;
  background-color: #FFFFFF;
}
main #right-side .card-footer{
  padding: 20px 40px 56px;
  background-color: #FFFFFF;
  border-top: none;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}
main #right-side .nav-tabs{
  border-bottom: none;
}
main #right-side .nav-tabs .nav-item{
  margin-left: 1px;
  margin-bottom: 12px;
}
main #right-side .nav-tabs .nav-item .nav-link{
  color: #303030;
  font-size: 11px;
  font-weight: normal;
  background-color: #F3F3F3;
  border-top: 1px solid #DFDFDF;
  border-right: 1px solid #DFDFDF;
  border-left: 1px solid #DFDFDF;
}
main #right-side .nav-tabs .nav-item .nav-link.active{
  background-color: #FFF;
}
main #right-side .tab-content{
  padding: 16px 0;
}
main #right-side .tab-content .tab-pan{
}

/* 色のサンプル */
.color-palette{
  width: 32px;
  height: 32px;
  border-radius: 16px;
  margin: 4px 4px 0;
  padding: 1px;
}
.color-palette .palette{
  width: 28px;
  height: 28px;
  border-radius: 14px;
  margin: 0px;
  border: 1px solid #FFF;
}

/* サイズのアイコン */
.btn-size
{
  width: 32px;
  height: 32px;
  border: 1px solid #DFDFDF;
  border-radius: 8px;
  background-color: #FFF;
  margin: 4px;
  padding: 8px 0 0 0;
  color: #000;
  opacity: 0.6;
  font-size: 9px;
  font-weight: bold;
  text-align: center;
}

.a-btn
{
  font-size: 16px;
  font-weight: bold;
  margin-top: 5px;
}

.site_name
{
  font-size: clamp(14px, 1.4vw, 20px);
  font-weight: bold;
  margin-right: 1.5rem;
  margin-bottom: 1.5rem;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
}

/* ローディング */
.loading {
  /*ローディング画面の縦横幅を画面いっぱいになるように指定*/
  width: 100vw;
  height: 100vh;
  /*ローディング画面の表示位置を固定*/
  position: fixed;
  top: 0;
  left: 0;
  background: #F1F1F1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  /*ローディング画面を0.3秒かけて非表示にする*/
  transition: all 0.3s linear;
  z-index: 1001;
}

/*ローディング画面を非表示にする*/
.loading.loaded {
  /*0.5秒かけてopacityを0にする*/
  opacity: 0;
  visibility: hidden;
}

.loading-text {
  color: #000;
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 30px;
  text-align: center;
}

.spinner {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 4px solid #FFF;
  border-left-color: #000000; 
  /* アニメーションを1秒かけて実行 */
  animation: spinner-rotation 1s linear infinite;
}

/* アニメーションの設定 */
@keyframes spinner-rotation {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}