/* */ @charset "utf-8";@import "https://fonts.googleapis.com/css?family=Roboto";@import "https://fonts.googleapis.com/earlyaccess/notosansjapanese.css";html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}.clearfix{display:block;*zoom:1}.clearfix:after{display:block;visibility:hidden;font-size:0;height:0;clear:both;content:"."}.inline-block{display:inline-block;*display:inline;*zoom:1}.ellipsis{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}html,body{font-family:'Roboto','Noto Sans Japanese', 'Hiragino Kaku Gothic Pro', sans-serif;background:#FAFAFA;font-size:14px;font-weight:200;line-height:24px;color:#757575;margin:0;padding:0}a{color:#3367d6;text-decoration:none}a:hover{text-decoration:underline}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a,h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover,h6 a:hover,h1 a:visited,h2 a:visited,h3 a:visited,h4 a:visited,h5 a:visited,h6 a:visited{color:#727272;text-decoration:none}a.keyword{text-decoration:none;border-bottom:1px dotted #dddddd;color:#454545}.btn{display:inline-block;*display:inline;*zoom:1;padding:4px 10px 4px;margin-bottom:0;line-height:18px;color:#454545;background-color:#ffffff;text-align:center;vertical-align:middle;border-top-right-radius:2px;border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-left-radius:0;border-radius:2px;background-clip:padding-box;cursor:pointer;font-size:12px;text-decoration:none;font-weight:bold;border:1px solid rgba(0, 0, 0, 0.2);text-decoration:none !important}.btn:hover{background-color:#f5f5f5;text-decoration:none !important}.btn-small{padding:2px 10px !important;font-size:11px !important}.btn-large{padding:13px 19px;font-size:17px;line-height:normal;font-weight:bold}#globalheader-container{background-color:#303F9F;color:#fff}#container #content{display:block;*zoom:1;width:960px;margin:0 auto}#container #content:after{display:block;visibility:hidden;font-size:0;height:0;clear:both;content:"."}.globalheader-off #container{padding-top:0}#main{width:100%;float:none}#box2{width:100%;float:none;margin-top:40px}#box2-inner{width:960px;.clearfix; overflow:hidden}.hatena-module{text-align:left;padding-right:20px;width:300px;float:left;&:nth-child(3n+1) { clear: both}} #blog-title{margin:0 0 -5em;padding:5em 0 10em;background-color:#3F51B5;box-shadow:0 2px 5px rgba(0,0,0,0.26);text-align:center}#blog-title-inner{margin:0 auto}#title{margin:0;font-size:3.25em;font-weight:200;line-height:1.45em}#title a{color:#ffffff;position:relative;padding-bottom:5px}#title a:after{content:'';position:absolute;bottom:0;left:0;width:100%;height:2px;-webkit-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);background-color:#FE7FAB;-webkit-transition:all .3s ease;transition:all .3s ease}#title a:hover::after{-webkit-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1)}#blog-description{font-weight:400;font-size:1.2em;margin:.4em 0 0;color:#fff;opacity:0.5}.header-image-enable #title{padding-top:70px}.header-image-enable #title,.header-image-enable #blog-description{padding-left:20px}#top-box{margin:0 auto 0;padding:23px 0 23px;background:#f1f1f1;box-shadow:0 2px 5px rgba(0,0,0,0.26)}#top-box .breadcrumb{width:960px;margin:0 auto}.entry{position:relative;margin-bottom:30px;background-color:#fff;box-shadow:0 2px 5px 0 rgba(0, 0, 0, 0.26);border-radius:2px;overflow:hidden;-webkit-animation-duration:0.4s;-webkit-animation-duration:0.4s;-webkit-animation-fill-mode:both;-webkit-animation-fill-mode:both;-webkit-animation-name:slideUp;-webkit-animation-name:slideUp;-webkit-animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}@-webkit-keyframes "slideUp"{0%{-webkit-transform:translateY(6.25em);transform:translateY(6.25em);}100%{-webkit-transform:translateY(0);transform:translateY(0);}}@keyframes "slideUp"{0%{-webkit-transform:translateY(6.25em);transform:translateY(6.25em);}100%{-webkit-transform:translateY(0);transform:translateY(0);}}.entry-header{padding:14px 14px 24px 104px;position:relative;border-bottom:1px solid #ddd}.entry-title{font-weight:400;margin:0.4em 0;line-height:1.2em}.date{position:absolute;top:24px;left:24px}.date a{color:#757575;text-decoration:none;display:block;width:56px;font-weight:bold;text-align:center}.hyphen{display:none}.date-year::after{content:'/'}.date-day{display:inline-block;width:40px;height:40px;line-height:40px;color:#fff;font-size:20px;font-weight:bold;text-shadow:none;background:#3F51B5;border-radius:50%}.categories{margin-top:10px}.categories a{margin-right:10px}.categories a:before{font-family:"blogicon";content:"\f04A";margin-right:5px;display:inline-block}.categories.no-categories{margin:0}.entry-header-menu{position:absolute;bottom:-10px;right:30px}.entry-header-menu a{display:inline-block;*display:inline;*zoom:1;padding:4px 10px 4px;margin-bottom:0;line-height:18px;color:#454545;background-color:#ffffff;text-align:center;vertical-align:middle;border-top-right-radius:2px;border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-left-radius:0;border-radius:2px;background-clip:padding-box;cursor:pointer;font-size:12px;text-decoration:none;font-weight:bold;border:1px solid rgba(0, 0, 0, 0.2);text-decoration:none !important}.entry-header-menu a:hover{background-color:#f5f5f5;text-decoration:none !important}.entry-content{padding:24px;font-size:16px;line-height:24px}.entry-content p{margin:0 0 1em 0}.entry-content img{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.3em 0 0.8em 0;line-height:1.5;color:#212121}.entry-content h1{font-size:160%}.entry-content h2{font-size:150%}.entry-content h3{font-size:140%}.entry-content h4{font-size:130%}.entry-content h5{font-size:110%}.entry-content h6{font-size:100%}.entry-content table{border-collapse:collapse;border-spacing:0;margin-bottom:1em}.entry-content table img{max-width:none}.entry-content table th,.entry-content table td{border:1px solid #ddd;padding:5px 10px}.entry-content table th{background:#f5f5f5}.entry-content blockquote{border:1px solid #dddddd;margin:0 0 10px;padding:20px}.entry-content blockquote p{margin-top:0;margin-bottom:0}.entry-content pre{white-space:pre;background-color:#fafafa;padding:16px;margin:30px 0;border-radius:2px;box-shadow:0 1px 2px rgba(0, 0, 0, 0.3)}.entry-content pre > code{margin:0;padding:0;white-space:pre;border:0;background:transparent;font-family:'Monaco', 'Consolas', 'Courier New', Courier, monospace, sans-serif}.entry-content code{font-size:90%;margin:0 2px;padding:0 5px;border:1px solid #eaeaea;background-color:#f8f8f8;border-radius:3px;font-family:'Monaco', 'Consolas', 'Courier New', Courier, monospace, sans-serif}span.synConstant{color:#d44950}span.synComment{color:#999}span.synIdentifier{color:#000080}span.synStatement{color:#2f6f9f}span.synType{color:#4f9fcf}span.synPreProc{color:#333;font-weight:bold}.entry-content .hatena-asin-detail li{line-height:1.4}.entry-footer{padding:0 24px 24px}.entry-footer-section{font-size:80%;color:#999999}.entry-footer-section a{color:#999999}.social-buttons,.entry-footer-html{margin:10px 0}.comment-box ul{list-style:none;margin:0 0 15px 0;padding:0;font-size:95%;line-height:1.7}.comment-box li{padding:10px 0 10px 80px;position:relative}.comment-box .read-more-comments{padding-left:0}.comment-box .hatena-id-icon{width:50px !important;height:50px !important;background-clip:padding-box;border-radius:50px;-webkit-border-radius:50px;-moz-border-radius:50px}.comment-box .comment-user-name a{display:block;word-wrap:break-word}.comment-box li:nth-child(odd) .comment-user-name{position:absolute;top:10px;left:0;width:70px}.comment-box li:after{content:".";display:block;height:0;font-size:0;clear:both;visibility:hidden}.comment-user-name{margin:0 0 10px 0;font-weight:bold}.comment-content{font-size:90%;word-wrap:break-word;margin:0 0 10px 0;position:relative;min-height:40px;padding:10px;font-size:14px;background-color:#f1f0f0;border-radius:1.3em;max-width:100%;min-width:50%;color:#212121;display:inline-block}.comment-content p{margin:0}.comment-box li:nth-child(even) .comment-user-name{position:absolute;top:10px;right:0;width:70px;text-align:right}.comment-box li:nth-child(even){padding:10px 80px 10px 0}.comment-box li:nth-child(even) .comment-content{float:right}.comment-box li:nth-child(odd) .comment-content:after{top:1.3em;left:-10px;border-top:5px solid transparent;border-right:10px solid #f1f0f0;border-bottom:5px solid transparent;content:'';position:absolute;display:block}.comment-box li:nth-child(even) .comment-content:after{top:1.3em;right:-10px;border-top:5px solid transparent;border-left:10px solid #f1f0f0;border-bottom:5px solid transparent;content:'';position:absolute;display:block}.comment-box li .comment-delete-button img{position:absolute;top:9px}.comment-box li:nth-child(odd) .comment-delete-button img{left:60px;text-align:right}.comment-box li:nth-child(even) .comment-delete-button img{right:60px;text-align:left}.comment-metadata:before{content:".";display:block;height:0;font-size:0;clear:both;visibility:hidden}.comment-metadata{font-size:80%;color:#999999;margin:0}.comment-box li:nth-child(even) .comment-metadata{text-align:right}.comment-box li:nth-child(even) .comment-metadata:after{content:".";display:block;height:0;font-size:0;clear:both;visibility:hidden}.comment-metadata a{color:#999999}.leave-comment-title{display:inline-block;*display:inline;*zoom:1;padding:4px 10px 4px;margin-bottom:0;line-height:18px;color:#454545;background-color:#ffffff;text-align:center;vertical-align:middle;border-top-right-radius:2px;border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-left-radius:0;border-radius:2px;background-clip:padding-box;cursor:pointer;font-size:12px;text-decoration:none;font-weight:bold;border:1px solid rgba(0, 0, 0, 0.2);text-decoration:none !important;outline:0;outline-offset:0;border:0;border-radius:2px;transition:all 0.15s ease-in-out;-o-transition:all 0.15s ease-in-out;-moz-transition:all 0.15s ease-in-out;-webkit-transition:all 0.15s ease-in-out;-webkit-box-shadow:0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);-moz-box-shadow:0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);box-shadow:0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24)}.leave-comment-title:hover{background-color:#f5f5f5;text-decoration:none !important}#box2{line-height:1.5}.hatena-module{margin-bottom:60px}.hatena-module-title{font-weight:bold;margin-bottom:15px;font-size:120%}.hatena-module-title a{color:#454545;text-decoration:none}.hatena-module-title a:hover{text-decoration:underline}.hatena-module-profile .profile-icon{float:left;margin:0 10px 10px 0;border-top-right-radius:5px;border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-left-radius:0;border-radius:5px;background-clip:padding-box}.hatena-module-profile .id{display:block;font-weight:bold;font-size:110%;margin-bottom:5px}.hatena-module-profile .profile-description{font-size:90%}.hatena-module-profile .profile-description p{margin-top:0}.hatena-urllist{list-style:none;margin:0 0 0 0;padding:0 0 0 0}.hatena-urllist li{padding:8px 0;border-bottom:1px solid #dddddd;line-height:1.5}.hatena-module-search-box .search-form{background-clip:padding-box;width:100%;-moz-box-sizing:border-box;box-sizing:border-box;position:relative}.hatena-module-search-box .search-module-input{padding:5px 20% 5px 0;color:#454545;outline:none;height:20px;width:80%;border-bottom:1px solid #dddddd;border:0;background-image:linear-gradient(#FE7FAB,#FE7FAB),linear-gradient(#dddddd,#dddddd);background-size:0 2px,100% 1px;background-repeat:no-repeat;background-position:center bottom,center calc(100% - 1px);background-color:transparent}.hatena-module-search-box .search-module-input:focus{outline:none;background-image:linear-gradient(#FE7FAB,#FE7FAB),linear-gradient(#dddddd,#dddddd);-webkit-animation:input-highlight .5s forwards;animation:input-highlight .5s forwards;box-shadow:none;background-size:0 2px,100% 1px}@-webkit-keyframes "input-highlight"{0%{background-size:0 2px,100% 1px;}100%{background-size:100% 2px,100% 1px;}}@keyframes "input-highlight"{0%{background-size:0 2px,100% 1px;}100%{background-size:100% 2px,100% 1px;}}.hatena-module-search-box .search-module-button{width:30px;height:30px;background:rgba(48,48,48,.5) url(https://cdn-ak.f.st-hatena.com/images/fotolife/j/jclv/20140722/20140722174438.png) no-repeat center center;border:0 none;outline:none;position:absolute;top:-4px;right:0;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-webkit-transition:.4s ease;-moz-transition:.4s ease;-o-transition:.4s ease;transition:.4s ease;cursor:pointer;text-indent:-9999px}.hatena-module-search-box .search-module-button:hover{background-color:rgba(48,48,48,.3)}.pager{margin:1em 0;display:block;*zoom:1;font-size:16px}.pager a{color:#727272;text-decoration:none}.pager a:hover{opacity:.7}.pager:after{display:block;visibility:hidden;font-size:0;height:0;clear:both;content:"."}.pager .pager-prev{float:left;text-align:center;width:50%}.pager .pager-next{float:right;text-align:center;width:50%}.pager-next .pager-arrow{display:none}.pager-next a:before{font-family:"blogicon";content:"\f006";display:block;font-size:32px;margin-bottom:10px}.pager-prev .pager-arrow{display:none}.pager-prev a:before{font-family:"blogicon";content:"\f005";display:block;font-size:32px;margin-bottom:10px}#footer{padding:30px 0;text-align:center;color:#ffffff;line-height:1.5;font-size:1.2em;background-color:#3F51B5}#footer p{margin:0}#footer a{color:#ffffff;text-decoration:none}#footer address img{border-radius:16px;-webkit-border-radius:16px;-moz-border-radius:16px}.page-about dt{font-size:16px;font-weight:bold;border-bottom:1px solid #dfdfdf;margin-bottom:5px}.page-about dd{margin-left:0;margin-bottom:30px}.page-archive #container #content{margin:24px auto 0}.page-archive .archive-entries{margin-bottom:30px;padding:0 24px;background-color:#fff;box-shadow:0 2px 5px 0 rgba(0, 0, 0, 0.26);border-radius:2px;overflow:hidden;-webkit-animation-duration:0.4s;-webkit-animation-duration:0.4s;-webkit-animation-fill-mode:both;-webkit-animation-fill-mode:both;-webkit-animation-name:slideUp;-webkit-animation-name:slideUp;-webkit-animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.page-archive .archive-entries .archive-entry{position:relative;padding:24px 0;border-bottom:1px solid #ddd}.page-archive .archive-entries .archive-entry:last-child{border-bottom:none}.page-archive .archive-entries .date{position:static}.page-archive .archive-entries .date a{width:auto;text-align:left;letter-spacing:0.2em}.page-archive .archive-entries .entry-title{font-weight:400;margin:0;line-height:1.2em;padding:0;position:relative}.page-archive .archive-entries .categories{padding:0 0 14px;margin-top:5px}.page-archive .archive-entries .entry-description{margin:0 0 1em;line-height:1.7em}.page-archive #blog-title{margin:0;padding:5em 0 5em}.profile-icon{box-shadow:0 1px 4px #999;border-radius:50% !important}.leave-comment-title:before{font-family:"blogicon";content:"\f01D";padding-right:5px}a.entry-see-more{display:inline-block;text-decoration:none;background-color:#43A047;color:#fff;height:36px;line-height:36px;padding:0 20px;-webkit-border-radius:2px;border-radius:2px;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;text-align:center;font-size:14px;letter-spacing:1px;-webkit-box-shadow:0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);-moz-box-shadow:0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);box-shadow:0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-o-transition:all .3s ease-out;-ms-transition:all .3s ease-out;transition:all .3s ease-out}a.entry-see-more:hover{-webkit-box-shadow:0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);-moz-box-shadow:0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);box-shadow:0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15)}a.entry-see-more:after{font-family:"blogicon";content:"\f001";margin-left:6px}.hatena-module-recent-comments .hatena-id-icon{border-radius:16px;-webkit-border-radius:16px;-moz-border-radius:16px}.hatena-follow-button-box{margin:1.7em 0}.hatena-follow-button{color:#fff !important;padding:4px 10px !important;background:#E40A5D !important;border:0 none !important;font-style:normal;font-weight:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;webkit-box-shadow:0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);-moz-box-shadow:0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);box-shadow:0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-o-transition:all .3s ease-out;-ms-transition:all .3s ease-out;transition:all .3s ease-out}.hatena-follow-button:before{color:#fff !important;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:'blogicon';font-weight:normal;padding-right:3px;content:"\f001"}.hatena-follow-button.unsubscribing:hover{color:#fff !important;-webkit-box-shadow:0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);-moz-box-shadow:0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);box-shadow:0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15)}.hatena-follow-button-box .subscription-count{height:26px;line-height:26px;padding:0 8px}.header-image-enable #blog-title #blog-title-inner{background-size:cover;margin:0 0 -5em;padding:5em 0 10em;background-position:center !important}.header-image-enable #blog-title{padding:0}.header-image-enable #blog-title #blog-description{font-weight:400;opacity:1.0}.header-image-only #blog-title #blog-title-inner{background-size:cover;margin:0 0 -5em;padding:5em 0 10em;background-position:center !important}.header-image-only #blog-title{padding:0}@media (-webkit-min-device-pixel-ratio: 2){.hatena-module-search-box .search-module-button{background:transparent url(https://cdn.blog.st-hatena.com/images/theme/search@2x.png) no-repeat right center;background-size:20px 20px}}@media (max-width: 1024px){#box2{width:100%;float:none}#box2-inner{width:100%}.hatena-module{width:100%;float:none}#blog-title-inner{width:100%}#container #content,#top-box .breadcrumb{width:95%}}@media (max-width: 767px){#globalheader-container{position:static}#main{width:100%;float:none}#title{margin:0;font-size:2.8em}.comment-content{min-width:90%}}.header-blog-icon{display:none}@media (max-width: 767px){#blog-title{padding:5em 0 10em}.header-blog-icon{display:block;text-align:center;margin-top:2.5em}.header-blog-icon img{width:60px;height:60px;-webkit-border-top-right-radius:60px;-webkit-border-bottom-right-radius:0;-webkit-border-bottom-left-radius:0;-webkit-border-top-left-radius:0;-moz-border-radius-topright:60px;-moz-border-radius-bottomright:0;-moz-border-radius-bottomleft:0;-moz-border-radius-topleft:0;border-top-right-radius:60px;border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-left-radius:0;-webkit-border-radius:60px;-moz-border-radius:60px;border-radius:60px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;border:4px solid #FAFAFA;background:#FAFAFA}} /* */ /* Responsive: yes */ @media (min-width: 1px) and (max-width: 1050px) { a:hover { opacity: 1; text-decoration:none!important; } } a.comingsoon{ pointer–events: none; } @media screen and ( max–width: 640px ){ .button a{ pointer–events: none; } } @media screen and ( max–width: 640px ){ a:hover:after, a:active:after, a:focus:after{ display: none; } } /* 要点 */ .tamayasuyouten{ position:fixed; width:calc(100vw * 0.9); height:calc((100vw * 0.9) / 1.68674699); top:520px; right:0px; background-image: url("https://cdn-ak.f.st-hatena.com/images/fotolife/b/binbououji/20240615/20240615085322.png"); background-repeat: no-repeat; background-size: calc(100vw * 0.9); calc(415px * 0.9);; z-index:11000; transform: translateX(100%); } @media (min-width: 715px){ .tamayasuyouten{ position:fixed; width:700px; height:415px; top:520px; right:0px; background-image: url("https://cdn-ak.f.st-hatena.com/images/fotolife/b/binbououji/20240615/20240615085322.png"); background-repeat: no-repeat; background-size: 700px; 415px; z-index:11000; transform: translateX(100%); } } .tamayasuyouten.active{ position:fixed; top:520px; right:0px; background-image: url("https://cdn-ak.f.st-hatena.com/images/fotolife/b/binbououji/20240615/20240615085322.png"); background-repeat: no-repeat; transition: all 1s; animation: poyoyon4 0.6s cubic-bezier(0.12, 0, 0.39, 0) 1 forwards; } @keyframes poyoyon4 { 0% { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); opacity: 0; } 50% { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); opacity: 0; } 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); } 20%,100% { opacity: 1; } } .tamayasuyouten.remove{ position:fixed; top:520px; right:0px; background-image: url("https://cdn-ak.f.st-hatena.com/images/fotolife/b/binbououji/20240615/20240615085322.png"); background-repeat: no-repeat; animation: poyoyon5 0.6s; } @keyframes poyoyon5 { 0% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); } 100% { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); opacity: 0; } } .haikei{ position:fixed; top:10px; left:-50%; height:100%; width:160%; background:#fff; opacity:80%; z-index:-100; } .haikei.scroll{ background:#FFF; } .youten{ font-family: 'HuiFontP109', sans-serif; position:fixed; width:100%; top:10px; left:0; z-index:10002; transform: translateX(-100%); } .youten.active{ position:fixed; top:10px; left:0; z-index:10002; transition: all 1s; animation: poyoyon2 0.6s cubic-bezier(0.12, 0, 0.39, 0) 1 forwards; } @keyframes poyoyon2 { 0% { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); opacity: 0; } 50% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); } 65% { -webkit-transform: translateX(-10%); -moz-transform: translateX(-10%); -ms-transform: translateX(-10%); } 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); } 20%,100% { opacity: 1; } } .youten.remove{ position:fixed; top:10px; left:0; z-index:10002; animation: poyoyon3 0.6s; } @keyframes poyoyon3 { 0% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); } 100% { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); opacity: 0; } } .youtenkokuban { font-family: HuiFontP109 !important; position: relative; top:10px; margin: 2em calc(100vw * 0.1); padding: 1em 1em 0.5em 1em; width: 80%; /* ボックス幅 */ max-width:650px; height:500px; font-size:14px; line-height:1.4; overflow-y: auto; background: #006633; /* ボックス背景色 */ color: #fff; /* 文章色 */ border: 5px solid #C0C0C0; /* 枠線 */ border-radius: 2px; /* 角の丸み */ box-shadow: 0 0 5px #333, 0 0 5px #555 inset; } @media (max-width: 600px){ .youtenkokuban{ margin: 2em auto; } } .youtenkokuban span.youtentitle{ position: relative; display: inline-block; margin: 0 2px; -moz-border-radius: 0 0 3px 9px; -webkit-border-radius: 0; border-radius: 0 0 3px 9px; background-image: url(https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uR0fMiHe5PGlDw9P4WwgfqJwLq8F0CyUOBnLRbY4Zn3D_56XIYyltLEwkNT4evsTD5d05vyeECSG2mCLr29GVQcypisx6MRIx4bWj8O2e6VFRZ45WwFCJYV-_2IzCOwqoHcSQfBeNEBK64OBx1osN1e6MDiL233H7Hv6msY1xHY7eG6w=s0-d); background-size: 100%; background-image: -moz-linear-gradient(88.4deg, #DA4033, #DA4033 18%, rgba(0, 0, 0, 0) 25.1%, rgba(0, 0, 0, 0)); background-image: -webkit-linear-gradient(88.4deg, #DA4033, #DA4033 18%, rgba(0, 0, 0, 0) 25.1%, rgba(0, 0, 0, 0)); background-image: linear-gradient(1.6deg, #DA4033, #DA4033 18%, rgba(0, 0, 0, 0) 25.1%, rgba(0, 0, 0, 0)); margin-bottom: 15px; font-size: 18px; font-weight: bold; transform: rotate(-5deg); } .youtenunderline{ -moz-border-radius: 0 0 3px 9px; -webkit-border-radius: 0; border-radius: 0 0 3px 9px; background-image: url(https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uR0fMiHe5PGlDw9P4WwgfqJwLq8F0CyUOBnLRbY4Zn3D_56XIYyltLEwkNT4evsTD5d05vyeECSG2mCLr29GVQcypisx6MRIx4bWj8O2e6VFRZ45WwFCJYV-_2IzCOwqoHcSQfBeNEBK64OBx1osN1e6MDiL233H7Hv6msY1xHY7eG6w=s0-d); background-size: 100%; background-image: -moz-linear-gradient(88.4deg, #DA4033, #DA4033 26%, rgba(0, 0, 0, 0) 25.1%, rgba(0, 0, 0, 0)); background-image: -webkit-linear-gradient(88.4deg, #DA4033, #DA4033 26%, rgba(0, 0, 0, 0) 25.1%, rgba(0, 0, 0, 0)); background-image: linear-gradient(1.6deg, #DA4033, #DA4033 26%, rgba(0, 0, 0, 0) 25.1%, rgba(0, 0, 0, 0)); } .youtenkokuban:before{ content: '𐏐これだけはおさえて帰って！/'; position:absolute; top:45px; left:90px; font-weight:bold; font-size:12px; } .youtenkokuban a{ color:#fff!important; } .youtenkokuban a:hover{ text-decoration: none; } .youtenkokuban li{ border-bottom:0!important; line-height:1.4!important; } .youtenkokuban ol{ padding-inline-start: 32px; margin-block-start: 0em; } .checkmark{ position:relative; display:block; left:10px; } .checkmark:before{ display: block; content: ''; position: relative; top: 1em; left: -1em; width: 8px; height: 3px; border-left: 2px solid #DA4033; border-bottom: 2px solid #DA4033; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } #top-editarea form.search-form{ visibility:hidden; display:inline-block; position:absolute; right:70px; top:45px; width:150px; z-index:10010; } #top-editarea form.search-form.active{ visibility:visible; animation: poyoyon 0.6s cubic-bezier(0.12, 0, 0.39, 0) 1 forwards; } @keyframes poyoyon { 0% { transform: translateY(40px); opacity: 0; } 50% { transform: translateY(0); } 65% { transform: translateY(10px); } 100% { transform: translateY(0); } 20%,100% { opacity: 1; } } @media (max-width: 768px){ #top-editarea input { padding-left: 40px!important; } #top-editarea form.search-form{ right:70px!important; } } #top-editarea input{ color:#000; padding-left: 40px; } #top-editarea button{ position:absolute; margin:auto; padding-top: 2px; top:0px; left:0px; color:#000; background-color: transparent; border-radius:50%; border:1px; } .open-btn1{ position: absolute; background:url("https://cdn-ak.f.st-hatena.com/images/fotolife/b/binbououji/20240511/20240511113423.png") no-repeat 15px center;/*虫眼鏡アイコンを背景に表示*/ background-size: 26px 26px; top:-5px; right:0px; width:50px; height:50px; cursor: pointer;/*カーソルを指マークに*/ transition: all .6s } /*クリック後、JSでボタンに btnactive クラスが付与された後の見た目*/ .open-btn1.btnactive{ background:url("https://cdn-ak.f.st-hatena.com/images/fotolife/b/binbououji/20240511/20240511114254.jpg") no-repeat 15px center;/*閉じるアイコンを背景に表示*/ background-size: 26px 26px; transform: rotateX(360deg); } .open-btn1.btnactive.scroll{ background:url("https://cdn-ak.f.st-hatena.com/images/fotolife/b/binbououji/20240529/20240529094534.jpg") no-repeat 15px center;/*閉じるアイコンを背景に表示*/ background-size: 26px 26px; transform: rotateX(360deg); } @media (min-width: 800px){ .open-btn1{ right:10%; } } .entry{ -webkit-animation-duration: 0s!important; -webkit-animation-fill-mode: none!important; -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } /* ハンバーガーをバツに */ .humbatu{ width: 60px; height: 22px; cursor: pointer; position: relative; } .humbatu span{ display: block; margin: 0; border: none; width: 20px; height: 2px; background: #fff; transform-origin:0% 50%; position: absolute; top: 4px; left: 3px; transition: .3s; } .humbatu span:nth-of-type(2){ top: 11px; } .humbatu span:nth-of-type(3){ top: 18px; } .close span{ left: 3px; } .close span:nth-of-type(1){ transform: rotate(45deg); width: 20px; } .close span:nth-of-type(2){ opacity: 0; } .close span:nth-of-type(3){ top: 18px; transform: rotate(-45deg); width: 20px; } /* もくじデザイン */ ul.table-of-contents{ text-align:left!important; position: relative; } ul.table-of-contents a{ color:#000!important; } ul.table-of-contents a:hover{ color:#3367d6!important; } @media (max-width: 768px){ .entry-content .table-of-contents li{ list-style-type: none!important; padding-left: 5px !important; } .entry-content .table-of-contents li:before { content: ''; width: 6px; height: 6px; display: inline-block; border-radius: 100%; background: #f6bfbc; position: relative; left: -5px; top: -3px; line-height: 0.8; ←段落内の文章の１行の高さ (def:1.2em) margin-top: 0em; ←段落の上余白 (def:0.1em) margin-bottom: 0em; ←段落の下余白 (def:0.1em) } .entry-content{ margin-top:-10px!important; } } @media (max-width: 600px){ .table-of-contents { display:block!important; margin:0 auto!important; padding-top:-20px!important; padding-bottom:200px; } } .entry-content .table-of-contents li{ font-size:14px!important; list-style-type: none!important; padding-left: 5px !important; line-height: 2.5!important; } .entry-content .table-of-contents li:before { content: ''; width: 6px; height: 6px; display: inline-block; border-radius: 100%; background: #f6bfbc; position: relative; left: -5px; top: -3px; } .entry-content{ margin-top:-10px!important; } .entry-content .table-of-contents li:after{ display:none!important; } .table-of-contents { position: relative; top:10px; margin: 0 calc(100vw * 0.1); padding: 1em 1em 2em 1em; width: 80%; /* ボックス幅 */ max-width:650px; height:510px; overflow-y: auto; background: #fff; /* ボックス背景色 */ color: #000; /* 文章色 */ border: solid 3px gray; /* 枠線 */ border-radius: 2px; /* 角の丸み */ } .kokubankeshi{ position: absolute; background:url("https://cdn-ak.f.st-hatena.com/images/fotolife/b/binbououji/20240512/20240512231842.png") no-repeat 10px center; background-size: 50px 50px; top:532px; left:10%; width:60px; height:50px; z-index:10001; } .kokubankeshi2{ position: absolute; background:url("https://cdn-ak.f.st-hatena.com/images/fotolife/b/binbououji/20240512/20240512231842.png") no-repeat 10px center; background-size: 50px 50px; top:530px; left:10%; width:60px; height:50px; z-index:10001; } .scrollBox { --shadow-color-rgb: 160 160 160; --background-color-rgb: 255 255 255; --shadow-size: 50px; --shadow-opacity: 0.7; height: 510px; width: 80%; overflow: auto; } .scrollBox.is-vertical { background: linear-gradient( rgb(var(--background-color-rgb)) 50%, rgb(var(--background-color-rgb) / 1) ), linear-gradient( rgb(var(--background-color-rgb) / 0), rgb(var(--background-color-rgb)) 50% ) 0 100%, radial-gradient( farthest-side at 50% 0, rgb(var(--shadow-color-rgb) / var(--shadow-opacity)), rgb(var(--background-color-rgb) / 0) ), radial-gradient( farthest-side at 50% 100%, rgb(var(--shadow-color-rgb) / var(--shadow-opacity)), rgb(var(--background-color-rgb) / 0) ) 0 100%; background-color: rgb(var(--background-color-rgb)); background-repeat: no-repeat; background-attachment: local, local, scroll, scroll; background-size: 100% calc(var(--shadow-size) * 2), 100% calc(var(--shadow-size) * 2), 100% var(--shadow-size), 100% var(--shadow-size); } /* 目次対策 */ .table-of-contents li{ border: none!important; } ul.table-of-contents { list-style-type: decimal!important; padding-left:29px!important; } ul.table-of-contents ul { list-style-type: none!important; border-top:1px dashed!important; } ul ul ul{ border-bottom:1px dashed!important; } .table-of-contents li:before{ display:none; } .table-of-contents li:after{ border: none!important; } ul.table-of-contents ul a:before { font-family: "Font Awesome 5 Free"; content: "\f3bf";/*アイコンの種類*/ position: absolute; left : 2.1em;/*左端からのアイコンまでの距離*/ color: #f6bfbc;/*アイコン色*/ transform:rotate(90deg); } .sp-table-of-contents ul ul ul :before { font-family: "Font Awesome 5 Free"; content: "\f3bf";/*アイコンの種類*/ position: absolute; font-size:12px; left : 3.6em;/*左端からのアイコンまでの距離*/ color: #eddad5;/*アイコン色*/ transform:rotate(90deg); } .entry-thumb img { border-radius: 15px!important; } .entry-content .acodion-content p{ margin: 0; padding: 10px; } /*== 開閉式もくじ ==*/ .contents_box { padding: 10px; width:fit-content; font-size:1.5rem;/*タイトルのフォントサイズ*/ color:#000;/*タイトルの文字色*/ text-align:center; text-indent: -20px; background-color:#f8edeb;/*背景色*/ border:5px double #ffffff; box-shadow:0 0 0 6px #f8edeb; } .contents_box:before { content: "\f022"; font-family: "Font Awesome 5 Free"; font-style: normal; padding-right: 10px; } /*== 開閉文字装飾 ==*/ .contents_box label { padding: 5px 100px 5px 200px; position:absolute; margin-left: -169px; margin-top: -4px; color:#000; /*文字色*/ font-size:1rem;/*フォントサイズ*/ cursor:pointer; } /*開く*/ .contents_box label:before{ content: "\f0d7"; font-family: "Font Awesome 5 Free"; font-size: 24px; } /*閉じる*/ .contents_box input:checked ~ label:before { content: "\f0d7"; font-family: "Font Awesome 5 Free"; display:inline-block; padding-left: 20px; transform:rotate(180deg); } .contents_box input{display:none;} /*最初は非表示*/ .contents_box .hidden_show {height:0;padding:0;overflow:hidden;transition:0.8s;} /*クリックでopen*/ .contents_box input:checked ~ .hidden_show {padding: 10px 0;height:auto;} .table__container { width: 100%; overflow: scroll; } .fixed01{ position: sticky; left: 0; background-color: #fef4f4; &:before{ content: ""; position: absolute; top: -1px; left: -1px; width: 100%; height: 100%; border: 1px solid #ccc; } } .fixed02{ position: sticky; left: 0; background-color: #f7fcfe; &:before{ content: ""; position: absolute; top: -1px; left: -1px; width: 100%; height: 100%; border: 1px solid #ccc; } } .scroll-hint-text { margin-top: 0px!important; } .balloon5 { width: 100%; margin: 2.5em 0; overflow: hidden; } .balloon5 .faceicon { float: left; margin-right: -90px; width: 60px; position:relative; top: 8px; } .balloon5 .faceicon img{ width: 100%; height: auto; border-radius: 50%; } .balloon5 .chatting { width: fit-content; } .says { display: inline-block; position: relative; margin: 5px 0 0 105px; padding: 10px 5px; border-radius: 12px; background: #f6bfbc; margin-left: 77px; } .says:after { content: ""; display: inline-block; position: absolute; top: 18px; left: -24px; border: 12px solid transparent; border-right: 12px solid #f6bfbc; } .says p { margin: 0; padding: 0; font-weight:bold; font-size: 15px; color:#fff; } .TextTyping span { display: none; } /*文字列後ろの線の設定*/ .TextTyping::after { content: "|"; animation: typinganime .8s ease infinite; } @keyframes typinganime{ from{opacity:0} to{opacity:1} } .entry-content a{ color:#3367d6; } /*フローティングバナー*/ .floating-bnr.bnr01 { position: fixed!important; bottom: 20px; left:50%; margin-left:-150px; width: 300px; height: auto; z-index: 9990; } .floating-bnr a:hover { opacity: 0.7; transition: 0.2s; } .floating-bnr2.bnr02 { position: fixed!important; bottom: 20px; left:50%; margin-left:-150px; width: 300px; height: auto; z-index: 9990; } .floating-bnr2 a:hover { opacity: 0.7; transition: 0.2s; } /*閉じるボタン*/ .bnr_close1 { background-color: #f8f8f8; border: none; border-radius: 60px; color: #777; cursor: pointer; font-weight: bold; padding: 5px 12px; position: absolute; left: 7px; top: 55%; z-index: 9991; } .bnr_close2 { background-color: #f8f8f8; border: none; border-radius: 60px; color: #777; cursor: pointer; font-weight: bold; padding: 5px 12px; position: absolute; left: 7px; top: 55%; z-index: 9991; } .fa-xmark:before { content: "\f00d"; font-family: "Font Awesome 5 Free"; font-style: normal; } /* solid015 */ .button_solid015 { text-align: center; } .button_solid015 p { margin-bottom: 5px; font-weight: 600; color: #ff6347; letter-spacing: 0.04rem; display: inline-block; position: relative; } .button_solid015 p:before, .button_solid015 p:after { display: inline-block; position: absolute; top: 45%; width: 20px; height: 3px; border-radius: 5px; background-color: #ff6347; content: ""; } .button_solid015 p:before { left: -30px; -webkit-transform: rotate( 50deg ); transform: rotate( 50deg ); } .button_solid015 p:after { right: -30px; -webkit-transform: rotate( -50deg ); transform: rotate( -50deg ); } .button_solid015 a { position: relative; display: flex; justify-content: space-around; align-items: center; margin: 0 auto; max-width: 90vw; padding: 10px 50px; color: #FFF; transition: 0.3s ease-in-out; font-weight: 600; background: #ff6347; filter: drop-shadow(0px 2px 4px #ccc); border-radius: 50px; } .button_solid015 a:hover { box-shadow: 0 15px 30px -5px rgb(0 0 0 / 15%), 0 0 5px rgb(0 0 0 / 10%); } .button_solid015 a:after { position: absolute; top: 50%; right: 20px; transition: 0.2s ease-in-out; content: "\f0da"; font-family: "Font Awesome 5 Free"; font-weight: 900; transform: translateY(-54%); } :root{ scroll-padding: 40px; } /* 吹き出し */ .hapitasu { position: relative; top:-10px; display: inline-block!important; margin: 1em 0; padding: 4px 5px; min-width: 120px; max-width: 100%; color: #fff; font-size: 15px; background: #f6bfbc; border: solid 3px #f6bfbc; border-radius: 15px; box-sizing: border-box; } .hapitasu::before { content: "➡"; position:absolute; top:-20px; left:30px; font-size:30px!important; font-weight: bold; color:#f6bfbc; transform:rotate(-90deg); } .hapitasu::after { content: "この紹介リンクから新規登録し「登録から7日間限定スタンプラリー」をクリアするともれなく200円分のポイントゲット！さらに2024年9月30日までに利用した広告が、10月31日までに1,000pt分以上ポイント確定すると、もれなく1,300ptゲットできる特別キャンペーン実施中！"; position:relative; font-size:15px!important; border-bottom: dotted 2px #fff; font-weight: bold; color:#fff; } .hapitasu p { margin: 0; padding: 0; } .pointincome { position: relative; top:-10px; display: inline-block!important; margin: 1em 0; padding: 4px 5px; min-width: 120px; max-width: 100%; color: #fff; font-size: 15px; background: #f6bfbc; border: solid 3px #f6bfbc; border-radius: 15px; box-sizing: border-box; } .pointincome::before { content: "➡"; position:absolute; top:-20px; left:30px; font-size:30px!important; font-weight: bold; color:#f6bfbc; transform:rotate(-90deg); } .pointincome::after { content: "この紹介リンクから新規登録するだけで即時200円分のポイントゲット！さらに登録から3か月後の月末までに初めてポイント交換すると追加で100円分のポイントボーナスあり！さらにさらに9月末までに10,000pt以上広告を利用すると最大2,000円GET!！さらにさらにさらに現在、新規登録から30日間限定で、簡単なミッションをこなすだけで追加520円分のボーナスポイントが貰えるキャンペーン開催中！"; position:relative; font-size:15px!important; border-bottom: dotted 2px #fff; font-weight: bold; color:#fff; } .pointincome p { margin: 0; padding: 0; } .ecnavi { position: relative; top:-10px; display: inline-block!important; margin: 1em 0; padding: 4px 5px; min-width: 120px; max-width: 100%; color: #fff; font-size: 15px; background: #f6bfbc; border: solid 3px #f6bfbc; border-radius: 15px; box-sizing: border-box; } .ecnavi::before { content: "➡"; position:absolute; top:-20px; left:30px; font-size:30px!important; font-weight: bold; color:#f6bfbc; transform:rotate(-90deg); } .ecnavi::after { content: "このリンクから新規登録し90日以内に本人認証するだけでまずは1,500ptゲット！さらに2024年9月30日までに新規入会し、10月31日までにポイント交換をするだけでもれなく1,000円分のAmazonギフト券がプレゼントされる超ビッグなイベント開催中です！チャンス！"; position:relative; font-size:15px!important; border-bottom: dotted 2px #fff; font-weight: bold; color:#fff; } .ecnavi p { margin: 0; padding: 0; } .amehuri { position: relative; top:-10px; display: inline-block!important; margin: 1em 0; padding: 4px 5px; min-width: 120px; max-width: 100%; color: #fff; font-size: 15px; background: #f6bfbc; border: solid 3px #f6bfbc; border-radius: 15px; box-sizing: border-box; } .amehuri::before { content: "➡"; position:absolute; top:-20px; left:30px; font-size:30px!important; font-weight: bold; color:#f6bfbc; transform:rotate(-90deg); } .amehuri::after { content: "このリンクから新規登録＆電話認証＆プロフィール登録するだけでまずは200円分のポイントゲット！さらに登録翌々月末までに5千円分のポイントを貯めると追加で2千円分のボーナスポイントが、1万円分のポイントを貯めると追加で5,000円分のボーナスポイントが貰えます！これはやらなきゃ損！"; position:relative; font-size:15px!important; border-bottom: dotted 2px #fff; font-weight: bold; color:#fff; } .amehuri p { margin: 0; padding: 0; } .warau { position: relative; top:-10px; display: inline-block!important; margin: 1em 0; padding: 4px 5px; min-width: 120px; max-width: 100%; color: #fff; font-size: 15px; background: #f6bfbc; border: solid 3px #f6bfbc; border-radius: 15px; box-sizing: border-box; } .warau::before { content: "➡"; position:absolute; top:-20px; left:30px; font-size:30px!important; font-weight: bold; color:#f6bfbc; transform:rotate(-90deg); } .warau::after { content: "このリンクから新規登録後、表示される『WELCOM CAMPAIGN』のミッションをクリアすればもれなく500円が貰える！"; position:relative; font-size:15px!important; border-bottom: dotted 2px #fff; font-weight: bold; color:#fff; } .warau p { margin: 0; padding: 0; } .pointtown { position: relative; top:-10px; display: inline-block!important; margin: 1em 0; padding: 4px 5px; min-width: 120px; max-width: 100%; color: #fff; font-size: 15px; background: #f6bfbc; border: solid 3px #f6bfbc; border-radius: 15px; box-sizing: border-box; } .pointtown::before { content: "➡"; position:absolute; top:-20px; left:30px; font-size:30px!important; font-weight: bold; color:#f6bfbc; transform:rotate(-90deg); } .pointtown::after { content: "さらにこのリンクから新規登録後、翌々月末までに5,000pt獲得すればもれなく追加2,000円分のボーナスが貰える！"; position:relative; font-size:15px!important; border-bottom: dotted 2px #fff; font-weight: bold; color:#fff; } .pointtown p { margin: 0; padding: 0; } .moppy { position: relative; top:-10px; display: inline-block!important; margin: 1em 0; padding: 4px 5px; min-width: 120px; max-width: 100%; color: #fff; font-size: 15px; background: #f6bfbc; border: solid 3px #f6bfbc; border-radius: 15px; box-sizing: border-box; } .moppy::before { content: "➡"; position:absolute; top:-20px; left:30px; font-size:30px!important; font-weight: bold; color:#f6bfbc; transform:rotate(-90deg); } .moppy::after { content: "さらにこのリンクから新規登録後、翌々月末までに5,000pt獲得すればもれなく追加2,000円分のボーナスが貰える！"; position:relative; font-size:15px!important; border-bottom: dotted 2px #fff; font-weight: bold; color:#fff; } .moppy p { margin: 0; padding: 0; } /* テーブルの角を丸く */ .radius-table{ border-radius: 10px!important; border-spacing: 0; border: none; border-left: 1px solid #999!important; border-top: 1px solid #999!important; } .radius-table tr>*{ padding: 5px 10px!important; border: none; border-right: 1px solid #999!important; border-bottom: 1px solid #999!important; } .radius-table tr:first-child>*:first-child{ border-radius: 10px 0 0 0!important; } .radius-table tr:first-child>*:last-child{ border-radius: 0 10px 0 0!important; } .radius-table tr:last-child>*:first-child{ border-radius: 0 0 0 10px!important; } .radius-table tr:last-child>*:last-child{ border-radius: 0 0 10px 0!important; } /* リスト調節 */ li{ border-bottom: dashed 1px silver; } ul li:before { font-family: "Font Awesome 5 Free"; content: "\f14a"; position: absolute; left : -1em; /*左端からのアイコンまでの距離*/ top:-2px; color:#f6bfbc; /*アイコン色*/ font-weight: 900; font-size:21px; z-index:1; } ul li:last-of-type { border-bottom: none; } ol li:last-of-type { border-bottom: none; } .kakomi2 li{ padding-bottom:6px; margin-bottom:6px; } .box30 li{ padding-bottom:6px; margin-bottom:6px; padding-bottom: 3px; margin-right:28px; } .box30 li:last-child{ padding-bottom:28px!important; } dd { padding: 20px 0; margin-left:10px; } /* 文字の上に点 */ .dots { background-image: radial-gradient(circle at center, #343434 20%, transparent 20%); /* 点の色とサイズ調整 */ background-position: top right; /* 点の位置 */ background-repeat: repeat-x; /* 横方向に繰り返し */ background-size: 1em 0.3em; /* 点の間隔とサイズ調整 */ padding-top: .3em; /* 縦方向の位置調整 */ } .dots2 { background-image: radial-gradient(circle at center, #fff 20%, transparent 20%); /* 点の色とサイズ調整 */ background-position: top right; /* 点の位置 */ background-repeat: no-repeat; /* 横方向に繰り返し */ background-size: 1em 0.3em; /* 点の間隔とサイズ調整 */ padding-top: .3em; /* 縦方向の位置調整 */ } /* 滑らかスクロール */ html { scroll-behavior: smooth;} /* タイトル下の文字 */ #blog-description{ opacity: 1!important; } /* タイトル文字 */ #title a { font-size: 24px!important; } /* 記事下の日付と読者になる */ .entry-footer-section { display: none; } /* メニュー */ #menu { position: relative; width: 100%; padding-left: 0px; background: #f6bfbc;/*グローバルメニュー背景色*/ box-shadow:-1px 3px 3px 0px #b8b8b8; -moz-box-shadow:-1px 3px 3px 0px #b8b8b8; -webkit-box-shadow:-1px 3px 3px 0px #b8b8b8; margin-bottom:-5px!important; } .menu-inner{ width: 100%; margin: 0 auto; } #menu li { list-style-type: none; display:inline-block; float: left; text-align: center; width: 50%; border-bottom:0px; border-top:dashed 1px #fff; } #menu li.top1.scroll,#menu li.top2.scroll,#menu li.top3.scroll,#menu li.top4.scroll,#menu li.top5.scroll,#menu li.top6.scroll{ height: 35px; width: 50%; list-style-type: none; background: #ff6347;/*リスト文字の背景色*/ margin: 0 auto; text-align: center;/*リストの文字の位置*/ } #menu li a { padding:10px; display: block; color: #ffffff;/*グローバルメニュー文字色*/ font-size: 80%; font-weight: bold; } #menu li:hover a { color: #7b7c7d; background: #ffffff; transition: all .5s; } @media (min-width: 769px){ #top-editarea{ height: initial; background: #f6bfbc;/*MENU背景色*/ text-align: right;/*MENUの文字の位置*/ width: 100%; position: fixed; top: 0px; z-index: 20000; transition: 2s; } #top-editarea.scroll{ height: initial; background: #ff6347;/*MENU背景色*/ text-align: right;/*MENUの文字の位置*/ width: 100%; position: fixed; top: 0px; z-index: 20000; transition: 2s; } .menu-toggle{ color: #ffffff;/*MENUの文字色*/ display: inline-block; padding: 5px; margin: 3px; } #menu { width: 100%; display: none; height: initial; padding: 0; margin: 0; } .menu-inner{ width: 100%; height: initial; position: relative; margin: 0; z-index:10001; } #menu li{ height: 35px; width: 50%; list-style-type: none; background: #f6bfbc;/*リスト文字の背景色*/ margin: 0 auto; text-align: center;/*リストの文字の位置*/ } #menu li.top1.scroll,#menu li.top2.scroll,#menu li.top3.scroll,#menu li.top4.scroll,#menu li.top5.scroll,#menu li.top6.scroll,{ height: 35px; width: 50%; list-style-type: none; background: #ff6347;/*リスト文字の背景色*/ margin: 0 auto; text-align: center;/*リストの文字の位置*/ } #menu li a { height: initial; color: #ffffff;/*リスト文字色*/ display: block; } #menu li:hover a{ color: initial; background: initial; } #blog-title{ margin-top: 30px; } .menu-toggle{ position:relative; left:-327px; text-align:right; padding:3px 0px 3px 2px; border-radius:3px; color:#fff; z-index:10001; } .menu-toggle:after { content: ''; position: absolute; bottom: 0px; left: 0; width: 100%; height: 2px; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); background-color: #fff; -webkit-transition: all .3s ease; transition: all .3s ease; } .menu-toggle:hover:after { -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); } .menu-toggle2{ color: #ffffff;/*MENUの文字色*/ text-decoration: none!important; display: inline-block; position:relative; left:-300px; padding: 5px 0; margin: 3px; } .menu-toggle2:after { content: ''; position: absolute; bottom: 2px; left: 0; width: 100%; height: 2px; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); background-color: #fff; -webkit-transition: all .3s ease; transition: all .3s ease; } .menu-toggle2:hover:after { -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); } .menu-toggle3{ color: #ffffff;/*MENUの文字色*/ text-decoration: none!important; display: inline-block; position:relative; left:210px; padding: 5px 0; margin: 3px; } .menu-toggle3:after { content: ''; position: absolute; bottom: 2px; left: 0; width: 100%; height: 2px; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); background-color: #fff; -webkit-transition: all .3s ease; transition: all .3s ease; } .menu-toggle3:hover:after { -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); } .menu-toggle4{ color: #ffffff;/*MENUの文字色*/ text-decoration: none!important; display: inline-block; } .menu-toggle5{ color: #ffffff;/*MENUの文字色*/ text-decoration: none!important; display: inline-block; padding: 5px 0; margin: 3px; display: inline-block; position:relative; } .menuindex:link{ color: #fff!important; text-decoration: none!important; } .menuindex:visited{ color: #fff!important; text-decoration: none!important; } .menuindex:hover{ color: #fff!important; text-decoration: none!important; } .menuindex:active{ color: #fff!important; text-decoration: none!important; } } /*タブレット*/ @media screen and (max-width:768px){ #top-editarea{ height: initial; background: #f6bfbc;/*MENU背景色*/ text-align: right;/*MENUの文字の位置*/ width: 100%; position: fixed; top: 0px; z-index: 20000; transition: 2s; } #top-editarea.scroll{ height: initial; background: #ff6347;/*MENU背景色*/ text-align: right;/*MENUの文字の位置*/ width: 100%; position: fixed; top: 0px; z-index: 20000; transition: 2s; } .menu-toggle2{ color: #ffffff;/*MENUの文字色*/ text-decoration: none!important; display: inline-block; padding: 5px 0; margin: 3px; } .menu-toggle3{ color: #ffffff;/*MENUの文字色*/ text-decoration: none!important; display: inline-block; padding: 5px 0; margin: 3px; } .menu-toggle4{ color: #ffffff;/*MENUの文字色*/ text-decoration: none!important; display: inline-block; } .menu-toggle5{ color: #ffffff;/*MENUの文字色*/ text-decoration: none!important; display: inline-block; padding: 5px 0; margin: 3px; } .menuindex:link{ color: #fff!important; text-decoration: none!important; } .menuindex:visited{ color: #fff!important; text-decoration: none!important; } .menuindex:hover{ color: #fff!important; text-decoration: none!important; } .menuindex:active{ color: #fff!important; text-decoration: none!important; } .menu-toggle{ color: #ffffff;/*MENUの文字色*/ display: inline-block; padding: 5px; margin: 3px; } #menu { width: 100%; display: none; height: initial; padding: 0; margin: 0; } .menu-inner{ width: 100%; height: initial; position: relative; margin: 0; z-index: 10001; } #menu li{ height: 35px; width: 50%; list-style-type: none; background: #f6bfbc;/*リスト文字の背景色*/ margin: 0 auto; text-align: center;/*リストの文字の位置*/ } #menu li.top1.scroll,#menu li.top2.scroll,#menu li.top3.scroll,#menu li.top4.scroll,#menu li.top5.scroll,#menu li.top6.scroll{ height: 35px; width: 50%; list-style-type: none; background: #ff6347;/*リスト文字の背景色*/ margin: 0 auto; text-align: center;/*リストの文字の位置*/ } #menu li a { height: initial; color: #ffffff;/*リスト文字色*/ display: block; } #menu li:hover a{ color: initial; background: initial; } #blog-title{ margin-top: 30px; } #main{ width:100%!important; } } .ssPoweredBy{ display:none!important; } .entry-content { font-size:17px; } .accent-box { border:1px dashed #444444; background:#E8E8E8; padding:1.5em; } span.author.vcard{ display:none; } body { color:#000; font-weight:normal!important; font-family: "游ゴシック体", "Yu Gothic", YuGothic, "メイリオ", "Meiryo","ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", sans-serif!important; } /* タブボックス */ .tab-wrap { background: White; position:relative; border:2px solid #f6bfbc; border-radius: 5px; display: flex; flex-wrap: wrap; overflow: hidden; padding: 0 0 20px; width:93%; } .tab-label { color: #fff; background: #f6bfbc; cursor: pointer; flex: 1; font-weight: bold; order: -1; padding: 12px 24px; position: relative; text-align: center; transition: cubic-bezier(0.4, 0, 0.2, 1) .2s; user-select: none; white-space: nowrap; -webkit-tap-highlight-color: transparent; } .tab-label:hover { background: #f8edeb; } .tab-switch:checked + .tab-label { color: #000; background: #fff; } .tab-label::after { background: #fff; bottom: 0; content: ''; display: block; height: 3px; left: 0; opacity: 0; pointer-events: none; position: absolute; transform: translateX(100%); transition: cubic-bezier(0.4, 0, 0.2, 1) .2s 80ms; width: 100%; z-index: 1; } .tab-switch:checked ~ .tab-label::after { transform: translateX(-100%); } .tab-switch:checked + .tab-label::after { opacity: 1; transform: translateX(0); } .tab-content { height:0; opacity:0; padding: 0 20px; pointer-events:none; transform: translateX(-30%); transition: transform .3s 80ms, opacity .3s 80ms; width: 100%; } .tab-switch:checked ~ .tab-content { transform: translateX(30%); } .tab-switch:checked + .tab-label + .tab-content { height: auto; opacity: 1; order: 1; pointer-events:auto; transform: translateX(0); } .tab-wrap::after { content: ''; height: 20px; order: -1; width: 100%; } .tab-switch { display: none; } /* 囲みデザイン */ .kakomi1 { position: relative; margin: 2em 0; padding: 25px 10px 7px; border: solid 2px #f6bfbc; } .kakomi1 .box-title { position: absolute; display: inline-block; top: -2px; left: -2px; padding: 0 9px; height: 25px; line-height: 25px; font-size: 17px; background: #f6bfbc; color: #ffffff; font-weight: bold; } .kakomi1 p { margin: 0; padding: 0; } .kakomi2{ border:5px double #ffffff; background-color:#f8edeb; box-shadow:0 0 0 6px #f8edeb; padding:16px; margin:20px; Width:fit-content; } .kakomititle{ font-weight:bold; } .kakomi2 p { padding-top: 20px; } .box26 { position: relative; margin: 2em 0; padding: 0.5em 1em; border: solid 3px #f6bfbc; border-radius: 8px; } .box26 .box-title { position: absolute; display: inline-block; top: -13px; left: 10px; padding: 0 9px; line-height: 1; font-size: 19px; background: #FFF; color: #f6bfbc; font-weight: bold; } .box26 p { margin: 0; padding: 0; } .box30 { margin: 2em 0; background: #f1f1f1; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22); border-radius:10px; } .box30 .box-title { font-size: 1em; background: #f1f1f1; padding: 10px 20px; color: #f6ad49; font-weight: bold; border-radius:10px; } .box30 p { padding: 10px 10px 20px; margin: 0; } /*「この記事を書いた人」ボックス全体*/ .profile-box { margin:3em 1em 2em; padding:10px 10px 15px; position:relative; border:2px solid #f6bfbc; /*枠線の太さ 線種 色*/ font-size:14px; } .profile-box:before , .profile-box:after { clear:both; content:""; display:block; } @media (max-width: 600px){ .profile-box{ width:122%!important; } } /*「この記事を書いた人」のタイトル*/ .profile-box{ left:-100px; border-top-right-radius: 7px; border-bottom-right-radius: 7px; border-bottom-left-radius: 7px; } .profile-box .profile-box_title { position:absolute; top:-30px; left:-2px; padding:0 10px; background:#f6bfbc; /*背景色*/ color:#fff; /*文字の色*/ font-weight:bold; border:2px solid #f6bfbc; /*枠線の太さ 線種 色*/ display:inline-block; } .profile-box_title:before { font-family:"fontawesome"; content:"\f007"; font-weight:900; margin-right:7px; } /*アイコン画像*/ .profile-box img { display:block; width:80px; height:80px; float:left; margin:0 20px 7px 10px; /*画像周りの余白*/ } /*名前(ニックネーム)*/ .profile-box .profile-box_name { display:block; margin:0 0 7px; padding-top:10px; padding-bottom:10px; font-size:19px; /*文字サイズ*/ font-weight:bolder; } /*プロフィール*/ .profile-box p { margin:0; padding:0; font-size:13px; line-height:21px; /*行間*/ } @media (min-width: 601px){ .profile-box p{ font-size:14px; } } /* 行間調節 */ li { line-height: 1.9!important; } .otoku { line-height: 1.9!important; } blockquote p { line-height:1.9!important; } /* トップの読者になるボタン */ .top-subscribe { display: none; } .blog-controlls { display: none; } /* エントリーサムネイル */ .entry-thumb { border:none; border-radius:15px; } /* フォント指定 */ .f-helvetica{ font-family: Helvetica!important; } .f-lato{ font-family: 'Lato', sans-serif!important; } .f-concertone{ font-family: 'Concert One', cursive!important; } /* カテゴリ */ .entry-categories{ position: relative; display:inline-block; top:23.5em; left:-5em; transform: rotate(-4deg); background-color: #f6bfbc; border-left:2px dotted rgba(0,0,0,.1); border-right:2px dotted rgba(0,0,0,.1); box-shadow:0 0 5px rgba(0,0,0,0.2); padding: 0em 1em; color: #fcee21; } .categories a{color: #fff!important;} /* 写真の角を取る */ .entry-content img{ border-radius: 15px; } /* ソーシャルボタン */ .pagetop { color: #fff; background: #696969; padding: 7px 7px; border-radius: 3px; } .pagetop:before { content: "\f148"; font-family: "fontawesome"; } .pagetop:hover{background:#292929} #wrap{ width:960px; margin:10px auto; } #social_box{ background:rgba(246,191,188,0.6); padding:15px 10px 5px; margin-right:-50px; text-align:center; position:fixed; right:50px; bottom:-10px; list-style-type:none; border-radius: 5px; } #main{ width:660px; float:left; } #side{ width:300px; float:left; } /* 新着記事画像の角を丸める */ .urllist-image,.recent-entries-image { border-radius: 25px!important; } /* グローバルヘッダー */ #globalheader-container { display: none; } /* ヘッダー（ブログ名があるエリア） */ #blog-title { background-color: #f6bfbc ; margin: 0 auto; padding: 20px; } @media screen and (min-width:769px){ #title{ margin-top:13px; } #title a { z-index:9; color: #ffffff; } } @media screen and (max-width:768px){ #title a { z-index:9; color: #ffffff; } } .page-archive #blog-title{ padding:20px!important; } /* タイトルをホバーした際のカラー */ #title a:after { background-color: #FFFFFF; } /* フッター */ #footer { background-color: #ffc1c1; color: #ffffff; } /* 日付 */ .date-day { background: #ff6347; color: #fff; } /* 続きを読む */ a.entry-see-more { background-color: #f6bfbc; color: #fff !important; } /* 読者になる */ .hatena-follow-button { color: #fff !important; background: #f6bfbc!important; } /* ---------ふい字------------ */ @font-face { font-family: 'HuiFontP109'; src: url('http://hatenablog.com/fonts/public/HuiFont/HuiFontP109.eot'); src: url('http://hatenablog.com/fonts/public/HuiFont/HuiFontP109.eot?#iefix') format('embedded-opentype'), url('http://hatenablog.com/fonts/public/HuiFont/HuiFontP109.woff') format('woff'), url('http://hatenablog.com/fonts/public/HuiFont/HuiFontP109.ttf') format('truetype'), url('http://hatenablog.com/fonts/public/HuiFont/HuiFontP109.svg#HuiFontP109') format('svg'); font-weight: normal; font-style: normal; } @font-face{ font-family:HuiFontP109; src:url(https://cdn.blog.st-hatena.com/fonts/public/HuiFont/HuiFontP109.eot?version=ce43ede181607532cbc098ac629b52); src: url(https://cdn.blog.st-hatena.com/fonts/public/HuiFont/HuiFontP109.eot?version=ce43ede181607532cbc098ac629b52) format('embedded-opentype'), url(https://cdn.blog.st-hatena.com/fonts/public/HuiFont/HuiFontP109.woff?version=ce43ede181607532cbc098ac629b52) format('woff'), url(https://cdn.blog.st-hatena.com/fonts/public/HuiFont/HuiFontP109.ttf?version=ce43ede181607532cbc098ac629b52) format('truetype'), url(https://cdn.blog.st-hatena.com/fonts/public/HuiFont/HuiFontP109.svg?version=ce43ede181607532cbc098ac629b52) format('svg'); } .huifont{font-family:HuiFontP109} /* ---------タイトルをふい字に------------ */ #title a { font-family: 'HuiFontP109', sans-serif; letter-spacing: 5px; font-size:28px; padding-bottom:0px; } #title{ line-height:80%!important; } #blog-title{ margin-top:0px; } @media(max-width:768px){ #blog-title{ margin-top:30px!important; } } /* ---------ブログの説明をふい字に------------ */ #blog-description { font-family: 'HuiFontP109', sans-serif; font-weight:bold; font-size: 0.9em!important; background-image: url(https://cdn-ak.f.st-hatena.com/images/fotolife/b/binbououji/20240323/20240323094958.png); background-position: center; background-repeat: no-repeat; } #blog-description:before{ display: block; content: '稼ぎ散らすより節約したら幸せだったじんせい'; padding-top:14px; } #blog-description:after{ display: block; content: '稼がずに人生上がれるたった一つの方法'; padding-bottom:14px; } @media screen and (min-width:769px){ #blog-description { font-family: 'HuiFontP109', sans-serif; letter-spacing: 2px; font-size: 1em!important; display:relative; position:relative!important; z-index:9!important; } } @media screen and (max-width:768px){ #blog-description { font-family: 'HuiFontP109', sans-serif; letter-spacing: 2px; font-size: 1em!important; display:relative; position:relative!important; z-index:9!important; } } /* 2カラムレイアウト */ #content { width: 1080px!important; } #main { width: 720px; float: left; } #box2 { width: 300px; padding: 24px; float: right; margin-top: 0; margin-bottom: 60px; background-color: #fff; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); border-radius: 2px; -webkit-animation-duration: 0.4s; -webkit-animation-duration: 0.4s; -webkit-animation-fill-mode: both; -webkit-animation-fill-mode: both; -webkit-animation-name: slideRight; -webkit-animation-name: slideRight; -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); position: relative; } @-webkit-keyframes slideRight { 0% { -webkit-transform: translateX(6.25em); transform: translateX(6.25em); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes slideRight { 0% { -webkit-transform: translateX(6.25em); transform: translateX(6.25em); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } #box2-inner { width: auto; } .hatena-module { text-align: left; padding-right: 0; width: 300px; float: left; } @media (max-width: 1040px) { #content, #main, #box2, .hatena-module { float: none; } #box2 { padding-left: 10px!important; background-color: transparent; box-shadow: none; border-radius: initial; -webkit-animation-duration: initial; -webkit-animation-duration: initial; -webkit-animation-fill-mode: none; -webkit-animation-fill-mode: none; -webkit-animation-name: initial; -webkit-animation-name: initial; -webkit-animation-timing-function: initial; -webkit-animation-timing-function: initial; } } @media (max-width: 770px) { #content, #main{ width:100%!important; } } /* 記事　行間設定 */ div.entry-content p { line-height: 1.7em; ←段落内の文章の１行の高さ (def:1.2em) margin-top: 0.1em; ←段落の上余白 (def:0.1em) margin-bottom: 0.5em; ←段落の下余白 (def:0.1em) } .entry-content {padding: 12px!important} .entry-content p {margin: 7px} .entry-content ul li { list-style-type: none; position: relative; } .entry-content ul li:after { display: block; content: ''; position: absolute; top: .6em; left: -1em; width: 8px; height: 3px; border-left: 2px solid #f7594d; border-bottom: 2px solid #f7594d; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } /* 蛍光ペン */ .boldline { font-weight: bold; } .akabold{ font-weight: bold; color:#ff6347; } strong { background: linear-gradient(transparent 55%, #ffea00 0%); font-weight: bold; font-size: 100%; } /* 日付と記事タイトル色変更 */ div.date a{ color: #333333; } h1{ font-weight:bold!important; } h1.entry-title a{ color: #333333; font-size:21px; } /* 見出しスタイル */ .entry-footer p{ font-size:17px; line-height: 1.9; } .entry-content h3{ display: inline-block; position:relative; width: 100.5%; left: -13px; font-weight:bold; background:#ff6347; color:#fff; padding: 5px 15px 5px 20px; } .entry-footer-html h3{ display: inline-block; position:relative; width: 101.5%; left: -13px; font-weight:bold; background:#ff6347; color:#fff; padding: 5px 10px 5px 20px; } .entry-content h4 { position: relative; padding: 1rem 1rem 4px; border-bottom: 4px solid #f6bfbc; } .entry-content h4:before { position: absolute; bottom: -4px; left: 0; width: 33%; height: 4px; content: ''; background: #ff6347; } .entry-content h5{ position:relative; display: inline-block; margin-top: 7px; margin-bottom: 7px; padding-left:20px; font-size: 100%; font-weight: bold; } h5:before{ content:''; border-radius:30px; -webkit-border-radius:30px; -moz-border-radius:30px; height:; width:6px; display:block; position:absolute; height: -webkit-calc(100% - 0.6em); height: calc(100% - 0.6em); top:4.5px; left:7px; background:#ff6347; } /*--------------------------------- アンカーの位置ずらし --------------------------------*/ .anchor { display: block; padding-top: 70px; margin-top: -70px; } /* インスタフォローボタン */ .insta_btnfl { display: inline-block!important; text-align: center!important;/*中央揃え*/ color: #2e6ca5!important;/*文字色*/ font-size: 14px!important;/*文字サイズ*/ text-decoration: none!important;/*下線消す*/ line-height: 1em; } .insta_btnfl:hover {/*ホバー時*/ color:#668ad8!important;/*文字色*/ transition: .5s!important;/*ゆっくり変化*/ } .insta_btnfl .insta{/*アイコンの背景*/ position: relative;/*相対配置*/ display: inline-block; width: 50px;/*幅*/ height: 50px;/*高さ*/ background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat; background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;/*グラデーション①*/ overflow: hidden;/*はみ出た部分を隠す*/ border-radius: 13px;/*角丸に*/ } .insta_btnfl div { display: table; height: 50px; width: 50px; border: 3px solid black; } .tamayasu { display: table-cell; vertical-align: middle; } .insta_btnfl .insta{ box-shadow: 0px 1px 2px rgba(25, 25, 25, 0.50); transition: .4s; } .insta_btnfl .insta:hover{ box-shadow: 0px 2px 3px rgba(25, 25, 25, 0.50); } .insta_btnfl .insta:before{/*グラデーションを重ねるため*/ content: ''; position: absolute;/*絶対配置*/ top: 23px;/*ずらす*/ left: -18px;/*ずらす*/ width: 60px;/*グラデーションカバーの幅*/ height: 60px;/*グラデーションカバーの高さ*/ background: -webkit-radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%); background: radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);/*グラデーション②*/ } .insta_btnfl .fa-instagram {/*アイコン*/ color: #FFF;/*白に*/ position: relative;/*z-indexを使うため*/ z-index: 2;/*グラデーションより前に*/ font-size: 35px;/*アイコンサイズ*/ line-height: 50px;/*高さと合わせる*/ } /* アコーディオンボックス */ .accordion { margin: 2em 0; } .accordion__summary { box-sizing: border-box; background-color: #f6bfbc; border: 3px double #ffffff; border-top-left-radius: 7px; border-top-right-radius: 7px; border-bottom-left-radius: 7px; border-bottom-right-radius: 7px; position: relative; color:#ffffff!important; display: inline; padding: 10px 38px 10px 10px; font-size: 0.7em; cursor: pointer; } .accordion__summary::after { content: "+"; color:#ffffff!important; font-size: 0.7em; /* 記号のサイズ */ position: absolute; right: 10px; top: 50%; transform: translateY(-50%); } .accordion input:checked ~ .accordion__summary::after { content: "−"; color:#ffffff!important; } .accordion input { display: none!important; } .accordion__detail { display: none; background: #fff; padding: 4px 10px; margin: 10px 0; } .accordion input:checked ~ .accordion__detail { display: block; } .accordion__text { margin: 0; font-size: 0.7em; } /*--------------------------------- FAQボックス --------------------------------*/ .acbox{ width: auto; font-size:0px; /* ラベルと開く部分を分離する時は数値を入れる */ margin:0 10px; /* ボックス全体の位置調整 */ } .acbox label{ width: auto; font-size: 16px; /* ラベルの文字サイズ */ font-weight: bold; text-align: left; background: #ff6347; /* ラベルの背景色 */ display: inline-block; position:relative; padding: 10px 30px 10px 50px; border-radius: 4px; /* ラベルの角の丸み */ cursor: pointer; color: #fff; } .acbox input{ display: none; } .acbox label:before{ font-family: "Font Awesome 5 Free"; content: "\f059"; position: absolute; margin-right: 10px; margin-top: -14px; top: 50%; left: 10px; height: -webkit-calc(100% - 1em); height: calc(100% - 1em); color:#fff; /*アイコン色*/ font-weight: 900; font-size:30px; z-index:1; } .acbox label:after{ color: #fff; content:"+"; /* ラベルのアイコン */ position: absolute; top: 50%; right: 12px; margin-top: -13px; } .acbox input:checked ~ label::after { content:"-"; /* ラベルをクリックした後のアイコン */ top: 50%; font-size: 26px; } .acbox div{ position: relative; top: 10px; height: 0px; overflow: hidden; opacity: 0; transition: 0.15s; /* 開閉スピードの設定 */ } .acbox input:checked ~ div{ height: auto; padding: 18px; /* 開いた部分の枠内の余白 */ border-radius: 4px; background: #F3F4F5; /* 開いた部分の背景色 */ opacity: 1; } .acbox input:checked ~ label { background: #f6bfbc; /* クリック後のラベルの背景色 */ } .acbox-under{ font-size: 15px; /* 開いた部分の文字サイズ */ color: #000; /* 開いた部分の文字色 */ } /*--------------------------------- 開閉式テキスト（赤いボックス） --------------------------------*/ .openbox{ width: auto; font-size:0px; /* ラベルと開く部分を分離する時は数値を入れる */ margin:0 10px; /* ボックス全体の位置調整 */ } .openbox label{ width: auto; font-size: 16px; /* ラベルの文字サイズ */ font-weight: bold; text-align: center; background: #ff6347; /* ラベルの背景色 */ display: inline-block; position:relative; padding: 10px 30px 10px 40px; border-radius: 4px; /* ラベルの角の丸み */ cursor: pointer; color: #fff; } .openbox input{ display: none; } .openbox label:before{ font-family: "Font Awesome 5 Free"; content: "\f303"; position: absolute; margin-right: 10px; left: 10px; top: 50%; margin-top: -18px; height: -webkit-calc(100% - 1em); height: calc(100% - 1em); color:#fff; /*アイコン色*/ font-weight: 900; font-size:20px; z-index:1; } .openbox label:after{ color: #fff; content:"+"; /* ラベルのアイコン */ position: absolute; right: 12px; top: 50%; margin-top: -16px; } .openbox input:checked ~ label::after { content:"-"; /* ラベルをクリックした後のアイコン */ top: 30%; font-size: 26px; } .openbox div{ position: relative; top: 10px; height: 0px; overflow: hidden; opacity: 0; transition: 0.15s; /* 開閉スピードの設定 */ } .openbox input:checked ~ div{ height: auto; padding: 18px; /* 開いた部分の枠内の余白 */ border-radius: 4px; background: #ffffff; /* 開いた部分の背景色 */ opacity: 1; } .openbox input:checked ~ label { background: #f6bfbc; /* クリック後のラベルの背景色 */ } .openbox-under{ font-size: 15px; /* 開いた部分の文字サイズ */ color: #000; /* 開いた部分の文字色 */ } /*--------------------------------- 開閉式テキスト（赤いボックス位置調節バージョン） --------------------------------*/ .openbox2{ width: auto; font-size:0px; /* ラベルと開く部分を分離する時は数値を入れる */ margin:0 10px; /* ボックス全体の位置調整 */ } .openbox2 label{ width: auto; font-size: 16px; /* ラベルの文字サイズ */ font-weight: bold; text-align: center; background: #ff6347; /* ラベルの背景色 */ display: inline-block; position:relative; padding: 10px 30px 10px 40px; border-radius: 4px; /* ラベルの角の丸み */ cursor: pointer; color: #fff; } .openbox2 input{ display: none; } .openbox2 label:before{ font-family: "Font Awesome 5 Free"; content: "\f303"; position: absolute; margin-right: 10px; left: 10px; top: 50%; margin-top: -14px; height: -webkit-calc(100% - 1em); height: calc(100% - 1em); color:#fff; /*アイコン色*/ font-weight: 900; font-size:20px; z-index:1; } .openbox2 label:after{ color: #fff; content:"+"; /* ラベルのアイコン */ position: absolute; right: 12px; top: 50%; margin-top: -14px; } .openbox2 input:checked ~ label::after { content:"-"; /* ラベルをクリックした後のアイコン */ top: 50%; margin-top: -14px; font-size: 26px; } .openbox2 div{ position: relative; top: 10px; height: 0px; overflow: hidden; opacity: 0; transition: 0.15s; /* 開閉スピードの設定 */ } .openbox2 input:checked ~ div{ height: auto; padding: 18px; /* 開いた部分の枠内の余白 */ border-radius: 5px; background: #f1f1f1; /* 開いた部分の背景色 */ width: fit-content; opacity: 1; } .openbox2 input:checked ~ label { background: #f6bfbc; /* クリック後のラベルの背景色 */ } .openbox-under{ font-size: 15px; /* 開いた部分の文字サイズ */ color: #000; /* 開いた部分の文字色 */ } /*--------------------------------- 開閉式テキスト（簡素） --------------------------------*/ .morebox{ width: auto; font-size:0px; /* ラベルと開く部分を分離する時は数値を入れる */ margin:0 10px; /* ボックス全体の位置調整 */ } .morebox label{ width: auto; font-size: 16px; /* ラベルの文字サイズ */ font-weight: bold; text-align: center; background: #f5f5f5; /* ラベルの背景色 */ display: inline-block; position:relative; padding: 10px 30px 10px 40px; border:1px; border-radius: 4px; /* ラベルの角の丸み */ cursor: pointer; color: #000; } .morebox input{ display: none; } .morebox label:before{ font-family: "Font Awesome 5 Free"; content: "\f05a"; position: absolute; margin-right: 10px; left: 10px; top: 50%; margin-top: -18px; height: -webkit-calc(100% - 1em); height: calc(100% - 1em); color:#000; /*アイコン色*/ font-weight: 900; font-size:20px; z-index:1; } .morebox label:after{ color: #000; font-family: "Font Awesome 5 Free"; content: "\f0d7"; /* ラベルのアイコン */ position: absolute; right: 12px; top: 50%; margin-top: -16px; } .morebox input:checked ~ label::after { font-family: "Font Awesome 5 Free"; content: "\f0d7"; /* ラベルをクリックした後のアイコン */ transform:rotate(180deg); top: 50%; font-size: 16px; } .morebox div{ position: relative; top: 10px; height: 0px; overflow: hidden; opacity: 0; transition: 0.15s; /* 開閉スピードの設定 */ } .morebox input:checked ~ div{ height: auto; padding: 18px; /* 開いた部分の枠内の余白 */ border-radius: 4px; background: #f5f5f5; /* 開いた部分の背景色 */ opacity: 1; } .morebox input:checked ~ label { background: #dcdcdc; /* クリック後のラベルの背景色 */ } .morebox-under{ font-size: 15px; /* 開いた部分の文字サイズ */ color: #000; /* 開いた部分の文字色 */ text-align: left; } /*--------------------------------- 開閉式テキスト（簡素位置調節バージョン） --------------------------------*/ .morebox2{ width: auto; font-size:0px; /* ラベルと開く部分を分離する時は数値を入れる */ margin:0 10px; /* ボックス全体の位置調整 */ } .morebox2 label{ width: auto; font-size: 16px; /* ラベルの文字サイズ */ font-weight: bold; text-align: center; background: #f5f5f5; /* ラベルの背景色 */ display: inline-block; position:relative; padding: 10px 30px 10px 40px; border:1px; border-radius: 4px; /* ラベルの角の丸み */ cursor: pointer; color: #000; } .morebox2 input{ display: none; } .morebox2 label:before{ font-family: "Font Awesome 5 Free"; content: "\f05a"; position: absolute; margin-right: 10px; left: 10px; top: 50%; margin-top: -13px; height: -webkit-calc(100% - 1em); height: calc(100% - 1em); color:#000; /*アイコン色*/ font-weight: 900; font-size:20px; z-index:1; } .morebox2 label:after{ color: #000; font-family: "Font Awesome 5 Free"; content: "\f0d7"; /* ラベルのアイコン */ position: absolute; right: 12px; top: 50%; margin-top: -12px; } .morebox2 input:checked ~ label::after { font-family: "Font Awesome 5 Free"; content: "\f0d7"; /* ラベルをクリックした後のアイコン */ transform:rotate(180deg); top: 50%; font-size: 16px; } .morebox2 div{ position: relative; top: 10px; height: 0px; overflow: hidden; opacity: 0; transition: 0.15s; /* 開閉スピードの設定 */ } .morebox2 input:checked ~ div{ height: auto; padding: 18px; /* 開いた部分の枠内の余白 */ border-radius: 4px; background: #f5f5f5; /* 開いた部分の背景色 */ opacity: 1; } .morebox2 input:checked ~ label { background: #dcdcdc; /* クリック後のラベルの背景色 */ } .morebox-under{ font-size: 15px; /* 開いた部分の文字サイズ */ color: #000; /* 開いた部分の文字色 */ text-align: left; } /* フローチャート */ .flow_design05 { display: flex; align-items: center; position: relative; left: -10px; } .flow05 { padding-left: 0; } .flow05 > li { list-style-type: none; position: relative; padding-left: 50px; } .flow05 > li:not(:last-child) { padding-bottom: 10px; } .flow05 > li .icon05 { width: 2.3em; height: 2.2em; line-height: 2em; text-align: center; border-radius: 100vh; display: inline-block; background: #f6bfbc; color: #fff; position: absolute; padding-top: 4px; left: 0; top: -5px; } .flow05 > li:not(:last-child)::before { content: ''; background: #c3c3c3; width: 4px; height: 100%; position: absolute; top: calc(50% - -30px); left: 19px; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); z-index: 0; } .flow05 dt { font-weight: bold; font-size: 19px; top: -6px; } /* 動くフォローボタン */ .twitterfollow { animation: 5s bounce ease infinite; animation-name: bounce; animation-duration: 5s; animation-timing-function: ease; animation-delay: initial; animation-iteration-count: infinite; animation-direction: initial; animation-fill-mode: initial; animation-play-state: initial; } @keyframes bounce { 50% { transform: translateY(-40px); } } @keyframes pulsate { 0% { opacity: 0; } 50% { transform: scale(0.5); opacity: 0.2; } 100% { opacity: 0; } } .socialbtn { float: left; margin-right: 15px; font-size: 32px; } .follow-btn{ width: 100%; text-align: left; margin-bottom: 10px; } .follow-btn a { display: inline-block; width: 60px; height: 60px; line-height: 32px; font-size: 14px; text-align: center; text-decoration: none; border-radius: 50%; } .follow-btn .hatena { color: #343434; border: 2px solid #343434; background: #ffffff; } .follow-btn .twitter { color: #e1306c; border: 2px solid #e1306c; background: #ffffff; } .follow-btn .feedly { color: #70CA3B; border: 2px solid #70CA3B; background: #ffffff; } .follow-btn .hatena:hover { color: #ffffff; background: #343434;