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

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

#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
}

/* 動く系 */
.anim-img {
	position:relative;
}
.top-offer {
    animation:fadeInUp 1s;
	position: absolute;
    width: 100%;
	top:1.5em;
}


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

/*他*/
.shasen {
	max-width:316px;
}
.cp-number img {
	max-width:250px;
	display:inline !important;
	margin:0 10px !important;
}
.base-red {
	color:#fff;
	background-color:red;
	padding:0 5px;
}
.box-bl {
	color:#fff;
	background-color:#0091db;
	padding:2px 5px;
	display:inline-block;
	vertical-align:middle;
}
.box-gr {
	color:#39B44A;
	background-color:#fff;
	padding:0 10px;
	border: 4px double #39B44A;
}
.box-red {
	color:red;
	background-color:#fff;
	padding:0 10px;
	border: 4px double red;
}
.box-bl-line{
    padding: 0.5em 1em;
    margin: 10px 0;
	color:#0091db;
    background: whitesmoke;/*背景色*/
    border-left: double 7px #0091db;/*左線*/
    border-right: double 7px #0091db;/*右線*/
}
.box-gr-line{
    padding: 0.5em 1em;
    margin: 10px 0;
	color:#39B44A;
    background: whitesmoke;/*背景色*/
    border-left: double 7px #39B44A;/*左線*/
    border-right: double 7px #39B44A;/*右線*/
}
.box-red-line{
    padding: 0.5em 1em;
    margin: 10px 0;
	color:red;
    background: whitesmoke;/*背景色*/
    border-left: double 7px red;/*左線*/
    border-right: double 7px red;/*右線*/
}
.box-gr-line p , .box-bl-line p , .box-red-line p {
    margin: 0; 
    padding: 0;
}
.waku-red {
	display:inline-block;
	color:red;
	font-weight:bold;
	margin:2px 0 !important;
	border:solid 2px red;
	border-radius:5px;
	padding:0 10px;

}
.waku-red-s {
	display: inline-block;
	border:solid 1px red;
	padding:0 5px;
}

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

/* ====================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:800px; /* ベースサイズ */
}
th.price-area {
	width:40%;
}
.item-imgnbox img{
	max-width:40px !important;
}
.box-bl {
	margin-right:10px;
}
.price {
	font-size:24px;
}
.sp {
	display:none;
}
}

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

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