/* <system section="theme" selected="4207112889962348855"> */
/*!
  Theme: Ryucho
  Author: rokuzeudon
  Responsive: yes
  Description:
    シンプルなはてなブログテーマです。サイドバーが左に配置され、メインカラムの長さに応じてスクロール追従することが特徴です。
*//*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body{font-family:"Helvetica Neue","Helvetica","Arial","Hiragino Kaku Gothic Pro","Meiryo","MS PGothic";color:#2a2a2a;background-color:#eaeaea;line-height:1.6}a{color:#333}a:-webkit-any-link{-webkit-text-decoration-line:underline;text-decoration-line:underline;-webkit-text-decoration-color:#999;text-decoration-color:#999;text-decoration-thickness:1px}a:-moz-any-link{text-decoration-line:underline;text-decoration-color:#999;text-decoration-thickness:1px}a:any-link{-webkit-text-decoration-line:underline;text-decoration-line:underline;-webkit-text-decoration-color:#999;text-decoration-color:#999;text-decoration-thickness:1px}a:hover{opacity:.85}a.keyword{border-bottom:1px dotted #ddd;color:#2a2a2a}h1,h2,h3,h4,h5,h6{color:#111;line-height:1.3}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color:#111}#container{padding-left:10px;padding-right:10px}@media(min-width: 768px){#container{width:720px;margin:auto;padding-left:0;padding-right:0}}@media(min-width: 992px){#container{width:940px}}#content-inner{display:flex;flex-direction:column;justify-content:space-between}@media(min-width: 768px){#content-inner{flex-direction:row-reverse}}@media(min-width: 768px){#wrapper{width:480px}}@media(min-width: 992px){#wrapper{width:600px}}@media(min-width: 768px){#box2{width:200px}}@media(min-width: 992px){#box2{width:300px}}#box2-inner{position:-webkit-sticky;position:sticky;top:2em}.entry{position:relative;margin-bottom:3em;padding:2em;line-height:1.7;background-color:#fff;border-radius:.6em}.entry-header{padding-bottom:1em;margin-bottom:1em;position:relative}.date{margin-bottom:.5em;font-size:80%}.entry-title{margin:0 0 .3em;font-size:1.5rem}.categories{margin:.5em 0;font-size:.9rem}.categories a{display:inline-block;margin-right:.5em}.categories a::before{font-family:blogicon;display:inline-block;content:"";margin-right:.2em;font-size:90%;opacity:.6;text-decoration:none}.breadcrumb{font-size:80%}.breadcrumb-link::after,.breadcrumb-child-link::after{content:"";font-family:blogicon;font-size:70%;color:#999;display:inline-block;margin:0 .6em 0 1em;text-decoration:none}.breadcrumb-gt{display:none}#footer{margin-top:2em;padding-bottom:2rem;padding-left:10px;padding-right:10px;text-align:center;font-size:.8rem;color:#999}#footer p{margin:.5em auto}@media(min-width: 768px){#footer{width:720px;margin:auto;padding-left:0;padding-right:0}}@media(min-width: 992px){#footer{width:940px}}#blog-title{margin:2em 0;text-align:center}@media(min-width: 768px){#blog-title{margin:3em 0;text-align:left}}#title{margin:0;font-size:1.5rem}@media(min-width: 992px){#title{font-size:1.7rem}}#blog-description{font-weight:normal;font-size:.8rem;margin:1em 0 0}.header-image-enable #blog-title{margin:0 auto 2em;text-align:center}.header-image-enable #blog-title-inner{display:flex;flex-direction:row;align-items:center;width:calc(100% + 20px);margin-left:-10px}@media(min-width: 768px){.header-image-enable #blog-title-inner{width:100%;margin-left:0}}.header-image-enable #blog-title-content{width:100%;margin-left:1em;margin-right:1em}#top-editarea{margin-bottom:1em}#globalheader-container{background-color:#2a2a2a;color:#eaeaea}.hatena-module-profile .profile-icon{float:left;margin:0 10px 10px 0;border-radius:.3em}.hatena-module-profile .id{display:block;font-weight:bold;margin-bottom:.5em}.hatena-module-profile .profile-description p{margin-top:0}.hatena-module-search-box .search-form{border:1px solid #ddd;border-radius:3px;width:100%;box-sizing:border-box;display:flex;align-items:center}.hatena-module-search-box .search-module-input{flex:1 0;padding:5px;color:#2a2a2a;background:none;border:none;outline:none;max-width:calc(100% - 40px);height:20px}.hatena-module-search-box .search-module-button{width:24px;height:24px;margin-right:5px;background:rgba(0,0,0,0) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:none;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Esearch%3C/title%3E%3Cpath d='M16.7,15l-3.4-3.3h-.1a5.4,5.4,0,0,0,.9-3.1,5.6,5.6,0,1,0-5.6,5.6,5.4,5.4,0,0,0,3.1-.9.1.1,0,0,0,.1.1L15,16.7a1.1,1.1,0,0,0,.8.3,1.6,1.6,0,0,0,.9-.3,1.4,1.4,0,0,0,0-1.7M8.5,12.3A3.8,3.8,0,0,1,4.8,8.5,3.8,3.8,0,0,1,8.5,4.7a3.9,3.9,0,0,1,3.8,3.8,3.8,3.8,0,0,1-3.8,3.8'/%3E%3Crect class='a' width='20' height='20'/%3E%3C/svg%3E") no-repeat center;background-size:20px 20px;border:none;outline:none;color:rgba(0,0,0,0);overflow:hidden;opacity:.5;cursor:pointer}.hatena-module-search-box .search-module-button:hover{opacity:.85}.search-result .search-result-form{max-width:100%}.hatena-urllist{margin:0;padding:0 1em 0 1.4em}.hatena-urllist.recent-comments,.hatena-urllist.authors-urllist,.hatena-urllist.circle-urllist{padding:0;list-style:none}.hatena-urllist li{padding:0 0 .5em;line-height:1.4}.hatena-urllist li:last-child{padding-bottom:0}.hatena-urllist .urllist-title-link{font-size:1em}.hatena-urllist .urllist-category-link{position:relative;display:inline-block;font-size:.7rem}.hatena-urllist .urllist-category-link::before{font-family:blogicon;content:"";margin-right:.2em;font-size:90%;opacity:.6;text-decoration:none}.hatena-urllist .urllist-entry-body{margin-top:.3em}.urllist-image{border-radius:.3em}.urllist-date-link{margin-bottom:.4em}.urllist-date-link a{text-decoration:none}.urllist-with-thumbnails{padding:0}.urllist-with-thumbnails .urllist-item{padding-bottom:1em}.authors-user-icon,.hatena-id-icon,.circle-image{border-radius:.3em}.hatena-module-recent-comments .user-id{display:block}.hatena-module-recent-comments li{padding:0 0 1em}.hatena-module-recent-comments .recent-comments .user-id img{margin:0}.hatena-module-recent-comments .recent-comments .recent-comment-time{margin:0 .2em;opacity:1}.hatena-module-profile .id{margin-bottom:.3em}.hatena-module-profile .profile-activities{font-size:80%}.profile-about a,.urllist-see-more a,a.leave-comment-title,a.hatena-follow-button.unsubscribing,.entry-see-more,.archive-entry-tag-link{display:inline-block;margin-right:.6em;padding:.2em .6em;font-size:90%;font-weight:bold;text-decoration:none;background-color:#fff;border:1px solid #ddd;border-radius:.3em}.profile-about a:hover,.urllist-see-more a:hover,a.leave-comment-title:hover,a.hatena-follow-button.unsubscribing:hover,.entry-see-more:hover,.archive-entry-tag-link:hover{background-color:#f5f5f5}a.hatena-follow-button.unsubscribing{padding:.2em .6em .2em 1.6em;background-position:1px 1.5px}.hatena-follow-button-box{clear:none;font-size:100% !important;height:auto;margin:auto;display:inline-block}.hatena-module-category .hatena-urllist,.hatena-module-links .hatena-urllist{padding:0;list-style:none}.hatena-module-category a,.hatena-module-links a{display:block;position:relative;padding-left:1.4em}.hatena-module-category a::before,.hatena-module-links a::before{position:absolute;display:inline-block;top:.1em;left:.2em;margin-right:.2em;font-family:blogicon;font-size:90%;opacity:.6;text-decoration:none}.hatena-module-category a::before{content:""}.hatena-module-links a::before{content:""}.archive-module-show-button,.archive-module-hide-button{font-size:80%}.hatena-module{box-sizing:border-box;margin-bottom:2em;padding:1.4em;font-size:.85rem;background-color:#fff;border-radius:.6em}@media(min-width: 768px){.hatena-module{font-size:.9rem}}.hatena-module-title{margin-bottom:.6em;padding-bottom:.2em;font-size:1rem;font-weight:bold}.pager{margin:2em 0;display:flex;justify-content:space-between}.pager .pager-arrow{display:none}.pager a{display:block;padding:1em;font-size:90%;font-weight:bold;text-decoration:none;background-color:#fff;border:1px solid #ddd;border-radius:.6em}.pager a::before,.pager a::after{font-family:blogicon;font-size:80%;color:#999;display:inline-block;text-decoration:none}.pager a:hover{background-color:#f5f5f5}.pager .pager-prev a::before{content:"";margin-right:.6em}.pager .pager-next a::after{content:"";margin-left:.6em}.page-about .entry-content dt{font-weight:bold;border-bottom:1px solid #ddd;margin-bottom:.5em}.page-about .entry-content dd{margin-left:0;margin-bottom:2em}.archive-heading{margin:0 0 2rem;font-size:1.5em}.archive-header-category{margin:0;padding-bottom:1rem}.archive-header-category .archive-heading{margin:0 0 1rem;font-size:1.5em}.search-result{margin-bottom:2rem;display:flex;flex-direction:column;flex-direction:column-reverse}.search-result .archive-heading{margin:1em 0 0;font-size:1.5em}.archive-entry{margin-left:auto;margin-right:auto;line-height:1.3;padding:2em;background-color:#fff;border-bottom:1px solid #ddd}.archive-entry:first-child{border-radius:.6em .6em 0 0}.archive-entry:last-child{border-radius:0 0 .6em .6em;margin-bottom:2em}@media(min-width: 768px){.archive-entry{margin-bottom:2em;border-radius:.6em;border-bottom:none}.archive-entry:first-child,.archive-entry:last-child{border-radius:.6em}}.page-archive #content{margin-top:1.5em}.page-archive .archive-entry-body{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.page-archive .entry-title{margin:.3em auto;font-size:1.2rem}.page-archive .entry-thumb{width:80px;height:80px;margin-top:1.2rem;margin-right:1.2em;background-size:cover;border-radius:.3em}@media(min-width: 768px){.page-archive .entry-thumb{width:120px;height:120px}}.page-archive .entry-description{margin:1.2rem 0 0;font-size:76%;color:#999;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}@media(min-width: 768px){.page-archive .entry-description{font-size:.9rem;-webkit-line-clamp:4}}.page-archive .social-buttons{display:block;margin-top:.3em}@media(min-width: 768px){.page-archive .social-buttons{margin-top:1em}}.page-archive .archive-entry-tags-wrapper{margin:.25em 0;overflow:hidden}.page-archive .archive-entry-tag{margin-right:0}.page-archive .archive-entry-tag .archive-entry-tag-link{margin-right:0;padding:.2em .6em;font-size:11px;color:#999}.page-archive .archive-entry-tag .archive-entry-tag-icon{width:8px;height:8px}.entry-header-menu{position:absolute;top:0;right:0}.entry-content img,.entry-content video{max-width:100%;height:auto}.entry-content h1,.entry-content h2,.entry-content h3,.entry-content h4,.entry-content h5,.entry-content h6{margin:1.8em 0 .8em 0}.entry-content h1{font-size:1.5rem}@media(min-width: 992px){.entry-content h1{font-size:1.7rem}}.entry-content h2{font-size:1.4rem}@media(min-width: 992px){.entry-content h2{font-size:1.5rem}}.entry-content h3{font-size:1.2rem}@media(min-width: 992px){.entry-content h3{font-size:1.3rem}}.entry-content h4{font-size:1.1rem}.entry-content h5{font-size:1rem}.entry-content h6{font-size:.9rem}.entry-content ul,.entry-content ol,.entry-content dd{margin:0 0 1em 1.5em;padding:0}.entry-content ul li ul,.entry-content ul li ol,.entry-content ol li ul,.entry-content ol li ol,.entry-content dd li ul,.entry-content dd li ol{margin-bottom:0}.entry-content table{border-collapse:collapse;border-spacing:0;border-bottom:1em;margin-bottom:1em;width:100%;overflow:auto;display:block;font-size:.8rem}@media(min-width: 992px){.entry-content table{font-size:.9rem}}.entry-content table th,.entry-content table td{border:1px solid #ddd;padding:5px 10px}.entry-content table th{background:#f6f6f6}.entry-content blockquote{border:1px solid #ddd;margin:0 0 10px;padding:20px}.entry-content blockquote p:first-of-type{margin-top:0}.entry-content blockquote p:last-of-type{margin-bottom:0}.entry-content pre,.entry-content code{font-family:"Monaco","Consolas","Courier New",Courier,monospace,sans-serif}.entry-content pre{border:1px solid #ddd;border-radius:.3em;white-space:pre-wrap;text-overflow:ellipsis;line-height:1.3;font-size:.8rem;padding:10px}.entry-content pre>code{margin:0;padding:0;white-space:pre;border:none;background-color:rgba(0,0,0,0);font-family:"Monaco","Consolas","Courier New",Courier,monospace,sans-serif}.entry-content code{font-size:90%;margin:0 2px;padding:0px 5px;background-color:#f6f6f6;border-radius:3px}.entry-content hr{width:50%;border:0;border:none;border-top:1px solid #ddd;margin:2em auto}.entry-content .table-of-contents{position:relative;padding:3em 1em 1em 2em;margin:1em 0;background-color:#f6f6f6;border-radius:.3em;font-size:90%}.entry-content .table-of-contents::before{content:"目次";font-weight:bold;position:absolute;display:block;top:1em;left:1em}.entry-content .hatena-asin-detail,.entry-content .asin-detail-buy{border-radius:.3em}.entry-footer .social-buttons{margin-bottom:1em}.entry-footer .hatena-module{padding:0}.entry-footer .entry-footer-modules{margin-top:2em}.entry-footer-section{color:#999;font-size:.9rem}.comment-box{margin:1em 0}.comment-box .comment{list-style:none;margin:0 0 15px 0;padding:0;line-height:1.7;font-size:.85rem}@media(min-width: 768px){.comment-box .comment{font-size:.9rem}}.comment-box .entry-comment{margin-bottom:.4em;padding:1em 1em 1em 5.5em;background-color:#f6f6f6;border-radius:.3em}.comment-box .read-more-comments{padding:10px 0}.comment-box .hatena-id-icon{position:absolute;top:1em;left:1em;width:50px !important;height:50px !important;border-radius:.3em}.comment-user-name{margin:0;font-weight:bold}.comment-content{margin:0 0 .4em 0;word-wrap:break-word;color:#2a2a2a;font-size:.85rem}.comment-content p{margin:0 0 .6em 0}.comment-metadata{margin:0;font-size:80%}.leave-comment-title{padding:.6em 1em;font-size:.85rem;border:1px solid #ddd}.entry-see-more{margin-top:1em;width:100%;box-sizing:border-box;text-align:center;text-decoration:none !important}
/* </system> */

/* <system section="background" selected="custom"> */
body{ background-image: url('https://cdn-ak.f.st-hatena.com/images/fotolife/c/chikuwa_chiku/20260120/20260120013255.gif'); background-repeat: repeat; background-color:transparent; background-attachment: fixed; background-position: left top;}
/* </system> */

@charset "utf-8";
/*
-----------------------------------------
 
 【CSS編集 目次】
 
　(1) 文字のスタイル
　(2) ボタンのスタイル
　(3) エリアのスタイル
　(4) その他、拡張
 
  ※CSS編集で広告を修正しないでください
  （規約違反に該当する可能性があります）
 
-----------------------------------------
*/
 
 
 
/*
＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊
 
 
　(1) 文字のスタイル
 
 
＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊
*/
 
 
 
/* (1-1) 全体の文字
--------------------------------------------*/
 
 
/* 通常文字 */
.skinTextColor,.skinBaseTextColor,.skinBlock,body{
color:#333333;
}
 
 
/* リンク */
.skinAnchorColor,.skinBaseAnchorColor,.skinBlock a,a{
color:#FF8080;
}
 
 
/* 訪問済のリンク */
.skinAnchorVisitedColor,.skinBaseAnchorVisitedColor,.skinBlock a:visited,a:visited{
color:#FF8080;
}
 
 
/* マウスオーバーしたときのリンク */
.skinAnchorHoverColor,.skinBaseAnchorHoverColor,.skinBlock a:focus,.skinBlock a:hover,a:focus,a:hover{
color:#ff3366;
}
 
 
/* 弱い文字 （日付など）*/
.skinWeakColor,.skinBaseWeakColor{
color:#999999;
}
 
 
/* 強い文字 （NEW! 更新!など）*/
.skinStrongColor,.skinBaseStrongColor{
color:#ff3399;
}
 
 
 
/* (1-2) ブログタイトル文字
--------------------------------------------*/
 
 
/* skinTitle ブログタイトル文字 */
.skinTitle,.skinTitle:visited,.skinTitle:hover,.skinTitle:focus{
color:#000000;
font-weight:bold;
font-size:2.11em;
}
 
/* skinDescription ブログの説明文字 */
.skinDescription{
color:#333333;
}
 
 
/* (1-3) 記事／メッセージボード内の文字のスタイル
--------------------------------------------*/
 
/* skinArticleTitle 記事タイトル文字 */
.skinArticleTitle,.skinArticleTitle:hover,.skinArticleTitle:focus,.skinArticleTitle:visited{
font-size:1.31em;
font-weight:bold;
color:#FF7676;
}
 
 
 
/* (1-4) サイドバー内の文字のスタイル
--------------------------------------------*/
 
/* skinMenuTitle サイドメニュータイトル文字 */
.skinMenuTitle{}
 
/******************************************** 
    追加してあるスタイルです
    フッター部分にあるサイドメニュータイトルです。
    CSS3のshadowを使い影を付けてます。
*********************************************/
.skinSubB .skinMenuHeader{
        text-align: center;
        font-weight:bold;
        margin-bottom: 20px;
        color: #ccc;
        border-bottom: 1px solid #333;
        -webkit-box-shadow: inset 0px 3px 8px 1px rgba(0, 0, 0, 0.3);
        -moz-box-shadow: inset 0px 3px 8px 1px rgba(0, 0, 0, 0.3);
        box-shadow: inset 0px 3px 8px 1px rgba(0, 0, 0, 0.3);
        background: #555;
        -moz-border-radius: 5px;
        border-radius: 5px;
}
 
/*
＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊
 
 
 (2) ボタンのスタイル
 ※ボタンの背景画像や文字の色などを指定
 
 
＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊
*/
 
 
/* (2-1) ボタン[横180px 縦35px]
--------------------------------------------*/
 
 
/* ボタンの背景画像 ※[横180px 縦35px]のボタンの背景画像を指定 */
.skinImgBtnM{
background-image:url(//stat100.ameba.jp/p_skin/wu_pf_cssedit/img/skin_btn_m.png);
}
 
 
/* ボタンの文字色 */
.skinImgBtnM:hover span,.skinImgBtnM:focus span,.skinImgBtnM span{
color:#333333 !important;
}
 
 
 
 
/* (2-2) アイコン付きボタン[横128px 縦28px]
--------------------------------------------*/
 
 
/* アイコン付き ボタンの背景画像 ※[横128px 縦28px]のボタンの背景画像を指定 */
.skinImgBtnS{
background-image:url(//stat100.ameba.jp/p_skin/wu_pf_cssedit/img/skin_btn_s.png);
}
 
 
 
.skinImgBtnS:hover span,.skinImgBtnS:focus span,.skinImgBtnS span{
/*
 アイコン画像は下記から指定
 menu_icons_pastel.png (パステル）
 menu_icons_gray.png（グレー）
 menu_icons_black.png（黒）
 menu_icons_white.png（白）
*/
background-image:url(//stat100.ameba.jp/common_style/img/skin/cmn/icons/menu_icons/menu_icons_pastel.png);
color:#333333 !important;/* ←ボタンの文字色 */
}
 
 
 
 
/* (2-3) ページ送りボタンの  << 次へ 、前へ >> 、「次の記事タイトル」 >> ボタン
--------------------------------------------*/
 
 
.skinSimpleBtn,.skinSimpleBtn:visited,.skinSimpleBtn:hover,.skinSimpleBtn:focus{
border:1px solid #dddddd;
background:#ffffff;
color:#ff3366 !important;
}
 
 
/* ボタンにマウスオーバー */
.skinSimpleBtn:hover,.skinSimpleBtn:focus{
background:#f7f7f7;
}
 
 
/******************************************** 
    ページ送りで追加してあるスタイルです
*********************************************/
.pagingArea {
    width: 600px;
    padding: 10px;

background: url(//stat.blogskin.ameba.jp/blogskin_images/20130302/00/f4/f5/g/o02000200picomoo1362150388039.gif);

    background-color: #FFF;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.pagingPrev {
    top: 5px;
    left: 80px;
    width: 110px;
}
.pagingNext {
    top: 5px;
    left: 380px;
    width: 110px;
}
 
 
 
 
 
/*
＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊
 
 
 (3) エリアのスタイル
 ※背景画像、サイズ、ボーダーなどを各部分ごとに指定
 
 
＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊
*/
 
 
 
/******************************************** 
    追加してあるスタイルです。
　　　　広告が上部に表示されるのでここを基準に
　　　　しています。
*********************************************/
.skinFrame {
    position: relative;
}
 
 
/* (3-1) ボディ（全体）
--------------------------------------------*/
 
/* skinBody ボディ */
.skinBody{
/******************************************** 
    追加してあるスタイルです。背景色白
*********************************************/
    background: url(//stat.blogskin.ameba.jp/blogskin_images/20130302/00/f4/f5/g/o02000200picomoo1362150388039.gif);
}/* ←ブログ全体に背景を敷きたいとき */
.skinBody2{}
.skinBody3{}
 
 
 
 
/* (3-2) ブログヘッダー
--------------------------------------------*/
 
 
/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{
/******************************************** 
    追加してあるスタイルです。
    skinHeaderAreaをなくしています
*********************************************/
    height: 200px;
}/* ←ブログヘッダーに背景画像を敷きたいとき */
 
 
 
/******************************************** 
    追加してあるスタイルです。
    ブラウザ幅いっぱいに広がってるヘッダー部分です。
    CSS3のshadowで影を付けてます。
*********************************************/
.headerBnrArea{
    height: 200px;
    background: url(//stat.blogskin.ameba.jp/blogskin_images/20130302/00/f4/f5/g/o02000200picomoo1362150388039.gif);
}
 
/******************************************** 
    追加してあるスタイルです。
    ヘッダーバナーの表示位置を決めてます。
*********************************************/
.headerBnr{
    padding: 40px 0 0 250px;
}
 
 
/* skinBlogHeadingGroupArea タイトルと説明を囲うエリア */
.skinBlogHeadingGroupArea{
padding:20px 0 30px;
}
 
 
/* skinTitleArea ブログタイトルのエリア */
.skinTitleArea{
/******************************************** 
    padding-bottom:4pxは削除してます。
*********************************************/
}
 
/******************************************** 
    追加してあるスタイルです。
    ブログタイトルのエリアの文字を画像で表示
    させ表示位置を指定しています。
    background画像は各自で用意してください。
    画像サイズは横250px縦150pxです。
*********************************************/
.skinTitleArea a{
    width: 980px;
    height: 215px;
    text-indent: -999999px;/* ブログタイトル文字を消し画像で表示させてます */
    text-decoration: none;
    background: url(//stat.blogskin.ameba.jp/blogskin_images/20130302/00/67/c5/p/o09800215picomoo1362150941203.png) no-repeat;
    position: absolute;
    top: 0px;
}
 
/* skinDescriptionArea ブログの説明エリア */
.skinDescriptionArea {
/******************************************** 
    追加してあるスタイルです。
    GoogleAD広告の上辺りに表示されるように
    表示位置を指定しています。
*********************************************/
    position: absolute;
    top: 15px;
    padding-left: 260px;
}
 
 
 
/* (3-3) コンテンツエリア
--------------------------------------------*/
 
 
/* skinContentsArea コンテンツ980pxエリア */
.skinContentsArea{
/******************************************** 
    追加してあるスタイルです。
    フッターの幅を広げるためにwidth: 100%に
    !importantを指定してこのスタイルを
    優先しているようにしています。
*********************************************/
    width: 100%!important;/*フッターの幅を広げるため*/
    padding: 0px!important;
/* 注 ベースのcssにwidth:980px;の記述有り */
}
 
 
 
 
/* (3-4) メインエリア
--------------------------------------------*/
 
 
.skinMainArea{
/******************************************** 
    追加してあるスタイルです。
    この部分が記事やコメントなどが表示される
    メインエリアになります。
*********************************************/
    float: left !important;
    width: 610px!important;
    margin: 0 30px 0 20px;
line-height: 1.9;
font-family: 'メイリオ';
}
 
 
/******************************************** 
    追加してあるスタイルです。
    メインエリアとサイドバーを含む
    ブロックになります。
*********************************************/
.skinContentsArea2 {
    width: 980px !important;
    margin: 0 auto !important;
}
 
/******************************************** 
    追加してあるスタイルです。
    ここもメインエリアとサイドバーを含む
    ブロックになります。又ここで背景色
    を表示させてます。
*********************************************/
.layoutContentsA{
    margin-top: 20px;
    background: url(//stat.blogskin.ameba.jp/blogskin_images/20130302/00/f4/f5/g/o02000200picomoo1362150388039.gif);
    padding-bottom: 20px;
    width: 980px !important;
 
}
 
 
/* (3-5) メッセージボード
--------------------------------------------*/
 
 
.skinMessageBoard{
/* 注 ベースのcssに margin-bottom の記述有り */
border-top:1px dotted #979797;
border-bottom:1px dotted #979797;
background:#ffffff;/* ←メッセージボードに背景を敷きたいとき */
}
.skinMessageBoard2{}
.skinMessageBoard3{
padding:16px 30px;
}
 
 
 
 
/* (3-6) 記事
--------------------------------------------*/
 
/* skinArticle 記事エリア */
.skinArticle{
/* 注　ベースのcssに margin-bottom の記述有り */
padding:16px 0;
border:1px solid #FDF3F3;
background:#ffffff;/* ←記事に背景を敷きたいとき */
/******************************************** 
    追加してあるスタイルです。
********************************************/
    margin-top: 20px;
}
.skinArticle2{}
.skinArticle3{}
 
 
/* skinArticleHeader 記事タイトルエリア */
.skinArticleHeader{
margin:0 29px;
padding:2px 10px;
border-left:5px solid #FFB3B3;
}
.skinArticleHeader2{}
 
 
/* skinArticleBody 記事本文エリア */
.skinArticleBody{}
.skinArticleBody2{
margin:0 29px;
}
 
 
/* skinArticleFooter 記事フッターエリア */
.skinArticleFooter{
margin:10px 29px 0;
border-top:1px dotted #949494;
}
 
 
 
 
 
/******************************************** 
    追加してあるスタイルです。
    ブログ記事一覧ブロック部分です。
********************************************/
.listPageArea.tabList {
    margin-top: 20px;
}
 
 
 
 
/******************************************** 
    追加してあるスタイルです。
    Amebaおすすめキーワードの広告部分になります。
*********************************************/
#resPointArea {
    width: 100%;
    background-color: #FFF;
    border:1px solid #eeeeee;
    margin-top: -10px!important;
}
 
 
/******************************************** 
    追加してあるスタイルです。
    記事した部分にあるAmeba広告と
    Googlead広告を含むブロックになります。
*********************************************/
#footer_ad {
    background-color: #FFF;
    border:1px solid #eeeeee;
    margin: 0 0 20px 0!important;
    width: 100%;
    float: left;
}
 
/******************************************** 
    追加してあるスタイルです。
    記事した部分にあるAmeba広告ブロックです。
*********************************************/
#footer_ad ul {
    width: 300px;
    padding: 5px;
    float: left;
}
 
/******************************************** 
    追加してあるスタイルです。
    記事した部分にあるGooglead広告ブロックです。
*********************************************/
#advertising3 {
    width: 300px;
    float: left;
}
 
/******************************************** 
    追加してあるスタイルです。
    記事表示一覧した部分にある
    Googlead広告ブロックです。
*********************************************/
#advertising2 {
    background-color: #FFF;
}
 
 
 
 
 
 
 
/* (3-7) サイドバーエリア
--------------------------------------------*/
 
 
.skinSubArea{
} /* サイドバーエリア共通 */
.skinSubA{
/******************************************** 
    追加してあるスタイルです。
    margin-rightで右にマージンを設けてます。
*********************************************/
        margin-right: 20px;
} /* 300pxのサイドバーエリア */
 
.skinSubB{
/******************************************** 
    追加してあるスタイルです。
    このサイドバーがフッターに表示されます。
    width: 100%でブラウザ幅いっぱいに表示
    されるようにしてあります。
*********************************************/
    width: 100% !important;
} /* 180pxのサイドバーエリア */
 
 
/******************************************** 
    追加してあるスタイルです。
    ブラウザ幅いっぱいに広がるフッターブロック
    の背景色ぶろっくです。
*********************************************/
.layoutContentsB{
    margin: 0px -500px 0px -500px;
    padding: 20px 500px 10px;
    width: 100% !important;
    background: #FDF3F3;
    -webkit-box-shadow: 0px -3px 8px 2px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px -3px 8px 2px rgba(0, 0, 0, 0.5);
    box-shadow: 0px -3px 8px 2px rgba(0, 0, 0, 0.5);
}
 
 
/******************************************** 
    追加してあるスタイルです。
    フッターエリアに表示される各メニューのブロック
    です。ブロックは4つで設定してあります。
*********************************************/
.skinSubB .skinMenu{
    width: 230px !important;
    float: left !important;
    margin-right: 20px;
    background: none !important;
}
 
/******************************************** 
    追加してあるスタイルです。
    フッターエリアに表示される各メニューのブロック
    です。ブロックの背景を消してます。
*********************************************/
.skinSubB .skinMenuBody{
    background: none !important;
}
 
/******************************************** 
    追加してあるスタイルです。
    フッターエリアに表示される各メニューのブロック
    です。４つめのブロックの右側マージンを0pxに
    してあります。
*********************************************/
.skinSubB .skinMenu + .skinMenu + .skinMenu + .skinMenu{
    margin-right: 0px;
}
 
 
 
 
 
 
/* (3-8) サイドバー　メニュー
--------------------------------------------*/
 
 
/* skinMenu サイドバー　メニューのエリア */
.skinMenu{
/* 注　ベースのcssに margin-bottom の記述有り */
background:#FDF3F3;/* ←サイドメニューに背景を敷きたいとき */
}
.skinMenu2{}
 
 
/* skinMenuHeader サイドメニュータイトルエリア */
.skinMenuHeader{
padding:5px 10px;
background:#FBE0E0;/* ←サイドメニューのタイトルに背景を敷きたいとき */
}
 
 
/* skinMenuBody サイドメニュー本文エリア */
.skinMenuBody{
margin:10px;
padding:10px;
background:#ffffff;/* ←サイドメニューの本文に背景を敷きたいとき */
}
 
 
 
 
 
 
 
/* (3-9) サイドバーの　リスト画像、ボーダー　※要素のbottomに指定すること
--------------------------------------------*/
 
.skinSubHr,
.skinSubList li{
margin-bottom:3px;
padding-bottom:3px;
border-bottom:1px dotted #FBE0E0;
}
 
 
/******************************************** 
    追加してあるスタイルです。
    サイドバーにあるAmeba会員登録とRSS部分の
    ブロックです。
*********************************************/
.registArea.subModule,
.rss.skinFieldBlock {
    padding: 10px 0;
    background:#ffffff;
    border:1px solid #FBE0E0;
}
 
/******************************************** 
    追加してあるスタイルです。
    サイドバーにあるRSS部分のブロックです。
*********************************************/
.rss.skinFieldBlock {
    padding-left: 20px;
    width: 278px!important;/* 追加 */
}
 
 
 
 
 
 
/* 追加してあるフッターエリア
--------------------------------------------*/
 
/******************************************** 
    追加してあるスタイルです。
    フッターエリアにhrタグを使った場合は凹みの
    あるような線で表示されます。
*********************************************/
.skinSubB .skinSubHr{
    border-top: 1px solid #111;
    border-bottom: 1px solid #666;
    margin:0px;
    padding:0px;
}
 
 
/******************************************** 
    追加してあるスタイルです。
    フッターエリアにul li リストタグを使って
    いる部分のラインに凹みがあるようなライン
    で表示させています。
    ここはulの最後の部分です。
*********************************************/
.skinSubB .skinSubList{
    border-bottom: 1px solid #666;
}
 
 
/******************************************** 
    追加してあるスタイルです。
    フッターエリアにul li リストタグを使って
    いる部分のラインに凹みがあるようなライン
    で表示させています。
    ここはliの部分です。
*********************************************/
.skinSubB .skinSubList li{
    margin:0px;
    padding:0px;
    line-height: 2.3;
    border-top: 1px solid #666;
    border-bottom: 1px solid #111;
}
 
 
/******************************************** 
    追加してあるスタイルです。
    フッターエリアにul li リストタグを使って
    いる部分のラインに凹みがあるようなライン
    で表示させています。
    ここでは最初のliタグのボーダートップの表示を
    させないようにしています。
*********************************************/
.skinSubB .skinSubList li:first-child {
    border-top: none;
}
 
 
/******************************************** 
    追加してあるスタイルです。
    フッターエリア文字色とリンク色を変更してます。
*********************************************/
.skinSubB,
.skinSubB a {
         color: #A0A0A0;
}
 
/******************************************** 
    追加してあるスタイルです。
    フッターエリアホバー色を変更してます。
*********************************************/
.skinSubB a:hover {
    color: #FFB6B6;
    text-decoration: none;
}
 
/******************************************** 
    追加してあるスタイルです。
    フッターエリアカレンダー内
    tdリンク色を変更してます。
*********************************************/
.skinSubB .calendar td a {
    color: #fff;
    background-color: #999;
}
 
/******************************************** 
    追加してあるスタイルです。
    フッターエリアカレンダー内
    tdホバー色を変更してます。
*********************************************/
.skinSubB .calendar td a:hover {
    color: #ccc;
    background-color: #FFB6B6;
}
 
 
 
 
 
 
/* (3-10) コメント欄、トラバ欄、記事一覧などの一覧
--------------------------------------------*/
 
 
/* 背景色 */
.skinBgColor,.skinBaseBgColor,.skinBlock{
background-color:#ffffff;
}
 
 
/* 弱い背景色 */
.skinWeakBgColor,.skinBaseWeakBgColor{
background-color:#f7f7f7;
}
 
 
/* 強い背景色 */
.skinStrongBgColor,.skinBaseStrongBgColor{
background-color:#f7f7f7;
}
 
 
/* 枠線の色 */
.skinBorderColor,.skinBaseBorderColor,.skinBlock{
border-color:#FDF3F3;
}
 
 
/* 境界線の色 */
.skinBorderHr,.skinBorderList li{
border-color:#b3b3b3;
}
 
 
 
 
/*
＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊
 
 
 (4) その他、拡張
 
 
＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊
*/
/* 記事本文の文字サイズ★改行幅 */
 .articleText{
  font-size:12px;
line-height: 1.8em;
}
 
/* その他、拡張があれば記述 */




/* 関連記事を可変型のカード風デザインにする */

*,*:before,*:after {
    box-sizing: border-box;
}

#main .hatena-urllist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5em;
}

#main .hatena-urllist li {
    padding: .5em 0;
    flex: 1 1 112px;
    display: flex;
    flex-direction: column;
    gap: .5em;
} 

#main .hatena-urllist li .urllist-image {
    aspect-ratio: 1.618 / 1;
    border-radius: 4px;
    float: none; /* テーマによってはタイトルリンクが潰れるため */
    margin: 0 0 .7em;
    object-fit: cover;
    transition: .2s ease-in-out;
    width: 100%;
}

#main .hatena-urllist li .urllist-title-link {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;  /* タイトルリンクの最大行数2 */
}

#main .hatena-urllist .urllist-entry-body {
    margin-top: .3em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1; /* 記事本文の行数1 */ 
}