@charset "UTF-8";
/* product.css */

.image-main{ display:block; background:#FFFFFF; padding-top:56%; position:relative;}
.image-main img{ display:block; position:absolute; margin:auto; padding:0; max-width:100%; max-height:100%; top:0; right:0; bottom:0; left:0;}
.image-sub{ margin-top:0;}
.image-sub li{ margin-top:10px;}
.image-sub li span{ background:#FFFFFF; display:block; padding-top:100%; position:relative;}
.image-sub li img{ display:block; margin:auto; padding:0; max-width:100%; max-height:100%; position:absolute; top:0; right:0; bottom:0; left:0;}

/*
.mc table{}

.mb table{ background:#FFFFFF; width:100% !important; border:solid 1px #dddddd; border-radius:5px; border-collapse:separate;}
.mb table th,.mb table td{ margin:0; padding:10px 10px; text-align:left; vertical-align:middle; font-weight:normal; border:solid 1px #dddddd; border-style:solid none none solid;}
.mb table th{ white-space:nowrap;}
.mb table th>*:nth-child(1),.mb table td>*:nth-child(1){ margin-top:0;}
.mb table thead *{ text-align:center;}
.mb table tr:nth-child(1) th,.mb table tr:nth-child(1) td{ border-top:none;}
.mb table tr:first-child th,.mb table tr:first-child td{ border-top:none;}
.mb table tr th:nth-child(1),.mb table tr td:nth-child(1){ border-left:none;}
.mb table tr th:first-child,.mb table tr td:first-child{ border-left:none;}



.mc .table-bordered{ border-top:solid 1px #CCCCCC;}
.table-bordered th,.table-bordered  td{ border:1px #CCCCCC; border-style:none none solid solid; padding:10px 10px;}
.table-bordered tr >*:first-child{ border-left:none;}
.table-th-center tbody th{ text-align:center;}
.table-vertical-middle th,.table-vertical-middle td{ vertical-align:middle;}
*/

.body .youtube-wrapper{ margin:0; padding:0; width:70%;}
.body .youtube{ margin:0; padding:0; position:relative; width:100%; padding-top: 56.25%;}
.body .youtube iframe{ margin:0; padding:0; position:absolute; top:0; left:0; width:100% !important; height:100% !important;}



@media screen and (max-width: 640px){
.body .youtube-wrapper{ width:100%;}
}

.sc-shop{ border:solid 1px #CCCCCC;}
.sc-shop .title{ margin:0; padding:10px 0 10px 10px; font-size:138.5%; border-left:solid 3px #CB2E5F; border-bottom:dotted 1px #CCCCCC;}
.sc-shop .body{ margin:0; padding:10px 20px 20px 20px;}
.sc-shop .qr{ margin:0; padding:0; text-align:center;}
.sc-shop p { margin-top:5px;}


.view_difficulty{ margin-top:5px;}
.view_difficulty span{ display:block; border:solid 1px #319CD5; padding:2px 10px; margin-left:2px; color:#319CD5; float:left;
  transform: skew(-20deg);
  -o-transform: skew(-20deg);
  -moz-transform: skew(-20deg);
  -webkit-transform: skew(-20deg);
}
.view_difficulty .title{ background:#319CD5; color:#FFFFFF; border-radius:3px 0 0 3px;}
.view_difficulty span:last-child{ border-radius:0 3px 3px 0;}
.view_difficulty span.active{ background:#C1E1F3; font-weight:bold;}

.view_difficulty-green span{ border-color:#5D9B5F; color:#5D9B5F;}
.view_difficulty-green .title{ background:#5D9B5F;}
.view_difficulty-green span.active{ background-color:#BDE1C0;}

.ban-purchase{}
.ban-purchase li{ text-align:center; margin-top:10px;}
.ban-purchase li img{ display:block; margin:0 auto; padding:0;}

#shop_gooday{ display:none;}
#shop_gooday a{ cursor:pointer !important;}

.docsImage{ display:block; width:160px;  float:right; margin-left:20px;}
.docsImage span{ display:block; margin:0; padding:66.66% 0 0 0; position:relative; overflow:hidden;}
.docsImage img{ display:block; margin:auto; padding:0; position:absolute; max-width:100%; max-height:100%; top:0; right:0; bottom:0; left:0;}

@media print{

.sc{ display:block !important;} 
.mc{  width:770px; float:left;}
  
}