/* カスタム CSS をここに入力してください */


/* ----------------------------------------------------
 SNSボタン
-----------------------------------------------------*/
.sns-wrap {
    width: 100%;
    margin-top: 1em;
    margin-bottom: 1%;
}
 
.sns {
    margin: 0 auto;
    list-style: none;
}
 
.sns a {
    text-decoration: none;
    font-size: 15px;
}
 
.sns {
    text-align: center;
}
 
.sns li {
    float: left;
    width: 32.3%;
    margin: 0 .5% 2%;
}
 
.sns a {
    position: relative;
    display: block;
    padding: 10px 5px;
    color: #fff;
    border-radius: 5px;
    text-align: center;
}
 
.sns span,
.sns .fa {
    margin-right: .4em;
    color: #fff;
}
 
.sns li a:hover {
    -webkit-transform: translate3d(0px,5px,1px);
    -moz-transform: translate3d(0px,5px,1px);
    transform: translate3d(0px,5px,1px);
    box-shadow: none;
}
 
.sns .twitter a {
    background: #55acee;
    box-shadow: 0 5px 0 #0092ca;
}
 
.sns .facebook a {
    background: #315096;
    box-shadow: 0 5px 0 #2c4373;
}
 
.sns .googleplus a {
    background: #dd4b39;
    box-shadow: 0 5px 0 #ad3a2d;
}
 
.sns .hatebu a {
    background: #008fde;
    box-shadow: 0 5px 0 #016DA9;
}
 
.sns .pocket a {
    background: #f03e51;
    box-shadow: 0 5px 0 #c0392b;
}
 
.sns .line a {
    background: #87c040;
    box-shadow: 0 5px 0 #74a436;
}
 
@media only screen and ( max-width: 736px ) {
    .sns li {
        width: 32.3%;
        margin: 0 .5% 4%;
    }
    
    .sns a {
        font-size: 13px;
        padding: 6px 3px;
    }
}


/* ----------------------------------------------------
 ページ分割の装飾
-----------------------------------------------------*/

.page-page {
width: 100%;
text-align: center;
margin: 80px 0 10px;
}
 
.page-page span {
padding: 7px 10px;
font-size: 15px;
background: #fff;
position: relative;
box-shadow: 0 0 1px 2px #a0396b inset;
}
 
.page-page span:before {
content:"NOW";
position: absolute;
top: -120%;
left: 0; /*追加しました*/
width: 100%;
display: block;
text-align: center;
background: #a0396b;
padding: 5px 0;
border-radius: 7px;
color: #fff;
font-size: 12px;
font-weight: bold;
}
 
.page-page span:after {
content:"";
top: -50%;
border: 8px solid transparent;
border-top-color: #a0396b;
position: absolute;
left: 50%;
margin-left: -8px;
border: ;
}
 
.page-page a {
text-decoration: none;
}
 
.page-page a span {
background: #a0396b;
color: #000;
padding: 7px 10px;
color: #fff;
box-shadow: none;
font-weight: bold;
}
 
.page-page a span:before {
content:"";
padding: 0;
}
 
.page-page a span:after {
border: none;
}
 
/* 追加しました */
.page-page span {
opacity : 0.8;
}

/*=================================================================================
RINKER
=================================================================================*/
div.yyi-rinker-contents {
width: 98%;
height: auto;
margin: 36px auto;
font-family: 'Lucida Grande','Hiragino Kaku Gothic ProN',Helvetica, Meiryo, sans-serif;
line-height: 1.5;
background-color: #fafafa;
overflow: hidden;
padding: 12px 8px;
box-shadow: 0px 2px 5px 0 rgba(0,0,0,.26);
border: unset;
}
div.yyi-rinker-contents a {
transition: 0.8s ;
}
div.yyi-rinker-contents div.yyi-rinker-box {
padding: 0; 
}
div.yyi-rinker-contents div.yyi-rinker-image {
width: 150px;
min-width:150px;
margin: 0 14px 0 0;
text-align: center;
background: #fff;
box-sizing: border-box;
}
div.yyi-rinker-contents div.yyi-rinker-image a {
width: 100%;
}
/**** タイトル ****/
div.yyi-rinker-contents div.yyi-rinker-title a {
border-bottom: 1px solid;  /* テキスト下線 */
color:#285EFF; /* テキストリンクカラー */
}
div.yyi-rinker-contents div.yyi-rinker-title a:hover {
color:#FFCA28; /* テキストリンクカラー(マウスオーバー時) */
}
/**** Credit・価格欄 ****/
div.yyi-rinker-contents div.yyi-rinker-detail {
font-size: 10px;
}
div.yyi-rinker-contents div.yyi-rinker-detail a {
color: #999;
}
/****ボタン****/
div.yyi-rinker-contents ul.yyi-rinker-links li {
border-radius: 0px;
min-width:128px;
text-align: center;
}
div.yyi-rinker-contents ul.yyi-rinker-links li a {
padding:0;
height: auto;
border-radius: 8px;
font-size: 0.8em;
box-sizing: border-box;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink,
div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink,
div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink,
div.yyi-rinker-contents ul.yyi-rinker-links li.freelink1,
div.yyi-rinker-contents ul.yyi-rinker-links li.freelink2 {
background: none;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a {
background: #ff9901;
border: 2px solid #ff9901;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink a{
background: #bf0000;
border: 2px solid #bf0000;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink a{
background: #ff0033;
border: 2px solid #ff0033;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.freelink1 a{
background: #333333;
border: 2px solid #333333;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.freelink2 a{
background: #00b7ce;
border: 2px solid #00b7ce;
}
/****ボタンマウスオーバー時****/
div.yyi-rinker-contents ul.yyi-rinker-links li a:hover {
background: #fff;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a:hover {
color: #ff9901;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink a:hover {
color: #bf0000;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink a:hover {
color: #ff0033;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.freelink1 a:hover {
color: #333333;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.freelink2 a:hover {
color: #00b7ce;
}
@media screen and (max-width: 768px){
div.yyi-rinker-contents div.yyi-rinker-box {
display: block;
}
div.yyi-rinker-contents div.yyi-rinker-image{
width: 100%;
}
div.yyi-rinker-contents div.yyi-rinker-info {
text-align: center;
width: 100%;
}
div.yyi-rinker-contents ul.yyi-rinker-links {
justify-content: center;
}
div.yyi-rinker-contents ul.yyi-rinker-links li {
width: 32.33%;
margin: 0.5%;
}
div.yyi-rinker-contents ul.yyi-rinker-links li a {
padding: 0 0.5px;
}
}
@media screen and (max-width: 480px) {
div.yyi-rinker-contents ul.yyi-rinker-links li {
width: 99%;
margin: 0.7% 0.5%;
}
}

/****文章を囲む****/
.box26 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #95ccff;
    border-radius: 8px;
}
.box26 .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background: #FFF;
    color: #95ccff;
    font-weight: bold;
}
.box26 p {
    margin: 0; 
    padding: 0;
}

/****箇条書き****/
ul.sample1 {
  border: solid 2px #668ad8;
  padding: 0.5em 1em 0.5em 2.3em;
  position: relative;
}

ul.sample1 li {
  line-height: 1.5;
  padding: 0.5em 0;
  list-style-type: none!important;/*ポチ消す*/
}

ul.sample1 li:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900; 
  content: "\f00c";
  position: absolute;
  left : 1em; /*左端からのアイコンまで*/
  color: #668ad8; /*アイコン色*/
}


ol.sample1 {
  counter-reset:number; /*数字をリセット*/
  list-style-type: none!important; /*数字を一旦消す*/
  padding: 0.3em 0.8em;
  border: solid 2px #668ad8;
}
ol.sample1 li {
  position: relative;
  padding: 0.5em 0.5em 0.5em 30px;
  line-height: 1.5em;
}
ol.sample1 li:before{
  /* 以下数字をつける */
  position: absolute;
  counter-increment: number;
  content: counter(number);
  /*数字のデザイン変える*/
  display:inline-block;
  background: #668ad8;
  color: white;
  font-family: 'Avenir','Arial Black','Arial',sans-serif;
  font-weight:bold;
  font-size: 15px;
  border-radius: 50%;
  left: 0;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  /*以下 上下中央寄せのため*/
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
ol.sample1 li:last-of-type {
  border-bottom: none; /*最後のliの線だけ消す*/
}