/* */ @charset "UTF-8";@import"https://fonts.googleapis.com/css?family=Inter:300,400,500,700|Noto+Sans+JP&display=swap";/*! Theme: Neutral Author: Hatena Blog Team Description: 文章が読みやすいシンプルなテーマ です Responsive: yes */*{margin:0;padding:0}html,body{font-family:Inter,Noto Sans JP,Helvetica Neue,Source Han Sans,Segoe UI,sans-serif;font-size:100%;font-style:normal;word-wrap:break-word}a{color:#333;text-decoration:none}a:hover{color:#1a237e}#globalheader-container{background:#fff}#blog-title{margin:32px 0 80px}@media screen and (min-width: 992px){#blog-title{margin:72px 0 120px}}#blog-title #blog-title-inner{position:relative}#blog-title #blog-title-content{width:90%;margin:auto;padding:0;text-align:center}#blog-title #blog-title-content #title{line-height:1}#blog-title #blog-title-content #title a{font-size:20px;font-weight:500}@media screen and (min-width: 992px){#blog-title #blog-title-content #title a{font-size:32px}}#blog-title #blog-title-content #blog-description{font-size:14px;font-weight:400;color:#888;margin:14px 0 0}@media screen and (min-width: 992px){#blog-title #blog-title-content #blog-description{font-size:16px}}.header-image-enable #blog-title-content{position:absolute;top:50%;left:50%;transform:translateY(-50%) translate(-50%)}.header-image-enable #blog-title-inner #title a,.header-image-enable #blog-title-inner #blog-description{text-shadow:0 0 10px #333}.header-image-enable #blog-title-inner #blog-description{color:#fff!important}#top-editarea{margin:0 0 32px}#top-box .breadcrumb-inner a,#top-box .breadcrumb-inner span{font-size:14px;color:#888}#content-inner{display:flex;flex-flow:column;justify-content:center}@media screen and (min-width: 992px){#content-inner{flex-flow:row}}#content-inner #main{width:auto;margin:auto}@media screen and (min-width: 992px){#content-inner #main{width:620px;margin:0 32px 0 0}}#content-inner #main-inner{margin:0 0 24px}#content-inner #box2{width:auto;margin:0 1em}@media screen and (min-width: 992px){#content-inner #box2{width:300px}}#content-inner #box2-inner{padding:80px 0 0}@media screen and (min-width: 992px){#content-inner #box2-inner{padding:0}}#bottom-editarea{max-width:960px;margin:24px 16px}@media screen and (min-width: 560px){#bottom-editarea{margin:24px auto}}#footer{padding:32px 0;font-size:90%;text-align:center;color:#333}#footer #footer-inner{width:auto;margin:auto 1rem}@media screen and (min-width: 992px){#footer #footer-inner{width:1000px;margin:auto}}#footer address,#footer p{margin:0 8px 0 0;display:inline-block}#footer address .footer-address-name,#footer p .footer-address-name{text-align:left}#footer .footer-address a>img{vertical-align:sub}#top-box{margin:0 1em 1em}@media screen and (min-width: 992px){#top-box{max-width:960px;margin:16px auto}}#top-box .breadcrumb-link span:hover,#top-box .breadcrumb-child-link span:hover,#top-box .breadcrumb-link span:focus,#top-box .breadcrumb-child-link span:focus{color:#333}.entry{margin:0 0 80px;padding:24px 1em 40px;background:#fff;border-radius:4px}.entry .entry-inner .entry-header{position:relative;margin:0 0 32px}.entry .entry-inner .entry-header .date a{font-size:14px;color:#888}@media screen and (min-width: 992px){.entry .entry-inner .entry-header .date{font-size:18px}}.entry .entry-inner .entry-header .date-last-updated{font-size:14px;color:#888}.entry .entry-inner .entry-header .entry-title{font-size:28px;margin:16px 0;padding:0;text-align:left}@media screen and (min-width: 992px){.entry .entry-inner .entry-header .entry-title{font-size:30px;margin:24px 0 32px}}.entry .entry-inner .entry-header .entry-categories .entry-category-link{font-size:12px;background:#f5f5f5;padding:.45em;margin:0 0 4px;border-radius:4px;display:inline-block}.entry .entry-inner .entry-header .entry-header-menu{position:absolute;top:0;right:0}.entry .entry-inner .entry-header .entry-header-menu a{font-size:14px;padding:.45em;border:1px solid #d9d9d9;border-radius:4px}.entry .entry-inner .entry-header .entry-header-menu a:hover,.entry .entry-inner .entry-header .entry-header-menu a:focus{background:#f5f5f5;border:1px solid #f5f5f5;color:#1a237e}.entry .entry-inner .entry-content .entry-category-link{display:inline-block;color:#333;background:#e0e0e0;padding:.4rem .8rem;border-radius:4px;margin:0 0 8px;font-size:12px}.entry .entry-inner .entry-content .entry-category-link:hover,.entry .entry-inner .entry-content .entry-category-link:focus{color:#333}@media screen and (min-width: 992px){.entry .entry-inner .entry-content .entry-category-link{font-size:14px}}.entry .entry-inner .entry-content .table-of-contents{background:#f5f5f5;border-radius:4px;margin:0;padding:1.6em}.entry .entry-inner .entry-content .table-of-contents li>ul{margin-left:1.5em}.entry .entry-inner .entry-content .table-of-contents ul li{line-height:1.5}.entry .entry-inner .entry-content .table-of-contents li,.entry .entry-inner .entry-content .table-of-contents a{color:#1a237e}.entry .entry-inner .entry-footer{margin:72px 0 0}.entry .entry-inner .entry-footer .entry-footer-section{font-size:14px}.entry .entry-inner p{font-size:18px;line-height:1.8;letter-spacing:.5px;font-style:normal;margin:33px 0;color:#454545}.entry .entry-inner p .keyword{border-bottom:1px dotted #333}.entry .entry-inner p .keyword:hover,.entry .entry-inner p .keyword:focus{border-bottom:1px solid #333;text-decoration:none}.entry .entry-inner p a{color:#1a237e}.entry .entry-inner p a:hover,.entry .entry-inner p a:focus{text-decoration:underline}.entry .entry-inner p code{background:#272822;color:#f8f8f2}.entry .entry-inner h1,.entry .entry-inner h2,.entry .entry-inner h3,.entry .entry-inner h4,.entry .entry-inner h5,.entry .entry-inner h6{margin:33px 0}.entry .entry-inner h1{font-size:28px}@media screen and (min-width: 992px){.entry .entry-inner h1{font-size:30px}}.entry .entry-inner h2{font-size:26px}@media screen and (min-width: 992px){.entry .entry-inner h2{font-size:28px}}.entry .entry-inner h3{font-size:24px}@media screen and (min-width: 992px){.entry .entry-inner h3{font-size:26px}}.entry .entry-inner h4{font-size:22px}@media screen and (min-width: 992px){.entry .entry-inner h4{font-size:24px}}.entry .entry-inner h5{font-size:20px}@media screen and (min-width: 992px){.entry .entry-inner h5{font-size:22px}}.entry .entry-inner h6{font-size:16px}@media screen and (min-width: 992px){.entry .entry-inner h6{font-size:20px}}.entry .entry-inner ul,.entry .entry-inner ol,.entry .entry-inner dl{margin-inline-start:1.5em}.entry .entry-inner ul li,.entry .entry-inner ol li,.entry .entry-inner dl li{line-height:1.8}.entry .entry-inner hr{margin:16px 0;border:none;border-top:1px solid #d9d9d9}.entry .entry-inner dd{margin-inline-start:40px}.entry .entry-inner blockquote{background:#fff;border-left:3px solid #e0e0e0;border-radius:4px;padding:16px;font-size:14px}.entry .entry-inner blockquote p{margin:16px 0;font-size:16px;line-height:1.6;font-style:oblique}.entry .entry-inner blockquote p cite{font-style:initial;font-size:14px}.entry .entry-inner pre{margin:0 0 24px;padding:16px 8px;background:#272822;color:#f8f8f2;border-radius:4px}.entry .entry-inner pre .synComment{color:#75715e}.entry .entry-inner pre .synSpecial{color:#e6db74}.entry .entry-inner pre .synType{color:#66d9ef}.entry .entry-inner pre .synPreProc,.entry .entry-inner pre .synStatement{color:#f92672}.entry .entry-inner pre .synIdentifier{color:#a6e22e}.entry .entry-inner pre .synConstant{color:#ae81ff}.entry .entry-inner table{width:100%;border-collapse:collapse;margin:0 0 16px;font-size:14px;border:1px solid #d9d9d9;border-radius:4px;overflow:hidden;border-collapse:unset;border-spacing:0}.entry .entry-inner table th{background:#d9d9d9;padding:.45em;border-right:1px solid #fff}.entry .entry-inner table th:last-child{border-right:none}.entry .entry-inner table td{padding:.45em;border-right:1px solid #d9d9d9}.entry .entry-inner table td:last-child{border-right:none}.entry .entry-inner table tbody{display:table-row-group;text-align:center}.entry .entry-inner table tbody tr{display:table-row}.entry .entry-inner table tbody tr:nth-child(2n){background:#f5f5f5}.entry .entry-inner table p{font-size:inherit;margin:0;line-height:inherit;letter-spacing:normal}.entry .entry-inner .footnote{font-size:14px}.entry .entry-inner .entry-see-more{color:#333;border:1px solid #d9d9d9;font-size:16px;border-radius:4px;padding:.6em .8em}.entry .entry-inner .entry-see-more:hover{background:#f5f5f5;border:1px solid #f5f5f5;color:#1a237e;transition:color .3s}.entry .entry-inner .entry-footer-ad{margin:8px 0 0;padding:8px 4px;border:1px solid #d9d9d9;border-radius:4px}.entry .entry-inner .hatena-star-container{margin:0 0 24px}.entry .entry-inner .social-buttons{margin:24px 0}.entry .entry-inner .entry-footer-modules .hatena-module-title{font-size:18px;margin:0 0 24px}.entry .entry-inner .entry-footer-modules .hatena-module{margin:0;padding:1em 0}.entry .entry-inner .entry-footer-modules .related-entries,.entry .entry-inner .entry-footer-modules .entries-access-ranking,.entry .entry-inner .entry-footer-modules .recent-entries{margin:0}.entry .entry-inner .comment-box{margin:32px 0 0}.entry .entry-inner .comment-box .comment{margin:0}.entry .entry-inner .comment-box .comment .entry-comment{list-style:none;margin:0 0 32px}.entry .entry-inner .comment-box .comment .comment-user-name{margin:0 0 4px;display:flex;align-items:center}.entry .entry-inner .comment-box .comment .comment-user-name .hatena-id-icon{width:20px;height:20px;border-radius:4px;margin:0 8px 0 0}.entry .entry-inner .comment-box .comment .comment-content{margin:0 0 16px}.entry .entry-inner .comment-box .comment .comment-content p{font-size:16px;line-height:1.6;margin:16px 0}.entry .entry-inner .comment-box .comment .comment-metadata{margin:0;font-size:14px;color:#888}.entry .entry-inner .comment-box .leave-comment-title{border:1px solid #d9d9d9;border-radius:4px;color:#333;padding:8px 16px;font-size:16px}@media screen and (min-width: 992px){.entry .entry-inner .comment-box .leave-comment-title{font-size:14px}}.entry .entry-inner .comment-box .leave-comment-title:hover,.entry .entry-inner .comment-box .leave-comment-title:focus{color:#1a237e;background:#f5f5f5;border:1px solid #f5f5f5}.pager .pager-prev,.pager .pager-next{width:100%;position:relative;display:inline-block;background:#fff;border-radius:4px}.pager .pager-prev a,.pager .pager-next a{padding:1em;display:block}.pager .pager-prev:hover,.pager .pager-next:hover,.pager .pager-prev:focus,.pager .pager-next:focus{color:#1a237e}.pager .pager-prev .pager-arrow,.pager .pager-next .pager-arrow{font-size:32px;height:32px;line-height:32px;position:absolute;display:block;top:0;bottom:0;margin:auto;color:#d9d9d9}.pager.permalink{background:#fff;display:flex;justify-content:space-between;align-items:center;border-radius:4px;margin:24px 16px;padding:8px 16px;line-height:1.5}@media screen and (min-width: 992px){.pager.permalink{margin:32px auto}}.pager.permalink .pager-prev{margin-right:auto;padding:0 0 0 32px}.pager.permalink .pager-prev a{text-align:left;padding-left:0}.pager.permalink .pager-prev .pager-arrow{left:0}.pager.permalink .pager-next{margin-left:auto;padding:0 32px 0 0}.pager.permalink .pager-next a{text-align:right;padding-right:0}.pager.permalink .pager-next .pager-arrow{right:0}.page-index .pager{border-radius:4px;justify-content:center;text-align:center}.page-index .pager .pager-prev,.page-index .pager .pager-next{display:block}.hatena-module{background:#fff;margin:0 0 32px;padding:16px;border-radius:4px}.hatena-module .hatena-module-title{font-size:20px;font-weight:700;margin:0 0 24px}.hatena-module .hatena-module-title a{color:#333}.hatena-module .hatena-module-body,.hatena-module .hatena-urllist{padding:0}.hatena-module .hatena-module-body .urllist-item,.hatena-module .hatena-urllist .urllist-item{list-style:none;margin:0 0 32px}.hatena-module .hatena-module-body .urllist-item:last-child,.hatena-module .hatena-urllist .urllist-item:last-child{margin-bottom:0}.hatena-module .hatena-module-body .urllist-item .urllist-item-inner .urllist-title-link,.hatena-module .hatena-urllist .urllist-item .urllist-item-inner .urllist-title-link{color:#333;margin:0 0 8px;font-size:16px;line-height:1.6;display:inline;text-align:justify}.hatena-module .hatena-module-body .urllist-item .urllist-item-inner .urllist-title-link:hover,.hatena-module .hatena-urllist .urllist-item .urllist-item-inner .urllist-title-link:hover{color:#1a237e}.hatena-module .hatena-module-body .urllist-item .urllist-item-inner .urllist-date-link,.hatena-module .hatena-urllist .urllist-item .urllist-item-inner .urllist-date-link{margin:0 0 4px}.hatena-module .hatena-module-body .urllist-item .urllist-item-inner .urllist-date-link time,.hatena-module .hatena-urllist .urllist-item .urllist-item-inner .urllist-date-link time{color:#888}.hatena-module .hatena-module-body .urllist-item .urllist-item-inner .urllist-categories,.hatena-module .hatena-urllist .urllist-item .urllist-item-inner .urllist-categories{margin:4px 0 0}.hatena-module .hatena-module-body .urllist-item .urllist-item-inner .urllist-categories .urllist-category-link,.hatena-module .hatena-urllist .urllist-item .urllist-item-inner .urllist-categories .urllist-category-link{display:inline-block;background:#f5f5f5;margin:0 0 8px;padding:.4em;font-size:12px;border-radius:4px}.hatena-module .hatena-module-body .urllist-item .urllist-item-inner .urllist-categories .urllist-category-link:hover,.hatena-module .hatena-urllist .urllist-item .urllist-item-inner .urllist-categories .urllist-category-link:hover{color:#1a237e}.hatena-module .hatena-module-body .urllist-item .urllist-item-inner .urllist-entry-body,.hatena-module .hatena-urllist .urllist-item .urllist-item-inner .urllist-entry-body{color:#888;font-size:14px;margin:0 0 8px;text-align:justify}.hatena-module .hatena-module-body .urllist-image,.hatena-module .hatena-urllist .urllist-image{border-radius:4px}.hatena-module .hatena-module-body .urllist-see-more-link,.hatena-module .hatena-urllist .urllist-see-more-link{border:1px solid #f5f5f5;border-radius:4px;padding:.45em}.hatena-module .hatena-module-body .urllist-see-more-link:hover,.hatena-module .hatena-urllist .urllist-see-more-link:hover,.hatena-module .hatena-module-body .urllist-see-more-link:focus,.hatena-module .hatena-urllist .urllist-see-more-link:focus{color:#1a237e;background:#f5f5f5}.hatena-module .hatena-module-body .archive-module-year,.hatena-module .hatena-urllist .archive-module-year{margin:0 0 16px}.hatena-module .hatena-module-body .archive-module-year:last-child,.hatena-module .hatena-urllist .archive-module-year:last-child{margin:0}.search-form{display:flex;justify-content:center;border:1px solid #d9d9d9;border-radius:4px;overflow:hidden;position:relative}.search-form .search-module-input{width:100%;font-size:.8em;outline:0;border:none;margin:0;padding:.6em}.search-form .search-module-button{width:16px;height:16px;background:transparent url(https://cdn.blog.st-hatena.com/css/theme/neutral/images/search.png?version=f5154c74e6e38109ce2f0c7b9afd51) no-repeat 50%;background-size:16px 16px;position:absolute;top:7px;right:6px;border:none;padding:.6em;outline:0;text-indent:-9999px;opacity:.5;cursor:pointer}.search-form .search-module-button:hover,.search-form .search-module-button:focus{transition:color .3s;opacity:1}.hatena-module-profile .hatena-module-body{display:flex;flex-direction:column;text-align:center}.hatena-module-profile .hatena-module-body .profile-icon{border-radius:4px;margin:0 0 8px}.hatena-module-profile .hatena-module-body .profile-description{margin:8px 0 0}.hatena-module-profile .hatena-module-body .profile-description p{font-size:14px;text-align:left}.hatena-module-profile .hatena-module-body .hatena-follow-button-box{margin:24px auto}.hatena-module-category .hatena-urllist li{list-style:none;margin:0 0 16px}.hatena-module-category .hatena-urllist li:last-child{margin-bottom:0}.hatena-module-category .hatena-urllist li a{color:#333;display:inline-block;background:#f5f5f5;padding:.4rem;border-radius:4px;font-size:14px}.hatena-module-category .hatena-urllist li a:hover,.hatena-module-category .hatena-urllist li a:focus{color:#1a237e}.hatena-module-recent-comments .recent-comments .hatena-id-icon{border-radius:4px}.hatena-module-recent-comments .recent-comments li{list-style:none;margin:0 0 16px}.hatena-module-recent-comments .recent-comments li:last-child{margin-bottom:0}.hatena-module-recent-comments .recent-comments .recent-comment-time{color:#888;font-style:normal}.hatena-module-links .hatena-urllist{list-style:none;line-height:1.8}.hatena-module-authors-list .authors-urllist{margin:0 0 8px}.hatena-module-authors-list .authors-urllist a{display:flex;align-items:center}.hatena-module-authors-list .authors-urllist .authors-user-icon{border-radius:4px;width:32px}.hatena-module-circles .circle-urllist li{display:flex;margin:0 0 16px;align-items:center}.hatena-module-circles .circle-urllist li:last-child{margin-bottom:0}.hatena-module-html ul{margin-inline-start:1.2em}.hatena-module-html p,.hatena-module-html pre{line-height:1.6;margin:16px 0}.hatena-module-html code,.hatena-module-html .code{background:#272822;color:#f8f8f2;padding:.24em;border-radius:4px;font-size:14px}.hatena-module-archive .calendar-day a{color:#888}.page-archive .archive-entries{background:#fff;padding:32px 16px 40px;border-radius:4px}.page-archive .archive-heading{margin:0 0 32px;background:#fff;border-radius:4px;padding:16px}.page-archive .search-result{background:#fff;border-radius:4px;padding:16px 16px 40px}.archive-header-category{background:#fff;border-radius:4px}.archive-header-category .archive-heading{margin:0;padding:16px}.page-archive-category .archive-header-category{margin:0 0 40px}.page-archive-category .archive-header-category .archive-heading{background:#f5f5f5;padding:4px 8px;margin:16px;border-radius:4px;display:inline-block;font-size:16px}.page-archive-category .archive-header-category .archive-heading .archive-entries .archive-entry{margin:0 0 72px}.page-archive-category .archive-header-category .archive-heading .archive-entries .archive-entry:last-child{margin-bottom:0}.page-archive-category .archive-header-category .archive-heading .entry-title{font-size:22px;line-height:1.5em}.page-archive-category .archive-header-category .archive-heading .entry-title a{color:#333}.page-archive-category .archive-header-category .archive-heading .entry-title a:hover,.page-archive-category .archive-header-category .archive-heading .entry-title a:focus{color:#1a237e}.page-archive-category .archive-category-link{color:#333;background-color:#f5f5f5;margin:0 0 8px;padding:.4em;border-radius:4px}.archive-entry{margin:0 0 40px}@media screen and (min-width: 992px){.archive-entry{margin:0 0 72px}}.archive-entry:last-child{margin-bottom:0}.archive-entry .archive-entry-header .date{margin:0 0 8px}.archive-entry .archive-entry-header .date time{color:#888;font-size:14px}@media screen and (min-width: 992px){.archive-entry .archive-entry-header .date{font-size:18px}}.archive-entry .archive-entry-header .entry-title{margin:0 0 16px}.archive-entry .archive-entry-header .entry-title .entry-title-link{font-size:18px}@media screen and (min-width: 992px){.archive-entry .archive-entry-header .entry-title .entry-title-link{font-size:22px;margin:0 0 24px}}.archive-entry .archive-entry-header .highlight,.archive-entry .archive-entry-body .highlight{background:#faeacb;border-radius:4px;border:none}.archive-entry .categories{margin:0 0 8px}.archive-entry .categories .archive-category-link{font-size:12px;background:#f5f5f5;margin:0 0 8px;padding:.45em;border-radius:4px;display:inline-block}.archive-entry .entry-thumb{border-radius:4px;width:80px;height:80px}@media screen and (min-width: 992px){.archive-entry .entry-thumb{width:100px;height:100px}}.archive-entry .archive-entry-body .entry-description{font-size:14px;line-height:1.5;margin:0 0 8px}.page-about .entry-content{margin:0 0 24px}.page-about .entry-content img.profile-icon{width:24px;height:24px;border-radius:4px;margin:0 8px 0 0}.page-about .entry-content dl{margin:24px 0 0}.page-about .entry-content dt{font-size:18px;line-height:1.8;margin:0 0 8px}.page-about .entry-content dd{margin-bottom:16px}.page-about .entry-content dd li{list-style:disc;color:#1a237e;font-size:16px}.page-about .entry-content dd li a:hover{text-decoration:underline} /* */ /* ===== ヘッダーのブログタイトル行間調整 ===== */ /* PC・スマホ共通 */ #blog-title a { line-height: 1.4; letter-spacing: 0.05em; } /* スマホだけ少し余裕を出す */ @media screen and (max-width: 768px) { #blog-title a { line-height: 1.5; } } img[alt*="ブログ村"] { background: transparent !important; box-shadow: none !important; border-radius: 0 !important; } /* ブログ村 応援ボタンの位置を上に・押しやすく調整 */ .blogmura-button { margin-top: -10px; /* 上に少し引き上げる */ margin-bottom: 20px; /* 下の余白を確保 */ text-align: center; } /* ボタン自体を少し大きく・クリックしやすく */ .blogmura-button img { max-width: 95%; transition: transform 0.2s ease; } /* 触れたとき少し浮く演出 */ .blogmura-button img:hover { transform: scale(1.03); } /* スマホだけ調整（重なり対策） */ @media screen and (max-width: 768px){ /* スマホでパンくず(A)とタグ(C)が重なるのを防ぐ */ @media screen and (max-width: 768px){ /* パンくずは必ず1行（ブロック）で確保して折り返しOKに */ .breadcrumb, .breadcrumb *{ position: static !important; } .breadcrumb{ display: block !important; width: 100% !important; clear: both !important; margin: 8px 0 10px !important; overflow-wrap: anywhere; word-break: break-word; } /* タグ（記事下の #ASD ADHD… など）がパンくずに被らないように次行へ */ .entry-footer, .entry-footer-section, .categories, .entry-categories, .entry-tags, .hatena-module-tag{ display: block !important; width: 100% !important; clear: both !important; margin-top: 8px !important; } /* タグは横に並びすぎると潰れるので折り返し */ .entry-tags ul, .entry-categories ul{ display: flex; flex-wrap: wrap; gap: 6px 10px; } } /* ===== スマホだけ：パンくずが箱内で詰まって潰れるのを防ぐ ===== */ @media screen and (max-width: 768px){ /* パンくず全体：枠線・背景・角丸を弱める（または消す） */ .breadcrumb{ border: none !important; /* 枠線を消す（残したい場合は下の薄枠をON） */ background: transparent !important; padding: 6px 0 !important; margin: 8px 0 10px !important; line-height: 1.6 !important; } /* ↓枠線を“薄く残す”なら、上の border:none を消してこれを使う */ /* .breadcrumb{ border: 1px solid rgba(0,0,0,0.12) !important; border-radius: 10px !important; background: transparent !important; padding: 8px 10px !important; } */ /* パンくず内部：横並びをやめて縦並びにする（これが一番効く） */ .breadcrumb ul{ display: block !important; /* flexを解除 */ padding: 0 !important; margin: 0 !important; } .breadcrumb li{ display: block !important; /* 1項目ずつ改行 */ white-space: normal !important; /* 1行固定を解除 */ overflow: visible !important; text-overflow: clip !important; line-height: 1.7 !important; margin: 0 0 4px 0 !important; } /* 文字が長いとき：強制的に折り返す */ .breadcrumb, .breadcrumb a, .breadcrumb span{ overflow-wrap: anywhere !important; word-break: break-word !important; } /* 区切り記号（＞ / /）が詰まる場合は非表示にしてスッキリ */ .breadcrumb li::after, .breadcrumb li::before{ content: none !important; } } /* ===== スマホだけ：パンくずが箱内で詰まって潰れるのを防ぐ ===== */ @media screen and (max-width: 768px){ /* パンくず全体：枠線・背景・角丸を弱める（または消す） */ .breadcrumb{ border: none !important; /* 枠線を消す（残したい場合は下の薄枠をON） */ background: transparent !important; padding: 6px 0 !important; margin: 8px 0 10px !important; line-height: 1.6 !important; } /* ↓枠線を“薄く残す”なら、上の border:none を消してこれを使う */ /* .breadcrumb{ border: 1px solid rgba(0,0,0,0.12) !important; border-radius: 10px !important; background: transparent !important; padding: 8px 10px !important; } */ /* パンくず内部：横並びをやめて縦並びにする（これが一番効く） */ .breadcrumb ul{ display: block !important; /* flexを解除 */ padding: 0 !important; margin: 0 !important; } .breadcrumb li{ display: block !important; /* 1項目ずつ改行 */ white-space: normal !important; /* 1行固定を解除 */ overflow: visible !important; text-overflow: clip !important; line-height: 1.7 !important; margin: 0 0 4px 0 !important; } /* 文字が長いとき：強制的に折り返す */ .breadcrumb, .breadcrumb a, .breadcrumb span{ overflow-wrap: anywhere !important; word-break: break-word !important; } /* 区切り記号（＞ / /）が詰まる場合は非表示にしてスッキリ */ .breadcrumb li::after, .breadcrumb li::before{ content: none !important; } } /* ========================================================= WORK（最下段に置く）: スマホでパンくず/記事上タグ枠が潰れて重なる対策 目的: 1) パンくずは折り返し/縦並び 2) 記事上のカテゴリ/タグ枠は必ず次段へ ========================================================= */ @media screen and (max-width: 768px){ /* 0) まず “重なり” の原因になりやすい float/absolute を無効化（スマホだけ） */ .breadcrumb, .breadcrumb *{ float: none !important; position: static !important; } /* 1) パンくず：箱を軽くして折り返し＆縦並び（詰まり防止） */ .breadcrumb{ display: block !important; width: 100% !important; clear: both !important; border: none !important; /* 枠線を消す（必要なら薄枠に変更可） */ background: transparent !important; padding: 6px 0 !important; margin: 8px 0 10px !important; line-height: 1.7 !important; overflow-wrap: anywhere !important; word-break: break-word !important; } .breadcrumb ul{ display: block !important; /* 横並び解除→縦並び */ padding: 0 !important; margin: 0 !important; } .breadcrumb li{ display: block !important; white-space: normal !important; /* 1行固定解除 */ line-height: 1.7 !important; margin: 0 0 4px 0 !important; } /* 2) 記事上（entry-header側）のカテゴリ/タグ枠：必ず次の行に落とす */ .entry-header, .entry-header *{ float: none !important; } /* “カテゴリ/タグ枠” の候補を広めに拾って、全部ブロック化＋折り返し */ .entry-header .categories, .entry-header .entry-categories, .entry-header .entry-category, .entry-header .entry-tags, .entry-header .entry-tag, .entry-header .hatena-module-category, .entry-header .hatena-module-tag, .entry-header .entry-header-menu, .entry-header .header-menu, .entry-header .topic-path, .entry-header .breadcrumb, .entry-header .entry-categories a, .entry-header .entry-tags a{ display: block !important; width: 100% !important; clear: both !important; white-space: normal !important; overflow-wrap: anywhere !important; word-break: break-word !important; margin-top: 8px !important; } /* 3) 枠（#ASD ADHD… みたいな“箱”）が横に詰まる場合：折り返し前提の並びへ */ .entry-header .entry-tags ul, .entry-header .entry-categories ul, .entry-header .categories ul{ display: flex !important; flex-wrap: wrap !important; gap: 6px 10px !important; padding: 0 !important; margin: 0 !important; } /* 4) それでも箱が潰れる場合：タグ/カテゴリの“箱”を小さくして詰まりを回避 */ .entry-header .entry-tags a, .entry-header .entry-categories a, .entry-header .categories a{ max-width: 100% !important; display: inline-block !important; line-height: 1.6 !important; padding: 6px 10px !important; } } /* ===================================================== FINAL WORK BLOCK : スマホでパンくずが箱内で潰れる最終対策 目的 : タグ風枠解除 / 折り返しOK / 縦並び / 最下段勝利 ===================================================== */ @media screen and (max-width: 768px){ /* ■ パンくず全体：タグ風の枠デザインを完全解除 */ .breadcrumb, .topic-path, .breadcrumb-inner{ border: none !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; padding: 4px 0 !important; margin: 6px 0 10px !important; } /* ■ パンくずを必ず縦並びにする */ .breadcrumb ul, .topic-path ul, .breadcrumb-inner ul{ display: block !important; padding: 0 !important; margin: 0 !important; } .breadcrumb li, .topic-path li, .breadcrumb-inner li{ display: block !important; float: none !important; position: static !important; /* ★ 折り返し禁止を解除 */ white-space: normal !important; /* ★ 強制折り返し許可 */ overflow-wrap: anywhere !important; word-break: break-word !important; line-height: 1.7 !important; margin: 0 0 4px 0 !important; /* ★ 箱化されていた装飾を解除 */ border: none !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; } /* ■ パンくず内リンクも同様に折り返し許可 */ .breadcrumb a, .topic-path a, .breadcrumb-inner a{ white-space: normal !important; overflow-wrap: anywhere !important; word-break: break-word !important; } /* ■ 区切り記号が箱っぽさを作っている場合は消す */ .breadcrumb li::before, .breadcrumb li::after, .topic-path li::before, .topic-path li::after{ content: none !important; } } /* ===================================================== FINAL WORK BLOCK : スマホでパンくずが箱内で潰れる最終対策 目的 : タグ風枠解除 / 折り返しOK / 縦並び / 最下段勝利 ===================================================== */ @media screen and (max-width: 768px){ /* ■ パンくず全体：タグ風の枠デザインを完全解除 */ .breadcrumb, .topic-path, .breadcrumb-inner{ border: none !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; padding: 4px 0 !important; margin: 6px 0 10px !important; } /* ■ パンくずを必ず縦並びにする */ .breadcrumb ul, .topic-path ul, .breadcrumb-inner ul{ display: block !important; padding: 0 !important; margin: 0 !important; } .breadcrumb li, .topic-path li, .breadcrumb-inner li{ display: block !important; float: none !important; position: static !important; /* ★ 折り返し禁止を解除 */ white-space: normal !important; /* ★ 強制折り返し許可 */ overflow-wrap: anywhere !important; word-break: break-word !important; line-height: 1.7 !important; margin: 0 0 4px 0 !important; /* ★ 箱化されていた装飾を解除 */ border: none !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; } /* ■ パンくず内リンクも同様に折り返し許可 */ .breadcrumb a, .topic-path a, .breadcrumb-inner a{ white-space: normal !important; overflow-wrap: anywhere !important; word-break: break-word !important; } /* ■ 区切り記号が箱っぽさを作っている場合は消す */ .breadcrumb li::before, .breadcrumb li::after, .topic-path li::before, .topic-path li::after{ content: none !important; } } /* ========================================================= FINAL OVERRIDE (最下段に貼る) スマホでパンくずが「タグ風ボックス + nowrap」で潰れるのを強制解除 方針: 1) パンくず領域をタグ風装飾CSSから強制的に解放（リセット） 2) 幅100%・折り返し許可・縦並び 3) nowrap / 固定幅 / 箱化 / 区切り記号を完全解除 ========================================================= */ @media screen and (max-width: 768px){ /* --- 0) パンくず“コンテナ”候補を広めに拾う（テーマ差対策） --- */ .breadcrumb, .breadcrumbs, .bread-crumb, .topic-path, .entry-breadcrumb, .entry-breadcrumbs, .breadcrumb-inner{ /* タグ風ボックス化されていても確実に外す */ border: none !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; outline: none !important; /* 幅と配置を固定：他の枠と同列にならない */ display: block !important; width: 100% !important; max-width: 100% !important; clear: both !important; /* 折り返し許可 */ white-space: normal !important; overflow-wrap: anywhere !important; word-break: break-word !important; /* “箱っぽいpadding/余白”も軽くする */ padding: 6px 0 !important; margin: 8px 0 10px !important; /* 変な重なり対策 */ float: none !important; position: static !important; } /* --- 1) 「タグ風CSS」が li / a に付いて勝ってる場合があるので完全リセット --- */ .breadcrumb *, .breadcrumbs *, .bread-crumb *, .topic-path *, .entry-breadcrumb *, .entry-breadcrumbs *, .breadcrumb-inner *{ /* 一旦ぜんぶ外す（タグ風の枠・nowrap・固定幅などを根こそぎ落とす） */ all: unset !important; /* リセット後に最低限の表示を戻す */ display: block !important; width: 100% !important; max-width: 100% !important; /* 折り返し完全許可 */ white-space: normal !important; overflow-wrap: anywhere !important; word-break: break-word !important; /* クリックできるように */ box-sizing: border-box !important; } /* --- 2) ただしリンクだけはインラインに戻して見た目を自然に --- */ .breadcrumb a, .breadcrumbs a, .bread-crumb a, .topic-path a, .entry-breadcrumb a, .entry-breadcrumbs a, .breadcrumb-inner a{ display: inline !important; cursor: pointer !important; text-decoration: underline !important; /* リセットで消えるため */ } /* --- 3) ul/li を縦並びに固定（横詰まり禁止） --- */ .breadcrumb ul, .breadcrumbs ul, .bread-crumb ul, .topic-path ul, .entry-breadcrumb ul, .entry-breadcrumbs ul, .breadcrumb-inner ul{ display: block !important; padding: 0 !important; margin: 0 !important; } .breadcrumb li, .breadcrumbs li, .bread-crumb li, .topic-path li, .entry-breadcrumb li, .entry-breadcrumbs li, .breadcrumb-inner li{ display: block !important; margin: 0 0 4px 0 !important; line-height: 1.7 !important; } /* --- 4) 区切り記号が“箱の固定幅”や詰まりを起こす場合は除去 --- */ .breadcrumb li::before, .breadcrumb li::after, .breadcrumbs li::before, .breadcrumbs li::after, .bread-crumb li::before, .bread-crumb li::after, .topic-path li::before, .topic-path li::after{ content: none !important; } } /* ========================================================= FINAL FIX : スマホでパンくずがタグ風CSSに支配される問題を完全解除 ・タグ風ボックス化 強制解除 ・white-space: nowrap 強制解除 ・inline-block 強制解除 ・幅100%・折り返し許可 ・縦並び固定 ========================================================= */ @media screen and (max-width: 768px){ /* ■ パンくず本体を「タグ風CSS」から完全解放 */ .breadcrumb, .breadcrumbs, .bread-crumb, .topic-path, .breadcrumb-inner{ /* タグ風ボックス装飾を完全無効化 */ border: none !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; /* inline-block や flex 支配を解除 */ display: block !important; width: 100% !important; max-width: 100% !important; /* nowrap を完全解除 */ white-space: normal !important; /* 強制折り返し許可 */ overflow-wrap: anywhere !important; word-break: break-word !important; /* 位置固定・横並び解除 */ float: none !important; position: static !important; clear: both !important; padding: 6px 0 !important; margin: 6px 0 10px !important; } /* ■ パンくず内部(li,a)にもタグ風CSSが付いているのを強制解除 */ .breadcrumb li, .breadcrumbs li, .bread-crumb li, .topic-path li, .breadcrumb-inner li{ border: none !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; display: block !important; /* 縦並び */ width: 100% !important; white-space: normal !important; /* nowrap解除 */ overflow-wrap: anywhere !important; word-break: break-word !important; padding: 0 !important; margin: 0 0 4px 0 !important; line-height: 1.7 !important; } /* ■ リンク文字も必ず折り返し許可 */ .breadcrumb a, .breadcrumbs a, .bread-crumb a, .topic-path a, .breadcrumb-inner a{ display: inline !important; white-space: normal !important; overflow-wrap: anywhere !important; word-break: break-word !important; } /* ■ 横並びを生む ul の flex / inline-block を解除 */ .breadcrumb ul, .breadcrumbs ul, .bread-crumb ul, .topic-path ul, .breadcrumb-inner ul{ display: block !important; padding: 0 !important; margin: 0 !important; } /* ■ 区切り記号が箱幅固定を作る場合は除去 */ .breadcrumb li::before, .breadcrumb li::after, .breadcrumbs li::before, .breadcrumbs li::after, .bread-crumb li::before, .bread-crumb li::after, .topic-path li::before, .topic-path li::after{ content: none !important; } } /* ===================================================== スマホだけ：ヘッダーをスッキリ整理 ・ブログ説明文を非表示 ・ヘッダー画像を小さく ・タイトルと全体余白を縮める ===================================================== */ @media screen and (max-width: 768px){ /* ■ ブログ説明文を非表示 */ .blog-description, .header-description, .site-description, .header-inner .description { display: none !important; } /* ■ ヘッダー全体の上下余白を縮める */ header, .header, .header-inner { padding-top: 6px !important; padding-bottom: 6px !important; } /* ■ ブログタイトル周りの余白を縮小 */ .blog-title, .site-title, .header-title { margin: 4px 0 !important; line-height: 1.3 !important; } /* ■ ヘッダー画像を小さくする */ .header-image, .header-logo, .site-logo img { max-height: 60px !important; /* 好みで 50～80px に変更OK */ width: auto !important; } /* ■ ナビゲーションの上下余白を縮める */ .global-nav, .header-menu { margin-top: 4px !important; margin-bottom: 4px !important; } } /* ===================================================== FINAL SMARTPHONE CLEAN BLOCK スマホのヘッダー＆記事上部を完全スッキリ化 ===================================================== */ @media screen and (max-width: 768px){ /* 1. ブログ説明文を非表示 */ .blog-description, .site-description, .header-description, .header-inner .description{ display: none !important; } /* 2. ヘッダー全体をコンパクト化 */ header, .header, .header-inner{ padding-top: 6px !important; padding-bottom: 6px !important; } .blog-title, .site-title, .header-title{ margin: 4px 0 !important; line-height: 1.3 !important; } /* ヘッダー画像を小さく */ .header-image, .header-logo, .site-logo img{ max-height: 60px !important; width: auto !important; } /* 3. SNSボタン（B・X・LINEなど）を非表示 */ .entry-share, .social-buttons, .share-buttons, .hatena-bookmark-button, .twitter-share-button, .line-share-button, .facebook-share-button{ display: none !important; } /* 4. パンくずリストをスマホでは非表示 */ .breadcrumb, .breadcrumbs, .topic-path, .breadcrumb-inner{ display: none !important; } /* 5. 記事上のタグ・カテゴリをスマホでは非表示 */ .entry-header .entry-tags, .entry-header .entry-categories, .entry-header .categories, .hatena-module-tag, .hatena-module-category{ display: none !important; } /* 6. タグ風ボックス装飾が他に残っても無効化 */ .entry-tags *, .entry-categories *, .categories *{ border: none !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; } /* 7. 記事タイトルの余白を詰める */ .entry-title, h1.entry-title{ margin-top: 6px !important; margin-bottom: 8px !important; line-height: 1.4 !important; } } /* ===================================================== FINAL : スマホでブログヘッダーを極小化 記事までの「巨大ヘッダー挟まり」を解消 ===================================================== */ @media screen and (max-width: 768px){ /* ■ ヘッダー全体の高さを圧縮 */ header, .header, .header-inner{ padding-top: 4px !important; padding-bottom: 4px !important; margin-bottom: 4px !important; } /* ■ ブログタイトルを小さく */ .blog-title, .site-title, .header-title{ font-size: 18px !important; /* 好みで16〜20pxに調整OK */ line-height: 1.2 !important; margin: 2px 0 !important; } /* ■ ブログ説明文をコンパクト表示 */ .blog-description, .site-description, .header-description{ font-size: 12px !important; line-height: 1.3 !important; margin: 2px 0 !important; } /* ■ 読者になるボタンを小さく */ .subscribe-button, .hatena-follow-button{ transform: scale(0.85); transform-origin: left top; margin: 2px 0 !important; } /* ■ ヘッダー画像がある場合は縮小 */ .header-image, .header-logo, .site-logo img{ max-height: 45px !important; width: auto !important; } /* ■ ヘッダー直下と記事タイトルの距離を縮める */ .content, .container, .entry{ margin-top: 4px !important; } /* ■ 記事タイトルの上余白も圧縮 */ .entry-title, h1.entry-title{ margin-top: 4px !important; } } .cafe-index-lead .cafe-sub { font-size: 13px; color: #9a8268; letter-spacing: 0.08em; margin-bottom: 10px; } .cafe-index-lead h2 { font-size: 32px; color: #5f4632; margin: 0 0 14px; font-weight: 700; } .cafe-index-lead p { color: #6e5a49; font-size: 15px; line-height: 1.9; margin: 0; } .cafe-index-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 28px; } .cafe-card { display: block; text-decoration: none; background: #fffdf9; border: 1px solid #eadfce; border-radius: 16px; padding: 22px 18px; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; box-shadow: 0 2px 8px rgba(90, 70, 50, 0.04); } .cafe-card:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(90, 70, 50, 0.10); border-color: #d8c3a8; } .cafe-icon { display: inline-block; font-size: 24px; margin-bottom: 10px; } .cafe-card h3 { font-size: 20px; color: #5c4330; margin: 0 0 10px; } .cafe-card p { margin: 0; color: #7a6655; font-size: 14px; line-height: 1.8; } .cafe-all-link { margin-top: 28px; text-align: center; } .cafe-all-link a { display: inline-block; text-decoration: none; background: #a67c52; color: #fff !important; padding: 12px 20px; border-radius: 999px; font-size: 14px; transition: opacity 0.2s ease, transform 0.2s ease; } .cafe-all-link a:hover { opacity: 0.9; transform: translateY(-1px); } /* スマホ表示 */ @media screen and (max-width: 768px) { .cafe-index { margin: 24px 0; padding: 20px 14px; border-radius: 14px; } .cafe-index-lead h2 { font-size: 26px; } .cafe-index-grid { grid-template-columns: 1fr; gap: 14px; } .cafe-card { padding: 18px 16px; } } /* カテゴリーモジュールをシンプルで洗練された見た目に */ .hatena-module-category { background: transparent; padding: 0; margin-bottom: 28px; } .hatena-module-category .hatena-module-title { font-size: 17px; font-weight: 600; color: #5e4a3a; margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid #e8dfd4; letter-spacing: 0.03em; } .hatena-module-category li:last-child { border-bottom: none; } /* 件数表示がある場合 */ .hatena-module-category .count, .hatena-module-category .hatena-module-category-count { color: #a08b78; font-size: 12px; margin-left: 6px; } /* スマホで見やすく */ @media screen and (max-width: 768px) { .hatena-module-category { margin-bottom: 24px; } .hatena-module-category .hatena-module-title { font-size: 16px; margin-bottom: 10px; padding-bottom: 7px; } /* 件数 */ .hatena-module-category .count, .hatena-module-category .hatena-module-category-count { font-size: 12px; color: #a08b78; margin-left: 6px; } /* スマホ */ @media screen and (max-width: 768px) { .hatena-module-category { padding: 14px; border-radius: 14px; } /* ===== カテゴリーモジュール：大人かわいいタグ風 ===== */ .hatena-module-category { background: #fcfaf7; padding: 16px; border: 1px solid #eee5da; border-radius: 18px; margin-bottom: 28px; box-shadow: 0 2px 10px rgba(80, 60, 40, 0.04); } .hatena-module-category .hatena-module-title { font-size: 18px; font-weight: 700; color: #5e4a3a; margin: 0 0 14px; letter-spacing: 0.04em; } /* 件数 */ .hatena-module-category .count, .hatena-module-category .hatena-module-category-count { color: #9c8774; font-size: 12px; margin-left: 4px; } /* スマホ */ @media screen and (max-width: 768px) { .hatena-module-category { padding: 14px; border-radius: 16px; } .hatena-module-category .hatena-module-title { font-size: 17px; margin-bottom: 12px; } .hatena-module-category ul { gap: 8px 6px; } .hatena-module-category a { font-size: 12px; padding: 8px 11px; } } /* ===== カテゴリー：大人かわいい縦リスト ===== */ .hatena-module-category ul { list-style: none; margin: 0; padding: 0; } .hatena-module-category li { margin-bottom: 8px; } /* リンク全体をボタン化 */ .hatena-module-category li a { display: block; text-decoration: none; padding: 10px 14px; border-radius: 12px; background: #faf6f0; border: 1px solid #e8ddd0; color: #5f4b3a; font-size: 14px; line-height: 1.6; transition: all 0.2s ease; } /* 左アクセント */ .hatena-module-category li a::before { content: "☕"; margin-right: 8px; font-size: 12px; } /* ホバー */ .hatena-module-category li a:hover { background: #f3ece3; border-color: #d9c4ad; transform: translateX(3px); } /* 件数 */ .hatena-module-category .count { font-size: 12px; color: #9c8774; margin-left: 4px; } /* スマホ */ @media screen and (max-width: 768px) { .hatena-module-category li a { padding: 11px 14px; font-size: 14px; } } /* ===== カテゴリー：上品カフェ仕上げ ===== */ /* 全体 */ .hatena-module-category { background: #fdfaf6; border: 1px solid #efe6da; border-radius: 16px; padding: 16px; margin-bottom: 28px; } /* タイトル */ .hatena-module-category .hatena-module-title { font-size: 17px; font-weight: 600; color: #5e4a3a; margin-bottom: 14px; letter-spacing: 0.04em; } /* リスト */ .hatena-module-category ul { list-style: none; margin: 0; padding: 0; } /* 各項目 */ .hatena-module-category li { margin-bottom: 6px; } /* リンク */ .hatena-module-category li a { display: block; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: #6a5645; font-size: 14px; line-height: 1.6; background: transparent; transition: all 0.2s ease; } /* 件数 */ .hatena-module-category .count { font-size: 12px; color: #9c8774; } /* スマホ */ @media screen and (max-width: 768px) { .hatena-module-category { padding: 14px; border-radius: 14px; } /* ===== カテゴリー最終仕上げ（軽やかカフェ） ===== */ /* 背景をやわらかく */ .hatena-module-category { background: #fdfaf6; border: 1px solid #efe6da; border-radius: 16px; padding: 16px; } /* タイトル */ .hatena-module-category .hatena-module-title { font-size: 17px; font-weight: 600; color: #5e4a3a; margin-bottom: 14px; } /* ↓ここを変更 */ background: transparent; /* ←グレー消す */ border: none; /* ←枠も消す */ color: #6a5645; transition: all 0.2s ease; } /* 件数 */ .hatena-module-category .count { color: #9c8774; font-size: 12px; } /* ===== カテゴリー 最終反映用 ===== */ .hatena-module-category { background: #fdfaf6 !important; border: 1px solid #efe6da !important; border-radius: 16px !important; padding: 16px !important; margin-bottom: 28px !important; } .hatena-module-category .hatena-module-title { font-size: 17px !important; font-weight: 600 !important; color: #5e4a3a !important; margin-bottom: 14px !important; } .hatena-module-category ul { list-style: none !important; padding: 0 !important; margin: 0 !important; } .hatena-module-category li { margin-bottom: 6px !important; } .hatena-module-category li a, .hatena-module-category a { display: block !important; padding: 10px 12px !important; border-radius: 10px !important; text-decoration: none !important; background: transparent !important; border: none !important; box-shadow: none !important; color: #6a5645 !important; transition: all 0.2s ease !important; } .hatena-module-category li a:hover, .hatena-module-category a:hover { background: #f4ede4 !important; padding-left: 16px !important; } .hatena-module-category li a::before, .hatena-module-category a::before { content: "・" !important; color: #c8a98a !important; margin-right: 6px !important; } .hatena-module-category .count, .hatena-module-category .hatena-module-category-count { color: #9c8774 !important; font-size: 12px !important; }