@charset "utf-8";
/* CSS Document */

/*-----------------------------------------------
color
#F08300
#FDD000
-----------------------------------------------*/


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

#detail {
width:92%;
max-width:1200px;
margin:3em auto 0 auto;
}

#detail .number {
font-size:0.85em;
}
#detail h2 {
margin-top:0.5em;
}

#detail .comment {
margin-bottom:1.5em;
}

#detail .photo {
display:flex;
flex-flow:row wrap;
justify-content:center;
align-items:center;
align-content:stretch;
}
#detail .photo li {
margin:0.5em;
}
#detail .photo li.large {
width:calc(50% - 0.5em);
}
#detail .photo li.large:nth-child(odd) {
margin-left:0;
}
#detail .photo li.large:nth-child(even) {
margin-right:0;
}
#detail .photo li.small {
width:calc(25% - 0.75em);
}
#detail .photo li.small:nth-child(4n+3) {
margin-left:0;
}
#detail .photo li.small:nth-child(4n+6) {
margin-right:0;
}
#detail .photo img {
display:block;
width:100%;
}

#detail table {
width:100%;
margin-top:2em;
line-height:1.4;
}
#detail th {
width:10em;
padding:1em;
font-weight:bold;
vertical-align:middle;
background:#F0F0F0;
border:1px solid #CCC;
box-sizing:border-box;
}
#detail td {
width:calc(50% - 10em);
padding:1em;
vertical-align:middle;
border:1px solid #CCC;
box-sizing:border-box;
}
#detail td.col {
width:calc(100% - 10em);
}

#detail td.price {
color:#C20;
}
#detail td.price span {
font-size:1.5em;
}

#detail .error {
margin-top:4em;
text-align:center;
}


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

#detail .photo li.large {
width:100%;
}
#detail .photo li.small {
width:49%;
}

#detail th {
display:block;
width:100%;
padding:0.5em 1em;
text-align:left;
background:#F5F5F5;
border:none;
}
#detail td {
display:block;
width:100%;
padding:0.5em 1em 1em 1em;
border:none;
}
#detail td.col {
width:100%;
}



}