/* <system section="theme" selected="alpha2"> */
body{margin:0;padding:0;color:#454545;background-color:#f3f3f3;font-family:Trebuchet MS,Arial,Helvetica,ヒラギノ角ゴ Pro W3,Hiragino Kaku Gothic Pro,メイリオ,Meiryo,ＭＳ Ｐゴシック,MS PGothic,sans-serif;-moz-transition:all 1s ease;-webkit-transition:all 1s ease}a{color:#256fba;text-decoration:none;-webkit-transition:.3s ease;-webkit-transition-property:opacity,border,color,background;-moz-transition:.3s ease;-moz-transition-property:opacity,border,color,background;-o-transition:.3s ease;-o-transition-property:opacity,border,color,background;transition:.3s ease;transition-property:opacity,border,color,background}a:hover{text-decoration:underline}a:visited{color:#7d9ab7}pre{padding:10px;background:#fafafa;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;box-shadow:inset 0 0 5px #0003}#globalheader-container{position:sticky;top:0;background-color:#f3f3f3}#container{text-align:center;margin:20px auto;width:960px;padding:0 0 30px;background:#fff}#blog-title{text-align:center;margin:0 0 50px}#blog-title h1{color:#454545;text-shadow:0 1px 0 white;font-size:34px;padding:50px 30px 5px;font-weight:700;margin:0}#blog-title h1 a{color:#454545}#blog-title h1 a:hover{color:#256fba;text-decoration:none}header h2{color:#454545;text-shadow:0 1px 0 white;font-size:13px;font-weight:700;margin:0}#top-box,#top-editarea,#bottom-editarea{text-align:left;font-size:13px}#top-editarea,#bottom-editarea{margin:0 30px}#navigation{width:1000px;margin:0 auto}#navigation ul{list-style:none;padding:0;margin:0}#navigation ul li{font-size:90%;float:left;line-height:2}#navigation ul li a{color:#454545;text-decoration:none;padding:8px 15px;border-right:1px solid #ddd}#navigation ul li a:hover{color:#fff;font-weight:700;background:-moz-linear-gradient(top,#3888da 0%,#256fba 100%)}#navigation ul:after{content:".";display:block;clear:both;height:0;visibility:hidden}#top-box{margin:20px 130px}#content{padding:0 30px 30px}#content-inner{text-align:left}#wrapper{width:720px;float:left}#main{float:right;width:560px;padding:0 30px;min-height:100px}#main:after{content:".";display:block;height:0;font-size:0;clear:both;visibility:hidden}#box1{float:right;width:100px;-moz-transition:all 1s ease;-webkit-transition:all 1s ease}#box2{width:180px;float:left;-moz-transition:all 1s ease;-webkit-transition:all 1s ease;text-align:left}#bottom-box{clear:both}#content:after{content:" ";display:block;height:0;visibility:hidden;clear:both}section.day{margin-bottom:40px}.entry{margin:0 0 48px;position:relative;width:100%;-moz-transition:all 1s ease;-webkit-transition:all 1s ease;word-wrap:break-word}.entry-header{padding:0;margin:0;position:relative}.date{width:100px;border-right:1px solid #DDD;margin:0;font-size:16px;position:absolute;left:-130px;top:0;font-weight:400;height:35px;line-height:35px}.date a{color:#454545}.date-last-updated{color:#454545;font-size:13px;margin-left:-3px;display:inline-block}.entry-title{text-align:left;margin:0;font-size:120%;line-height:35px}.entry-title a{position:relative}.categories a{color:#666;font-size:11px;background:#f5f5f5;padding:3px 10px;white-space:nowrap}.categories a:hover{text-decoration:none;background:#ebebeb;color:#454545}.entry-header p{padding:0;margin:0}.entry-header-menu a{display:block;font-size:12px;font-weight:700;padding:5px 25px;background:#454545;font-size:13px;position:absolute;left:480px;top:5px;color:#f5f5f5}.entry-header-menu a:hover{background:#4486c9;text-decoration:none}.entry .entry-category-area{padding:5px 0;margin:0;color:#aaa;font-size:70%}.entry .entry-category a{color:#454545;margin-left:5px;background:#fff;padding:3px 6px;border:1px solid #ddd;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px}.entry .entry-category :hover{color:#fff;text-decoration:none;background:-moz-linear-gradient(top,#3888da 0%,#256fba 100%);border:1px solid #256fba}.entry-footer{display:block;margin-top:1em;color:#454545;font-size:13px}.entry-footer .social-buttons{margin:0 0 10px}.entry-footer-section{color:#aaa;padding-bottom:8px;margin:0}.pager{display:inline;margin-right:10px}.pager a{font-size:12px;font-weight:700;padding:5px 25px;background:#bbb;font-size:13px;color:#f5f5f5;line-height:1.5;word-wrap:break-word;display:inline-block;max-width:200px}.pager a:hover{background:#4486c9;text-decoration:none}.entry-content{font-size:14px;line-height:1.9;margin:.5em 0}.entry-content img{max-width:560px}.entry-content p{margin:.8em 0}.entry-content h1,.entry-content h2,.entry-content h3,.entry-content h4,.entry-content h5,.entry-content h6{margin:1em 0 .5em}.entry-content h1{font-size:160%}.entry-content h2{font-size:150%}.entry-content h3{font-size:140%}.entry-content h4{font-size:120%}.entry-content h5{font-size:110%}.entry-content h6{font-size:100%}.entry-content h1,.entry-content h2,.entry-content h3{border-bottom:1px dotted #999}.entry-content ul,.entry-content ol{margin:0 0 0 1.5em;padding:0}.entry-content h1,.entry-content h2,.entry-content h3,.entry-content h4,.entry-content h5,.entry-content h6,.footnote-number{scroll-margin-top:56px}.entry blockquote{padding:10px;margin:1em 0;border:1px solid #ddd;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px}.entry blockquote p{margin-top:0;margin-bottom:0}.entry-content table{border-collapse:collapse;border-spacing:0}.entry-content table th,.entry-content table td{border:1px solid #ddd;padding:5px 10px}.entry-content table th{background:#fafafa}a.keyword{color:#454545;text-decoration:none;border-bottom:1px solid #DEDEDE}pre.lang-aa{font-size:14px;line-height:15px}.entry-comment{border-bottom:1px solid #ddd}.entry-comment:nth-child(1){border-top:1px solid #ddd}.comment{margin:0 0 15px;padding:0;font-size:13px}.comment li{list-style:none;padding:8px 0}.comment-user-name{font-weight:700;margin:0}.comment-content p{line-height:1.7}.comment-content p{margin:.5em 0;word-wrap:break-word}.comment-metadata{display:inline}.comment-metadata,.comment-metadata a{color:#aaa}.leave-comment-title{font-size:12px;font-weight:700;padding:5px 15px;display:inline-block;*display: inline;*zoom: 1;background:#f5f5f5;border:1px solid #f5f5f5;-webkit-transition:.3s ease;-webkit-transition-property:opacity,border,color,background;-moz-transition:.3s ease;-moz-transition-property:opacity,border,color,background;-o-transition:.3s ease;-o-transition-property:opacity,border,color,background;transition:.3s ease;transition-property:opacity,border,color,background}.leave-comment-title:hover{text-decoration:none;border:1px solid #7D9AB7}.hatena-module{margin-bottom:40px;font-size:13px}.hatena-module-title,.hatena-module-title a,.hatena-module-title a:hover,.hatena-module-title a:visited{text-align:left;font-size:16px;font-weight:400;margin-bottom:5px;padding-bottom:3px;color:#454545}.hatena-module-body ul{margin:0;padding:0;list-style:none;line-height:1.5}.hatena-module-body ul li{padding:.7em 0;border-bottom:1px solid #ddd}.hatena-module-body ul li.archive{border:none}.hatena-module-profile .id{display:block;line-height:2}.profile-icon{border:1px solid #ccc}.hatena-module-profile .profile-description{margin:0 0 5px;line-height:1.5}form.search-form{margin-top:10px}form.search-form input{border:1px solid #ccc;vertical-align:middle}.search-form .search-module-input{width:130px;background:-moz-linear-gradient(top,#eee 0%,#eee 50%,#fff 100%);padding:3px 8px;margin:0;font-size:12px;border-radius:12px;-webkit-border-radius:12px;-moz-border-radius:12px}.search-form .search-module-button{height:23px;width:23px;border:none;text-indent:-999px;margin-left:-3px;*margin-left: -5px;cursor:pointer;background:#999 url(https://cdn.blog.st-hatena.com/images/theme/search_w.png?version=1672117aa118e56a3cf2480ca37f9d) 50% 50% no-repeat;border-radius:12px;-webkit-border-radius:12px;-moz-border-radius:12px}#footer-box{clear:both}#footer-area1,#footer-area2,#footer-area3,#footer-area4{width:220px;float:left}#footer-area1,#footer-area2,#footer-area3{margin-right:40px}#footer-area4:after{content:"";display:block;height:0;visibility:hidden;clear:both}#footer{clear:both;text-align:center;padding:10px 0;font-size:small}#footer a{color:#454545}#footer a:hover{color:#256fba;text-decoration:none}.hatena-embed.hatena-fotolife,.hatena-embed.twitpic{padding:10px 10px 30px;margin:1em 0;background:transparent;display:inline-block;border:1px solid #dfdfdf;box-shadow:0 1px 5px #00000029;background:#fff;text-align:center}.hatena-embed.hatena-fotolife{background:#fff url(https://cdn.blog.st-hatena.com/images/theme/hatena-embed/embed-fotolife.png?version=1672117aa118e56a3cf2480ca37f9d) no-repeat right bottom}.hatena-embed.twitpic{padding:10px}.hatena-embed.hatena-fotolife .hatena-embed-image,.hatena-embed.twitpic .hatena-embed-image{display:inline-block;max-width:600px}.hatena-embed.hatena-fotolife .hatena-embed-body,.hatena-embed.hatena-fotolife .hatena-embed-body a,.hatena-embed.twitpic .hatena-embed-body,.hatena-embed.twitpic .hatena-embed-body a{text-align:center;font-family:Homemade Apple,cursive;color:#454545;font-size:16px;margin-top:10px}.hatena-embed.hatena-coco,.hatena-embed.foursquare{margin:1em 0;box-shadow:0 1px 5px #00000029}.hatena-embed.hatena-coco{border:1px solid #e2d279;padding:20px 30px;background:#faf9e6 url(https://cdn.blog.st-hatena.com/images/theme/hatena-embed/embed-coco.png?version=1672117aa118e56a3cf2480ca37f9d) no-repeat right bottom}.hatena-embed.hatena-coco .hatena-embed-image,.hatena-embed.foursquare .hatena-embed-image{width:100px;height:100px}.hatena-embed.foursquare{border:1px solid #C1D5DB;padding:20px 30px;background:#e6eff2 url(https://cdn.blog.st-hatena.com/images/theme/hatena-embed/embed-4sq.png?version=1672117aa118e56a3cf2480ca37f9d) no-repeat right bottom}.hatena-embed.hatena-bookmark{padding:15px 15px 15px 70px;margin:1em 0;background:transparent;border:1px solid #dfdfdf;box-shadow:0 1px 5px #00000029;background:#fff url(https://cdn.blog.st-hatena.com/images/theme/hatena-embed/embed-bookmark.png?version=1672117aa118e56a3cf2480ca37f9d) no-repeat 10px top;position:relative}.hatena-embed.hatena-bookmark a{text-decoration:underline}.hatena-embed.hatena-bookmark .hatena-embed-image{max-height:50px}.hatena-embed.hatena-haiku{padding:15px 15px 15px 70px;margin:1em 0;background:transparent;border:1px solid #dfdfdf;box-shadow:0 1px 5px #00000029;background:#fff url(https://cdn.blog.st-hatena.com/images/theme/hatena-embed/embed-haiku.png?version=1672117aa118e56a3cf2480ca37f9d) no-repeat 5px 5px}.hatena-embed.hatena-monolith{width:580px;padding:15px;margin:1em 0;background:transparent;border:1px solid #dfdfdf;box-shadow:0 1px 5px #00000029;background:#fff url(https://cdn.blog.st-hatena.com/images/theme/hatena-embed/embed-monolith.png?version=1672117aa118e56a3cf2480ca37f9d) no-repeat right bottom}.hatena-embed.hatena-monolith .hatena-embed-image{display:block;float:left;max-width:98px;border:1px solid #dfdfdf}.hatena-embed.hatena-monolith .hatena-embed-body{float:left;width:470px;margin-left:10px}.hatena-embed.hatena-monolith:after{content:"";display:block;height:0;visibility:hidden;clear:both}.hatena-embed.twitter{padding:10px 0;margin:1em 0;border-bottom:1px dotted #757575;border-top:1px dotted #757575}.hatena-embed.atnd{padding:10px 0;margin:1em 0;border-bottom:1px dotted #757575;border-top:1px dotted #757575;font-family:PT Sans Caption,Helvetica,ヒラギノ角ゴ Pro W3,HiraKakuProN-W3,Hiragino Kaku Gothic Pro,メイリオ,Meiryo,ＭＳ Ｐゴシック,sans-serif}.hatena-embed-detail.atnd-detail{font-size:20px;font-weight:700;color:#262626}.hatena-embed-detail.atnd-detail:hover{color:#ea1f00;text-decoration:none}.hatena-embed.atnd .content-body{font-size:12px;color:#222}.page-about dt{font-size:16px;font-weight:700}.page-about dd{margin-left:0;margin-bottom:30px}.page-about .etnry-content img.profile-icon{height:16px;width:16px}.page-archive .date{position:static;border:none}.page-archive .archive-entries .entry-title{margin:0 0 .3em;line-height:1.5}.page-archive .archive-entries section{margin-bottom:30px}.page-archive .archive-entries .categories{margin-bottom:10px}.page-archive .archive-entries p{font-size:14px;line-height:1.5}

/* </system> */

/* <system section="background" selected="fff"> */
body{background:#fff;}
/* </system> */
/* 記事最終更新日 */ .lastmod { color: #666666; /* 文字色 */ background-color: #fff; /* 背景色 */ padding: 0px 0px; text-decoration: none; font-size: 90%; display: inline; margin-left: -10px; } .lastmod::before { margin-right: 5px; padding-left: 3px; font-family: "blogicon"; content: '\f02b'; } /* 吹き出し（丸画像・通常吹き出し） */ .entry-talk-box { border-collapse: separate; border-spacing: 15px 2px; display: table; margin: 30px 0; table-layout: fixed; width: 100%; } .entry-talk-img { display: table-cell; vertical-align: top; width: 100px; } .entry-talk-img img { border-radius: 50%; width: 100px; } .entry-talk-txt { background-color: #fff; border: 3px solid #ddd; border-radius: 8px; padding: 10px; position: relative; } .entry-talk-txt-left:before { content: ''; position: absolute; border-right: 10px solid #ddd; border-top: 12px solid transparent; border-bottom: 12px solid transparent; left: -12px; top: 10px; } .entry-talk-txt-left:after { content: ''; position: absolute; border-right: 12px solid #fff; border-top: 12px solid transparent; border-bottom: 12px solid transparent; left: -9px; top: 10px; } .entry-talk-txt-right:before { content: ''; position: absolute; border-left: 12px solid #ddd; border-top: 12px solid transparent; border-bottom: 12px solid transparent; right: -15px; top: 10px; } .entry-talk-txt-right:after { content: ''; position: absolute; border-left: 12px solid #fff; border-top: 12px solid transparent; border-bottom: 12px solid transparent; right: -11px; top: 10px; } .entry-talk-txt p { line-height: 1.4; margin: 0; } .entry-talk-name { font-size: 13px; color: #444; text-align: center; } /* 吹き出し（LINE風） */ .entry-talk-txt-left.line { background-color: #ddd; border: none; } .entry-talk-txt-right.line { background-color: #45d643; border: none; } .entry-talk-txt-left.line:before { border: none; } .entry-talk-txt-left.line:after { border-right: 12px solid #ddd; } .entry-talk-txt-right.line:before { border: none; } .entry-talk-txt-right.line:after { border-left: 12px solid #45d643; } margin: 20px 0 20px 0; /*上,右,下,左の余白*/ } /* ----- ブログタイトル下のスペース調整 ---- */ #blog-title{ height:130px; } /* ----- ブログタイトル下のスペース調整 ---- */ #blog-title{ height:160px; } /*-------------------------------------- ヨメレバ・カエレバ（レスポンシブ） --------------------------------------*/ .booklink-box, .kaerebalink-box { padding:25px; margin-bottom: 10px; border:solid 1px #ccc; overflow: hidden; font-size:small; } .booklink-image, .kaerebalink-image { margin:0 15px 0 0; float:left; min-width: 160px; text-align: center; } .booklink-image img, .kaerebalink-image img { margin:0 auto; text-align:center; } .booklink-info, .kaerebalink-info { margin:0; line-height:120%; overflow: hidden; } .booklink-name, .kaerebalink-name { margin-bottom:24px; line-height:1.5em; } .booklink-powered-date, .kaerebalink-powered-date { font-size:8px; margin-top:10px; font-family:verdana; line-height:120%; } .booklink-detail, .kaerebalink-detail {font-size: 12px;} .booklink-powered-date, .kaerebalink-detail {margin-bottom:15px;} .booklink-link2, .kaerebalink-link1 {margin-top:10px;} .booklink-link2 a, .kaerebalink-link1 a { width:30%; display:inline-block; margin:5px 2px 0 0; padding:10px 1px; text-align:center; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; float:left; text-decoration:none; font-weight:800; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); font-size:12px; color: #fff !important; -webkit-transition: all .3s; /* カーソルを合わせた時のフェード(0.3秒)★ */ transition: all .3s; /* カーソルを合わせた時のフェード(0.3秒)★ */ } .booklink-link2 a:hover, .kaerebalink-link1 a:hover{opacity: 0.6;} .booklink-link2 a:active .kaerebalink-link1 a:active { position:relative; top:1px; } /*アプリーチに枠を付ける*/ #appreach-box { border: 1px solid #ddd; margin: 2em 0; } #appreach-box p { display: none; } /* ボタンの変更（開始） */ .shoplinkamazon a { background-color: #ff9901 !important; /* 背景色★ */ } .shoplinkrakuten a { background-color: #c20004 !important; /* 背景色★ */ } .shoplinkkindle a { background-color: #007dcd !important; /* 背景色★ */ } .shoplinkkakakucom a { background-color: #314995 !important; /* 背景色★ */ } .shoplinkyahoo a { background-color: #7b0099 !important; /* 背景色★ */ } .shoplinkseven a { background-color: #1abc9c !important; /* 背景色★ */ } .shoplinkrakukobo a { background-color: #039bad !important; /* 背景色★ */ } /* ボタンの変更（終了） */ .shoplinkyahoo img {display:none;} .shoplinkyahoo a {font-size:10px;} .booklink-footer {display: none;} @media screen and (max-width: 680px) { .booklink-box, .kaerebalink-box {padding:15px;} .booklink-image, .kaerebalink-image { width: 100px !important; min-width: initial; } .booklink-name &gt; a, .kaerebalink-name &gt; a { font-size: 15px; font-weight: bold; } .booklink-name, .kaerebalink-name {margin-bottom:12px;} .booklink-powered-date, .kaerebalink-powered-date {margin-top:5px;} .booklink-link2 a, .kaerebalink-link1 a { width:calc(100% - 4px); -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; margin: 2px 0px; padding:10px 0px; } } /* ボタンの変更（開始） */ .shoplinkamazon a { background-color: #ff9901 !important; /* 背景色★ */ } .shoplinkrakuten a { background-color: #c20004 !important; /* 背景色★ */ } .shoplinkkindle a { background-color: #007dcd !important; /* 背景色★ */ } .shoplinkkakakucom a { background-color: #314995 !important; /* 背景色★ */ } .shoplinkyahoo a { background-color: #7b0099 !important; /* 背景色★ */ } .shoplinkseven a { background-color: #1abc9c !important; /* 背景色★ */ } .shoplinkrakukobo a { background-color: #039bad !important; /* 背景色★ */ } /* ボタンの変更（終了） */ .shoplinkyahoo img {display:none;} .shoplinkyahoo a {font-size:10px;} .booklink-footer {display: none;} @media screen and (max-width: 680px) { .booklink-box, .kaerebalink-box {padding:15px;} .booklink-image, .kaerebalink-image { width: 100px !important; min-width: initial; } .booklink-name &gt; a, .kaerebalink-name &gt; a { font-size: 15px; font-weight: bold; } .booklink-name, .kaerebalink-name {margin-bottom:12px;} .booklink-powered-date, .kaerebalink-powered-date {margin-top:5px;} .booklink-link2 a, .kaerebalink-link1 a { width:calc(100% - 4px); -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; margin: 2px 0px; padding:10px 0px; } } .custom-sns-follow-button { text-align: center; font-size: 0; margin-left: -8px; margin-right: -8px; } .custom-sns-follow-button.article-bottom { margin-top: 28px; } .custom-sns-follow-button.narrow { margin-left: -5px; margin-right: -5px; } .custom-sns-follow-button .title { font-size: 14px; color: #666; margin-bottom: 9px; } .custom-sns-follow-button li { display: inline-block; width: 33.3%; font-size: 14px; box-sizing: border-box; padding: 0 8px; } .custom-sns-follow-button li a { display: block; padding: 13px 0; text-align: center; text-decoration: none; border-radius: 2px; background: #fff; } .custom-sns-follow-button.narrow li { padding: 0 5px; } .custom-sns-follow-button.narrow li a { padding: 9px 0; } .custom-sns-follow-button .hatena { color: #3a3a3a; border: 1px solid #777; } .custom-sns-follow-button .twitter { color: #559fee; border: 1px solid #559fee; } .custom-sns-follow-button .feedly { color: #60c667; border: 1px solid #60c667; } .custom-sns-follow-button a:hover { color: #fff; transition: linear all .3s; } .custom-sns-follow-button .hatena:hover { background: #777; } .custom-sns-follow-button .twitter:hover { background: #559fee; } .custom-sns-follow-button .feedly:hover { background: #60c667; } /* 赤の枠 */ .round_frame { border: solid 2px #c0392b; padding: 15px 15px 0 15px; margin: 20px 0; background: #fff3f3; } /* 赤色タイトル付き */ .round_title { background: #e74c3c; /* 背景色 */ color: #fff;/* 文字色 */ font-weight: bold; /* 文字の太さ */ padding: 10px 15px 10px 15px; /* 枠の内側の余白 上、右、下、左 */ margin-top: 20px;/*枠の外側の余白上 */ margin-bottom: 0;/*枠の外側の余白下*/ } .round_frame { border: solid 2px #e74c3c; padding: 15px 15px 0 15px; margin-top: 0; margin-bottom: 20px; background: #FFF3F3; } /*---- オリジナルボタン ----*/ .ctmbtn { display: inline-block; padding: 0 15px; /* 余白 */ margin-bottom: 20px; /* ボタンの下の余白 */ text-align: center; /* テキスト中央寄せ */ text-decoration: none; line-height: 54px; outline: none; position: relative; color: #fff; /* テキスト色 */ text-shadow: 0 1px 1px rgba(0, 0, 0, .3); } .ctmbtn::before, .ctmbtn::after { position: absolute; z-index: -1; display: block; content: ''; } .ctmbtn, .ctmbtn::before, .ctmbtn::after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all .3s; /* カーソルを合わせた時のフェード(0.3秒)★ */ transition: all .3s; /* カーソルを合わせた時のフェード(0.3秒)★ */ } /* マウスのカーソルがボタンの上にあるとき */ .ctmbtn:hover { text-decoration: none; } /* マウスでクリックされたとき */ .ctmbtn:active { top: 3px; box-shadow: none; } /* リンクの色が白色にならないとき */ a.ctmbtn:visited { text-decoration: none !important; color: #fff !important; } a.ctmbtn { text-decoration: none !important; color: #fff !important; } a.ctmbtn:hover { text-decoration: none !important; color: #fff !important; } /*---- オレンジ色 ----*/ .ctmbtn.orange { background-color: #f1c40f; /* 背景色★ */ box-shadow: 0 3px 0 #d7af0e; /* ボタンの影と色★ */ } .ctmbtn.orange:hover { background-color: #fcd32e; /* 背景色★ */ box-shadow: 0 3px 0 #efc82b; /* ボタンの影と色★ */ } .entry-content h2 { font-size: 1.2em; font-weight: bold; padding: 8px 10px 8px 15px; border-left: 5px solid #d2d2d2; background: #f2f2f2; } .entry-content h3 { font-size: 1.2em; padding: 20px 0 8px; margin-bottom: 25px; border-bottom: #999 solid 3px; } /*シェアボタン*/ .share-3d{ margin-bottom: 10px; text-align: center; } .share-3d-inner a { position: relative; display: inline-block; width: 18%; height: 40px; line-height: 20px; border-radius: 5px; font-size: 16px; text-align: center; color: #ffffff; text-decoration: none; } .share-3d .small-text{ font-size: 10px; } .share-3d .hatena-bookmark-button{ background: #00A4DE; box-shadow: 0 3px #43638b; } .share-3d .twitter-button{ background: #55ACEE; box-shadow: 0 3px #0092ca; } .share-3d .googleplus-button{ background: #C53727; box-shadow: 0 3px #ad3a2d; } .share-3d .facebook-button{ background: #405BA7; box-shadow: 0 3px #2c4373; } .share-3d .pocket-button{ background: #EE4256; box-shadow: 0 3px 0 #c0392b; } .share-3d a:active{ top: 3px; box-shadow: none; } .share-3d .hatena-bookmark-button:active{ background: #43638b; } .share-3d .twitter-button:active{ background: #0092ca; } .share-3d .googleplus-button:active{ background: #ad3a2d; } .share-3d .facebook-button:active{ background: #2c4373; } .share-3d .pocket-button:active{ background: #c0392b; } .entry-content p { font-size: 16px; /* font-size: 1.1em */ /* pxの他にemを使う書き方もある */ } /*-------------------------------------------- スクロールできるのがわかりやすいテーブルCSS --------------------------------------------*/ .table-wrap { width: 100%; overflow: auto; background: linear-gradient(to left, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.2)) 0 0/20px 100%, linear-gradient(to right, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.2)) right/20px 100%; background-repeat: no-repeat; background-attachment: scroll; border-right: 1px solid #CCC; } .table-wrap table { background: linear-gradient(to left, hsla(0,0%,100%,0), white 15px) 0 0 / 50px 100%, linear-gradient(to right, hsla(0,0%,100%,0), white 15px) right / 50px 100%; background-repeat: no-repeat; background-attachment: local; border-bottom: 1px solid #CCC; border-collapse: collapse; margin-bottom: 0; } .table-wrap th { padding: 10px; background: rgba(0,0,0,.1); border-top: 1px solid #CCC; border-left: 1px solid #CCC; white-space: nowrap; } .table-wrap td { padding: 10px; border-top: 1px solid #CCC; border-left: 1px solid #CCC; white-space: nowrap; } *------------------------------------ フォローボタン ------------------------------------*/ /* 全体の設定 */ .sidebar-follow-buttons { width: 100%; text-align: center; letter-spacing: -.40em; } /* リンクデザイン */ .sidebar-follow-buttons a { display: inline-block; letter-spacing: normal; position: relative; width: 100%; font-size: 18px; text-align: center; text-decoration: none; padding:6% 0; margin:1%; overflow: hidden; z-index:2; } /* マウスポインターON */ .sidebar-follow-buttons a:hover { color:#fff; } /* サイドバーボタン調整 */ .sidebar-follow-buttons a:before, .sidebar-follow-buttons a:after { position:absolute; content:''; width:100%; height:50%; left:0; z-index:-1; transition: 0.3s; } .sidebar-follow-buttons a:before { top:0; } .sidebar-follow-buttons a:after { bottom:0; } /* ボタンテキスト設定 */ .sidebar-follow-buttons .inner-text { font-size:16px; padding-left:5px; } /* Facebook */ .sidebar-follow-buttons .facebook { color: #ffffff; border: 1px solid #305097; background: #305097; } .sidebar-follow-buttons .facebook:hover { color: #305097; background: #ffffff; transition: all .3s; } .sidebar-follow-buttons .facebook:hover:before, .sidebar-follow-buttons .facebook:hover:after { height: 0; background:#305097; } /* Twitter */ .sidebar-follow-buttons .twitter { color: #ffffff; border: 1px solid #55acee; background: #55acee; } .sidebar-follow-buttons .twitter:hover { color: #55acee; background: #ffffff; transition: all .3s; } .sidebar-follow-buttons .twitter:hover:before, .sidebar-follow-buttons .twitter:hover:after { height: 0; background:#55acee; } /* Instagram */ .sidebar-follow-buttons .instagram { color: #ffffff; border: 1px solid #3f729b; background: #3f729b; } .sidebar-follow-buttons .instagram:hover { color: #3f729b; background: #ffffff; transition: all .3s; } .sidebar-follow-buttons .instagram:hover:before, .sidebar-follow-buttons .instagram:hover:after { height: 0; background:#3f729b; } /* Feedly */ .sidebar-follow-buttons .feedly { color: #ffffff; border: 1px solid #6cc655; background: #6cc655; } .sidebar-follow-buttons .feedly:hover { color: #6cc655; background: #ffffff; transition: all .3s; } .sidebar-follow-buttons .feedly:hover:before, .sidebar-follow-buttons .feedly:hover:after { height: 0; background:#6cc655; } /* はてな */ .sidebar-follow-buttons .hatena { color: #ffffff; border: 1px solid #454545; background: #454545; } .sidebar-follow-buttons .hatena:hover { color: #454545; background: #ffffff; transition: all .3s; } .sidebar-follow-buttons .hatena:hover:before, .sidebar-follow-buttons .hatena:hover:after { height: 0; background:#454545; } .table-of-contents{ display:none } .show-area{ cursor: pointer; color: #47a1e5 } h4 { position: relative; padding-left: 1.2em;/*アイコン分のスペース*/ line-height: 1.4; } h4:before{ font-family: FontAwesome;/*忘れずに*/ content: "\f00c";/*アイコンのユニコード*/ position: absolute;/*絶対位置*/ font-size: 1em;/*サイズ*/ left: 0;/*アイコンの位置*/ top: 0;/*アイコンの位置*/ color: #5ab9ff; /*アイコン色*/ } .box28 { position: relative; margin: 2em 0; padding: 25px 10px 7px; border: solid 2px #FFC107; } .box28 .box-title { position: absolute; display: inline-block; top: -2px; left: -2px; padding: 0 9px; height: 25px; line-height: 25px; vertical-align: middle; font-size: 17px; background: #FFC107; color: #ffffff; font-weight: bold; } .box28 p { margin: 0; padding: 0; } .box27 { position: relative; margin: 2em 0; padding: 0.5em 1em; border: solid 3px #62c1ce; } .box27 .box-title { position: absolute; display: inline-block; top: -27px; left: -3px; padding: 0 9px; height: 25px; line-height: 25px; vertical-align: middle; font-size: 17px; background: #62c1ce; color: #ffffff; font-weight: bold; border-radius: 5px 5px 0 0; } .box27 p { margin: 0; padding: 0; } .entry-content .emphasize-link { position: relative; margin: 36px 0 16px; padding: 16px 10px; border: 2px solid #00B66E; background-color: #fffbf5; } .entry-content .emphasize-link p:last-child { margin-bottom: 0; } .entry-content .emphasize-link::before { position: absolute; top: -12px; left: 10px; padding: 0 10px 0 26px; content: "公式サイト"; background-color: #00B66E; border-radius: 10px; color: #fff; font-size: 14px; font-weight: bold; line-height: 20px; } .entry-content .emphasize-link::after { position: absolute; top: -16px; left: 4px; width: 28px; height: 28px; background-color: #00B66E; border-radius: 14px; line-height: 25px; text-align: center; content: "\f01a"; font-size: 18px; font-family: "blogicon"; color: #fff; } .square_btn { position: relative; display: inline-block; font-weight: bold; padding: 0.25em 0.5em; text-decoration: none; color: #FFF; background: #00bcd4; transition: .4s; } .square_btn:hover { background: #1ec7bb; } /11位以下表示/ /*全体*/ .hidden_box { margin: 2em 0;/*前後の余白*/ padding: 0; } /*ボタン装飾*/ .hidden_box label { padding: 15px; font-weight: bold; border: solid 2px black; cursor :pointer; } /*ボタンホバー時*/ .hidden_box label:hover { background: #efefef; } /*チェックは見えなくする*/ .hidden_box input { display: none; } /*中身を非表示にしておく*/ .hidden_box .hidden_show { height: 0; padding: 0; overflow: hidden; opacity: 0; transition: 0.8s; } /*クリックで中身表示*/ .hidden_box input:checked ~ .hidden_show { padding: 10px 0; height: auto; opacity: 1; }</system>



/*****グローバルメニュー****/
#menu{
    width: 100%;
    margin: 10px auto;
    background: #444;/*７*/
}
#menu-inner{
    width: 900px;/*１*/
    height: 40px;/*２*/
    margin: 0 auto;
    background: #444;/*８*/
}
#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: #444;/*９*/
    color: #fff;/*10*/
    font-size: 70%;
    text-decoration: none;
    z-index: 2;
}
#menu-content > li > a:hover{
    background: #555;/*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: #444;/*13*/
    color: #fff;/*14*/
    font-size: 70%;
    text-decoration: none;
}
#menu-content > li > ul.second-content > li > a:hover{
    background: #555;/*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: #555;/*17*/
    color: #fff;/*18*/
    font-size: 70%;
}
#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;}
}


.youtube {
display: inline-block;
position: relative;
overflow: hidden;
width: 320px;
height: 180px;
}
.youtube::before {
position: absolute;
content: "Click to Play";
color: #fff;
text-align: center;
font-size: 22px;
font-weight: bold;
line-height: 180px;
background: rgba(0, 0, 0, 0.6);
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
transition: all 0.3s;
}
.youtube:hover::before {
background: rgba(0, 0, 0, 0.7);
cursor: pointer;
transition: all 0.3s;
}


/* ----- 「タイトル」と「ブログの説明」を隠す ----- */
#title a {
visibility: hidden;
}
#blog-description {
visibility: hidden;
}

#banner h1{
margin:0;
padding: 10px 20px 8px 20px;
font-family: Helvetica,Arial,sans-serif;
font-size: 32px;
text-indent:-9999px;
}