@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    0.0.5
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/*Cocoon用商品ボックス*/
.product-item-space {
margin-top: 3em;
}

.shoplinkother1 a {
background: #f70101ba;
}
.shoplinkother2 a {
background: #0163f7b3;
}

/*Cocoon用記事ボックス*/
.entrycard-wrap.a-wrap {
	 position: relative;
    padding: 5px 3px;
    line-height: 1.3;
	 margin-top:0px;
    margin-bottom: 0px;	
}

.entrycard-wrap .entrycard-box {
	 padding:4px;
	background-color:#fff;
}


.entrycard1:first-of-type {
	padding-bottom: 2px;
	border-top: 2px solid #e4e4e4;
	border-bottom: 2px dotted #e4e4e4;
}
.entrycard1{
	padding-bottom: 2px;
	border-bottom: 2px dotted #e4e4e4;
}

.entrycard1:last-of-type	 {
	padding-bottom: 2px;
	border-bottom: 2px solid #e4e4e4;
}

.entrycard2 .entrycard-box {
    border-radius: 5px;
    border: 1px solid #ccc;
}



.entrycard-wrap:after {
     display: block;
     content: '';
		position:absolute;
	top:50%;
	bottom:0;
		right:20px;
     width: 6px;
     height: 6px;
     border-top: solid 2px #697b91;
     border-right: solid 2px #697b91;
     -webkit-transform: rotate(45deg);
     transform: rotate(45deg);
     margin-top: -3px;
}


.entrycard-wrap .entrycard-thumb{
	float:left;
	margin:6px 10px ;
	width:120px;
}

.entrycard-wrap .entrycard-title{
	margin:2px 24px 6px 140px;
	font-size:0.9em;
	color:#333;
   font-weight: 700;
}
.entrycard-wrap .entrycard-text{
	margin:0px 24px 2px 140px;
	font-size:0.7em;
	color:#636363;
}


/* リボン部分 */
/*  リボンCSSはnxworld様のページの斜めリボンを改変して利用。
多くのカスタマイズを公開していらっしゃるので 「リボン css nxworld」などgoogle検索すると便利。
Copyright (c) 
https://www.nxworld.net/tips/pure-css-corner-ribbon.html
https://codepen.io/nxworld/pen/oLdoWb
*/

.ribbon {
  width: 80px;
  height: 80px;
  overflow: hidden;
  position: absolute;
}
.ribbon:before, .ribbon:after {
    position: absolute;
    z-index: 0;
    content: '';
    display: block;
    border: 4px solid #224963;
}
.ribbon span {
    position: absolute;
    display: block;
    width: 185px;
    padding: 5px 0;
    box-shadow: 0 1px 1px rgba(0,0,0,.1);
    color: #fff;
    font: 700 11px/1 'Lato',sans-serif;
    text-shadow: 0 1px 1px rgba(0,0,0,.2);
    text-transform: uppercase;
    text-align: center;
}
.ribboncolor1 span {
	    background-color: #ea7e7e;
}
.ribboncolor2 span {
	    background-color: #7e95ea;
}

/* top left*/
.ribbon-top-left {
    top: -1px;
    left: -5px;
}
.ribbon-top-left::before,
.ribbon-top-left::after {
  border-top-color: transparent;
  border-left-color: transparent;
}
.ribbon-top-left:before {
    top: -1px;
    right: 4px;
}

.ribbon-top-left::after {
  bottom: 4px;
  left: 1px;
}
.ribbon-top-left span {
  right: -45px;
  top: 18px;
  transform: rotate(-45deg);
}


/*マーカー*/
.marker-under {
    background: linear-gradient(transparent 69%,#ff6 95%);
}
.marker-under-blue {
    background: linear-gradient(transparent 69%,#75c2f6 95%);
}
.marker-under-red {
    background: linear-gradient(transparent 69%,#ffb6b9 95%);
}
.marker-under,.marker-under-blue,.marker-under-red{
	font-weight:bold;
}


.cta-box {
    background-color: #fffdfd;
    color: #4c4c4c;
}

.nwa .ranking-item-image-tag {
    display: inline-block;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1240px以下*/
@media screen and (max-width: 1240px){
  /*必要ならばここにコードを書く*/
}

/*1030px以下*/
@media screen and (max-width: 1030px){
  /*必要ならばここにコードを書く*/
}

/*768px以下*/
@media screen and (max-width: 768px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
.ranking-item-image-tag {
    display: block;
}
	
}