/*
Theme Name: ZENO-TEAL
Theme URI: http://blog.hatena.ne.jp/-/store/theme/10328749687225937733
Description: *ZENO-TEALの特徴トップページをカード型にレイアウトしたテーマです。メインカラーにMaterial Designでよく使われるTealを使っています。全体的にフラットに仕上げました。*使い方と注意事項- トップページはカード型ですが、広告が表示される場合は各記事の上に大きく表示されてしまいます。<del>なのではてなブログProで広告非表示にしている方でないと、使うのはおすすめしません。 </del><span style="color:#f0f;font-weight:bold;">広告が出ている場合、Googleアドセンスのポリシー違反になる恐れがあるので、無料版では使わないでください。</span>- 各記事の一番最初に画像（16:9が望ましい）があることが前提となっています。（それがトップページに表示されます。）- <b>「続きを読む」を入れている必要があります。</b>- レスポンシブ対応しています。- はてなブログの設定から、トップページの記事数を偶数にすることをオススメします。*デモサイト- <a href="http://zeno-teal.hatenablog.com/">http://zeno-teal.hatenablog.com/</a>このテーマを使ったカスタマイズの方法もいくつか紹介しています。*更新履歴2019.01.26 最初や最後の子要素のpやliのmarginを0にしました。2017.09.25 http://～の画像があったのでhttps://～に変更2017.05.08 無料版はてなブログだとアドセンスのポリシー違反になる恐れがあることを注意書きに追記2017.05.01 トップページの画像が16:9じゃない時にうまいこと拡大縮小して16:9で表示されるようにするなど、いくつかの変更と修正参考→<a href="http://zeno-teal.hatenablog.com/entry/2017/04/23/235653">http://zeno-teal.hatenablog.com/entry/2017/04/23/235653</a>2017.03.15 いくつかの不具合を修正2017.03.11 初版
Author: c-miya
Author URI: http://blog.hatena.ne.jp/c-miya/
*/
/*
  Theme: zeno-teal
  Author: orefolder
  Responsive: yes
*/
html{box-sizing:border-box;font-size:95%;}
*,:after,:before{box-sizing:inherit}
body {font-size:100%;font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
margin:0 0 0 0;padding:0 0 0 0;color:#33403d;
background-color: #f8f9fb;
background-size: 14px 14px;
background-position: 0 0, 7px 7px;
}

::selection {background:#b2dfdb;color:#252525;}
::-moz-selection {background:#b2dfdb;color:#252525;}
a {outline:none;color:#333;text-decoration:none;
-webkit-transition: All 0.2s ease;-moz-transition: All 0.2s ease;-o-transition: All 0.2s ease;-ms-transition: All 0.2s ease;transition: All 0.2s ease;}
a:hover {color:#333;}
a img,img{border:0px;vertical-align:bottom;}
p{line-height:1.8;}
h1,h2,h3,h4,h5,h6{margin:0 0 0 0;padding:0 0 0 0;font-size:100%;}
p:first-child,
ul:first-child,
ol:first-child,
li:first-child{
	margin-top: 0;
}
p:last-child,
ul:last-child,
ol:last-child,
li:last-child{
	margin-bottom: 0;
}
/* フォント */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v10/zhcz-_WihjSQC0oHJ9TCYPk_vArhqVIZ0nv9q090hN8.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: local('Montserrat Bold'), local('Montserrat-Bold'), url(https://fonts.gstatic.com/s/montserrat/v10/IQHow_FEYlDC4Gzy_m8fcoWiMMZ7xLd792ULpGE4W_Y.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

/* はてなグローバルヘッダー */
#globalheader-container{background:#f0f0f0;color:#fff;}

/* タイトル */
#blog-title{
     width:100%;
     height:200px;
     overflow:hidden;
     display:table;
     margin:0 0 0rem 0;
     background:#fff;
     color:#f0f0f0;
}
#blog-title #blog-title-inner{
     display:table-cell;
     text-align:center;
     vertical-align:middle;
}
#blog-title #title a{
     font-size:48px;
     font-weight:700;
     line-height:1;
     color:#f0f0f0;
     letter-spacing:0.15em;
}

/* ヘッダー */
#top-editarea{
   width:100%;
   margin:0 auto 2rem auto;
}

.header-image-only #blog-title {
  background: #fff !important;
}

/* ↓↓ヘッダー画像レスポンシブ↓↓ */
@media (max-width:480px) {
.header-image-only #blog-title {
height: 125px;
}
.header-image-only #blog-title #blog-title-inner {
background-size: cover;
height: 125px;
}
} 
/* ↑↑ヘッダー画像レスポンシブ↑↑ */

/* ↓↓スライドメニュー設置↓↓ */
#gnav {
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
  margin: 0 0 10px;
  background: #f0f0f0;
  font-size: 0;
  padding: 0 0 0;
}

#gnav .menu a {
  display: block;
  color: #a5a5a5;
  font-size: 14.3px;
  font-weight: bold;
  text-decoration:none;
  text-align: center;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0 1em;
}

#gnav .gnav-inner {
  width: 100%;
  padding: 12px 20px;
  overflow-x: auto;
  overflow-y: hidden;
  box-sizing: border-box;
  text-align: center;
  white-space: nowrap;
  margin: 0 auto;
  -webkit-font-smoothing: antialiased;
  -webkit-overflow-scrolling: touch;
  background: #f0f0f0;
}

#gnav .menu {
  display: inline-block;
}
/* ↑↑スライドメニュー設置↑↑ */

/* レイアウト */
#content{
     width:1174px;
     margin:2rem auto;
     background:#fff;
     padding:40px;
     box-shadow:0px 0px 3px rgba(0,0,0,0.1);
}
.page-index #content{
     padding:40px 40px 40px 25px;
}

#content-inner{
     display:-webkit-flex;
     display:flex;
     -webkit-flex-wrap:wrap;
     flex-wrap:wrap;
     -webkit-justify-content:space-between;
     justify-content:space-between;
}

#wrapper{
     width:728px;
}
.page-index #wrapper{
     width:758px;
     margin:0 0 0 0;
}
.page-entry #wrapper, .page-preview #wrapper{
     width:763px;
     margin:-40px 0 0 -40px;
}

#box2{
width:336px;
}
.page-index #main-inner{
     display:-webkit-flex;
     display:flex;
     -webkit-flex-wrap:wrap;
     flex-wrap:wrap;
     -webkit-justify-content:space-between;
     justify-content:space-between;
}
.page-index #wrapper{
     position:relative;
     top:-15px;
}

/* エントリー */
.entry{
     width:100%;
}
.entry-content p{
     font-size:16.5px;
     margin:0 0 1.5em 0;
     padding:0 0 0 0;
}
.entry-content p a {
     color: #1B93C6;
     text-decoration:underline;
}
.entry-content p a:hover {
     background:#e0f2f1;
}
.entry-content p a:visited {
     color:#4e92df;
}

.page-index .entry{
     width:379px;
     height:400px;
     background:#fff;
     margin:0 0 8px 0;
     padding:15px 0 0 0;
     position:relative;
}
.page-index .entry:hover{
     background:#f0f0f0;
     transition: 1s;
}
.page-index .entry:before,.page-index .entry:after{
     position:absolute;
     top:399px;
     content:'';
     display:inline-block;
     width:0;
     height:1px;
     background:#666;
     transition:0.3s;
}
.page-index .entry:before{
     left:50%;
}
.page-index .entry:after{
     right:50%;
}
.page-index .entry:hover:before,.page-index .entry:hover:after{
     width:50%;
}
.page-index .entry-inner{
     position:absolute;
     width:349px;
     margin-left:15px;
}

.page-index .entry-content{
     height:369px;
     overflow:hidden;
     background:url(https://cdn-ak2.f.st-hatena.com/images/fotolife/c/c-miya/20170925/20170925163823.jpg) no-repeat;
     background-size:349px;
}
.page-index .entry-content p{
     position:relative;
     padding:0 0 0 0;
     margin:0 0 0 0;
     font-size:11px;
     line-height:1.8;
     letter-spacing:1px;
     color:#808080;
}
.page-index .entry-content p:nth-of-type(1){
     padding:290px 0 0 0;
}
.page-index .entry-content img:nth-of-type(1){
     position:absolute;
     top:0;
     width:349px;
     height:196px;
     object-fit:cover;
}
.page-index .entry-content p:nth-of-type(n+2) img{
     display:none;
}
.page-index .entry-content h2{
     display:none;
}

.entry-header{
     position:relative;
}
.page-index .entry-header{
     position:absolute;
     top:200px;
     padding:0 0 0 0;
     width:100%;
}
.page-index .entry-title{
     position:absolute;
     top:0;
     font-size:18px;
     letter-spacing:1px;
     line-height:26px;
     word-break:break-all;
     height:52px;
     overflow:hidden;
}
.page-index .entry-title .entry-title-link{
     display:block;
     max-height:52px;
     position:relative;
     top:50%;
     -webkit-transform:translateY(-50%);
     transform: translateY(-50%);
}

.entry-date{
     color:#666;
     font-weight:700;
     margin:0 0 0.5em 0;
}
.entry-date a{
     display:inline-block;
     color:#666;
}
.entry-date:before{
     content:"\f043";
     font-family:blogicon;
}
.page-index .entry-date{
     font-size:12px;
     margin:64px 0 0 0;
}
.page-entry .entry-date,.page-preview .entry-date{
     padding:42px 0 0 0;
}

.entry-categories{
     padding:0 .8em;
     font-size:10px;
}
.page-index .entry-categories{
     position:absolute;
     top:-200px;
     right:0;
     z-index:2;
     background:#eeff41;
     white-space:nowrap;
     max-width:349px;
     overflow:hidden;
}
.page-index .entry-categories a{
     display:inline-block;
     color:#333;
     font-weight:bold;
     line-height:2;
     margin:0 0.2em;
}

.page-entry .entry-categories, .page-preview .entry-categories{
     position:absolute;
     top:0.9em;
     left:-48px;
     z-index:2;
     display:inline-block;
     background:#eeff41;
     padding:.4em .8em .2em;
     font-size:11px;
     transform:rotate(-5deg);
     box-shadow:1px 1px 2px rgba(0,0,0,0.2);
}
.page-entry .entry-categories a, .page-preview .entry-categories a{
     display:inline-block;
     color:#666;
     font-weight:700;
}
.page-entry .entry-categories:before, .page-preview .entry-categories:before{
     content:"\f013";
     font-family:blogicon;
}

a.entry-see-more{
     position:absolute;
     top:0;
     width:100%;
     height:100%;
     color:transparent;
}

.page-entry .entry-inner, .page-preview .entry-inner{
     padding-left:35px;
}
.page-entry .entry-title, .page-preview .entry-title{
     font-size:1.8rem;
     line-height:1.4;
     margin:0 0 0.5em 0;
}
.page-entry .entry-content,.page-preview .entry-content{
     letter-spacing:0.2px;
}

.social-buttons{
     margin:0 0 1rem 0;
}
.ad-01{
     text-align:center;
     margin:0 0 2rem 0;
}

/* 記事編集ボタン */
.entry-header-menu{position:absolute;top:-200px;z-index:2;display:block;width:40px;height:40px;overflow:hidden;background:#fff;line-height:40px;background:#333;}
.entry-header-menu a{color:transparent;position:absolute;}
.entry-header-menu a::before{content:'\f024';font-size:18px;color:#fff;font-family:blogicon;display:block;width:40px;text-align:center;}
.page-entry .entry-header-menu{position:absolute;top:0px;left:50%;}

.page-index .comment-box,
.page-index .author,
.page-index .entry-footer-time{display:none;}
.page-index .hatena-bookmark-comment-iframe{background:#0ff;position:absolute;top:-9999px;left:-9999px;}
.page-index .hatena-star-container{display:none;}
.page-index .entry-footer{position:absolute;top:0;background:transparent;}
.page-index .google-afc-image{background:transparent;position:absolute;z-index:20;}

.social-buttons{display:none;}
.page-entry .social-buttons{display:block;padding:0 0 0 0;}
.page-entry .entry-footer-html{padding:0 0 0 0;}

/* 記事内 */
.entry-content h2{
     background:#f0f0f0;
     color: #707070;
     font-weight:700;
     letter-spacing:2px;
     padding:1.1em 1em;
     margin:3em 0 1em 0;
     font-size:1.5rem;
     line-height:1;
     position: relative;
     z-index:99;
}

.entry-content h2::before{
     position:absolute;
     top:100%;content:'';
     border-style: solid;
     border-width: 12px 12px 0 12px;
     border-color: #f0f0f0 transparent transparent transparent;
}

.entry-content h3{
     font-size:1.3rem;
     padding:1rem;
     border-left:6px solid #707070;
     margin:2em 0 1em 0;
     color:#707070;
}

.entry-content h4{
     font-size:1.3rem;
     color: #707070;
     padding:1em 0 0 0;
     margin:0 0 .5em 0;
}
.entry-content h4::before{
     content:'\f029';
     font-family:blogicon;
     margin-right:.5em;
     color: #707070;
}

.entry-content h5{
     font-size:1.2rem;
     padding:1em 0 0 0;
     margin:0 0 .3em 0;
}

.entry-content h6{
     font-size:1.1rem;
     padding:1em 0 0 0;
     margin:0 0 .3em 0;
}

blockquote{
    position: relative;
    padding: 20px 22px;
    box-sizing: border-box;
    font-style: italic;
    color: #4e4e4e;
    background: #F8F9FB;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14);
}
blockquote::before{
     display: inline-block;
    position: absolute;
    top: 7px;
    left: 10px;
    content: "\f10d";
    font-family: FontAwesome;
    color: #E8EBF1;
    font-size: 58px;
    line-height: 1;
    font-weight: 900;
}
blockquote:after{
    display: inline-block;
    position: absolute;
    bottom: 5px;
    right: 15px;
    text-align: center;
    content: "\f10e";
    font-family: FontAwesome;
    color: #E8EBF1;
    font-size: 40px;
    line-height: 1;
    font-weight: 900;
}
blockquote p {
    position: relative;
    padding: 0;
    margin: 10px 0;
    z-index: 3;
    line-height: 1.7;
}
blockquote cite{
     position: relative;
    z-index: 3;
    display: block;
    text-align: right;
    color: #888888;
    font-size: 0.9em;
}
q{
     font-style:italic;
     background:#e0f2f1;
     margin:0 0.2em;
}

.page-entry .entry-content .hatena-fotolife, .page-preview .entry-content .hatena-fotolife{
     margin:0 0 0.7em 0;
     max-width:100%;
}
.entry-content .hatena-image-left,.entry-content .hatena-image-right{
     display:block;
     max-width:50%!important;
}
.entry-content .hatena-image-left{
     margin-right:1rem!important;
}
.entry-content .hatena-image-right{
     margin-left:1rem!important;
}

.entry-content ul{
     margin:0 1em 1.5em 0;
     padding:0 0 0 0;
     counter-reset:my-counter;
     list-style:none;
}

.entry-content ol{
counter-reset:number; /*数字をリセット*/
  list-style-type: none!important; /*数字を一旦消す*/
  padding:0.5em;
}

.entry-content dl{
     margin:0 1em 1.5em 2em;
     padding:0 0 0 0;
}

.entry-content ul li ul,
.entry-content ul li ol,
.entry-content ol li ul,
.entry-content ol li ol{margin:0.2em 0.5em 0.5em 1em;}

.entry-content ul li{
     margin:1em 0 1em 1em;
     padding:0 0 0 0;
     line-height:1.7;
     list-style-type: none!important;
     position:relative;
     font-size: 16.5px;
     text-indent:-16.5px;
     padding-left:16.5px;

}

.entry-content ol li{
  position: relative;
  line-height: 1.5em;
  margin: 1em 0;
  padding: 0.5em 0.5em 0.5em 30px;
  font-size: 16.5px;
}

.entry-content ul li::before,
.entry-content ul ul li::before{
     color:#a5a5a5;
     font-size: 0.8em;
     margin-right:0.6rem;
     margin-left:-0.2rem;
     position:relative;
     top:-0.2em;
}
.entry-content ul li::before{
     content:'\25CF';
}
.entry-content ul ul li::before{
     content:'\25A0';
}

.entry-content ol li:before {
      /* 以下数字をつける */
  position: absolute;
  counter-increment: number;
  content: counter(number);
  /*数字のデザイン変える*/
  display:inline-block;
  background: #a5a5a5;
  color: white;
  font-family: 'Avenir','Arial Black','Arial',sans-serif;
  font-weight:bold;
  font-size: 15px;
  border-radius: 3px;
  left: 0;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  /*以下上下中央寄せのため*/
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.entry-content ol ol li:before {
     content:counter(my-counter);
     counter-increment:my-counter;
     background-color:#80cbc4;
     color:#fff;
     font-size:0.8rem;
     display:inline-block;
     text-align:center;
     height:1.5em;
     width:1.5em;
     line-height:1.5em;
     position:relative;
     top:-0.1em;
     margin:0 4em 0 0.5em;
}

.entry-content pre.code{
     margin:0 0 1.5em 0;
     padding:1em;
     background:#444;
     color:#fff;
}

table{
     margin:0em 0 1em 0;
     border-collapse:collapse;
     border:3px solid #ccc;
     max-width:100%;
}
th{
     border:1px solid #ccc;
     padding:0.3em 0.6em;
     background:#eee;
     color:#666;
}
td{
     border:1px solid #ccc;
     padding:0.3em 0.6em;
}
ul.table-of-contents{
     border:1px solid #a5a5a5;
     padding:0.8em 1em 1em 1em;
     margin:0.5em 0 2em 0;
     position:relative;
}
ul.table-of-contents li{
     font-size:15px;
     margin-bottom:0;
}
ul.table-of-contents li a{
     text-decoration:none;
}
ul.table-of-contents ul ul{
     display:none;
}
ul.table-of-contents:before{
     content:"INDEX";
     display:inline-block;
     position:absolute;
     top:-0.6em;
     left:0.5em;
     background:#fff;
     padding:0 0.5em;
     font-size:16.5px;
     font-weight:700;
     color:#a5a5a5;
}

.entry-content strong{
     background:linear-gradient(transparent 60%, #EEFC2D 0%);
}
.entry-content strong.blue{
     background:linear-gradient(transparent 60%, #93F9FF 0%);
}
.entry-content strong.pink{
     background:linear-gradient(transparent 60%, #FF93CE 0%);
}

.entry-content .exlink{
     border:1px solid #ccc;
     background:#f8f8f8;
     padding:0.7em;
     margin:0 0 1em 0;
     position:relative;
}
.entry-content .exlink a::before{
     content:"\f009 \0020";
     font-family:blogicon;
}
.entry-content .exlink a{
     text-decoration:underline;
}
.entry-content .exlink a:hover {
     background:#e0e0e0;
}
.entry-content .exlink a:visited {
     color:#666;
}

.entry-content .flexbox{
     display:-webkit-flex;
     display:flex;
     -webkit-justify-content:space-between;
     justify-content:space-between;
}
.entry-content .flexbox span:nth-of-type(n+2){
     margin-left:1%;
}
.entry-content .iflexbox{
     display:inline-flex;
     -webkit-justify-content:space-between;
     justify-content:space-between;
}
.entry-content .iflexbox span{
     display:inline-block;
     max-width:49%;
}

/* パンくずリスト */
#top-box{
     width:1174px;
     margin:0 auto;
}
.breadcrumb{
     font-size:0.85rem;
     color: #9E8E91;
     margin-top:2em;
}

.breadcrumb-link,.breadcrumb-child-link {
     color: #9E8E91;
}

/* コメント */
.comment-box{position:relative;margin:0 0 2em 0;}
.comment{margin:0 0 0 0;padding:1.5em 0 0 0;}
.comment li{list-style-type:none;overflow:hidden;border-bottom:1px dotted #ccc;margin:0 0 1em 0;}
.comment li .hatena-id-icon{width:64px;height:64px;float:left;border:1px solid #ccc;padding:2px;margin:0 8px 1em 0;}
.comment li .comment-user-name{font-weight:bold;margin:1.6em 0 0 0;}
.comment li .comment-content p{overflow:hidden;padding:0 0 0 0;margin:0 0 1em 0;font-size:0.9rem;}
.comment li .comment-metadata{position:absolute;top:0;right:0;margin:0 0 1.6em 0;padding:0 0 0 0;font-size:0.8rem;font-style:italic;}
.leave-comment-title{display:inline-block;border:1px solid #ccc;border-radius:4px;padding:0em 1em 0.6em 1em;background:#f0f0f0;font-size:0.8rem;}
.leave-comment-title:hover{border:1px solid #666;background:#666;color:#fff;}
.leave-comment-title::before{content:"\f01d";font-family:blogicon;font-size:1.5rem;margin:0 0.2em 0 0;position:relative;top:0.35rem;}

.entry-footer-section{text-align:right;font-size:80%;margin:2.5em 0;}

.permalink{position:relative;margin:0 0 2em 0;width:100%;overflow:hidden;}

/* ページャー */
.page-index .pager{
     width:100%;
     padding:1em 0;
     text-align:center;
}
.page-index .pager a{
     display:inline-block;
     padding:0.5em 1em;
     border:1px solid #f0f0f0;
     background: #f0f0f0;
     color: #a5a5a5;
}
.page-index .pager a:hover{
     background:#a5a5a5;
     color:#fff;
}

.page-entry .pager{
     width:calc(100% - 35px);
     padding:1em 0;
     margin:1rem 0 2rem 35px;
     display:-webkit-flex;
     display:flex;
     -webkit-justify-content:space-between;
     justify-content:space-between;
}
.page-entry .pager span{
     display:table;
     width:49%;
     border:1px solid #a5a5a5;
}
.page-entry .pager span a{
     display:table-cell;
     padding:0 0.5rem;
     line-height:1.2rem;
     vertical-align:middle;
     color:#a5a5a5;
}
.page-entry .pager span a:hover{
     background:#f0f0f0;
     color:#707070;
}
.page-entry .pager .pager-prev::before, .page-entry .pager .pager-next::after{
     display:table-cell;
     vertical-align:middle;
     font-family:blogicon;
     background:#a5a5a5;
     color:#fff;
     width:4rem;
     height:4rem;
     text-align:center;
}
.page-entry .pager .pager-prev::before{
     content:'\f005';
}
.page-entry .pager .pager-next::after{
     content:'\f006';
}

.page-entry .pager .pager-arrow{
     display:none;
}

/* サイドバー */
.hatena-module{
     width:100%;
     overflow:hidden;
     margin:0 0 3em 0;
     font-size:12px;
}
.hatena-module-title{
     background:#f0f0f0;
     color:#a5a5a5;
     font-weight:700;
     letter-spacing:2px;
     text-transform: none;
     padding:1em;
     margin:0 0 1em 0;
     font-size:1.3rem;
     line-height:1;
}
.hatena-module-title a{
     color: #a5a5a5;
}

.search-form{
     border:3px solid #e0e0e0;
     position:relative;
     overflow:hidden;
     line-height:3rem;
}
.search-form:after{
     content:"\f01a";
     font-family:blogicon;
     position:absolute;
     right:0;
     height:2rem;
     width:3rem;
     text-align:center;
     font-size:1.5rem;
     line-height:3rem;
}
.search-module-input{
     border:0px;
     width:calc(100% - 3rem);
     height:2rem;
     font-size:0.9rem;
     line-height:2rem;
     padding:0 0.5em;
}
.search-module-button{
     background:rgba(255,255,255,0.1);
     border:0px;
     color:transparent;
     position:absolute;
     right:0;
     height:2rem;
     width:3rem;
     z-index:2;
}
.search-module-button:hover{
     cursor:pointer;
}
.search-result-form{
     height:2.3em;
}
.search-result-input{
     height:2.3em!important;
}

.hatena-urllist{
     margin:0 0 0 0;
     padding:0 0 0 0;
}
.hatena-urllist li{
     list-style-type:none;
     word-break:break-all;
}

.urllist-item{
     position:relative;
     padding:0 2em 0 0;
}
.urllist-item:hover::before{
     right:0.4em;
     transition:0.3s;
}
.urllist-item::before{
     content:'\f006';
     font-family:blogicon;
     font-size:1.2rem;
     line-height:1;
     color:#d6d6d6;
     position:absolute;
     right:0.6em;
     top:calc(50% - 1rem);
     z-index:2;
     padding: 0 3px 0 0;
}
.urllist-item-inner{
     font-size:12px;
     line-height:18px;
}
.urllist-image{
     margin-bottom:0.8rem!important;
}
.urllist-date-link a{
     font-weight:bold;
     color:#999;
}
.recent-entries-item{
     overflow:hidden;
     margin:0 0 0.8rem 0;
     border-bottom:1px dotted #e0e0e0;
}
.recent-entries-item:last-of-type{
     margin:0 0 0 0;
     border-bottom:0px;
}

.hatena-module-category .hatena-urllist{
     margin:-1em 0 0 0;
}
.hatena-module-category .hatena-urllist li{
     border-bottom:1px dotted #e0e0e0;
     position:relative;
}
.hatena-module-category .hatena-urllist li:last-of-type{
     border-bottom:0px;
}
.hatena-module-category .hatena-urllist li::before{
     content:'\f006';
     font-family:blogicon;
     font-size:1.2rem;
     line-height:1;
     color:#d6d6d6;
     position:absolute;
     right:0.6em;
     top:calc(50% - 0.6rem);
     z-index:2;
     padding: 0 3px 0 0;
}
.hatena-module-category .hatena-urllist li:hover::before{
     right:0.4em;
     transition:0.3s;
}
.hatena-module-category .hatena-urllist li a{
     display:block;
     padding:1em 0;
}

/* ↓↓「このブログについて」非表示↓↓ */
div.profile-about {
  display: none;
}

/* ↓↓サイドバーSNSフォローボタン↓↓ */
/* ボタン全体 */
.flowbtn3{
font-family:'Comic Sans MS','Chalkboard SE',sans-serif;/* 好きなフォントに変えてね */
border-radius:50%;
position:relative;
display:inline-block;
width:70px;
height:70px;
padding-top: 20px;
font-size:30px;
color:#fff!important;
text-decoration:none;
transition:.5s;
}
.flowbtn3 i{
position:relative;
bottom:15px;
}
/* Hatena */
.fl_hatena{
background:#494A4A;
}
/* Twitter */
.fl_tw1{
background:#55acee;
}
/* cookpad */
.fl_cp{
background:#f3981d;
}
/* Feedly */
.fl_fd{
background:#6cc655;
}
/* amazonほしいものリスト */
.fl_amazon{
background:#CC3743;
}
/* 楽天ROOM */
.fl_rakuten{
background:#c81e7a;
}
/* 問い合わせ */
.fl_ma1{
background:#2C6EBE;	
}
/* ボタン内のテキスト */
.flowbtn3 div{
font-size:11px;	
font-weight:bold;
position:relative;
bottom:21px;
}
/* ulタグの内側余白を０にする */
ul.snsbtniti{
padding:0!important;
}
/* ボタン全体の位置 */
.snsbtniti{
display:flex;
flex-flow:row wrap;
justify-content:space-around;
}
/* ボタン同士の余白 */
.snsbtniti li{
flex:0 0 33%;
text-align:center!important;
list-style-type:none;
}
/* ボタンにマウスホバー時 */
.flowbtn3:hover{
-webkit-transform:translateY(-5px);
-ms-transform:translateY(-5px);
transform:translateY(-5px);
text-decoration:none;
}
/* ↑↑サイドバーSNSフォローボタン↑↑ */

/* about */
.page-about h2{margin-top:0;}

/* アーカイブ */
.archive-heading{
     background:#f0f0f0;
     color: #707070;
     font-weight:700;
     letter-spacing:2px;
     padding:1.1em 1em;
     margin:0 0 1em 0;
     font-size:1.4rem;
     line-height:1;
     position:relative;
}
.archive-heading::before{
     position:absolute;
     top:100%;
     content:'';
     border-style: solid;
     border-width: 12px 12px 0 12px;
     border-color: #f0f0f0 transparent transparent transparent;
}

.page-archive .archive-entries{
     padding:0 0 0 0;
}
.page-archive .archive-entry{
     position:relative;
     min-height:calc(120px + 1em);
     padding:0 0 1em 136px;
     margin:0 0 1em 0;
     border-bottom:1px solid #ccc;
     overflow:hidden;
}
.page-archive .archive-entry:last-of-type{
     border-bottom:0px;
}
.page-archive .entry-thumb-link{
     position:absolute;
     top:0;
     left:0;
}
.page-archive .entry-title{
     font-size:1.2rem;
}
.page-archive .date{
     font-size:0.8rem;
}
.page-archive .categories a{
     font-size:0.8rem;
}
.page-archive .categories:before{
     content:"\f013";
     font-family:blogicon;
     font-size:15px;
}
.page-archive .archive-entry-body{
     font-size:0.9rem;
}

/* フッター */
#bottom-editarea{
     width:1174px;
     margin:0 auto;
     background:#fff;
     padding:40px 40px 1em 40px;
     color:#877975;
     display:-webkit-flex;
     display:flex;
     -webkit-justify-content:space-between;
     justify-content:space-between;
}
#footer{
     width:1174px;
     margin:0 auto 3em auto;
     background:#7f8c8d;
     padding:2em 40px 1em 40px;
     box-shadow:0px 0px 3px rgba(0,0,0,0.1);
     text-align:center;
     font-size:80%;
     color:#fff;
     border-top:1px solid #95a5a6;
}
#footer a{
     color:#fff;
}
#footer-inner{
     display:-webkit-flex;
     display:flex;
     -webkit-justify-content:space-between;
     justify-content:space-between;
}
#footer address img{
     vertical-align:bottom;
}
#footer address{
     display:block;
     margin:0 0 0 0;
     padding:0 0 0 0;
}
#footer .services{
     margin:0 0 0 0;
     padding:0 0 0 0;
}

.three-footer{
     width:100%;
     display:-webkit-flex;
     display:flex;
     -webkit-justify-content:space-between;
     justify-content:space-between;
}
.three-footer div{
     width:100%;
     margin-left:3%;
}
.three-footer div:nth-of-type(1){
     margin-left:0;
}
.footer-h{
     font-size:1.3rem;
     font-weight:700;
     text-transform:first-letter;
     letter-spacing:0.15rem;
     border-bottom:2px dotted #fff;
}
.three-footer div a{
     color:#877975;
     border-bottom:1px dotted #877975;
}
.three-footer div a:hover{
     color:#1B93C6;
     border-bottom:1px solid #1B93C6;
     background:#e0f2f1;
}
.recommends{
    width:1174px;display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    margin:2rem auto 0 auto;
}
.recommends a.recommend-entry{
    display: block;
    width: 19%;
    font-size: 0.8rem;
    background:#fff;
    box-shadow:0px 0px 3px rgba(0,0,0,0.1);
    position:relative;
}
.recommends a.recommend-entry:hover,.recommends a.recommend-entry2:hover{
    box-shadow:1px 1px 5px rgba(0,0,0,0.3);
    transition: .5s;
}
.recommend-title{
     display:block;
     padding:0.8em 1em;
     word-break:break-all;
}
.recommend-img{
    width:100%;
}

.recommends a.recommend-entry2{
    display: block;
    width: 19%;
    font-size: 0.8rem;
    box-shadow:0px 0px 3px rgba(0,0,0,0.1);
    position:relative;
    height:180px;
    background-size:cover;
    background-position:50% 50%;
}
.recommend-entry2 .recommend-title{
     background:rgba(255,255,255,0.8);
     position:absolute;
     bottom:0;
     width:100%;
     text-shadow:0 0 3px rgba(255,255,255,0.8);
}


#zeno-menu{
     background:#f0f0f0;     
}
.zeno-menu{
     list-style-type:none;
     width:1174px;
     margin:0 auto;
     padding:0 0 0 0;
     display:-webkit-flex;
     display:flex;
     -webkit-justify-content:space-between;
     justify-content:space-between;
}
.zeno-menu li{
     display:block;
     width:100%;
}
.zeno-menu li a{
     color:#fff;
     display:block;
     width:100%;
     padding:1em 0;
     text-align:center;
}
.zeno-menu li a:hover{
     color: #E8704E;
     background:#F8D6CD;
}

/* ******** SNSボタン ******** */
.snsbtns2{
     display:-webkit-flex;
     display:flex;
     -webkit-justify-content:space-between;
     justify-content:space-between;
     margin:0 0 1rem 0;
     position:relative;
}
.snsbtns2 a{
     display:block;
     width:100%;
     padding:1em 0;
     color:#fff;
     text-align:center;
     line-height:1;
     font-size:110%;
     margin-left:0.2rem;
     position:relative;
     overflow:hidden;
}
.snsbtns2 a:hover{
     box-shadow:0px 2px 3px rgba(0,0,0,0.2);
     transition: .5s;
}

.snsbtns2 a:nth-of-type(1){
margin-left:0;
}

.sns-line::before{content:'\f01d';}
.sns-tw::before{content:'\f035';}
.sns-po::before{content:'\f008';}
.sns-hb::before{content:'\f027';}
.sns-hatena::before{content:'\f000';}
.sns-mura::before{content:'\f01b';}
.sns-cookpad::before{content:'\f715';}
.sns-line{background:#56D827;}
.sns-tw{background:#1b95e0;}
.sns-po{background:#EF4056;}
.sns-hb{background:#2c6ebe;}
.sns-hatena{background:#3C3D3D;}
.sns-mura{background:#B22222;}
.sns-cookpad{background:#E27617;}
.sns-line:hover{background:#53E51D;}
.sns-tw:hover{background:#31a3ea;}
.sns-po:hover{background:#f65065;}
.sns-hb:hover{background:#427ec6;}
.sns-hatena:hover{background:#505252;}
.sns-mura:hover{background:#C92828;}
.sns-cookpad:hover{background:#F2862E;}

.snsbtns2 a::before{
     font-family:blogicon;
     position:absolute;
     top:0rem;left:-1rem;
     font-size:420%;
     color:rgba(255,255,255,0.25);
}

/* ********メディアクエリ******** */
@media screen and (max-width: 1200px){

#content{
     width:760px;
     padding:0 0 0 0;
}
.page-index #content{
     padding:0 0 0 0;
}
#content-inner{
     display:block;
}
#wrapper{
     width:100%;
}
.page-index #wrapper, .page-preview #wrapper{
     width:100%;
     margin:0 0 0 0;
     position:relative;
     top:0px;
}
.page-index #main-inner{
     -webkit-justify-content:center;
     justify-content:center;
}
.page-entry #wrapper, .page-preview #wrapper{
     width:100%;
     margin:0 0 0 0;
}
.page-entry .pager{
     width:calc(100% - 32px);
     margin:1rem 0 2rem 16px;
}

#box2{width:100%;}
#box2-inner{
     width:100%;
     display:-webkit-flex;
     display:flex;
     -webkit-flex-wrap:wrap;
     flex-wrap:wrap;
     -webkit-justify-content:space-around;
     justify-content:space-around;
}
.hatena-module{width:336px;}
#bottom-editarea{width:760px;padding:40px 22px 1em 22px;}
#footer{width:760px;padding:2em 22px 1em 22px;}

#top-box{width:760px;}
.page-entry .entry-categories{
     position:absolute;
     top:0;
     left:-15px;
     transform:rotate(0deg);
     box-shadow:0px 0px 0px rgba(0,0,0,0);
}
.page-entry .entry-inner, .page-preview .entry-inner{padding:0 16px;}

.recommends{width:760px;}
.recommends a.recommend-entry:nth-of-type(n+5), .recommends a.recommend-entry2:nth-of-type(n+5){display:none;}
.recommends a.recommend-entry, .recommends a.recommend-entry2{width:24%;}

#bottom-editarea{padding:40px 16px 1em 16px;}
#footer{padding:2em 16px 1em 16px;}
.three-footer div{margin-left:2%;}
.zeno-menu{width:760px;}
}

@media screen and (max-width: 780px){
#content{width:100%;}
#bottom-editarea{width:100%;}
#footer{width:100%;}
#top-box{width:100%;padding:0 2%;}
.recommends{width:100%;padding:0 2%;}
.recommends a.recommend-entry:nth-of-type(n+4), .recommends a.recommend-entry2:nth-of-type(n+4){display:none;}
.recommends a.recommend-entry, .recommends a.recommend-entry2{width:32%;}

.entry-header-html{width:100%;overflow:hidden;}
.entry-categories{padding:0 .8em;font-size:10px;}

.page-entry .entry-categories{
     position:absolute;
     top:0;
     left:-4vw;
     transform:rotate(0deg);
     box-shadow:0px 0px 0px rgba(0,0,0,0);
}
.page-entry .entry-inner, .page-preview .entry-inner{padding:0 4vw;}
.page-entry .pager{width:92%;margin:1rem 0 2rem 4%;}

.page-index .entry{width:48vw;height:52.5vw;margin:0 0 8px 0;padding:2vw 0 0 0;}
.page-index .entry:before,.page-index .entry:after{display:none;}
.page-index .entry-inner{width:44vw;margin-left:2vw;}

.page-index .entry-content{height:45.5vw;background-size:44vw;}
.page-index .entry-content p{font-size:1.4vw;line-height:1.8;letter-spacing:0px;}
.page-index .entry-content p:nth-of-type(1){padding:36vw 0 0 0;}
.page-index .entry-content img:nth-of-type(1){position:absolute;top:0;width:44vw;height:24.8vw;}

.entry-header{position:relative;}
.page-index .entry-header{position:absolute;top:24.5vw;padding:0 0 0 0;}
.page-index .entry-title{
     font-size:2.5vw;
     letter-spacing:0px;
     line-height:1.5;
     height:7.5vw;
}
.page-index .entry-title .entry-title-link{max-height:7.5vw;}

.page-index .entry-date{font-size:1.5vw;margin:8vw 0 0 0;}
.page-entry .entry-date,.page-preview .entry-date{padding:42px 0 0 0;}

.page-entry .entry-title{
     font-size:1.6rem;
}

.entry-categories{padding:0 .8em;font-size:10px;}
.page-index .entry-categories{
     position:absolute;
     top:-24.5vw;
     right:0;
     z-index:2;
     background:#eeff41;
     max-width:44vw;
}
.page-index .entry-categories a{
     display:inline-block;
     color:#333;
     font-weight:bold;
     line-height:2;
     margin:0 0.2em;
}

#bottom-editarea{width:100%;}
#footer{width:100%;}
.zeno-menu{width:100%;}

}
@media screen and (max-width: 675px){
.hatena-module{width:100%;}
.hatena-module-body{padding:0 4%;}
.snsbtns1 a, .snsbtns3 a, .snsbtns4 a{color:transparent;}
.snsbtns1 a::before, .snsbtns3 a::before, .snsbtns4 a::before{display:block;margin:0 0 0.5em 0;font-size:1.6rem;color:#fff;position:absolute;top:0.75rem;width:100%;text-align:center;}
.snsbtns2 a{font-size:0.95rem;}
#footer-inner{display:-webkit-flex;display:flex;-webkit-flex-direction: column;flex-direction:column;}
.three-footer{display:-webkit-flex;display:flex;-webkit-flex-direction: column;flex-direction:column;}
.three-footer div{margin:0 0 1rem 0;}

}

@media screen and (max-width: 480px){
#blog-title #title a{font-size:8vw;letter-spacing:0.3em;}
#blog-title #blog-description{font-size:3vw;padding-top:0.5em;}

.recommends a.recommend-entry:nth-of-type(n+3), .recommends a.recommend-entry2:nth-of-type(n+3){display:none;}
.recommends a.recommend-entry, .recommends a.recommend-entry2{width:49%;}

.entry-content h2{
     background:#fff;
     color: #707070;
     border-bottom:3px solid #707070;
     letter-spacing:0px;
     padding:1em 4% 0 4%;
     margin:3em -4% 1em -4%;
     font-size:1.6rem;
     line-height:1.2;
     position:relative;    
}

.entry-content h2::before{display:none;}

.page-index .entry{height:56.5vw;padding:2vw 0 0 0;}

.page-index .entry-inner{width:47vw;margin-left:0;}

.page-index .entry-content{height:49.5vw;background-size:47vw;}

.page-index .entry-content p:nth-of-type(1){padding:100vh 0 0 0;color:transparent;}
.page-index .entry-content img:nth-of-type(1){position:absolute;top:0;width:47vw;height:26.4vw;}

.page-index .entry-header{top:27vw;}
.page-index .entry-title{font-size:4vw;height:18vw;}
.page-index .entry-title .entry-title-link{max-height:18vw;}
.page-index .entry-date{font-size:2vw;margin:19vw 0 0 0;}
.page-index .entry-categories{top:-27vw;max-width:47vw;}

.page-entry .pager{display:-webkit-flex;display:flex;-webkit-flex-direction: column;flex-direction:column;}
.page-entry .pager span{width:100%;margin-bottom:1rem;}

#box2{width:100%;}
#box2-inner{width:100%;display:block;}
.hatena-module{width:100%;}
.hatena-module-body{padding:0 4%;}
.zeno-menu{width:100%;}

blockquote{
    width: 98%;
    margin-left: 3.5px;
}

}

/* ↓↓ｶｴﾚﾊﾞ・ﾖﾒﾚﾊﾞ・ﾄﾏﾚﾊﾞ・ﾀﾍﾞﾚﾊﾞ↓↓ */
.booklink-box, .kaerebalink-box, .tomarebalink-box, .taberebalink-box{
	margin: 1.5em 0 1.5em;
	padding: 0 0;
	border: 1.8px solid #d7d7d7; /*線の太さ・色*/
	overflow: hidden;
	font-size:1em;
       font-weight:bold;
       background-color: #fff; /* 背景色 */
}

.booklink-image, .kaerebalink-image, .tomarebalink-image, .taberebalink-image{
	margin:15px 0 15px 0;
}
.booklink-image img, .kaerebalink-image img, .tomarebalink-image img, .taberebalink-image img{
	display:block;
	margin:0 auto;
	text-align:center;
}

.booklink-info, .kaerebalink-info, .tomarebalink-info, .taberebalink-info{
	text-align:center;
	line-height:120%;
	overflow: hidden;
}

.booklink-name, .kaerebalink-name, .tomarebalink-name, .taberebalink-name{
	font-size:0.9em;
       color: #707070;
	margin-bottom:5px;
	line-height:1.2em;
}

.booklink-name a, .kaerebalink-name a, .tomarebalink-name a, .taberebalink-name a{
       color: #707070;
}

.booklink-powered-date, .kaerebalink-powered-date, .tomarebalink-powered-date, .taberebalink-post{
	font-size: 10px;
       font-weight: normal;
　　margin-top:11px;
	line-height:120%;
}
.booklink-detail, .kaerebalink-detail, .tomarebalink-address, .taberebalink-catch, .taberebalink-address{
       font-size:0.76em;
       color: #707070;
	margin-bottom:8px;
}

.booklink-link2, .kaerebalink-link1, .tomarebalink-link1, taberebalink-link1{
	margin-top:3px;
        text-align:center;
}

.shoplinkamazon a, .shoplinkrakuten a, .shoplinkkindle a, .shoplinkrakukobo a, .shoplinkyahoo a, .shoplinkseven a, .shoplinkbellemaison a, .shoplinkcecile a, .shoplinkwowma a, .shoplinkdocomo a, .shoplinkkakakucom a, .shoplinkbk1 a, .shoplinkkino a, .shoplinkebj a, .shoplinktoshokan a, .shoplinkjalan a, .shoplinkjtb a, .shoplinkknt a, .shoplinkikyu a, .shoplinkrurubu a{
        float:left;
        width:45%;
	height:40px;
	overflow:hidden;
       border-radius: 3px;
       box-shadow: 2px 2px 4px gray;
	display:inline-block;
	margin: 5px 12px 5px -2.5px ;
	padding:10px 0px;
	text-align:center;
	cursor:pointer;
        display:block;
        text-decoration: none;
	font-weight:bold;
	font-size:13.5px;
}

.shoplinkhotpepper a{
        height:15px;
	overflow:hidden;
	border:1px solid #fff;
	display:inline-block;
	margin:10px 120px 0;
	padding:10px 0px;
	text-align:center;
	cursor:pointer;
        display:block;
        text-decoration: none;
	font-weight:bold;
	font-size:13.5px;
}

.shoplinkamazon a, .shoplinkrakuten a, .shoplinkkindle a, .shoplinkrakukobo a, .shoplinkyahoo a, .shoplinkseven a, .shoplinkbellemaison a, .shoplinkcecile a, .shoplinkwowma a, .shoplinkdocomo a, .shoplinkkakakucom a, .shoplinkbk1 a, .shoplinkkino a, .shoplinkebj a, .shoplinktoshokan a, .shoplinkjalan a, .shoplinkjtb a, .shoplinkknt a, .shoplinkikyu a, .shoplinkrurubu a div{
        position: relative;
        left: 4.55%;
        float: left;        
}

.shoplinkamazon:hover, .shoplinkrakuten:hover, .shoplinkkindle:hover, .shoplinkrakukobo:hover, .shoplinkyahoo:hover, .shoplinkseven:hover, .shoplinkbellemaison:hover, .shoplinkcecile:hover, .shoplinkwowma:hover, .shoplinkdocomo:hover, .shoplinkkakakucom:hover, .shoplinkbk1:hover, .shoplinkkino:hover, .shoplinkebj:hover, .shoplinktoshokan:hover, .shoplinkjalan:hover, .shoplinkjtb:hover, .shoplinkknt:hover, .shoplinkikyu:hover, .shoplinkrurubu:hover{
	box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.2);
  -moz-transform: translateY(-2px);
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
  transition: all ease-in-out .3s;
}

.shoplinkhotpepper:hover{
  -moz-transform: translateY(-2px);
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
  transition: all ease-in-out .3s;
}

.shoplinkamazon:active, .shoplinkrakuten:active, .shoplinkkindle:active, .shoplinkrakukobo:active, .shoplinkyahoo:active, .shoplinkseven:active, .shoplinkbellemaison:active, .shoplinkcecile:active, .shoplinkwowma:active, .shoplinkdocomo:active, .shoplinkkakakucom:active, .shoplinkbk1:active, .shoplinkkino:active, .shoplinkebj:active, .shoplinktoshokan:active, .shoplinkjalan:active, .shoplinkjtb:active, .shoplinkknt:active, .shoplinkikyu:active, .shoplinkrurubu:active, .shoplinkhotpepper:active{
	position:relative;
	top:1px;
}
	
.shoplinkamazon a{
        background: #FFC665;
        color:#fff;
}
 .shoplinkrakuten a{
        background: #EF7781;
        color:#fff;
}
.shoplinkkindle a{
	background: #FFA566;
        color:#fff;	
}
.shoplinkrakukobo a{
	background: #ED8476;
         color:#fff;	
}
.shoplinkyahoo a{
	background: #77B1EF;
        color:#fff;
 } 
.shoplinkseven a{
	background: #6EDDD4;
        color:#fff;
}
.shoplinkbellemaison a{
	background: #A4DD6E;
        color:#fff;
 } 
.shoplinkcecile a{
	background: #D46EDD;
        color:#fff;
 }
 .shoplinkwowma a{
	background: #70E0AA;
        color:#fff;
 }
 .shoplinkdocomo a{
	background: #E94855;
        color:#fff;
 }
.shoplinkkakakucom a{
	background: #6E8EDD;
        color:#fff;
 } 
.shoplinkbk1 a{
	background: #839DE1;
        color:#fff;
 }
.shoplinkkino a{
	background: #3EC47D;
        color:#fff;
 }
.shoplinkebj a{
	background: #D383DB;
        color:#fff;
 }
.shoplinktoshokan a{
	background: #85A1BC;
        color:#fff;
 }

.shoplinkjalan a{
	background: #fc5c65;
        color:#fff;
 }

.shoplinkjtb a{
	background: #3867d6;
        color:#fff;
 }

.shoplinkknt a{
	background: #20bf6b;
        color:#fff;
 }

.shoplinkikyu a{
	background: #f7b731;
        color:#fff;
 }

.shoplinkrurubu a{
	background: #fa8231;
        color:#fff;
 }

.shoplinkhotpepper a{
	background: #eb3b5a;
        color:#fff;
 }

.booklink-footer{
	clear:left;
}
/* ↑↑ｶｴﾚﾊﾞ・ﾖﾒﾚﾊﾞ・ﾄﾏﾚﾊﾞ・ﾀﾍﾞﾚﾊﾞ↑↑ */

/* ↓↓アプリーチ↓↓ */
.appreach {
  text-align: left;
  padding: 10px;
  border: 1.8px solid #F7F9FC;
  overflow: hidden;
  background-color: #F7F9FC;
}
.appreach:after {
  content: "";
  display: block;
  clear: both;
}
.appreach p {
  margin: 0;
}
.appreach a:after {
  display: none;
}
.appreach__icon {
  float: left;
  border-radius: 10%;
  overflow: hidden;
  margin: 0 3% 0 0 !important;
  width: 25% !important;
  height: auto !important;
  max-width: 120px !important;
}
.appreach__detail {
  display: inline-block;
  font-size: 20px;
  line-height: 1.5;
  width: 72%;
  max-width: 72%;
}
.appreach__detail:after {
  content: "";
  display: block;
  clear: both;
}
.appreach__name {
  font-size: 16px;
  line-height: 1.5em !important;
  max-height: 3em;
  overflow: hidden;
}
.appreach__info {
  font-size: 12px !important;
}
.appreach__developper, .appreach__price {
  margin-right: 0.5em;
}
.appreach__posted a {
  margin-left: 0.5em;
}
.appreach__links {
  float: left;
  height: 40px;
  margin-top: 8px;
  white-space: nowrap;
}
.appreach__aslink img {
  margin-right: 10px;
  height: 40px;
  width: 135px;
}
.appreach__gplink img {
  height: 40px;
  width: 134.5px;
}

/* ↓↓カッテネ↓↓ */
.kattene {
  border: 1.8px solid #d7d7d7; /*線の太さ・色*/
  padding: 10px;
  padding-bottom: 5px;
  margin-bottom: 1em;
  box-sizing: border-box;
}

.kattene div{
  margin: 0;
}

.kattene__imgpart {
  text-align: center; }

  .kattene__imgpart img {
       margin: 0;}

.kattene__title{
   font-size: 1.15em;
   font-weight: bold;
}

.kattene__description {
  font-size: 0.9em; 
  font-weight: normal;
}

.kattene .kattene__btns {
  width: 100%;
  margin-top: 0.5em; }

  .kattene__btns:after {
    display: block;
    clear: both;
    height: 0px;
    visibility: hidden;
    content: "."; }

  .kattene__btns > div {
    float: left;
    margin-bottom: 5px; }

  .kattene__btns .kattene__btn {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
   }

  .kattene__btns.__three > div {
    width: 32.66667%; }

    .kattene__btns.__three > div:not(:last-child) {
      margin-right: 1%; }

  .kattene__btns.__two > div {
    width: 49.5%; }

    .kattene__btns.__two > div:nth-child(odd) {
      margin-right: 1%; }

@media screen and (max-width: 900px) {
  .kattene__imgpart {
    padding-bottom: 1em; }
  .kattene .kattene__btns {
    margin-top: 0.5em; }
  .kattene__btns.__five > div {
  width: 49.5%; }
  .kattene__btns.__five > div:nth-child(odd) {
    margin-right: 1%; }
  .kattene__btns.__five > div:last-child {
    margin-right: 0;
    float: right; }

  .kattene__btns.__four > div {
    width: 49.5%; }

    .kattene__btns.__four > div:nth-child(odd) {
      margin-right: 1%; }

  .kattene__btns.__one > div {
    width: 50%;
    margin-left: 25%; } }
@media screen and (min-width: 901px) {

  .kattene {
    display: table;
    width: 100%; }

  .kattene__imgpart {
    display: table-cell;
    width: 20%;
    padding-bottom: 5px;
  }

  .kattene__infopart {
    display: table-cell;
    vertical-align: top;
    position: relative;
    padding-left: 10px;
    width: 80%; }
  
.kattene .kattene__description {
    margin-bottom: 4em;
  }

  .kattene__btns {
    position: absolute;
    bottom: 0;
    box-sizing: border-box;
    padding-right: 10px; 
}

  .kattene__btns.__five > div {
    width: 19.2%; }

    .kattene__btns.__five > div:not(:last-child) {
      margin-right: 1%; }

    .kattene__btns.__four > div {
      width: 24.25%; }

      .kattene__btns.__four > div:not(:last-child) {
        margin-right: 1%; }

    .kattene__btns.__two > div {
      width: 49.5%; }

      .kattene__btns.__two > div:not(:last-child) {
        margin-right: 1%; }

    .kattene__btns.__one > div {
      width: 49.5%;
      float: right; } }

.kattene .kattene__btn {
  appearance: none;
  background-color: #54c0d1;
  border: 0;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-size: 1em;
  -webkit-font-smoothing: antialiased;
  font-weight: 600;
  line-height: 1;
  padding: 0.75em 0;
  text-decoration: none;
  transition: background-color 150ms ease;
  user-select: none;
  vertical-align: middle;
  white-space: nowrap; }

  .kattene__btn:disabled {
    cursor: not-allowed;
    opacity: 0.5; }

  .kattene__btn.__small {
  padding: 0.55em;
  font-size: 0.9em; }

.kattene__btn.__orange {
  background-color: #f7b731;
  margin-bottom: 5px;
  text-align: center; }

   .kattene__btn.__orange i {
    font-weight: bold; }

    .kattene__btn.__orange i:before {
      vertical-align: middle;
      font-size: 1.2em;
      margin-right: 0.2em; }

.kattene__btn.__blue {
  background-color: #2d98da;
  margin-bottom: 5px;
  text-align: center; }

   .kattene__btn.__blue i {
    font-weight: bold; }

    .kattene__btn.__blue i:before {
      vertical-align: middle;
      font-size: 1.2em;
      margin-right: 0.2em; }

.kattene__btn.__red {
  background-color: #eb3b5a;
  margin-bottom: 5px;
  text-align: center; }

   .kattene__btn.__red i {
    font-weight: bold; }

    .kattene__btn.__red i:before {
      vertical-align: middle;
      font-size: 1.2em;
      margin-right: 0.2em; }

.kattene__btn.__green {
  background-color: #20bf6b;
  margin-bottom: 5px;
  text-align: center; }

   .kattene__btn.__green i {
    font-weight: bold; }

    .kattene__btn.__green i:before {
      vertical-align: middle;
      font-size: 1.2em;
      margin-right: 0.2em; }

.kattene__btn.__purple {
  background-color: #8854d0;
  margin-bottom: 5px;
  text-align: center; }

   .kattene__btn.__purple i {
    font-weight: bold; }

    .kattene__btn.__purple i:before {
      vertical-align: middle;
      font-size: 1.2em;
      margin-right: 0.2em; }

.kattene__btn.__orange:hover,.kattene__btn.__blue:hover,.kattene__btn.__red:hover,.kattene__btn.__green:hover,.kattene__btn.__purple:hover{
	box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.2);
  -moz-transform: translateY(-2px);
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
  transition: all ease-in-out .3s;
}

/* ↓↓吹き出し↓↓ */
.entry-content .l-fuki,
.entry-content .r-fuki {
	position: relative;
	width: 83%;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	padding: 1em;
	border-radius: 6px;
	border: 2.5px solid #D6D6D6;
	background-color: #fff;
	z-index: 1;
}
.entry-content .l-fuki {
	margin: 20px 20% 60px 0;
}
.entry-content .r-fuki {
	margin: 20px 0 60px 15%;
}
.entry-content .l-fuki::before,
.entry-content .r-fuki::before {
	position: absolute;
	content: "";
	top: 16px;
	width: 10px;
	height: 10px;
	border-right: 2.5px solid #D6D6D6;
	border-bottom: 2.5px solid #D6D6D6;
	background-color: #fff;
	z-index: 2;
}
.entry-content .l-fuki::before {
	right: -7px;
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
}
.entry-content .r-fuki::before {
	left: -7px;
	transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
}
.entry-content .l-fuki::after,
.entry-content .r-fuki::after {
	white-space: pre-wrap;
	font-size: 12px;
	text-align: center;
	line-height: 1em;
	position: absolute;
	width: 75px;
	height: 75px;
	top: -10px;
	border-radius: 40px;
	border: 3px solid #fff;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}
.entry-content .l-fuki::after {
	right: -110px;
}
.entry-content .r-fuki::after {
	left: -100px;
}
@media screen and (max-width: 620px) {
	.entry-content .l-fuki,
	.entry-content .r-fuki {
		width: 70%
      padding: 0.5em;
	}
	.entry-content .l-fuki {
		margin-right: 30%;
	}
	.entry-content .r-fuki {
		margin-left: 4em !important;
	}
}
@media screen and (max-width: 478px) {
	.entry-content .l-fuki::after,
	.entry-content .r-fuki::after {
		width: 60px;
		height: 60px;
      font-size: 9px;
      line-height: 10px;
		border-radius: 30px;
	}
	.entry-content .l-fuki::after {
		right: -84px;
	}
	.entry-content .r-fuki::after {
		left: -70px;
	}
}

/*
.XXX::after {background-image:url(画像のURL); content: "\a\a\a\a 名前"}
*/
.achorin::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/a/achorin/20190123/20190123140753.png); content: "\a\a\a\a\a\a あーちょりん"}

.otto::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/a/achorin/20190123/20190123141626.png); content: "\a\a\a\a\a\a 夫"}

.musume::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/a/achorin/20230314/20230314161007.png); content: "\a\a\a\a\a\a 娘"}

.gifu::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/a/achorin/20190620/20190620124507.png); content: "\a\a\a\a\a\a 義父"}

.gibo::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/a/achorin/20190620/20190620125239.png); content: "\a\a\a\a\a\a 義母"}

.gisofu::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/a/achorin/20190620/20190620123120.png); content: "\a\a\a\a\a\a 義祖父"}

.gisobo::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/a/achorin/20190620/20190620123628.png); content: "\a\a\a\a\a\a 義祖母"}

.haniwa::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/a/achorin/20190123/20190123110528.png); content: "\a\a\a\a\a\a ハニワくん"}

.woman::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/a/achorin/20230314/20230314150030.png); content: "\a\a\a\a\a\a 悩み中…"}

.man::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/a/achorin/20230314/20230314150336.png); content: "\a\a\a\a\a\a 悩み中…"}


/* ↓↓デザインリンクボタン↓↓ */
.btn-1,.btn-2,.btn-3,.btn-4,.btn-5 {
    border-radius: 3px;
    box-shadow: 2px 2px 4px gray;
    font-weight: bold;
    max-width: 70%;
    margin: 0.5em auto;
    padding: 0;
    text-align: center;
    line-height: 1.4;
    transition: .3s;
    position: relative;
}
.btn-1 a::after,.btn-2 a::after,.btn-3 a::after,.btn-4 a::after,.btn-5 a::after{
    content: '\f35d';  /* 矢印の種類 */
    font-family: FontAwesome;
    font-weight: nomal;
    font-size: 1.1em;
    position: absolute;
    right:  0.4em;
    bottom: 0.4em;    
}
.btn-1 > img,.btn-2 > img,.btn-3 > img,.btn-4 > img,.btn-5 > img {
    float: left;
}
.btn-1::after,.btn-2::after,.btn-3::after,.btn-4::after,.btn-5::after{
    content: ''; clear: left;
}
.btn-1 {
    background-color: #f0c0c4; /* ボタン背景色【赤】 */
}
.btn-1 a {
    text-decoration: none !important;
    color: #f03040 !important;
    display: block;
    margin: 0;
    padding: 0.75em 2em 0.5em 0.5em;
}
.btn-1:hover {
    background-color: #f03040;
    opacity: 0.9;
    transition: 0.3s;
}
.btn-1 a::after{
    color: #E899A1;    
}
.btn-2 {
    background-color: #ffedcc; /* ボタン背景色【黄】 */
}
.btn-2 a {
    text-decoration: none !important;
    color: #ffa500 !important;
    display: block;
    margin: 0;
    padding: 0.5em;
    padding-right: 2em;
}
.btn-2:hover {
    background-color: #ffa500;
    opacity: 0.9;
    transition: 0.3s;
}
.btn-2 a::after{
    color: #FFCD82;    
}
.btn-3 {
    background-color: #c0d7f0; /* ボタン背景色【青】 */
}
.btn-3 a {
    text-decoration: none !important;
    color: #308df0 !important;
    display: block;
    margin: 0;
    padding: 0.5em;
    padding-right: 2em;
}
.btn-3:hover {
    background-color: #308df0;
    opacity: 0.9;
    transition: 0.3s;
}
.btn-4 {
    background-color: #c0f0d9; /* ボタン背景色【緑】 */
}
.btn-4 a {
    text-decoration: none !important;
    color: #29cc7d !important;
    display: block;
    margin: 0;
    padding: 0.5em;
    padding-right: 2em;
}
.btn-4:hover {
    background-color: #29cc7d;
    opacity: 0.9;
    transition: 0.3s;
}
.btn-5 {
    background-color: #FCE0C3; /* ボタン背景色【オレンジ】 */
}
.btn-5 a {
    text-decoration: none !important;
    color: #F78818 !important;
    display: block;
    margin: 0;
    padding: 0.5em;
    padding-right: 2em;
}
.btn-5:hover {
    background-color: #F78818;
    opacity: 0.9;
    transition: 0.3s;
}
.btn-5 a::after{
    color: #F4B77A;    
}

.btn-1 a:hover,.btn-2 a:hover,.btn-3 a:hover,.btn-4 a:hover,.btn-5 a:hover {
    color: #fff !important;   
    transition: 0.3s;
}
.btn-1 a:hover:after,.btn-2 a:hover:after,.btn-3 a:hover:after,.btn-4 a:hover:after,.btn-5 a:hover:after {
    color: #fff !important;
}

/* ↓スマホ表示サイズ調整↓ */
@media (max-width: 767px) {
    .btn-1,.btn-2,.btn-3,.btn-4,.btn-5 {
       max-width: 90%;
       margin: 0.55em auto;
   }
}
/* ↑スマホ表示サイズ調整↑ */
/* ↑↑デザインリンクボタン↑↑ */

/* ↓↓デザイン枠↓↓ */
/* ラベル付き(青) */
.box1 {
    position: relative;
    margin: 3em auto 2.5em; /*枠の上 左右 下 の余白*/
    padding: 0.5em 1em;
    background: #E3F3F7;
    border: solid 2px #719CED;
}
.box1 .box-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -2px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    vertical-align: middle;
    font-size: 16px;
    background: #719CED;
    color: #ffffff;
    font-weight: bold;
    border-radius: 3px 3px 0 0;
}
.box1 p {
    margin: 0; 
    padding: 0;
}

/* ラベル付き(グリーン) */
.box2 {
    position: relative;
    margin: 3em auto 2.5em; /*枠の上 左右 下 の余白*/
    padding: 0.5em 1em;
    background: #E3F9EB;
    border: solid 2px #64D191;
}
.box2 .box-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -2px;
    padding: 0 12px;
    height: 26px;
    line-height: 26px;
    vertical-align: middle;
    font-size: 16px;
    background: #64D191;
    color: #fff;
    font-weight: bold;
    border-radius: 3px 3px 0 0;
}
.box2 p {
    margin: 0; 
    padding: 0;
}

/* 黄色タイトルバー付き(お知らせ用) */
.box3 {
    width: 88%;
    margin: 2em 0;
    background: #FDFAF5;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}
.box3 .box-title {
    font-size: 1.2em;
    background: #EAB059;
    padding: 4px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.box3 p {
    padding: 15px 20px;
    margin: 0;
}

/* タイトル無し背景塗り潰し枠(ピンク)*/
.box4 {
 margin: 2em auto;
 padding: 1em;
 width: 65%;
 color: #555555; /* 文字色 */
 background-color: #F9D9DB; /* 背景色 */
 border: solid 2.5px #fff;
}

/* ヘッダタイトルバー付き(グレー系) */
.box9 {
    margin: 2em 0;
    background: #FFFAFA;
}
.box9 .box-title {
    font-size: 1.1em;
    background: #EDE9E8;
    padding: 4px;
    text-align: center;
    color: #85807E;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.box9 p {
    padding: 15px 20px;
    margin: 0;
}

/* タイトル無し背景塗り潰し枠(淡イエロー系) */
.box10 {
 margin: 2em auto;
 padding: 1em;
 color: #555555; /* 文字色 */
 background-color: #fffcf4; /* 背景色 */
 border: solid 2px #e2d7bc;
}

/* タイトル無し背景塗り潰し枠(青系) */
.box13 {
 margin: 2em auto;
 padding: 1em;
 color: #3867d6; /* 文字色 */
 font-weight: bold;
 background-color: #E1E8F8; /* 背景色 */
}

/* ラベル付き(オレンジ) */
.box14 {
    position: relative;
    margin: 3em auto 2.5em; /*枠の上 左右 下 の余白*/
    padding: 0.5em 1em;
    background: #FBF2E3;
    border: solid 2px #EAAB4D;
}
.box14 .box-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -2px;
    padding: 0 12px;
    height: 26px;
    line-height: 26px;
    vertical-align: middle;
    font-size: 16px;
    background: #EAAB4D;
    color: #fff;
    font-weight: bold;
    border-radius: 3px 3px 0 0;
}
.box14 p {
    margin: 0; 
    padding: 0;
}

/* タイトル付き囲み枠(#a5a5a5) */
.box15 {
    position: relative;
    margin: 2em 0;
    padding: 1em 1em 0.5em;
    background: #fff;
    border: solid 1px #a5a5a5;
}
.box15 .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 18px;
    background: #FFF;
    color: #a5a5a5;
    font-weight: bold;
}
.box15 p {
    margin: 0; 
    padding: 0;
}
/* ↑↑デザイン枠↑↑ */

/* ↓↓追記用境界線見出し↓↓ */
line1 {
  position: relative;
  display: inline-block;
  padding: 0 55px;
  font-size: 0.9em;
  color: #666;
}

line1:before, line1:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 45px;
  height: 1px;
  background-color: #666;
}

line1:before {
  left:0;
}
line1:after {
  right: 0;
}

/* ↓↓表デザイン↓↓ */
table { width: 100%;
        border-collapse: collapse;
        border: solid 2.5px #D6D6D6;/*表全体を線で囲う*/
}

table th, table td {
  border: solid 1px #D6D6D6; /*枠内の罫線*/
}

table th{/*thに対して*/
  color: #636363;/*文字色*/
  background: #F6EBCA;/*背景色*/
}
 
.table th  { width: 13%; }
.table td  { text-align: center; }
.table td:first-child  { text-align: left; }
@media only screen and (max-width: 800px) { 
  .table { 
    display: block; 
    width: 100%; 
    margin: 0 -10px;
  }
  .table thead{ 
    display: block; 
    float: left;
    overflow-x:scroll;
  }
  .table tbody{ 
    display: block; 
    width: auto; 
    overflow-x: auto; 
    white-space: nowrap;
  }
  .table th{ 
    display: block;
    width:auto;
  }
  .table tbody tr{ 
    display: inline-block; 
    margin: 0 -3px;
  }
  .table td{ 
    display: block;
  }
}

/* ↓↓関連記事表示位置をシェアボタン下へ↓↓ */
.customized-footer {
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
}
.entry-footer-modules {
-webkit-order:2;
order:2;
width: 100%;
}
.entry-footer-html {
-webkit-order:1;
order:1;
width: 100%;
}
/* ↑↑関連記事表示位置をシェアボタン下へ↑↑ */

/* ↓↓ページトップへ戻るボタン↓↓ */
#page-top {
  display:none;
  position:fixed;
  right:10px;
  bottom:48px;
  margin: 0;
  padding: 0;
  text-align:center;
}

#page-top img {
  opacity: 0.3;
}

#move-page-top{
  text-decoration:none;
  display:block;
  cursor:pointer;
}

/* ページトップへ戻るボタン：ホバー時 */
#page-top img:hover {
  opacity: 1.0;
}
/* ↑↑ページトップへ戻るボタン↑↑ */

/*-更新日時表示-ここから*/
.entry-content .updated{
 display:none;
}

.page-entry .entry-header .updated{
 display:inline-block;
 font-size: 15px;
}

.page-entry .entry-header .updated:before {
 font-family: FontAwesome;
 content: "\f021";
 left: 0;
 top: 0;
 font-size: 12px;
 color: #666;
 padding-left: 20px;
 padding-right: 5px;
}
/*-更新日時表示-ここまで*/