@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;}

.w50 {width: 50px !important;}
.w100 {width: 100px !important;}
.w150 {width: 150px !important;}
.w200 {width: 200px !important;}
.w250 {width: 250px !important;}
.w300 {width: 300px !important;}
.w400 {width: 400px !important;}
.w500 {width: 500px !important;}
.w600 {width: 600px !important;}
.w10p {width: 10% !important;}
.w15p {width: 15% !important;}
.w20p {width: 20% !important;}
.w25p {width: 25% !important;}
.w30p {width: 30% !important;}
.w35p {width: 35% !important;}
.w40p {width: 40% !important;}
.w45p {width: 45% !important;}
.w50p {width: 50% !important;}
.w60p {width: 60% !important;}
.w70p {width: 70% !important;}
.w80p {width: 70% !important;}
.w100p {width: 100% !important;}

.h50 {height: 50px !important;}
.h100 {height: 100px !important;}
.h150 {height: 150px !important;}
.h200 {height: 200px !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;}

.t1 {position: relative; top: -1px;}

.canter {
	margin-left: auto;
	margin-right: auto;
}

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

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


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

body {color: #312;}

header {position:fixed; left:0; top:0; width:100%; z-index:100; border-bottom: 1px solid #FAC; background: linear-gradient(#FFF, #EEE);}
header::after {content:""; display: block; clear: both;}
header h1 {float: left; width: 38%; height: 40px; padding: 4px 0; text-align: center; line-height: 20px; font-size:20px;}
header h1 img {height:32px;}
header .primary-nav {float: right; width: 60%;}
header .primary-nav ul {border-left: 1px solid #EEE; border-right: 1px solid #FFF;}
header .primary-nav li {float: left; width: 25%; border-left: 1px solid #FFF; border-right: 1px solid #EEE;}
header .primary-nav li a {display: block; height:40px; padding: 10px; text-align: center; line-height: 20px; font-size: 20px; text-decoration: none;}

footer {margin-top:30px; height: 30px;}
.container {min-height:250px; padding:40px 0 10px; background:#FFF8FB}
.container p {margin-bottom: 10px;}
.container p:last-child {margin-bottom: 0;}
.no-header + .container {padding: 0; background:none; min-height: auto;}

.inner {padding: 10px;}
.inner .full {margin-left: -10px; margin-right: -10px;}

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

.fixed {position:fixed; top:40px; bottom:30px;}
.fixed-left {left:0; border-right: 1px solid #333;}
.fixed-right {right:0; border-left: 1px solid #333;}

.hidden {display:none;}
.template {display:none;}

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

.page-title {
	position: relative;
	height: 40px;
	margin: -10px -10px 10px;
	padding: 10px;
	font-size: 18px;
	line-height: 20px;
	background: #FFF;
	border-bottom: 1px solid #111;        
}

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

.section-title {
	margin: 30px 0 10px;
	padding: 5px 10px;
	font-size: 16px;
	background: #FFF;
	border: 1px solid #DDD;
	border-bottom: 2px solid #FAC;
}

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

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

a {
    color: #111;
}

.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: #F6A;
    border-bottom: 2px solid #F49;
}
.btn.btn-proceed {
	color: #FFF;
	background: #FA6;
    border-bottom: 2px solid #F94;
}
.btn.btn-plain {
	color: #000;
	background: #CCC;
	border-bottom: 2px solid #AAA;
}
.btn.btn-primary:hover {
    border-bottom: 2px solid #F6A;
}
.btn.btn-proceed:hover {
    border-bottom: 2px solid #FA6;
}
.btn.btn-plain:hover {
    border-bottom: 2px solid #CCC;
}

.btn-icon {
	width: 30px;
	height: 30px;
	padding: 0;
	border: 1px solid #DDD;
	text-align: center;
	line-height: 30px;
	background: #FFF;
	border-radius: 15px;
	overflow: hidden;
	font-size: 20px;
	color: #096;
}

/*
 *	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.3);
}
.loader {
    position: absolute;
    margin: auto;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 40px;
    height: 40px;
    border: 5px solid #FAC;
    border-top: 5px solid #FCD;
    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;
}
@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);}
}

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

input[type=text],input[type=number],input[type=email],input[type=password] {width:100%; height: 30px; padding: 5px; border-radius: 5px; background:#FFF; border:1px solid #888; font-size: 16px;}
select {width:100%; height: 30px; padding: 5px; border-radius: 5px; background:#FFF; border:1px solid #888; font-size: 16px;}
input[type=text]:disabled {background: #EEE; color: #666;}
select {height: 30px; padding: 3px; border-radius: 5px;}
textarea {width:100%; height:8em; padding: 5px; border-radius: 5px; background:#FFF; border:1px solid #888; font-size: 16px;}
label {display: inline-block; padding: 2px 5px;}

input[type=text].input-error,
input[type=number].input-error,
input[type=email].input-error,
input[type=password].input-error,
textarea.input-error,
select.input-error {border: 1px solid #C00; background:#FED;}
.sys-input-radio.input-error {padding: 5px 3px 3px 5px; border: 1px solid #C00; background:#FED; border-radius:3px;}

.control-select select {width: 100%;}
.control-modal input {width: 80%; margin-right: 3%;}
.control-modal button {width: 15%;}
.control-inline input {width: 100%;}
.control-datepicker input {width: 100%;}
.control-list input {width: 80%; margin-right: 3%;}
.control-list button {width: 15%;}
.control-plain input:only-child {width: 100%;}

.select2-container {width: 100% !important;}

.control-inline {position: relative;}
.control-inline .select-list {display: none; position: absolute; top: 100%; left: 0; z-index: 999; width: 90%; border: 1px solid #DDD; background: #EEE;}
.control-inline .select-list li {margin: 5px; padding: 5px 10px; background: #F8F8F8; border-radius: 5px;}
.control-inline .select-list li:first-child {border-top: none;}
.control-inline .select-list li.active {background: #AEA;}

.control-list .control-list-input {margin-bottom: 5px;}
.control-list .control-list-add .control-list-input {display: none;}

i.required {margin-left:0.5em; color:#F00;}
i.required::before {content: "*";}

.control-radio-designed label {position:relative; overflow:hidden; margin-bottom: 3px; background:#FFF; border:1px solid #AAA; border-radius:5px;}
.control-radio-designed label input {position:absolute; left:-1000px;}
.control-radio-designed-fat label {padding:5px 15px;}
.control-radio-designed-fat label.checked {border-color:#096; color:#096; background:#DFE;}
.control-radio-designed-fat label.disabled {background: #CCC;}

.modal-wrap {display: none; position:fixed; left: 0; top: 0; z-index: 9990; width: 100%; height: 100%; padding-top: 50px; background:rgba(0, 0, 0, 0.5);}
.modal-inner {position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 9998; width: calc(100% - 30px); height: 280px; margin: auto; padding: 20px; background: #FFF;}
.modal-close-layer {position: absolute; left: 0; top: 0; z-index: 9997; width: 100%; height: 100%; background:rgba(0, 0, 0, 0.1);}
.modal-close-button {position: absolute; right: -10px; top: -10px; z-index: 9999; width: 30px; height: 30px; line-height: 28px; text-align: center; background: #FFF; border: 1px solid #EEE; border-radius: 15px; color: #AAA; cursor: pointer;}
.modal-close-button::before {content: "\f00d"; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased;}
.modal-view {width: 100%; height: 100%; overflow: scroll;}

.custom-multiple-select {position: relative;}
.custom-multiple-select::after {content: ""; display: block; clear: both;}
.custom-multiple-select-wrap-selected {float: left; width: 40%; height: 240px; overflow:scroll; border: 1px solid #888; background: #FFF;}
.custom-multiple-select-wrap-control {float: left; width: 20%; height: 240px; text-align: center;}
.custom-multiple-select-wrap-unselected {float: left; width: 40%; height: 170px; overflow:scroll; border: 1px solid #BBB; background: #FFF;}
.custom-multiple-select-filter {position: absolute; right: 0; bottom: 0; width: 40%; height: 65px;}
.custom-multiple-select-filter input,
.custom-multiple-select-filter select {border: 1px solid #CCC;}
.custom-multiple-select-filter select {margin-top: 5px;}
.custom-multiple-select-item {padding: 5px 10px; border: 1px solid #EEE;}
.custom-multiple-select-item-hidden {display: none;}
.custom-multiple-select-item-filtered {display: none;}
.custom-multiple-select-item-handled {background: #096; color: #FFF;}
.custom-multiple-select-wrap-control button {margin: 10px 0;}
.custom-multiple-select-item input {display: none;}

.custom-multiple-select-inline {position: relative;}
.custom-multiple-select-inline-selected {min-height: 40px; margin-bottom: 10px; padding: 5px 5px 0; border: 1px solid #888; background: #FFF;}
.custom-multiple-select-inline-item {display: inline-block; height: 30px; margin-right: 3px; margin-bottom: 5px; padding: 5px 5px 5px 10px; line-height: 20px; border-color:#096; color:#096; background:#DFE; border-radius: 5px;}
.custom-multiple-select-inline-item button {width: 20px; height: 20px; margin-left: 10px; padding: 0; text-align: center; line-height: 20px; border: none; background: #EEE; color: #888; border-radius: 10px;}
.custom-multiple-select-inline-item button:hover {background: #DDD;}
.custom-multiple-select-inline-control {position: relative; height: 40px;}
.custom-multiple-select-inline-control input {height: 40px;}
.custom-multiple-select-inline-list {display: none; position: absolute; top: 40px; width: 100%; background: #FFF; border-left: 1px solid #EEE; border-right: 1px solid #EEE; border-bottom: 1px solid #EEE;}
.custom-multiple-select-inline-list-selected {display: none;}
.custom-multiple-select-inline-list-unselected {display: none; padding:5px 10px; border-top: 1px solid #EEE;}
.custom-multiple-select-inline-list-unselected:hover {background: #096; color: #FFF;}

/*
 *	TABLE / list
 *
 *------------------------------------*/

.tabs {margin: 10px; border: 1px solid #CCC; border-radius: 10px; overflow: hidden;}
.tabs a {float:left; display: block; padding: 5px; text-align: center; background: #FFF; color: #666; border-right: 1px solid #CCC; text-decoration: none;}
.tabs a:last-child {border: none;}
.tabs a.active {background: #FAC; color: #FFF;}
.tabs-2 a {width: 50%;}
.tabs-3 a {width: 33.33%;}

.tab-panels .panel {display: none;}
.tab-panels .panel.active {display: block;}

.page-title + .tabs {margin-top: -10px;}

.pager {position: relative; height: 50px; line-height: 50px; text-align: center; background: #FFF; border-bottom: 1px solid #EEE;}
.pager-prev,
.pager-next {position: absolute; top: 10px; width: 30px; 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: #FAC;}
.pager-prev.disabled::before,
.pager-next.disabled::before {color: #CCC;}
.pager-prev {left: 10px;}
.pager-next {right: 10px;}
.pager.pager-compact {height: 35px; line-height: 35px;}

.list-thumbnail {}
.list-thumbnail::after {content: ""; display: block; clear: both;}
.list-thumbnail li {float: left; width: 33.3vw; height: 33.3vw; border: 2px solid #EEE;}
.list-thumbnail .image-tag {position: absolute; left:0; bottom:0; width: 100%; height: 14px; z-index: 4; padding: 1px 3px; line-height: 12px; background:rgba(255,102,170,0.4); color: #FFF; font-size: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.list-thumbnail .image-tag-2 {position: absolute; left:0; top:0; width: 100%; height: 14px; z-index: 4; padding: 1px 3px; line-height: 12px; background:rgba(0,0,0,0.4); color: #FFF; font-size: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}

.inner .list-thumbnail li {width: calc(33.3vw - 6.67px); height: calc(33.3vw - 6.67px);}

.image-container {position: relative; width: 100%; height: 100%;}
.image-container .image-name {position: absolute; width: 100%; bottom:0; z-index: 5; padding:5px; background: rgba(255,255,255,0.6); text-align: center; color: #666;}
.image-container .image-watermark {position: absolute; width: 100%; height: 100%; z-index: 3; background-image: url(../img/watermark.png); background-size: contain; background-position: center center; background-repeat: no-repeat;}
.image-container .image-holder {position: absolute; width: 100%; height: 100%; z-index: 2;}
.image-container .image-loader {position: absolute; width: 100%; height: 100%; z-index: 1;}
.image-holder-cover {background-size: cover; background-position: center top;}
.image-holder-contain {background-size: contain; background-position: center center; background-repeat: no-repeat;}
.image-container .image-watermark.image-watermark-cover {background-size: cover; background-position: center center;}

.image-download {display: none;}
.view-list-download .image-download {display: block; position: absolute; left: 0; top: 0; z-index: 4; width: 100%; height: 100%; object-fit: cover;}
.image-full .image-download {display: block; position: absolute; left: 0; top: 0; z-index: 4; width: 100%; height: 100%; object-fit: contain;}
.download-notice {display: none;}
.view-list-download .download-notice {display: block; padding: 5px;}

.view-list-all .list-thumbnail li.list-thumbnail-favorite {border: 2px solid #FAC;}
.view-list-download .list-thumbnail .image-watermark {display: none;}

.list-select .image-check {position: absolute; right: 5%; top: 5%; z-index: 9; width:7vw; height:7vw; text-align: center; line-height: 7vw; font-size: 5vw; background: #888; border-radius: 50%; opacity: 0.7;}
.list-select .image-check::after {content: "\f096"; display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; color: #FFF; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
.list-select .checked .image-check {background: #F6A; font-size: 7vw;}
.list-select .checked .image-check::after {content: "\f00c"; display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; color: #FFF; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
.list-select .disabled {display: none;}

.image-full {width: 100vw; height: 100vw;}
.image-full .image-tag {position: absolute; left:0; top:100%; width: 100%; height: 20px; z-index: 4; padding: 3px 5px; line-height: 12px; background:#FAC; color: #FFF; font-size: 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}

.add-favorite,
.remove-favorite,
.btn-close-detail {position: relative; top: -2px; width: 150px; height: 30px; border-radius: 5px;}
.add-favorite {background: #FFDDEA; border: none; border-bottom: 1px solid #FAC;}
.add-favorite i {color: #FAC;}
.remove-favorite,
.btn-close-detail {background: #EEE; border: none; border-bottom: 1px solid #CCC;}
.remove-favorite i {color: #CCC;}

.download-all {padding: 10px; text-align: center;}
.download-all-button {display: inline-block; padding: 5px 10px; background: #FFDDEA; border: none; border-bottom: 1px solid #FAC; text-decoration: none; border-radius: 5px;}
.download-all-button i {color: #FAC;}

.view-error-alert {color: #F04;}

.shoots-list {}
.shoots-list li {margin-bottom: 10px; border: 1px solid #CCC; background: linear-gradient(#FFF, #FFF 70%, #EEE);}
.shoots-list li a,
.shoots-list li span {position: relative; display: block; padding: 10px; text-decoration: none;}
.shoots-list li a::after {content: "\f054"; position: absolute; right: 10px; top: 50%; margin-top: -7px; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; color: #FAC; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
.shoots-list li p:first-child {margin-bottom: 5px; font-weight: bold; font-size: 16px;}

.table-single {width: 100%; margin-bottom: 10px;}
.table-single th,
.table-single td {padding: 5px;}
.table-single th {text-align: left; vertical-align: middle;}

.order-list {margin: -10px -10px 10px; border-top: 1px solid #CCC;}
.order-list li {border-bottom: 1px solid #CCC; background: linear-gradient(#FFF, #FFF 70%, #EEE);}
.order-list li a {position: relative; display: block; padding: 10px 20px 10px 10px; text-decoration: none;}
.order-list li a::after {content:""; display: block; clear: both;}
.order-list li a::before {content: "\f054"; position: absolute; right: 10px; top: 50%; margin-top: -7px; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; color: #FAC; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
.order-list-image {float: left; width: 100px;}
.order-list-image img {width: 100px; height: auto;}
.order-list-name {float: right; width: calc(100% - 110px); color: #F6A; font-size: 15px;}
.order-list-price {float: right; width: calc(100% - 110px); font-size: 13px;}
.order-list-payment {float: right; width: calc(100% - 110px); font-size: 12px;}
.order-list-payment-0 {color: #F04;}
.order-list-selection {float: right; width: calc(100% - 110px); font-size: 12px;}
.order-list-selection-0 {color: #F04;}

.selection-list {margin: 10px 0;}

#view-order-select-list {display: none; position: fixed; left: 0; top: 0; height: 0; z-index: 1000; width: 100vw; height: 100vh; overflow: scroll; padding-bottom: 40px; background: #000;}
.order-select-list-footer {position: fixed; left: 0; bottom: 0; height: 0; z-index: 1001; width: 100vw; height: 40px; padding: 5px 0 5px 35px; line-height: 30px; text-align: center; border-top: 1px solid #FAC; background: linear-gradient(#FFF, #FFF 70%, #EEE);}
.order-select-list-footer .btn-cancel {position: absolute; left: 10px; top: 5px; height: 29px; padding: 0 10px; line-height: 28px; }
.order-select-list-footer .btn-done {position: absolute; right: 10px; top: 5px; height: 29px; padding: 0 10px; line-height: 28px; }
.order-select-list-footer .btn-toggle {position: absolute; left: 50px; top: 5px; height: 29px; padding: 0 10px; line-height: 28px; }
.order-select-list-footer .btn-toggle.checked {background: #FAC; border-bottom: 1px solid #F6A;}

#view-order-select-detail {display: none; position: fixed; left: 0; top: 0; height: 0; z-index: 1100; width: 100vw; height: 100vh; background: #000;}
.image-order-select-detail {position: absolute; top: 0; bottom: 0; margin: auto; background: #FFF8FB;}
.order-select-detail-footer {position: fixed; left: 0; bottom: 0; height: 0; z-index: 1001; width: 100vw; height: 40px; padding: 5px 0 5px 35px; line-height: 30px; text-align: center; border-top: 1px solid #FAC; background: linear-gradient(#FFF, #FFF 70%, #EEE);}
.order-select-detail-footer .btn-cancel {position: absolute; left: 10px; top: 5px; height: 29px; padding: 0 10px; line-height: 28px; }
.order-select-detail-footer .btn-check {position: absolute; right: 10px; top: 5px; height: 29px; padding: 0 10px; line-height: 28px; background: #888; color: #FFF; border: none; }
.order-select-detail-footer .btn-check.checked {background: #F6A;}

#view-product-detail {display: none; position: fixed; left: 0; top: 0; height: 0; z-index: 1100; width: 100vw; height: 100vh; padding: 10px; background: rgba(0,0,0,0.5); overflow: scroll; }
#view-product-detail .product-detail-inner {padding: 10px; background: #FFF;}
#view-product-detail .product-detail-title {margin-bottom: 10px; font-size: 18px; color: #F6A;}

.product-list {padding: 0 2vw;}
.product-list::after {content: ""; display: block; clear: both;}
.product-list li {float: left; width: 46vw; margin: 0 1vw 10px;}
.product-list li a {text-decoration: none;}
.product-list li .product-list-image {width: 46vw; height: 34.5vw; overflow: hidden; margin-bottom: 5px;}
.product-list li .product-list-image img {width: 100%;}
.product-list li .product-list-name {overflow: hidden; height: 15px; margin-bottom: 5px; line-height: 15px; color: #F6A; white-space: nowrap; text-overflow: ellipsis;}
.product-list li .product-list-price {height: 15px; line-height: 15px; text-align: right;}
.product-list li.product-list-more {float: none; clear: both; width: 100%; margin: 0; border-bottom: 1px solid #CCC; background: linear-gradient(#FFF, #FFF 70%, #EEE);}
.product-list li.product-list-more a {position: relative; display: block; padding: 10px 0; text-align: center;}
.product-list li.product-list-more a::after {content: "\f054"; position: absolute; right: 10px; top: 50%; margin-top: -7px; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; color: #FAC; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}

.product-detail-image {width: 100%; margin-bottom: 10px;}
.product-detail-image img {width: 100%;}
.product-detail-name {margin-bottom: 10px;}
.product-detail-price {margin-bottom: 10px;}
.product-variation-list {margin-bottom: 20px;}
.product-variation-list li {margin-bottom: 10px;}
.product-variation-list li::after {content: ""; display: block; clear: both;}
.product-variation-cart {float: right; margin-left: 10px; padding-top: 10px;}
.product-variation-title {margin-bottom: 5px; color: #F6A;}

a.plain {color: #F6A; text-decoration: none;}


.payment-title {margin-bottom: 10px; color: #F6A; font-size: 16px;}
.payment-image {margin-bottom: 10px;}
.payment-image img {width: 100%; height: auto;}
.payment-price {margin-bottom: 10px;}
.payment-price em {color: #F6A; font-size: 16px;}
.payment-error {margin-bottom: 20px; padding: 10px; border: 1px solid #F00; background: #FEE;}
.payment-error-title {margin-bottom: 10px; font-size: 16px; color: #F00;}
.payment-error-info {color: #A00;}
p #payjp_checkout_box input[type="button"] {padding: 10px 0; min-width: 200px; text-align: center; border-radius:5px; font-size:16px; font-weight: normal; color: #FFF; background: #F6A; border-top: none; border-left: none; border-right: none; border-bottom: 2px solid #F49;}

@media (min-width: 641px ) {
	.list-thumbnail li {width: 16.66vw; height: 16.66vw;}
	.inner .list-thumbnail li {width: calc(16.66vw - 3.34px); height: calc(16.66vw - 3.34px);}
	.image-full {width: calc(100vh - 200px); height: calc(100vh - 200px); margin: 0 auto;}
	.image-full.image-order-select-detail {width: calc(100vh - 40px); height: calc(100vh - 40px); left: 0; right: 0;}
	.list-select .image-check {position: absolute; right: 5%; top: 5%; z-index: 9; width:3vw; height:3vw; text-align: center; line-height: 3vw; font-size: 3vw; background: #888; border-radius: 50%; opacity: 0.7;}
	.product-list li {float: left; width: 22vw; margin: 0 1vw 2vw;}
	.product-list li .product-list-image {width: 22vw; height: 16.5vw;}
	.product-detail-image {width: 600px; margin-left: auto; margin-right: auto;}
	.product-detail-price {width: 600px; margin-left: auto; margin-right: auto;}
	.product-variation-list {width: 600px; margin-left: auto; margin-right: auto;}
}

.label-list label {display:block; margin-bottom: 5px; padding: 5px 10px; background: #FFF; border: 1px solid #EEE;}

.event-description {margin: 15px 0; padding: 10px 15px; border: 1px solid #EEE; background: #FFF;}
.event-description h4 {margin-top: 10px; color: #F6A; font-weight: bold; font-size: 110%;}
.event-description h4:first-child {margin-top: 0;}
.event-description em {font-weight: bold; font-style: normal; text-decoration: underline;}

.page-content {margin-bottom: 30px; line-height: 1.8;}
.page-content h1 {font-size: 18px;}
.page-content h2 {margin-top: 30px; font-size: 16px;}