@charset "utf-8";
/* ============= 色やフォントの設定用 ================= */
/* 基本色 */
.frame,#login_box{
  background: #ccc;
}
/* ページ名が入る部分 */
#page_title{
  background: #eee;
}
/* メニューボタンの色 */
.menu_box,#footer li a{
  background-color: #1987E5;
  text-align: center;
}
.menu_box,.menu_box a,#footer li a{
  color: #fff;
}
/* メニューボタンの下層の色 */
.menu_box ul li{
  background-color: #74A9D6;
}
.menu_box ul li,.menu_box ul li a{
  color: #fff;
}

/* テーブルのTHの色 */
#select_table thead th{
  background:#4c976e;
  color: #fff;
}
/* 編集ページ ソートテーブルの色 */
#sort_table thead th{
  text-align: center;
  background: #4387E9;
  color: #fff;
}

/* 選択ページ 簡易編集の色 */
#select_add_area{
  background:#f5f5f5;
}
#select_add_area th{
  background: #4387E9;
  color: #fff;
}


body{
  font-size: 16px;
  color: #333;
}
body,input,button,select,textarea{
  font-family: "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
}
a{
  color: #0F52BC;
}
/* フォーム ファイル選択 部分 */
#form_table .file input[type="file"]{
  background: #def;
}
/* フォーム 画像選択 部分 */
#form_table .img input[type="file"]{
  background: #ded;
}
/* 編集ページの現在のファイル情報欄 */
.form_file_moto{
  background: #ffe;
  font-size: 90%;
}
/* 同カテゴリ内のリンクボタン アクティブの色 */
#table_head_menu .active{
  background: green;
  box-shadow: none;
}
/* 操作結果の通知 */
#send_box{
  background: #ffe;
  border: 1px solid orange;
}
#send_box h2{
  color: tomato;
}
/* ラジオボタンの色 */
.radio_area input[type="radio"]:checked + label , #hoshou_select input[type="radio"]:checked + label{
	background-color: #0F52BC;
}
/* チェックボタンの色 */
.check_area input[type="checkbox"]:checked + label {
	background-color: #22C350;
}

/* ページャー */
.pager{
  width: 100%;
  text-align: center;
  margin: 20px 0;
}
.pager button{
  background: #ccc;
  margin: 0 4px;
}
.pager .bt:hover{
    background: #74A9D6;
}
.pager .now{
  background: #4387E9;
}
.pager .now:hover,.pager button:disabled:hover{
  opacity: 1;
  cursor: default;
}

#select_table tbody .sku_csv_bt{
  display: flex;
  flex-wrap: wrap;
}
#select_table tbody .sku_csv_bt button{
  width: calc(33% - 10px);
  margin: 5px;
}
#select_table #sku_table .sku_csv_bt button small{
  display: block;
  color: #fff;
  font-size: 70%;
}
#select_table tbody .sku_csv_bt button span{
  display: block;
  margin-top: 5px;
  font-size: 80%;
}

.sku_modal,.sku_modal .bg_area{
  width: 100%;
  height: 100%;
  top: 0;
}
.sku_modal{
  position: fixed;
  z-index: 999;
}
.sku_modal .inner,.sku_modal .bg_area{
  position: absolute;
}
.sku_modal .inner{
  top: 0;
  background: #fff;
  z-index: 1;
  overflow-y: auto;
}
.sku_modal .inner,
.sku_modal .bg_area {
  transition: .4s all ease;
}
.sku_modal .bg_area{
  background:rgba(0, 0, 0, .7);
  z-index: 0;
}

.img_box{
  display: flex;
  justify-content:flex-start;
  flex-wrap: wrap;
}
.img_box li{
  width: calc(25% - 10px);
  margin: 5px;
  padding: 10px;
  border: 1px solid #aaa;
}
.img_box li img{
  width: 100%;
  display: block;
}
.img_box li small{
  display: block;
  text-align:center;
  margin-top: 10px;
}

#csv_download_section .area{
  width: 800px;
  padding: 20px;
  background: lightblue;
  margin: 30px auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#csv_download_section .area strong{
  font-size: 110%;
}
#csv_download_section .area a{
  display: block;
  width: 300px;
  font-size: 120%;
  text-align:center;
  padding: 5px 0;
  color: #fff;
  margin-top: 10px;
}