*, *::before, *::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    margin:0;
    padding:0;
    outline:none;
}


a {
    text-decoration:none;
    color:#000;
    transition:.35s;
}



/*あか { color: #BF2633; } { color: rgba(191, 38, 51, 1); }*/
/*あお { color: #1B208C; } { color: rgba(26, 32, 140, 1); }*/
/*みずいろ { color: #66BCF2; } { color: rgba(101, 188, 242, 1); }*/
/*みどり { color: #2BD968; } { color: rgba(43, 216, 104, 1); }*/
/*きいろ { color: #F2D857; } { color: rgba(242, 216, 87, 1); }*/



select,
input {
    height:24px;
    border:1px solid #555;
    text-align:center;
    margin:0 2px;
    padding:2px;
}

input[type=submit],
input[type=button],
input[type=image] {
    padding:0 20px;
    border-radius:3px;
    background:#333;
    color:#fff;
    text-align:center !important;
}

input[type=submit]:hover,
input[type=button]:hover {
    background:#000;
}

.baseBtn {
    padding:0;
    font-size:14px;
    text-align:center;
    line-height:50px;
    display:block;
    border-radius:25px;
    background:#333;
    max-width:400px;
    width:98%;
    color:#fff;
    height:50px;
	cursor:pointer;
}

.baseBtn:hover {
    background:#000;
    color:#fff;
}

.disabledBtn {
    padding:0;
    font-size:14px;
    text-align:center;
    line-height:50px;
    display:block;
    border-radius:25px;
    background:#999 !important;
    max-width:400px;
    width:98%;
	border:1px solid #999;
    color:#ccc !important;
    height:50px;
	cursor:default;
}

.disabledBtn:hover {
    background:#999 !important;
    color:#ccc !important;
}


div.order div.box h3,
div.account div.box h3{
    width:auto;
    display:inline-block;
    background:#fff;
    padding:0 30px;
    line-height:40px;
    border-radius:20px;
}

/*フォーム*/

.box30 {
    width: 30px;
    text-align:center;
}
.box40 {
    width: 40px;
    text-align:center;
}

.box50 {
    width: 50px;
    text-align:center;
}

.box60 {
    width: 60px;
    text-align:center;
}

.box70 {
    width: 70px;
    text-align:center;
}

.box100 {
    width: 100px;
}
.box120 {
    width: 120px;
}
.box140 {
    width: 140px;
}
.box145 {
    width: 145px;
}
.box150 {
    width: 150px;
}
.box240 {
    width: 240px;
}
.box300 {
    width: 300px;
}
.box320 {
    width: 320px;
}
.box350 {
    width: 350px;
}
.box380 {
    width: 380px;
}

/*ここまで*/


body{
  color: #333;
  font-size: 12px;
  line-height: 1.5;
  font-family: 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
  z-index: 0;
  position: relative;
  width: 100%;
  height:100%;
    /*  -webkit-font-smoothing: antialiased;*/
}

.contents {
    width:100%;
    padding:0 20px  50px;
    margin:0 auto;
}

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

div.order,
div.account  {
max-width:1200px;
text-align:center;
margin:0 auto;
}

h2 {
    text-align:center;
    position:relative;
    margin-bottom:1em;
}

h2:before {
  content: '';
  position: absolute;
  bottom: -15px;
  display: inline-block;
  width: 50px;
  height: 5px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: black;
  border-radius: 2px;
}

h3 {
    text-align:center;
    margin:0 0 10px 0;
}

.attention {
padding-top:20px;
margin:0 auto -30px;
text-align:center;
color:#c00;
display:none;
}


/***** ヘッダー関係このへんから *****/

header,
div.adminHeader {
width:100%;
height:90px;
margin:0 0 30px 0;

}

header ul,
div.adminHeader ul{
list-style:none;
overflow:hidden;
width:100%;
height:60px;
text-align:right;
background:#333;
border-bottom:1px solid #000;
color:#fff;
box-shadow: 0 2px 5px rgba(200,200,200,1);
}

header ul li,
div.adminHeader ul li {
display:inline-block;
text-align:center;
color:#333;
width:auto;
margin:0;
letter-spacing:0.05em;
}

header ul li a,
div.adminHeader ul li a {
display:block;
line-height:60px;
padding:0 10px;
color:#fff;
}

header ul li a:hover,
 div.adminHeader ul li a:hover {
background:#e5e5e5;
color:#333;
}

header ul li.title,
 div.adminHeader ul li.title {
float:left;
border:none;
font-size:1.2em;
}

header ul li.title a:hover,
div.adminHeader ul li.title a:hover {
background:none;
color:#fff;
}

header ul li.title img{
	height:50px;
	margin:5px 0;
}


header ul li a.logout,
 div.adminHeader ul li a.logout {
background:#333;
color:#fff;
}

header ul li a.logout:hover,
 div.adminHeader ul li a.logout:hover {
background:#e5e5e5;
color:#333;
}

header ul li.lang {
	padding:15px 20px;
}

header div.loginName,
 div.adminHeader div.loginName {
line-height:30px;
text-align:left;
padding:0 10px;
font-weight:bold;
}

/***** ヘッダー関係このへんまで *****/


/***** ログイン関係このへんから *****/

.loginBox {
max-width:350px;
width:98%;
padding:20px;
border:1px solid #ccc;
background:#e5e5e5;
margin:0 auto;
list-style:none;
box-shadow: 0 2px 5px rgba(200,200,200,0.5);
}

.loginBox input[type=text],
.loginBox input[type=password] {
    text-align:left;
    width:calc(100% - 2px);
}

.loginBox dl{
overflow:hidden;
width:310px;
}

.loginBox dl dt,
.loginBox dl dd {
display:inline-block;
}

.loginBox dl dt {
width:125px;
margin-top:5px;
}

.loginBox dl dd {
width:185px;
margin-top:5px;
}

.loginBox .btn_area input[type=image] {
width:100%;
}

.btn_area {
    position:relative;
}


.loginBox p,
.loginTxt  {
    width:100%;
    padding:20px 0 0;
    text-align:center;
}



/***** ログイン関係このへんまで *****/

/***** メニュー関係このへんから（未使用） *****/

ul.menuBox {
    max-width:1080px;
    width:98%;
    padding:0 20px 0 0;
    margin:0 auto;
    overflow:hidden;
}

ul.menuBox li {
float:left;
margin:0 0 0 1%;
width:32%;
}

ul.menuBox li:first-of-type {
margin:0 1%;
}

ul.menuBox li a {
display:block;
text-align:left;
padding:0 0 0 50px;
border:1px solid #ccc;
line-height:50px;
background:#f5f5f5;
position:relative;
}

ul.menuBox li a:hover {
background:#e5e5e5;
}

ul.menuBox li a::before{
content:"";
display:block;
top:10px;
left:10px;
width:30px;
height:30px;
    background-repeat: no-repeat;
    background-size:contain;
    position:absolute;
}

ul.menuBox li a.addcus::before{
    background-image:url("<!--{$smarty.const.ROOT_URLPATH}-->user_data/packages/default/common/img/icon_account.svg");
    opacity:.8;
 }
 
 ul.menuBox li a.newlabel::before{
    background-image:url("<!--{$smarty.const.ROOT_URLPATH}-->user_data/packages/default/common/img/icon_noteAdd.svg");
    opacity:.8;
 }
 
 ul.menuBox li a.tmplabel::before{
    background-image:url("<!--{$smarty.const.ROOT_URLPATH}-->user_data/packages/default/common/img/icon_unarchive.svg");
    opacity:.8;
 }
    
/***** メニュー関係このへんまで（未使用） *****/
    

/***** オーダーフォーム関係このへんから *****/


div.box,
div.boxNoarw{
margin:50px 0 10px 0;
padding:30px;
background:#e5e5e5;
border-radius:3px;
position:relative;
width:100%;
}

div.box::after{
content:'';
position:absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #e5e5e5;
}

div.order div.box p {
margin:0 0 20px 0;
}

div.box+input[type=button],
div.boxNoarw+input[type=button],
div.box+font font input[type=button]{
	margin:50px auto 10px;
}

div.order div.infoBox{
margin:50px 0 0 0;
padding:10px 30px;
background:#eee;
border-radius:3px;
position:relative;
width:100%;
}

div.order div.infoBox + div.box,
div.order div.infoBox + div.boxNoarw {
margin-top:10px;
}


div.order input[type=file] {
border:none;
height:80px;
width:100%;
padding:30px 0 0 10px;
margin:0 auto;
}

input[name=project_name]{
	text-align:left;
}

label.orderListUploaderLabel{
    display:inline-block;
    margin:0 auto;
    padding:0;
    text-align:center;
    border:3px dashed #333;
    border-radius:3px;
}

div.order p.orderTxt {
    margin:40px 0 20px;
}

div.order dl.thanks {
max-width:480px;
width:100%;
margin:0 auto 20px;
background:#fff;
}

div.order dl.thanks dt,
div.order dl.thanks dd {
    line-height:50px;
    text-align:center;
}

div.order dl.thanks dt {
width:200px;
float:left;
border-right:1px solid #e5e5e5;
padding-left:10px;
}

div.order dl.thanks dd {
padding-left:220px;
width:100%;
border-bottom:1px solid #e5e5e5;
} 

div.order dl.thanks dd:last-of-type {
border-bottom:none;
} 


p.orderInfo,
p.orderResult {
    width:100%;
    text-align:left;
}

p.orderInfo {
    padding:0 0 10px 0;
    margin: 0 0 10px 0;
    border-bottom:1px dashed #ccc;
}

p.orderInfo:last-of-type {
    padding:0 0 0 0;
    margin: 0 0 0 0;
    border:none;
}

p.orderResult {
    margin: 0;
    border-radius:3px;
    line-height:30px;
}
 
p.orderResult span {
font-weight:bold;
color:#000;
font-size:24px;
display:inline-block;
padding:3px 10px;
}

p.orderResult span.onTplnum {
background:#fff;
}

p.orderResult span.offTplnum {
background:rgba(191, 38, 51, 0.2);
}

/***** オーダーフォーム関係このへんまで *****/


/***** アカウント情報このへんから *****/


div.account dl.account {
max-width:600px;
width:100%;
margin:0 auto 20px;
background:#fff;
}

div.account dl.account dt {
    line-height:24px;
    text-align:center;
    background:#efefef;
width:160px;
float:left;
border-right:1px solid #e5e5e5;
padding:10px;
}


div.account dl.account dd {
    text-align:left;
padding:10px 0 10px 180px;
width:100%;
border-bottom:1px solid #e5e5e5;
}


div.account dl.account dd:last-of-type {
border-bottom:none;
} 

div.account dl.account dd input {
text-align:left;
}

/***** アカウント情報このへんまで *****/


/***** テンプレ編集関係このへんから *****/

.editLabel {
max-width:1200px;
overflow:hidden;
margin: 20px auto;
}

.editLabel .leftBox {
float:left;
width:400px;
background:#f5f5f5;
overflow:hidden;
padding:20px 1% 30px;
}

.editLabel .leftBox #editItem {
    padding-bottom:10px;
}

.editLabel .leftBox #editItem span{
    font-weight:bold;
   }

.editLabel .rightBox {
float:left;
width:calc(100% - 400px);
height:100%;
min-height:100%;    
text-align:center;
padding:20px 1% 30px;
background:#fff;
}

.editLabel .rightBox img {
    max-width:400px;
    width:90%;
    margin:0 auto;
    border:1px solid #333;
}

.editLabel .leftBox a.btn,
.editLabel .rightBox a.btn {
    padding:0;
    font-size:14px;
    text-align:center;
    line-height:50px;
    display:block;
    border-radius:25px;
    background:#333;
    color:#fff;
    margin:30px 0 0 0;
}

.editLabel .rightBox a.btn{
    max-width:300px;
    width:98%;
    margin:0 auto 30px;
}

.editLabel .leftBox a.btn:hover,
.editLabel .rightBox a.btn:hover {
background:#000;
}

div.labelBox {
    margin: 0 1% 20px;
    width: 48%;
    float: left;
    height:200px;
    overflow:hidden;
}

ul.labelList {
    list-style-type: none;
    padding: 2px 25px 2px 2px;
    width: 100%;
    height: 165px;
    background-color: #eee;
    border: solid 1px #606060;
        overflow:scroll;
}



ul.labelList li {
    margin: 3px;
    padding: 5px;
    border:1px solid #ccc;
	border-radius:3px;
    background:#eee;
    z-index:10 !important;
}

ul.labelList li.active {
	background:#333;
	border-color:#333;
	color:#fff;
	font-weight:bold;
}

ul.labelList li > p{
	white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    width:100%;
}

ul.labelList li > p+span{
    display:none !important;
}

ul.labelList li:hover {
    cursor: pointer;
}

#unLabel li{
    opacity:0.5;
}

p.editTitle {
border:solid #555;
border-width:1px 0;
padding:10px 0;
}

p.editTxt,
p.editBox {
border-bottom:1px dotted #ccc;
padding:10px;
}

p.editTxt {
	max-height:5em;
	height:auto;
	overflow:scroll;
}


p.editPreBox,
p.editBox {
padding:10px;
clear:both;
}

p.editTitle,
p.editBox,
p.editPreBox {
background:#f5f5f5;
}

p.editTitle span {
    display:inline-block;
    vertical-align: top;
    line-height:24px;
    text-align:center;
    margin:0px 2px 0px 0px;
	font-size:12px;
}



p.editTitle input,
p.editBox span input[id^="bold"],
p.editBox span input[id^="italic"],
p.editBox span input[id^="tfat"],
p.editBox span input[id^="textAlign"]  {
    display:none;
}

p.editTitle label[for^="item_name"],
p.editTitle label[for^="item_bold"] {
    position:relative;
    display:inline-block;
    vertical-align: top;
    width:24px;
    height:24px;
    background-repeat: no-repeat;
    background-size:contain;
    margin:0 2px 0 0;
   }
 
  
p.editBox span label[for^="bold"],
p.editBox span label[for^="italic"],
p.editBox span label[for^="tfat"],
p.editBox span label[for^="textAlign"] {
    position:relative;
    display:inline-block;
    vertical-align: middle;
    width:24px;
    height:24px;
    background-repeat: no-repeat;
    background-size:contain;
    margin:0 0 0 0;
   }


p.editTitle label[for^="item_name"] {
    background-image:url("img/visible_off.svg");
    opacity:0.3;
}

p.editTitle input:checked + label[for^="item_name"] {
    background-image:url("img/visible.svg");
    opacity:1;
}

p.editTitle label[for^="item_bold"],
p.editBox span label[for^="bold"] {
    background-image:url("img/txtBold.svg");
    opacity:0.3;
}

p.editTitle input:checked + label[for^="item_bold"],
p.editBox span input:checked + label[for^="bold"] {
    background-image:url("img/txtBold.svg");
    opacity:1;
}

p.editBox span label[for^="italic"] {
    background-image:url("img/txtItalic.svg");
    opacity:0.3;
}

p.editBox span input:checked + label[for^="italic"] {
    background-image:url("img/txtItalic.svg");
    opacity:1;
}

p.editBox span label[for^="tfat"] {
    background-image:url("img/wrap_text.svg");
    opacity:1;
}

p.editBox span input:checked + label[for^="tfat"] {
    background-image:url("img/wrap_text.svg");
    opacity:0.3;
}

p.editBox span label[for^="textAlignL"] {
    background-image:url("img/txtAlignLeft.svg");
    opacity:0.3;
}

p.editBox span input:checked + label[for^="textAlignL"] {
    background-image:url("img/txtAlignLeft.svg");
    opacity:1;
}

p.editBox span label[for^="textAlignC"] {
    background-image:url("img/txtAlignCenter.svg");
    opacity:0.43;
}

p.editBox span input:checked + label[for^="textAlignC"] {
    background-image:url("img/txtAlignCenter.svg");
    opacity:1;
}

p.editBox span label[for^="textAlignR"] {
    background-image:url("img/txtAlignRight.svg");
    opacity:0.3;
}

p.editBox span input:checked + label[for^="textAlignR"] {
    background-image:url("img/txtAlignRight.svg");
    opacity:1;
}

p.editBox span {
    display:inline-block;
    margin:0 0px 10px 0;
    border-right:1px solid #ccc;
    padding:0 4px 0 0; 
    line-height:24px;
}

p.editPreBox span {
	display:block;
	margin-bottom:10px;
	border:none;
	line-height:24px;
}

p.editBox img {
    width:24px;
    height:24px;
    vertical-align: top;
}


p.editBox select[name^="font"] {
    width:200px;
}



/***** テンプレ編集関係このへんまで *****/

div.order dl.thanks {
max-width:480px;
width:100%;
margin:0 auto 20px;
background:#fff;
}

div.order dl.thanks dt,
div.order dl.thanks dd {
    line-height:50px;
    text-align:center;
}

div.order dl.thanks dt {
width:200px;
float:left;
border-right:1px solid #e5e5e5;
padding-left:10px;
}

div.order dl.thanks dd {
padding-left:220px;
width:100%;
border-bottom:1px solid #e5e5e5;
} 

div.order dl.thanks dd:last-of-type {
border-bottom:none;
} 



/**** インフォテーブル ****/
table.infoBox {
width:100%;
border-collapse:collapse
}


table.infoBox th,
table.infoBox td {
border:1px solid #555;
padding:5px;
text-align:left;
vertical-align:middle;
}

table.infoBox th {
background:#eee;
text-align:center;
min-width:100px;
}

table.infoBox td {
background:#fff;
}

/****オーダーリストテーブル****/

.ordercheckBtnList{
padding:0;
margin:0 0 20px;
text-align:left;
width:100%;
}


.ordercheckBtnList input[type=radio] {
display:none;
}

.ordercheckBtnList label {
display:inline-block;
background:#333;
color:#fff;
text-align:center;
padding:0 10px;
line-height:30px;
margin-right:10px;
border-radius:3px;
cursor:pointer;
}

.ordercheckBtnList label:hover {
background:#000;
}

.ordercheckBtnList input[type=radio]:checked + label {
background:#fff;
color:#333;
}

div.tableBox {
width:100%;
max-height:400px;
overflow:scroll;
border:1px solid #555;
}

div.tableBox_big {
width:100%;
max-height:600px;
overflow:scroll;
border:1px solid #555;
}


table.orderlist {
width:100%;
border-collapse:separate;
}

table.orderlist tr,
table.orderlist tr.onTpl {
background:#fff;
}

table.orderlist tr.offTpl {
background: rgba(191, 38, 51, 0.2);
}


table.orderlist tr:hover {
background:rgba(101, 188, 242, 0.2);
}

table.orderlist th,
table.orderlist td {
border:1px solid #555;
border-width:0 0px 1px 1px; 
padding:5px;
line-height:30px;
vertical-align:middle;
max-height:30px;
overflow:hidden;
text-align:left;
}

table.orderlist thead th {
background:#eee;
text-align:center;
white-space:nowrap;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
}

table.orderlist  th:first-child,
table.orderlist  td:first-child{
  border-width:0 0 1px 0;
}

table.orderlist thead th:last-of-type,
table.orderlist tbody td:last-of-type {
border-width:0 0 1px 1px;
}

table.orderlist tbody tr:last-of-type th,
table.orderlist tbody tr:last-of-type td {
border-width:0 0 0 1px;
}

table.orderlist tbody tr:last-of-type th:first-of-type,
table.orderlist tbody tr:last-of-type td:first-child{
border-width:0px;
}

table.orderlist tbody th,
table.orderlist td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width:200px;
    
}


table.orderlist th input[type=button] {
    padding:0 10px;
    border-radius:3px;
    background:#555;
    color:#fff;
}

table.orderlist th input[type=button]:hover {
    background:#000;
}

table.orderlist input.orderListEdit.finish {
    background:#fff;
	border-color:#555;
	color:#555;
}

table.orderlist input.orderListEdit.finish:hover {
    background:#000;
	color:#fff;
}


/* JQuery UI カスタマイズ */

.ui-accordion .ui-accordion-content {
    padding:0px !important;
}

.ui-icon {
	display:none !important;
}

.ui-corner-top {
	border-radius:3px !important;
}

/* モーダルCSS */
.openModal {
	cursor:pointer;
}

.modalArea {
  display: none;
  position: fixed;
  z-index: 50;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


.modalBg {
  width: 100%;
  height: 100%;
  background-color: rgba(30,30,30,0.5);
}

.modalWrapper .closeBtn {
	position:absolute;
	content:"";
	display:block;
	width:30px;
	height:30px;
	top:2px;
	right:2px;
	background:url("img/cancel.svg") 0 0 no-repeat;
	background-size:cover;
}

.modalWrapper .closeBtn:hover {
	cursor:pointer;
	opacity:0.8;
}


.modalWrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%,-50%);
  width: auto;
  max-width: 90%;
  height:90%;
  overflow:hidden;
  padding: 30px;
  background-color: #333;
  border-radius:10px;
}


.modalContents {
	overflow:auto;
	height:100%;
}

#preview img {
	display:block;
	margin:0 auto 20px;
	/*width:100%;*/
}

#preview img:last-of-type {
	margin-bottom:0;
}

#overlay{   
    position: fixed;
    top: 0;
    z-index: 100;
    width: 100%;
    height:100%;
    display: none;
    background: rgba(0,0,0,0.6);
}
.cv-spinner {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;  
}
.spinner {
    width: 40px;
    height: 40px;
    border: 4px #ddd solid;
    border-top: 4px #2e93e6 solid;
    border-radius: 50%;
    animation: sp-anime 0.8s infinite linear;
}
@keyframes sp-anime {
    100% { 
        transform: rotate(360deg); 
    }
}
.is-hide{
    display:none;
}


/*レスポンシブ
****************************************************************************************************************************************************************************************************************************************************/

@media screen and ( max-width:960px) {

}


@media screen and ( max-width:720px) {


}

@media screen and ( max-width:480px) {

}