body {
    background-color: #F2F2F2;
}

header{
    margin-bottom: 35px;
    background-color: #2b3d51;
}

.sp {
    display: none;
}

.inner{
    width: 1024px;
    display: block;
    margin: 0 auto;
}

h5 {
    background: #eeeeee;
    color: #333333;
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 10px;
    clear: both;
    padding: 10px 10px;
    display: flex;
    align-items: center;
}

.sp-menu-btn
{
  display: block;
  position: relative;
  
  z-index: 1221;
  
  -webkit-user-select: none;
  user-select: none;
}
.sp-menu-btn span
{
  display: block;
  width: 24px;
  height: 2px;
  margin-bottom: 7px;
  position: relative;
  background: #fff;
  border-radius: 3px;
  z-index: 1;
  transform-origin: 4px 0px;
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

.sp-menu-btn span:first-child
{
  transform-origin: 0% 0%;
}

.sp-menu-btn span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}
.sp-menu-btn.active span
{
  opacity: 1;
  transform: rotate(45deg) translate(4px, 1px);
  background: #111111;
}
.sp-menu-btn.active span:nth-child(2)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}
.sp-menu-btn.active span:nth-child(3)
{
  transform: rotate(-45deg) translate(0, -1px);
}
.sp-menu-btn{
	display: none;
}

.header-fix #topbar {
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 100;
	background-color: #fff;
	animation: slide_down_menu 0.5s ease; animation: slide_down_menu 0.5s ease;
	-webkit-animation: slide_down_menu 0.5s ease; animation: slide_down_menu 0.5s ease;
	/* -webkit-box-shadow: 0px 2px 15px 2px rgba(46,97,121,0.1); 
	box-shadow: 0px 2px 15px 2px rgba(46,97,121,0.1); */
	display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
@-webkit-keyframes slide_down_menu {
	0% { top:-60px; }
	100% { top:0px; }
}
@keyframes slide_down_menu {
	0% { top:-60px; }
	100% { top:0px; }
}

.sp-menu {
	display: none;
}

.sp-menu .sp-menu-btn {
	cursor: pointer;
}

.sp-menu .sp-menu-btn:hover {
	opacity: 0.7;
}

.sp-menu-content {
	padding: 60px 40px;
}

.sp-menu-header {
	display: flex;
	align-items: center;
}

.sp-menu-close {
	margin-right: 20px;
	cursor: pointer;
}

.sp-menu-list {
	margin-top: 10px;
}

.sp-menu-item {
	font-size: 18px;
	padding: 18px 0;
	color: black;
	border-bottom: 1px solid #A1A1A1;
	display: flex;
    align-items: center;
    justify-content: space-between;
}

.sp-menu-item a{
	font-size: 17px;
	color: black;
	display:block;
	width:100%;
}

.sp-menu-item:after {
	content: '';
	display: inline-block;
	background: url(../img/arrow.svg) top center/contain no-repeat;
	width: 3vw;
	height: calc(3vw * 24 / 15);
}
.sp-menu-item .icon {
	margin-right: 17px;
}
.sp-menu-item:last-child {
	border: none;
}

.sp-menu-footer{
	margin-top: 25px;
}

.sp-menu-footer a {
    background-color: #006aa9;
    color: white;
    font-size: 16px;
    border-radius: 25px;
    width: 100%;
    padding: 13.5px 20px;
    display: block;
    text-align: center;
}

/* sp-menu start*/
body.sp-menu-content-active {
	overflow: hidden;
}

.screen-darken {
	height: 100%;
	width: 0%;
	z-index: 30;
	position: fixed;
	top: 0;
	right: 0;
	opacity: 0;
	visibility: hidden;
	background-color: rgba(34, 34, 34, 0.6);
	transition: opacity .2s linear, visibility 0.2s, width 2s ease-in;
}

.screen-darken.active {
	z-index: 10;
	transition: opacity .3s ease, width 0s;
	opacity: 1;
	width: 100%;
	visibility: visible;
}

.sp-menu-content {
	visibility: hidden;
	transform: translateY(-100%);
	border-radius: 0;
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	z-index: 1200;
	width: 80%;
	overflow: hidden;
	background-color: white;
	transition: visibility .3s ease-in-out, transform .3s ease-in-out;
}

.sp-menu-content.show {
	visibility: visible;
	transform: translateY(0);
}

/* sp-menu end */


.main{
    background: #FFF;
    padding: 20px;
}

table.form_tb {
    width: 100%;
    margin: 0 auto 20px;
    border-collapse: inherit !important;
}

table.form_tb th span.ico {
    color: #fff;
    display: block;
    float: right;
}

table.form_tb th span.text {
    display: block;
    overflow: hidden;
}

table.form_tb th span.ico.ok:after {
    content: "ＯＫ";
    background: #00CC00;
    display: block;
    padding: 2px 8px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

table.form_tb th span.ico.require:after {
    content: "必須";
    background: #C1282B;
    display: block;
    padding: 2px 8px;
    overflow: hidden;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}


table.form_tb th, table.form_tb td {
    padding: 10px 10px;
    border-bottom: 1px solid #999;
    background: #FFF;
    vertical-align: top;
    border-collapse: collapse;
    font-size: 15px;
}

table.form_tb th {
    text-align: left;
    width: 20%;
    background: #f7f7f7;
    font-weight: bold;
    vertical-align: top;
    position: relative;
}

table.form_tb>tbody>tr:first-child th, table.form_tb>tbody>tr:first-child td {
    border-top: 1px solid #999;
}

select {
    padding: 0;
    margin-right: 2px;
    padding: 10px 5px;
}

input{
    padding: 0;
    vertical-align: middle;
}

textarea{
    padding: 0;
    vertical-align: middle;
    width: 100%;
    height: 60px;
}
.width300 {
    width: 290px;
    padding: 10px 5px !important;
    font-size: 14px;
    border: 1px solid #B3B3B3;
}

.width200 {
    width: 190px;
    padding: 10px 5px !important;
    font-size: 14px;
    border: 1px solid #B3B3B3;
}

table.form_tb td {
    vertical-align: middle;
}

.input_col {
    background: #FFFAEC;
    padding: 10px 5px;
    font-size: 14px;
    border: 1px solid #B3B3B3;
}

td.parsley-error, input.parsley-error, select.parsley-error, textarea.parsley-error {
    color: #B94A48;
    background-color: #FFE6E6 !important;
    border: 1px solid #EED3D7;
}

.form-text{
    margin-top: 0;
}

table.form_tb th.center, table.form_tb td.center{
    text-align: center;
}

table.goods_list {
    width: 100%;
    margin: 0 auto 20px;
    border-collapse: inherit !important;
}

table.goods_list td input[type=text], table.goods_list td input[type=number]{
    width:100%;
}

table.goods_list th, table.goods_list td {
    padding: 5px;
    border-bottom: 1px solid #999;
    background: #FFF;
    vertical-align: top;
    border-collapse: collapse;
    font-size: 15px;
    vertical-align: middle;
}

table.goods_list th {
    text-align: center;
    background: #f7f7f7;
    vertical-align: middle;
    position: relative;
    font-weight: normal;
}

table.goods_list .center{
    text-align: center;
    vertical-align: middle;
}

table.goods_list .input-group{
    flex-wrap: nowrap;
}

table.goods_list .input-group-text{
    font-size: 12px;
    padding: 0;
    height: 100%;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

table.goods_list td.dis_money{
    vertical-align:middle;
    text-align: right;
}

table.goods_list .no-border th, table.goods_list .no-border td{
    border-bottom: none;
}

.add-goods-btn{
    color: #2486c3;
}

.add-goods-btn .far{
    font-size: 1rem;
}

.footer{
    left: 0;
    text-align: center !important;
}

#totop {
    position: fixed;
    bottom: 20px;
    right: 15px;
    z-index: 9;
    line-height: 0;
    margin: 0;
}

#totop a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 68px;
    width: 68px;
    border-radius: 50%;
    background: #2b3d51;
}

.btn-make-invoice{
    width: 400px;
    height: 70px;
    font-size: 1.6rem;
    margin-top: 50px;
    margin-bottom: 40px;
}

@media (max-width: 1024px) {
    .inner{
        width: 100%;
    }    
}


@media (max-width: 820px) {	
    .pc {
        display: none;
    }

    .sp {
        display: block;
    }

	.sp-menu-btn{
		display: block;
	}
	
	.sp-menu {
		display: block;
		position: absolute;
        right: 5vw;
        top: 5vw;
	}

	.header-fix .sp-menu{
		margin-top: 0;
	}

	.sp-menu-content {
		width: 100%;
	}	


    
    table.form_tb{
        display: block;
    }

    table.form_tb tbody{
        width: 100%;
        display: block;
    }

    table.form_tb tr{
        display: flex;
        flex-direction: column;
    }

    table.form_tb .input_col, table.form_tb select{
        width: 100%;
    }

    table.form_tb tr th{
        width: 100%;
    }

    table.form_tb tr td{
        width: 100%;
    }

    .goods_list_panel{
        width: 100%;
        overflow-x: scroll;
    }

    table.goods_list{
        width: 900px;
    }

    #totop a{
        width: 12vw;
        height: 12vw;
    }

    #totop{
        bottom: 3vw;
        right: 3vw;
    }

    .logo1{
        max-width: 60vw;
        margin: 3vw 0 5vw 1vw;
    }

    .logo2{
        max-width: 70vw;
        margin: 0 0 2vw 1vw;
    }

    header{
        margin-bottom: 5vw;
    }

    .inner{
        width: 94vw;
        margin: 0 auto;
    }

    .sect_title{
        font-size: 5vw;
        margin-top: 3vw;
        margin-bottom: 8vw;
        padding: 0 0 3vw;
    }

    .category_list{
        width: 100%;
        flex-direction: column;
    }

    .category_list .item{
        width: 94%;
        margin: 0 3% 6vw 3%;
    }

    h5{
        padding: 2vw;
    }

    .goods{
        flex-direction: column;
        margin-bottom: 6vw;
    }

    .goods .item{
        width: 100%;
        margin: 0 auto 6vw auto;
    }

    .goods .item .infos{
        flex-direction: column;
    }

    .goods .item .detail {
        width: 100%;
        padding: 2vw;
        order: 2;
        text-align: center;
    }

    .goods .item .thumb{
        width: unset;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 2vw;
        margin-top: 2vw;
        order: 1;
    }

    .goods .item .detail .title{
        font-size: max(1rem, 5.5vw);
        text-align: center;
    }

    .goods .item .detail .price{
        font-size: max(0.9rem, 4vw);
        text-align: center;
    }

    .goods .item .detail .price .val{
        font-size: max(2rem, 10vw);
    }

    select{
        padding: 2vw 1vw;
    }

    .btn-make-invoice{
        width: 80vw;
        height: 20vw;
        margin-top: 10vw;
        font-size: 6vw;
        margin-top: 10vw;
        margin-bottom: 10vw;
    }
}