:root {
    --contents-width:800px;
  --color-01: #5a92ef;
  --color-02: #f16d7f;
  --color-03: #2d2d2d;
  --color-04: #c5d8f8;
  --color-05: #f1ced3;
  --color-06: #5f5f5f;
  --cn-padding:1% 3%;
  --font-bold:600;
}
div{
    box-sizing: border-box;
}

/*---------------------------------------------------------
DETAIL
---------------------------------------------------------*/
#detailBox{
    width: 100%;
    max-width: var(--contents-width);
    background-color: #ffffff;
    margin: 50px auto;
    /*border-radius: 20px;*/
    padding: 50px 50px 50px;
}
#detailInner{
    /*display: flex;
    align-items:normal;
    justify-content: space-between;*/
    margin-bottom: 3%;
}
@media screen and (max-width : 767px ){
    #detailBox{
        width: 98%;
        margin: 20px auto;
        padding: 10% 3% 10%;
    }
    #detailInner{
        display: inherit;
    }
}
#detailTitle{
    font-size: 1.2em;
    /*color: var(--color-03);
    border-bottom-color: var(--color-03);*/
}
/*
左右入れ物
-----------------------------------------------*/
#detailLeft{
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row-reverse; 
    margin-bottom: 20px;/**/
}
#detailRight{
    width: 100%;
    margin: 0 auto;
}
@media screen and (max-width : 767px ){
    #detailLeft{
    display: inherit;
    margin-bottom: 3%;
}
#detailRight{
    width: 100%;
}
}

/*
左(上)
-----------------------------------------------*/
#detailLeft div:first-child{
    /*width: 60%;*/
    margin-left: 5%;
    text-align: center;
}
#detailLeft div:last-child{
    width: 40%;
    text-align: center;
}
#detailHeader img{
    width: 100%;
    max-width: 320px;
    height: auto;
}
@media screen and (max-width : 767px ){
    #detailLeft div:first-child{
    width: 100%;
    margin-left: 0;
}
#detailLeft div:last-child{
    width: 100%;
    text-align: center;
}
#detailHeader{
    margin-bottom: 5%;
}
#detailHeader img{
    max-width: 300px;
}

}
/*
サムネイルサイズ
-----------------------------------------------*/
#detailThumb img{
    width: 100%;
    height: auto;
}
#detailThumb img{
	object-fit: contain;
	width: 260px;
	height: 260px;
}


/*
右(下)
-----------------------------------------------*/
h2{
    font-size: 1.8em;
}
/*プリント番号とQRの幅*/
.detailInfo{
    width: 70%;
}
.qrCn{
    width: 25%;
}
@media screen and (max-width : 767px ){
    .detailInfo{
    width: 100%;
    }
.qrCn{
    width: 90%;
    margin: 5% auto;
    }
}
/*
GRID
-----------------------------------------------*/
.detailPrintNo{
    /*width: %;*/
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.detailPrintNo:first-child{
    margin-bottom: 5px;
    padding-bottom: 5px;
    /*border-bottom: 1px solid var(--color-04);*/
}
 /*.store02 .detailPrintNo:first-child{
   border-bottom: 1px solid var(--color-05);
}*/
/*
プリント番号の詳細パーツ
-----------------------------------------------*/
/*
store01
----------------------------*/
.store01{
    margin-bottom: 3%;
}
.contentDetail{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid var(--color-04);
    padding: var(--cn-padding);
}
.store01 h3,.store02 h3{
    padding: var(--cn-padding);
    background-color: var(--color-01);
    color: #ffffff;
    font-size: 0.9em;
}
.store01 .size,.store02 .size{
    /*width: 50%;*/
    color: var(--color-03);
    font-size: 1.2em;
}
.store01 .size p,.store02 .size p{
    color: var(--color-03);
    font-weight: var(--font-bold);
}
.store01 .number,.store02 .number{
    color: var(--color-01);
    width: 10%;
}
.store01 .number p,.store02 .number p{
    text-align: right;
    color: var(--color-01);
    font-weight: var(--font-bold);
}
.printNoTitle{
    /*width: 50%;*/
}
.store01 .printNoTitle p,.store02 .printNoTitle p{
    color: var(--color-03);
    font-weight: var(--font-bold);
}
@media screen and (max-width : 767px ){
    .contentDetail{
    display: inherit;
    }
    .store01 h3,.store02 h3{
        font-size: 0.8em;
        text-align: center;
        padding: 2%;
    }
}
/*
価格
----------------------------*/
.price p{
    text-align: right;
    font-weight: 500;
    color: var(--color-03);
    font-size: 1.4em;
}
.price p span{
    color: var(--color-03);
    /*font-weight: var(--font-bold);*/
    font-size: 14px;
    padding-left: 4px;
}
.price p span:first-child{
    padding-right: 5px;
}
/*
プリント番号
----------------------------*/
#printNo1L,#printNo2L,#printNo1LSej,#printNo2LSej{
    font-family: 'Inconsolata', monospace;
    color: var(--color-03);
    font-weight: var(--font-bold);
    font-size: 2.2em;
    font-weight: 500;
}

/*
size/number/price
printNoTitle/printNo
----------------------------*/
@media screen and (max-width : 767px ){
    .store01 .size,.store02 .size{
    width: 15%;
    }
    .store01 .number,.store02 .number{
    width: 15%;
    }
    .price{
    width: 60%;
    }
    .printNoTitle{
    width: 40%;
    }
    #printNo1L,#printNo2L,#printNo1LSej,#printNo2LSej{
    font-size: 2em;
    }
}
@media screen and (max-width : 360px ){
    #printNo1L,#printNo2L,#printNo1LSej,#printNo2LSej{
    font-size: 1.8em;
    }

}


/*
store02
----------------------------*/
.store02 .contentDetail{
    border: 1px solid var(--color-05);
}
.contentDetail:last-child{
    border-top: 0px;
}
.store02 h3{
    background-color: var(--color-02);
}
.store02 .size{
    color: var(--color-02);
}
/*.store02 .size p{
    color: var(--color-02);
}*/
.store02 .number{
    color: var(--color-02);
}
.store02 .number p{
    color: var(--color-02);
}
/*.store02 .printNoTitle p{
    color: var(--color-02);
}*/
/*
modoru
-----------------------------------------------*/
a.detailBack:link{
    width: 20%;
    display: block;
    color: var(--color-03)!important;
    text-decoration: none!important;
    /*border: 2px solid var(--color-03);*/
    padding: 10px;
    border-radius: 3px;
    margin: 0 auto;
   text-align: center/* */
}
a.detailBack:visited{
    color: var(--color-03)!important;
    text-decoration: none!important;
}
@media screen and (max-width : 767px ){
    a.detailBack:link{
    width: 80%;
    margin: 10% auto 5%;
}
}