/* ----------------------------------------
* wing 専用
---------------------------------------- */


/* wing 正規cssをなくす ------------------ */
#s-navi .acordion_tree ul.menu li .menu-item-icon.fa {
  display: none;
}

.sns .share-copy a {
    background: #c1c1c1;
    box-shadow: 0 3px 0 #8c8c8c;
    color: #fff;
}



/* ロゴ --------------------------------- */

.sitename a img, .sitename a .i-amphtml-element {
  width: 240px;
  height: 58px;
}
.footerlogo img, .footerlogo .i-amphtml-element {
  width: 200px;
  height: 40px;
}

/* ボックスの装飾 --------------------------------- */
div.st-mybox, div.st-mybox-class, div.clip-memobox,
div.st-square-checkbox {
	margin-bottom: 2.5em !important;
}
div.st-mybox {
  margin-top: 0em !important;
}


.st-blackboard-title-box {
  margin-bottom: 1em !important;
}

@media only screen and (min-width: 600px){
.ad {
  margin-bottom: 20px;
}
}
.entry-content p, 
.bg-01, .bg-02, .box-01, .box-02, .box-03, .box-04 {
  line-height: 1.8em;
  margin-bottom: 2.5em;
}
.entry-content div p:last-child:not(.wp-caption-text) {
  margin-bottom: 0em;
}

/*
.mainbox .entry-content div+p:not(.cardbox-more):not(.underArrow):not(.st-minihukidashi-box +p) {
  margin-top: 2.5em;
}
*/

/* ボタン直前にスペースを空ける */
.entry-content div + .st-mybtn {
  margin-top: 2.5em;
}

.post table {
  margin-bottom: 2.5em;
}

h1.entry-title {
  padding-bottom: 25px;
}

/* 見出し ---------------------------- */
.mainbox h2 {
  margin: 100px 0 40px !important;
}
.mainbox h3 {
  margin: 70px 0 35px !important;
}
.mainbox h4 {
  margin: 60px 0 30px !important;
}

/* ヘッダー ---------------------------- */
@media print, screen and (min-width: 960px){
  nav.st5 a {
    padding: 20px 15px;
  }
  nav.st5 {
    padding: 0px;
  }  
  nav.st5 li {
    padding: 0px;
  }  
}
nav li {
  list-style: none;
}
#menu-global a,
#menu-global-1 a {
  display: block;
}
#menu-global a:hover,
#menu-global-1 a:hover {
  text-decoration: none !important;
  color: #fff !important;
}
.menu-global-container a:hover {
  background: #ffcd00;
}

header .smanone ul.menu li {
  padding: 0 20px;
  width:auto;
}
header .smanone ul.menu li li {
  padding:0;
}
header .smanone ul.menu li li a {
  padding: 0 20px;
  width:auto;
  display:block;
}
header .descr {
  color: #2c3d51;
}

/* カラム幅 ------------------------------- */
#st-page .entry-content,
.st-post .entry-content {
  max-width: 680px;
  margin: 0 auto;
}

/* caption テキスト ---------------------- */
p.wp-caption-text {
  font-size: 12px;
  padding-top: 5px;
}

p.wp-caption-text a {
  text-decoration: none;
}


/* ul, ol ------------------------------ */

.post ul:not(.toc_list):not(.st_toc_list) ul{
  margin-top: 15px;
}



/* 目次 --------------------------------- */
#st_toc_container li:before {
  content: "" !important;
}
/* 書き出し最初のスペース ----------------- */
/*.entry-content>p:first-child {
  padding-top: 20px;
}*/

/* テーブル ----------------------------- */
.post table td {
/*
  padding: 15px;
*/
  vertical-align: middle;
}

table th{
  padding: 5px;
}
/* サイド　カテゴリー --------------------- */
#side li.cat-item {
  padding: 0px;

}
#side li.cat-item::after {
  top: 10px;
}
#side li.cat-item a {
  padding: 10px;
  display: block;
  position: relative;
}

#side li.cat-item a:hover {
  transform: translateX(3px);
}
#side li.cat-item:hover:after {
  color: #ffcd00;
}


/* サイド　タグクラウド ------------------ */
.tagcloud a:hover {
  opacity: 1;
  border: 1px #ffcd00 solid;
}

/* ----------------------------------------
* リンク処理
---------------------------------------- */

.entry-content a {
  text-decoration: none !important;
  font-size: 95%;
  font-weight: bold;
}
.entry-content .st_toc_list a {
  font-size: unset !important;
  font-weight: normal;
}
.st-card-excerpt {
  font-weight: normal;
}

/* hover
---------------------------------------- */
a:hover {
  transition: 0.3s;
}
a img:hover {
  opacity: 0.8;
}
a.st-formbtnlink:hover,
.st-catgroup a:hover,
.sns a:hover {
  color: #ffffff !important;
  opacity: 0.8;
}

/* ----------------------------------------
* li 行間 
---------------------------------------- */

.post ul li {
    padding-bottom: 10px;
}
.post ol li {
    padding-bottom: 10px;
}

/* ----------------------------------------
* ウィジェット　プロフィール 
---------------------------------------- */
#profArea {
  padding: 20px;
}
#profArea p:first-child {
  font-weight: bold;
}
.profImg {
  display: block;
  margin: 0 auto;
}
.profDes {
  text-align: center;
  margin: 0 auto; 
}
a.prof-btn:hover {
  transform: translateY(1px);
  color: #fff !important;
  opacity: 0.7;
}
/* ----------------------------------------
* フォーム 
---------------------------------------- */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="url"],
.wpcf7-form textarea,
.wpcf7-form input[type="submit"] {
  padding: 15px !important;
}
textarea:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus {
  border: 1px #FFCD00 solid !important;
  outline: none !important;
}
input[type="submit"]:focus,
button:focus {
  outline: none;
}
input[type="submit"]:hover,
button:hover {
  opacity: 0.9;
  position: relative;
  top: 1px;
}


/* ----------------------------------------
* お問い合わせフォーム contact 7
---------------------------------------- */
div.wpcf7 {
  background: #f0f0f0;
}
.wpcf7-form {
    padding: 5% 5% 0 5%;
}

.require {
  font-size: 70%;
  color: #ffffff;
  padding: 2px 5px;
  margin-left: 3px;
  position: relative;
  top: -1px;
  background-color: #031731;
  border-radius: 2px;
}
.post input[type="submit"] {
  border: none;
  padding: 10px 15px;
  border-radius: 30px;
}

.wpcf7-form #submit:hover {
  cursor: pointer;
}

.wpcf7 p {
  margin-top: 0 !important;
  margin-bottom: 20px;
}
.wpcf7 input[type="submit"] {
  margin-bottom: 0px !important;
}
.post input:not([type="image"]), .post textarea {
 margin: 0 auto;
}

/* 警告文 ------------------------------- */
div.wpcf7-response-output {
  margin: 0em 1em 1em;
}
div.wpcf7-validation-errors, div.wpcf7-acceptance-missing {
    border: 2px solid #f7e700;
    background: #fffef3;
}

/* ----------------------------------------
* ドロップキャップ 
---------------------------------------- */
p.dc:first-letter {
  font-weight:bold;
  font-size: 290%;
  line-height: 1;
  float: left;
  padding: 2px;
  margin-right: 4px;
  margin-top: 6px;
}

/* ----------------------------------------
* サイト内検索
---------------------------------------- */
#s:focus {
  outline: none !important;
}
#searchform {
  border: 1px #ccc solid;
}
#search-14 {
  width: 290px;
}

/* ----------------------------------------
* レスポンス時naviソーシャルアイコンの右スペース
---------------------------------------- */
.sp-hide i.fa {
  margin-right: 12px;
}

/* ----------------------------------------
* blockquote 設定
---------------------------------------- */
.mainbox blockquote {
    position: relative;
    padding: 30px 20px;
    margin-bottom: 2.5em;
    box-sizing: border-box;
    font-style: italic;
    border-radius: 6px;
    border: solid 2px #425973;
    background: #fff;
}
.mainbox blockquote:before{
    display: inline-block;
    position: absolute;
    top: -12px;
    left: -12px;
    width: 35px;
    height: 35px;
    line-height: 40px;
    vertical-align: middle;
    text-align: center;
    content: "\f10d";
    font-family: FontAwesome;
    background: #ffffff;
    color: #425973;
    font-size: 22px;
}

.mainbox blockquote:after{
    display: inline-block;
    position: absolute;
    bottom: -6px;
    right: -6px;
    width: 32px;
    height: 32px;
    line-height: 40px;
    vertical-align: middle;
    text-align: center;
    content: "\f10e";
    font-family: FontAwesome;
    background: #fff;
    color: #425973;
    font-size: 22px;
}

.mainbox blockquote cite {
    display: block;
    text-align: right;
    color: #333;
    font-size: 0.8em;
}

/* ----------------------------------------
* .bg backgroundに色をつける
---------------------------------------- */
.bg-01, .bg-02 {
    padding: 30px 20px;
    border-radius: 6px;
    position: relative;
}

.bg-01 h2, .bg-01 h3, .bg-01 h4,
.bg-02 h2, .bg-02 h3, .bg-02 h4{
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-left: 0 !important;
    background: none !important;
    border-left: none !important;
    border-bottom: 1px dotted;
    color: #333;
}

.bg-01 .box-title, .bg-02 .box-title {
    position: absolute;
    left: 18px;
    top: -16px;
    margin: 0 !important;
    border: none !important;
    border-radius: 6px;
    padding: 10px 16px !important;
    color: #fff;
    font-size: 90% !important;
    line-height: 1;

}
.bg-01 .box-title {
	background: #c3a41d;
}
.bg-02 .box-title {
	background: #689cd8;
}

.bg-01 {
    background: #fdf9eb;
}
.bg-01 h2, .bg-01 h3, .bg-01 h4 {
    color: #333 !important;
    border-color: #c3a400 !important;
}

.bg-02 {
    background: #e5f1fd;
}
.bg-02 h2, .bg-02 h3, .bg-02 h4 {
	border-color: #689cd8 !important;
}

.bg-01 table, .bg-02 table {
  margin-bottom: 0;
  background: #fff;
}


/* ----------------------------------------
* .bg blockquote .support の ol ul 位置調整
---------------------------------------- */
.bg-01 p:last-child, .bg-01 ol:last-child, .bg-01 ul:last-child,
.bg-02 p:last-child, .bg-02 ol:last-child, .bg-02 ul:last-child,
.support ol:last-child, .support ul:last-child, 
.support2 ol:last-child, .support2 ul:last-child ,
blockquote ol, blockquote ul {
  margin-bottom: 0 !important;
}
.support ol, .support ul,
.support2 ol, .support ul {
  padding-left: 20px !important;
  padding-right: 0px !important;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

blockquote ol,blockquote ul,
.bg-01 ol, .bg-01 ul, .bg-02 ol, .bg-02 ul {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}
.entry-content > ol, .entry-content > ul {
  margin-bottom: 2.5em !important;
}


/* ----------------------------------------
* 補足事項（backgroundに明るいグレー、ボーダーなし）
---------------------------------------- */
div.support2 {
  padding: 15px 20px;
  margin-bottom: 2.5em !important;
  background: #f9f9f9;
  border: 1px solid #e5e5e5;
  font-size: 14px;
}

/* ----------------------------------------
* 補足事項（backgroundに白、左上にテキストあり）
---------------------------------------- */
div.support, div.support p, div.support li {
  font-size: 95% !important;
}

@media print, screen and (min-width: 960px){
div.support, div.support p, div.support li {
  font-size: 14px !important;
}
}

div.support {
	 position: relative;
   padding: 15px 20px;
   margin-bottom: 2.5em !important;
   background: #f4fbff;
   border: 1px solid #2c3d51;
   /*border-radius: 6px;*/
}
div + div.support {
    margin-top: 2.5em;
}

div.support li {
  line-height: 1.5;
}

div.support ul li:before {
  color: #2c3d51;
}

.support:before {
	position: absolute;
	left: 14px;
   top: -12px;
	color: #fff;
	content: attr(data-text)"";
	font-weight: bold;
	padding: 0 6px;
	background: #2c3d51;
}

/* ----------------------------------------
* おすすめポイントなど 囲みbox
---------------------------------------- */
.box-01, .box-02, .box-03, .box-04 {
    background-color: #fff;
    padding: 30px 20px 30px;
    margin-bottom: 3em;
    top: 15px;
    border-radius: 0px 6px 6px 6px;
    position: relative;
    border: 2px solid #2c3d51;
    box-sizing: border-box;
}

/*--- 黄 ---*/
.box-01 .box-title, .box-01 h4 {
    background-color: #c3a400 !important;
}
.box-01 li:before {
    color: #c3a400 !important;
}
.box-01 {
	border-color: #c3a400;
    background: #fdf9eb;
}

/*--- 赤 ---*/
.box-02 .box-title, .box-02 h4 {
    background-color: #ca5959 !important;
}
.box-02 li:before {
    color: #ca5959 !important;
}
.box-02 {
	border-color: #ca5959;
    background: #fff6f6;
}

/*--- 緑 ---*/
.box-03 .box-title, .box-03 h4 {
    background-color: #63a778 !important;
}
.box-03 li:before {
    color: #63a778 !important;
}
.box-03 {
	border-color: #63a778;
    background: #f8fffa;
}

/*--- 紺 ---*/
.box-04 .box-title, .box-04 h4 {
    background-color: #425973 !important;
}
.box-04 li:before {
    color: #425973 !important;
}
.box-04 {
	border-color: #425973;
    background: #f8fcff;
}

.box-01 .box-title, 
.box-02 .box-title, 
.box-03 .box-title,
.box-04 .box-title,
.box-01 h4, .box-02 h4, .box-03 h4, .box-04 h4 {
    position: absolute;
    left: -2px;
    top: -32px;
    margin: 0 !important;
    border: none !important;
    border-radius: 6px 6px 0px 0;
    padding: 5px 10px !important;
    color: #fff !important;
    font-size: 14px !important;
    line-height: 1.5;
    font-weight: bold;
}
.box-01 ul, .box-01 ol, 
.box-02 ul, .box-02 ol, 
.box-03 ul, .box-03 ol, 
.box-04 ul, .box-04 ol {
	 margin-left: 0;
   padding-top: 0 !important; 
   padding-bottom: 0 !important;
   padding-right: 10px !important;
}

.box-01 ul:last-child, .box-01 ol:last-child, .box-01 p:last-child,
.box-02 ul:last-child, .box-02 ol:last-child, .box-02 p:last-child,
.box-03 ul:last-child, .box-03 ol:last-child, .box-03 p:last-child,
.box-04 ul:last-child, .box-04 ol:last-child, .box-04 p:last-child {
    margin-bottom: 0 !important;
}
.box-01 li:not(:last-child) , 
.box-02 li:not(:last-child) , 
.box-03 li:not(:last-child) , 
.box-04 li:not(:last-child)  {
    border-bottom: 1px dashed #ccc;
    padding-bottom: 0.6em;
    margin-bottom: 0.6em !important;
}


/* ----------------------------------------
* h1〜h5　line-height
---------------------------------------- */
h1, h2, h3, h4, h5 {
  line-height: 1.5 !important;
}

/* ----------------------------------------
*　特記
---------------------------------------- */


/* ----------------------------------------
*　引用の最後の行に下スペースは空けない
---------------------------------------- */
blockquote p:last-child,
blockquote ol,
blockquote ul {
   margin-bottom: 0 !important;
}
blockquote ol+p:last-child, blockquote ul+p:last-child, 
.bg-01 ol+p:last-child, .bg-01 ul+p:last-child, 
.bg-02 ol+p:last-child, .bg-02 ul+p:last-child {
	 margin-top: 2.5em;
}


/* ----------------------------------------
* リンクに色と装飾をつけない
---------------------------------------- */
.noLink {
  color: #999 !important;
  text-decoration: none !important;
  font-weight: normal !important;
  display: inline-block;
  line-height: 1.5em !important;
}
.noLink + a {
  display: inline-block;
  line-height:  1.5em;
}
.noLink:hover {
  color: #999 !important;
  text-decoration: none !important;
}

/* ----------------------------------------
* 貼り付けたメディアに枠線をつける
---------------------------------------- */
img.borderLine {
  border: 1px solid #ddd;
}

/* ----------------------------------------
* icon font 下矢印
---------------------------------------- */
.underArrow {
  margin-bottom: 0.5em !important;
  font-size: 90% !important;
  line-height: 1.5em !important;
}

.underArrow:before {
  padding-right: 0.3em;
  font-family: 'FontAwesome';
  content: "\f0ab";
}

/* ----------------------------------------
* liタグをアイコンフォントに置き換え
---------------------------------------- */
.mainbox ul, .mainbox-cta ul {
  position: relative;
  list-style: none !important;
}

.entry-content > ul:not(.st-blackboard-list) li:before, 
.mainbox-cta > ul li:before,
blockquote ul li:before, .emphasize-link ul li:before,
.support ul li:before, .support2 ul li:before,
.bg-01 ul li:before, .bg-02 ul li:before,
.box-01 ul li:before, .box-02 ul li:before, 
.box-03 ul li:before, .box-04 ul li:before {
  position: absolute;
  margin-left: -20px;
  font-family: 'FontAwesome';
  color: #689cd8;
  content: "\f058"; /*丸囲みチェック*/

}
.emainbox .bg ul li:before, .mainbox-cta .bg ul li:before,
.mainbox .bg-01 ul li:before, .mainbox-cta .bg-01 ul li:before {
  color: #c3a400;
}

#toc_container li:before {
  display: none;
}

/* ----------------------------------------
* サイドウィジェットの画像タイトルの下にスペース
---------------------------------------- */
.widget_image .side-title {
  margin-bottom: 20px !important;
}

/* ----------------------------------------
* Amazon JS 表示調整
---------------------------------------- */

.amazonjs_item a:after, .amazonjs_book a:after {
  display: none;
}

.amazonjs_item li:before, .amazonjs_book li:before {
  display: none;
}

.mainbox .amazonjs_item a, 
.mainbox .amazonjs_book a {
  text-decoration: none;
  color: #444;
}

/************************************
** video
************************************/
/*動画の最大幅を指定する*/
.video-container{
  max-width:840px;
}
 
/*動画の大きさを調整*/
.video {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  height: auto;
}
 
/*動画を囲んでいるdiv目一杯に広げる*/
.video iframe,
.video object,
.video embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ----------------------------------------
* 記事中アドセンス用 表示調整
---------------------------------------- */
.adsbygoogle .st-widgets-title,
.adbox .st-widgets-title {
  text-align: center;
  font-size: 12px !important;
  color: #aaa;
}

.adsbygoogle .textwidget p {
  text-align: center;
  margin-top: -40px;
}

.dbox .textwidget p {
  text-align: center;
  margin-top: -60px;
}

.adbox {
  max-width: 700px;
  margin: 0 auto;
}

.adbox > p+div {
      float: right;
}

/* ----------------------------------------
* アドセンス レクタングル用 表示調整
---------------------------------------- */

.double-rectangle { /* スポンサードリンクのラベル部分 */
  font-size: 70%;
  color: #aaa;
  display: block;
  text-align: center;
  margin-bottom: 10px;
}
.ad-box { 
  display: block;
  text-align: center;
  max-width: 692px;
  margin-left: auto;
  margin-right: auto;
}
.left-rectangle {
  float: left;
}
.right-rectangle {
  float: right;
}

/* ----------------------------------------
* 記事中レクタングル用 表示調整
---------------------------------------- */
/*スマホ時のアドセンスを、画面外にはみ出ないようにする*/
.ad_sp, .ad_sp * {/*アドセンス広告と、アドセンス広告内にある要素の幅を、画面幅以上に大きくならないようにする*/
max-width:100%;
}
.ad_sp {/*レクタングル大のサイズを、300px以下にする*/
display:inline-block;
width: 300px;
height: 250px;
}
@media (min-width:340px) {/*340px以上のブラウザでは、通常のサイズを表示する*/
.ad_sp{
width:336px;
height: 280px;
}
}

/* ----------------------------------------
* ol 数字の表示変更
---------------------------------------- */

.mainbox ol {
    list-style: decimal;
    counter-reset: li;
    list-style: none;
}

.mainbox ol li:before {
    color: #689cd8;
    font-weight: bold;
    counter-increment: li;   /* li の数を一つずつ増加 */
    content: counter(li) ". ";          /* 数を表示 */
    margin-left: -20px;
}

.mainbox .bg-01 ol li:before {
    color: #C3A400;
    font-weight: bold;
    counter-increment: li;   /* li の数を一つずつ増加 */
    content: counter(li) ". ";          /* 数を表示 */
    margin-left: -20px;
}

/* ----------------------------------------
* 記事の最後に表示する関連記事の案内
---------------------------------------- */

.mainbox .emphasize-link {
    position: relative;
    padding: 30px 20px;
    margin-top: 60px;
    margin-bottom: 20px;
    border: 1px solid #2c3d51;
    background-color: #f4fbff;
}

.mainbox .emphasize-link::before {
    position: absolute;
    top: -12px;
    left: 17px;
    padding: 2px 10px 2px 26px;
    content: "押さえておきたい！関連知識";
    background-color: #2c3d51;
    border-radius: 14px;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    line-height: 20px;
}

.mainbox .emphasize-link::after {
    position: absolute;
    top: -15px;
    left: 13px;
    width: 30px;
    height: 30px;
    background-color: #2c3d51;
    border-radius: 15px;
    line-height: 30px;
    text-align: center;
    font-family: 'FontAwesome';
    content: "\f058";
    font-size: 20px;
    color: #fff;
}
.mainbox .emphasize-link li {
    line-height: 1.5;
}

.mainbox .emphasize-link p:last-child,
.mainbox .emphasize-link ol,
.mainbox .emphasize-link ul {
  margin-bottom: 0 !important;
  padding-left: 20px !important;
  padding-top: 0px !important;
  padding-right: 0px !important;
  padding-bottom: 0px !important;
}

.mainbox .emphasize-link ol li:before, 
.mainbox .emphasize-link ul li:before {
    color: #2c3d51;
}

.mainbox .emphasize-link a {
    text-decoration: none;
}
.mainbox .emphasize-link a:hover {
    text-decoration: underline;
}

/* ----------------------------------------
* マーカー strongタグに対応
---------------------------------------- */
/*
article strong {
    background: linear-gradient(transparent 40%, #fffb8d 0%);
}
*/

/* ----------------------------------------
* 記事内の b, strong の調整
---------------------------------------- */

.mainbox b {
  font-weight: bold;
/*color: #2c3d51 !important;*/
}

.mainbox strong {
  font-weight: bold;
  color: #f52828;
 /* font-size: 115%;*/
}

/* ----------------------------------------
* VA Social Buzz 表示調整
---------------------------------------- */

.vasb_share a {
  color: #fff !important;
  text-decoration: none !important;
}
.va-social-buzz .vasb_follow {
  background: #bde2ff;
}

/*「VA Social Buzz」Twittr・Facebookシェアボタン非表示*/
.va-social-buzz .vasb_share {
  display:none;
}

/* ----------------------------------------
* ボタン
---------------------------------------- */
.cta-btn {
  background: #2ab239;
  color: #fff !important;
  border-radius: 8px;
  box-shadow: 0 4px 0 #086913;
  padding: 20px;
  display: block;
  text-align: center;
  text-decoration: none !important;
  margin: 0 auto 20px;
  width: 80%;
}
.cta-btn:hover {
  opacity: 0.8;
  transform: translate3d(0, 3px, 0);
  box-shadow: 0 1px 0 #086913;
  color: #fff !important;
  text-decoration: none !important;
}

/* ----------------------------------------
* サイドバー
---------------------------------------- */
.side-title {
	background: #2c3d51 !important;
	border: none !important;
	color: #fff;
	margin-bottom: 20px !important;
}
#side aside > *, #side li.cat-item a, #side aside .kanren .clearfix dd h5:not(.st-css-no) a, #side aside .kanren .clearfix dd p {
  color: #2c3d51;
  text-decoration: none;
}

/* ----------------------------------------
* サイドバーの人気記事一覧レイアウト
---------------------------------------- */
ul.wpp-list li {
  border-bottom: 1px dotted #ccc;
  counter-increment: wpp-count;
  position: relative;
}
ul.wpp-list li:before {
  display: block;
  padding: 1px 11px;
  color: #fff;
  background-color: #555;
  content: counter(wpp-count);
  position: absolute;
  opacity: 1;
  z-index: 10;
  top: 20px;
  left: 0px;
}
ul.wpp-list li:last-child {
  border-bottom: none;
}
ul.wpp-list li:nth-child(1):before{
  background-color: #FBCC54;
}
ul.wpp-list li:nth-child(2):before{
  background-color: #B7BFC1;
}
ul.wpp-list li:nth-child(3):before{
  background-color: #D47B16;
}
ul.wpp-list li img {
  margin-bottom: 20px;
  margin-top: 20px;
  margin-right: 15px;
}
ul.wpp-list li a.wpp-post-title {
  display: block;
  font-weight: bold;
  font-size: 18px;
  line-height: 1.5;
  padding: 17px;
  padding-right: 0;
  text-decoration: none;
  color: #333;
}
@media print, screen and (min-width: 960px){
ul.wpp-list li a.wpp-post-title {
  font-size: 16px;
}
}

/*--------------------------------------
ヨメレバ・カエレバ
--------------------------------------*/

	.booklink-name a, .kaerebalink-name a {
		color: #387fd0 !important;
		text-decoration: none !important;
		font-weight: bold;
	}
    .booklink-box, .kaerebalink-box{
        width:100%;
        box-sizing: border-box;
        margin: 0 0 2.5em;
        padding: 5%;
        border: 4px solid #deecfb;
        overflow: hidden;
        font-size:small;
        /*border-radius:2px;*/
    }
    .booklink-image, .kaerebalink-image{
        margin:0 0 15px 0;
    }
    .booklink-image img, .kaerebalink-image img{
        display:block;
        margin:0 auto;
        text-align:center;
    }
    .booklink-info, .kaerebalink-info{
        text-align:center;
        line-height:120%;
        overflow: hidden;
    }
    .booklink-name p, .kaerebalink-name p{
        font-size:16px;
        margin-bottom:20px;
        line-height:1.2em;
    }
    .booklink-name a, .kaerebalink-name a{
      font-size: 110%;
    }
    .booklink-powered-date, .kaerebalink-powered-date{
        font-size:8pt !important;
        margin-top:10px;
        line-height:120%;
    }
    .booklink-powered-date a, .kaerebalink-powered-date a{
      font-size:8pt !important;
    }
    .booklink-powered-date, .kaerebalink-detail{
        margin-bottom:10px;
    }
    .booklink-link2, .kaerebalink-link1{
        margin-top:20px;
    }
    .shoplinkamazon, .shoplinkrakuten, .shoplinkkindle, .shoplinkyahoo, .shoplinkkakakucom, .shoplinkanother{
        width:90%;
        overflow:hidden;
        background:linear-gradient(to bottom, #ffffff 5%, #f1f1f1 100%);
        background-color:#ffffff;
        border-radius:6px;
        border:1px solid #ddd;
        display:inline-block;
        margin:0  auto 5px auto;
        text-align:center;
    }

    .shoplinkamazon:hover, .shoplinkrakuten:hover, .shoplinkkindle:hover, .shoplinkyahoo:hover, .shoplinkkakakucom:hover, .shoplinkanother:hover{
        background:linear-gradient(to bottom, #f1f1f1 5%, #ffffff 100%);
        background-color:#f6f6f6;
    }
    
    .shoplinkamazon:active, .shoplinkrakuten:active, .shoplinkkindle:active, .shoplinkyahoo:active, .shoplinkkakakucom:active, .shoplinkanother:active{
        position:relative;
        top:1px;
    }
    .shoplinkamazon a, .shoplinkrakuten a, .shoplinkyahoo a, .shoplinkkindle a, .shoplinkkakakucom a, .shoplinkkakakucom a, .shoplinkanother a{
        display:block;
        cursor:pointer;
        text-decoration:none !important;
        font-weight:800;
        text-shadow:1px 1px 1px #fff;
        font-size:14px !important;
        padding: 15px;
        color: #e5e5e5 !important;
    }
    .shoplinkamazon a{
        color:#FF9901 !important;
    }
    .shoplinkrakuten a{
        color:#c20004 !important;
    }
    .shoplinkkindle a{
        color:#007dcd !important;
    }
    .shoplinkyahoo a{
        color:#7b0099 !important;
    } 
    .shoplinkanother a{
        color:#c3a400 !important;
    }
    .booklink-footer{
        clear:left;
    }
    .booklink-detail{
      font-size: 14px !important;
    }

/*hover 処理---------------------------*/

    .booklink-name a:hover, .kaerebalink-name a:hover {
        color: #FFCD00!important;
        text-decoration: underline !important;
    }
    .shoplinkamazon:hover{
        border-color: #FF9901;
    }
    .shoplinkrakuten:hover{
        border-color: #c20004;
    }
    .shoplinkkindle:hover{
        border-color: #007dcd;  
    }
    .shoplinkyahoo:hover{
        border-color: #7b0099;
    } 
    .shoplinkanother:hover{
        border-color: #c3a400;
    }

@media (min-width: 614px)  {
/*--------------------------------------
614px以上 ヨメレバ・カエレバ
--------------------------------------*/
    .booklink-box, .kaerebalink-box{
        width: 100%;
        box-sizing: border-box;
        margin: 0 0 2.5em;
        padding:30px;
    }
    .booklink-image, .kaerebalink-image{
        margin:0 15px 0 0;
        float:left;
    }
    .booklink-info, .kaerebalink-info{
        margin:0;
        text-align:left;
    }
    .booklink-name, .kaerebalink-name{
        margin-bottom:10px;
        line-height:1.5;
    }
    .booklink-link2, .kaerebalink-link1{
        margin-top:10px;
    }
    .shoplinkamazon, .shoplinkrakuten, .shoplinkkindle, .shoplinkyahoo, .shoplinkkakakucom, .shoplinkanother{
        float:left;
        width:48%;
        margin:15px 1% 1px auto;
    }
    .shoplinkyahoo a{
        font-size:10px;
    } 
}