/* detail
-------------------------------*/

#detail {
    width: 100%;
}

#detail th,
#detail td {
    padding: 3px 10px;
    border: 1px solid #ccc;
}


/* hagaki
-------------------------------*/
#hagaki table {
    width: 100%
}

#hagaki table td,
#hagaki table th {
    padding: 10px 10px;
    border: 1px solid #ccc;
    vertical-align: top;
}


#hagaki #upload {
    margin-top: 10px;
    height: 100px;
    background: #ccc;
    width: 300px;
}

/* status
-----------------------------------*/

.status {
    margin: 0 0 20px;
    display: table;
    width: 100%;
}

.statusbox {
    display: table-cell;
    padding: 0 5px 0 0;
    /*    float:left; */
    text-align: left;
    text-indent:0;
}

.statusbox span.noeffect,
.statusbox span.comp,
.statusbox span.wait,
.statusbox span.current {
    padding: 0 0 0 10px;
    height: 35px;
    line-height: 35px;
    display: block;
    width: 90%;
    margin-bottom: 5px;
    font-size: 12px;
}

.statusbox span.noeffect {
    border-left: 5px solid #ebebec;
    background: #BBB url(../img/status.png) center right no-repeat;
    color: #FFF;
}

.statusbox span.comp {
    border-left: 5px solid #c9caca;
    background: #ffbf9f9 url(https://u.jimcdn.com/cms/o/s04404b2db2f6acab/userlayout/img/state.png?t=1558413059) center right no-repeat;
    border:1px solid #dcdddd;
    color: #dcdddd;
}

.statusbox span.wait {
    border-left: 5px solid #c9caca;
    background: #f1f1f1 url(https://u.jimcdn.com/cms/o/s04404b2db2f6acab/userlayout/img/state.png?t=1558413059) center right no-repeat;
    color: #222222;
}

.statusbox span.current {
    border-left: 5px solid #ea5550;
    background: #ee87b4 url(https://u.jimcdn.com/cms/o/s04404b2db2f6acab/userlayout/img/state.png?t=1558413059) center right no-repeat;
    color: #fff;
    font-weight: bold;
}

.statusbox span.date {
    margin: 0px 0px 3px;
    display: block;
    color: #333;
    font-size: 10px;
}

/* ############# 780以下 ############## */
@media screen and (max-width: 780px) {
    .statusbox .step {
        display: none;
    }
}


/* ############# 640以下 ############## */
@media screen and (max-width: 640px) {

    .statusbox span.noeffect,
    .statusbox span.comp,
    .statusbox span.wait,
    .statusbox span.current {
        border: none;
    }

}

/* ############# 480以下 ############## */
@media screen and (max-width: 480px) {

    .statusbox span.noeffect,
    .statusbox span.comp,
    .statusbox span.wait,
    .statusbox span.current,
    .statusbox div{
        padding: 0;
        margin: 0 0 5px;
        font-size: 11px;
        letter-spacing:normal;
    }

}


.chumon {
    display: table-cell;
    width: 50%;
    padding: 5px;
}

/* ########## 680以下 ############ */

@media screen and (max-width: 680px) {
    .chumon {
        display: block;
        width: 100%;
    }

}


/*.status{*/
/*margin:20px 0px 50px 0;*/
/*text-align: center;*/
/*}*/

/*.status span.wait{*/
/*padding:10px 10px 10px 7px;*/
/*margin-right:10px;*/
/*display: inline-block;*/
/*background:#eee url(../img/status.png) right no-repeat;*/
/*border-left:5px solid #ccc;*/
/*width: 110px;*/
/*color: #777777;*/
/*}*/

/*.status span.wait span.date{*/
/*padding:0;*/
/*margin:20px 0 0 0;*/
/*background:none;*/
/*border-left:none;*/
/*color:black;*/
/*}*/

/*.status span.comp{*/
/*padding:10px 10px 10px 7px;*/
/*margin-right:10px;*/
/*display: inline-block;*/
/*background:#039 url(../img/status.png) right no-repeat;*/
/*border-left:5px solid #006;*/
/*width: 110px;*/
/*color:#fff;*/
/*}*/

/*.status span.comp span.date{*/
/*padding:20px 0 0 0;*/
/*margin:20px 0 0 0;*/
/*background:none;*/
/*display: inline-block;*/
/*border-left:none;*/
/*color:black;*/
/*}*/

/*.status span.current{*/
/*padding:10px 10px 10px 7px;*/
/*margin-right:10px;*/
/*display: inline-block;*/
/*background: #33FFFF url(../img/status.png) right no-repeat;*/
/*border-left:5px solid #600;*/
/*width: 110px;*/
/*color:black;*/
/*}*/
/*.status span.current span.date{*/
/*padding:0;*/
/*margin:0;*/
/*background:none;*/
/*border-left:none;*/
/*}*/


.biko {
    /*border:2px solid #ccc;*/
    padding: 10px;
    color: #f00;
    font-size: 10pt;
}

/* contact
---------------------------*/

#contact table {
    width: 100%
}

#contact table th,
#contact table td {
    vertical-align: top;
}

#contact .body {
    display: none;
    padding: 10px;
    border: 1px solid #ccc;
}

#contact .form {
    padding: 0px 10px 10px;
    background: #fff;
    width: 560px;
    border: 1px solid #999;
    margin: 0px;
    margin-bottom: 20px;
    display: none;
}


#contact .form table {
}

#contact .form table th,
#contact .form table td {
    padding: 5px;
}

#contact .closebox {
    text-align: right;
}

#contact .closebox span {
    background: #666;
    color: #fff;
    padding: 0px 5px;
    margin-right: -10px;
}

#contact .newform {
    margin-bottom: 10px;
}

/* ------ append by msyk ------- */

.instruction {
    /*background-color: #a3231f;*/
    color: red;
    border: none;
    padding: 4px 20px 4px 20px;
}

.instruction .title {
    font-size: 150%;
}

table.orderinfo th.subitem {
    padding: 0 0 0 20px;
    margin: 0 0 0 0;
    font-weight: normal;
    height: 28px;
}

table.orderinfo td {
    padding: 0 10px 0 10px;;
    margin: 0;
}

/* デザイン入稿
-----------------------------------------*/

table#design_draft {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

table#design_draft th,
table#design_draft td {
    display: block;
}

table#seiky {
    width: auto;
    margin: 20px 0 20px auto;
}

/* クイック校正 2019-05-13 by Masayuki Nii */
div.qs-base-panel {
    display: none;
    position: fixed;
    background-color: rgba(77, 77, 77, 0.33);
    z-index: 12000;
}

div.qs-inside-panel {
    margin: 20px 20px;
    padding: 20px 20px;
    background-color: white;
    overflow: scroll;
}

div.qs-image-box {
    text-align: center;
    overflow: scroll;
}

.qs-buttons {
    margin: 10px;
}

.qs-inside-panel canvas {
    width: 60%;
    max-width: 80vw;
}

#qs-message {
    color: red;
}


/* 2019.10.3追加 */

/* header
---------------------------------------------*/
#header{
    width:80%;
    padding:5px 0 10px;
    margin:0;
    box-sizing:border-box;
    background:#FFF;
}

#header .inner{
    line-height:1.0;
}

body.cc-pagemode-default #header{
    z-index:1000000;
}

/* ########## 680px以上 ########## */
@media screen and (min-width:680px){

    #header{
        height:75px;
        /*position:fixed;*/
        top:0;
        left:0;
    }

#header .inner{
    display:flex;
}


#header #logo{
    flex:auto;
    display:inline-block;
    padding:0;
    margin:0;
}

#header #logo img{
    width:auto;
    height:auto;
    line-height:1.0;
    padding:0;
    margin:0;
    max-width:446px;
    width:55vw;
}

/* ########## 840px以下 ########## */
@media screen and (max-width:840px){
#header #logo img{
    width:calc(100vw - 400px);
}

}

#header #logo img a{
    padding:0;
    margin:0;
    display:inline-block;
}


#header #topright{
    flex:1;
}

#header #topright p{
    padding:0;
    margin:0;
}

#header #telno{
    line-height:1.0;
    padding:0;
    margin:0;
    display:table;
}

#header #telno div{
    display:table-cell;
    padding:0;
    margin:0;
}

#header #telno #telset{
    padding:0;
    margin:0;
    /*float:right;*/
}

#header #telno img{
    width:155px;
    height:auto;
    padding:0;
    margin:0;
}

#header #mypage{
    padding-left:10px;
}

#header #mypage img{
    width:auto;
    height:60px;
}

#header #tocontact{
    padding-left:10px !important;
}


#header #tocontact img{
    height:60px;
    width:auto;
}

#header #contact{
    display:none;
}
}

/* ########## 680px以下 ########## */
@media screen and (max-width:680px){

#header .inner{
    display:block;
}

#header #logo img{
    width:100%;
    max-width:100%;
}

#header #telno{
    display:none;
}

#header #telno img {
    display:none;
}

#telno #telset{
    display:none;
}


#header #contact{
    display:none;
    padding:10px 0 5px;
    margin:0;
}

#header #contact ul{
    padding:0;
    margin:0;
    display:flex;
    list-style:none;
}

#header #contact ul li{
     flex:1;
}

#header #contact ul li img{
    width:100%;
    height:auto;
}

#header #mypage{
    display:none;
}

}