@charset "utf-8";

/* ベース設定 */
body{padding: 0px; margin: 0px; font-size: 80%}


/* フッター設定 */
footer{background: #242684; color: white; width: 100%; height: 25px; text-align: center; padding-top: 5px}


/* 色の共通設定 */
:root {
	/* メインコンテンツの背景色 */
	--main_background: #F9F9F9;

	/* <th>の背景色 */
	--table_th_color: lightblue;

	/* <input>の背景色 */
	--form_input_color: #FDFFCC;
	
}


/* 共通設定 */
h1{}
h2{margin-bottom: 0px; margin-top: 0px}





/* フォーム関係共通設定 */
input[type="number"]::-webkit-outer-spin-button, 
input[type="number"]::-webkit-inner-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
} 

input{background: var(--form_input_color); height: 25px; border: 1px solid lightgray}
select option{height: 30px}
button{border: 1px solid lightgray; background: #EFEFEF; height: 25px; cursor:pointer; padding:0 10px; ; border-radius: 5px}
textarea{background: var(--form_input_color); border: 1px solid lightgray}
input[type="file"]{border: none; background: transparent}
input[type="submit"]{border: 1px solid gray; background: #EFEFEF; color: black; height: 25px; cursor:pointer; padding:0 10px; margin: 0 5px; border-radius: 5px}
input[type="button"]{border: 1px solid gray; background: #EFEFEF; color: black; height: 25px; cursor:pointer; padding:0 10px; margin: 0 5px; border-radius: 5px}

input[type="radio"]{width: 15px; height: 15px; top: 3px; position: relative;}
input[type="checkbox"]{width: 15px; height: 15px; top: 3px; position: relative;}

span.required{font-size: 80%; color: red; font-weight: bold; margin-left: 5px}



/* 共通ヘッダーカラム幅(全デバイスで完全固定用) */
th.column_width_50{width: 50px}
th.column_width_70{width: 70px}
th.column_width_80{width: 80px}
th.column_width_100{width: 100px}
th.column_width_150{width: 150px}
th.column_width_200{width: 200px}
th.column_width_250{width: 250px}
th.column_width_300{width: 300px}
th.column_width_350{width: 350px}

div.width_250{width: 250px}

.vip{font-weight: bold; color: red}
.vipB{font-weight: bold; color: black}
.vipG{font-weight: bold; color: gray}


span.tag{padding: 4px; font-weight: bold; }



/* 共通テーブル装飾 ***
奇数行と偶数行で背景色が変わる
*/
table td{background: #fff;}
table tr:nth-child(odd) td{background: #eee;}


/* 共通テーブルデザイン ***
上部１行目にヘッダーがあるもの
テーブル幅は上部の<div>で対応させる
*/
table.table_main{border: 1px solid gray; border-collapse: collapse; width: 100%}
table.table_main tr th{border: 1px solid gray; text-align: center; height: 30px; background: var(--table_th_color);}
table.table_main tr td{border: 1px solid gray; text-align: center; height: 30px;}


/* 共通テーブルデザイン ***
左側にヘッダーがあるもの
行の背景色は白
テーブル幅は上部の<div>で対応させる
*/
table.table_left{border: 1px solid gray; border-collapse: collapse; width: 100%}
table.table_left tr th{border: 1px solid gray; text-align: center; height: 35px; background: var(--table_th_color);}
table.table_left tr td{border: 1px solid gray; text-align: left; height: 35px; background: white; padding: 0 5px}


/* 共通テーブルデザイン ***
テーブルのカラム内の文字を中央、左右に振る
*/
table.table_main tr td.tcenter, table.table_left tr td.tcenter, div.tcenter{text-align: center}
table.table_main tr td.tright, table.table_left tr td.tright, div.tright{text-align: right}
table.table_main tr td.tleft, table.table_left tr td.tleft, div.tright{text-align: left}





/* 注意事項枠（ピンク枠） */
div.caution{position: relative; margin: 2em 0; padding: 1em 1em; border: solid 3px lightpink; border-radius: 8px;}
div.caution span.caution_title{position: absolute; display: inline-block; top: -13px; left: 10px; padding: 0 9px; line-height: 1; font-size: 150%; background: var(--main_background); color: lightpink; font-weight: bold;;}
div.caution p{margin: 5px 0; padding: 0}


/* 再版出力依頼ステータス */
table tr td.request{background: red; color: white; font-weight: bold} /* リクエスト中 */
table tr td.acceptance{background: blue; color: white; font-weight: bold} /* 受理済み */

/* **************************************************************************************************************************************************************** */
/* PC向け（画面幅が901px以上） */
@media (min-width: 901px) {
    .responsive-image {
        background-image: url('large-image.jpg');
    }
    
    /* 全体 */
	div#container{width: 100%; display: flex;}
	
	/* ヘッダー設定 */
	header{background-image: url(../images/icon/header_bar.png); background-repeat: repeat-x; color: white; width: 100%; height: 80px; text-align: right; vertical-align: bottom; }
	header div{font-size: 150%; font-weight: bold; padding-right: 20px; padding-top: 40px}
	div#information{background: #e2e2e2}
	
	/* スマホ用ハンバーガー */
	div#mov-menu{display: none}

	
	/* メニュー */
    nav#navigator{width: 200px; background-image: url(../images/icon/menu_bar.png); background-repeat: repeat-y;}
    
    /* メニューベース設定 */
	.a_menu{margin: 10px;}
	.a_menu ul{margin-left: -2em}
	.a_menu ul li{list-style: none; line-height: 2}
	.a_menu ul li.def{background: pink; border-radius: 5px;}

	/* メニュータイトル */
	div.a_menu button{color: white; padding: 5px 5px 5px 10px; font-weight: normal; border-radius: 5px; border: none; width: 150px; height: 35px; text-align: left; cursor: pointer}
	div.a_menu button.off{background: #3f4c2c;}
	div.a_menu button.on{background: #8c4458;}


	/* メニュー項目 */
	li a.link{text-decoration: none}
	li a:visited.link{color: blue}
	li a.hatena{color: black; text-decoration: none}

	
	/* コンテンツベース用の幅指定（PC用） */
	div.div_width_big{width: 1000px}
	div.div_width_middle{width: 800px}
	div.div_width_small{width: 500px}


	
	/* 各入力フォームの幅 */
	input[type='text']{width: 150px}

/******************************************************************************************************************************************************/
	
    /* メインコンテンツ */
	div#main_contents{width: 100%; margin: 0px; padding: 10px 30px; background: #F9F9F9}

	
	
	/* 特色ベース */
	div.color_base{display: flex; text-align: left; width: 100%; background: transparent; padding: 10px;}
	div.color_base h2{margin-top: 0px}
	
	div.color_search{width: 200px; background: transparent; margin-left: 10px; padding: 5px 10px; }
	div.color_search h2{margin-top: 0px}
	
	div.color_table{width: 500px; background: transparent;}
	
	
	/* 各特色一覧 */
	table.color_list{border: 1px solid white; width: 500px;}
	table.color_list tr{text-align: center;}
	table.color_list tr th{background: lightblue; border: 1px solid gray; height: 30px}
	
	
	
	
	/* パレット */
	div.pallet_base{width: 800px; padding: 10px; background: white; font-weight: bold}
	div.pallet_base div.pallet_card_all_delete{width: 800px; text-align: center}
	div.pallet_card{display: flex; margin: 10px; padding: 10px; border: 2px solid gray; border-radius: 10px; background: #F9F9F9}
	div.pallet_card div.pallet_card_delete{width: 250px; background:transparent; margin: auto 0; margin-left: 100px}
	div.pallet_card div.pallet_color span{font-size: 150%}
	
	
	
	/* QRコード */
	div.qr_base{background:white; padding: 10px 0}
	div.qr_base div.qr_row{display: flex}
	div.qr_base div.qr_row div.qr_card_narrow{background: white; border: 1px solid lightgray; width: 200px; height: 280px; text-align: center; margin: 5px}
	div.qr_base div.qr_row div.qr_card_wide{background: white; border: 1px solid lightgray; width: 250px; height: 280px; text-align: center; margin: 5px}
	div.qr_base div.qr_card_all_delete{width: 650px; text-align: center; margin-top: 20px}
	
	
	/* 使用インク */
	div.ink_base{}
	div.ink_input{background: white; width: 300px; padding: 0 20px 20px 20px;}
	div.ink_input input[type="text"]{width: 200px}
	div.ink_input input[type="submit"]{margin-left: 80px; margin-top: 15px}
	
	div.ink_list{padding: 0 20px 20px 20px;}
	div.ink_list table{border: 1px solid white; width: 500px; border-collapse: collapse}
	div.ink_list table tr{text-align: center;}
	div.ink_list table tr th{background: lightblue; border: 1px solid gray; height: 30px}
	div.ink_list table tr td{border: 1px solid gray;}
	
	
	
	/* ゴミ箱 */
	div.trash_base{background: white; width: 800px; padding: 10px}
	table.color_trash_list{width: 800px}
	table.color_trash_list tr{text-align: center;}
	table.color_trash_list tr th{background: lightblue; border: 1px solid gray; height: 30px}
	div.trash_delete{width: 800px; text-align: center; margin-top: 20px}
	
	
	/* 再出力依頼 */
	table.new_reprint{border: 1px solid lightgray; width: 800px;}
	table.new_reprint tr{text-align: center; padding: 10px 0}
	table.new_reprint tr th{background: var(--table_th_color); border: 1px solid gray; height: 30px; padding: 5px}
	table.new_reprint tr td{text-align: left; padding: 5px}
	

	
	
	
	/* 特色名管理 */
	
	div.specia_color_button{}
	div.specia_color_button button{margin: 5px; margin: 10px 0}
	
	table.special_color{border: none; width: 800px}
	table.special_color tr{text-align: center; padding: 10px 0}
	table.special_color tr th{background: var(--table_th_color); border: 1px solid gray; height: 30px; }
	table.special_color tr td{text-align: center; padding: 5px}
	
	
	/* ログイン用ブロック */
	div#login_contents{width: 100%; margin: 20px auto; padding: 30px auto}
	div#login_top{width: 250px; border: 2px solid gray; margin:  0 auto; padding: 50px 50px 10px 50px}
	div#login{text-align: center; margin-top: 20px;}
	p.error{color: red}
	input.login_color{background: #DFEBF7}
	

	/*ホームカレンダー */
	div.pcCal table.calendar{width: 1000px; border: 1px solid gray}
	div.pcCal table.calendar tr th{width: 180px; height: 40px; background: lightblue}
	div.pcCal table.calendar tr th.sun{width: 50px; height: 40px; background: lightpink}
	div.pcCal table.calendar tr th.sat{width: 50px; height: 40px; background: lightpink}
	div.pcCal table.calendar tr td{height: 100px; vertical-align: top}
	div.pcCal table.calendar tr td div.date{font-weight: bold;}
	div.pcCal table.calendar tr td ul.events{margin-top: -5px; margin-bottom: 0px}
	div.pcCal table.calendar tr td ul.events li{font-size: 60%; list-style: none; text-indent: -1em;}
	div.pcCal table.calendar tr td.today{background: lightyellow}
	
	div.pcCal div.calTitle{width: 1000px; text-align: center; font-size: 150%; font-weight: bold; margin-bottom: 10px}
	div.pcCal div.calTitle button{text-align: center; font-size: 100%; font-weight: bold}
	div.pcCal div.calTitle a{text-decoration: none}
	
	
	
	/* 新規特色追加 */
	div.new_color_2{margin-left: 20px}
	div.new_color_2 table.new_dic{width: 480px; border: 1px solid gray}
	div.new_color_2 table.new_dic tr th{height: 40px; background: lightblue}
	div.new_color_2 table.new_dic tr td{text-align: center}
	
	
	
	
	/* 配合入力 */
	table.ink_input{border: 1px solid gray; width: 500px; border-collapse: collapse}
	table.ink_input tr th{width: 100px; border: 1px solid gray; height: 25px; background: lightblue;}
	table.ink_input tr td{padding: 5px; border: 1px solid gray; background: white; font-size: 80%}
	
	
	
	/* 設　定 > ユーザー管理 */
	div.user_setting{padding-left: 5px;}
	

	
}


/* **************************************************************************************************************************************************************** */
/* タブレット向け（画面幅が601pxから900px） */
@media (min-width: 601px) and (max-width: 900px) {
    .responsive-image {
        background-image: url('medium-image.jpg');
    }
    
    /* ヘッダー設定 */
	header{background-image: url(../images/icon/header_bar.png); background-repeat: repeat-x; color: white; width: 100%; height: 60px; text-align: right; vertical-align: bottom}
	header div{font-size: 150%; font-weight: bold; padding-right: 20px; padding-top: 20px}
	div#information{background: #e2e2e2}
	
	/* スマホ用ハンバーガー */
	div#mov-menu{display: none}
    
    /* メニュー */
    nav#navigator{background: #e2e2e2; }
    nav.hidden-mov{display: flex;}
    /* nav.hidden-mov ul{display: none;} */

    
    /* メニューベース設定 */
	.a_menu{margin: 10px; }
	.a_menu ul{margin-left: -1em}
	.a_menu ul li{list-style: none; margin-left: 0; line-height: 2}

	/* メニュータイトル */
	div.a_menu button{font-size: 80%; color: white; padding: 5px 15px 5px 10px; font-weight: normal; border-radius: 5px; border: none; height: 35px; text-align: left; cursor: pointer}
	div.a_menu button.off{background: #3f4c2c;}
	div.a_menu button.on{background: #8c4458;}


	/* メニュー項目 */
	li a.link{text-decoration: none}
	li a:visited.link{color: blue}
	li a.hatena{color: black; text-decoration: none}
	
	
	/* サブメニューを隠す */
	/* div.a_menu ul#menu_color{position: absolute; top: 130px; left: 110px; background: lightgray; padding: 20px;}　*/
	div.a_menu ul#menu_color{display: none}
	div.a_menu ul#menu_reprint{display: none}
	div.a_menu ul#menu_setting{display: none}
	
	
	/* コンテンツベース用の幅指定（タブレット用） */
	div.div_width_big{width: 800px}
	div.div_width_middle{width: 600px}
	div.div_width_small{width: 500px}
	
	
	/* 各入力フォームの幅 */
	input[type='text']{width: 150px}

	
    
    
/******************************************************************************************************************************************************/
    
    
    
    /* メインコンテンツ */
	div#main_contents{width: 100%; margin: 0px; padding: 10px 30px; background: #F9F9F9}
	
	

	

	/* ログイン用ブロック */
	div#login_contents{padding: 50px; }
	div#login_top{width: 250px; background: white; border: 2px solid gray; margin:  0 auto; padding: 10px 30px}
	div#login{text-align: center; margin-top: 20px; margin-bottom: 10px}
	input.login_color{background: #DFEBF7}
	
	
	
	
	
	
}



/* **************************************************************************************************************************************************************** */
/* スマホ向け（画面幅が600px以下） */
@media (max-width: 600px) {
    .responsive-image {
        background-image: url('small-image.jpg');
    }
    
    /*  スマホでは表示させない  */
	.nomov{display: none}
	
    /* ヘッダー設定 */
	header{background-image: url(../images/icon/header_bar.png); background-repeat: repeat-x; color: white; width: 100%; height: 50px; text-align: right; vertical-align: bottom}
	header div{font-size: 120%; font-weight: bold; padding-right: 10px; padding-top: 20px}
	div#information{background: #e2e2e2}

	/* スマホ用ハンバーガー */
	div#mov-menu{position: absolute; top: 5px; left: 15px}
	
	/* メニュー隠す */
	nav#navigator{background: lightgray; width: 200px; position: absolute; top: 40px; left: 15px; padding: 5px}
    nav.hidden-mov{display: none }

	
	/* メニューベース設定 */
	.a_menu{margin: 10px;}
	.a_menu ul{margin-left: -2.5em}
	.a_menu ul li{list-style: none;}
	.a_menu ul li.def{background: pink; border-radius: 10px;}

	/* メニュータイトル */
	div.a_menu button{color: white; padding: 5px 5px 5px 10px; font-weight: normal; border-radius: 5px; border: none; width: 150px; height: 35px; text-align: left; cursor: pointer}
	div.a_menu button.off{background: #3f4c2c;}
	div.a_menu button.on{background: #8c4458;}

	/* メニュー項目 */
	li a.link{text-decoration: none}
	li a:visited.link{color: blue}
	li a.hatena{color: black; text-decoration: none}
	
	/* コンテンツベース用の幅指定（スマホ用） */
	div.div_width_big{width: 380px}
	div.div_width_middle{width: 380px}
	div.div_width_small{width: 380px}
	
	/* 各入力フォームの幅 */
	input[type='text']{width: 50px}

/******************************************************************************************************************************************************/


	/* メインコンテンツ */
	div#main_contents{width: 100%; margin: 0px; padding: 10px 30px; background: #F9F9F9}
	


	

	
	
	/* ログイン用ブロック */
	div#login_contents{width: 100%; margin: 20px auto; padding: 30px auto}
	div#login_top{width: 250px; border: 2px solid gray; margin:  0; padding: 50px 50px 10px 50px}
	div#login{text-align: center; margin-top: 20px;}
	input.login_color{background: #DFEBF7}
	
	

	
	
	
    
    
       
}



/* **************************************************************************************************************************************************************** */
/* プリント時に表示されないようにする */
@media print {
  .noPrint{display: none;}
  .hidden-mov{display: none;}
  .a_menu{display: none;}
  div#main_contents{background: white}
  div.pallet_card_delete{display: none;}
  div.pallet_card_all_delete{display: none;}
  div.qr_card button{display: none;}
}