/* ======================================================================
CSS information
file name  :  common.css
style info :  CP
admin info :  日本ドライスキン研究所
====================================================================== */

/* ====================汎用==================== */
#body {
font-family: 'メイリオ', Meiryo,'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','Helvetica','Arial',sans-serif !important;
font-size: 0;
}
#wrapper {
margin:0 auto;
padding:0;
font-size: 16px;
}
#wrapper img , .cart-btn input{
max-width: 100%;
width: auto;
margin:0 auto;
padding:0;
vertical-align:bottom;
}
#wrapper p{
line-height: 1.2;
}

#item {text-align: center; margin: 0 auto; width: 95%;}
#item img {
box-sizing: border-box;
border: 2px solid #fff;
padding: 3px;
margin: 5px auto;
}

/*===== cart-area =====*/
.soryo {
padding: 10px;
margin: 10px auto;
background: #931518;
border-radius: 50px;
border: 2px solid #fff;
}
.tbl { margin: 0 auto; }
.tbl tr { background: #fff; display: inline-block; margin-bottom: 10px; width: 100%;}
.tbl th , .tbl td {display: inline-block;}
.tbl th { padding: 10px 0;}
.tbl select{
margin: 3px;
padding: 10px;
font-size: 20px;
display: block;
appearance: auto;
background: #fff;
border: 1px solid #ccc;
border-radius: 5px;
}
@media screen and (min-width: 740px){
.tbl th {border-right: 1px solid #ccc;}
.tbl td:first-of-type {width: 17%}
}
@media screen and (max-width: 739px) {
  .soryo {width: 80%;}
  .tbl {width: 90%;}
  .tbl th {
    display: block;
	border-bottom: 1px dashed #ccc;
  }
  .tbl td {
    display: inline-block;
	margin: 10px 0;
  }
}


/*===== ページトップへ戻るボタン =====*/
#pagetop {
    position: fixed;
    bottom: 15px;
    right: 10px;
}
#pagetop a {
  display: block;
  background: #0091db;
  color: #fff;
  width: 45px;
  padding: 3px 10px;
  text-align: center;
	border-radius: 50%;
	font-size: 20px;
  text-decoration-line: none;
}
#pagetop a:hover {
    background: #00afe7;
}

/*===== レスポンシブ汎用 =====*/
@media screen and (min-width: 740px){
.max_pc {width: 740px; margin: 0 auto; text-align: center;}
.pc_hide {display: none;}
}
@media screen and (max-width: 739px){
#wrapper {width: 100%; margin: 0 auto; text-align: center; font-size: 0.9rem;}
.sp_hide {display: none;}
p {padding: 0 20px!important;}
}