body {
font-family: "Open Sans", sans-serif;
}

h2,h3 {
width: 95%;
font-size:1.2em;
padding: 1rem 2rem;
border-bottom: 3px solid #000;
background: #ddeaf7;
}


h2.h2-2 {
width: 95%;
font-size:1.2em;
padding: 1rem 2rem;
border-bottom: 3px solid #000;
background: #fed8d8;
}

h4 {

}

/*-------------------------------------------------------------------
【0】商品予約一覧（表テーブル）
-------------------------------------------------------------------*/

/* フレックスボックス */
.wrap {
display: flex;
flex-wrap: wrap;
gap: 30px;
}

.item {
padding: 10px;
width: calc((100% - 80px * 2) / 3);
background-color: #fff;
}

@media not all and (min-width: 768px) {
.item {width: 100%;}
}

/* ボタンデザイン */

.button a {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 auto;
padding: 1em 2em;
width: 200px;
color: #1a2834;
font-size: 18px;
font-weight: 700;
background-color: #9FC5E8; /* ボタンの色 */
box-shadow: 0 5px 0 #426484;
border-radius: 6px;
transition: 0.3s;
text-decoration: none;
}

.button a::after {
content: '';
width: 5px;
height: 5px;
border-top: 3px solid #426484;
border-right: 3px solid #426484;
transform: rotate(45deg);
}

.button a:hover {
transform: translateY(3px);
text-decoration: none;
box-shadow: 0 2px 0 #426484;
}

/* ボタンデザイン３ */

.button3 a {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 auto;
padding: 1em 2em;
width: 200px;
color: #fff;　/* ボタン文字色 */
font-size: 18px;
font-weight: 700;
background-color: #909ba2; /* ボタンの色 */
box-shadow: 0 5px 0 #426484;
border-radius: 6px;
transition: 0.3s;
text-decoration: none;
}

.button3 a::after {
content: '';
width: 5px;
height: 5px;
border-top: 3px solid #426484;
border-right: 3px solid #426484;
transform: rotate(45deg);
}

.button3 a:hover {
transform: translateY(3px);
text-decoration: none;
box-shadow: 0 2px 0 #426484;
}
/*-------------------------------------------------------------------
ログアウトボタンの装飾
-------------------------------------------------------------------*/

.button4 {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 auto;
padding: 1em 2em;
width: 200px;
/*color: #fff;　 ボタン文字色 
font-size: 18px;
font-weight: 700;*/
background-color: #909ba2; /* ボタンの色 */
box-shadow: 0 5px 0 #426484;
border-radius: 6px;
transition: 0.3s;
text-decoration: none;
}

.button4:after {
content: '';
width: 5px;
height: 5px;
border-top: 3px solid #426484;
border-right: 3px solid #426484;
transform: rotate(45deg);
}

.button4:hover {
transform: translateY(3px);
text-decoration: none;
box-shadow: 0 2px 0 #426484;
}

/* submit装飾はずす */
input.sbm {
font-size: 1.1em;
}

input[type="submit"].sbm {
background-color: #909ba2;
color: #fff;　/* ボタン文字色 */
font-size: ;
font-weight: bold;
border: none;
}


/*-------------------------------------------------------------------
テーブル内詳細ボタン・変更buttonの装飾
-------------------------------------------------------------------*/

.button6 a {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 auto;
padding: 1em 2em;
width: 65px;
color: #fff;　/* ボタン文字色 */
font-size: 18px;
font-weight: 700;
background-color: #4682b4; /* ボタンの色 */
box-shadow: 0 5px 0 #426484;
border-radius: 6px;
transition: 0.3s;
text-decoration: none;
}

.button6 a::after {
content: '';
width: 5px;
height: 5px;
border-top: 3px solid #426484;
border-right: 3px solid #426484;
transform: rotate(45deg);
}

.button6 a:hover {
transform: translateY(3px);
text-decoration: none;
box-shadow: 0 2px 0 #426484;
}


/*-------------------------------------------------------------------
【0-2】商品ごと予約状況一覧
-------------------------------------------------------------------*/
select.select2 {
height: 37px;
padding-left: 10px;
width: 100px;
}



/*-------------------------------------------------------------------
【1】商品ごとの予約一覧 list
-------------------------------------------------------------------*/

div.wrap2 {
margin: 0 auto;
padding: 0;
width: 90%;
}

table.item-list {
border-collapse: collapse;
margin: 0 auto;
padding: 0;
width: 900px;
box-shadow: 0 0 15px -6px #00000073;
}

table.item-list tr {
background-color: #fff;
}

table.item-list tbody tr:hover{
background-color: #fffae9;
}

table.item-list th,
table.item-list td {
height: 50px;
padding: .35em 1em;
border-bottom: 1px solid #eee;
}

table.item-list thead th {
font-size: .85em;
padding: 1em;
}

table.item-list thead tr{
background-color: #FFC107;
color:#fff;
}

table.item-list tbody th {
text-align: left;
font-size: .8em;
}


table.item-list td.stock{
text-align: right;
font-weight: bold;
}

table.item-list td.stock2{
text-align: right;
font-weight: bold;
color: red;
}

table.item-list td.use{
text-align: right;
color: #000;
font-size: .75em;
}



@media screen and (max-width: 768px) {
.wrap2 {overflow-x: scroll;}
}




/*-------------------------------------------------------------------
【2】残在庫リスト
-------------------------------------------------------------------*/



table.item-stocklist {
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
box-shadow: 0 0 15px -6px #00000073;
}

table.item-stocklist tr {
background-color: #fff;
}

table.item-stocklist tbody tr:hover{
background-color: #fffae9;
}

table.item-stocklist th,
table.item-stocklist td {
height: 50px;
padding: .35em 1em;
border-bottom: 1px solid #999;
}

table.item-stocklist thead th {
font-size: .85em;
padding: 1em;
}

table.item-stocklist thead tr{
background-color: #FFC107;
color:#fff;
}

table.item-stocklist tbody th {
text-align: left;
font-size: .8em;
}


table.item-stocklist td.stock{
text-align: center;
font-weight: bold;
}







/*-------------------------------------------------------------------
【3】
-------------------------------------------------------------------*/

/*-------------------------------------------------------------------
【4】物件登録
-------------------------------------------------------------------*/
/* submit 登録ボタン */

.button5 {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 auto;
padding: 1em 2em;
width: 200px;
/*color: #fff;　 ボタン文字色 
font-size: 18px;
font-weight: 700;*/
background-color: #9FC5E8; /* ボタンの色 */
box-shadow: 0 5px 0 #426484;
border-radius: 6px;
transition: 0.3s;
text-decoration: none;
}

.button5:after {
content: '';
width: 5px;
height: 5px;
border-top: 3px solid #426484;
border-right: 3px solid #426484;
transform: rotate(45deg);
}

.button5:hover {
transform: translateY(3px);
text-decoration: none;
box-shadow: 0 2px 0 #426484;
}

/* submit装飾はずす */


input.rgst {
font-size: 1.2em;
}

input[type="submit"].rgst {
background-color: #9FC5E8;
color: #fff;　/* ボタン文字色 */
font-size: 1.4em;
font-weight: bold;
border: none;
}




/*フォーム部分 */
.cp_iptxt {
	position: relative;
	width: 80%;
	margin: 40px 3%;
}
.cp_iptxt input[type=text] {
	font: 15px/24px sans-serif;
	box-sizing: border-box;
	width: 100%;
	margin: 8px 0;
	padding: 0.3em;
	transition: 0.3s;
	border: 1px solid #1b2538;
	border-radius: 4px;
	outline: none;
}
.cp_iptxt input[type=text]:focus {
	border-color: #da3c41;
}
.cp_iptxt input[type=text] {
	padding-left: 10px;
}








/*-------------------------------------------------------------------
【5】商品予約
-------------------------------------------------------------------*/
select {
height: 37px;
padding-left: 10px;
width: 300px;
}

.name-red {
color: red;
}


/*-------------------------------------------------------------------
【6】ユーザー情報
-------------------------------------------------------------------*/

/*フォーム部分 */
.usr_iptxt {
	position: relative;
	width: 80%;
	margin: 40px 3%;
}
.usr_iptxt input[type=text] {
	font: 15px/24px sans-serif;
	box-sizing: border-box;
	width: 100%;
	margin: 8px 0;
	padding: 0.3em;
	transition: 0.3s;
	border: 1px solid #1b2538;
	border-radius: 4px;
	outline: none;
}
.usr_iptxt input[type=text]:focus {
	border-color: #da3c41;
}
.usr_iptxt input[type=text] {
	padding-left: 10px;
}


/* 編集テーブル */
table.user-edit {
border-collapse: collapse;
margin: 0 auto;
padding: 0;
width: 1200px;
table-layout: fixed;
}

table.user-edit tr {
background-color: #fff;
border: 1px solid #bbb;
padding: .35em;
}
table.user-edit th,
table.user-edit td {
padding: 1em 10px 1em 1em;
border-right: 1px solid #bbb;
}
table.user-edit th {
font-size: .85em;
}
table.user-edit thead tr{
background-color: #eee;
}
.txt{
 text-align: left;
 font-size: .85em;
}
.price{
 text-align: right;
}
@media screen and (max-width: 768px) {
table.user-edit {
border: 0;
width:100%
}
table.user-edit th{
background-color: #eee;
display: block;
border-right: none;
}
table.user-edit thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}

table.user-edit tr {
display: block;
margin-bottom: .625em;
}

table.user-edit td {
border-bottom: 1px solid #bbb;
display: block;
font-size: .8em;
text-align: right;
position: relative;
padding: .625em .625em .625em 4em;
border-right: none;
}

table.user-edit td::before {
content: attr(data-label);
font-weight: bold;
position: absolute;
left: 10px;
}

table.user-edit td:last-child {
border-bottom: 0;
}
}

/*-------------------------------------------------------------------
【7】商品在庫管理
-------------------------------------------------------------------*/

/* 編集テーブル */
table.item-edit {
border-collapse: collapse;
margin: 0 auto;
padding: 0;
width: 100%;
table-layout: fixed;
}

table.item-edit tr {
background-color: #fff;
border: 1px solid #bbb;
padding: .35em;
}
table.item-edit th,
table.item-edit td {
padding: 1em 10px 1em 1em;
border-right: 1px solid #bbb;
}
table.item-edit th {
font-size: .85em;
}
table.item-edit thead tr{
background-color: #eee;
}
.txt{
 text-align: left;
 font-size: .85em;
}
.price{
 text-align: right;
}
@media screen and (max-width: 768px) {
table.item-edit {
border: 0;
width:100%
}
table.item-edit th{
background-color: #eee;
display: block;
border-right: none;
}
table.item-edit thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}

table.item-edit tr {
display: block;
margin-bottom: .625em;
}

table.item-edit td {
border-bottom: 1px solid #bbb;
display: block;
font-size: .8em;
text-align: right;
position: relative;
padding: .625em .625em .625em 4em;
border-right: none;
}

table.item-edit td::before {
content: attr(data-label);
font-weight: bold;
position: absolute;
left: 10px;
}

table.item-edit td:last-child {
border-bottom: 0;
}
}


table.item-edit select {
height: 37px;
padding-left: 10px;
width: 180px;
}

/* --------------------------
メニューボタン
----------------------------- */
.menu-item {
width: 100%;
display: flex;
align-items: flex-start;
flex-flow: wrap;
}

.card {
padding: 10px;
width: calc((100% - 20px) / 7);
background-color: #fff;
}

@media not all and (min-width: 768px) {
.card {width: 100%;}
}


.card a {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 auto;
padding: 1em 2em;
width: 140px;
color: #1a2834;
font-size: 14px;
font-weight: 700;
background-color: #9FC5E8; /* ボタンの色 */
box-shadow: 0 5px 0 #426484;
border-radius: 6px;
transition: 0.3s;
text-decoration: none;
}

.card a::after {
content: '';
width: 5px;
height: 5px;
border-top: 3px solid #426484;
border-right: 3px solid #426484;
transform: rotate(45deg);
}

.card a:hover {
transform: translateY(3px);
text-decoration: none;
box-shadow: 0 2px 0 #426484;
}