/*

	Author: mshi
	Desciprtion: カスタマイズのためのCSS

*/

/*--------------------------------------
  ヨメレバ・カエレバ・トマレバ
--------------------------------------*/
.booklink-box, .kaerebalink-box, .tomarebalink-box{
 box-sizing: border-box;
 border: solid 1px #ccc;
 border-radius:5px;
 padding: 10px;
 margin-bottom: 10px;
 display: -webkit-flex;
 display: flex;
 -webkit-align-items: center;
 align-items: center;
}
.booklink-image, .kaerebalink-image, .tomarebalink-image{
    margin:0 15px 0 0;
    width: 160px;
    text-align: center;
    -webkit-flex: 0.3;
    flex: 0.3;
}
.cstmreba img{
 margin:0 auto;
 text-align:center;
}
.booklink-info, .kaerebalink-info, .tomarebalink-info{
 -webkit-flex: 1;
 flex: 1;
 margin:0;
 line-height:1.3em;
 overflow: hidden;
}
.booklink-name, .kaerebalink-name, .tomarebalink-name{
 line-height: 1.5em;
}
.booklink-name a, .kaerebalink-name a, .tomarebalink-name a{
 text-decoration:none;
 font-weight: bold;
}
.booklink-powered-date, .kaerebalink-powered-date, .tomarebalink-powered-date{
 background-color:#DDD;
 padding: 2px;
 font-size: .6em;
 text-align: right;
 line-height: 1.2em;
 margin-bottom: 3px;
}
.booklink-powered-date a, .kaerebalink-powered-date a, .tomarebalink-powered-date a{
 text-decoration: none;
}
.booklink-detail, .kaerebalink-detail, .tomarebalink-address{
 font-size: .7em;
}
.booklink-link2, .kaerebalink-link1, .tomarebalink-link1{
 flex-wrap: wrap;
 display: -webkit-flex;
 display: flex;
}
.booklink-link2 a,
.kaerebalink-link1 a,
.tomarebalink-link1 a {
  display:inline-block;
  margin:2px 2px 0 0;
  padding:10px 0;
  text-align:center;
  text-decoration:none;
  font-weight: bold;
  font-size:12px;
  transition: all 0.6s ease;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius:5px;
}
.booklink-link2 a:hover, .kaerebalink-link1 a:hover, .tomarebalink-link1 a:hover{
  color:#fff;
  transform: scale(0.95); /* 変化するボタンの大きさ */
  transition: all 0.6s ease;
}
.booklink-link2 a:active, .kaerebalink-link1 a:active, .tomarebalink-link1 a:active{
    position:relative;
    top:1px;
}
.shoplinkamazon, .shoplinkrakuten, .shoplinkkindle, .shoplinkkakakucom, .shoplinkrakukobo, .shoplinkyahoo, .shoplinkseven, .shoplinkjtb, .shoplinkjalan {
 width: 48%;
 display: -webkit-flex;
 display: flex;
 -webkit-align-items: center;
 align-items: center;
 -webkit-justify-content: center;
 justify-content: center;
}
/* amazon */
.shoplinkamazon a {
    color: #FF9901 ; /* 文字の色 */
    border: solid 1px #FF9901 ; /* ボーダー色 */
}
.shoplinkamazon a:hover {
    background-color: #ff9901; /* カーソルを重ねた時の背景色 */
}
/* 楽天 */
.shoplinkrakuten a {
    color: #c20004 ; /* 文字の色 */
    border: solid 1px #c20004 ; /* ボーダー色 */
}
.shoplinkrakuten a:hover {
    background-color: #c20004; /* カーソルを重ねた時の背景色 */
}
/* kindle */
.shoplinkkindle a {
    color: #007dcd; /* 文字の色 */
    border: solid 1px #007dcd ; /* ボーダー色 */
}
.shoplinkkindle a:hover {
    background-color: #007dcd; /* カーソルを重ねた時の背景色 */
}
/* 価格 */
.shoplinkkakakucom a {
    color: #314995; /* 文字の色 */
    border: solid 1px #314995 ; /* ボーダー色 */
}
.shoplinkkakakucom a:hover {
    background-color: #314995; /* カーソルを重ねた時の背景色 */
}
/* kobo */
.shoplinkrakukobo a {
    color: #990000; /* 文字の色 */
    border: solid 1px #990000 ; /* ボーダー色 */
}
.shoplinkrakukobo a:hover {
    background-color: #990000; /* カーソルを重ねた時の背景色 */
}
/* yahoo */
.shoplinkyahoo a {
    color: #7b0099; /* 文字の色 */
    border: solid 1px #7b0099 ; /* ボーダー色 */
}
.shoplinkyahoo a:hover {
    background-color: #7b0099; /* カーソルを重ねた時の背景色 */
}
.shoplinkyahoo img {
    display: none;
}
.shoplinkyahoo a {
    font-size: 10px;
}
/* 7net */
.shoplinkseven a {
    color: #82c36f ; /* 文字の色 */
    border: solid 1px #82c36f ; /* ボーダー色 */
}
.shoplinkseven a:hover {
    background-color: #82c36f; /* カーソルを重ねた時の背景色 */
}
/* jtb */
.shoplinkjtb a {
    color: #990000 ; /* 文字の色 */
    border: solid 1px #990000 ; /* ボーダー色 */
}
.shoplinkjtb a:hover {
    background-color: #990000; /* カーソルを重ねた時の背景色 */
}
/* jalan */
.shoplinkjalan a {
    color: #FF9901 ; /* 文字の色 */
    border: solid 1px #FF9901 ; /* ボーダー色 */
}
.shoplinkjalan a:hover {
    background-color: #FF9901; /* カーソルを重ねた時の背景色 */
}
.shoplinkamazon a, .shoplinkrakuten a, .shoplinkkindle a, .shoplinkkakakucom a, .shoplinkrakukobo a, .shoplinkyahoo a, .shoplinkseven a, .shoplinkjtb a, .shoplinkjalan a {
    width: 100%;
}
.booklink-footer{display: none;}

/* youtubeをレスポンシブに */
.iframe-content {
    position: relative;
    width: 100%;
    padding: 56.25% 0 0 0;
}
.iframe-content iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ブログカード下のURL削除 */
.hatena-citation{
    display:none;
}

/* いずれまとめたいcard類 */
.card{
 box-sizing: border-box;
 width: 100%;
 display: block;
 margin:15px 0;
 padding:10px;
 border: solid 1px #ccc;
 border-radius:2px;
 overflow: auto;
}
.card2{
 padding:15px;
 margin-bottom: 10px;
 border: 1px solid #CCC;
 border-radius: 2px;
}

/*****ここから会話のCSS*****/
.talk-wrap{
 display: block;
 clear: both;
 margin:0 auto 3px auto;
 font-weight: 200;
 }
.talk-wrap p{
 margin:0;
 }
 .left-icon{
 width: 100px;
 height: 100px;
 -webkit-border-radius: 50%;
 border-radius: 50%;
 background: no-repeat;
 background-size: 180%;
 background-position: center;
 float:left;
 display:inline-block;
 box-shadow: 1px 1px 5px #aaa; /*左のアイコンの影の設定*/
 border: 3px solid #fff; /*左のアイコンの枠の設定*/
 margin-bottom: 10px;
 }
 .talk-left{
 float:right;
 position: relative;
 background: #fff; /*左の会話の背景色*/
 border: 1px solid #707070;
 padding: 3%;
 border-radius: 10px;
 width: 70%;
 margin-top:10px;
 box-shadow: 1px 1px 5px #aaa; /*左の会話の影の設定*/
 margin-bottom: 10px;
 }
.talk-left:before {
 content: "";
 display: inline-block;
 border: 10px solid transparent;
 border-right-color: #707070;
 position: absolute;
 left: -20px;
 top: 25%;
 margin-top: -6px;
}
.talk-left:after {
 content: "";
 display: inline-block;
 border: 9px solid transparent;
 border-right-color: #fff;
 position: absolute;
 left: -17px;
 top: 25%;
 margin-top: -5px;
}
 .right-icon{
 width: 100px;
 height: 100px;
 -webkit-border-radius:50%;
 border-radius: 50%;
 background: no-repeat;
 background-size: 180%;
 background-position: center;
 float:right;
 display:inline-block;
 box-shadow: 1px 1px 5px #aaa; /*右のアイコンの影の設定*/
 border: 3px solid #FFF; /*右のアイコンの枠の設定*/
 margin-bottom: 10px;
 }
 .talk-right{
 float:left;
 position: relative;
 background: #fff; /*右の会話の背景色*/
 border: 1px solid #707070;
 padding: 3%;
 border-radius: 10px;
 width: 70%;
 margin-top:10px;
 box-shadow: 1px 1px 5px #aaa; /*右の会話の影*/
 margin-bottom:10px;
 }
 .talk-right:before {
 content: "";
 display: inline-block;
 border: 10px solid transparent;
 border-left-color: #666;
 position: absolute;
 right: -20px;
 top: 25%;
 margin-top: -6px;
}
.talk-right:after {
 content: "";
 display: inline-block;
 border: 9px solid transparent;
 border-left-color: #fff;
 position: absolute;
 right: -17px;
 top: 25%;
 margin-top: -5px;
}
.talk-end{
 clear:both;
}

/*****レスポンシブ設定*****/
@media screen and (max-width: 480px){
 .left-icon{
 width: 80px;
 height: 80px;
 }
 .talk-left{
 width: 65%; 
 }
 .right-icon{
 width: 80px;
 height: 80px;
 }
 .talk-right{
 width: 65%; 
 }
 }
 @media screen and (max-width: 380px){
 .left-icon{
 width: 60px;
 height: 60px;
 }
 .talk-left{
 width: 65%; 
 }
 .right-icon{
 width: 60px;
 height: 60px;
 }
 .talk-right{
 width: 65%; 
 }
 }

/* Masonry風ギャラリー */
.masonry {
 margin: 1.5em 0;
 padding: 0;
 -moz-column-gap: 1.5em;
 -webkit-column-gap: 1.5em;
 column-gap: 1.5em;
 font-size: .85em;
}

.item_m {
 display: inline-block;
 background: #fff;
 padding: 5px;
 margin: 0 0 1.5em;
 width: 100%;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

@media only screen and (min-width: 400px) {
 .masonry {
 -moz-column-count: 2;
 -webkit-column-count: 2;
 column-count: 2;
 }
}

@media only screen and (min-width: 780px) {
 .masonry {
 -moz-column-count: 3;
 -webkit-column-count: 3;
 column-count: 3;
 }
}

/* 目次のカスタマイズ */
.entry-content .table-of-contents {
background-color:#fff;
background: #fff;
background-image:linear-gradient(-45deg, #fff 25%, #f4f4ed 25%, #f4f4ed 50%, #fff 50%, #fff 75%, #f4f4ed 75%, #f4f4ed);
background-image:-webkit-linear-gradient(-45deg, #fff 25%, #f4f4ed 25%, #f4f4ed 50%, #fff 50%, #fff 75%, #f4f4ed 75%, #f4f4ed);
background-image:-moz-linear-gradient(-45deg, #fff 25%, #f4f4ed 25%, #f4f4ed 50%, #fff 50%, #fff 75%, #f4f4ed 75%, #f4f4ed);
background-image:-ms-linear-gradient(-45deg, #fff 25%, #f4f4ed 25%, #f4f4ed 50%, #fff 50%, #fff 75%, #f4f4ed 75%, #f4f4ed);
-webkit-background-size:4px 4px;
-moz-background-size:4px 4px;
-ms-background-size:4px 4px;
background-size:4px 4px;
border-radius:5px; /* 目次の枠の角の丸さを調節 */
overflow: auto;
}

/* 読者登録コンテナ */
.registration_container {
 box-sizing: border-box;
 display: -webkit-flex;
 display: flex;
 -webkit-align-items: center;
 align-items: center;
 justify-content: space-between;
}
/* 読者登録タイトル */
.mfujin_registration_title {
-webkit-flex: 1;
flex: 1;
max-width: 1200px;
margin-left: 2px;
margin-right: 2px;
margin-bottom: 10px;
width: 100%;
height: 0;
padding-top: calc(135 / 1200 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
background: url(http://livedoor.blogimg.jp/mfujin/imgs/9/a/9a666053.jpg) center center / cover no-repeat;
display:block;
}
/* 読者登録 */
.mfujin_registration {
-webkit-flex: 1;
flex: 1;
max-width: 1200px;
margin-left: 2px;
margin-right: 2px;
margin-bottom: 10px;
} 
.mfujin_registration a {
width: 100%;
height: 0;
padding-top: calc(686 / 1200 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
background: url(http://livedoor.blogimg.jp/mfujin/imgs/2/8/28d6a5e2.jpg) center center / cover no-repeat;
display:block;
transition: all 0.6s ease;
transform: scale(0.97); /* 変化するボタンの大きさ */
}
.mfujin_registration a:hover {
transform: scale(1.00); /* 変化するボタンの大きさ */
transition: all 0.6s ease;
}
.mfujin_registration a {
position:relative;
top:1px;
}
.mfujin_registration span {
visibility: hidden;
} 

/* 読者登録feedly */
.mfujin_feedlyregistration {
-webkit-flex: 1;
flex: 1;
max-width:280px;
margin-left: 2px;
margin-right: 5px;
margin-bottom: 10px;
} 
.mfujin_feedlyregistration a {
width: 100%;
height: 0;
padding-top: calc(1098 / 600 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
background: url(http://livedoor.blogimg.jp/mfujin/imgs/e/8/e8d08c73.jpg) center center / cover no-repeat;
display:block;
transition: all 0.6s ease;
transform: scale(0.95); /* 変化するボタンの大きさ */
}
.mfujin_feedlyregistration a:hover {
transform: scale(1.00); /* 変化するボタンの大きさ */
transition: all 0.6s ease;
}
.mfujin_feedlyregistration a {
position:relative;
top:1px;
}
.mfujin_feedlyregistration span {
visibility: hidden;
} 

/* 読者登録facebook */
.mfujin_facebookregistration {
-webkit-flex: 1;
flex: 1;
max-width: 280px;
margin-left: 5px;
margin-right: 2px;
margin-bottom: 10px;
} 
.mfujin_facebookregistration a { 
width: 100%;
height: 0;
padding-top: calc(1098 / 600 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
background: url(http://livedoor.blogimg.jp/mfujin/imgs/f/d/fd612921.jpg) center center / cover no-repeat;
display:block;
transition: all 0.6s ease;
transform: scale(0.95); /* 変化するボタンの大きさ */
}
.mfujin_facebookregistration a:hover {
transform: scale(1.00); /* 変化するボタンの大きさ */
transition: all 0.6s ease;
}
.mfujin_facebookregistration a {
position:relative;
top:1px;
}
.mfujin_facebookregistration span {
visibility: hidden;
}

/* えむしcard_list */
.article-body-inner .card_list {
 position: relative;
 border: 3px solid #f6cd8a;
 background: linear-gradient(
    -45deg,
    #fff 25%,
    #f4f4ed 25%, #f4f4ed 50%,
    #fff 50%, #fff 75%,
    #f4f4ed 75%, #f4f4ed
  );
 background-size: 4px 4px;
 padding-right: 1em;
 border-radius: 0px 5px 5px 5px;
 font-weight: normal;
 padding-top: 1em;
 margin-top: 1.5em;
}
.article-body-inner .card_list:before{
    display: inline-block;
    position: absolute;
    top: -20px;
    left: -20px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%;
    vertical-align: middle;
    text-align: center;
    content: "\f006";
    font-family: FontAwesome;
    background: #f6cd8a;
    color: #FFF;
    font-size: 22px;
}
.article-body-inner .card_list li {
 font-weight: bold;
 color:#333;
}
.article-body-inner .card_list a{
 color:#7e7ebe;
 padding: 8px 0;/* 文字の間隔 */
 display: block;
 text-decoration: none;
}
.article-body-inner .card_list p {
 padding-left: 8px;/* 文字の間隔 */
 font-weight: bold;
 color:#333;
}

/* アコーディオン */
.accordion {
 width: 100%;
 margin: 0 auto;
 margin-bottom: 3px;
 padding: 10px;
}
.accordion .ac-content {
 margin: 0 10px;
}
.accordion .ac-content label:before{
 font-family:"FontAwesome";
 content: "\f140";/*アイコン*/
 display: inline-block;
 margin-right:10px;
}
.accordion input {
 display: none;
}
.accordion label {
 display: block;
 color: #707070; /* 文字色 */
 background: linear-gradient(
    -45deg,
    #fff 25%,
    #f4f4ed 25%, #f4f4ed 50%,
    #fff 50%, #fff 75%,
    #f4f4ed 75%, #f4f4ed
  );
 background-size: 4px 4px;
 cursor: pointer;
 padding: 10px;
 border: 3px solid #f6cd8a;
 border-radius: 10px;
 position: relative;
 -webkit-transition: none;
 transition: none;
 box-shadow: 0 3px 0 #c6a570;
}
.accordion label:hover {
 color: #fff;
 background: #707070;
 top: -4px;
 box-shadow: 0 7px 0 #c6a570;
}
.accordion label:active {
 top: 3px;
 box-shadow: none;
}
.accordion .ac-cont {
 transition: 0.2s;
 height: 0;
 overflow: hidden;
 background: #fff;
 padding: 0 10px;
}
.accordion input:checked + .ac-cont {
 height: auto;
 padding: 10px;
}

/* s */
.accordion_s {
  width: 1px;
}
.accordion .ac-content {
	margin: 0 10px;
}
.accordion_s input {
	display: none;
}
.accordion_s label {
  display: block;
  cursor: pointer;
}

.accordion_s .ac-cont_s {
	transition: 0.2s;
	height: 0;
	overflow: hidden;
	background: #fff;
	padding: 0 10px;
}
.accordion_s input:checked + .ac-cont_s {
	height: auto;
}
/* 絵の枠 */
.series{
 border:1px solid #dcdcdc;/* 外枠の色 */
}

/* linebox */
.linebox {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #f6cd8a;
    border-radius: 8px;
}
.linebox .linebox-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background: #FFF;
    color: #f6cd8a;
    font-weight: bold;
}
.linekbox p {
 margin: 0; 
 padding: 0;
}
/* 広告iframe用 */
.iframeWrap {position: relative;padding-bottom: 80%;height: 0;overflow: hidden;}
.iframeWrap iframe {position: absolute;top: 0;left: 0;width: 100% !important;height: 100% !important;}


/*********急がばさんフォローボタン着せ替え**********/
.follow-btn{
 width: 100%;
 margin: 5px 0px 5px 0px;
}
.follow-btn ul {
 list-style: none;
 display: -webkit-flex;
 display: flex;
 margin: 0;
 padding: 0;
}
.follow-btn li {
 height:80px;
 width: 100%;
 -webkit-transition: width 0.3s ease-out;
 transition: width 0.3s ease-out;
 display: -webkit-flex;
 display: flex;
 -webkit-align-items: center;
 align-items: center;
 -webkit-justify-content: center;
 justify-content: center;
 transition: all 0.6s ease;
}
.follow-btn li span{
 line-height:2.0;
 font-size:180%;
 font-weight: normal;
 font-style: normal;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}
.follow-btn li:hover {
  width: 200%; /* 変化するボタンの大きさ */
}
/* btn */
.btn1 a, .btn2 a, .btn3 a, .btn4 a {
 color: #5d5d5d;
 background-color:#f8f8f8;
 transition: all 0.6s ease;
}
/* rss */
.btn1 a  {
 border-bottom: solid 6px #5d5d5d; /* ボーダー色 */
}
.btn1 a:hover {
 color: #fff;
 background-color: #5d5d5d; /* カーソルを重ねた時の背景色 */
}
/* twitter */
.btn2 a  {
 border-bottom: solid 6px #6FB6C3; /* ボーダー色 */
}
.btn2 a:hover {
 color: #fff;
 background-color: #6FB6C3; /* 背景色 */
}
/* instagram */
.btn3 a  {
 border-bottom: solid 6px #3f729b; /* ボーダー色 */
}
.btn3 a:hover {
 color: #fff;
 background-color: #fff;
 background-image: linear-gradient(-135deg, #1400c8, #b900b4, #f50000);
}
/* facebook */
.btn4 a  {
 border-bottom: solid 6px #6998b9; /* ボーダー色 */
}
.btn4 a:hover {
 color: #fff;
 background-color: #6998b9; /* Facebookの背景色 */
}
.btn1-icon:before{
 content: "\f09e"; /* rss */
 display: inline-block;
 font-family: fontawesome;
}
.btn2-icon:before{
 content: "\f099"; /* Twitterアイコン */
 display: inline-block;
 font-family: fontawesome;
}
.btn3-icon:before{
 content: "\f16d"; /* instagramアイコン */
 display: inline-block;
 font-family: fontawesome;
}
.btn4-icon:before{
 content: "\f230"; /* Facebookアイコン */
 display: inline-block;
 font-family: fontawesome;
}
.follow-btn a {
 width:100%;
 height:100%;
 font-size: 13px;
 line-height: 1;
 font-weight: normal;
 text-decoration: none;
 text-align: center;
}