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

/* ====================汎用==================== */
body {
	font-family: 'メイリオ', Meiryo,'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','Helvetica','Arial',sans-serif !important;
}

#wrapper {
	margin:0 auto;
	padding:0;
}
#wrapper p{
	margin:0 5px;
}
#wrapper img {
	width:100%;
	margin:0 auto;
	padding:0;
	vertical-align:bottom;
	display:block;
}
hr {
	border-top: 1px dashed #ccc;
	border-bottom:1px #FFF
}


/* cart-area */
table.check-area {
	width:100%;
	border-collapse: collapse;
	border: solid 2px #ccc;/*表全体を線で囲う*/
}
table.check-area th {
	background-color:#FFC;
}
table.check-area th, table.check-area td {
	border: dashed 1px #ccc;/**/
}
table.check-area td , table.check-area th {
	text-align:center;
	padding:10px 0 10px 0;
}
table.check-area td img {
	max-width:40px;
	display:block;
	margin:0 auto;
}
td.button {
	padding:0 !important;
}
/*.price {
	display:block;
	font-weight:bold;
	color:red;
}*/

/*チェックボックス*/
input[type=checkbox] {
  display: none;
}
.check_css {
  -webkit-transition: background-color 0.2s linear;
  transition: background-color 0.2s linear;
  position: relative;
  display: inline-block;
  padding: 0 0 0 42px;
  vertical-align: middle;
  cursor: pointer;
  text-align: left;
  right: 10px;
}
.check_css:hover{
  color: red;
}
.check_css:hover:after {
  border-color: red;
}
.check_css:after {
  -webkit-transition: border-color 0.2s linear;
  transition: border-color 0.2s linear;
  position: absolute;
  top: 50%;
  left: 15px;
  display: block;
  margin-top: -10px;
  width: 16px;
  height: 16px;
  border: 2px solid #ccc;
  border-radius: 6px;
  content: '';
}
.check_css:before {
  -webkit-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
  position: absolute;
  top: 50%;
  left: 21px;
  display: block;
  margin-top: -7px;
  width: 5px;
  height: 9px;
  border-right: 3px solid red;
  border-bottom: 3px solid red;
  content: '';
  opacity: 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
input[type=checkbox]:checked + .check_css:before {
  opacity: 1;
}

/*他*/
.shasen {
	max-width:316px;
}
.cp-number {
	max-width:600px;
}
.new {
	color:#0091db;
	border:solid 2px #0091db;
	border-radius:5px;
	}
.discount span{
	color:#FFF;
	font-weight:bold;
	background-color:red;
	border-radius:5px;
	margin:5px;
	padding:5px 10px;
	display:inline-block;
}

/* ====================CP終了時用==================== */

#cp-end {
	width:100%; /* ベースサイズ */
	font-size:16px;
	background:#fff;
	text-align:center;
	margin:0 auto;
}

#cp-end div {
	margin:20px;
}

#cp-end p {
	font-size:13px;
}

#cp-end p.logomoji {
	margin:10px;
}

#cp-end span {
	font-size:16px;
	font-weight:bold;
}


/* ====================媒体別表示==================== */

@media screen and (min-width: 750px) {
/* PC */
#wrapper {
	width:950px; /* ベースサイズ */
}
th.price-area {
	width:25%;
}
.price {
	font-size:24px;
}
.sp {
	display:none;
}
}

 @media screen and (max-width: 750px) {
/* タブレット、スマートフォン用 非Retina対応スタイル記述 */

#wrapper {
	width:100%;
	font-size:90%;
}
th.price-area {
	width:30%;
}
table {
	font-size:90%;
}
.price {
	font-size:18px;
}
.pc {
	display:none;
}
.sp {
	max-width:350px;
}
}