@charset "utf-8";

/* -----reset css------ */
html,body,h1,h2,p,ul,li,dl,dt,dd{margin:0;padding:0}article,aside,canvas,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}img{height:auto;line-height:0;border:none;vertical-align:bottom}embed,iframe,img,table,textarea{max-width:100%}code,pre{white-space:pre-wrap;font-family:Menlo,Consolas,monospace}pre,table{word-break:break-all}table{border-collapse:collapse;border-spacing:0}*{box-sizing:border-box}
/* ---reset css end----2021/05/25更新 */
/* ---2021/03/06 記事表示部のPタグ上下余白を戻しました。不要の場合は下記con_bodyのpをmargin:0;にして下さい。--- */

.con_body p{
  margin:1.8em 0; /* 段落上下余白1行分1.8em */
}

html,body{
  width:100%;
  min-height:100%;
}
html{
  font-size:90%; /* フォントサイズは1em(16px)の90% */
  overflow-x:hidden;
}
body{
  font-size:1.0em;
  color:#000; /* 基本文字色 */
  background-color:rgb(245,244,239); /* 背景色 */
  line-height:2.0;
  font-family:"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Verdana,sans-serif;
  word-wrap: break-word;
  overflow-wrap: break-word;
  -ms-text-size-adjust:100%;
  -webkit-text-size-adjust:100%;
  -webkit-overflow-scrolling:touch !important;
  animation:fadeIn 0.5s ease 0s 1 normal;
}
@keyframes fadeIn{
  0%{opacity:0}
  100%{opacity:1}
}
#wrapper{
  display:flex;
  flex-flow:column;
  max-width:1040px;
  min-height:100vh;
  text-align:center;
  position:relative;
  overflow:hidden;
  background:#fff;
  margin:0 auto;
  padding:0 10px;
}
body > #wrapper{
  height:auto;
}
#box{
  width:100%;
  max-width:1000px;
  flex:1 0 auto; /* IE対策含む */
  margin:0 auto;
  position:relative;
  text-align:left;
}
#content {
  height:100%;
  color:#000;
}
a,a:link,a:visited{
  color:#723f15;
  text-decoration:none;
}
a:hover{
  color:#e77800;
  text-decoration:none;
}
img{
  opacity:1;
  animation:fadeIn 0.8s ease 0s 1 normal;
  vertical-align:bottom;
  border:none;
  max-width:100%;
  height:auto;
}
img[data-src] {
  opacity:0;
  display:none;
}
.emoji{
  margin:0;
  vertical-align:middle;
}
hr{
  height:1px;
  border:none;
  border-top:solid 1px #777;
}
.hr1{
  height:1px;
  border:none;
  border-top:dashed 1px #aaa;
  margin:0 -10px 10px;
}
.hr2{
  height:1px;
  border:none;
  border-top:dotted 1px #ccc;
}
pre{
  white-space:pre-wrap;
  word-wrap:break-word;
  overflow:auto;
  padding:1.0em;
  background-color:rgba(0,0,0,0.04);
  font-size:1.0em;
  font-family:initial;
}
code{
  font-family:Menlo,Consolas,monospace;
  font-size:1.0em;
}
blockquote{
  padding:10px 15px;
  margin:10px;
  border:solid 1px #ccc;
  border-radius:5px;
}

/* トップ画像を入れる場合はここを改変 */
.topimg{
  position:relative;
  overflow:hidden;
  padding-top:28.00%;  /* 画像の高さpx÷画像の幅px×100で導いた数値%。数値増減で高さを調整する */
  background:url('https://blog-imgs-141.fc2.com/s/o/r/sorauta1/top-tr.jpg'); /* 表示したい画像URL */
  background-color:rgb(245,244,239); /* 背景色 */
  background-position:center center; /* 表示する位置 中央寄せ */
  background-repeat:no-repeat;
  background-size:cover;
  border-radius:0 0 5px 5px;
}
/* ヘッダー部分 */
header.header{
  width:100%;
  max-width:1000px;
  top:0;
  height:auto;
  margin:10px auto 0;
  padding:0 20px;
  background:-moz-linear-gradient(left, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0));
  background:-webkit-linear-gradient(left, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0));
  background:linear-gradient(to right, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0));
  text-align:left;
  position:absolute;
  z-index:1;
}
.page-header{
    left:0;
    right:0;
    position:relative !important;
    padding-bottom:15px !important;
    background:rgb(245,244,239) !important; /* 記事ページのヘッダー背景色 */
    border-radius:0 0 5px 5px;
    margin:0 auto !important;
    padding-top:10px !important;
}

/* ブログタイトル */
h1#blog-name{
  margin:0 70px 0 0;
  font-size:1.8em;
  font-weight:normal;
}
h1#blog-name a{
  color:#251c13; /* ブログタイトルの色 */
  text-shadow:0 1px 1px rgba(0,0,0,.2);
}
h1#blog-name a:hover{
  color:#e77800; /* ブログタイトルhover時の色 */
  text-decoration:none;
}
/* ブログ説明部分 */
.introduction{
  padding:0 70px 0 0;
  color:#000; /* --説明文の文字色-- */
}
/* 管理リンク・パンくず表示部分 */
.pan_box{
  display:flex;
  margin:0 10px;
}
.pan{
  -webkit-flex:1;
  flex:1;
  text-align:left;
}
.adm{
  text-align:right;
  margin:0 0 0 auto;
}
.pankuzu{
  text-align:left; 
  margin:0 20px 0 10px;
  color:#777;
  font-size:0.9em;
} 
span.breadcrumb_entry:nth-last-child(3){
  display:none;
}
.clearfix:after{
  content:"";
  display:block;
  height:0;
  clear:both;
  visibility:hidden;
}

/* 管理ページ部分 */
ul.admin{
  margin:0;
  padding-left:10px;
  list-style-type:none;
  text-align:right;
}
ul.admin li{
  display:inline;
  margin:0;
}

/* フッター */
footer.footer{
  width:100%;
  max-width:1000px;
  margin:0 auto;
  padding:12px;
  text-align:center;
  background-color:rgb(245,244,239);
  border-radius:5px 5px 0 0;
  font-size:0.8em;
  line-height:1.7;
}

/* メインカラム部分 */
.blog-con{
  position:relative;
  margin:0 0 30px;
  padding:20px 20px 25px;
  background-color:#fff;
  border:1px solid #ddd;
  border-radius:5px;
  box-shadow:0px 2px 5px rgba(0,0,0,.17);
}
.date-t{
  text-align:right;
  margin:-5px 0;
}
.pen-link{
  font-size:1.5em;
  color:#000;
  line-height:1;
  vertical-align:middle;
  -webkit-transform:rotate(110deg);
  transform:rotate(110deg);
  display:inline-block;
}
.com_col{
  float:right;
  margin-top:-30px;
  text-align:right;
  line-height:1.8em;
  color:#ccc;
}
.con_body{
  margin:10px 25px 0;
}
.con_body blockquote p{
  margin:0;
}
.con_body ul li{
  margin-left:20px;
  list-style-type:disc;
}
.con_body ol li{
  margin-left:20px;
  list-style-type:decimal;
}
.relate_dd .relate_ul .relate_li,
.relate_dd .relate_ul .relate_li_nolink {
  margin-left:0;
  list-style-type:none; /* 関連記事のリストマーク */
}
.pd-plus{
  padding:30px 30px 25px;
}
.last-mod{
  text-align:right;
  margin:0 10px;
}
.mod-mark{
  display:inline-block;
  margin-right:3px;
  font-size:1.2em;
  -webkit-transform:rotate(125deg);
  transform:rotate(125deg);
}
.entry_footer{
  padding:15px 10px 0;
  font-size:0.8em;
  text-align:right;
}
.topentry_comment_body{
  padding:0 25px;
}
#tools_container{
  margin-top:5px;
}
.col_2 .con_body2{
margin:10px;
}
.kiji1{
  display:none; /* 記事表示時要約非表示 */
}
.blog-con2 .kiji1 {
  display:block; /* 記事2カラム時表示 */
}
.kiji2{
  display:block; /* 要約表示時記事非表示 */
}

/* 簡易表示トップページエントリー */
.kiji1{
  overflow:hidden;
  margin:0;
}
.left{
  float:left;
  width:45%; /* サムネイル画像の幅 */
  height:auto;
  max-height:145px;
  margin-right:10px;
  text-align:center;
  position: relative;
  overflow:hidden;
}
.left img{
  width:100%;
  height:auto;
  max-height:140px;
  font-family:'object-fit:cover;'; /* IE対策 */
  object-fit:cover;
  border:1px solid #ccc; /* 枠線不要ならborder:none;に */
  vertical-align:middle;
}
.mask{
  position:absolute;
  top:0;
  left:0;
  z-index:2;
  width:100%;
  height:100%;
  background:rgba(255,255,255,.65);
  border: 1px solid #ccc;
  -webkit-transition:.3s;
  transition:.3s;
  opacity:0;
}
.mask .caption{
  color:#222;
  font-size:120%;
  font-weight:normal;
  position:absolute;
  top:50%;
  left:50%;
  width:100%;
  -webkit-transform:translate(-50%,-50%);
  -moz-transform:translate(-50%,-50%);
  transform:translate(-50%,-50%);
}
.left:hover .mask{
  opacity:1;
}
.moji-c{
  overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3; /* 表示したい行数（3行表示で末尾に3点リーダー表示、webkit系のみ) */
  max-height:6.0em; /* IE,Firefox対策（4行は8.0em、5行は10.0em)はみ出しはこの数値で調整 */
}
.right-txt{
  text-align:right;
  margin-right:15px;
}
.clearLeft{
  clear:left;
}
/* 記事ページ追記位置 */
#readmore{
  padding-top:1.8em;
  margin-top:-3em;
  margin-left:-5px;
}

/* 記事ページ追記ボタン */
.hidden_box{
  margin-top:1.6em;
}
.hidden_box label{
  padding:0 10px;
  border:solid 1px #666; /* ボタン枠 */
  cursor:pointer;
}
.hidden_box label:hover{
  background:#eee; /* ホバー時ボタン背景色 */
  color:#000;
}
.hidden_box input{
  display:none;
}
.hidden_box .hidden_show{
  height:0;
  padding:0;
  overflow:hidden;
  visibility:hidden; /* 中身を非表示にしておく */
}
.hidden_box input:checked ~ .hidden_show{
  padding:10px 0;
  height:auto;
  visibility:visible; /* クリックで中身表示 */
}

/* 記事移動 */
.entry-navi{
  margin:0 auto 20px;
  width:100%;
  font-size:12px;
}
.entry-prev{
  list-style:none;
  margin:0 5px 0 15px;
}
.entry-next{
  list-style:none;
  margin:0 15px 0 5px;
}
.entry-prev a{
  padding:0 10px;
  display:block;
  position:relative;
  max-width:100%;
  text-align:left;
}
.entry-prev a:before{
  display:block;
  content:"";
  position:absolute;
  top:50%;
  left:-3px;
  width:10px;
  height:10px;
  margin:-7px 0 0 0;
  border-top:solid 2px #666;
  border-right:solid 2px #666;
  -webkit-transform:rotate(-135deg);
  transform:rotate(-135deg);
}
.entry-next a{
  padding:0 10px;
  display:block;
  position:relative;
  max-width:100%;
  text-align:right;
}
.entry-next a:after{
  display:block;
  content:"";
  position:absolute;
  top:50%;
  right:-3px;
  width:10px;
  height:10px;
  margin:-7px 0 0 0;
  border-top:solid 2px #666;
  border-right:solid 2px #666;
  -webkit-transform:rotate(45deg);
  transform:rotate(45deg);
}
/* ページ移動 */
.page_navi{
  padding:10px;
  text-align:center;
  margin:0px auto;
}
/* ページネーション */
#pagenavi{
  line-height:30px;
  font-size:1.0em;
  text-align:center;
}
#pagenavi a,#pagenavi span{
  margin:2px;
  padding:0 11px;
  background:#fff;
  border:1px solid #666;
  border-radius:3px;
  text-decoration:none;
  transition:all 0.3s;
  display:inline-block;
}
#pagenavi span{
  font-weight:bold;
  background:#eee;
}
#pagenavi a.dot{
  text-decoration:none;
  border:1px solid #666;
}
#pagenavi a:hover{
  border-color:#000;
  background:#e2eff8;
  color:#000;
  font-weight:bold;
}
.pagenation{
  overflow:hidden;
  padding:5px;
}
.pagenation ul{
  text-align:center;
  position:relative;
  list-style:none;
  padding-left:0;
}
.pagenation li{
  position:relative;
  display:inline-block;
}
.pagenation_prev,.pagenation_next{
  margin:10px;
  font-size:1.0em;
}
/* ページトップ・ボトムボタン */
.ud-button{
  position: fixed;
  width: 33px;
  bottom: 150px;
  margin-left:1017px;
  text-align: right;
  line-height: 2.1;
}
#pagetop,#pagebottom{
  background-color:rgba(255,255,255,0.5);
  border:1px solid #bbb;
  text-align:center;
  color:#888;
  font-size:18px;
  text-decoration:none;
  padding:5px;
  border-radius:3px;
  z-index:4;
  -webkit-transform:translate3d(0,0,0);
  transform:translate3d(0,0,0);
}
#pagetop:hover,#pagebottom:hover{
  background-color:rgba(255,182,193,0.5);
}

/* コメント部分 */
.com_block{
  padding:10px 55px 20px;
  border-bottom:1px dashed #aaa;
}
.com_title{
  margin:-35px 0 25px 40px;
  min-height:30px;
  color:#753a06;
  font-size:1em;
  border-bottom:1px dotted #ccc;
}
.user-icon{
  position:relative;
  width:50px;
  height:50px;
  border-radius:50%;
  background:rgba(155,155,155,.15) url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAACoUlEQVQ4T5WUX0hTURzHzz333LsdHHdboBsDU5pQgkEREoaEkYYgRBANfJIrV30Qxnzc233bo2Pgg3px6IuwCCIQJIskJAmJgoIKWmjC2BTaHyZnu/fcs7jiYtqd5Hn8/b6/z++c8/uewwGblUql+EKhEIQQXgUAXDqR/GaMffd4POlQKGSeLePOBlRVRX6/f1AQhE4AwJ5pmr8sDc/zlwEAHYZh7Gaz2VeqqtLG2lMgVVWh2+0eaGlpuQYhXFMUZa9RrGlaB2Ns5Ojo6FuxWNxUVZXV86dAyWTSX6vVRk3TXJ+YmPhqd+zFxcVunueHOY5blWU5awtaXl7ur1QqQa/XuxoKhfQm9yfm8/lRp9OZHhsb27IFaZo2whjjJycnX9hB6rGFhYWHEEJTUZS1Zkcb1nXdOTU19fw80Pz8/CNRFCuyLK8329FNSmkvISQ1MzNTsIPNzs56MMYhhNCOoigfbUGJRELCGD+mlGZyudxG41SsAmuqPp9vCCEUIIQ8C4fDJVuQFYzFYl2BQOABY+ynruvboihWrbiu6w5RFPsghFcymczLaDT6o6mPTrq6gsHgoMvlun5wcJBHCB13pZRKbW1t3nK5/DmdTluGLDcFzc3NdWOM71JKGSFkH2NMBUEQrQLDMHRCCMIYtyOEICHk7fT09F+vHRsykUg4JEm6bRhGL6X0S7Va/RSJRHJ2lx2Px30Oh+MGQqhHEISdUqn0PhwOV49BlvUBAE8ODw/fRKPRD+eNvp6LxWK3Wltb7wEAnlpPibPG6Xa7+0ulUjUSiWz8D6SuicfjQ5IkOYrF4hanaVoXz/N9tVptc3x8fP8ioKWlpXaO4wZM09zmVlZWug3DuAMhfC3L8u5FQMlkspMxdl8QhHf//EcXATVq/wByURzmhhuwXAAAAABJRU5ErkJggg==") no-repeat center;
  margin-left:-24px;
  font-family:'object-fit:cover;'; /* IE対策 */
  object-fit:cover;
}
.author-icon{
  width:50px;
  height:50px;
  background:#eee;
  border-radius:50%;
  position:absolute;
  top:0;
  left:0;
  font-family:'object-fit:cover;'; /* IE対策 */
  object-fit:cover;
}
.com_state{
  margin-top:10px;
  text-align:right;
}
/* 管理者コメントの背景に色を付ける 他のスタイル追加可能
記事のコメント投稿、管理画面コメント返信（ログイン時のみ） */
.author-comment{
  background-color:rgb(250,250,250);
}

/* 全記事表示 */
.all_body{
  margin:10px 0;
  padding-bottom:7px;
  border-bottom:1px dotted #ccc;
}
.all_day span{
  color:#777;
}
.all_boutou{
  float:left;
  margin-left:1.5em; /* ブロック全体を1em右 */
  text-indent:-1em; /* 先頭の1文字のみ1em左 */
}
.all_cate{
  text-align:right;
  font-size:0.85em;
}
.all_cate a{
  display:inline-block;
}

/* 検索記事の有無で表示 */
.none{
  display:none;
}
.block{
  display:block;
}

/* Newマーク、日付・タイトル後 */
.new{
  margin-right:5px;
  font-size:0.9em; /* 文字サイズ */
  font-weight:normal;
  color:#d30000; /* 文字の色 */
}

/* タグリスト */
.tag_list,.plugin-tag a{
  word-break:break-all;
  display:inline-block;
  padding:0 5px;
  border-radius:3px;
  font-size:0.8em;
}
.tag_list{
  margin:20px 25px 5px;
  border:1px solid #999;
}
.plugin-tag a{
  margin-bottom:3px;
  border:1px solid #aaa;
}

/*テキストエリア、ボタン等 */
input[type=text],
input[type=password],
select,
textarea{
  font-size:1.0em;
  font-family:sans-serif;
  color:#000;
  border:rgba(119,119,119,.5) solid 1px;
  background-color:rgba(255,255,255,1);
  padding:2px;
  width:100%;
  margin-bottom:5px;
}
nav input[type=text],
nav input[type=password],
nav select,
nav textarea{
  width:100% !important;
}
input[type=submit],
input[type=reset],
input[type=button],
input[type=image],
button{
  color:#000;
  border:rgba(119,119,119,.5) solid 1px;
  background-color:rgba(255,255,255,1);
  padding:2px 4px;
  -webkit-appearance: none;
  border-radius: 0;
}
input[type=checkbox],
input[type=radio]{
  margin:5px;
  vertical-align:middle;
}
::placeholder{
  color:#c3c3c3;
}

/* メニュー部分 */
.entry_title h2,
.menu_title,
.archive h2,
.menu3 h2,
h2.entry_title{
  margin:5px 0;
  padding:5px 0 5px 10px;
  border-left:8px double #bbb;
  border-bottom:1px solid #aaa;
  border-radius:6px 0 0 6px;
  text-align:left;
  color:#000; /* 記事タイトルの色 */
  font-size:1em;
  font-weight:normal;
}
.menu-box{
  padding:5px 10px 30px;
  overflow:hidden;
}

/* プラグインリストマークが不要の場合はここから */
nav ul li,
.menu3 ul li{
  list-style-type:circle;
  margin-left:17px;
}
nav ul li ul li,
.menu3 ul li ul li{
  list-style-type:none;
  margin-left:0;
}
/* リストマーク不要の場合はここまで削除 */

/*プロフィール画像の余白・表示位置 */
.plugin-myimage{
  margin:5px auto;
  text-align:center !important;
  border:none;
}
.plugin-myimage img{
  width:200px;
  height:200px;
  border-radius:50%;
  font-family:'object-fit:cover;'; /* IE対策 */
  object-fit:cover;
}

/* カレンダー */
table.calender{
  width:100%;
}
.calender caption{
  font-size:1.0em;
  border-bottom:1px solid #bbb;
}
.calender th{
  font-weight:normal;
  text-align:center;
  border-bottom:1px solid #bbb;
}
.calender td{
  text-align:center;
  border-bottom:1px dotted #ddd;
}
.calender td a:link,.calender td a:visited{
  color:#a52a2a;
  text-shadow:0px 0px 12px #f00;
}
.calender td a:hover{
  color:#e747b3;
  text-decoration:none;
}
th#sun{
  color:#da0b00;
}
th#sat{
  color:#1e90ff;
}

/*ハンバーガーボタン*/
.hm_bg{
  position:fixed;
  top:20px;
  right:27px;
  width:55px;
  height:51px;
  background:rgba(245,244,239,0.5);
  border-radius:50%;
  z-index:19;
}
.el_humburger,
.el_humburger span{
  display:inline-block;
  -webkit-transition:all .2s linear;
  transition:all .2s linear;
  box-sizing:border-box;
}
.el_humburger{
  position:fixed;
  top:34px;
  right:30px;
  width:50px;
  height:26px;
  z-index:20;
  cursor:pointer;
  background:rgba(255,255,255,0);
  border:none;
  outline:none;
}
.el_humburger span{
  position:absolute;
  left:0;
  width:100%;
  height:2px;
  background-color:#777;
}
.el_humburger span:nth-of-type(1){
  top:0;
}
.el_humburger span:nth-of-type(2){
  top:12px;
}
.el_humburger span:nth-of-type(3){
  bottom:0;
}
.js_humburgerOpen .el_humburger span:nth-of-type(1){
  -webkit-transform:translateY(12px) rotate(-45deg);
  -ms-transform:translateY(12px) rotate(-45deg);
  transform:translateY(12px) rotate(-45deg);
}
.js_humburgerOpen .el_humburger span:nth-of-type(2){
  opacity:0;
}
.js_humburgerOpen .el_humburger span:nth-of-type(3){
  -webkit-transform:translateY(-12px) rotate(45deg);
  -ms-transform:translateY(-12px) rotate(45deg);
  transform:translateY(-12px) rotate(45deg);
}
.navi{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  background:rgba(245,244,239,0.95);
  width:0;
  z-index:6;
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
  -webkit-transition:all 500ms ease-out;
  transition:all 500ms ease-out;
  overflow:hidden;
}
.js_humburgerOpen .navi{
  width:320px;
}
/* 右メニュータイプのみスクロールバーを少し隠す */
.navi_inner{
  width:320px;
  margin:0 auto;
  margin-left:12px;
  text-align:left;
  height:100vh;
  padding:0 25px 100px;
  overflow-y: scroll;
}
/* メニュートップ・ボトムボタン */
.m-scroll{
  position:absolute;
  top:45%;
  left:10px;
  z-index:6;
  font-size:14px;
  -ms-writing-mode:tb-rl;
  -webkit-writing-mode:vertical-rl;
  writing-mode:vertical-rl;
  line-height:1;
}
.m-scroll span{
  color:#000;
}
#u-top{
  visibility:hidden;
  margin-bottom:45px;
}
#u-bottom{
  visibility:hidden;
}


/* 以下、表示サイズで変更 */

@media screen and (max-width: 1130px){
.ud-button{
  margin:0;
  right:0;
}
}

@media screen and (max-width: 979px){
.navi_inner{
  width:320px;
  margin-left:0; /* 右メニュータイプ、タブレット・SPはスクロールバーの分を戻す */
}
}

@media screen and (max-width:779px){
.pd-plus{
  padding:20px 15px 15px;
}
.con_body{
  margin:5px 10px 0;
}
.com_block{
  padding:10px 25px 20px;
}
.pan{
  display:none;
}
}

@media screen and (min-width:760px){
/* 入力フォーム２列 */
.form-left{
  width:50%;
  text-align:left;
  padding-right:10px;
  float:left;
}
.form-right{
  width:50%;
  text-align:left;
  padding:0 0 10px 10px;
  float:left;
}
}

@media screen and (max-width: 600px){
header.header{
  position:relative;
  margin:0 auto;
  padding:5px !important;
  background:transparent;
}
h1#blog-name{
  line-height:1.2;
  margin-right:40px;
}
.introduction{
  padding-right:0px;
  line-height:1.5;
}
.hm_bg{
  background:rgba(255,255,255,0);
  display:block;
  position:absolute;
  top:0;
  right:0;
}
.js_humburgerOpen .hm_bg{
  padding-left:300px;
}
#u-top{
  margin-bottom:25px;
}
.el_humburger{
  display:block;
  right:20px;
  top:auto;
  margin-top:7px;
  width:32px;
  height:26px;
}
.js_humburgerOpen .navi{
  width:320px;
}
}

@media screen and (min-width:600px){
.entry-navi{
  display:-webkit-box;
  display:flex;
  -webkit-box-pack:center;
  justify-content:center;
}
.entry-prev,.entry-next{
  max-width:45%;
}
}

@media screen and (min-width: 580px) and (max-width: 779px){
.left{
  float:none;
  width:100%;
  margin:0 0 10px;
}
}

@media screen and (max-width:579px){
.pd-plus{
  padding:10px 5px;
}
.con_body{
  margin:0 5px;
}
.com_block{
  padding:10px 10px 20px;
}
.introduction{
  display:none;
}
}

@media screen and (min-width:580px){
/* エントリー記事2列 */
.col_2{
  display:-webkit-flex; /* Safari */
  display:-ms-flexbox; /* forIE10 */
  display:flex;
  -webkit-flex-wrap:wrap; /* Safari */
  -ms-flex-wrap:wrap; /* forIE10 */
  flex-wrap:wrap;
  -webkit-box-pack:justify;
  -ms-flex-pack:justify;
  justify-content:space-between;
}
.col_2 .blog-con{
  flex-basis:49%;
  max-width:49%; /* forIE10 */
  padding:15px;
}
.col_2::after{
  display:block;
  content:"";
  width:49%;
}
}

@media screen and (max-width: 480px){
.topimg{
  padding-top:50.00%; /* 画像の高さ 数値増で左右見切り */
}
h1#blog-name{
  margin:5px 0;
  padding:0 40px 0 0;
  font-size:1.3em;
}
.left{
  float:none;
  width:100%;
  margin:0 0 10px;
}
.menu_title{
  margin:10px 0;
  cursor:pointer;
}
.tree-m{
  display:none; /* メニューを閉じて表示 */
}
.m-scroll{
  display:none;
}
#pagenavi{
  line-height:1.8;
  font-size:0.8em;
}
.pagenation{
  padding:10px 0 80px;
}
.pagenation_prev,.pagenation_next{
  margin:7px;
  padding:6px;
  font-size:0.8em;
}
.pagenation li{
  display:block;
}
nav{
  padding-bottom:200px;
}
.tag_list{
  margin:15px;
}
}

@media screen and (max-width:319px){
.js_humburgerOpen .navi{
  width:100%;
}
.navi_inner{
  width:280px;
}
}

/************************************
** カエレバ・ヨメレバ
************************************/
.booklink-box,
.kaerebalink-box {
    margin: 20px auto;
    padding: 25px 25px 18px;
    border: double #CCC;
    overflow: hidden;
    font-size: small;
    border: medium double #ccc;
    border-radius: 5px;
}

.booklink-image,
.kaerebalink-image {
    margin: 0 15px 0 0 !important;
    float: left;
}

.booklink-image img,
.kaerebalink-image img {
    margin: 0 auto;
    text-align: center;
}

.booklink-info,
.kaerebalink-info {
    margin: 0;
    text-align: left;
    line-height: 120%;
    overflow: hidden;
}

.booklink-name,
.kaerebalink-name {
    font-size: 16px;
    margin-bottom: 24px;
    line-height: 1.5em;
}

.booklink-powered-date,
.kaerebalink-powered-date {
     font-size: 8pt;
     margin-top: 10px;
     font-family: verdana;
     line-height: 120%;
}

.booklink-powered-date,
.kaerebalink-detail {
    margin-bottom: 15px;
}

.booklink-link2,
.kaerebalink-link1 {
    margin-top: 10px;
}

.kaerebalink-link1 div,
.booklink-link2 div {
    width: 30%;
    display: inline-block;
    cursor: pointer;
    margin: 5px;
    text-align: center;
    float: left;
    padding: 9px 1px;
    text-decoration: none;
    font-weight: 800;
    text-shadow: 1px 1px 1px #dcdcdc;
    font-size: 12px;    
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #f6f6f6));
    background: -moz-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
    background: -webkit-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
    background: -o-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
    background: -ms-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
    background: linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0);
    background-color: #ffffff;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    border: 1px solid #ddd;
}

.kaerebalink-link1 div:hover,
.booklink-link2 div:hover {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f6f6f6), color-stop(1, #ffffff));
    background: -moz-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
    background: -webkit-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
    background: -o-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
    background: -ms-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
    background: linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#ffffff',GradientType=0);
    background-color: #f6f6f6;
}

.kaerebalink-link1 div:hover,
.booklink-link2 div:hover {
    background: #ffffff linear-gradient(to bottom, #ffffff 5%, #e9e9e9 100%) repeat scroll 0 0 !important;
}

.kaerebalink-link1 div:active,
.booklink-link2 div:active {
    position: relative;
    top: 1px;
}

.kaerebalink-link1 div a,
.booklink-link2 div a {
    text-decoration: none;
}

.booklink-footer {
    clear: left;
}

/* リンクカラー */
.shoplinkamazon a {
    color: #FF9901;
}

.shoplinkrakuten a {
    color: #c20004;
}

.shoplinkkindle a {
    color: #007dcd;
}

.shoplinkkakakucom a {
    color: #314995;
}

.shoplinkyahoo a {
    color: #7b0099;
}

.shoplinkseven a {
    color: #000;
}

.shoplinkehon a {
    color: #0086CD;
}

.shoplinkkino a {
    color: #004097;
}

.shoplinkjun a {
    color: #1C2C5E;
}

.shoplinktoshokan a {
    color: #27B5E9;
}

/* カード全体像 */
.blogcard {
  position: relative;
  width: 100%;
  max-width: 500px;/* 最大横幅 */
  margin: 0 0 30px;
  border-radius: 2px;
  box-shadow: 0 20px 40px rgba(0,0,0,.1);
  background: white;
  color: rgb(51,51,51);
}

.blogcard-content {
  display: flex;
  justify-content: space-between;
}

.blogcard-image {
  width: 40%;
}

/* 画像 */
.blogcard-image-wrapper {
  position: relative;
  padding: 100% 0 0;
}

.blogcard-image-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blogcard-text {
  position: relative;
  width: 60%;
  padding: 5px 10px;
}

.blogcard-text::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: -10%;
  width: 10%;
  height: 100%;
  background: linear-gradient(98deg,transparent 49.5%,white 50.5%);
}

/* タイトル */
.blogcard-title {
  margin: 0 !important;
  font-weight: bold;
  font-size: 13px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  max-height: calc(13px * 1.4 * 2);
  overflow: hidden;
}

.blogcard-title a {
  color: rgb(61,63,68);
  word-break: break-all;
}
.blogcard-title a:hover {
  text-decoration: underline;
}

/* 引用 */
.blogcard blockquote {
  position: static;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
}

.blogcard blockquote::before,
.blogcard blockquote::after {
  content: none;
}

/* 記事概要 */
.blogcard-description {
  margin: .5em 0 !important;
  font-size: 12px;
  line-height: 1.5 !important;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  max-height: calc(12px * 1.5 * 1);
  overflow:hidden;
}

/* フッター(元記事サイト名とリンク) */
.blogcard-footer {
  position: absolute;
  bottom: 4px;
  right: 0;
  width: 60%;
  padding: 0 10px;
  font-size: 11px;
  line-height: 1.2;
}

.blogcard-footer a {
  color: rgb(154,165,171);
  text-decoration: underline;
}

.blogcard-footer a img {
  margin-right: 5px;
}

/* has no image */
.blogcard-hasnoimage .blogcard-text {
  width: 100%;
}

.blogcard-hasnoimage .blogcard-text::before {
  content: none;
}

.blogcard-hasnoimage .blogcard-footer {
  position: static;
  width: 100%;
  padding: 10px 20px;
}

@media screen and (min-width:375px) {
  .blogcard-description {
    margin: 1em 0 !important;
  }
}
@media screen and (min-width:414px) {
  .blogcard-title {
    font-size: 14px;
    -webkit-line-clamp: 3;
    max-height: calc(14px * 1.5 * 3);
  }
  .blogcard-description {
    font-size: 13px;
    max-height: calc(13px * 1.5 * 1);
  }
  .blogcard-footer {
    bottom: 8px;
    font-size: 12px;
  }
}
@media screen and (min-width: 768px) {
  .blogcard-text {
    padding: 10px 20px;
  }
  .blogcard-title {
    font-size: 15px;
    max-height: calc(15px * 1.4 * 3);
  }
  .blogcard-description {
    -webkit-line-clamp: 2;
    max-height: calc(12px * 1.5 * 2);
  }
  .blogcard-footer {
    padding: 0 20px;
  }
}

/* darkmode対応 */
@media (prefers-color-scheme:dark) {
  .blogcard {
    box-shadow: 0 20px 40px rgba(0,0,0,.5);
    background: rgb(51,51,51);
    color: rgb(240,240,240);
  }
  .blogcard-text::before {
    background: linear-gradient(98deg,transparent 49.5%,rgb(51,51,51) 50.5%);
  }
  .blogcard-title a {
    color: white;
  }
}

ホームブログ運営
CSSコピペでOK！カエレバ・ヨメレバ・トマレバをまとめてカスタマイズ[ver2]
2020年4月26日
カエレバ・ヨメレバ・トマレバをカスタマイズ

7 
64 
37 
 
64
記事タイトルとURLをコピーする

 
Amazonや楽天などの商品や書籍を紹介できる「カエレバ」「ヨメレバ」、そして楽天トラベルやYahoo!トラベルなど宿泊予約サイトのプランを紹介できる「トマレバ」は、以前から重宝している便利なツールです。

本日はこの「カエレバ」「ヨメレバ」「トマレバ」3つのデザインをまとめてカスタマイズしたので紹介します。

以前に「CSSコピペでOK！カエレバ・ヨメレバ・トマレバのデザインをまとめてカスタマイズ！」で紹介したものと同様レスポンシブデザインですので、パソコン・タブレット・スマホなど各画面サイズに対応します。

CSSをコピペして頂ければカスタマイズ完了しますので、どうぞお試しください。

「バリューコマース」や「もしもアフィリエイト」を利用すると、様々なショップのボタンを表示させることが可能になります。設定がお済みでない方は、それぞれ以下のリンクから無料会員登録を済ませ、アフィリエイトコードを取得しましょう。
バリューコマース
もしもアフィリエイト
スポンサーリンク

 
目次 [非表示]
カエレバ・ヨメレバ・トマレバをまとめてカスタマイズ
デフォルトデザインを確認
カスタマイズ後のデザイン（PC）
カスタマイズ後のデザイン（タブレットやスマホ）
カスタマイズはCSSコピペで完了！
CSSコード内容
カエレバ・ヨメレバ・トマレバの推奨設定
カスタマイズに関してよくあるご質問（Q&A）
商品/書籍/ホテル名リンクの下線を消したい
リンクにアイコンが表示されてしまうので消したい
カエレバ・ヨメレバ・トマレバのカスタマイズまとめ
カエレバ・ヨメレバ・トマレバをまとめてカスタマイズ
デフォルトデザインを確認
カスタマイズしたものをご覧いただく前に、まずはデフォルトのデザイン「amazlet風-2(cssカスタマイズ用)」をあらためて確認しておきましょう。

カエレバ・ヨメレバ・トマレバのデフォルト
上の画像はヨメレバを「amazlet風-2(cssカスタマイズ用)」で作成して表示したものです。商品（書籍）タイトルや各サイトへのテキストリンクが並んでいるシンプルなデザインです。
　※ここでは省略しますが、カエレバ・トマレバも特にカスタマイズしなければ同様のデザインです。

「cssカスタマイズ用」という名前ですが、カスタマイズせずこのまま使用することもできます。ただしカエレバ・ヨメレバ・トマレバはいずれも利用者が多く、カスタマイズせずに使用すると多くのブログなどとかぶってしまいます。

それもとくに気にしないなら問題ありませんが、せっかく載せるなら自分のサイトにあったデザインや、自分好みのデザインで表示させたいですよね？

そこで今回カスタマイズした、カエレバ・ヨメレバ・トマレバのデザインがこちらです。

カスタマイズ後のデザイン（PC）
カエレバをカスタマイズ
基本シンプルなデザインが好みなので余計な装飾は控え、各サイトへのテキストリンクをサイトカラーのボタンにしています。

ヨメレバをカスタマイズ
マウスオーバーしたボタンは白抜き背景になり、テキスト部分がサイトカラーになります。

トマレバをカスタマイズ
カエレバ・ヨメレバ・トマレバいずれも基本デザインは共通です。異なるのはサイト別のボタンカラーぐらい。

カスタマイズ後のデザイン（タブレットやスマホ）
レスポンシブデザインのため、画面横幅の狭いタブレットやスマホで表示した場合も基本的なデザインは変わりません。

ヨメレバをカスタマイズタブレット（ここでは768px以下）で表示したデザインがこちら。PC表示で横並びだったサムネイル画像と各サイトへのリンクを、中央寄せの縦並びへ変更。各サイトへのボタンは1行に3つ並んで表示されます。
カエレバをカスタマイズスマホ（ここでは480px以下）の表示したデザインがこちら。基本はタブレットと同様ですが、画面横幅が狭いので各サイトへのボタンを1行に2つに表示させています。
ここまではわかりやすくカエレバ・ヨメレバ・トマレバいずれもすべてのサイト（ボタン）を表示させたサンプル画像を用意しました。でも普段使う時って、僕自身そうなんですが2〜3種類になることが多いですよね。

カエレバをカスタマイズ
上は僕がよく利用するパターンです。カエレバでAmazon・楽天・Yahoo!ショッピングに絞るとこんな感じです。

こちらのデザインがイマイチでしたら別バージョンもあります。

CSSコピペでOK！カエレバ・ヨメレバ・トマレバのデザインをまとめてカスタマイズ！
CSSコピペでOK！カエレバ・ヨメレバ・トマレバのデザインをまとめてカスタマイズ！
続きを読む
CSSコピペでOK！カエレバ・ヨメレバ・トマレバをシンプルにカスタマイズ[モノクロ]
CSSコピペでOK！カエレバ・ヨメレバ・トマレバをシンプルにカスタマイズ[モノクロ]
続きを読む
スポンサーリンク

 
カスタマイズはCSSコピペで完了！
それでは今回紹介したデザインのCSSを紹介します。

CSSコード内容
/*=================================================================================
	カエレバ・ヨメレバ・トマレバ
=================================================================================*/

.cstmreba {
	width:98%;
	height:auto;
	margin:36px auto;
	font-family:'Lucida Grande','Hiragino Kaku Gothic ProN',Helvetica, Meiryo, sans-serif;
	line-height: 1.5;
	word-wrap: break-word;
	box-sizing: border-box;
	display: block;
}
/* WordPressで自動挿入されるPタグの余白を対処 */
.cstmreba p {
	margin: 0;
	padding: 0;
}
.cstmreba a {
	transition: 0.8s ;
	color:#285EFF; /* テキストリンクカラー */
}
.cstmreba a:hover {
	color:#FFCA28; /* テキストリンクカラー(マウスオーバー時) */
}
.cstmreba .booklink-box,
.cstmreba .kaerebalink-box,
.cstmreba .tomarebalink-box {
	width: 100%;
	background-color: #fafafa; /* 全体の背景カラー */
	overflow: hidden;
	border-radius: 0px;
	box-sizing: border-box;
	padding: 12px 8px;
	box-shadow: 0px 2px 5px 0 rgba(0,0,0,.26);
}
/* サムネイル画像ボックス */
.cstmreba .booklink-image,
.cstmreba .kaerebalink-image,
.cstmreba .tomarebalink-image {
	width:150px;
	float:left;
	margin:0 14px 0 0;
	text-align: center;
	background: #fff;
}
.cstmreba .booklink-image a,
.cstmreba .kaerebalink-image a,
.cstmreba .tomarebalink-image a {
	width:100%;
	display:block;
}
.cstmreba .booklink-image a img,
.cstmreba .kaerebalink-image a img,
.cstmreba .tomarebalink-image a img {
	margin:0 ;
	padding: 0;
	text-align:center;
	background: #fff;
}
.cstmreba .booklink-info,.cstmreba .kaerebalink-info,.cstmreba .tomarebalink-info {
	overflow:hidden;
	line-height:170%;
	color: #333;
}
/* infoボックス内リンク下線非表示 */
.cstmreba .booklink-info a,
.cstmreba .kaerebalink-info a,
.cstmreba .tomarebalink-info a {
	text-decoration: none;
}
/* 作品・商品・ホテル名 リンク */
.cstmreba .booklink-name>a,
.cstmreba .kaerebalink-name>a,
.cstmreba .tomarebalink-name>a {
	border-bottom: 1px solid ;
	font-size:16px;
}
/* powered by */
.cstmreba .booklink-powered-date,
.cstmreba .kaerebalink-powered-date,
.cstmreba .tomarebalink-powered-date {
	font-size:10px;
	line-height:150%;
}
.cstmreba .booklink-powered-date a,
.cstmreba .kaerebalink-powered-date a,
.cstmreba .tomarebalink-powered-date a {
	color:#333;
	border-bottom: none ;
}
.cstmreba .booklink-powered-date a:hover,
.cstmreba .kaerebalink-powered-date a:hover,
.cstmreba .tomarebalink-powered-date a:hover {
	color:#333;
	border-bottom: 1px solid #333 ;
}
/* 著者・住所 */
.cstmreba .booklink-detail,.cstmreba .kaerebalink-detail,.cstmreba .tomarebalink-address {
	font-size:12px;
}
.cstmreba .kaerebalink-link1 div img,.cstmreba .booklink-link2 div img,.cstmreba .tomarebalink-link1 div img {
	display:none !important;
}
.cstmreba .kaerebalink-link1, .cstmreba .booklink-link2,.cstmreba .tomarebalink-link1 {
	display: inline-block;
	width: 100%;
	margin-top: 5px;
}
.cstmreba .booklink-link2>div,
.cstmreba .kaerebalink-link1>div,
.cstmreba .tomarebalink-link1>div {
	float:left;
	width:24%;
	min-width:128px;
	margin:0.5%;
}
/***** ボタンデザインここから ******/
.cstmreba .booklink-link2 a,
.cstmreba .kaerebalink-link1 a,
.cstmreba .tomarebalink-link1 a {
	width: 100%;
	display: inline-block;
	text-align: center;
	box-sizing: border-box;
	margin: 1px 0;
	padding:3% 0.5%;
	border-radius: 8px;
	font-size: 13px;
	font-weight: bold;
	line-height: 180%;
	color: #fff;
	box-shadow: 0px 2px 4px 0 rgba(0,0,0,.26);
}
/* トマレバ */
.cstmreba .tomarebalink-link1 .shoplinkrakuten a {background: #76ae25; border: 2px solid #76ae25; }/* 楽天トラベル */
.cstmreba .tomarebalink-link1 .shoplinkjalan a { background: #ff7a15; border: 2px solid #ff7a15;}/* じゃらん */
.cstmreba .tomarebalink-link1 .shoplinkjtb a { background: #c81528; border: 2px solid #c81528;}/* JTB */
.cstmreba .tomarebalink-link1 .shoplinkknt a { background: #0b499d; border: 2px solid #0b499d;}/* KNT */
.cstmreba .tomarebalink-link1 .shoplinkikyu a { background: #bf9500; border: 2px solid #bf9500;}/* 一休 */
.cstmreba .tomarebalink-link1 .shoplinkrurubu a { background: #000066; border: 2px solid #000066;}/* るるぶ */
.cstmreba .tomarebalink-link1 .shoplinkyahoo a { background: #ff0033; border: 2px solid #ff0033;}/* Yahoo!トラベル */
.cstmreba .tomarebalink-link1 .shoplinkhis a { background: #004bb0; border: 2px solid #004bb0;}/*** HIS ***/
/* カエレバ */
.cstmreba .kaerebalink-link1 .shoplinkyahoo a {background:#ff0033; border:2px solid #ff0033; letter-spacing:normal;} /* Yahoo!ショッピング */
.cstmreba .kaerebalink-link1 .shoplinkbellemaison a { background:#84be24 ; border: 2px solid #84be24;}	/* ベルメゾン */
.cstmreba .kaerebalink-link1 .shoplinkcecile a { background:#8d124b; border: 2px solid #8d124b;} /* セシール */
.cstmreba .kaerebalink-link1 .shoplinkwowma a { background:#ea5404; border: 2px solid #ea5404;} /* Wowma */
.cstmreba .kaerebalink-link1 .shoplinkkakakucom a {background:#314995; border: 2px solid #314995;} /* 価格コム */
/* ヨメレバ */
.cstmreba .booklink-link2 .shoplinkkindle a { background:#007dcd; border: 2px solid #007dcd;} /* Kindle */
.cstmreba .booklink-link2 .shoplinkrakukobo a { background:#bf0000; border: 2px solid #bf0000;} /* 楽天kobo */
.cstmreba .booklink-link2  .shoplinkbk1 a { background:#0085cd; border: 2px solid #0085cd;} /* honto */
.cstmreba .booklink-link2 .shoplinkehon a { background:#2a2c6d; border: 2px solid #2a2c6d;} /* ehon */
.cstmreba .booklink-link2 .shoplinkkino a { background:#003e92; border: 2px solid #003e92;} /* 紀伊國屋書店 */
.cstmreba .booklink-link2 .shoplinkebj a { background:#f8485e; border: 2px solid #f8485e;} /* ebookjapan */
.cstmreba .booklink-link2 .shoplinktoshokan a { background:#333333; border: 2px solid #333333;} /* 図書館 */
/* カエレバ・ヨメレバ共通 */
.cstmreba .kaerebalink-link1 .shoplinkamazon a,
.cstmreba .booklink-link2 .shoplinkamazon a {
	background:#FF9901;
	border: 2px solid #ff9901;
} /* Amazon */
.cstmreba .kaerebalink-link1 .shoplinkrakuten a,
.cstmreba .booklink-link2 .shoplinkrakuten a {
	background: #bf0000;
	border: 2px solid #bf0000;
} /* 楽天 */
.cstmreba .kaerebalink-link1 .shoplinkseven a,
.cstmreba .booklink-link2 .shoplinkseven a {
	background:#225496;
	border: 2px solid #225496;
} /* 7net */
/****** ボタンカラー ここまで *****/

/***** ボタンデザイン　マウスオーバー時ここから *****/
.cstmreba .booklink-link2 a:hover,
.cstmreba .kaerebalink-link1 a:hover,
.cstmreba .tomarebalink-link1 a:hover {
	background: #fff;
}
/* トマレバ */
.cstmreba .tomarebalink-link1 .shoplinkrakuten a:hover { color: #76ae25; }/* 楽天トラベル */
.cstmreba .tomarebalink-link1 .shoplinkjalan a:hover { color: #ff7a15; }/* じゃらん */
.cstmreba .tomarebalink-link1 .shoplinkjtb a:hover { color: #c81528; }/* JTB */
.cstmreba .tomarebalink-link1 .shoplinkknt a:hover { color: #0b499d; }/* KNT */
.cstmreba .tomarebalink-link1 .shoplinkikyu a:hover { color: #bf9500; }/* 一休 */
.cstmreba .tomarebalink-link1 .shoplinkrurubu a:hover { color: #000066; }/* るるぶ */
.cstmreba .tomarebalink-link1 .shoplinkyahoo a:hover { color: #ff0033; }/* Yahoo!トラベル */
.cstmreba .tomarebalink-link1 .shoplinkhis a:hover { color: #004bb0; }/*** HIS ***/
/* カエレバ */
.cstmreba .kaerebalink-link1 .shoplinkyahoo a:hover {color:#ff0033;} /* Yahoo!ショッピング */
.cstmreba .kaerebalink-link1 .shoplinkbellemaison a:hover { color:#84be24 ; }	/* ベルメゾン */
.cstmreba .kaerebalink-link1 .shoplinkcecile a:hover { color:#8d124b; } /* セシール */
.cstmreba .kaerebalink-link1 .shoplinkwowma a:hover { color:#ea5404; } /* Wowma */
.cstmreba .kaerebalink-link1 .shoplinkkakakucom a:hover {color:#314995;} /* 価格コム */
/* ヨメレバ */
.cstmreba .booklink-link2 .shoplinkkindle a:hover { color:#007dcd;} /* Kindle */
.cstmreba .booklink-link2 .shoplinkrakukobo a:hover { color:#bf0000; } /* 楽天kobo */
.cstmreba .booklink-link2 .shoplinkbk1 a:hover { color:#0085cd; } /* honto */
.cstmreba .booklink-link2 .shoplinkehon a:hover { color:#2a2c6d; } /* ehon */
.cstmreba .booklink-link2 .shoplinkkino a:hover { color:#003e92; } /* 紀伊國屋書店 */
.cstmreba .booklink-link2 .shoplinkebj a:hover { color:#f8485e; } /* ebookjapan */
.cstmreba .booklink-link2 .shoplinktoshokan a:hover { color:#333333; } /* 図書館 */
/* カエレバ・ヨメレバ共通 */
.cstmreba .kaerebalink-link1 .shoplinkamazon a:hover,
.cstmreba .booklink-link2 .shoplinkamazon a:hover {
	color:#FF9901; } /* Amazon */
.cstmreba .kaerebalink-link1 .shoplinkrakuten a:hover,
.cstmreba .booklink-link2 .shoplinkrakuten a:hover {
	color: #bf0000; } /* 楽天 */
.cstmreba .kaerebalink-link1 .shoplinkseven a:hover,
.cstmreba .booklink-link2 .shoplinkseven a:hover {
	color:#225496;} /* 7net */
/***** ボタンデザイン　マウスオーバー時ここまで *****/
.cstmreba .booklink-footer {
	clear:both;
}

/*****  解像度768px以下のスタイル *****/
@media screen and (max-width:768px){
	.cstmreba .booklink-image,
	.cstmreba .kaerebalink-image,
	.cstmreba .tomarebalink-image {
		width:100%;
		float:none;
	}
	.cstmreba .booklink-link2>div,
	.cstmreba .kaerebalink-link1>div,
	.cstmreba .tomarebalink-link1>div {
		width: 32.33%;
		margin: 0.5%;
	}
	.cstmreba .booklink-info,
	.cstmreba .kaerebalink-info,
	.cstmreba .tomarebalink-info {
	  text-align:center;
	  padding-bottom: 1px;
	}
}

/*****  解像度480px以下のスタイル *****/
@media screen and (max-width:480px){
	.cstmreba .booklink-link2>div,
	.cstmreba .kaerebalink-link1>div,
	.cstmreba .tomarebalink-link1>div {
		width: 49%;
		margin: 0.5%;
	}
}