@charset "UTF-8";/*!
Theme: Smooth
Author: Hatena Blog Team
Responsive: yes
*//*!
* Bootstrap Reboot v4.2.1 (https://getbootstrap.com/)
* Copyright 2011-2018 The Bootstrap Authors
* Copyright 2011-2018 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
*/*,*:before,*:after{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0)}article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-size:1rem;font-weight:400;line-height:1.5;color:#212529;text-align:left;background-color:#fff}[tabindex="-1"]:focus{outline:0!important}hr{box-sizing:content-box;height:0;overflow:visible}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem}p{margin-top:0;margin-bottom:1rem}abbr[title],abbr[data-original-title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;border-bottom:0;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}ol,ul,dl{margin-top:0;margin-bottom:1rem}ol ol,ul ul,ol ul,ul ol{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#007bff;text-decoration:none;background-color:transparent}a:hover{color:#0056b3;text-decoration:underline}a:not([href]):not([tabindex]){color:inherit;text-decoration:none}a:not([href]):not([tabindex]):hover,a:not([href]):not([tabindex]):focus{color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus{outline:0}pre,code,kbd,samp{font-family:SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}pre{margin-top:0;margin-bottom:1rem;overflow:auto}figure{margin:0 0 1rem}img{vertical-align:middle;border-style:none}svg{overflow:hidden;vertical-align:middle}table{border-collapse:collapse}caption{padding-top:.75rem;padding-bottom:.75rem;color:#6c757d;text-align:left;caption-side:bottom}th{text-align:inherit}label{display:inline-block;margin-bottom:.5rem}button{border-radius:0}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}input,button,select,optgroup,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}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{padding:0;border-style:none}input[type=radio],input[type=checkbox]{box-sizing:border-box;padding:0}input[type=date],input[type=time],input[type=datetime-local],input[type=month]{-webkit-appearance:listbox}textarea{overflow:auto;resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;max-width:100%;padding:0;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit;color:inherit;white-space:normal}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:none}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}summary{display:list-item;cursor:pointer}template{display:none}[hidden]{display:none!important}html,body{background:#f9fafb;font-family:helvetica,Segoe UI,游ゴシック体,YuGothic,游ゴシック Medium,Yu Gothic Medium,游ゴシック,Yu Gothic,メイリオ,Meiryo,sans-serif;color:#293030}html{line-height:1}body{font-size:17px;line-height:1.6}img{vertical-align:baseline}a{color:#293030}a:hover{color:#586767;transition:all .3s}.date{margin:0 0 .7em;font-size:.9rem}.date a{color:#6f8383}.date a:hover{color:#a5b3b3}.date-last-updated{color:#6f8383;font-size:.9rem}#globalheader-container{position:sticky;top:0;background:#f9fafb}#container{word-wrap:break-word}#blog-title{max-width:1280px;margin:auto;padding:4% 5%;text-align:center}#title{font-size:150%;font-family:Times New Roman,游明朝体,YuMincho,游明朝,Yu Mincho,serif;font-weight:400}@media(min-width:768px){#title{font-size:215%}}#blog-description{font-size:90%;font-weight:400}#content-inner{width:100%;display:flex;flex-direction:column}@media(min-width:768px){#content-inner{flex-direction:row;margin:auto;padding:0 20px}}@media(min-width:1200px){#content-inner{width:1200px}}#wrapper{flex:0 0 100%;max-width:100%}@media(min-width:768px){#wrapper{flex:0 0 75%;max-width:75%}}@media(min-width:1020px){#main{padding:0 3% 0 0}}.header-image-enable #blog-title,.header-image-only #blog-title{padding:0 0 1.5em}@media(min-width:1200px){.header-image-enable #blog-title,.header-image-only #blog-title{width:1160px}}.header-image-enable #blog-title #blog-title-inner,.header-image-only #blog-title #blog-title-inner{display:flex;align-items:center;justify-content:center;height:50vw;max-height:200px}@media(min-width:1200px){.header-image-enable #blog-title #blog-title-inner,.header-image-only #blog-title #blog-title-inner{background-size:100%}}.header-image-enable #blog-title-content,.header-image-only #blog-title-content{margin:0 .5em}.breadcrumb{font-size:.9rem}.categories{margin-bottom:2em}.categories a{display:inline-block;background:#e9f0f2;margin:0 .3em 0 0;padding:0 10px;font-size:12px}.pager{text-align:center;margin:3em .8em}@media(min-width:1020px){.pager{margin:0}}.pager a{display:inline-block;width:100%;background:#eff1f5;padding:.7em 1.2em;border:none;font-weight:400;font-size:.9rem;color:#293030}.pager a:hover{background-color:#e9ecf1;text-decoration:none}.pager .pager-next,.pager .pager-prev{width:100%;padding:.5em 0}.pager .pager-prev+.pager-next{margin-left:1em;padding-left:1em}@media(min-width:768px){.pager .pager-prev+.pager-next{margin-left:1.5em;padding-left:1.5em}}.pager.permalink{display:flex;justify-content:center;align-items:center;text-align:center}.hatena-urllist{padding-left:0;list-style:none}.hatena-urllist li{border-top:1px dotted #cfd8d8;padding-top:10px;padding-bottom:10px}.hatena-urllist .archive-module-year,.hatena-urllist .archive-module-month{line-height:2}.hatena-urllist .urllist-date-link a{color:#6f8383}.hatena-urllist .urllist-category-link{display:inline-block;background:#e9f0f2;margin:.5em .3em 0 0;padding:3px 10px;font-size:12px;line-height:1.3}.hatena-urllist .urllist-category-link:hover{background:#d9e5e9;text-decoration:none;transition:background .3s}.hatena-urllist .urllist-entry-body{margin-top:10px}.hatena-module{margin-bottom:3em;padding-left:20px;padding-right:20px;font-size:.85rem}.hatena-module:last-child{margin-bottom:0}.hatena-module-title{margin-bottom:12px;font-family:Times New Roman,游明朝体,YuMincho,游明朝,Yu Mincho,serif;font-size:20px}.hatena-module-body{font-size:15px}.hatena-module-body .urllist-title-link{font-size:100%}.hatena-module-body .archive-module-button{display:inline-block;width:15px;height:15px}.hatena-module-body .archive-module-hide-button,.hatena-module-body .archive-module-show-button{position:absolute;overflow:hidden;width:15px;height:15px;text-indent:-15px}.hatena-module-body .archive-module-hide-button:after,.hatena-module-body .archive-module-show-button:after{content:"";top:50%;display:inline-block;position:absolute;width:8px;height:8px;margin-top:-.1em;border-top:1px solid #6f8383;border-right:1px solid #6f8383}.hatena-module-body .archive-module-hide-button{transform:rotate(135deg);margin-top:.2em}.hatena-module-body .archive-module-show-button{transform:rotate(45deg);margin-top:.2em}@media(min-width:481px){.search-result-form{margin:0 1em}}.search-result+p{background:#fff;border:1px solid #f0f1f1;margin:0 0 3em;padding:8% 0;font-weight:700;text-align:center}.search-form,.search-result-form{position:relative;width:100%;background:#fff;margin:auto;border:1px solid #eee;box-sizing:border-box}.search-form:hover,.search-result-form:hover{border-color:#ddd}.search-module-input,.search-result-form .search-result-input{width:90%;height:30px;padding:5px;background:#fff;border:none;outline:none}.search-module-input::-webkit-input-placeholder,.search-result-form .search-result-input::-webkit-input-placeholder,.search-module-input::-placeholder,.search-result-form .search-result-input::-placeholder{color:#9faba9}.search-module-button,.search-result-form .search-result-button{width:20px;height:20px;background:transparent url(https://cdn.blog.st-hatena.com/images/theme/search@2x.png?version=2d907d4a028137d9af6752f48b309c) no-repeat right center;background-size:20px 20px;border:none;outline:none;text-indent:-9999px;position:absolute;top:5px;right:5px;opacity:.5;cursor:pointer}.search-module-button:hover,.search-result-form .search-result-button:hover{opacity:.85}#top-box{margin:0 auto;padding:0 10px}@media(min-width:768px){#top-box{padding:0 20px}}@media(min-width:1200px){#top-box{max-width:1200px}}.entry{background:#fff;border:1px solid #f0f1f1;margin-bottom:2em;padding:8% 5%}@media(min-width:768px){.entry{padding:8% 9% 5%}}.entry-header{position:relative;margin-bottom:1.5em}@media(min-width:481px){.entry-header{margin-bottom:3em}}.entry-header-menu{position:absolute;top:0;right:0;margin-bottom:1em}.entry-header-menu a{background:#f9fafb;border:1px solid #cfd8d8;padding:5px 10px;font-size:.9rem}.entry-header-menu a:hover{background:#f3f5f7;text-decoration:none}.entry-title{margin-bottom:.5em;font-family:Times New Roman,游明朝体,YuMincho,游明朝,Yu Mincho,serif;font-size:130%;font-weight:400;line-height:1.5}@media(min-width:768px){.entry-title{font-size:190%}}.entry-content{line-height:1.85}.entry-content a{color:#119e4d}.entry-content a:hover{color:#0c7037}.entry-content a.keyword{-webkit-text-decoration:underline dotted #cfd8d8;text-decoration:underline dotted #cfd8d8}.entry-content a.keyword:hover{color:#586767;-webkit-text-decoration:underline dotted #ffffff;text-decoration:underline dotted #ffffff}.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.5em 0 .8em;line-height:1.3}.entry-content h1{padding-bottom:15px;font-size:190%;border-bottom:1px solid #cfd8d8}.entry-content h2{font-size:165%}.entry-content h3{padding-bottom:10px;font-size:140%;border-bottom:1px solid #cfd8d8}.entry-content h4{font-size:130%}.entry-content h5{padding-bottom:10px;font-size:120%;border-bottom:1px solid #cfd8d8}.entry-content h6{font-size:100%}.entry-content ul,.entry-content ol,.entry-content dd{margin:0 0 1em 1.5em;padding:0;line-height:1.7}.entry-content ul li ul,.entry-content ol li ul,.entry-content dd li ul,.entry-content ul li ol,.entry-content ol li ol,.entry-content dd li ol{margin-bottom:0}.entry-content dl{margin-top:2em}.entry-content dl dt{margin-bottom:.8em}.entry-content p{margin:0 0 .7em}.entry-content h1,.entry-content h2,.entry-content h3,.entry-content h4,.entry-content h5,.entry-content h6,.entry-content .footnote-number{scroll-margin-top:56px}.entry-content blockquote{position:relative;padding:9px 15px 9px 40px;border:1px solid #f0f1f1}@media(min-width:1020px){.entry-content blockquote{padding:20px 20px 20px 60px}}.entry-content blockquote:before{display:inline-block;position:absolute;top:10px;left:10px;vertical-align:middle;content:"“";font-size:40px;font-family:Times New Roman,游明朝体,YuMincho,游明朝,Yu Mincho,serif;color:#6f8383;line-height:1}@media(min-width:1020px){.entry-content blockquote:before{left:15px;font-size:70px}}.entry-content blockquote p{margin-bottom:0}.entry-content blockquote cite{display:block;margin-top:.5rem;text-align:right;font-size:85%;line-height:1.3}.entry-content table{border-collapse:collapse;border-spacing:0;border-bottom:1em;margin-bottom:1em;width:100%;overflow:auto;display:block}.entry-content table th,.entry-content table td{border:1px solid #f0f1f1;padding:5px 10px}.entry-content table th{background:#f9fafb}.entry-content pre,.entry-content code{font-family:Monaco,Consolas,Courier New,Courier,monospace,sans-serif}.entry-content pre{background:#293030;border:none;white-space:pre-wrap;text-overflow:ellipsis ellipsis;font-size:100%;font-size:.9rem;padding:10px;color:#ccc}@media(min-width:768px){.entry-content pre{font-size:.85rem;padding:15px}}.entry-content pre>code{margin:0;padding:0;white-space:pre;border:none;background-color:transparent;font-family:Monaco,Consolas,Courier New,Courier,monospace,sans-serif}.entry-content code{font-size:90%;margin:0 .1em;padding:0 5px;border-radius:3px}.entry-content .table-of-contents{background:#f9fafb;margin-left:0;padding:15px 10px 15px 35px;font-size:16px}@media(min-width:768px){.entry-content .table-of-contents{padding:20px 20px 20px 50px}}.entry-footer{margin-top:1em}.entry-footer-modules .hatena-module{padding:0}.entry-footer-section{margin-bottom:8px;color:#6f8383;font-size:.9rem}.entry-footer-section a{color:#6f8383}.entry-footer-ad{margin-left:-9%;margin-right:-9%}.comment-box{margin:0 -5%;padding:5% 5% 0;border-top:1px solid #f0f1f1}@media(min-width:768px){.comment-box{margin:0 -11%;padding:20px 11% 0}}.comment-box .leave-comment-title{background:#f9fafb;border:1px solid #cfd8d8;padding:.5rem 1rem;font-size:.9rem}.comment-box .leave-comment-title:hover{background:#f3f5f7}.comment-box .comment{list-style:none;padding-left:0}.comment-box .comment a{color:#119e4d}.comment-box .comment a:hover{color:#0c7037}.comment-box .comment .comment-user-id{font-size:14px;font-weight:700}.comment-box .comment .entry-comment{padding:20px 0 0;border-top:1px solid #f0f1ff;color:#6f8383}.comment-box .comment .entry-comment:first-child{padding-top:0;border-top:none}.comment-box .comment .entry-comment .comment-content{word-wrap:break-word}.comment-box .comment .entry-comment .comment-content p{font-size:14px}.comment-box .comment .entry-comment time{font-size:12px}.comment-box .comment .read-more-comments{font-size:14px}@media(min-width:1020px){.comment-box .comment .read-more-comments{margin-right:25px}}.comment-box .comment .read-more-comments a{position:relative;display:inline-block}.comment-box .comment .read-more-comments a:after{content:"";top:20%;left:-20px;display:inline-block;position:absolute;width:8px;height:8px;border-top:1px solid #119e4d;border-right:1px solid #119e4d;transform:rotate(135deg);margin-top:1px}#box2{flex:0 0 100%;max-width:100%;background:#fff3;padding:1em 0}@media(min-width:768px){#box2{flex:0 0 25%;max-width:25%}}#box2 .hatena-urllist>li:last-child{border-bottom:1px dotted #cfd8d8}.hatena-module-profile .profile-icon-link{display:inline;float:left;margin-right:.7em}.hatena-module-profile .profile-icon-link .profile-icon{border-radius:400px}@media(min-width:1020px){.hatena-module-profile .profile-icon-link{display:block;float:none;margin-right:0}}.hatena-module-profile .id{display:block}.hatena-module-profile .id a{color:#119e4d;font-weight:700}.hatena-module-profile .id a:hover{color:#0c7037}.hatena-module-profile .profile-description p{font-size:80%}.archive-module-calendar .calendar-day a{color:#119e4d;font-weight:700}.archive-module-calendar .calendar-day a:hover{color:#0c7037}.hatena-module-recent-comments .user-id span{font-size:12px;opacity:.7}#footer{background:#fff;margin-top:2em;padding-top:2rem;padding-bottom:2rem;text-align:center;font-size:.9rem;color:#6f8383}#footer a{color:#6f8383}#footer p{margin:.5em auto}.archive-header-category{margin-bottom:.3em}.page-archive .archive-heading{margin:.5em .7em 1.3em;line-height:1.5}@media(min-width:1020px){.page-archive .archive-heading{margin:.5em 0 1.3em}}.page-archive .archive-entries-sort{margin-left:1.2em}@media(min-width:768px){.page-archive .archive-entries-sort{margin-left:0}}.page-archive .archive-entry{background:#fff;border:1px solid #f0f1f1;margin-bottom:30px;padding:9% 6% 6%}@media(min-width:768px){.page-archive .archive-entry{padding:6%}}@media(min-width:768px){.page-archive .archive-entry .entry-title{font-size:150%}}
/* 🔓 公開状態によるリンク無効化スタイル */
.sn-link-disabled, a.sn-link-disabled, a.sn-link-disabled.is-in-view, .entry-content a.sn-link-disabled, .entry-content a.sn-link-disabled.is-in-view, .entry-content .sleep-checklist-links a.sn-link-disabled, .entry-content .sleep-checklist-links a.sn-link-disabled.is-in-view, .entry-content .sleep-shelf-links a.sn-link-disabled, .entry-content .sleep-shelf-links a.sn-link-disabled.is-in-view, .entry-content .sn-navi-box a.sn-link-disabled, .entry-content .sn-navi-box a.sn-link-disabled.is-in-view { opacity: 0.35 !important; cursor: default !important; pointer-events: none !important; color: #aaa !important; background: #f0f0f0 !important; background-color: #f0f0f0 !important; filter: grayscale(100%) !important; transform: none !important; text-decoration: none !important; }
body { background-color: #fdf8f2 !important; }
#content, #main, .entry, .archive-entry { background-color: #fdf8f2 !important; border-color: transparent !important; }
.footer-custom-area { background-color: #ede6dd !important; }
.categories a { display: inline-block; background: transparent !important; border: 1px solid #ddd; color: #3f3e3d !important; margin: 0 .3em 0 0; padding: 2px 10px; font-size: 12px; border-radius: 4px; } .categories a:hover { text-decoration: underline !important; }
article.entry { margin-bottom: 0 !important; padding-bottom: 0 !important; }
.author.vcard, .entry-footer-time { display: none !important; }
@media(max-width:767px) { .entry-content p, #main-container .entry-content p { display: block !important; line-height: 1.75 !important; margin-bottom: 1.8em !important; letter-spacing: 0; } }
.entry-content p { line-height: 1.75 !important; margin-bottom: 1.8em !important; }
.sheep-section-bg { background: #f7f2ea; padding: 26px 0; }
/* 検索ボタン */
.search-btn * { color: #C9B7E7 !important; fill: currentColor !important; transition: transform 0.2s, color 0.2s !important; display: inline-block; }
.search-btn:hover * { color: rgb(122, 111, 178) !important; transform: scale(1.05) !important; }
.search-btn:active * { transform: scale(1.05) !important; }
/* --- Inner Link セクションスタイル --- */
/* --- 1. 共通ベーススタイル --- */
.sheep-section-inner { max-width: 720px; margin: 0 auto; padding: 0 22px; box-sizing: border-box; }
.sheep-wave { line-height: 0; font-size: 0; height: 36px; overflow: hidden; margin: 0; padding: 0; position: relative; z-index: 2; }
.sheep-wave svg { display: block; width: 100%; height: 36px; margin: 0; padding: 0; }
.sheep-wave-bottom svg { transform: rotate(180deg); }
.sheep-section-bg { background: #f7f2ea; padding: 26px 0; position: relative; z-index: 1; margin-top: -2px !important; margin-bottom: -2px !important; }
.sheep-divider { width: 72%; margin: 2em auto 1.5em; border-bottom: 1px solid #ddd9cf; opacity: 0.55; }
.entry-content p.sheep-minihead { position: relative; padding: 0; margin: 0 0 14px !important; line-height: 1.6; color: #3f3e3d; }
.sheep-hub-wrap { width: 100% !important; padding: 0 !important; margin: 0 !important; text-align: center; }
.sheep-hub-btn { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; text-decoration: none !important; background: transparent !important; box-shadow: none !important; border: none !important; overflow: visible !important; transition: none !important; -webkit-tap-highlight-color: transparent; }
/* 下のカード本体 */
.sheep-hub-btn-inner { display: block !important; width: 100% !important; margin: 0 !important; padding: 18px 16px !important; background-color: #fafafa !important; border-radius: 16px !important; box-sizing: border-box !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10) !important; transition: transform 0.2s ease-out, background-color 0.2s ease, box-shadow 0.2s ease !important; }
.sn-major-title { font-size: 15px !important; font-weight: bold !important; color: #3f3e3d !important; display: block; margin-bottom: 4px; line-height: 1.4; }
.sn-major-copy { font-size: 12px !important; color: #7f7c79 !important; font-weight: normal !important; display: block; line-height: 1.6; }
/* 上のカード */
.sheep-card-link { display: block; margin-top: 20px !important; margin-bottom: 0 !important; background-color: #fafafa !important; padding: 18px 16px 1px; box-sizing: border-box; border-radius: 16px; position: relative; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10) !important; transition: transform 0.2s ease-out, background-color 0.2s ease, box-shadow 0.2s ease !important; text-decoration: none !important; -webkit-tap-highlight-color: transparent; }
/* タップ・ホバー共通 */
.sheep-card-link:hover, .sheep-card-link:active, .sheep-hub-btn:hover .sheep-hub-btn-inner, .sheep-hub-btn:active .sheep-hub-btn-inner { transform: translateY(-3px) !important; background-color: #ffffff !important; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14) !important; transition: transform 0.2s ease-out, background-color 0.2s ease, box-shadow 0.2s ease !important; }
.sheep-card-hero { position: relative; width: 100%; margin: 0px 0 14px !important; background-size: cover; background-position: center; overflow: hidden; aspect-ratio: 16 / 7; border-radius: 8px; }
.sheep-card-overlay { position: relative; height: 100%; width: 100%; }
.sheep-card-catch { position: absolute; left: 0; right: 0; top: 0; bottom: 56px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 2px; margin: 0; color: #FFFFFF !important; font-weight: 600; font-style: normal; text-shadow: 0 0 8px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.1) !important; line-height: 1.5; transform: translateY(25px); }
.sheep-card-logo { position: absolute; left: 50%; transform: translateX(-50%); height: auto; opacity: 0.9; bottom: 20px; width: 100px; }
.entry-content p.sheep-center { text-align: center; margin: 5px 0 17px !important; font-size: 90%; color: #7f7c79; }
.sheep-card-hero::after { content: ""; position: absolute; top: 0; left: -200%; width: 100%; height: 100%; background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0) 100%); transform: skewX(-20deg); animation: sheepShineRefined 6s infinite ease-in-out; }
@keyframes sheepShineRefined { 0% { left: -200%; } 35% { left: 150%; } 100% { left: 150%; } }
.sheep-card-link *, .sheep-hub-btn * { text-decoration: none !important; }
[data-majorhub-text] u { text-decoration: underline !important; text-underline-offset: 3px; }
.sheep-scroll-hidden { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) !important; will-change: opacity, transform; }
.sheep-scroll-hidden.is-visible { opacity: 1; transform: translateY(0); }
/* PC用レスポンシブ */
@media (min-width: 768px) {
.sheep-section-inner { max-width: 680px; padding: 0 34px; }
.sheep-card-catch { font-size: 21px; }
.sheep-card-link { padding-left: 5% !important; padding-right: 5% !important; }
.sn-major-title { font-size: 17px !important; }
.sn-major-copy { font-size: 13.5px !important; }
}
/* スマホ用レスポンシブ */
@media (max-width: 767px) {
.sheep-wave-wrap { width: 100vw; position: relative; left: 50%; transform: translateX(-50%); overflow-x: clip; }
.sheep-wave svg { width: 100vw; height: 36px; }
.sheep-wave-bottom { width: 100vw; position: relative; left: 50%; transform: translateX(-50%); overflow: hidden; }
.sheep-wave-bottom svg { width: 100vw; display: block; }
.sheep-section-bg { width: 100vw; position: relative; left: 50%; transform: translateX(-50%); margin-top: -2px !important; margin-bottom: -2px !important; border-radius: 0; }
.sheep-section-inner { padding-left: 16px; padding-right: 16px; }
.sheep-card-hero { aspect-ratio: 4 / 2.4; }
.sheep-card-catch { font-size: 14.5px !important; top: 27px !important; bottom: 40px !important; padding: 0 1px !important; transform: none !important; }
.sheep-card-logo { width: 65px; bottom: 14px; }
}
.sn-hero { position: relative; width: 100%; border-radius: 0; overflow: hidden !important; margin: 14px 0 0 !important; background-size: cover; background-position: center; background-repeat: no-repeat; aspect-ratio: 4 / 2.8; -webkit-tap-highlight-color: rgba(255, 255, 255, 0.16); touch-action: manipulation; cursor: pointer; transition: box-shadow 0.3s ease; }
@media(min-width:768px) {
.sn-hero {
aspect-ratio: 16 / 7
}
.sn-hero:hover {
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18)
}
}
@media(max-width:767px) {
.sn-hero {
width: 100vw !important;
left: 50% !important;
transform: translateX(-50%) !important;
margin-top: 10px !important
}
}
.sn-hero-guide {
text-align: right;
color: #7f7c79;
font-style: italic;
letter-spacing: 0.05em;
opacity: 0.8;
font-size: 11px;
margin-top: 2px !important;
margin-bottom: -10px !important;
padding-right: 3px;
display: block !important;
visibility: visible !important;
pointer-events: none
}
@media(max-width:767px) {
.sn-hero-guide {
width: 100vw !important;
position: relative;
left: 50%;
transform: translateX(-50%);
font-size: 10px;
padding-right: 6px !important;
margin-top: 2px !important;
margin-bottom: -10px !important
}
}
.sn-hero.is-talk+.sn-hero-guide {
visibility: visible !important;
display: block !important;
opacity: 0.8 !important
}
.sn-hero-logo {
position: absolute !important;
left: 50% !important;
top: 50% !important;
z-index: 2;
opacity: 0;
transform: translate(-50%, -50%) scale(1) !important;
width: min(520px, 62%) !important;
transition: opacity 1200ms ease, transform 0.2s ease !important
}
@media(min-width:768px) {
.sn-hero-logo {
width: min(560px, 41%) !important;
transition-duration: 1700ms
}
}
.sn-hero.is-ready .sn-hero-logo {
opacity: 1
}
.sn-hero:active .sn-hero-logo {
transform: translate(-50%, -50%) scale(0.97) !important
}
@media(min-width:768px) {
.sn-hero:hover .sn-hero-logo {
transform: translate(-50%, -50%) scale(0.97) !important
}
}
.sn-hero::after {
content: "";
position: absolute;
top: 0;
left: -200%;
width: 100%;
height: 100%;
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0) 100%);
transform: skewX(-20deg);
animation: sheepShineRefined 6s infinite ease-in-out;
pointer-events: none;
z-index: 1
}
@media(hover:hover) and (pointer:fine) {
.sn-hero::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0;
transition: opacity 180ms ease;
background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 55%);
z-index: 1
}
.sn-hero:hover::before {
opacity: 1
}
}
.sn-hero-hint {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
opacity: 0;
z-index: 2;
transition: opacity 2000ms ease;
font-size: 26px;
display: block !important
}
@media(min-width:768px) {
.sn-hero-hint {
font-size: 35px
}
}
.sn-hero.is-inview .sn-hero-hint {
opacity: 1;
transition-duration: 200ms
}
.sn-hero.is-ready .sn-hero-hint {
opacity: 0;
transition: opacity 2600ms ease 1000ms
}
.sn-hero-msg {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
opacity: 0;
z-index: 3;
transition: opacity 220ms ease;
text-align: center;
width: calc(100% - 24px);
max-width: 820px;
color: white;
font-weight: 700;
font-style: italic;
text-shadow: 0 2px 14px rgba(0, 0, 0, 0.28);
white-space: pre-line;
font-size: 22px;
line-height: 1.6
}
@media(max-width:767px) {
.sn-hero-msg {
font-size: 16px;
line-height: 1.5;
width: calc(100% - 20px)
}
}
.sn-hero.is-talk .sn-hero-logo,
.sn-hero.is-talk .sn-hero-hint {
opacity: 0 !important
}
.sn-hero.is-talk .sn-hero-msg {
opacity: 1
}
.sn-hero.is-hidden {
display: none
}
#sn-music-root .sn-music-loading {
text-align: center !important;
padding: 100px 0 !important;
color: #7f7c79 !important;
font-size: 13px !important;
width: 100% !important;
display: block !important
}
#sn-music-root .sn-music-outer {
width: 100%;
margin: 0 auto 40px;
position: relative
}
@media screen and (min-width:1024px) {
#sn-music-root .sn-music-outer {
width: 95%
}
}
#sn-music-root .sn-music-header-container {
text-align: center;
margin-bottom: 12px;
padding: 0 10px
}
#sn-music-root .sn-selection-concept-text {
font-size: 14px;
color: #3f3e3d;
margin-bottom: 6px;
font-weight: bold;
line-height: 1.5
}
#sn-music-root .sn-meta-outside-text {
font-family: 'JetBrains Mono', monospace;
font-size: 9px;
color: #7f7c79;
line-height: 1.4
}
#sn-music-root .sn-music-carousel-main {
position: relative;
width: 100%
}
#sn-music-root .sn-music-overlay-ui {
position: static
}
#sn-music-root .sn-music-dots {
display: flex;
justify-content: center;
gap: 8px;
margin: 10px 0 5px
}
#sn-music-root .sn-dot {
width: 6px;
height: 6px;
background: #ddd;
border-radius: 50%;
transition: 0.3s;
display: inline-block
}
#sn-music-root .sn-dot.is-active {
background: #C9B7E7;
transform: scale(1.3)
}
#sn-music-root .sn-music-fixed-header {
text-align: center;
margin-bottom: 12px;
height: 22px
}
#sn-music-root .sn-music-genre-tag {
display: inline-flex;
align-items: center;
justify-content: center;
background: #C9B7E7;
border-radius: 30px;
width: 80px;
height: 22px;
transition: all 0.3s
}
#sn-music-root .sn-fade-text {
color: #ffffff !important;
font-size: 11px;
font-weight: bold;
line-height: 1;
transition: opacity 0.3s
}
#sn-music-root .sn-nav-btn {
display: flex;
position: absolute;
z-index: 100;
width: 42px;
height: 42px;
background: transparent !important;
color: #7f7c79;
border: none;
cursor: pointer;
align-items: center;
justify-content: center;
top: 76px;
transform: translateY(-50%)
}
#sn-music-root .sn-nav-btn:hover {
color: #7a6fb2;
transform: translateY(-50%) scale(1.2)
}
#sn-music-root .sn-nav-btn.prev {
left: -25px
}
#sn-music-root .sn-nav-btn.next {
right: -25px
}
@media screen and (min-width:1024px) {
#sn-music-root .sn-nav-btn {
display: flex;
top: 176px !important;
transform: translateY(-50%)
}
#sn-music-root .sn-nav-btn.prev {
left: -40px
}
#sn-music-root .sn-nav-btn.next {
right: -40px
}
}
#sn-music-root .sn-music-carousel-viewport {
width: 100%;
overflow-x: auto;
overflow-y: hidden !important;
scroll-snap-type: x mandatory;
display: flex !important;
flex-wrap: nowrap !important;
scrollbar-width: none;
overscroll-behavior-x: contain;
touch-action: pan-x pan-y !important;
-webkit-overflow-scrolling: touch
}
#sn-music-root .sn-music-carousel-inner {
display: flex !important;
flex-wrap: nowrap !important;
width: 100%
}
#sn-music-root .sn-music-card {
flex: 0 0 100% !important;
scroll-snap-align: center;
box-sizing: border-box;
padding: 0 10px;
height: 450px;
display: flex;
flex-direction: column;
background: transparent;
overflow: hidden !important
}
#sn-music-root .sn-music-info-box ul{width:100%;text-align:center}.sn-music-card .sn-music-info-box ul li{text-align:center;margin-bottom:12px}.sn-music-card .sn-music-info-box ul li:last-child{margin-bottom:0}
@media screen and (min-width:1024px) {
#sn-music-root .sn-music-card {
height: auto !important;
min-height: 500px;
position: relative
}
}
#sn-music-root .sn-music-player-fixed {
flex: 0 0 auto;
margin-bottom: 12px;
height: 152px;
width: 100%
}
#sn-music-root .sn-music-player-fixed iframe {
display: block;
width: 100%;
height: 152px !important;
border-radius: 12px
}
#sn-music-root .sn-music-scroll-body {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
overscroll-behavior-y: contain;
touch-action: auto !important;
width: 100% !important;
margin: 0 0 8px !important;
padding: 15px !important;
box-sizing: border-box !important;
background: #ffffff !important;
border: 1px solid #ece7df !important;
border-radius: 12px !important;
scrollbar-width: thin;
scrollbar-color: #ddd transparent
}
@media screen and (min-width:1024px) {
#sn-music-root .sn-music-header-container {
margin-bottom: 20px
}
#sn-music-root .sn-target-text {
font-size: 15px !important
}
#sn-music-root .sn-genre-badge {
font-size: 15px;
height: 26px
}
#sn-music-root .sn-music-meta-bottom {
font-size: 13px !important;
margin: 10px 0 5px !important
}
#sn-music-root .sn-music-player-fixed,
#sn-music-root .sn-music-player-fixed iframe {
height: 352px !important;
margin-bottom: 15px !important
}
#sn-music-root .sn-music-overlay-ui {
position: absolute;
top: 67px;
left: 0;
width: 100%;
height: 0;
z-index: 20
}
#sn-music-root .sn-music-fixed-header {
position: absolute;
top: 10px;
left: 25px;
margin: 0;
text-align: left;
width: auto
}
#sn-music-root .sn-music-genre-tag {
transform: scale(1.3);
transform-origin: top left;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2)
}
#sn-music-root .sn-music-dots {
position: absolute;
top: 17px;
right: 25px;
margin: 0;
gap: 6px;
background: rgba(255, 255, 255, 0.2);
padding: 4px 8px;
border-radius: 12px
}
#sn-music-root .sn-dot {
background: rgba(255, 255, 255, 0.6) !important;
width: 8px;
height: 8px
}
#sn-music-root .sn-dot.is-active {
background: #fff !important;
transform: scale(1.4)
}
#sn-music-root .sn-music-scroll-body {
overflow-y: auto !important;
height: 150px !important;
flex: none !important;
display: block !important;
margin-top: 0 !important;
margin-bottom: 10px !important;
padding-bottom: 0 !important
}
#sn-music-root .sn-music-balloon {
margin-bottom: 5px !important
}
}
#sn-music-root .sn-music-meta-bottom {
text-align: center;
font-family: 'JetBrains Mono', monospace;
font-size: 9px;
color: #7f7c79;
margin: 15px 0 5px !important;
padding: 8px 0;
border-top: 1px dashed #7f7c79;
border-bottom: 1px dashed #7f7c79;
line-height: 1.4
}
#sn-music-root .sn-music-tag-row {
font-size: 10px;
margin-bottom: 8px;
text-align: left;
display: flex;
align-items: center;
gap: 8px
}
#sn-music-root .sn-genre-badge {
background: #7f7c79;
color: #ffffff;
border-radius: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
height: 24px;
line-height: 1;
padding: 1px 12px 0;
font-weight: bold;
font-size: 11px;
letter-spacing: 0.5px
}
#sn-music-root .sn-target-text {
color: #7f7c79;
font-weight: bold;
font-size: 12px;
padding-top: 1px
}
#sn-music-root .sn-music-track-info {
text-align: left;
margin: 4px 0 12px !important;
font-size: 1.0em;
font-weight: bold
}
#sn-music-root .sn-title-link {
color: #7a6fb2 !important;
text-decoration: none !important;
font-size: 1.08em;
line-height: 1.5;
}
.entry-content #sn-music-root .sn-music-reason {
text-align: left;
font-size: 0.9em;
line-height: 1.5;
color: #3f3e3d;
margin-bottom: 0 !important;
}
#sn-music-root .sn-music-balloon {
text-align: left;
background: #f8f4ff;
border: 1px solid #e8e0f5;
border-radius: 12px;
padding: 12px 15px;
font-size: 0.9em;
margin-bottom: 15px;
font-style: normal
}
#sn-music-root .sn-music-footer-fixed {
flex: 0 0 auto;
padding: 8px 0 10px !important;
background: transparent;
width: 100%;
box-sizing: border-box;
text-align: center
}
#sn-music-root .sn-music-spotify-wrap {
text-align: center
}
/* Spotifyボタン（個別配色） */
#sn-music-root .sn-spotify-link-btn { display: inline-block; font-size: 0.90em; font-weight: 500; color: #8da491 !important; border: 2px solid #8da491; background: rgba(141, 164, 145, 0.1); padding: 8px 25px; border-radius: 30px; text-decoration: none !important; transition: background 0.2s; }
#sn-music-root .sn-spotify-link-btn:hover { background: rgba(141, 164, 145, 0.2); }
#sn-music-root .sn-spotify-note {
display: block;
font-size: 9px;
color: #7f7c79;
margin-top: 5px
}
@media (max-width: 767px) {
#sn-music-root .sn-spotify-link-btn { font-size: 0.95em !important; font-weight: 700; border: 1.5px solid #8da491; padding: 5px 18px !important; }
}
#sn-music-root .sn-music-info-box {
height: 100%;
border-radius: 20px;
border: 1px solid #ece7df !important;
padding: 30px;
text-align: center;
background: rgba(255, 255, 255, 0.7) !important;
color: #3f3e3d !important;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center
}
#sn-music-comment-area {
width: 100%;
max-width: 600px;
margin: 10px auto 0;
padding: 0 15px;
box-sizing: border-box;
opacity: 1;
transition: opacity 0.3s ease
}
.yhs-comment {
display: inline-flex;
align-items: flex-start;
gap: 14px;
width: 100%;
max-width: 100%;
padding-right: 15px !important;
box-sizing: border-box !important;
margin-top: 1.0em !important;
margin-bottom: 0.8em !important
}
.yhs-icon {
flex: 0 0 55px;
width: 55px;
height: 55px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, #ffffff, #f4eefc);
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.06);
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
font-size: 32px;
line-height: 1
}
.yhs-bubble {
position: relative;
flex: 0 1 auto;
max-width: 550px;
padding: 14px 16px;
border-radius: 18px;
border: 2.5px solid #C9B7E7 ;
background: rgba(249, 247, 255, 0.35);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
color: #3f3e3d;
line-height: 1.7;
font-size: 0.9em;
font-style: italic
}
.yhs-bubble::before {
content: "";
position: absolute;
left: -10px;
top: 18px;
width: 14px;
height: 18px;
border-radius: 8px 0 0 8px;
border-left: 2.5px solid #C9B7E7 ;
border-top: 2.5px solid #C9B7E7 ;
border-bottom: 2.5px solid #C9B7E7 ;
background: rgba(249, 247, 255, 1.0)
}
@media(max-width:480px) {
.yhs-bubble {
max-width: calc(100vw - 100px)
}
}
.sn-spot:empty {
display: none
}
html,
body {
overflow-x: hidden !important;
position: relative;
width: 100% !important
}
/* 全体基本設定 */
body,
h1, h2, h3, h4, h5, h6,
.entry-title,
.entry-content,
header, footer, nav,
#content, #main, #sidebar, .widget,
.breadcrumb, .pager,
a, p, li, span, div {
font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Hiragino Sans", "ヒラギノ角ゴ ProN", "メイリオ", sans-serif;
line-height: 1.8;
color: #3f3e3d;
}
/* ページ送り背景色 */
.pager a { background-color: #f5f5f5 !important; color: #3f3e3d !important; transition: none !important; } .pager a:hover, .pager a:active, .pager a:focus { background-color: #C9B7E7 !important; color: #ffffff !important; }
/* 英数字フォントペアリング */
.hatena-module-title,
.date, .date *,
.entry-date, .entry-date *,
.footer-copyright,
.sn-about-sublabel,
.sn-hero-caption, .sn-hero-caption *,
.nav-no,sn-info-sublabel,
.sleep-shelf::after,
ul.table-of-contents::before {
font-family: "Helvetica Neue", "Avenir", Arial, "Noto Sans JP", sans-serif !important;
letter-spacing: 0.06em;
}
.hatena-module-title {
font-weight: 700 !important;
font-size: 1.4em !important;
}
@media (max-width: 767px) {
.hatena-module-title {
font-weight: 700 !important;
font-size: 1.3em !important;
}
}
/* サイドバー「⺌」追加 */
.hatena-module-title::before,
.hatena-module-title::after
{
content: "⺌ ";
font-weight: normal;
}
.entry-content {
line-height: 1.85;
letter-spacing: 0.03em
}
@media screen and (max-width:768px) {
.entry-content {
font-size: 15px
}
}
@media screen and (max-width:768px) {
.breadcrumb,
.breadcrumbs,
.breadcrumb-list {
font-size: 11px;
line-height: 1.6
}
}
/* アイコンパーツ */
.sn-brand-icon,
#title a::after {
display: inline-block !important;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23b9a7d9'%3E%3Ccircle cx='50' cy='50' r='42' stroke-width='4.5'/%3E%3Cpath d='M 34 42 A 8 8 0 0 1 50 36 A 8 8 0 0 1 66 42' stroke-width='4.5' stroke-linecap='round'/%3E%3Cpath d='M 34,42.29 C 20,42.29 20,62 36,62 C 44,62 44,52.15 38,52.15' stroke-width='3.97' stroke-linecap='round'/%3E%3Cpath d='M 66,42.30 C 80,42.30 80,62 64,62 C 56,62 56,52.15 62,52.15' stroke-width='3.97' stroke-linecap='round'/%3E%3Cpath d='m 34,60.04 a 16,14.46 0 0 0 32,0' stroke-width='4.42'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain !important;
}
/* PC用設定 */
@media screen and (min-width: 769px) {
.entry-title { font-size: 1.8em !important; line-height: 1.4 !important; font-weight: 500; margin-bottom: 0.8em !important; }
#title a { font-size: 0 !important; font-weight: 400; display: block !important; text-decoration: none !important; }
#title a::before { content: "羊さんの眠れない夜のメモ帖\ASleep Note " !important; white-space: pre-wrap !important; font-size: 30px !important; line-height: 1.5 !important; letter-spacing: 0.08em !important; margin: 0em 0 0 !important; }
#title a::after { content: "" !important; width: 38px !important; height: 38px !important; vertical-align: -8px !important; margin-left: 8px !important; }
.site-description, #blog-description, .header-description, .entry-description { font-size: 15px !important; font-weight: 400; line-height: 1.6 !important; letter-spacing: 0.08em !important; margin-top: 2.0em !important; margin-bottom: 0em !important; }
}
/* スマホ用設定 */
@media screen and (max-width:768px) {
.entry-title { font-size: 1.17em !important; line-height: 1.4 !important; font-weight: 500; margin-bottom: 0.8em !important; }
#title a { font-size: 0 !important; font-weight: 500; display: block !important; text-decoration: none !important; padding-top: 2em !important; }
#title a::before { content: "羊さんの眠れない夜のメモ帖\ASleep Note " !important; white-space: pre-wrap !important; font-size: 17px !important; line-height: 1.6 !important; letter-spacing: 0.05em !important; }
#title a::after { content: "" !important; width: 20px !important; height: 20px !important; vertical-align: -4px !important; margin-left: 1px !important; }
.site-description, #blog-description, .header-description, .entry-description { font-size: 11px !important; font-weight: 500; line-height: 1.6 !important; letter-spacing: 0.05em !important; margin-top: 0em !important; margin-bottom: 1.3em !important; }
}
.entry-content p:has(> .sn-memo-mini-btn) {
margin-bottom: 0.6em !important;
margin-top: 1.2em !important
}
.sn-memo-mini-btn {
display: inline-block;
padding: 5px 13px;
font-size: 13px;
background: #C9B7E7 !important;
color: #FFFFFF !important;
border: 1px solid #C9B7E7 !important;
border-radius: 30px;
text-decoration: none !important;
transition: transform 0.2s ease, background-color 0.2s ease !important;
margin: 0 !important
}
.sn-memo-mini-btn:hover {
background: #BBA6DF !important;
color: #FFFFFF !important;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1)
}
.sn-about-box {
text-align: center;
padding: 0.8em 0.4em;
margin: 2em auto 1.8em;
max-width: 600px
}
.sn-about-box p {
margin: 0 !important;
font-size: 1.1em;
color: #3f3e3d
}
.entry-content h2,
.entry-content h3 {
border: none;
background: none
}
.entry-content h2 {
position: relative;
font-size: 1.15em;
line-height: 1.5;
font-weight: 700;
color: #3f3e3d;
padding-left: 0.2em;
padding-bottom: 10px;
margin: 2.6em 0 1.8em
}
.entry-content h2::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 6px;
background: repeating-linear-gradient(135deg, #C9B7E7 0px, #C9B7E7 2px, transparent 2px, transparent 6px);
opacity: 0.9;
border-radius: 6px
}
.entry-content h3 {
position: relative;
padding: 0 0 0 14px;
margin: 2.2em 0 1.5em;
font-size: 1.08em;
line-height: 1.5;
font-weight: 600;
color: #3f3e3d
}
.entry-content h3::before {
content: "";
position: absolute;
left: 0;
top: 0.1em;
bottom: 0.1em;
width: 4px;
background: #C9B7E7 ;
border-radius: 4px;
}
.entry-content h4 {
padding: 0 0 4px 0;
margin: 1.8em 0 1.5em;
font-size: 1.08em;
line-height: 1.5;
font-weight: 600;
color: #3f3e3d;
border-bottom: 1px dotted #C9B7E7
}
#pagetop {
position: fixed !important;
bottom: 10px !important;
right: 22px !important;
left: auto !important;
margin-bottom: env(safe-area-inset-bottom);
z-index: 9999;
transition: opacity 0.25s ease !important;
display: block;
width: 44px;
height: 44px;
line-height: 40px;
border-radius: 50%;
text-align: center;
font-size: 17px;
text-decoration: none !important;
color: #C9B7E7 !important;
background-color: rgba(185, 167, 217, 0.15) !important;
border: 2px solid #C9B7E7 !important
}
#pagetop .blogicon-chevron-up {
color: #C9B7E7 !important
}
@media screen and (min-width:768px) {
#pagetop {
bottom: 30px !important;
width: 54px;
height: 54px;
line-height: 50px;
font-size: 22px;
background-color: #C9B7E7 !important;
color: #ffffff !important;
border-color: #C9B7E7 !important
}
#pagetop .blogicon-chevron-up {
color: #ffffff !important
}
#pagetop:hover {
background-color: #BBA6DF !important
}
}
ul.table-of-contents {
counter-reset: toc;
position: relative;
padding: 1.8em 1.6em 1.8em 1.6em !important;
border: 2px solid #ece7df;
border-radius: 6px;
font-size: 0.9em !important;
display: table !important;
width: 100%;
max-width: 550px;
margin: 3rem auto 0 !important;
background-color: rgba(255, 255, 255, 0.0) !important;
background: linear-gradient(-45deg, transparent 25%, rgba(200, 200, 200, 0.12) 25%, rgba(200, 200, 200, 0.12) 50%, transparent 50%, transparent 75%, rgba(200, 200, 200, 0.12) 75%, rgba(200, 200, 200, 0.12));
background-size: 6px 6px;
overflow: hidden;
line-height: 1.6;
list-style: none;
text-align: center
}
/* 「Contents」の文字設定 */
ul.table-of-contents::before {
content: "⺌ Contents ⺌";
display: table;
font-weight: 700;
font-synthesis: none;
font-size: 1.4em !important;
letter-spacing: 0.05em;
color: #3f3e3d;
margin: 0 auto 1.4em !important;
}
/* 下線設定 */
ul.table-of-contents::after {
content: "";
position: absolute;
top: 4.0em;
left: 50%;
transform: translateX(-50%);
width: 9.8em;
height: 2px;
background: #C9B7E7;
border-radius: 2px;
}
ul.table-of-contents>li {
margin: 0.6em 0 0.4em;
padding: 0.25em 0 0.4em 0;
counter-increment: toc;
text-align: left
}
ul.table-of-contents>li>a {
position: relative;
display: block;
text-decoration: none;
color: #3f3e3d;
font-weight: 700;
font-size: 1.1em;
padding: 0.25em 0.3em 0.25em 1.8em;
transition: background-color 0.2s ease, transform 0.2s ease
}
ul.table-of-contents>li>a::before {
content: counter(toc) ".";
position: absolute;
left: 0.2em;
top: 50%;
transform: translateY(-50%);
color: #7f7c79;
font-weight: 700
}
ul.table-of-contents ul {
margin: 0.4em 0 0 1.8em;
padding-left: 0;
list-style: none
}
ul.table-of-contents ul li {
margin: 0.25em 0;
padding: 0;
border-bottom: none !important
}
ul.table-of-contents ul li a {
display: block;
text-decoration: none;
color: #3f3e3d;
font-weight: 400;
padding: 0.25em 4px 0.45em;
border-bottom: 2px dotted #ddd;
transition: background-color 0.2s ease, transform 0.2s ease
}
ul.table-of-contents ul ul {
margin: 0.2em 0 0 1.5em;
list-style: none
}
ul.table-of-contents ul ul li a {
font-size: 0.95em;
border-bottom: 2px dotted #ddd;
}
ul.table-of-contents a:hover {
color: #7a6fb2 !important;
font-weight: 600;
background-color: rgba(184, 168, 255, 0.05);
transform: translateX(4px)
}
ul.table-of-contents ul ul {
display: none !important
}
/* ─── スマホ用：目次の調整 ─── */
@media screen and (max-width: 768px) {
ul.table-of-contents {
padding: 2.0em 1em 1.5em 1em !important;
margin-bottom: 2.5rem !important;
line-height: 1.4;
border: 1px solid #ece7df;
}
/* 「Contents」見出し */
ul.table-of-contents::before {
font-size: 1.3em !important;
margin: 0 auto 1.2em !important;
padding-bottom: 0.25em;
}
/* 大見出し */
ul.table-of-contents>li {
margin: 0.5em 0 0.2em;
padding: 0.1em 0;
}
ul.table-of-contents>li>a {
font-size: 1.05em;
padding: 0.15em 0.3em 0.5em 1.6em;
}
/* 小見出し */
ul.table-of-contents ul {
margin: 0.2em 0 0 1.2em;
}
ul.table-of-contents ul li {
margin: 0.1em 0;
}
ul.table-of-contents ul li a {
font-size: 0.95em;
padding: 0.15em 4px 0.25em;
border-bottom: 1px dotted #ddd !important;
}
}
html {
scroll-behavior: smooth
}
.sn-memo {
position: relative;
max-width: 550px;
margin: 2.5em auto;
padding: 1.2em 1.8em 0.6em;
background-color: #fefbf5;
background-image: repeating-linear-gradient(to bottom, #e4e4e4 0px, #e4e4e4 1px, transparent 1px, transparent 26px);
border-radius: 12px;
border: 1px solid #e0ded8;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
box-sizing: border-box;
overflow: hidden
}
.sn-memo-top {
padding-bottom: 1.3em !important;
}
.sn-memo::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 9px;
background: linear-gradient(to bottom, #f4f4f4, #eaeaea);
border-right: 1px solid #d1d1d1;
}
.sn-memo-title {
font-size: 1.05em;
font-weight: 800;
letter-spacing: 0.08em;
color: #7f7c79;
margin: 0 0 0.4em 0.4em;
}
.sn-memo-body {
margin: 0;
padding-left: 0.4em;
font-size: 0.97em;
letter-spacing: 0.03em !important;
color: #3f3e3d;
}
.sn-memo-body em {
font-style: italic;
color: #3f3e3d;
line-height: 1.75 !important;
display: inline-block;
}
.sn-memo-top .sn-memo-title {
color: #c29a6b;
}
.sn-memo-bottom .sn-memo-title {
color: #c29a6b;
}
.entry-content .sn-memo-body p:has(> span[style*="display:block"]) {
margin-bottom: 0 !important;
}
.sn-memo-body span[style*="display:block"] {
display: block !important;
margin-top: 1.2em !important;
margin-bottom: -1.2em !important;
}
.hatena-follow-button-box {
margin: 0 !important;
padding-left: 2px;
}
.memo-strong {
color: #3f3e3d !important;
font-weight: bold !important;
font-style: italic !important;
line-height: 1.5 !important;
text-decoration: none !important
}
/* H2下線削除 */
.entry-content h2.sleep-checklist-title {
font-size: 1.15em;
font-weight: 700;
letter-spacing: 0.03em;
color: #3f3e3d;
text-align: center;
margin-top: 3.3em !important;
margin-bottom: 1.4em !important;
padding-bottom: 0 !important;
}
.entry-content h2.sleep-checklist-title::after {
content: none !important;
}
.entry-content h2.sleep-checklist-title + p,
.entry-content h2.sleep-checklist-title + p + p {
display: none !important;
margin: 0 !important;
}
.entry-content p:empty {
display: none !important;
}
@media (max-width: 480px) {
.entry-content h2.sleep-checklist-title {
font-size: 1.15em !important;
}
}
.sleep-checklist { background: #fbfaf6; padding: 22px 22px 16px; border-radius: 14px; border: 1px solid #ece7df; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.04); max-width: 540px; margin: 0 auto 2em; box-sizing: border-box; }
.sleep-checklist-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; margin-bottom: 6px; font-size: 0.98em; color: #3f3e3d; line-height: 1.6; background: #ffffffaa; border-radius: 8px; font-weight: 500; }
.sleep-checklist-item::before { content: "✔"; display: inline-block; width: 1.2em; height: 1.2em; font-size: 0.9em; color: #3f3e3d !important; background: rgba(249, 247, 255, 1.0) !important; border-radius: 4px; text-align: center; line-height: 1.2em; margin-right: 8px; flex-shrink: 0; box-shadow: 0 1px 3px #00000010; }
@media (min-width: 768px) { .sleep-checklist-item::before { font-size: 1.2em; line-height: 1.2em; } }
.sleep-checklist-sheep-line {
margin-top: 14px;
text-align: center;
font-size: 1.2em;
letter-spacing: 0.25em;
color: #cfcfcf;
white-space: nowrap;
overflow: hidden
}
.sleep-checklist-sheep-line::before {
content: "🐑🐑🐑🐑💤🐑🐑🐑🐑🐑🐑🐑🐑🐑🐑🐑🐑🐑🐑🐑⸒🐑🐑🐑🐑🐑🐑"
}
#pagetop {
background-color: rgba(185, 167, 217, 0.15) !important;
border-color: #C9B7E7 !important;
color: #C9B7E7 !important
}
#pagetop .blogicon-chevron-up,
#pagetop .blogicon-chevron-up::before,
#pagetop span,
#pagetop span::before {
color: #C9B7E7 !important
}
@media screen and (min-width:768px) {
#pagetop {
background-color: #C9B7E7 !important;
border-color: #C9B7E7 !important;
color: #ffffff !important
}
#pagetop .blogicon-chevron-up,
#pagetop .blogicon-chevron-up::before,
#pagetop span,
#pagetop span::before {
color: #ffffff !important
}
}
.sheep-card-link,
.sheep-card-link *,
.sheep-card-link:hover,
.sheep-card-link:hover * {
text-decoration: none !important;
border-bottom: none !important
}
.entry-content .sheep-card-link,
.entry-content .sheep-card-link:hover {
text-decoration: none !important;
border-bottom: none !important
}
@media screen and (max-width:767px) {
.sheep-card-link,
.sheep-hub-btn {
opacity: 0;
transform: translateY(15px);
transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.33, 1, 0.68, 1) !important;
will-change: opacity, transform
}
.is-in-view {
opacity: 1 !important;
transform: translateY(0) !important
}
}
@media screen and (min-width:768px) {
.sheep-card-link,
.sheep-hub-btn {
transition: transform 0.3s ease, box-shadow 0.3s ease
}
.sheep-card-link:hover,
.sheep-hub-btn:hover {
transform: translateY(-5px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12)
}
}
#sn-music-root .sn-music-info-box {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: flex-start !important;
text-align: left !important;
padding: 20px 20px 10px !important;
}
/* メインコピー */
#sn-music-root .sn-music-info-box p.sn-main-copy {
font-size: 0.93em !important;
font-weight: bold !important;
text-align: center !important;
width: 100% !important;
margin-top: 12px !important;
margin-bottom: 30px !important;
}
#sn-music-root .sn-update-notice {
font-size: 10px !important;
font-weight: bold;
color: #7a6fb2 !important;
margin-bottom: 0px !important;
width: 100%;
text-align: center !important;
}
#sn-music-root .sn-music-info-box ul {
list-style: none !important;
padding-left: 0 !important;
margin-left: 0 !important;
}
#sn-music-root .sn-music-info-box .sn-info-sublabel {
display: block;
width: 100% !important;
text-align: center !important;
font-size: 0.7em;
font-weight: 800;
color: #7f7c79;
margin-top: 20px;
margin-bottom: 20px;
}
#sn-music-root .sn-music-info-box p,
#sn-music-root .sn-music-info-box ul {
font-size: 12px !important;
}
/* PC用（1024px以上） */
@media screen and (min-width: 1024px) {
#sn-music-root .sn-music-info-box {
align-items: center !important;
justify-content: center !important;
padding: 40px !important;
}
#sn-music-root .sn-music-info-box .sn-info-sublabel {
font-size: 0.7em !important;
margin-top: 20px !important;
margin-bottom: 20px !important;
display: block;
width: 100% !important;
text-align: center !important;
font-weight: 800;
color: #7f7c79;
}
#sn-music-root .sn-music-info-box p,
#sn-music-root .sn-music-info-box ul {
width: 100% !important;
max-width: 350px !important;
text-align: left !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* PC用メインコピー調整 */
#sn-music-root .sn-music-info-box p.sn-main-copy {
display: block !important;
width: 100% !important;
max-width: none !important;
text-align: center !important;
font-size: 0.95em !important;
margin-top: 15px !important;
margin-bottom: 35px !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
#sn-music-root .sn-update-notice {
font-size: 12px !important;
text-align: center !important;
margin-bottom: 15px !important;
}
#sn-music-root .sn-music-info-box p,
#sn-music-root .sn-music-info-box ul {
font-size: 14px !important;
}
}
.cite-content a,
.article-note a {
color: #7a6fb2 !important;
text-decoration: none !important;
font-weight: bold !important;
transition: color 0.2s ease;
display: inline-block !important;
line-height: 1.7 !important;
}
.cite-content a:hover,
.article-note a:hover {
text-decoration: underline !important;
color: #5a4f92 !important
}
/* 引用 */
.article-quote {
position: relative;
background: #f7f2ea !important;
border: none !important;
border-radius: 6px;
max-width: 550px !important;
margin: 2.5em auto !important;
padding: 3.0em 2.2em 1.8em 3.5em;
color: #3f3e3d;
font-size: 1.03em;
line-height: 1.7;
text-align: left !important;
}
/* 引用符 */
.article-quote::before {
content: "“";
position: absolute;
top: 0.1em;
left: 0.15em;
font-size: 5.5em;
color: #e2d8c9;
font-family: serif;
line-height: 1;
}
.quote-footer {
display: block !important;
margin-top: 1.5em;
width: 100% !important;
text-align: right !important
}
.cite-wrapper {
display: inline-flex !important;
font-size: calc(0.85em / 1.03) !important;
color: #7f7c79;
text-align: left;
}
.cite-label {
flex-shrink: 0 !important;
white-space: nowrap !important
}
.cite-content {
word-break: break-all
}
.article-note {
display: flex;
font-size: 0.85em;
color: #7f7c79;
margin: 1.2em 0;
}
.note-label {
flex-shrink: 0;
white-space: nowrap;
padding-right: 0.5em
}
.sleep-note-notice {
margin-top: 40px;
margin-bottom: 60px;
padding: 20px 0;
color: #7f7c79;
font-size: 0.85rem;
line-height: 1.6;
text-align: left;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
::selection {
background-color: #e5deff;
color: #3f3e3d
}
::-moz-selection {
background-color: #e5deff;
color: #3f3e3d;
}
.affiliate-notice {
text-align: center;
padding: 5px 15px;
background: rgba(255, 255, 255, 0.0);
width: 100%;
font-size: 0.60em;
box-sizing: border-box;
color: #3f3e3d;
}
@media (max-width:767px) {
.categories {
margin-bottom: 0.8em !important;
}
.affiliate-notice {
width: 100vw !important;
position: relative;
left: 50%;
transform: translateX(-50%);
border-radius: 0;
padding-bottom: 1.7em !important;
}
}
/* テキストインフィード広告 */
.sn-contextual-link a:hover {
filter: brightness(0.8);
}
.sn-contextual-link a:hover span {
text-decoration: underline !important;
}
/* スマホ用（767px以下） */
@media (max-width: 767px) {
.sn-contextual-link {
margin: 3.5rem 0 3.5rem!important;
background: none !important;
padding: 1.0rem 0 !important;
border-top: 1px dashed #ddd !important;
border-bottom: 1px dashed #ddd !important;
border-left: none !important;
border-right: none !important;
border-radius: 0 !important;
text-align: left !important;
}
.sn-contextual-link a,
.sn-contextual-link a span {
color: #3f3e3d !important;
font-weight: 550 !important;
font-size: 0.97em !important;
display: inline !important;
text-decoration: none !important;
}
}
/* PC用 */
@media (min-width: 768px) {
.sn-contextual-link {
background: none !important;
width: 100% !important;
margin: 2rem auto !important;
border-radius: 12px;
border: 2px solid #ece7df;
text-align: center !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
min-height: 4.8em !important;
padding: 1rem !important;
box-sizing: border-box !important;
}
.sn-contextual-link a {
color: #3f3e3d !important;
font-size: 0.9em !important;
font-weight: 500 !important;
display: block !important;
text-decoration: none !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1.6 !important;
text-align: center !important;
}
}
/* 改行・インラインブロック */
.pc-br {
display: block !important;
content: "" !important;
margin: 0 !important;
height: 0 !important;
line-height: 0 !important;
}
.ad-content,
.ad-product {
display: inline-block !important;
line-height: 1.6 !important;
vertical-align: middle;
}
.note-links {
margin: 12px 0 20px
}
.note-links a {
display: block !important;
width: 100% !important;
box-sizing: border-box !important;
color: #3f3e3d !important;
text-decoration: none !important;
font-size: 1.08rem !important;
line-height: 1.7 !important;
padding: 14px 10px !important;
border-bottom: 1px solid #ececec !important;
transition: color 0.25s ease, transform 0.25s ease, background-color 0.25s ease;
-webkit-tap-highlight-color: transparent;
font-weight: bold
}
.note-links a:last-child {
border-bottom: none !important
}
.note-links a:hover .note-link-main {
color: #3f3e3d !important;
text-decoration: none;
text-decoration-thickness: 1px;
}
.entry-content .sn-quick-nav-box {
counter-reset: qnav;
background: none;
padding: 1.2em 1.7em 1.7em 1.7em !important;
margin: 0.5em auto 2.5em !important;
border:1px solid #ece7df;
border-radius: 12px !important;
max-width: 400px !important;
box-sizing: border-box !important
}
.entry-content .sn-quick-nav-box a,
.entry-content .sn-quick-nav-box a:visited {
display: flex !important;
align-items: flex-start !important;
color: #7a6fb2 !important;
text-decoration: none !important;
border-bottom: 1px dotted #ddd !important;
padding: 10px 0 !important;
font-size: 90% !important;
font-weight: bold !important;
transition: background 0.15s ease !important;
touch-action: pan-y !important;
-webkit-tap-highlight-color: transparent !important
}
.entry-content .sn-quick-nav-box a::before {
content: counter(qnav) ". ";
counter-increment: qnav;
color: #3f3e3d !important;
width: 1.6em;
flex-shrink: 0;
display: inline-block
}
.entry-content .sn-quick-nav-box a:hover,
.entry-content .sn-quick-nav-box a:active {
background: rgba(184, 168, 255, 0.05) !important;
color: #7a6fb2 !important;
}
.note-tag {
display: inline-block;
font-size: 14px;
padding: 2px 10px;
margin-bottom: 6px;
border-radius: 999px;
background: rgba(249, 247, 255, 0.8);
color: #7a6fb2
}
.entry-content .sleep-checklist-links {
background: #fbfaf6 !important;
padding: 20px 18px 8px !important;
border-radius: 14px !important;
border: 1px solid #ece7df !important;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.04) !important;
max-width: 540px !important;
margin: 1.5em auto 2em !important;
box-sizing: border-box !important;
text-align: center !important
}
.entry-content .sleep-checklist-links a,
.entry-content .sleep-checklist-links a:visited {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 7px !important;
padding: 12px 15px !important;
margin-bottom: 8px !important;
font-size: 0.95em !important;
color: #3f3e3d !important;
line-height: 1.5 !important;
background: #ffffffaa !important;
border-radius: 8px !important;
font-weight: bold !important;
text-decoration: none !important;
border-bottom: none !important;
transition: all 0.3s ease !important
}
.entry-content .sleep-checklist-links a::before {
display: none !important
}
.entry-content .sleep-checklist-links a:hover {
background: #ffffff !important;
transform: translateX(5px) !important;
color: #7a6fb2 !important;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important
}
@media screen and (max-width:768px) {
.note-links a {
font-size: 0.96rem !important;
line-height: 1.85 !important;
padding: 14px 2px !important;
white-space: normal !important;
word-break: break-word !important
}
/* opacity0.01で、1回目でタップ可能 */
.note-links a,
.entry-content .sleep-checklist-links a,
.sheep-card-link,
.sheep-hub-btn {
opacity: 0.01;
transform: translateY(15px);
visibility: visible !important;
pointer-events: auto !important;
}
.is-in-view,
.note-links a.is-in-view,
.entry-content .sleep-checklist-links a.is-in-view {
opacity: 1 !important;
transform: translateY(0) !important;
transition: opacity 1.2s cubic-bezier(0.33, 1, 0.68, 1), transform 1.2s cubic-bezier(0.33, 1, 0.68, 1) !important;
}
}
.sn-quick-nav-title {
font-size: 0.8rem;
color: #3f3e3d;
font-weight: bold;
letter-spacing: 0.05em;
display: block;
padding: 10px 0;
border-bottom: 1px dotted transparent;
box-sizing: border-box;
text-align: center;
}
.entry-content .sn-navi-box .sn-more-btn {
background: transparent !important;
box-shadow: none !important;
border: none !important
}
.entry-content .sn-navi-box .sn-more-btn:hover {
transform: none !important;
background: transparent !important
}
/* メモ帖リスト：基本ガイド枠 */
.sn-guide-box {
background: #f9f9f9 !important;
color: #3f3e3d !important;
font-size: 0.9em !important;
padding: 1.2em 1.5em !important;
margin: 1.2em auto !important;
display: block !important;
width: 90% !important;
/* スマホで横幅をしっかり確保 */
max-width: 420px !important;
/* 文字数が増えても一定の綺麗さを維持 */
border-radius: 8px !important;
line-height: 1.7 !important;
text-align: center !important;
box-sizing: border-box !important;
}
.sn-guide-box strong {
font-weight: 700 !important;
}
/* 2. メモ帖リスト */
.sleep-checklist-links .sn-list-category-title {
display: block !important;
width: 100% !important;
background: none !important;
border: none !important;
box-shadow: none !important;
font-size: 14.5px !important;
font-weight: 400 !important;
color: #3f3e3d !important;
letter-spacing: 0.06em !important;
text-align: center !important;
padding: 0.6em 0 1.4em 0 !important;
margin: 0 !important;
}
/* 3. 本棚navi：行間を詰める */
.sn-navi-box a,
.sleep-checklist-links a {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
padding: 50px 12px !important;
text-decoration: none !important;
}
.sn-navi-box a .sn-navi-main,
.sleep-checklist-links a .sn-navi-main {
display: block !important;
font-size: 16px !important;
font-weight: 700 !important;
color: #3f3e3d !important;
line-height: 1.2 !important;
margin-bottom: 0px !important;
}
.sn-navi-box a .sn-navi-sub,
.sleep-checklist-links a .sn-navi-sub {
display: block !important;
font-size: 12.5px !important;
font-weight: 400 !important;
color: #3f3e3d !important;
line-height: 1.2 !important;
margin-top: 0 !important;
}
/* スマホ版調整 */
@media screen and (max-width: 767px) {
.sn-guide-box {
width: 92% !important;
padding: 1.1em 1.2em !important;
}
.sleep-checklist-links .sn-list-category-title {
font-size: 13.0px !important;
}
.sn-navi-box a .sn-navi-main,
.sleep-checklist-links a .sn-navi-main {
font-size: 13.5px !important;
}
.sn-navi-box a .sn-navi-sub,
.sleep-checklist-links a .sn-navi-sub {
font-size: 10.5px !important;
}
}
/* 本棚navi：マウスオーバー（hover）時のテキスト変色ルール */
.sn-navi-box a:hover .sn-navi-main,
.sn-navi-box a:hover .sn-navi-sub,
.sleep-checklist-links a:hover .sn-navi-main,
.sleep-checklist-links a:hover .sn-navi-sub {
color: #7a6fb2 !important;
}
/* 帯カーテンボタン */
.button011 { position: relative; display: block; width: 90%; height: 0; margin: 0 auto; padding: 0; box-sizing: border-box; overflow: hidden; background: #f5f5f5; border-radius: 8px; transition: height 0.4s ease, margin-top 0.4s ease; }
/* カーテン */
.button011::before { position: absolute; top: 0; left: 0; width: 180%; height: 600%; content: ""; background: #C9B7E7 !important; opacity: 0; transform: translateX(-98%) translateY(-25%) rotate(45deg); transition: all 0.7s ease-in-out;
/* ボタンが開いてからカーテンを出す */ transition-delay: 0.4s; pointer-events: none; z-index: 1; }
/* 帯 */
.button011 .note-mini-meta { position: relative; z-index: 2; display: block; margin: 0; padding: 10px 42px 10px 35px; box-sizing: border-box; font-size: 0.9em; line-height: 1.6; color: #f5f5f5 !important; font-weight: 400; font-style: italic; letter-spacing: 0.07em; max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.4s ease, opacity 0.3s ease, color 0.3s ease, font-size 0.3s ease; }
/* 月 */
.button011 .note-mini-meta::before {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
display: inline-block;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
font: var(--fa-font-solid);
content: "\f186";
color: #FFFCE8;
font-size: 1.4em;
transition:
color 0.2s ease;
z-index: 3;
}
/* 右矢印 */
.button011 .note-mini-meta::after {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
font: var(--fa-font-regular);
content: "\f35a";
color: #F7F6FA;
font-size: 2.0em;
z-index: 3;
}
/* 開く */
.note-links a:hover .button011 {
height: auto;
margin-top: 14px;
}
/* 帯表示 */
.note-links a:hover .button011 .note-mini-meta {
max-height: 100px;
opacity: 1;
color: #FFFFFF !important;
font-weight: 800;
font-size: 0.85em;
}
/* カーテンを左下 → 右上へ */
.note-links a:hover .button011::before {
opacity: 1;
transform:
translateX(-9%) translateY(-25%) rotate(45deg);
}
/* hover時の月 */
.note-links a:hover .button011 .note-mini-meta::before {
font-size: 1.4em;
color: #FFFCE8;
}
/* タップ後も帯を開いた状態にする */
.note-links a.is-open .button011 {
height: auto;
margin-top: 14px;
}
.note-links a.is-open .button011 .note-mini-meta {
max-height: 100px;
opacity: 1;
color: #3f3e3d !important;
font-weight: 700;
font-size: 0.75em;
}
.note-links a.is-open .button011::before {
opacity: 1;
transform:
translateX(-9%) translateY(-25%) rotate(45deg);
}
.note-links a.is-open .button011 .note-mini-meta::before {
font-size: 1.5em;
color: #e6c45a;
}
/* PC */
@media (min-width: 769px) {
.button011 {
display: none;
}
.note-links a:hover {
color: #7a6fb2 !important;
transform: translateX(4px);
background: rgba(184, 168, 255, 0.05) !important
}
.note-links a:hover .note-link-main {
color: #7a6fb2 !important;
}
}
/* カテゴリーページカスタム */
.hatena-module-custom-カテゴリー一覧 {
padding: 0 !important;
border: none !important
}
.hatena-module-custom-カテゴリー一覧 .hatena-module-title {
display: none !important
}
.hatena-module-custom-カテゴリー一覧 .hatena-urllist li {
border-bottom: none !important;
padding: 4px 0 !important
}
.hatena-module-custom-カテゴリー一覧 .hatena-urllist li a {
color: #3f3e3d !important;
font-size: 15px !important;
font-weight: bold !important;
text-decoration: none !important;
line-height: 1.5 !important
}
.hatena-module-custom-カテゴリー一覧 .hatena-urllist li a:hover {
text-decoration: underline !important;
color: #7a6fb2 !important
}
.entry-content .sn-more-btn span {
color: #3f3e3d !important;
font-size: 0.95em;
text-decoration: none !important;
}
.entry-content .sn-more-btn:hover span {
color: #3f3e3d !important;
text-decoration: underline !important;
}
/* 矢印 */
.entry-content .sn-more-btn span::after {
font: var(--fa-font-solid);
content: "\f138";
color: #C9B7E7;
margin-left: 0.3em;
display: inline-block;
}
/* 3秒メモ / TOP SUMMARY */
.summary-raw {
display: block !important;
clear: both !important;
margin: -1.5em 0 1.0em !important;
padding: 0 !important;
border-top: 1px dashed #ddd !important;
border-bottom: 1px dashed #ddd !important;
background: transparent !important;
overflow: hidden;
text-align: center;
line-height: 1;
width: 100% !important;
touch-action: manipulation;
position: relative !important;
}
.summary-check {
position: absolute !important;
opacity: 0 !important;
pointer-events: none !important;
}
.summary-btn {
padding: 1.4em 3em !important;
font-size: 14px !important;
color: #3f3e3d !important;
display: block !important;
position: relative !important;
margin: 0 auto !important;
letter-spacing: 0.05em;
user-select: none;
width: 100% !important;
cursor: pointer !important;
z-index: 10;
-webkit-tap-highlight-color: transparent;
background: transparent !important;
}
/* --- PC版：矢印（24px） --- */
.summary-btn::before {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%239aa0a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
position: absolute;
right: 5% !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 24px !important;
height: 24px !important;
z-index: 25 !important;
line-height: 1 !important;
display: block !important;
transition: transform 0.2s ease, filter 0.2s ease !important;
}
.summary-check:checked~.summary-btn::before {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%239aa0a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='18 15 12 9 6 15'%3E%3C/polyline%3E%3C/svg%3E") !important;
}
/* --- 全域判定レイヤー --- */
.summary-check:checked~.summary-btn::after {
content: "" !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 5000px !important;
z-index: 20 !important;
cursor: pointer !important;
}
/* --- PC版：マウスオーバー演出 --- */
@media (hover: hover) {
.summary-btn:hover::before {
transform: scale(1.2) translateY(-42%) !important;
filter: brightness(0.7) !important;
}
}
.summary-check:checked~.summary-body {
display: block !important;
}
.summary-raw:has(.summary-check:checked) {
background: rgba(255, 255, 255, 0.0) !important;
}
.summary-body {
display: none !important;
padding: 0.8em 1.5em 1.3em !important;
text-align: left;
max-width: 600px;
margin: 0 auto;
background: transparent !important;
}
.summary-sub-title {
text-align: center !important;
font-size: 17px;
font-weight: 700 !important;
color: #c29a6b !important;
margin-bottom: 1.4em !important;
letter-spacing: 0.1em;
}
.qa-list {
margin: 0 !important;
padding: 0 !important;
}
/* 質問（Q） */
.qa-list dt {
display: flex !important;
align-items: flex-start;
font-size: 16.5px !important;
letter-spacing: 0.04em;
font-weight: 700 !important;
color: #3f3e3d !important;
line-height: 1.5 !important;
margin-top: 0.9em !important;
}
.qa-list dt:first-child {
margin-top: 0 !important;
}
/* 「Q.」のアイコン装飾 */
.qa-list dt::before {
content: "Q." !important;
margin-right: 0.4em !important;
flex-shrink: 0 !important;
font-weight: 800 !important;
color: #c29a6b !important;
}
/* 回答（A） */
.qa-list dd {
display: flex !important;
align-items: flex-start;
font-size: 15.5px !important;
letter-spacing: 0.04em;
font-weight: 400 !important;
color: #3f3e3d !important;
line-height: 1.6 !important;
margin: 0.3em 0 1.2em 0 !important;
padding-bottom: 1.0em !important;
border-bottom: 1px dashed #ddd !important;
}
/* 「A.」のアイコン装飾 */
.qa-list dd::before {
content: "A." !important;
margin-right: 0.4em !important;
flex-shrink: 0 !important;
font-weight: 800 !important;
color: #7f7c79 !important;
}
/* 最後の回答の下線と余白を解除 */
.qa-list dd:last-child {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
border-bottom: none !important;
}
/* --- スマホ版の設定 --- */
@media screen and (max-width:767px) {
.summary-raw {
width: 100vw !important;
position: relative !important;
left: 50% !important;
transform: translateX(-50%) !important;
margin: -1.8em 0 2.0em !important;
border: none !important;
background-image: linear-gradient(to right, #ddd 40%, transparent 0%), linear-gradient(to right, #ddd 40%, transparent 0%) !important;
background-position: left top, left bottom !important;
background-size: 4px 1px !important;
background-repeat: repeat-x !important;
}
.summary-btn {
font-size: 11px !important;
padding: 1.45em 2.9em !important;
}
.summary-btn::before {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%239aa0a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
right: 4% !important;
top: 50% !important;
margin-top: -10px !important;
width: 22px !important;
height: 22px !important;
transform: none !important;
}
.summary-check:checked~.summary-btn::before {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%239aa0a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='18 15 12 9 6 15'%3E%3C/polyline%3E%3C/svg%3E") !important;
}
.summary-sub-title {
font-size: 14.5px !important;
font-weight: bold !important;
color: #c29a6b !important;
margin-bottom: 1.2em !important;
}
/* Q&Aのスマホ用サイズ調整 */
.qa-list dt {
font-size: 13.5px !important;
}
.qa-list dd {
font-size: 12.5px !important;
}
}
.summary-raw br,
.summary-raw p {
display: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* --- 3秒メモ最下部：マイナスボタン --- */
.summary-close-btn {
text-align: center !important;
margin-top: 17px !important;
/* 余白を縮小 */
padding-top: 0px !important;
padding-bottom: 3px !important;
position: relative !important;
z-index: 30 !important;
}
.summary-close-btn svg {
width: 26px !important;
height: 26px !important;
fill: #9aa0a6 !important;
cursor: pointer !important;
display: inline-block !important;
transition: fill 0.2s ease, transform 0.2s ease !important;
}
@media (hover: hover) {
.summary-close-btn svg:hover {
fill: #3f3e3d !important;
transform: scale(1.15) !important;
}
}
/* ハブ記事用 (summary-hub) 差分スタイル */
/* 1. 全体で
タグの改行を復活させる */
.summary-hub br {
display: inline !important;
}
/* 2. Q. / A. アイコンの非表示 */
.summary-hub .qa-list dt::before,
.summary-hub .qa-list dd::before {
display: none !important;
}
/* 3. キャッチコピー（dt）：\n（テキスト改行）を有効化 */
.summary-hub .qa-list dt {
display: block !important;
text-align: center !important;
line-height: 1.6 !important;
margin-bottom: 1.4em !important;
white-space: pre-line !important;
}
/* 4. 概要文（dd）：
タグでの改行のみに標準化 */
.summary-hub .qa-list dd {
display: block !important;
line-height: 1.7 !important;
border-bottom: none !important;
padding-bottom: 0 !important;
margin-bottom: 0 !important;
white-space: normal !important;
}
.entry-content .sleep-checklist-links {
overflow: visible !important;
}
.entry-content .sleep-checklist-links a {
justify-content: center !important;
text-align: center !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
position: relative !important;
}
.entry-content .sleep-checklist-links a.is-current::before {
content: '🔖';
position: absolute;
top: 50%;
left: 0px !important;
transform: translateY(-50%);
font-size: 1.2em;
z-index: 10;
display: block !important;
}
@media screen and (min-width: 769px) {
.entry-content .sleep-checklist-links a {
padding: 10px 40px !important;
font-size: 15px !important;
}
.entry-content .sleep-checklist-links a.is-current::before {
left: 85px;
font-size: 1.8em;
}
}
@media screen and (max-width: 768px) {
.entry-content .sleep-checklist-links a {
padding: 10px 25px !important;
font-size: 13.5px !important;
}
.note-links a,
.entry-con