/* */
@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}}
/* */
/* */
body{background:#e9ecf4;}
/* */
/* 2カラムレイアウト */
#container #content {
width: 1210px;
}
#main {
width: 850px;
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: 1024px) {
#container #content {
width: 95%;
}
#main, #box2, .hatena-module {
width: 100%;
float: none;
}
#box2 {
padding: 0;
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;
}
}
/*大見出し*/
h3{
color: #ffffff !important;
font-size:150%; /* フォントの大きさ */
font-weight:bold; /* 太字 */
line-height: 1.5em; /* 行間 */
margin: 50px 0 10px 0; /* 上下の余白 */
padding:10px 10px 10px 10px; /* テキストとボーダーの間の余白*/
background:#303f9f;/*背景色*/
}
/*中見出し*/
h4{
color: #141414; /* テキストの色 */
font-size:150%; /* フォントの大きさ */
font-weight:bold; /* 太字 */
line-height: 1.5em; /* 行間 */
border-bottom:1px solid #86c036; /* 下線 */
border-left:10px solid #303f9f; /* 左側の線 */
margin: 50px 0 10px 0; /* 上下の余白 */
padding:10px 10px 10px 10px; /* テキストとボーダーの間の余白*/
}
/*小見出し*/
h5{
color: #141414; /* 文字の色 */
font-size:120%; /* フォントの大きさ */
font-weight:bold; /* 太字 */
line-height: 1.5em; /* 行間 */
border-bottom:1px solid #86c036; /* 下線 */
margin: 50px 0 10px 0; /* 上下の余白 */
padding:10px 10px 1px 10px; /* テキストとボーダーの間の余白*/
}
/* 目次のタイトル */
ul.table-of-contents:before {
content: "■目次■";
font-size: 110%;
/*font-weight: bold;*/
color: #303f9f;
/*font-family: "メイリオ", Meiryo, san-serif;*/
}
/* 目次の背景と大見出し */
ul.table-of-contents {
background: #eeeeee;
max-width: 720px;
margin: 0px 0px 40px 0px;
padding: 10px 10px;
list-style-type: decimal;
list-style-position: inside;
font-size: 16px;
line-height: 1.7;
font-weight: bold;
}
/* 中見出し */
ul.table-of-contents ul {
font-size: 95%;
list-style-type: disc;
font-weight: normal;
line-height: 1.7;
margin-left: 0px;
}
/*--------------------------------------
ヨメレバ・カエレバここから
--------------------------------------*/
.booklink-box, .kaerebalink-box, .tomarebalink-box{
width:90%;
margin:20px auto;
padding:20px;
border:double #d2d7e6;
overflow: hidden;
font-size:small;
border-radius:2px;
}
.booklink-image, .kaerebalink-image, .tomarebalink-image{
width: 150px;
margin:0 15px 20px 0;
float:left;
}
.booklink-image img, .kaerebalink-image img, .tomarebalink-image img{
display:block;
margin:0 auto;
text-align:center;
}
.booklink-info, .kaerebalink-info, .tomarebalink-info{
display:block;
margin:0 auto;
text-align:left;
line-height:120%;
overflow: hidden;
}
.booklink-name, .kaerebalink-name, .tomarebalink-name{
font-size:16px;
margin-bottom:24px;
line-height:1.5;
}
.booklink-powered-date, .kaerebalink-powered-date, .tomarebalink-powered-date{
font-family: verdana;
font-size:8pt;
margin-top:5px;
line-height:120%;
}
.booklink-detail, .kaerebalink-detail, .tomarebalink-detail{
margin-bottom:5px;
}
.booklink-link2, .kaerebalink-link1, .tomarebalink-link1{
margin-top:10px;
}
.shoplinkamazon, .shoplinkrakuten, .shoplinkkindle, .shoplinkyahoo, .shoplinkseven, .shoplinkbk1, .shoplinkkakakucom, .shoplinkehon, .shoplinkrakukobo, .shoplinkjtb, .shoplinkjalan, .shoplinkknt, .shoplinkikyu, .shoplinkrurubu{
float:left;
width:21%;
margin:15px 1% 0 auto;
padding:5px 0px;
height:20px;
overflow:hidden;
background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
background-color:#ffffff;
border-radius:6px;
border:1px solid #dcdcdc;
display:inline-block;
text-align:center;
}
.shoplinkamazon:hover, .shoplinkrakuten:hover, .shoplinkkindle:hover, .shoplinkyahoo:hover, .shoplinkseven:hover, .shoplinkbk1:hover, .shoplinkehon:hover, .shoplinkrakukobo:hover, .shoplinkjtb:hover, .shoplinkjalan:hover, .shoplinkknt:hover, .shoplinkikyu:hover, .shoplinkrurubu:hover{
background:linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
background-color:#f6f6f6;
}
.shoplinkamazon:active, .shoplinkrakuten:active, .shoplinkkindle:active, .shoplinkyahoo:active, .shoplinkseven:active, .shoplinkbk1:active, .shoplinkehon:active, shoplinkrakukobo:active, .shoplinkjtb:active, .shoplinkjalan:active, .shoplinkknt:active, .shoplinkikyu:active, .shoplinkrurubu:active{
position:relative;
top:1px;
}
.shoplinkamazon a, .shoplinkrakuten a, .shoplinkyahoo a, .shoplinkkindle a, .shoplinkkakakucom a, .shoplinkseven a, .shoplinkbk1 a, .shoplinkehon a, .shoplinkrakukobo a, .shoplinkjtb a, .shoplinkjalan a, .shoplinkknt a, .shoplinkikyu a, .shoplinkyahoo a, .shoplinkrurubu a{
display:block;
cursor:pointer;
text-decoration:none;
font-weight:800;
text-shadow:1px 1px 1px #dcdcdc;
font-size:12px;
}
.shoplinkamazon a{
color:#FF9901;
}
.shoplinkrakuten a{
color:#c20004;
}
.shoplinkrakukobo a {
color:#c20004;
}
.shoplinkkindle a{
color:#FF9901;
}
.shoplinkyahoo a{
font-size:10px;
color:#7b0099;
}
.shoplinkseven a{
color:#016B43;
}
.shoplinkbk1 a{
color:#0085CD;
}
.shoplinkehon a{
color:#112981;
}
/* jtb */
.shoplinkjtb a {
color: #990000; /* 文字の色 */
}
/* jalan */
.shoplinkjalan a {
color: #FF9901; /* 文字の色 */
}
/* KNT */
.shoplinkknt a {
color: #0b499d;
}
/* 一休 */
.shoplinkikyu a {
color: #bf9500;
}
/* るるぶ */
.shoplinkrurubu a {
color: #000066;
}
.booklink-footer{
clear:left;
}
/*--------------------------------------
ヨメレバ・カエレバここまで
--------------------------------------*/
/*--------------------------------------
フキダシデザイン ここから
--------------------------------------*/
/*****ここから会話のCSS*****/
.talk-wrap{
display: block;
clear: both;
margin:0 auto 3px auto;
}
.talk-wrap p{
margin:0;
}
.left-icon{
width: 100px;
height: 100px;
border-radius: 50%;
-webkit-border-radius: 50%;
background: no-repeat;
background-size: 180%;
background-position: center;
float:left;
display:inline-block;
box-shadow: 1px 1px 5px #aaa; /*左のアイコンの影の設定*/
border: 3px solid #fff; /*左のアイコンの枠の設定*/
margin-bottom: 10px;
}
.talk-left{
float:right;
position: relative;
background: #fff; /*左の会話の背景色*/
border: 2px solid #666;
padding: 3%;
border-radius: 10px;
width: 77%;
margin-top:10px;
box-shadow: 1px 1px 5px #aaa; /*左の会話の影の設定*/
margin-bottom: 10px;
}
.talk-left:before {
content: "";
display: inline-block;
border: 10px solid transparent;
border-right-color: #666;
position: absolute;
left: -20px;
top: 25%;
margin-top: -9px;
}
.talk-left:after {
content: "";
display: inline-block;
border: 9px solid transparent;
border-right-color: #fff;
position: absolute;
left: -16px;
top: 25%;
margin-top: -8px;
}
.right-icon{
width: 100px;
height: 100px;
border-radius: 50%;
-webkit-border-radius:50%;
background: no-repeat;
background-size: 180%;
background-position: center;
float:right;
display:inline-block;
box-shadow: 1px 1px 5px #aaa; /*右のアイコンの影の設定*/
border: 3px solid #FFF; /*右のアイコンの枠の設定*/
margin-bottom: 10px;
}
.talk-right{
float:left;
position: relative;
background: #fff; /*右の会話の背景色*/
border: 2px solid #666;
padding: 3%;
border-radius: 10px;
width: 77%;
margin-top:10px;
box-shadow: 1px 1px 5px #aaa; /*右の会話の影*/
margin-bottom:10px;
}
.talk-right:before {
content: "";
display: inline-block;
border: 10px solid transparent;
border-left-color: #666;
position: absolute;
right: -20px;
top: 25%;
margin-top: -9px;
}
.talk-right:after {
content: "";
display: inline-block;
border: 9px solid transparent;
border-left-color: #fff;
position: absolute;
right: -16px;
top: 25%;
margin-top: -8px;
}
.talk-end{
clear:both;
}
/*****レスポンシブ設定*****/
@media screen and (max-width: 480px){
.left-icon{
width: 80px;
height: 80px;
}
.talk-left{
width: 65%;
}
.right-icon{
width: 80px;
height: 80px;
}
.talk-right{
width: 65%;
}
}
@media screen and (max-width: 380px){
.left-icon{
width: 60px;
height: 60px;
}
.talk-left{
width: 65%;
}
.right-icon{
width: 60px;
height: 60px;
}
.talk-right{
width: 65%;
}
}
/*--------------------------------------
フキダシデザイン ここまで
--------------------------------------*/
/*--------------------------------------
カテゴリタグ化ここから
--------------------------------------*/
.hatena-module {
clear: both;
overflow: hidden;
}
.hatena-module-category .hatena-module-body ul.hatena-urllist li {
float: left;
}
/* category css */
.hatena-module-category .hatena-module-body ul.hatena-urllist li {
float: left;
list-style-type: none;
margin: 0 2px 2px;
padding: 7px;
background-color: #5f6ccf;
text-decoration: none;
border-radius: 10px 10px 10px 10px
}
.hatena-module-category .hatena-module-body ul.hatena-urllist li a{
color: #fff;
}
/*--------------------------------------
カテゴリタグ化ここまで
--------------------------------------*/
/*--------------------------------------
ボックスデザインここから
--------------------------------------*/
.box8 {
padding: 0.5em 1em;
margin: 2em 0;
color: #232323;
background: #fff8e8;
border-left: solid 10px #ffc06e;
}
.box8 p {
margin: 0;
padding: 0;
}
.box13 {
padding: 0.5em 1em;
margin: 2em 0;
color: #FFF;
background: #6eb7ff;
border-bottom: solid 6px #3f87ce;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
border-radius: 9px;
}
.box13 p {
margin: 0;
padding: 0;
}
.box22{
padding: 0.5em 1em;
margin: 1em 0;
background: #f4f4f4;
border-left: solid 6px #5bb7ae;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.33);
}
.box22 p {
margin: 0;
padding: 0;
}
.box30 {
margin: 2em 0;
background: #f1f1f1;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}
.box30 .box-title {
font-size: 1.2em;
background: #5fc2f5;
padding: 4px;
text-align: center;
color: #FFF;
font-weight: bold;
letter-spacing: 0.05em;
}
.box30 p {
padding: 15px 20px;
margin: 0;
}
/*--------------------------------------
ボックスデザインここまで
--------------------------------------*/
/*--------------------------------------
箇条書きデザインここから
--------------------------------------*/
ul.sample1{
/*font: 14px/1.6 'arial narrow', sans-serif;*/
padding: 10px 10px 20px;
color: #191970;
background: #ecf3fa;
border: solid 2px #adcce8;
border-radius: 5px;
list-style: none;
}
ul.sample1 li{
position: relative;
line-height: 30px;
padding-left: 15px;
/*font-weight: bold;*/
border-bottom: dashed 1px #448ccb;
list-style-type: none;
}
ul.sample1 li:before{
position: relative;
top: 0px;
left: -15px;
display: inline-block;
width: 12px;
height: 12px;
content: '';
border-radius: 100%;
background: #FA5858;
}
ul.sample1Ex{
/*font: 14px/1.6 'arial narrow', sans-serif;*/
padding: 5px 5px 10px;
color: #191970;
background: #ecf3fa;
/*border: solid 2px #adcce8;*/
/*border-radius: 5px;*/
list-style: none;
}
ul.sample1Ex li{
position: relative;
/*line-height: 30px;*/
padding-left: 15px;
/*font-weight: bold;*/
/*border-bottom: dashed 1px #448ccb;*/
border-bottom: none;
list-style-type: none;
}
ul.sample1Ex li:before{
position: relative;
top: 0px;
left: -15px;
display: inline-block;
width: 8px;
height: 8px;
content: '';
border-radius: 100%;
background: #5FB404;
}
/*--------------------------------------
箇条書きデザインここまで
--------------------------------------*/
/*--------------------------------------
グローバルナビゲーションここから
--------------------------------------*/
#menu{
width: 100%;
margin: 10px auto;
background: #303f9f;/*７*/
}
#menu-inner{
width: 1000px;/*１*/
height: 40px;/*２*/
margin: 0 auto;
background: #303f9f;/*８*/
}
#menu-btn{display: none;}
#menu-content{
padding-left: 0;
margin: 0;
width: 100%;
height: 100%;
list-style-type: none;
}
#menu-content > li{
position: relative;
float: left;
height: 100%;
text-align: center;
}
#menu-content > li > a{
position: relative;
display: block;
height: 100%;
padding-left: 15px;/*３*/
padding-right: 15px;/*３*/
line-height: 40px;/*２*/
background: #303f9f;/*９*/
color: #fff;/*10*/
font-size: 100%;
text-decoration: none;
z-index: 2;
}
#menu-content > li > a:hover{
background: #000080;/*11*/
color: #fff;/*12*/
}
#menu-content > li > a > .blogicon-chevron-down{margin-right: 5px;}
/*２階層目*/
#menu-content > li > ul.second-content{
visibility: hidden;
position: absolute;
top: 0;
margin: 0;
padding-left: 0;
list-style-type: none;
z-index: -1;
}
#menu-content > li:hover > ul.second-content{
visibility: visible;
top: 40px;/*2*/
z-index: 1;
transition: all .3s;
}
#menu-content > li > ul.second-content > li{
text-align: center;
width: 200px;/*４*/
height: 40px;/*５*/
}
#menu-content > li > ul.second-content > li > a{
display: block;
line-height: 40px;/*５*/
background: #5f6ccf;/*13*/
color: #fff;/*14*/
font-size: 100%;
text-decoration: none;
}
#menu-content > li > ul.second-content > li > a:hover{
background: #000080;/*15*/
color: #fff;/*16*/
}
/*******トグルメニュ*********/
@media screen and (max-width:960px){/*19*/
#menu-inner{
width: 100%;
height: auto;
}
#btn-content{text-align: right;}/*20*/
#menu-btn{
display: inline-block;
padding: 8px 15px;
margin: 5px;
cursor: pointer;
background: #000080;/*17*/
color: #fff;/*18*/
font-size: 100%;
}
#menu-content{
display: none;
width: 100%;
}
#menu-content > li{
width: 100%;
height: 40px;/*６*/
float: none;
}
#menu-content > li > a{
width: 100%;
line-height: 40px;/*６*/
padding: 0;
text-decoration: none;
}
/*２階層目*/
#menu-content > li:hover > ul.second-content{display: none;}
#menu-content > li > a > .blogicon-chevron-down{display: none;}
/*--------------------------------------
グローバルナビゲーションここまで
--------------------------------------*/
/* Responsive: yes */