/* タイトルイメージ調整 */
#blog-title {
    padding-top: 5px; /* 画像上部の余白*/
    padding-bottom: 5px; /* 画像下部の余白*/
    height: initial;
}
.header-image-only #blog-title #blog-title-inner {
    height: 250px; /* 画像の高さ */
    background-size: contain;
}
@media (max-width: 480px) {
.header-image-only #blog-title #blog-title-inner {
    height: 150px; /* 画像の高さ */
}
}



/* <system section="theme" selected="alpha2"> */
body{margin:0;padding:0;color:#454545;background-color:#f3f3f3;font-family:Trebuchet MS,Arial,Helvetica,ヒラギノ角ゴ Pro W3,Hiragino Kaku Gothic Pro,メイリオ,Meiryo,ＭＳ Ｐゴシック,MS PGothic,sans-serif;-moz-transition:all 1s ease;-webkit-transition:all 1s ease}a{color:#256fba;text-decoration:none;-webkit-transition:.3s ease;-webkit-transition-property:opacity,border,color,background;-moz-transition:.3s ease;-moz-transition-property:opacity,border,color,background;-o-transition:.3s ease;-o-transition-property:opacity,border,color,background;transition:.3s ease;transition-property:opacity,border,color,background}a:hover{text-decoration:underline}a:visited{color:#7d9ab7}pre{padding:10px;background:#fafafa;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;box-shadow:inset 0 0 5px #0003}#globalheader-container{position:sticky;top:0;background-color:#f3f3f3}#container{text-align:center;margin:20px auto;width:960px;padding:0 0 30px;background:#fff}#blog-title{text-align:center;margin:0 0 50px}#blog-title h1{color:#454545;text-shadow:0 1px 0 white;font-size:34px;padding:50px 30px 5px;font-weight:700;margin:0}#blog-title h1 a{color:#454545}#blog-title h1 a:hover{color:#256fba;text-decoration:none}header h2{color:#454545;text-shadow:0 1px 0 white;font-size:13px;font-weight:700;margin:0}#top-box,#top-editarea,#bottom-editarea{text-align:left;font-size:13px}#top-editarea,#bottom-editarea{margin:0 30px}#navigation{width:1000px;margin:0 auto}#navigation ul{list-style:none;padding:0;margin:0}#navigation ul li{font-size:90%;float:left;line-height:2}#navigation ul li a{color:#454545;text-decoration:none;padding:8px 15px;border-right:1px solid #ddd}#navigation ul li a:hover{color:#fff;font-weight:700;background:-moz-linear-gradient(top,#3888da 0%,#256fba 100%)}#navigation ul:after{content:".";display:block;clear:both;height:0;visibility:hidden}#top-box{margin:20px 130px}#content{padding:0 30px 30px}#content-inner{text-align:left}#wrapper{width:720px;float:left}#main{float:right;width:560px;padding:0 30px;min-height:100px}#main:after{content:".";display:block;height:0;font-size:0;clear:both;visibility:hidden}#box1{float:right;width:100px;-moz-transition:all 1s ease;-webkit-transition:all 1s ease}#box2{width:180px;float:left;-moz-transition:all 1s ease;-webkit-transition:all 1s ease;text-align:left}#bottom-box{clear:both}#content:after{content:" ";display:block;height:0;visibility:hidden;clear:both}section.day{margin-bottom:40px}.entry{margin:0 0 48px;position:relative;width:100%;-moz-transition:all 1s ease;-webkit-transition:all 1s ease;word-wrap:break-word}.entry-header{padding:0;margin:0;position:relative}.date{width:100px;border-right:1px solid #DDD;margin:0;font-size:16px;position:absolute;left:-130px;top:0;font-weight:400;height:35px;line-height:35px}.date a{color:#454545}.date-last-updated{color:#454545;font-size:13px;margin-left:-3px;display:inline-block}.entry-title{text-align:left;margin:0;font-size:120%;line-height:35px}.entry-title a{position:relative}.categories a{color:#666;font-size:11px;background:#f5f5f5;padding:3px 10px;white-space:nowrap}.categories a:hover{text-decoration:none;background:#ebebeb;color:#454545}.entry-header p{padding:0;margin:0}.entry-header-menu a{display:block;font-size:12px;font-weight:700;padding:5px 25px;background:#454545;font-size:13px;position:absolute;left:480px;top:5px;color:#f5f5f5}.entry-header-menu a:hover{background:#4486c9;text-decoration:none}.entry .entry-category-area{padding:5px 0;margin:0;color:#aaa;font-size:70%}.entry .entry-category a{color:#454545;margin-left:5px;background:#fff;padding:3px 6px;border:1px solid #ddd;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px}.entry .entry-category :hover{color:#fff;text-decoration:none;background:-moz-linear-gradient(top,#3888da 0%,#256fba 100%);border:1px solid #256fba}.entry-footer{display:block;margin-top:1em;color:#454545;font-size:13px}.entry-footer .social-buttons{margin:0 0 10px}.entry-footer-section{color:#aaa;padding-bottom:8px;margin:0}.pager{display:inline;margin-right:10px}.pager a{font-size:12px;font-weight:700;padding:5px 25px;background:#bbb;font-size:13px;color:#f5f5f5;line-height:1.5;word-wrap:break-word;display:inline-block;max-width:200px}.pager a:hover{background:#4486c9;text-decoration:none}.entry-content{font-size:14px;line-height:1.9;margin:.5em 0}.entry-content img{max-width:560px}.entry-content p{margin:.8em 0}.entry-content h1,.entry-content h2,.entry-content h3,.entry-content h4,.entry-content h5,.entry-content h6{margin:1em 0 .5em}.entry-content h1{font-size:160%}.entry-content h2{font-size:150%}.entry-content h3{font-size:140%}.entry-content h4{font-size:120%}.entry-content h5{font-size:110%}.entry-content h6{font-size:100%}.entry-content h1,.entry-content h2,.entry-content h3{border-bottom:1px dotted #999}.entry-content ul,.entry-content ol{margin:0 0 0 1.5em;padding:0}.entry-content h1,.entry-content h2,.entry-content h3,.entry-content h4,.entry-content h5,.entry-content h6,.footnote-number{scroll-margin-top:56px}.entry blockquote{padding:10px;margin:1em 0;border:1px solid #ddd;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px}.entry blockquote p{margin-top:0;margin-bottom:0}.entry-content table{border-collapse:collapse;border-spacing:0}.entry-content table th,.entry-content table td{border:1px solid #ddd;padding:5px 10px}.entry-content table th{background:#fafafa}a.keyword{color:#454545;text-decoration:none;border-bottom:1px solid #DEDEDE}pre.lang-aa{font-size:14px;line-height:15px}.entry-comment{border-bottom:1px solid #ddd}.entry-comment:nth-child(1){border-top:1px solid #ddd}.comment{margin:0 0 15px;padding:0;font-size:13px}.comment li{list-style:none;padding:8px 0}.comment-user-name{font-weight:700;margin:0}.comment-content p{line-height:1.7}.comment-content p{margin:.5em 0;word-wrap:break-word}.comment-metadata{display:inline}.comment-metadata,.comment-metadata a{color:#aaa}.leave-comment-title{font-size:12px;font-weight:700;padding:5px 15px;display:inline-block;*display: inline;*zoom: 1;background:#f5f5f5;border:1px solid #f5f5f5;-webkit-transition:.3s ease;-webkit-transition-property:opacity,border,color,background;-moz-transition:.3s ease;-moz-transition-property:opacity,border,color,background;-o-transition:.3s ease;-o-transition-property:opacity,border,color,background;transition:.3s ease;transition-property:opacity,border,color,background}.leave-comment-title:hover{text-decoration:none;border:1px solid #7D9AB7}.hatena-module{margin-bottom:40px;font-size:13px}.hatena-module-title,.hatena-module-title a,.hatena-module-title a:hover,.hatena-module-title a:visited{text-align:left;font-size:16px;font-weight:400;margin-bottom:5px;padding-bottom:3px;color:#454545}.hatena-module-body ul{margin:0;padding:0;list-style:none;line-height:1.5}.hatena-module-body ul li{padding:.7em 0;border-bottom:1px solid #ddd}.hatena-module-body ul li.archive{border:none}.hatena-module-profile .id{display:block;line-height:2}.profile-icon{border:1px solid #ccc}.hatena-module-profile .profile-description{margin:0 0 5px;line-height:1.5}form.search-form{margin-top:10px}form.search-form input{border:1px solid #ccc;vertical-align:middle}.search-form .search-module-input{width:130px;background:-moz-linear-gradient(top,#eee 0%,#eee 50%,#fff 100%);padding:3px 8px;margin:0;font-size:12px;border-radius:12px;-webkit-border-radius:12px;-moz-border-radius:12px}.search-form .search-module-button{height:23px;width:23px;border:none;text-indent:-999px;margin-left:-3px;*margin-left: -5px;cursor:pointer;background:#999 url(https://cdn.blog.st-hatena.com/images/theme/search_w.png?version=3a147c0e9d9380e4a9fc0dfb56d02c) 50% 50% no-repeat;border-radius:12px;-webkit-border-radius:12px;-moz-border-radius:12px}#footer-box{clear:both}#footer-area1,#footer-area2,#footer-area3,#footer-area4{width:220px;float:left}#footer-area1,#footer-area2,#footer-area3{margin-right:40px}#footer-area4:after{content:"";display:block;height:0;visibility:hidden;clear:both}#footer{clear:both;text-align:center;padding:10px 0;font-size:small}#footer a{color:#454545}#footer a:hover{color:#256fba;text-decoration:none}.hatena-embed.hatena-fotolife,.hatena-embed.twitpic{padding:10px 10px 30px;margin:1em 0;background:transparent;display:inline-block;border:1px solid #dfdfdf;box-shadow:0 1px 5px #00000029;background:#fff;text-align:center}.hatena-embed.hatena-fotolife{background:#fff url(https://cdn.blog.st-hatena.com/images/theme/hatena-embed/embed-fotolife.png?version=3a147c0e9d9380e4a9fc0dfb56d02c) no-repeat right bottom}.hatena-embed.twitpic{padding:10px}.hatena-embed.hatena-fotolife .hatena-embed-image,.hatena-embed.twitpic .hatena-embed-image{display:inline-block;max-width:600px}.hatena-embed.hatena-fotolife .hatena-embed-body,.hatena-embed.hatena-fotolife .hatena-embed-body a,.hatena-embed.twitpic .hatena-embed-body,.hatena-embed.twitpic .hatena-embed-body a{text-align:center;font-family:Homemade Apple,cursive;color:#454545;font-size:16px;margin-top:10px}.hatena-embed.hatena-coco,.hatena-embed.foursquare{margin:1em 0;box-shadow:0 1px 5px #00000029}.hatena-embed.hatena-coco{border:1px solid #e2d279;padding:20px 30px;background:#faf9e6 url(https://cdn.blog.st-hatena.com/images/theme/hatena-embed/embed-coco.png?version=3a147c0e9d9380e4a9fc0dfb56d02c) no-repeat right bottom}.hatena-embed.hatena-coco .hatena-embed-image,.hatena-embed.foursquare .hatena-embed-image{width:100px;height:100px}.hatena-embed.foursquare{border:1px solid #C1D5DB;padding:20px 30px;background:#e6eff2 url(https://cdn.blog.st-hatena.com/images/theme/hatena-embed/embed-4sq.png?version=3a147c0e9d9380e4a9fc0dfb56d02c) no-repeat right bottom}.hatena-embed.hatena-bookmark{padding:15px 15px 15px 70px;margin:1em 0;background:transparent;border:1px solid #dfdfdf;box-shadow:0 1px 5px #00000029;background:#fff url(https://cdn.blog.st-hatena.com/images/theme/hatena-embed/embed-bookmark.png?version=3a147c0e9d9380e4a9fc0dfb56d02c) no-repeat 10px top;position:relative}.hatena-embed.hatena-bookmark a{text-decoration:underline}.hatena-embed.hatena-bookmark .hatena-embed-image{max-height:50px}.hatena-embed.hatena-haiku{padding:15px 15px 15px 70px;margin:1em 0;background:transparent;border:1px solid #dfdfdf;box-shadow:0 1px 5px #00000029;background:#fff url(https://cdn.blog.st-hatena.com/images/theme/hatena-embed/embed-haiku.png?version=3a147c0e9d9380e4a9fc0dfb56d02c) no-repeat 5px 5px}.hatena-embed.hatena-monolith{width:580px;padding:15px;margin:1em 0;background:transparent;border:1px solid #dfdfdf;box-shadow:0 1px 5px #00000029;background:#fff url(https://cdn.blog.st-hatena.com/images/theme/hatena-embed/embed-monolith.png?version=3a147c0e9d9380e4a9fc0dfb56d02c) no-repeat right bottom}.hatena-embed.hatena-monolith .hatena-embed-image{display:block;float:left;max-width:98px;border:1px solid #dfdfdf}.hatena-embed.hatena-monolith .hatena-embed-body{float:left;width:470px;margin-left:10px}.hatena-embed.hatena-monolith:after{content:"";display:block;height:0;visibility:hidden;clear:both}.hatena-embed.twitter{padding:10px 0;margin:1em 0;border-bottom:1px dotted #757575;border-top:1px dotted #757575}.hatena-embed.atnd{padding:10px 0;margin:1em 0;border-bottom:1px dotted #757575;border-top:1px dotted #757575;font-family:PT Sans Caption,Helvetica,ヒラギノ角ゴ Pro W3,HiraKakuProN-W3,Hiragino Kaku Gothic Pro,メイリオ,Meiryo,ＭＳ Ｐゴシック,sans-serif}.hatena-embed-detail.atnd-detail{font-size:20px;font-weight:700;color:#262626}.hatena-embed-detail.atnd-detail:hover{color:#ea1f00;text-decoration:none}.hatena-embed.atnd .content-body{font-size:12px;color:#222}.page-about dt{font-size:16px;font-weight:700}.page-about dd{margin-left:0;margin-bottom:30px}.page-about .etnry-content img.profile-icon{height:16px;width:16px}.page-archive .date{position:static;border:none}.page-archive .archive-entries .entry-title{margin:0 0 .3em;line-height:1.5}.page-archive .archive-entries section{margin-bottom:30px}.page-archive .archive-entries .categories{margin-bottom:10px}.page-archive .archive-entries p{font-size:14px;line-height:1.5}

/* </system> */

/* <system section="background" selected="FFFEE4"> */
body{background:#FFFEE4;}
/* </system> */

/*****グローバルメニュー****/
#menu{
    width: 100%;
    margin: 10px auto;
    background: #550000;/*７*/
}
#menu-inner{
    width: 1000px;/*１*/
    height: 40px;/*２*/
    margin: 0 auto;
    background: #444;/*８*/
}
#menu-btn{display: none;}
#menu-content{
    padding-left: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    list-style-type: none;
}
#menu-content > li{
    position: relative;
    float: left;
    height: 100%;
    text-align: center;
}
#menu-content > li > a{
    position: relative;
    display: block;
    height: 100%;
    padding-left: 15px;/*３*/
    padding-right: 15px;/*３*/
    line-height: 40px;/*２*/
    background: #444;/*９*/
    color: #fff;/*10*/
    font-size: 70%;
    text-decoration: none;
    z-index: 2;
}
#menu-content > li > a:hover{
    background: #555;/*11*/
    color: #fff;/*12*/
}
#menu-content > li > a > .blogicon-chevron-down{margin-right: 5px;}
/*２階層目*/
#menu-content > li > ul.second-content{
    visibility: hidden;
    position: absolute;
    top: 0;
    margin: 0;
    padding-left: 0;
    list-style-type: none;
    z-index: -1;
}
#menu-content > li:hover > ul.second-content{
    visibility: visible;
    top: 40px;/*2*/
    z-index: 1;
    transition: all .3s;
}
#menu-content > li > ul.second-content > li{
    text-align: center;
    width: 200px;/*４*/
    height: 40px;/*５*/
}
#menu-content > li > ul.second-content > li > a{
    display: block;
    line-height: 40px;/*５*/
    background: #444;/*13*/
    color: #fff;/*14*/
    font-size: 70%;
    text-decoration: none;
}
#menu-content > li > ul.second-content > li > a:hover{
    background: #555;/*15*/
    color: #fff;/*16*/
}
/*******トグルメニュ*********/
@media screen and (max-width:960px){/*19*/
#menu-inner{
    width: 100%;
    height: auto;
}
#btn-content{text-align: right;}/*20*/
#menu-btn{
    display: inline-block;
    padding: 8px 15px;
    margin: 5px;
    cursor: pointer;
    background: #555;/*17*/
    color: #fff;/*18*/
    font-size: 70%;
}
#menu-content{
    display: none;
    width: 100%;
}
#menu-content > li{
    width: 100%;
    height: 40px;/*６*/
    float: none;
}
#menu-content > li > a{
    width: 100%;
    line-height: 40px;/*６*/
    padding: 0;
    text-decoration: none;
}
/*２階層目*/
#menu-content > li:hover > ul.second-content{display: none;}
#menu-content > li > a > .blogicon-chevron-down{display: none;}
}




/*--------------------------------------
  もくじ
--------------------------------------*/
ul.table-of-contents {
  font-size: 15px !important; /*文字サイズ*/
  border: double #FFABCE !important;
  padding: 1em 1.5em 1em 2.25em !important;
  color: #0A2A22 !important;
  display: inline-block;
}
ul.table-of-contents:before {
  content: "::::  目次  ::::";
  display: block;
  text-align: left;
  margin: 0;
  padding: 10px 0px 10px 0px;
  font-weight: bold;
  color: #FFABCE;
}
ul.table-of-contents a:after {
  display: none !important;
}
ul.table-of-contents li a,
ul.table-of-contents li a:visited {
  color: #6E6E6E !important; /* リンク文字の色 */
  text-decoration: none; /* リンクの下線あり・なし */
}
ul.table-of-contents li a:hover {
  color: lightgrey !important; /* リンクにマウスを重ねた時の色 */
}
ul.table-of-contents li {
  margin: 5px 0 10px 6px !important;
  line-height: 1.5;
  padding: 0;
  list-style-type: none !important;
}
ul.table-of-contents li:before {
  font-family: blogicon;
  content: "\f029";
  position: absolute;
  left: 3.0em;
  color: #FFABCE;
}
ul.table-of-contents ul li,
ul.table-of-contents li ul {
  /* H1のみ表示させる */
  display: none !important;
}

/*******グローバルナビ********/
.slideButton {
    display: none;
}
#slideMenu {
    position: relative;
    width: 100%;
    height: 40px;
    background-color: #550000;/*メニューの背景色*/
}
#slideMenu > .slideMenuInner {
    list-style-type: none;
    width: 960px;/*メニューの横幅を*/
    height: 100%;
    margin: 0 auto;
    padding-left: 0;
}
#slideMenu > .slideMenuInner li {
    position: relative;
    float: left;
    height: 100%;
    text-align: center;
}
#slideMenu > .slideMenuInner > li a {
    display: block;
    position: relative;
    z-index: 2;
    height: 100%;
    padding-right: 20px;/*文字の左の余白*/
    padding-left: 20px;/*文字の右の余白*/
    background-color: #550000;/*文字の背景色*/
    color: #fff;/*文字色*/
    font-size: 70%;
    text-decoration: none;
    line-height: 40px;
}
#slideMenu > .slideMenuInner > li:hover a {
    background-color: #555;/*文字の背景色（マウスホバー時）*/
}
/*２階層目*/
#slideMenu > .slideMenuInner > li > ul.second-level {
    visibility: hidden;
    list-style-type: none;
    position: absolute;
    z-index: -1;
    top: 0;
    margin: 0;
    padding-left: 0;
}
#slideMenu > .slideMenuInner > li:hover > ul.second-level {
    visibility: visible;
    z-index: 1;
    top: 40px;
    transition: all .3s;
}
#slideMenu > .slideMenuInner > li:hover > ul.second-level > li {
    width: 200px;
    height: 40px;
    text-align: center;
}
#slideMenu > .slideMenuInner > li:hover > ul.second-level > li > a {
    display: block;
    background-color: #444;/*子メニューの文字の背景色*/
    color: #fff;/*子メニューの文字色*/
    font-size: 70%;
    text-decoration: none;
    line-height: 40px;
}
#slideMenu > .slideMenuInner > li:hover > ul.second-level > li > a:hover {
    background-color: #555;/*子メニューの背景色（マウスホバー時）*/
}
/*２階層目ここまで*/
/******スライドメニュー*******/
@media screen and (max-width:960px) {/*１*/
    #menuButton {
        z-index: 10;
        width: 100%;
        background-color: #550000;/*メニューバーの色*/
    }
    #menuButtonInner {
        position: relative;
        width: 100%;
        margin: 0 auto;
        text-align: right;
    }
    .slideButton {
        display: inline-block;
        margin: 5px;
        padding: 8px 15px;
        background-color: #555;/*「MENU」の背景色*/
        color: #fff;/*「MENU」の文字色*/
        font-size: 70%;
        text-decoration: none;
        cursor: pointer;
    }
    #slideMenu {
        overflow-x: hidden;
        overflow-y: auto;
        position: absolute;
        z-index: 20;
        top: 0;
        right: -260px;
        width: 260px;
        height: 100%;
        margin: 0;
        padding: 0;
        box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
    }
    #slideMenu > .slideMenuInner {
        position: static;
        width: 100%;
        height: 100%;
    }
    #slideMenu > .slideMenuInner > li {
        display: block;
        position: relative;
        float: none;
        width: 100%;
        height: 40px;
        margin: 0 auto;
        border-top: 1px solid #eee;
        text-align: center;
    }
    #slideMenu > .slideMenuInner > li a {
        display: block;
        position: relative;
        z-index: 1;
        width: 100%;
        height: 100%;
        padding: 0;
        background-color: #fff;/*スライドメニューの背景色*/
        color: #333;/*スライドメニューの文字色*/
        font-size: 70%;
        font-weight: bold;
        line-height: 40px;
    }
    #slideMenu > .slideMenuInner > li:hover a {
        background-color: #fff;/*スライドメニューの背景色（マウスホバー時）*/
        color: #333;/*スライドメニューの文字色（マウスホバー時）*/
    }
    #slideMenu > .slideMenuInner > li > a:active {
        opacity: .8;
    }
    #slideMenu > .slideMenuInner > li:hover > ul.second-level {
        display: none;
    }
    .closeArea {
        height: 100%;
        background-color: #333;/*クローズエリア（スライドメニューの下の部分）の色*/
        cursor: pointer;
    }
    #layer {
        display: none;
        position: fixed;
        z-index: 10;
        top: 0;
        width: 100%;
        height: 150%;
        background-color: #222;/*レイヤーの色*/
        opacity: .4;/*レイヤーの透明度*/
        cursor: pointer;
    }
}

.entry-content {
    font-size:18px;
}


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

.entry-content h3 {
position: relative;
color: #fff;
padding: 8px 12px;
background-color: #fee1eb;
border-radius: 6px;
}
.entry-content h3::before{
position: absolute;
top: 100%;
left: 32px;
width: 0;
height: 0;
border-width: 10px;
border-style: solid;
border-color: transparent;
border-top-color: #129b98;
content: '';
}
    
    .entry-content h4{
    color: #000000;
    background: #FFFFFF;
    padding: 10px 15px; 
    border-left: 10px solid #FFE4E1;
    }
    
.background-blue{
    background: #EAF6FD;
    padding: 30px;
    margin: 5px;
    border-radius: 5px;
}


/* 吹き出しのCSS　*/
.entry-content .l-fuki,
.entry-content .r-fuki {
    position: relative;
    width: 80%;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    padding: 20px;
    border-radius: 6px;
    border: 2px solid #999;
    box-shadow: 1px 1px 5px #aaa;
    background-color: #fff;
    z-index: 1;
}
.entry-content .l-fuki {
    margin: 20px 20% 40px 0;
}
.entry-content .r-fuki {
    margin: 20px 0 40px 19%;
}
.entry-content .l-fuki::before,
.entry-content .r-fuki::before {
    position: absolute;
    content: "";
    top: 16px;
    width: 10px;
    height: 10px;
    border-right: 2px solid #999;
    border-bottom: 2px solid #999;
    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 {
    position: absolute;
    content: "";
    width: 80px;
    height: 80px;
    top: -10px;
    border-radius: 40px;
    border: 3px solid #fff;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    box-shadow: 1px 1px 5px #aaa;
}
.entry-content .l-fuki::after {
    right: -110px;
}
.entry-content .r-fuki::after {
    left: -110px;
}
@media screen and (max-width: 620px) {
    .entry-content .l-fuki,
    .entry-content .r-fuki {
        width: 70%
    }
    .entry-content .l-fuki {
        margin-right: 30%;
    }
    .entry-content .r-fuki {
        margin-left: 30%;
    }
}
@media screen and (max-width: 478px) {
    .entry-content .l-fuki::after,
    .entry-content .r-fuki::after {
        width: 60px;
        height: 60px;
        border-radius: 30px;
    }
    .entry-content .l-fuki::after {
        right: -84px;
    }
    .entry-content .r-fuki::after {
        left: -84px;
    }
}
.ponmama52::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/p/ponchan0502/20180927/20180927145716.png);}
.ponmama::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/p/ponchan0502/20180927/20180927150658.png);}



.box27 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #62c1ce;
}
.box27 .box-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    vertical-align: middle;
    font-size: 17px;
    background: #62c1ce;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.box27 p {
    margin: 0; 
    padding: 0;
}


/*1つ1つの関連記事ボックス*/
li.urllist-item.related-entries-item {
    margin: 11px 0;
    padding: 10px 10px 10px 0;
    background: #ffffff;
    border: solid 2px #e4e4e4;
}

/*関連記事の画像の大きさ*/
img.urllist-image.related-entries-image {
    width: 120px;
    margin-top: -10px;
    margin-bottom: -10px;
    border-right: 2px solid #e4e4e4;
}

/*関連記事のタイトル*/
a.urllist-title-link.related-entries-title-link.urllist-title.related-entries-title {
    text-decoration: none;
    color: #525252;
    font-weight: bold;
}

/*関連記事のタイトル*/
a.urllist-title-link.related-entries-title-link.urllist-title.related-entries-title:hover {
    color: silver;
}

/*関連記事の説明*/
.urllist-entry-body.related-entries-entry-body {
    color: #8f8f8f;
    font-size: 13px;
    margin-top: 3px;
}

.urllist-date-link.related-entries-date-link {
    position: relative;
}

/*関連記事の日付*/
.hatena-urllist .urllist-date-link a {
    display: inline-block;
    background: #ee8c8c;
    color: #fff;
    line-height: 1;
    padding: 4px 5px;
    margin-bottom: 3px;
    border-radius: 4px;
    font-size: 11px;
    font-style: normal;
    	text-decoration: none;
}

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
/*=================================================================================
 カエレバ・ヨメレバ・トマレバ
=================================================================================*/
 
.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;
}
.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;
}
/* タイトル下にPタグ自動挿入された際の余白を小さく */
.cstmreba .kaerebalink-name p,
.cstmreba .booklink-name p,
.cstmreba .tomarebalink-name p {
    margin: 0;
}
/* 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 .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 .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 .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 .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%;
 }
}

.marker_yellow {
background: linear-gradient(transparent 60%, #ffff66 60%);
}

.marker_blue {
background: linear-gradient(transparent 60%, #66CCFF 60%);
}

.kakomi_waku {
background:#FFF5EE;/*背景色*/
padding: 20px;/*四方の余白*/
border-style: dashed;/*線の種類*/
}

.box25{
    position: relative;
    background: #fff0cd;
    box-shadow: 0px 0px 0px 5px #fff0cd;
    border: dashed 2px white;
    padding: 0.2em 0.5em;
    color: #454545;
}
.box25:after{
    position: absolute;
    content: '';
    right: -7px;
    top: -7px;
    border-width: 0 15px 15px 0;
    border-style: solid;
    border-color: #ffdb88 #fff #ffdb88;
    box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
}
.box25 p {
    margin: 0; 
    padding: 0;
}

.box8 {
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #232323;
    background: #fff8e8;
    border-left: solid 10px #ffc06e;
}
.box8 p {
    margin: 0; 
    padding: 0;
}


.box15 {
    padding: 0.2em 0.5em;
    margin: 2em 0;
    color: #565656;
    background: #ffeaea;
    box-shadow: 0px 0px 0px 10px #ffeaea;
    border: dashed 2px #ffc3c3;
    border-radius: 8px;
}
.box15 p {
    margin: 0; 
    padding: 0;
}


.article-btn a{
 display:block;
 text-decoration:none;
 padding:7px 10px;
 border-radius:4px;
 font-weight:bold;
 color:white;/* ボタンの文字色 */
 background-color:#3CB371;/* ボタンの背景色 */
 border:2px solid #3CB371;/* ボタン枠の背景色 */
 transition:all 0.5s;
 text-align:center;
}
.article-btn a:hover{
 color:#3CB371;
 border:2px solid #3CB371;/* マウスオーバー時のボタンの背景色 */
 background-color:white;/* マウスオーバー時のボタンの背景色 */
}