@charset "utf-8";
/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 2017/12/20, 17:12:08
    Author     : ueoka
*/

.table-css { border-collapse: collapse; }
.border { border: 1px solid black; } 
.noborder { border-style: none; }



/**-----------------------------------------------
基本
-----------------------------------------------**/
body {
	color:#333;
	font-family:'Lucida Grande','Hiragino Kaku Gothic ProN',Meiryo, sans-serif;
	font-size: 14px;
	line-height:1.6;
	background-color:#EEE;
}


/**-----------------------------------------------
リンク色
-----------------------------------------------**/
a {/*リンクされた文字*/
	color:#000;
	font-style:normal;
	text-decoration:underline;
	-webkit-transition: opacity 0.4s ease-in-out;
	-moz-transition: opacity 0.4s ease-in-out;
	-o-transition: opacity 0.4s ease-in-out;
	transition: opacity 0.4s ease-in-out;
}
a:link {/*未訪問のリンク*/
	color:#000;
	font-style:normal;
	text-decoration:underline;
}
a:visited {/*訪問後のリンク*/
	color:#000;
	text-decoration:underline;
}
a:hover {/*マウスをのせたとき*/
	color:#000;
	font-style:normal;
	text-decoration:none;
}
a:active {/*クリック中*/
	text-decoration:none;
}


/**-----------------------------------------------
多用途
-----------------------------------------------**/
/* ボタン */
a.btn,
input.btn {
	display:inline-block;
	color:#000;
	cursor:pointer;
	padding:5px 20px;
	letter-spacing:1px;
	text-decoration:none;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border:1px solid #CCC;
	background: rgb(238,238,238); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}

/* 大きいボタン */
a.btn.btn_big,
input.btn.btn_big {
	padding:10px 40px;
	font-size:16px;
}

/* 黒ボタン */
a.btn.btn_black,
input.btn.btn_black {
	color:#FFF;
	border:1px solid #000;
	background: #45484d; /* Old browsers */
	background: -moz-linear-gradient(top, #45484d 0%, #000000 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #45484d 0%,#000000 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #45484d 0%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}

/* エラー */
.error {
	color:#D22D2D;
	font-size:12px;
	padding:5px;
	margin:5px 0 10px;
	background-color:#fff2f2;
	border:1px solid #D22D2D;
}

/* テーブル */
.table_style {
	width:100%;
	margin-bottom:20px;
	border-collapse: collapse;
	/* width:100%はみ出し防止 */
	-webkit-box-sizing: border-box;
	-khtml-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	/* テーブルのはみ出し防止 */
	word-break:break-all;
}
.table_style td {
	padding:8px;
	border:1px solid #CCC;
	background-color:#FFF;
}
.table_style th {
	padding:8px;
	text-align:left;
	vertical-align: middle;
	border:1px solid #CCC;
	color:#FFF;
}
.table_style td a,
.table_style td input[type="button"] {
	display:block;
	padding:2px 10px;
	cursor:pointer;
	text-decoration:none;
	border:1px solid #CCC;
	background-color:#F9F9F9;
	border-radius:3px;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
}
.table_style td.r {
        text-align: right;
}
#invoice_table{
    width:30%;
    
}

/* メッセージエリア */
.message_area {
	width:100%;
	margin-top: 2px;
	margin-bottom: 2px;
}

/* 検索エリア */
.search_area {
	margin-bottom:10px;
}
.search_area input[type="submit"] {
	color:#000;
	padding:5px 20px;
	font-size:14px;
	letter-spacing:1px;
	text-decoration:none;
	cursor:pointer;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border:1px solid #CCC;
	background: rgb(238,238,238); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}

input,select,button,textarea {
    font-family:"メイリオ",Meiryo,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","MS PGothic","ＭＳ　Ｐゴシック",sans-serif;
    font-size: 13px;
    /* width:100%はみ出し防止 */
    -webkit-box-sizing: border-box;
    -khtml-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    /* テーブルのはみ出し防止 */
    word-break:break-all;
}
input[type="text"],input[type="email"],input[type="password"],input[type="tel"],select {
    padding:5px;
}
table input[type="text"],table input[type="email"],table input[type="password"],table input[type="tel"],table select {
	padding:3px;
}

/* ページ送り */
#page_nav {
	letter-spacing:-0.5em;
	text-align:center;
	margin-top:50px;
}
#page_nav a,
#page_nav strong {
	display:inline-block;
	letter-spacing:normal;
	text-decoration:none;
	vertical-align:middle;
	margin-right:10px;
	padding:10px;
	border:1px solid #CCC;
}
#page_nav strong {
	color:#FFF;
}

/* マイページメニュー */
.btn_list {
	text-align:center;
	letter-spacing:-0.5em;
}
.btn_list li {
	display:inline-block;
	letter-spacing:normal;
	margin-right:20px;
}
.btn_list li:last-child {
	margin-right:0;
}
.btn_list li a {
	display:block;
	color:#000;
	margin:0 0 0 auto;
	padding:15px 30px;
	font-size:18px;
	letter-spacing:1px;
	text-decoration:none;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border:1px solid #CCC;
	background: rgb(238,238,238); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}


/**-----------------------------------------------
ヘッダー
-----------------------------------------------**/
#header {
	position:relative;
	padding:20px;
}
#header h1 {
	color:#FFF;
	font-size:20px;
}
#header_right {
	position:absolute;
	top:14px;
	right:20px;
}

/* ログイン名 */
#header #name {
	float:left;
	padding:10px 20px;
	background-color:#FFF;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
}
#header #name_01 {
	margin-right:20px;
}
#header #name_02 {
	margin-right:10px;
}

/* ログアウト */
#header #logout {
	float:left;
	margin-left:10px;
}
#header #logout a {
	display:block;
	color:#FFF;
	padding:9px 20px 10px;
	letter-spacing:1px;
	text-decoration:none;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border:1px solid #000;
	background: #45484d; /* Old browsers */
	background: -moz-linear-gradient(top, #45484d 0%, #000000 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #45484d 0%,#000000 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #45484d 0%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}


/**-----------------------------------------------
メイン
-----------------------------------------------**/
#main {
	width:1400px;
	margin:50px auto;
	background-color:#FFF;
	border:1px solid #CCC;
}
#content {
	padding:0 20px;
	margin-bottom:50px;
}

/* 見出し */
.page_title {
	position:relative;
	font-size:18px;
	padding:10px 20px;
	margin-bottom:30px;
	background-color:#F9F9F9;
	border-bottom:1px solid #CCC;
	border-top:1px solid #CCC;
}
/* 戻るボタン */
.back_link {
	position:absolute;
	top:7px;
	right:20px;
}
.back_link a,
.back_link input {
	display:inline-block;
	color:#000;
	font-size:14px;
	padding:5px 20px;
	letter-spacing:1px;
	cursor:pointer;
	text-decoration:none;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border:1px solid #CCC;
	background-color:#FFF;
}


/**-----------------------------------------------
フッター
-----------------------------------------------**/
#footer {
	border-top:1px solid #CCC;
	padding-top:20px;
	margin:20px;
	font-size:12px;
	text-align:center;
}


/**-----------------------------------------------
ログイン
-----------------------------------------------**/
#login {
	width:300px;
	padding:30px;
	margin:100px auto;
	border:1px solid #CCC;
	background-color:#FFF;
}
#login.customer {/* カスタマーだけスライドショー */
	position:absolute;
	left:15%;
	margin:auto;
	background-color:rgba(256,256,256,0.8);
	box-shadow:2px 2px 6px -4px #000;
}
#logo {/* カスタマーだけロゴ */
	text-align:center;
	margin-bottom:20px;
}
#login h1 {
	font-size:18px;
	text-align:center;
	margin-bottom:20px;
}
#login h1 span {
	display:block;
}
.dl_list {
	margin-bottom:20px;
}
.dl_list dt {
	padding:5px 10px;
	font-weight:bold;
	margin-bottom:5px;
	border-left:5px solid #000;
}
#login #footer {
	margin:50px 0 0;
}
/* 顧客法人 */
.customer .dl_list dt {
	border-color:#105589;
}
.customer .btn {
	color:#FFF;
	border-color:#0070bf;
	background: #0070bf; /* Old browsers */
	background: -moz-linear-gradient(top, #0070bf 0%, #005fa0 44%, #00548d 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #0070bf 0%,#005fa0 44%,#00548d 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #0070bf 0%,#005fa0 44%,#00548d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0070bf', endColorstr='#00548d',GradientType=0 ); /* IE6-9 */
}

/* 管理者 */
.admin .dl_list dt {
	border-color:#8C1017;
}
.admin .btn {
	color:#FFF;
	border-color:#a90329;
	background: #a90329; /* Old browsers */
	background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
}


/* 顧客画面スライドショー */
#slide_box {
	width: 100vw;
	height: 100vh;
	background-position:center center;
	background-size: cover;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* 入力必須表示 */
div.necessary_sign {
    margin:4px;
}