@charset "UTF-8";
/* --------------------------------
file name   : style.css
last update : 20180402
----------------------------------- */
#cp-all{border-top:5px solid #ce659c; overflow:hidden; width:100%;max-width:982px;background: #fff;}
#circle-P{box-sizing: border-box; border-width:0px 2px 2px 2px; border-style:solid;border-color:#fff}/*-ce659c-*/
.g-pnk{color:#ce659c}
#cp-all ul{list-style:none;}
/*--ヘッダー--*/
.cp-header{overflow:hidden; padding:5px; margin:0;box-sizing: border-box;}
.cp-header li{ float:left; width:50%}
.cp-header .logo{ max-height:34px; position:relative; top:8px;}
.cp-header .cp-icn{ width:100%;max-width: 64px;text-align: center; float: right; padding:0 1%;box-sizing: border-box}
.cp-header .cp-icn img{ display:block;  max-height:40px; margin:0 auto}
.cp-header .cp-icn span{ font-size:10px; line-height:14px}

/*--コンテンツ全体--*/
#cp-content{ padding:0 10px 10px 10px;box-sizing: border-box; overflow:hidden;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex}
/*--コンテンツ-Twitter--*/
.cp-tw{ overflow:hidden; width:100%; max-width:180px; float:left;margin:0 10px 0 0}
.cp-tw a{ display:block;}
.twtr-timeline{ height:auto!important;}

/*--コンテンツ-サークル情報--*/
.cp-info{ width:100%; max-width:768px;float:left; margin:0 auto;box-sizing: border-box; position:relative}
.cp-info h1{padding:0;margin:0;}
.cp-img-main{line-height:1;padding:0;position:relative;background:#000;}
.cp-img-main div.img{line-height:0;font-size:0;}
.cp-img-main div.img:after{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(transparent 55%, rgba(0,0,0,0.5) 100%);}
.cp-img-main img{display: block;margin: 0 auto;max-width:768px;}
/*--
.cp-img-main{width:100%; height:auto;position:relative}
.cp-img-main div{ padding:420px 0 0;background-size:cover;background-position:center}
.cp-img-main div:after{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(transparent 55%, rgba(0,0,0,0.5) 100%);}
--*/
.cp-circle-name{position: absolute;bottom: 8px;left: 0;width: 100%;padding:0 0 0 30px;box-sizing: border-box; font-size:24px!important; color:#fff;}
.cp-text{ margin:10px 0 0; overflow:hidden}
.cp-text .user{ margin:0; padding:0; font-size:14px; width:60%;float:left; padding:3px 0 0}
.cp-text .user:before{content: "by"; font-size:10px; color:#999}
.cp-text .tw-btn{ width:40%;float:right}
.cp-text .tw-btn div{ float:right}
.cp-text .favorite-icn{ background:#ff9900;position: relative;height: 20px;box-sizing: border-box;padding: 1px 8px 1px 6px;color: #fff;border-radius: 3px;font-weight: 500; margin:0 5px 0 0;}
.cp-text .favorite-icn:hover{ background:#ed7500;text-decoration: none!important;}
.cp-text .favorite-icn i{position: relative;top: 3px;display: inline-block;width: 14px;height: 14px;background: transparent 0 0 no-repeat;background: url(/img/favorite-icn.png);}
.cp-text .favorite-icn span{margin-left: 1px;white-space: nowrap;vertical-align:middle;zoom: 1;}
.cp-coment{ padding:20px;box-sizing: border-box; border-top:1px solid #CCC; margin:10px 0 0}
#coment{}
.cp-coment .opncls{ text-align:center; color:#8a8a8a!important; border-top:1px solid #ccc; padding:5px 0 0; margin:5px 0 0;}

/*-item--*/
#item-floor{ padding:14px 0; overflow:hidden}
.item-box{ width:31.33%; float:left; max-width:240px; margin:0 1% 4%; position:relative}
.item-box a:hover img{ transition:all 0.2s ease;opacity:0.5;-moz-opacity:0.5;filter:alpha(opacity = 50);}
.item-box a{text-decoration: none!important;}
.item-box a:hover .item-neme{text-decoration:underline}
.item-img{background:#ededed; margin:0 0 2px; width:240px; height:180px; position:relative;}
.item-img img{max-width:240px;max-height:180px; display:block; margin:auto; position:absolute;left:0;right:0;top:0;bottom:0;}
.item-img div{background:#ededed; display:block; width:100%}
.item-genre{ color:#8a8a8a!important; font-size:10px;text-decoration: none!important;}
.item-neme{font-weight:bold; height:32px; overflow:hidden;}
.item-text{ border-top:1px dashed #CCC;margin:5px 0 0; padding:5px 0 0 }
.item-text .price{color:#FF0000; font-size:18px; font-weight:bold; float:left}
.item-text .price:before{content: "価格:";font-size:10px; font-weight:normal}
.item-text .price:after{content: "円(税込)";font-size:12px;}
.item-text .list{ font-size:12px; color:#8a8a8a; text-align:right; position:relative; top:4px}
.item-text .list i{position: relative;top: 2px;display: inline-block;width: 12px;height: 12px;background: transparent 0 0 no-repeat;background: url(/img/list-icn.png);}
.item-text .list:before{content: "リスト登録者数:";font-size:10px; font-weight:normal}

/*-カート・リストbtn-*/
.item-cart{ margin:5px 0; height:40px;}
.item-cart a{ display:block; height:40px; text-align:center;box-sizing: border-box;border-radius: 3px;font-weight: 500;position:relative;}
.item-cart a span{ position:absolute;top:50%;display:block; margin:auto;-webkit-transform: translateY(-50%);-moz-transform: translateY(-50%);-o-transform: translateY(-50%);-ms-transform: translateY(-50%); display:block; width:100%;}

.item-cart .cart{ width:60%; padding:0 1%;box-sizing: border-box; float:left}
.item-cart .cart a{ background:#25c58e; color:#FFF;font-size:14px;border-bottom:4px solid #329e79;font-weight:700}
.item-cart .cart a:hover{ background:#53d0a5;border-bottom:2px solid #329e79; height:38px; position:relative; top:2px}
.item-cart .cart a span{left:50%;transform:translateY(-50%) translateX(-50%);-webkit-transform:translateY(-50%) translateX(-50%);-moz-transform transform:translateY(-50%) translateX(-50%); display:block; margin:-2px 0 0}
.item-cart .cart i{position: relative;top: 3px;display: inline-block;width: 20px;height: 20px;background: transparent 0 0 no-repeat;background: url(/img/icn-cart02.png);}
.item-cart .cart-in{ width:60%; padding:0 1%;box-sizing: border-box; float:left}
.item-cart .cart-in a{ color:#1e8864;font-size:14px; background:#a5ebd3;border-bottom:1px solid #329e79; height:37px; position:relative; top:3px}
.item-cart .cart-in a span{left:50%;-webkit-transform:translateY(-50%) translateX(-50%);-moz-transform:translateY(-50%) translateX(-50%);-o-transform:translateY(-50%) translateX(-50%);-ms-transform:translateY(-50%) translateX(-50%); display:block; margin:-2px 0 0}
.item-cart .cart-in i{position: relative;top: 3px;display: inline-block;width: 20px;height: 20px;background: transparent 0 0 no-repeat;background: url(/img/icn-cart02-in.png);}

.item-cart .wanted{ width:40%; padding:0 1%;box-sizing: border-box; float:left;}
.item-cart .wanted a{ background:#ededed; color:#667073;border-bottom:4px solid #c6c6c6;}
.item-cart .wanted a:hover{ background:#d5d5d5;border-bottom:2px solid #c6c6c6; height:38px; position:relative; top:2px}
.item-cart .wanted-on{ width:40%; padding:0 1%;box-sizing: border-box; float:left;}
.item-cart .wanted-on a{ color:#667073;background:#d5d5d5;border-bottom:1px solid #c6c6c6; height:37px; position:relative; top:3px}
.item-cart .wanted02{ width:100%; padding:0 1%;box-sizing: border-box; float:left;}
.item-cart .wanted02 a{ background:#ededed; color:#667073;border-bottom:4px solid #c6c6c6;}
.item-cart .wanted02 a:hover{ background:#d5d5d5;border-bottom:2px solid #c6c6c6; height:38px; position:relative; top:2px}
.item-cart .wanted02-on{ width:100%; padding:0 1%;box-sizing: border-box; float:left;}
.item-cart .wanted02-on a{ color:#667073;background:#d5d5d5;border-bottom:1px solid #c6c6c6; height:37px; margin:3px 0 0}

/*-タグ-*/
.recommend-tag,
.new-item-tag{display: block;font-size:12px;line-height: 14px;-webkit-transform: rotate(-70deg);-moz-transform: rotate(-45deg);-o-transform: rotate(-45deg);-ms-transform: rotate(-45deg);position: absolute;top: -5px;right:-5px;text-align: center;text-decoration: none;color: #FFF;font-weight: bold;-moz-transition: -moz-transform 0.3s ease;-webkit-transition: -webkit-transform 0.3s ease;-o-transition: -o-transform 0.3s ease;-ms-transition:-ms-transform 0.3s ease;}
.recommend-tag span,
.new-item-tag span{display: block;-webkit-transform: rotate(22.5deg);-moz-transform: rotate(22.5deg);-o-transform: rotate(22.5deg);-ms-transform: rotate(22.5deg);}
.recommend-tag div,
.new-item-tag div{padding:2px 0 0;-moz-transform: rotate(30deg);-webkit-transform: rotate(30deg);-o-transform: rotate(30deg);-ms-transform: rotate(30deg); }

.recommend-tag{width:32px;height:32px;background: #ff9900;}
.recommend-tag span{width: 32px;height: 32px;background: #ff9900;}
.recommend-tag div{}

.new-item-tag{width:32px;height:32px;background: #ff417b;}
.new-item-tag span{width: 32px;height: 32px;background: #ff417b;}
.new-item-tag div{ }