/*** 記事のクリッピング ***/
/* 記事ページ用スタイル */
.m-clip-btn{
display:inline-block;
min-width:auto;
height:12px;
font-size:1.2rem;
border:1px solid #6A93C6;
color:#166434;
padding:3px 6px 3px 30px;
border-radius:18px;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.1);
box-shadow: 0 3px 6px rgba(0,0,0,.1);
line-height:1;
background:url(/common/rtc/images/v1/common/blue-clip.svg) 10px 2px / 14px 14px no-repeat;
cursor:pointer;
position:relative;
}
.m-clip-btn.u-clip-article span::before{
    content:"この記事をクリップ";
}
.m-clip-btn.c-clipped span::before{
display:none;
}
.m-clip-btn:hover{
background:url(/common/rtc/images/v1/common/white-clip.svg) 10px 2px / 14px 14px no-repeat #166434;
color:#fff;
border:1px solid #166434;
}

/* 記事ページ、記事リストページ共通スタイル */
.m-clip-btn .m-clip-flag{
position:absolute;
background:rgba(255,255,255,1);
-webkit-box-shadow: 0px 3px 10px rgba(0,0,0,0.2);
        box-shadow: 0px 3px 10px rgba(0,0,0,0.2);
width:120%;
font-size:1.2rem;
text-align:center;
padding:10px 15px;
top: -70px;
left: -10%;
line-height:1.6;
border-radius:10px;
z-index: 2;
display:none;
}
.m-clip-btn .m-clip-flag .m-clip-flag-inner{
max-width:100%;
position:relative;
color:#333;
background:rgba(255,255,255,1);
}
.m-clip-btn .m-clip-flag .m-clip-flag-inner a{
color:#166434;
}
.m-clip-btn .m-clip-flag .m-clip-flag-inner::after{
position:absolute;
content:"";
width: 0;
height: 0;
border-style: solid;
border-width: 13.0px 7.5px 0 7.5px;
border-color:rgba(255,255,255,1.0) transparent transparent transparent;
bottom:-22px;
left:43%;
}
.m-clip-flag .c-clip-close-btn{
position:absolute;
max-width:6em;
top:-13px;
right:0;
font-size:1rem;
color:#fff;
background-color:#166434;
text-align:center;
padding:2px 6px;
}
.m-clip-flag .c-clip-close-btn:hover{
color:#fff;
}
.m-clip-flag .c-clip-close-btn::before{
content:"X";
}
.m-clip-guest-flag{
display:none;
}
.m-clip-btn.c-clipped .m-clip-guest-flag{
display:block;
}
.m-clip-guest-flag .c-message-box{
background:#fff;
z-index:999;
width:450px;
height:430px;
padding:56px 20px 20px;
border:8px solid #166434;
-webkit-box-sizing:border-box;
        box-sizing:border-box;
position:fixed;
top:50%;
left:50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform:translate(-50%, -50%);
    transform:translate(-50%, -50%);
font-size:1.6rem;
color:#333;
text-align:center;
}
.m-clip-guest-flag .c-message-box .c-clip-close-btn{
  top:10px;
  right:10px;
}
@media screen and (max-width:480px){
  .m-clip-guest-flag .c-message-box{
    width:90%;
  }
}
.m-clip-guest-flag .c-message-box .c-clip-close-btn{
position:absolute;
}
right:7px;
top:8px;
}
.m-clip-guest-flag .c-message-box .c-clip-close-btn span{
font-size:1rem;
width:1.6rem;
height:1rem;
padding:0.3rem 0;
text-align:center;
border-radius:0.8rem;
background-color:#166434;
display:inline-block;
color:#fff;
vertical-align:text-top;
margin-right:5px;
}
.m-clip-guest-flag .c-message-box .c-clip-close-btn span::before{
display:none;
}
.m-clip-guest-flag .c-message-box .c-legend{
font-size:2rem;
font-weight:300;
color:#166434;
margin:0 0 20px;
}
.m-clip-guest-flag .c-message-box .c-benefits{
margin-bottom:20px;
}
.m-clip-guest-flag .c-message-box .c-benefits ul,.m-clip-guest-flag .c-message-box .c-nonmember-menu ul{
list-style:none;
padding:0;
margin:0;
}
.m-clip-guest-flag .c-message-box .c-benefits ul li{
line-height:2;
font-size:1.4rem;
}
.m-clip-guest-flag .c-message-box .c-nonmember-menu{
padding:20px;
margin:0 auto 40px;
width:80%;
background-color:#E5ECF0;
border-radius:10px;
}
.m-clip-guest-flag .c-message-box .c-nonmember-menu ul li{
line-height:1.5;
}
.m-clip-guest-flag .c-message-box .c-nonmember-menu ul li a{
color:#166434;
text-decoration:underline;
}
.m-clip-guest-flag .c-clip-close-btn.bottom{
position:static;
text-decoration:underline;
}

/* 記事リストページ用スタイル */
.m-clip-btn.c-list{
float:right;
width:20px;
height:20px;
font-size:1.2rem;
border:1px solid #6A93C6;
color:#166434;
padding:0px;
border-radius:18px;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.1);
box-shadow: 0 3px 6px rgba(0,0,0,.1);
line-height:1;
background:url(/common/rtc/images/v1/common/blue-clip.svg) center center / 13px 13px no-repeat;
cursor:pointer;
position:relative;
}
.m-clip-btn.c-list.c-clipped{
background:url(/common/rtc/images/v1/common/white-clip.svg) center center / 13px 13px no-repeat #166434;
color:#fff;
border:1px solid #166434;
}
.m-clip-btn.c-list span::before{
    content:"";
}
.m-clip-btn.c-clipped.c-list span::before{
display:none;
}
.m-clip-btn.c-list:hover{
background:url(/common/rtc/images/v1/common/white-clip.svg) center center / 13px 13px no-repeat #166434;
color:#fff;
border:1px solid #166434;
}
.m-clip-btn.c-list .m-clip-flag{
position:absolute;
background:rgba(255,255,255,1);
-webkit-box-shadow: 0px 3px 10px rgba(0,0,0,0.2);
        box-shadow: 0px 3px 10px rgba(0,0,0,0.2);
width:150px;
font-size:1.2rem;
text-align:center;
padding:10px 15px;
top: -75px;
left: -380%;
line-height:1.6;
border-radius:10px;
z-index: 2;
display:none;
}
@media screen and (max-width:480px){
  .m-clip-btn.c-list .m-clip-flag{
    left:-780%;
  }
  .m-clip-btn .m-clip-flag .m-clip-flag-inner::after{
    left:auto;
    right:-6%;
  }
}

/*** 連載（カテゴリ）、著者のフォロー ***/
/* 記事ページ、連載ページでのスタイル */
.m-clip-btn.u-clip-category{
float:right;
background:url(/common/rtc/images/v1/common/blue-plus.svg) 10px 2px / 14px 14px no-repeat;
}
.m-clip-btn.u-clip-category span::before{
    content:"この連載をフォロー";
}
.m-clip-btn.u-clip-author span::before{
    content:"この著者をフォロー";
}
.m-clip-btn.u-clip-special span::before{
    content:"このトピックをフォロー";
}

.m-clip-btn.u-clip-category:hover{
background:url(/common/rtc/images/v1/common/white-plus.svg) 10px 2px / 14px 14px no-repeat #166434;
color:#fff;
border:1px solid #166434;
}

/*** 記事クリップ、連載フォロー　共通 ***/
.c-delete{
font-size:1.2rem;
color:#999;
cursor:pointer;
}
.c-delete .c-close{
width:18px;
height:14px;
padding:2px 0;
border-radius:9px;
color:#fff;
background-color:#ccc;
display:inline-block;
text-align:center;
font-size:1rem;
margin-right:0.5rem;
}
.c-delete-btn{
  display:none;
}
.c-delete-btn.open{
  display:block;
}