/* HTMLのベース指定部分 */
* {  font-size:12px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; vertical-align:top; padding:0; margin:0; }
html { height:100%; background:#000; }
body { height:100%; width:100%; margin: 0px; padding: 0px; color : #fff; line-height: 1.25em;
	font-family: "メイリオ", "Yu Gothic Medium", "游ゴシック Medium", "ヒラギノ角ゴ Pro W3", sans-serif; background:#223 url("../img/bg.jpg") center center no-repeat; background-size:cover; }


a { color:#fff; text-decoration:none; cursor:pointer; }
li{ list-style-type:none; }
button, label{cursor:pointer;}
button:hover, label:hover{ opacity:.8; }
th{ font-weight:normal; }
hr{ border:0; clear:both; }
::-webkit-input-placeholder{ color:#ddd; }
::-moz-placeholder{ color:#ddd; }
:-ms-input-placeholder{ color:#ddd; }


@media screen and (max-width: 768px) {
	* { font-size : 1.5vw; }
	html { height:auto; }
	body { height:auto; }
}
@media screen and (max-width: 500px) {
	* { font-size : 3.5vw; }
}

/*   loading    */
#loader-bg { display:block; position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 98; background:#000; }
#loader { display:block; position: fixed; top: 40%; width:100%; color: #333; z-index: 99; }
#loader p{ font-size:4em; text-align:center; font-weight:bold; }
#loader div{ margin:20px auto; width:40px; height:40px; }
#loader img{ width:100%; }
#loader span{ display:block; text-align:center; font-size:1em; }
@media screen and (max-width: 768px) {
	#loader p{ font-size:3em; }
	#loader div{ margin:4vw auto; width:8vw; height:8vw; }
	#loader span{ font-size:1em;  }
}

#ajaxloader{ position:fixed; top:calc( 50% - 32px ); left:calc( 50% - 32px ); display:none; z-index:97; }



/*-------ヘッダ---------*/
article#header{ height:50px; background:rgba(0,0,0,.7); color:#fff; }
article#header>section{ line-height:50px; }
article#header>section>ol{ display:table; table-layout:fixed; width:100%; }
article#header>section>ol>li{ display:table-cell; }
article#header>section>ol>li:nth-of-type(1){ text-align:left; padding-left:30px; font-size:1.5em; font-weight:bold; }
article#header>section>ol>li:nth-of-type(1)>img{ height:30px; margin:10px 0; }
article#header>section>ol>li:nth-of-type(2){ text-align:right; }
article#header>section>ol>li:nth-of-type(2)>a{ display:inline-block; text-align:center; width:120px; margin-left:20px; background:#007EFF; }
article#header>section>ol>li:nth-of-type(2)>a:hover{ background:#3F9CFB; }
article#header>section>ol>li:nth-of-type(3){ display:none; }
@media screen and (max-width: 768px) {
	article#header{ height:7vw; position:fixed; z-index:92; }
	article#header>section{ line-height:7vw; }
	article#header>section>ol>li:nth-of-type(1){ padding-left:2vw; }
	article#header>section>ol>li:nth-of-type(1)>img{ height:3vw; margin:2vw 0; }
	article#header>section>ol>li:nth-of-type(2){ font-size:.8em; }
	article#header>section>ol>li:nth-of-type(2)>a{ width:15vw; margin-left:2vw; }
}
@media screen and (max-width: 500px) {
	article#header{ height:14vw; position:fixed; z-index:92; }
	article#header>section{ line-height:14vw; }
	article#header>section>ol>li:nth-of-type(1){ padding-left:2vw; }
	article#header>section>ol>li:nth-of-type(1)>img{ height:6vw; margin:4vw 0; }
	article#header>section>ol>li:nth-of-type(2)>span{ display:none; }
	article#header>section>ol>li:nth-of-type(2)>a{ width:30vw; margin-left:2vw; }
	article#header>section>ol>li:nth-of-type(3){ display:table-cell; width:14vw; }

	article#header div#nav-toggle {position:fixed; z-index:93; top:0; right:0; display: block; width: 10vw; height: 10vw; margin:2vw 2vw 0 0; border: 1px solid #333; border-radius:.5vw; float:right; cursor: pointer; }
	article#header div#nav-toggle div {position: relative; margin:2.7vw auto 0 auto; width:6vw; height:4vw; }
	article#header div#nav-toggle span {display: block; position: absolute; height: 2px; width: 100%; background: #fff; left: 0; -webkit-transition: .35s ease-in-out; -moz-transition: .35s ease-in-out; transition: .35s ease-in-out;}
	article#header div#nav-toggle span:nth-child(1) {top: 0;}
	article#header div#nav-toggle span:nth-child(2) {top: 2vw;}
	article#header div#nav-toggle span:nth-child(3) {top: 4vw;}
	article#header.open div#nav-toggle span:nth-child(1) {top: 2vw; -webkit-transform: rotate(315deg); -moz-transform: rotate(315deg); transform: rotate(315deg);}
	article#header.open div#nav-toggle span:nth-child(2) {width: 0;}
	article#header.open div#nav-toggle span:nth-child(3) {top: 2vw; -webkit-transform: rotate(-315deg); -moz-transform: rotate(-315deg); transform: rotate(-315deg);}
}

/*-------フッタ---------*/
article#footer{ height:50px; background:rgba(0,0,0,.7); color:#fff; }
article#footer>section{  text-align:right; }
article#footer>section a{ display:inline-block; line-height:50px; padding:0 1em; margin:0 }
article#footer>section a img{ display:inline-block; vertical-align:middle; margin:0 10px; }
@media screen and (max-width: 768px) {
	article#footer{ display:none; }
}
@media screen and (max-width: 500px) {
	article#footer>section a{ line-height:10vw; }
	article#footer>section a img{ margin:0 2vw; }
}

/*-------中段---------*/
article#content{  }
article#content>article{ display:block; width:100%; height:calc( 100vh - 100px );/*ヘッダ+フッタ */  }
article#content>article>section{ display:table-cell; height: 100%; padding:0px; }
@media screen and (max-width: 768px) {
	article#content{ padding-top:7vw; }
	article#content>article{ height:calc( 100vh - 7vw );/*ヘッダ*/  }
}
@media screen and (max-width: 500px) {
	article#content{ padding-top:14vw; }
	article#content>article{ height:auto; min-height:calc( 100vh - 14vw ); }
	article#content>article>section{ display:block; height:auto; }
}

/*-------メニュー枠---------*/
section#menu > div{ width:200px; height:calc( 100vh - 100px );/*ヘッダ+フッタ */ overflow:auto; background:rgba(0,0,0,.6); }

section#menu > div > span{ display:block; padding:20px 0 0 0; color:#ccc; border-bottom:1px solid #444; line-height:40px; text-align:center; font-size:.9em; }
section#menu > div > span:before{ content:"-"; display:inline-block; margin-right:1em; }
section#menu > div > span:after{ content:"-"; display:inline-block; margin-left:1em; }

section#menu a{ display:block; padding:0 0 0 2em; position:relative; color:#999; line-height:50px; border-bottom: 1px solid #444; }
section#menu a.blank:after { content:"\f08e"; font-family:FontAwesome; position:absolute; display:inline-block; right:20px; }
section#menu a:hover{ background:rgba(180,180,180,.1); color:#fff; }
section#menu dl{ border-bottom: 1px solid #444; }
section#menu dl dt{ }
section#menu dl dt a{ padding:0 0 0 1em; }
section#menu dl dt a:before { content:""; position:absolute; display:block; height:5px; width:15px; border-top: 1px solid #999; right:18px; top:25px; }
section#menu dl dt a:after { content:""; position:absolute; display:block; height:15px; width:5px; border-left: 1px solid #999; right:20px; top:18px; }
section#menu dl.current dt{ }
section#menu dl.current dt a:after { border-left:0; }
section#menu dl dd a{ padding-left:3em; }
section#menu dl dd a.current{ background:rgba(180,180,180,.1); color:#fff; }
section#menu a span.blink{ display:block; width:20px; line-height:20px; height:20px; text-align:center; border-radius:50%; position:absolute; top:15px; right:10px; color:#fff; }
section#menu a span.blink:before{ content:"\f12a"; font-family:FontAwesome; }




.blink{
	-webkit-animation:menublink .5s ease-in-out infinite alternate;
	-moz-animation:menublink .5s ease-in-out infinite alternate;
	animation:menublink .5s ease-in-out infinite alternate;
}
@-webkit-keyframes menublink{
	0% {background:#D1C32D;}
	100% {background:#fff; color:#000;}
}
@-moz-keyframes menublink{
	0% {background:#D1C32D;}
	100% {background:#fff; color:#000;}
}
@keyframes menublink{
	50% {background:#D1C32D;}
	100% {background:#fff; color:#000;}
}


@media screen and (max-width: 768px) {
	section#menu > div{ width:20vw; height:calc( 100vh - 7vw );/*ヘッダ */ }
}
@media screen and (max-width: 500px) {
	section#menu{ position:fixed; z-index:99; top:14vw; right:0; background:rgba(0,0,0,.95); width:0; }
	section#menu > div{ width:auto; height:calc( 100vh - 14vw ); overflow-y:auto; background:none; position:relative; }
	section#menu > div > span{ padding:4vw 0 0 0; line-height:10vw; }
	section#menu a{ display:block; width:100vw; margin:0 auto;  line-height:12vw; position:relative; color:#999; }
	section#menu dl{ width:100vw; }
	section#menu dl dt a:before { right:18px; top:6vw; }
	section#menu dl dt a:after { right:20px; top:calc( 6vw - 7px ); }
}

/*-------コンテンツ枠---------*/
section#main{ width:100%; position:relative; }


/*-------ボタン枠---------*/
div.control{ position:absolute; bottom:40px; padding:0; }
div.control a{ display:table-cell; width:80px; height:80px; background:#ccc; box-shadow: 0vw 0vw 1vw .5vw rgba(0,0,0,.1); border-radius:50%; text-align:center; vertical-align:middle; }
div.control a:hover{ box-shadow: 0vw 0vw 1vw .2vw rgba(255,255,255,.5);}
div.control a:before{  display:block; font-family:FontAwesome; content:""; font-size:1.5em; padding:5px; }

div.control#new{ right:40px; }
div.control#new a{ background:#007EFF; }
div.control#new a:before{ content:"\f067"; }

div.control#save{ left:40px; display:none; }
div.control#save a{ background:#d7a700; transition:all 2s; }
div.control#save a:before{ content:"\f0c7"; }

div.control#arrival{ left:40px; }
div.control#arrival a{ background:#007EFF; }
div.control#arrival a:before{ content:"\f067"; }

div.control#shipment{ right:40px; }
div.control#shipment a{ background:#FB3F70; }
div.control#shipment a:before{ content:"\f068"; }

/* 点滅 */
.blinking{
	-webkit-animation:blink .5s ease-in-out infinite alternate;
	-moz-animation:blink .5s ease-in-out infinite alternate;
	animation:blink .5s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
	0% {background:#209e91;}
	100% {background:#2dacd1;}
}
@-moz-keyframes blink{
	0% {background:#209e91}
	100% {background:#2dacd1;}
}
@keyframes blink{
	50% {background:#209e91}
	100% {background:#2dacd1;}
}
@media screen and (max-width: 768px) {
	div.control{ bottom:10vw; }
	div.control a{ width:10vw; height:10vw; }

	div.control#new{ right:3vw; }
	div.control#save{ left:3vw; }
	div.control#save a{ font-size:.8em; }
	div.control#arrival{ left:3vw; }
	div.control#shipment{ right:3vw; }
}
@media screen and (max-width: 500px) {
	div.control{ position:fixed; bottom:0vw; padding:2vw; }
	div.control a{ width:15vw; height:15vw; }
	div.control a.before{ padding:1vw; }
	div.control#new{ right:2vw; }
	div.control#save{ left:2vw; }
	div.control#save a{ font-size:.8em; }
	div.control#arrival{ left:2vw; }
	div.control#shipment{ right:2vw; }
}

/*-------見出し---------*/
div.pagetitle{ line-height:30px; color:#fff; font-size:1.5em; font-weight:bold; padding:10px 20px; }
@media screen and (max-width: 768px) {
	div.pagetitle{ line-height:5vw; padding:2vw 4vw; }
}
@media screen and (max-width: 500px) {
	div.pagetitle{ line-height:6vw; padding:2vw 4vw; }
}

div.headbt{ height:50px; margin-top:-50px; text-align:right; padding:10px; }
div.headbt a{ display:inline-block; line-height:30px; min-width:110px; text-align:center; background:#7081e6; color:#fff; border-radius:5px; padding:0 10px; margin-left:5px; }
div.headbt a:hover{opacity:.8;}
@media screen and (max-width: 768px) {
	div.headbt{ height:10vw; margin-top:-10vw; text-align:right; padding:2vw; }
	div.headbt a{ display:inline-block; line-height:6vw; min-width:auto; text-align:center; background:#7081e6; color:#fff; border-radius:1vw; padding:0 2vw; margin-left:1vw; }
}


/*-------一覧---------*/
div.list{ height:calc( 100vh - 160px );/*ヘッダ+フッタ +見出*/ width:calc( 100vw - 220px );/*メニュー幅+余白20px*/ margin:0 10px; border-radius:5px; background:rgba(255,255,255,.2); padding: 20px; }
div.list>div{ height:100%; overflow:auto; margin:0 10px; -webkit-overflow-scrolling: touch; }
div.list.reserve>div{ height:calc(100% - 40px); }
div.list>div>div{ display:table; width:100%;  border-collapse:collapse; border-spacing:0 2px; position:relative; }
div.list dl{ display:table-row; }
div.list dt, div.list dd{ display:table-cell; vertical-align:middle; white-space:nowrap; padding:10px; border:1px solid rgba(255,255,255,.2); height:30px; }
div.list dt{ text-align:center; background:rgba(0,0,0,.3); }
div.list dt[data-sort]{ cursor:pointer; }
div.list dt:hover[data-sort]{ background:rgba(0,0,0,.4); }
div.list dt.saturday{ color:#7b97ff; }
div.list dt.holiday{ color:#ff7d7d; }
div.list dl:nth-of-type(odd) dd{ background:rgba(0,0,0,.1); }
div.list dl.ui-sortable-helper{ display:table; }
div.list dd.right{ text-align:right; }
div.list dd.center{ text-align:center; }
div.list dd.linkcol { cursor:pointer; }
div.list dl:hover dd.linkcol{ background:rgba(32,158,145,.2); }
div.list dd.linkcell { cursor:pointer; }
div.list dd.linkcell:hover{ background:rgba(0,0,0,.2); }
div.list dd.atwork{ text-align:center; background:rgba(32,158,145,.2) !important; }
div.list dd.atwork:hover{ text-align:center; background:rgba(32,158,145,.5); }
div.list dd.atwork.yotei{ position:relative; }
div.list dd.atwork.yotei:before{ font-family:FontAwesome; content:"\f005"; color:#fff000; width:4px; height:4px; position:absolute; top:1px; left:1px;  }
div.list dd.rest{ text-align:center; }
div.list dd.holiday{ text-align:center; background:rgba(255,100,100,.1) !important; }
div.list dd.sorthandle{ cursor:move; text-align:center; vertical-align:middle; width:50px; }
div.list dd.sorthandle:after { font-family:FontAwesome; content:"\f07d"; }
div.list dd.sorthandle:hover{ background:#fff; color:#000; }
div.list dd.recdelate{ cursor:pointer; text-align:center; vertical-align:middle; width:50px; }
div.list dd.recdelate:after { font-family:FontAwesome; content:"\f014"; }
div.list dd.recdelate:hover{ background:#fff; color:#000; }

div.list>div>div>p{ position:absolute; width:calc(100vw - 200px); }
div.list>div>span{ display:block; height:120px; }
div.list>div>p{ line-height:100px; text-align:center; font-size:1.5em; }

@media screen and (max-width: 768px) {
	div.list{ height:calc( 100vh - 18vw );/*ヘッダ +見出*/ width:calc( 100vw - 24vw );/*メニュー幅+余白4vw*/ margin:0 2vw; border-radius:1vw; padding:2vw; }
	div.list>div{ margin:0; padding-bottom:16vw; }
	div.list dt, div.list dd{ padding:1vw; height:5vw; }
	div.list>div>p{ line-height:10vw; }
}
@media screen and (max-width: 500px) {
	div.list{ height:auto; width:95%; margin:0 auto; border-radius:1vw; padding: 2vw; }
	div.list>div{ height:auto; margin:0 auto; overflow:auto; padding-bottom:13vw; }
	div.list.reserve>div{ height:calc(100% - 20vw); }
	div.list dt, div.list dd{ padding:2vw; height:10vw; }
	div.list dd.sorthandle{ width:10vw; }
	div.list dd>ol>li{ padding:0 2vw; }
	div.list>div>div>p{ position:static; z-index:99; width:auto; }
	div.list>div>span{ display:block; height:30vw; }
	div.list>div>span>a{ margin:5vw auto; line-height:10vw; width:80vw; border-radius:5vw; }
	div.list>div>p{ line-height:20vw; }
}


/*-------ページネーション---------*/
ol.pagenation{ display:table; table-layout:fixed; width:100%; max-width:600px; margin:30px auto; height:auto; border-spacing:5px; }
ol.pagenation>li{ display:table-cell; padding:0; text-align:center; vertical-align:middle; }
ol.pagenation>li:nth-of-type(3){ background:rgba(255,255,255,.1); width:35%; }
ol.pagenation>li>div{ line-height:15px; font-size:.9em; color:#ccc; }
ol.pagenation>li>div>span{ font-size:1.3em; color:#fff; }
ol.pagenation>li>a{ display:block; line-height:50px; background:rgba(255,255,255,.1); }
ol.pagenation>li>a:hover{ background:rgba(255,255,255,.4); }
ol.pagenation>li:nth-of-type(1)>a{ border-radius:25px 0 0 25px; }
ol.pagenation>li:nth-last-of-type(1)>a{ border-radius:0 25px 25px 0; }
ol.pagenation>li:nth-of-type(1)>a:before{ font-family:FontAwesome; content:"\f100"; display:inline-block; padding-right:1em; }
ol.pagenation>li:nth-of-type(2)>a:before{ font-family:FontAwesome; content:"\f104"; display:inline-block; padding-right:1em; }
ol.pagenation>li:nth-last-of-type(2)>a:after{ font-family:FontAwesome; content:"\f105"; display:inline-block; padding-left:1em; }
ol.pagenation>li:nth-last-of-type(1)>a:after{ font-family:FontAwesome; content:"\f101"; display:inline-block; padding-left:1em; }

@media screen and (max-width: 768px) {
	ol.pagenation{ margin:1vw auto; border-spacing:1vw; }
	ol.pagenation>li>div{ line-height:1.5vw; }
	ol.pagenation>li>a{ line-height:6vw; }
	ol.pagenation>li:nth-of-type(1)>a{ border-radius:3vw 0 0 3vw; }
	ol.pagenation>li:nth-last-of-type(1)>a{ border-radius:0 3vw 3vw 0; }
}
@media screen and (max-width: 500px) {
	ol.pagenation{ margin:3vw auto; border-spacing:.5vw; }
	ol.pagenation>li:nth-of-type(3){ width:30%; }
	ol.pagenation>li>div{ line-height:1.5em; font-size:.6em; }
	ol.pagenation>li>a{ line-height:12vw; font-size:.6em; }
	ol.pagenation>li:nth-of-type(1)>a{ border-radius:6vw 0 0 6vw; }
	ol.pagenation>li:nth-last-of-type(1)>a{ border-radius:0 6vw 6vw 0; }
}



/*-------一覧検索---------*/
div.list>div table{ width:100%; max-width:500px; margin:0 auto 10px auto; }
div.list>div table td{ vertical-align:middle; padding:2px; }
div.list>div table td:nth-of-type(2){ width:80px }
div.list>div table td input{ height:40px; width:100%; }
div.list>div table td select{ height:40px; width:100%; }
div.list>div table td button{ line-height:30px; border-radius:5px; width:100%; }


/*-------ダイアログ---------*/
div.dialog{ position:fixed; z-index:90; display:none; opacity:0; top:0; left:0; width:100%; height:100%; align-items: center; justify-content: center; background:rgba(0,0,0,.8); transition:all .5s; }
div.dialog>div{ display:flex; width:100%; max-width:1000px; justify-content: center; height:100%; flex-direction:column; }
div.dialog>div>p{ font-size:2.5em; text-align:center; font-weight:bold; padding:30px 0; }
div.dialog>div>span{ font-size:1.5em; text-align:center; }
@media screen and (max-width: 768px) {
	div.dialog{ top:7vw; }
	div.dialog>div{ -webkit-overflow-scrolling: touch; }
	div.dialog>div>p{ font-size:1.8em; padding:5vw 0; }
}

.ajaxbox{ background:#fff; color:#666; max-height:calc( 95% - 150px ); overflow:auto; width:100%; margin:0 auto; border-radius:5px; padding:50px; }
.ajaxbox>div{  display:table; width:100%; border-collapse:collapse; }
.ajaxbox>div>dl{ display:table-row; }
.ajaxbox>div>dl>dt{ display:table-cell; padding:10px; border-bottom: 1px solid #ccc; text-align:left; vertical-align:middle;}
.ajaxbox>div>dl>dd{ display:table-cell; padding:10px; border-bottom: 1px solid #ccc; text-align:left; }
.ajaxbox>div>dl>dd td{ vertical-align:middle; padding:5px 20px; }
.ajaxbox>div>dl>dd span.info{ display:block; color:#B92E7E; }
.ajaxbox>div>dl>dd p{ padding-top:1em; font-weight:bold; font-size:1.1em; line-height:1.5em; border-bottom: 1px solid #ccc; }
.ajaxbox>div>dl>dd a{ display:inline-block; padding:0 1em; color:#5e64d1; }
.ajaxbox>div>dl>dd img{ display:block; max-width:100%; }

.ajaxbox>div>dl>dd ol{ display:table; border-spacing:0; }
.ajaxbox ol.w100{ width:100%; }
.ajaxbox ol.w70{ width:70%; }
.ajaxbox ol.w50{ width:50%; }
.ajaxbox ol.w30{ width:30%; }
.ajaxbox>div>dl>dd ol>li{ display:table-cell; text-align:left; vertical-align:middle; padding-left:5px; }
.ajaxbox>div>dl>dd ol>li>span{ display:inline-block; min-width:30px; }

.ajaxbox h3{ font-weight:bold; font-size:1.2em; margin:5px 0; }
.ajaxbox h4{ font-weight:bold; margin-top:10px; }
.ajaxbox h5{ background:#999; color:#fff; padding:5px; margin-top:10px; }
.ajaxbox h6{ font-size:1.8em; padding:10px; border-bottom: 1px solid #ccc; }
.ajaxbox hr{ display:block; height:30px; }

.ajaxbox>table{ width:100%; border-collapse:collapse; }
.ajaxbox>table th{ padding:10px; width:20%; background:#eee; border: 1px solid #ccc; text-align:left; vertical-align:middle; }
.ajaxbox>table td{ padding:10px; border: 1px solid #ccc; vertical-align:middle; }
.ajaxbox>table td p{ font-weight:bold; margin-bottom:10px; }
.ajaxbox>table td span{ display:block; margin-bottom:10px; }
.ajaxbox>table td td{ border:0; padding:0 10px 0 0; }
.ajaxbox .right{ text-align:right; }

ol.oneline{ display:table; width:100%; border-collapse:separate; border-spacing:5px; }
ol.oneline li{ display:table-cell; vertical-align:middle; }

#infobox{ width:100%; max-width:1000px; margin:0 auto; }
#infobox div.error{ padding:10px; margin-bottom:5px; color:#d72e00; font-size:1.2em; font-size:2.5em; font-weight:bold; }
#infobox div.error:before { font-family:FontAwesome; content:"\f06a"; display:inline-block; padding-right:10px; }

#infobox div.warning{ padding:10px; margin-bottom:5px; color:#d7c500; font-size:1.2em; font-size:2.5em; font-weight:bold; }
#infobox div.warning:before { font-family:FontAwesome; content:"\f071"; display:inline-block; padding-right:10px; }


@media screen and (max-width: 768px) {
	.ajaxbox{ max-height:calc( 100% - 30vw ); width:95%; border-radius:1vw; padding:10vw 5vw; }
	#infobox{ width:95%; }
	#infobox div.error{ padding:2vw; margin-bottom:1vw; font-size:2em; }
}
@media screen and (max-width: 500px) {
	.ajaxbox{ max-height:calc( 100% - 25vw ); width:95%; border-radius:1vw; padding:10vw 5vw; }
	.ajaxbox>div{  display:block; }
	.ajaxbox>div>dl{ display:block; }
	.ajaxbox>div>dl.pc{ display:none; }
	.ajaxbox>div>dl>dt{ display:block; padding:2vw 2vw 0 0; border:0; width:100%; font-weight:bold; }
	.ajaxbox>div>dl>dd{ display:block; padding:2vw 0 2vw 2vw; border:0;  border-bottom: 1px solid #ccc; }

	.ajaxbox h3{ margin:1vw 0; }
	.ajaxbox h4{ margin-top:2vw; }
	.ajaxbox h5{ padding:1vw; margin-top:2vw; }
	.ajaxbox h6{ padding:2vw; }
	.ajaxbox hr{ height:5vw; }

	.ajaxbox>table th{ padding:2vw; }
	.ajaxbox>table td{ padding:2vw; }
	.ajaxbox>table td p{ margin-bottom:2vw; }
	.ajaxbox>table td span{ margin-bottom:2vw; }
	.ajaxbox>table td td{ border:0; padding:0 2vw 0 0; }
}

div.bt{  }
div.bt ol{ display:table; table-layout: fixed; border-collapse: separate; border-spacing:10px; margin:0 auto; width:100%; max-width:600px; }
div.bt.max ol{ max-width:100%; }
div.bt li{ display:table-cell; width:auto; }
div.bt button{ display:block; width:100%; line-height:50px; border:0; padding:0; background:#999; color:#fff; border-radius:5px; box-shadow: 2px 2px 6px rgba(0,0,0,0.5); opacity:1; }
div.bt button:hover{ opacity:.8; }
div.bt button.warning{ background:#999; }
div.bt button.info{ background:#FB3F70; }
div.bt button.success{ background:#007EFF; }


div.bt button.arrival{ background:#007EFF; }
div.bt button.arrival:before{ display:inline-block; font-family:FontAwesome; content:"\f067"; font-size:1.2em; padding:0 1em 0 0; }

div.bt button.shipment{ background:#FB3F70; }
div.bt button.shipment:before{ display:inline-block; font-family:FontAwesome; content:"\f068"; font-size:1.2em; padding:0 1em 0 0; }

div.bt button.order{ background:#dc9600; }
div.bt button.order:before{ display:inline-block; font-family:FontAwesome; content:"\f07a"; font-size:1.2em; padding:0 1em 0 0; }





@media screen and (max-width: 768px) {
	div.bt ol{ border-spacing:1vw; }
	div.bt button{ line-height:7vw; border-radius:1vw; }
}
@media screen and (max-width: 500px) {
	div.bt ol{ border-spacing:2vw; }
	div.bt button{ line-height:10vw; border-radius:1vw; }
	div.bt.max ol{ display:block; max-width:100%; padding:2vw 0 8vw 0; text-align:center; }
	div.bt.max li{ display:inline-block; width:45%; margin-bottom:1vw; }
	div.bt.max li.smpmax{ width:90%; }
}



/*-------入力フォーム---------*/
/* テキスト */
input[type="text"], input[type="password"], input[type="file"], input[type="date"], input[type="datetime-local"], input[type="time"]
	{ width:100%; height:40px; font-size:1.2em; padding:0 10px; border: 1px solid #ccc; margin:0 0 5px 0; }

/* テキストエリア */
textarea{ width:100%; height:100px; font-size:1.2em; padding:10px; border: 1px solid #ccc; margin:0 0 5px 0; }
textarea.midiumtext{ height:200px; }
textarea.longtext{ height:500px; }

/* セレクトボックス */
select{ width:100%; height:40px; border: 1px solid #ccc; font-size:1.2em; padding:0 10px; margin:0 0 5px 0; }
select option{ font-size:1.2em; }
select.multiselect{ height:100px; font-size:1.2em; }


/* チェックボックス */
.checkbox{ padding:.5em 0; display:inline-block; white-space:nowrap; }
.checkbox input[type=checkbox]{ display: none; }
.checkbox input[type=checkbox] + span { display:inline-block; vertical-align:middle; width:25px; height:25px; border: 1px solid #ccc; background:#fff; margin-right:.5em; border-radius:0; }
.checkbox input[type=checkbox]:checked + span:after{ content:"\f00c"; font-family:FontAwesome; color:#666; display:inline-block; width:25px; line-height:25px; text-align:center; }

/* ラジオボタン */
.radio{ padding:.5em 1.5em .5em 0; display:inline-block; white-space:nowrap; }
.radio input[type=radio]{ display: none; }
.radio input[type=radio] + span { display:inline-block; vertical-align:middle; width:25px; height:25px; border: 1px solid #ccc; background:#fff; margin-right:.5em; border-radius:50%; }
.radio input[type=radio]:checked + span:after{ content:"\f111"; font-family:FontAwesome; color:#666; display:inline-block; width:23px; line-height:23px; text-align:center; }


/*汎用ボタン*/
button{ display:inline-block; line-height:40px; padding:0 20px; border:0; border: 1px solid #ccc; border-radius:2px; }

/*  画像アップロード  */
.imagefrm { width:auto; max-width:300px; display:block; }
.imagefrm img{ width:100%; display:block; }
.imagefrm input[type="file"]{ display:none;}

.imagefrm label{ display:block; margin:5px auto; border: 1px solid #2fbdb0; line-height:20px; padding:5px 0; text-align:center;
		border-radius:2px; box-shadow: 2px 2px 6px rgba(0,0,0,0.2); background:#fff; color:#2fbdb0; transition: background-color .3s; }
.imagefrm label:hover{ box-shadow: 2px 2px 8px rgba(0,0,0,0.5); background:#2fbdb0; color:#fff; }
.imagefrm label:before { content:"\f1c5"; font-family:FontAwesome; padding-right:0.5em; }

.imagefrm button{ display:block; width:100%; margin:5px auto; border: 1px solid #dd6e68; line-height:20px; padding:5px 0; text-align:center;
		border-radius:2px; box-shadow: 2px 2px 6px rgba(0,0,0,0.2); background:#fff; color:#dd6e68; transition: background-color .3s; }
.imagefrm button:hover{ box-shadow: 2px 2px 8px rgba(0,0,0,0.5); background:#dd6e68; color:#fff; }
.imagefrm button:before { content:"\f014"; font-family:FontAwesome; padding-right:0.5em; }

/*  ファイルアップロード  */
.uploadfrm { width:auto; max-width:300px; display:block; }
.uploadfrm img{ width:100%; display:block; }
.uploadfrm div.file p{ text-align:center; padding:50px 0; font-size:1.2em; background:#999; border: 1px solid #ccc; border-radius:5px 5px 0 0; }
.uploadfrm div.file p:before{ content:"\f016"; font-family:FontAwesome; padding-right:.5em; }
.uploadfrm input[type="file"]{ display:none;}

.uploadfrm label{ display:block; margin:5px auto; border: 1px solid #2fbdb0; line-height:20px; padding:5px 0; text-align:center;
		border-radius:2px; box-shadow: 2px 2px 6px rgba(0,0,0,0.2); background:#fff; color:#2fbdb0; transition: background-color .3s; }
.uploadfrm label:hover{ box-shadow: 2px 2px 8px rgba(0,0,0,0.5); background:#2fbdb0; color:#fff; }
.uploadfrm label:before { content:"\f0f6"; font-family:FontAwesome; padding-right:0.5em; }

.uploadfrm button{ display:block; width:100%; margin:5px auto; border: 1px solid #dd6e68; line-height:20px; padding:5px 0; text-align:center;
		border-radius:2px; box-shadow: 2px 2px 6px rgba(0,0,0,0.2); background:#fff; color:#dd6e68; transition: background-color .3s; }
.uploadfrm button:hover{ box-shadow: 2px 2px 8px rgba(0,0,0,0.5); background:#dd6e68; color:#fff; }
.uploadfrm button:before { content:"\f014"; font-family:FontAwesome; padding-right:0.5em; }

.uploadfrm>a{ display:block; }
.uploadfrm>a:hover{ text-decoration:none; background:#eee; }

@media screen and (max-width: 768px) {
	/* テキスト */
	input[type="text"], input[type="password"], input[type="file"], input[type="date"], input[type="datetime-local"], input[type="time"]
		{ height:5vw; font-size:16px; padding:0 2vw; margin:2vw 0; }

	/* テキストエリア */
	textarea{ height:10vw; font-size:16px; padding:2vw; margin:2vw 0; }
	textarea.midiumtext{ height:10vw; }
	textarea.longtext{ height:10vw; }

	/* セレクトボックス */
	select{ width:100%; height:5vw; margin:2vw 0; font-size:16px; padding-left:2vw; }
	select option{ font-size:16px; }
	select.multiselect{ height:10vw; font-size:16px; }

	/*  画像アップロード  */
	.imagefrm { max-width:none; }
	.imagefrm img{ width:60%; margin:0 auto; display:block; }
	.imagefrm label{ width:100%; margin:1vw auto; line-height:5vw; padding:1vw 0; border-radius:1vw; box-shadow: .5vw .5vw 1vw rgba(0,0,0,0.2); }
	.imagefrm button{ width:100%; margin:1vw auto; line-height:5vw; padding:1vw 0; border-radius:1vw; box-shadow: .5vw .5vw 1vw rgba(0,0,0,0.2); }


}
@media screen and (max-width: 500px) {
	/* テキスト */
	input[type="text"], input[type="password"], input[type="file"], input[type="date"], input[type="datetime-local"], input[type="time"]
		{ height:10vw; font-size:16px; padding:0 2vw; margin:2vw 0; }

	/* テキストエリア */
	textarea{ height:10vw; font-size:16px; padding:2vw; margin:2vw 0; }
	textarea.midiumtext{ height:10vw; }
	textarea.longtext{ height:10vw; }

	/* セレクトボックス */
	select{ width:100%; height:10vw; margin:2vw 0; font-size:16px; padding-left:2vw; }
	select option{ font-size:16px; }
	select.multiselect{ height:20vw; font-size:16px; }


	/* チェックボックス */
	.checkbox input[type=checkbox] + span { width:6vw; height:6vw;  }
	.checkbox input[type=checkbox]:checked + span:after{ width:6vw; line-height:6vw; }

	/* ラジオボタン */
	.radio input[type=radio] + span { width:6vw; height:6vw; }
	.radio input[type=radio]:checked + span:after{ width:5.5vw; line-height:5.5vw; }

	/*汎用ボタン*/
	button{ line-height:10vw; padding:0 4vw; border-radius:1vw; }

	/*  画像アップロード  */
	.imagefrm { max-width:none; }
	.imagefrm img{ width:60%; margin:0 auto; display:block; }
	.imagefrm label{ width:60%; margin:1vw auto; line-height:8vw; padding:1vw 0; border-radius:1vw; box-shadow: .5vw .5vw 1vw rgba(0,0,0,0.2); }
	.imagefrm button{ width:60%; margin:1vw auto; line-height:8vw; padding:1vw 0; border-radius:1vw; box-shadow: .5vw .5vw 1vw rgba(0,0,0,0.2); }

	/*  ファイルアップロード  */
	.uploadfrm { max-width:none; }
	.uploadfrm div.file p{ width:60%; margin:0 auto; text-align:center; padding:5vw 0; font-size:1.2em; border: 1px solid #ccc; border-radius:5px 5px 0 0; }
	.uploadfrm label{ width:60%; display:block; margin:1vw auto; line-height:8vw; padding:1vw 0; border-radius:1vw; box-shadow: .5vw .5vw 1vw rgba(0,0,0,0.2); }
	.uploadfrm button{ width:60%; display:block; margin:1vw auto; line-height:8vw; padding:1vw 0; border-radius:1vw; box-shadow: .5vw .5vw 1vw rgba(0,0,0,0.2); }
}



/* ----------------------------------------------------- */
/* 検索フォーム */
/* ----------------------------------------------------- */
div.search{display:block; margin-bottom:10px; background:#fff; padding:20px 50px; border-radius:5px; max-width:1000px; }
div.search * { color:#666; }
div.search dl{ display:block; }
div.search dt{ display:block; text-align:left; padding:10px; font-size:1.5em; border-bottom: 1px solid #000; background:none; margin-bottom:10px; position:relative; cursor:pointer; }
div.search dt:after { content:"\f107"; font-family:FontAwesome; font-size:2.0em; position:absolute; right:0; }
div.search dd{ display:block; padding:0px; height:0; overflow:hidden; transition: height .3s; }
div.search>dl.open dt:after{ content:"\f106"; }
div.search>dl.open dd{ height:auto; }
div.search dd>table{ width:100%; border-collapse:collapse; }
div.search dd>table th{ padding:10px; vertical-align:middle; text-align:left; width:150px; border-bottom: 1px solid #ccc; }
div.search dd>table td{ padding:10px; border-bottom: 1px solid #ccc; }

div.search dd ul{ display:table; border-spacing:0;}
div.search dd ul>li{ display:table-cell; text-align:center; vertical-align:middle; }
div.search dd ul>li>span{ display:inline-block; padding:0 .5em; }
div.search dd ul>li>input{ min-width:100px; }
div.search dd ul>li>select{ min-width:100px; }
div.search .bt{ margin:0 auto; max-width:300px; }
div.search dd td button{ display:inline-block; width:100px; line-height:30px; border:0; background:#999; color:#fff; border-radius:5px; box-shadow: 2px 2px 6px rgba(0,0,0,0.5); opacity:1; }
div.search dd td button:hover{ opacity:.8; }
div.search dd h5{ background:#999; color:#fff; padding:5px 10px; margin:10px 0 5px 0; }

@media screen and (max-width: 768px) {
	div.search{ margin-bottom:2vw; padding:4vw; border-radius:1vw; max-width:auto; }
	div.search dt{ padding:2vw; margin-bottom:2vw; }
	div.search dt:after { font-family:FontAwesome; font-size:1.0em; }
	div.search dd>table th{ display:block; padding:2vw 2vw 0 2vw; width:100%; border-bottom:0; font-weight:bold; }
	div.search dd>table td{ display:block; padding:2vw 2vw 2vw 2vw; width:100%; border-bottom: 1px solid #ccc; }

	div.search dd>table td label.radio{ display:block; text-align:left; width:100%; background:#efefef; padding:1vw; margin-top:1vw; }

	div.search dd>table td label.radio{ display:block; text-align:left; width:75vw; background:#efefef; padding:1vw; margin-top:1vw; }
	div.search dd>table td div#b2 ul{ display:block; width:75vw; white-space:normal; }
	div.search dd>table td div#b2 li{ display:inline-block; width:auto; }
	div.search dd>table td div#b2 li:nth-of-type(1){ display:block; width:100%; }
	div.search dd>table td div#b3 ul{ display:block; width:75vw; white-space:normal; }
	div.search dd>table td div#b3 li{ display:inline-block; }
	div.search dd>table td div#b3 li:nth-of-type(2){ width:25vw; }
	div.search dd>table td div#b3 li:nth-of-type(4){ width:25vw; }
	div.search dd ul>li>span{ display:inline-block; padding:0 .5em; }
	div.search dd ul>li>input{ min-width:0; }
	div.search dd ul>li>select{ min-width:0; }
	div.search .bt{ margin:0 auto; max-width:100%; }
	div.search dd td button{ display:inline-block; width:20vw; line-height:5vw; border-radius:1vw; }
	div.search dd h5{ background:#999; color:#fff; padding:1vw 2vw; margin:2vw 0 1vw 0; }
}

/* ----------------------------------------------------- */
/* ヘルプページ */
/* ----------------------------------------------------- */
div#help{ height:calc( 100vh - 160px );/*ヘッダ+フッタ +見出*/ width:calc( 100vw - 220px );/*メニュー幅+余白20px*/ margin:0 10px; border-radius:5px; background:rgba(255,255,255,.2); padding: 20px; }
div#help>div{ height:100%; overflow:auto; margin:0 10px; -webkit-overflow-scrolling: touch; }
div#help>div>h2{ font-size:2.5em; text-align:center; padding:50px 0; line-height:1.2em; }
div#help>div>dl{ border-bottom: 1px solid #999; padding:10px; }
div#help>div dt{ font-weight:bold; font-size:1.5em; padding:10px 10px 10px 1em; text-indent:-1em; line-height:1.5em; }
div#help>div dt:before{ content:"★"; color:#FFDE00; }
div#help>div dd{ padding:10px 10px 10px 1em; font-size:1.2em; line-height:2em; line-height:1.5em; }

div#help>div>ul{ padding:10px;}
div#help>div>ul>li{ padding:10px 10px 10px 1em; font-size:1.2em; text-indent:-1em; line-height:1.5em; }
div#help>div>ul>li:before{ content:"※"; }

@media screen and (max-width: 768px) {
	div#help{ height:calc( 100vh - 18vw );/*ヘッダ +見出*/ width:calc( 100vw - 24vw );/*メニュー幅+余白4vw*/ margin:0 2vw; border-radius:1vw; padding:2vw; }
	div#help>div{ margin:0; }
}
@media screen and (max-width: 500px) {
	div#help{ height:auto; width:95%; margin:0 auto; border-radius:1vw; padding: 2vw; }
	div#help>div{ height:auto; margin:0 auto; overflow:auto; }
	div#help>div>h2{ font-size:1.2em; padding:10vw 0; }
	div#help>div dt{ font-weight:bold; font-size:1.0em; padding:2vw 2vw 1vw 1em; }
	div#help>div dd{ padding:1vw 2vw 2vw 1em; font-size:.8em; }

	div#help>div>ul{ padding:2vw;}
	div#help>div>ul>li{ padding:2vw 2vw 2vw 1em; font-size:.8em; }
}



/* ----------------------------------------------------- */
/* ログインフォーム */
/* ----------------------------------------------------- */
article#loginbox{ display:block; padding:20px; width:100%; max-width:auto; height:calc( 100vh - 50px );/*フッタ */ vertical-align:top; }
article#loginbox article{ width:100%; height:100%; position: relative; }
article#loginbox section{ color:#fff; font-size:1.2em; width:100%; max-width:650px; height:800px; margin:auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
article#loginbox section h1{ padding:50px 0; }
article#loginbox section h1>img{ display:block;  width:100%; max-width:650px; margin:0 auto; }
article#loginbox section>form>div{ width:100%; max-width:600px; padding:50px; margin:0 auto; background:rgba(0, 0, 0, .3); border-radius:10px; }
article#loginbox section>form>div ul li{ padding:20px 0;}
article#loginbox section>form>div ul li>span{ display:block; padding:5px; }
article#loginbox section>form>div ul li:nth-of-type(1)>span:before { content:"\f2c0"; font-family:FontAwesome; padding-right:0.5em;}
article#loginbox section>form>div ul li:nth-of-type(2)>span:before { content:"\f084"; font-family:FontAwesome; padding-right:0.5em;}
article#loginbox section>form>div input[type="text"],
article#loginbox section>form>div input[type="password"]{ width:100%; height:40px; font-size:1.2em; padding:10px; }
article#loginbox section>form>div input:-webkit-autofill { box-shadow: 0 0 0 1000px #fff inset; }
article#loginbox section>form>div button{display:block; width:100%; height:50px; background:#3F9CFB; color:#fff; border-radius:2px; box-shadow: 2px 2px 6px rgba(0,0,0,0.5); }
article#loginbox section>form>div button:before { content:"\f090"; font-family:FontAwesome; padding-right:0.5em;}
article#loginbox section>form>div button:hover{ background:#3F9CFB; }
article#loginbox section #attention{ color:#fff; text-align:center; font-weight:bold; margin-bottom:30px; padding:10px 0; font-size:1.8em; border-bottom: 1px solid #db524b; line-height:1.2em; }
article#loginbox section #attention:before { content:"\f071 "; font-family:FontAwesome; padding-right:0.5em; color:#fcff00; }
article#loginbox section #info{ color:#fff; text-align:center; font-weight:bold; margin-bottom:30px; padding:10px 0; font-size:1.8em; border-bottom: 1px solid #3F9CFB; line-height:1.2em; }
article#loginbox section #info:before { content:"\f06a "; font-family:FontAwesome; padding-right:0.5em; color:#fff; }

@media screen and (max-width: 768px) {
	article#loginbox{ display:block; padding:5vw; height:100vh; }
	article#loginbox section{ height:140vw; }
	article#loginbox section h1{ padding:5vw 0; }
	article#loginbox section>form>div{ padding:5vw; border-radius:2vw; }
	article#loginbox section>form>div ul li{ padding:2vw 0;}
	article#loginbox section>form>div ul li>span{ padding:1vw; }
	article#loginbox section>form>div input[type="text"],
	article#loginbox section>form>div input[type="password"]{ height:10vw; padding:2vw; margin:0; }
	article#loginbox section>form>div button{ margin-top:5vw; height:12vw; }
	article#loginbox section #attention{ margin-bottom:5vw; padding:2vw 0; }
	article#loginbox section #info{ margin-bottom:5vw; padding:2vw 0; }
}