@charset "utf-8";

/* RESET
---------------------------------------- */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display:block;}

ul,ol {list-style:none;}

blockquote, q {quotes:none;}
blockquote:before, blockquote:after,q:before, q:after {content:''; content:none;}

a {margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; outline:none;}

del {text-decoration:line-through;}

abbr[title], dfn[title] {border-bottom:1px dotted; cursor:help;}

table {border-collapse:collapse; border-spacing:0;}

input, select {vertical-align:middle;}

img {vertical-align:bottom; border:none; font-size:0; line-height:0;}

em {font-style:normal;}

body {-webkit-text-size-adjust:none; font-family: Helvetica, Arial, 'Hiragino Kaku Gothic ProN', 'ƒqƒ‰ƒMƒmŠpƒS ProN W3', 'ƒ‚ƒŠƒTƒ VƒS R', 'Droid Sans', ƒƒCƒŠƒI, 'sans-serif'; font-size:14px;}

address {font-style:normal;}

* {box-sizing: border-box;}

/*
 *	COMMON CLASS
 *
 *------------------------------------*/

.layout-fixed {table-layout: fixed;}

.w15 {width: 15px !important;}
.w20 {width: 20px !important;}
.w30 {width: 30px !important;}
.w40 {width: 40px !important;}
.w50 {width: 50px !important;}
.w60 {width: 60px !important;}
.w70 {width: 70px !important;}
.w80 {width: 80px !important;}
.w90 {width: 90px !important;}
.w100 {width: 100px !important;}
.w110 {width: 110px !important;}
.w120 {width: 120px !important;}
.w130 {width: 130px !important;}
.w140 {width: 140px !important;}
.w150 {width: 150px !important;}
.w160 {width: 160px !important;}
.w170 {width: 170px !important;}
.w180 {width: 180px !important;}
.w190 {width: 190px !important;}
.w200 {width: 200px !important;}
.w210 {width: 210px !important;}
.w220 {width: 220px !important;}
.w230 {width: 230px !important;}
.w240 {width: 240px !important;}
.w250 {width: 250px !important;}
.w260 {width: 260px !important;}
.w270 {width: 270px !important;}
.w280 {width: 280px !important;}
.w290 {width: 290px !important;}
.w300 {width: 300px !important;}
.w320 {width: 320px !important;}
.w400 {width: 400px !important;}
.w500 {width: 500px !important;}
.w600 {width: 600px !important;}
.w100p {width: 100% !important;}
.wa {width: auto !important;}

.h50 {height: 50px !important;}
.h100 {height: 100px !important;}
.h150 {height: 150px !important;}
.h200 {height: 200px !important;}
.h300 {height: 300px !important;}
.h400 {height: 400px !important;}

.mt10 {margin-top: 10px !important;}
.mt20 {margin-top: 20px !important;}
.mt30 {margin-top: 30px !important;}

.mb10 {margin-bottom: 10px !important;}
.mb20 {margin-bottom: 20px !important;}
.mb30 {margin-bottom: 30px !important;}

.ml10 {margin-left: 10px !important;}
.ml20 {margin-left: 20px !important;}
.ml30 {margin-left: 30px !important;}

.taL, .tal {
	text-align: left !important;
}
.taC, .tac {
	text-align: center !important;
}
.taR, .tar {
	text-align: right !important;
}
.fL {
	float: left !important;
}
.fR {
	float: right !important;
}
.cB {
	clear: both;
}
.fwB, .fwb {
	font-weight: bold !important;
}

.clearfix:after {
  content: "";
  clear: both;
  display: block;
}

small {font-size: 0.8em; color: #666;}
em.valid {font-weight: bold; color: #0A0;}
em.error {font-weight: bold; color: #F00;}

.hidden {display: none !important;}


/*
 *	LAYOUT
 *
 *------------------------------------*/

body {color:#000;}

header .primary-wrap {border-bottom: 1px solid #000; background: linear-gradient(#FFF, #DDD);}
header .primary-wrap::after {content:""; display: block; clear: both;}
header h1 {float: left; height: 40px; width: 220px; padding: 10px 20px; text-align: center; font-size: 20px;}
header h1 img {height: 20px;}
header .primary-nav {float: left; width: calc(100% - 220px); padding-top: 5px;}
header .primary-nav ul {border-left: 1px solid #DDD; border-right: 1px solid #FFF;}
header .primary-nav li {float: left; border-left: 1px solid #FFF; border-right: 1px solid #DDD;}
header .primary-nav li a,
header .primary-nav li span {display: block; height: 35px; padding: 0 20px; line-height: 35px; text-decoration: none;}
header .primary-nav li a:hover {background: linear-gradient(#DDD, #FFF);}
header .primary-nav li a.active {background: linear-gradient(#FFF, #EEE);}

header .secondary-nav {clear:both; background: #EEE; border-bottom: 1px solid #CCC;}
header .secondary-nav::after {content:""; display: block; clear: both;}
header .secondary-nav ul {float: left; border-left: 1px solid #DDD; border-right: 1px solid #FFF;}
header .secondary-nav li {float: left; border-left: 1px solid #FFF; border-right: 1px solid #DDD;}
header .secondary-nav li a {display: block; height:40px; padding: 10px 30px; line-height: 20px; text-decoration: none;}

header .header-alert {padding: 5px 10px; border-left: 5px solid #C00; background: #FEE; color: #C00;}
header .header-alert a {color: #C00;}

footer {margin-top:30px; height: 30px;}
.container {min-height:500px; padding: 10px 20px 50px;}
.container p {margin-bottom: 10px;}
.container p:last-child {margin-bottom: 0;}

.cols {margin-left: -20px; margin-right: -20px;}
.cols::after {content: ""; display: block; clear: both;}
.col-4 {box-sizing: border-box; float: left; width: 33.3%; padding: 0 20px;}
.col-6 {box-sizing: border-box; float: left; width: 50%; padding: 0 20px;}

/*
 *	TITLE
 *
 *------------------------------------*/

.page-title {
    position: relative;
	margin: 0 -10px 20px;
	padding: 5px 10px;
	font-size: 18px;
	border-bottom: 3px solid #025;        
}

.page-title .btn-small {
    position: absolute;
    right:10px;
    top:2px;
}

.section-title {
    position: relative;
	margin: 50px -10px 20px;
	padding: 7px 10px;
	font-size: 16px;
	color: #025;
	background: #EEE;
	border-bottom: 1px solid #025;
}

.section-title .btn-small {
    position: absolute;
    right:10px;
    top:5px;
}

.section-title:first-child,
.page-title + .section-title {
    margin-top: 20px;
}

/*
 *	BUTTON
 *
 *------------------------------------*/

a {
    color: #025;
}

.btn {
	display: inline-block;
	text-decoration: none;
	color: #444;
	background: #EEE;
	border: none;
}
.btn:hover {
	/* opacity: 0.8; */
}
.btn-tiny {
	margin-right: 5px;
	padding: 1px 5px;
	border-radius:3px;
        font-size:14px;
        font-weight: normal;
}
.btn-small {
	padding: 3px 15px;
	border-radius:5px;
        font-size:14px;
        font-weight: normal;
}
.btn-medium {
	padding: 10px 0;
	min-width: 200px;
	text-align: center;
	border-radius:5px;
    font-size:16px;
    font-weight: normal;
}

.btn.btn-primary {
	color: #FFF;
	background: #A11A08;
        border-bottom: 2px solid #881C0E;
}
.btn.btn-proceed {
	color: #FFF;
	background: #7FA110;
    border-bottom: 2px solid #415500;
}
.btn.btn-plain {
	color: #000;
	background: #CCC;
	border-bottom: 2px solid #AAA;
}
.btn.btn-primary:hover {
    border-bottom: 2px solid #881C0E;
}
.btn.btn-proceed:hover {
    border-bottom: 2px solid #415500;
}
.btn.btn-plain:hover {
    border-bottom: 2px solid #CCC;
}

/*
 *	SYSTEM MESSAGE
 *
 *------------------------------------*/

.message-wrap {
	display: none;
	position:fixed;
	left: 0;
	top: 0;
	z-index: 9999;
	width: 100%;
	height: 100%;
	padding-top: 50px;
	background:rgba(0, 0, 0, 0.5);
}

.sys-message-wrap {
	display: block;
	width: 50%;
	min-width: 300px;
	margin: 0 auto 20px;
	padding: 10px 15px;
	border: 1px solid #888;
	text-align: left;
	background: #EEE;
	color: #000;
}
.sys-message-wrap.sys-message-error {
	border: 1px solid #F00;
	background: #FEE;
	color: #F00;
}
.sys-message-wrap.sys-message-success {
	border: 1px solid #0A0;
	background: #EFE;
	color: #0A0;
}
.sys-message-wrap p {
	margin-bottom: 10px;
}
.sys-message-wrap p:last-child {
	margin-bottom: 0;
}

p.sys-error-inline {
	margin-bottom: 5px;	
	color: #F00;
}

.loader-wrap {
	display: none;
	position:fixed;
	left: 0;
	top: 0;
	z-index: 9999;
	width: 100%;
	height: 100%;
	padding-top: 50px;
	background:rgba(0, 0, 0, 0.7);
}
.loader {
    position: absolute;
    margin: auto;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 40px;
    height: 40px;
    border: 5px solid #096;
    border-top: 5px solid #CFE;
    border-radius: 20px;
    animation: spin 0.5s linear infinite;
    -webkit-animation: spin 0.5s linear infinite;
    -moz-animation: spin 0.5s linear infinite;
    -ms-animation: spin 0.5s linear infinite;
}
.loader-progress {
	display: none;
    position: absolute;
    margin: auto;
    left: 0;
    top: 120px;
    right: 0;
    bottom: 0;
    width: 50%;
    height: 40px;
	border: 1px solid #CCC;
	background: #FFF;
}
.loader-progress-bar {
	width: 0;
	height: 38px;
	background: #096;
}
.loader-progress-rate {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 38px;
	line-height: 38px;
	text-align: center;
}


@keyframes spin {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}
@-webkit-keyframes spin {
    0% {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin {
    0% {-moz-transform: rotate(0deg);}
    100% {-moz-transform: rotate(360deg);}
}
@-ms-keyframes spin {
    0% {-ms-transform: rotate(0deg);}
    100% {-ms-transform: rotate(360deg);}
}


.pager {position: relative; height: 50px; margin-bottom: 10px; line-height: 50px; text-align: center; background: #FFF; border-bottom: 1px solid #CCC;}
.pager-prev,
.pager-next {position: absolute; top: 10px; width: 100px; height: 30px; padding: 6px 0; text-align: center; text-decoration: none; border: 1px solid #CCC;}
.pager-prev::before,
.pager-next::before {font-size: 16px; color: #04A;}
.pager-prev {left: 10px;}
.pager-next {right: 10px;}

.pager-fixed {position: fixed; left: 0; bottom: 0; width: 100%; margin-bottom: 0; border-top: 1px solid #04A;}

/*
 *	control
 *
 *------------------------------------*/

input[type=text],input[type=number],input[type=email],input[type=password] {width: 100%; height: 30px; padding: 5px; border-radius: 5px; box-sizing:border-box; border: 1px solid #888;}
input[type="number"] {text-align: right;}
input[disabled] {background: #CCC;}

select {width: 100%; height: 30px; padding: 5px; border-radius: 5px; box-sizing:border-box; border: 1px solid #888;}
textarea {width: 100%; min-height: 50px; padding: 5px; border-radius: 5px; box-sizing:border-box; border: 1px solid #888}
label {display: inline-block; padding: 2px 5px;}

.table-single {margin-bottom: 20px;}
.table-single th,
.table-single td {padding: 5px 10px; line-height: 30px;}
.table-single th {text-align: left; vertical-align: top; color: #025;}

.table-list {border-top: 1px solid #025;}
.table-list thead th, 
.table-list thead td {border-bottom: 1px solid #025;}
.table-list tbody th, 
.table-list tbody td {border-bottom: 1px solid #888;}
.table-list th, 
.table-list td {padding: 10px;}
.table-list th:first-child, 
.table-list td:first-child {padding-left: 20px;}
.table-list th:last-child, 
.table-list td:last-child {padding-right: 20px;}

.table-bulk {}
.table-bulk thead th, 
.table-bulk thead td {text-align: left; color: #025; border-bottom: 1px solid #025;}
.table-bulk tbody th, 
.table-bulk tbody td {vertical-align: top; border-bottom: 1px solid #888;}
.table-bulk th, 
.table-bulk td {padding: 10px;}

.product-list {width: 100%; margin-bottom: 20px;}
.product-list thead th, 
.product-list thead td {border-bottom: 1px solid #025; color: #04A;}
.product-list tbody th, 
.product-list tbody td {border-bottom: 1px solid #888;}
.product-list th, 
.product-list td {padding: 10px 5px; vertical-align: middle;}
.product-list tbody th {text-align: left;}
.product-list td p {margin-bottom: 10px;}

.table-sammary {margin-bottom: 20px;}
.table-sammary th,
.table-sammary td {padding: 5px 10px; text-align: left; vertical-align: top;}
.table-sammary th {color: #04A;}

.plain-text {font-size: 16px; line-height: 1.8;}
.plain-text p {margin-bottom: 2em;}
.plain-text table {margin-bottom: 2em;}
.plain-text th,
.plain-text td {padding: 10px; vertical-align: top; border: 1px solid #CCC;}
.plain-text th {text-align: left;}
.plain-text .info {padding: 15px 20px; border: 2px solid #CCC;}
.plain-text a {color: #F00;}

.photo-list::after {content: ""; display: block; clear: both;}
.photo-list li {float: left;}
.photo-list-small li {width: 200px; height: 270px; margin: 5px;}
.photo-list .photo-list-name {max-height: 30px; overflow: hidden; margin-bottom: 10px; text-align: center; line-height: 15px; word-break: break-all;}
.photo-list .photo-list-image {background: #EEE; background-position: 50% 50%; background-size: contain; background-repeat: no-repeat;}
.photo-list-small .photo-list-image {width: 200px; height: 200px;}
.photo-list-small .photo-list-image-processing {line-height: 200px; text-align: center;}
.photo-list .photo-list-downloadable span {display: block; padding: 5px 10px; font-size: 12px; background: #EEEEEE; }
.photo-list .photo-list-downloadable .downloadable-1 {background: #FFDDEE;}
.photo-list .photo-list-downloadable .downloadable-2 {background: #DDEEFF;}

.box-highlight {background: #DDEEFF; margin-bottom: 10px; padding: 20px;}