@charset "UTF-8"; html { font-size:19px; color:#000; } @media only screen and (max-width: 859px) { html { font-size:16px; } } html, body { margin:0; font-family:Gothic MB101 Light, Hiragino Kaku Gothic W3 JIS2004, 'メイリオ', Meiryo, Verdana, 'MS Pゴシック', sans-serif; color:rgba(0,0,0,.87); background-color:#fff; line-height:1.8; -webkit-font-smoothing:antialiased; word-break: normal; word-wrap: break-word; } a { color:#000; text-decoration:none; -webkit-transition:0.1s linear; transition-duration:0.1s linear; -webkit-tap-highlight-color:rgba(0,0,0,0); } a:link, a:visited { color:#000; text-decoration:none; } a:hover { color:#65a6ff; text-decoration:none; } h1,h2,h3,h4,h5,h6 { font-weight:normal; } h6 { font-size: 1em; text-align: left !important; margin-bottom: 0 !important; margin-top: 50px !important; } strong,b { font-family:Gothic MB101 DemiBold, sans-serif; } img.hatena-fotolife {/* 画像拡大させない */ pointer-events:none; } /* ヘッダー */ #blog-title { display:none; } #header { height:55px; border-bottom:1px solid #dcdcdc; } #logo { width:860px; margin:0 auto; padding:14px 0 12px; } @media only screen and (max-width: 859px) { #logo { width:auto; margin:0 20px; } #logo img { display:block; margin:0 auto; } } #news{ width:860px; margin:40px auto; font-size:26px; } @media only screen and (max-width: 859px) { #news { width:auto; margin:25px 20px; font-size:26px; } .page-index #news { text-align:center; } } /* wrapper */ #wrapper { width:860px; margin:0 auto; } @media only screen and (max-width: 859px) { #wrapper { width:100%; } } /*---------------------- インデックスページ ----------------------*/ .page-index #main-inner { display:-webkit-box; display:-ms-flexbox; display:flex; -ms-flex-wrap:wrap; flex-wrap:wrap; } .page-index .hentry { position:relative; width:400px; margin-bottom:75px; } @media only screen and (max-width: 859px) { .page-index .hentry { width:100%; margin-bottom:90px; } } .page-index .hentry:nth-child(odd) { margin-right:60px; } @media only screen and (max-width: 859px) { .page-index .hentry:nth-child(odd) { margin-right:0; } } .page-index .entry-header { padding-top:280px; } @media only screen and (max-width: 859px) { .page-index .entry-header { margin:0 20px; padding-top:70vw; } } .page-index .date { font-size:15px; } .date a { color:#787878 !important; } .date a:hover { opacity:0.8; } img.hatena-fotolife { cursor:default; } .entry-title { line-height:1.65; word-break:break-all; text-align:justify; text-justify:inter-ideograph; } .page-index .entry-title { position:relative; overflow:hidden; max-height:109px;/* 文字サイズ*行間*表示したい行数=全体の高さ */ margin:3px 0 0; font-size:22px; } .page-index .entry-title:before, .entry-title:after { background:#fff; position:absolute; } .page-index .entry-title:before { content:'…'; width:1em; right:0px; top:72px; /* 文字サイズ*行間*表示したい行数-1 *開始位置が一行分多いため */ } .page-index .entry-title:after{ content: ""; height:100%; width:100%; } .entry-title a { color:#000; } .entry-title a:hover { color:#65a6ff; } .entry-categories, .categories { margin:25px 0 0; font-size:0; } .entry-categories a, .categories a { display:inline-block; margin:0 5px 7px 0; padding:3px 8px; background-color:#1e1e1e; border-radius:4px; -webkit-border-radius:4px; color:#fff; font-size:12px; } .entry-categories a:hover, .categories a:hover { opacity:0.8; } .page-index .entry-content { position:absolute; top:0; width:400px; } @media only screen and (max-width: 859px) { .page-index .entry-content { width:100%; } } .page-index .entry-content p { margin:0; } .page-index .entry-content :not(:first-child) { display:none; } .page-index .entry-footer { display:none; } /* ページャー */ .page-index .pager { width:100%; margin-top:15px; text-align:center; } .page-index .pager a { display:inline-block; padding:16px 36px; border:2px solid #0088cc; border-radius:4px; -webkit-border-radius:4px; color:#0088cc; line-height:1; vertical-align:middle; } .page-index .pager a:hover { border-color:#65a6ff; color:#65a6ff; } /*---------------------- サイドコンテンツ ----------------------*/ #box2 { width:100%; margin-top:90px; background-color:#f0f0f0; } #box2-inner { width:750px; margin:0 auto; padding:50px 0; font-size:0; } @media only screen and (max-width: 859px) { #box2-inner { width:auto; margin:0 20px; padding:30px 0; } } /* 人気記事 */ .hatena-module-entries-access-ranking { margin:0 0 80px; } @media only screen and (max-width: 859px) { .hatena-module-entries-access-ranking { margin:0 0 30px; } } .hatena-module-entries-access-ranking .hatena-module-title { margin-bottom:40px; font-size:24px; text-align:center; } @media only screen and (max-width: 859px) { .hatena-module-entries-access-ranking .hatena-module-title { margin-bottom:30px; font-size:21px; } } .hatena-module-entries-access-ranking .hatena-urllist { margin:0; padding:0; } .hatena-module-entries-access-ranking .urllist-item { margin-top:35px; } @media only screen and (max-width: 859px) { .hatena-module-entries-access-ranking .urllist-item { margin-top:30px; } } .hatena-module-entries-access-ranking .urllist-item-inner { line-height:1.65; } @media only screen and (max-width: 859px) { #box2 img { display:none; } } .urllist-with-thumbnails li .urllist-image { margin:0 18px 0 0; } .hatena-module-entries-access-ranking .urllist-date-link { margin:0 0 5px; font-size:15px; } .hatena-module-entries-access-ranking .urllist-date-link a { color:#787878; } .hatena-module-entries-access-ranking .urllist-date-link a:hover { opacity:0.8; } .hatena-module-entries-access-ranking .urllist-title-link { font-size:17px; } /* 月別アーカイブ・リンク・プロフィール */ .hatena-module-archive, .hatena-module-links, .hatena-module-profile { display:inline-block; width:230px; margin:0 30px 0 0; padding-top:20px; border-top:2px solid #000; font-size:15px; vertical-align:top; } @media only screen and (max-width: 859px) { .hatena-module-archive, .hatena-module-links, .hatena-module-profile { width:100%; margin:0 0 30px; } } .hatena-module-profile { margin:0; } .hatena-module-archive .hatena-module-title, .hatena-module-links .hatena-module-title, .hatena-module-profile .hatena-module-title { margin:0 0 15px; font-size:17px; text-align:center; } .hatena-module-archive .hatena-module-title a { text-decoration:none; } @media only screen and (max-width: 859px) { .hatena-module-archive .hatena-module-title, .hatena-module-links .hatena-module-title, .hatena-module-profile .hatena-module-title { text-align:left; } } .archive-module-year .archive-module-button { font-size:9px; opacity:1; } .archive-module-year .archive-module-month { margin:0 0 0 25px !important; } .hatena-module-archive .hatena-urllist, .hatena-module-links .hatena-urllist { list-style-type:none; margin:0; padding:0; } .hatena-module-profile .profile-description { line-height:1.6; } .hatena-module-profile .profile-description p { margin:5px 0 0; } /* 検索 */ .hatena-module-search-box { width:100%; } @media only screen and (max-width: 859px) { .hatena-module-search-box { margin:30px 0 0; padding:20px 0 0; border-top:2px solid #000; } } @media only screen and (max-width: 859px) { .hatena-module-search-box .hatena-module-title { margin:0 0 15px; font-size:17px; } } .search-form { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; width:550px; margin:70px auto 15px; padding:4px 10px; background:#fff; -webkit-box-sizing:border-box; box-sizing:border-box; font-size:15px; } @media only screen and (max-width: 859px) { .search-form { width:100%; margin:0; } } .search-module-input { -webkit-box-flex:1; -ms-flex:1 0; flex:1 0%; height:20px; padding:5px; border:none; font-size:15px; outline:0; } .search-module-button { width:30px; height:30px; padding:0; background:transparent url(https://cdn.blog.st-hatena.com/images/theme/search@2x.png?version=84c17382a0e01792a172378d0e10ca) no-repeat center; background-size:30px; border:none; outline:none; color:transparent; overflow:hidden; opacity:.5; cursor:pointer; } .search-module-button:hover { opacity:.35; } /* カテゴリー */ .hatena-module-category { padding:20px 0 50px; border-top:2px solid #000; font-size:15px; } @media only screen and (max-width: 859px) { .hatena-module-category { display:none; } } .hatena-module-category .hatena-module-title { margin-bottom:10px; font-size:20px; text-align:center; } .hatena-module-category ul { display:inline; margin:0; padding:0; } .hatena-module-category ul li { display:inline-block; list-style:none; margin-top:5px; margin-right:20px; } /* カテゴリー プルダウン(スマホのみ) */ #bottom-editarea { display:none; } @media only screen and (max-width: 859px) { #bottom-editarea { display:block; background-color:#f0f0f0; } #bottom-editarea .category { margin:0 20px; padding:20px 0 40px; border-top:2px solid #000; } #bottom-editarea .category .hatena-module-title { margin:0 0 15px; font-size:17px; } #bottom-editarea .categories-menu { position:relative; overflow:hidden; width:100%; margin:0 auto; } #bottom-editarea .categories-menu select{ -webkit-appearance:none; -moz-appearance:none; appearance:none; background-color:#fff; display:block; width:100%; padding:8px 10px; border:none; outline:none; border-radius:0; line-height:1.5; font-size:15px; color:#757575; } #bottom-editarea .categories-menu .fa-angle-down { position:absolute; top:0; right:0; display:block; padding:0.5em 1em; font-size:20px; font-weight:bold; pointer-events:none; } } /* footer */ #footer { padding:20px 0; background:#f5f5f5; font-size:13px; color:#bdbdbd; text-align:center; line-height:1.6; } @media only screen and (max-width: 859px) { #footer { padding:20px; } } #footer a { color:#bdbdbd; } #footer .footer-address a img { display:none; } #footer .services { margin:0; } /*---------------------- 記事ページ ----------------------*/ @media only screen and (max-width: 859px) { .page-entry .entry-header { margin:0 20px; } } .page-entry .date { font-size:16px; line-height:1; } @media only screen and (max-width: 859px) { .page-entry .date { font-size:16px; } } .page-entry .entry-title { margin:20px 0 20px; font-size:28px; line-height:1.5; } @media only screen and (max-width: 859px) { .page-entry .entry-title { font-size:23px; } } .page-entry .entry-content { margin:40px 0 90px; } .page-entry .entry-content > p { margin:0 0 40px; } .page-entry .entry-content p:not(:nth-child(1)), .page-entry .entry-content div, .page-entry .entry-content ul, .page-entry .entry-content ol, .page-entry .entry-content dl, .page-entry .entry-content table, .page-entry .entry-content pre, .page-entry .entry-content .hatena-asin-detail { width:750px; margin:20px auto; } .page-entry .entry-content ul > li > ul { margin-top: 10px; } @media only screen and (max-width: 859px) { .page-entry .entry-content p:not(:nth-child(1)), .page-entry .entry-content ul, .page-entry .entry-content div, .page-entry .entry-content ol, .page-entry .entry-content dl, .page-entry .entry-content table, .page-entry .entry-content pre, .page-entry .entry-content .hatena-asin-detail { width:auto; margin:20px; box-sizing:border-box; } .page-entry .entry-content ul > li > ul { margin-top: 10px !important; } } .page-entry .entry-content h1 { font-size:1.75em; } .page-entry .entry-content h1, .page-entry .entry-content h2, .page-entry .entry-content h3, .page-entry .entry-content h4, .page-entry .entry-content h5, .page-entry .entry-content h6 { width:750px; margin:80px auto 30px; text-align:center; line-height:1.65; } @media only screen and (max-width: 859px) { .page-entry .entry-content h1, .page-entry .entry-content h2, .page-entry .entry-content h3, .page-entry .entry-content h4, .page-entry .entry-content h5, .page-entry .entry-content h6 { width:auto; margin:80px 20px 30px; } } .page-entry .entry-content p { line-height:2; } .page-entry .entry-content p:not(:nth-child(1)) { margin-top:30px; margin-bottom:50px; } .page-entry .entry-content p img { display:block; margin:0 auto; } .page-entry .entry-content a { color:#0088cc; } .page-entry .entry-content a:hover { color:#65a6ff; } .page-entry .entry-footer-section { margin:0 0 5px; font-size:15px; text-align:center; } .page-entry .entry-footer-section .author { display: none; } .page-entry .hatena-star-container { margin:0; text-align:center; line-height:1.2; } /* シェアボタン */ .share-flat { margin-top:40px; text-align:center; font-size:0; } @media only screen and (max-width: 859px) { .share-flat { width:100%; /*padding:0 20px;*/ box-sizing:border-box; } } .share-flat a { display:inline-block; margin-right:8px; vertical-align:top; } @media only screen and (max-width: 859px) { .share-flat a { margin:0; } } .share-flat a .button { display:table-cell; border-radius:2px; width:60px; height:30px; background-color:#666; vertical-align:middle; text-align:center; font-size:0; } @media only screen and (max-width: 859px) { .share-flat a .button { border-radius:0; height:44px; } } .share-flat a .button:hover { opacity:.9; } .share-flat .twitter .button { background-color:#000000; } .share-flat .twitter img { width: 16px; height: 16px; } .share-flat .facebook .button { background-color:#3b5998; } .share-flat .hatena .button { background-color:#00a4de; } .share-flat .google .button { background-color:#dc4e41; } .share-flat .pocket .button { background-color:#e7374a; } .share-flat .small-text { display:block; text-align:center; line-height:20px; font-size:12px; } .share-flat .facebook .small-text { color:#3b5998; } .share-flat .hatena .small-text { color:#00a4de; } /* 関連記事 */ .hatena-module-related-entries { width:750px !important; border-top:1px solid #ebebeb; border-bottom:1px solid #ebebeb; margin:60px auto 0; padding:60px 0; } @media only screen and (max-width: 859px) { .hatena-module-related-entries { width:auto !important; margin:40px 20px 0; padding:40px 0; } } .hatena-module-related-entries .hatena-module-title { font-size:24px; text-align:center; } @media only screen and (max-width: 859px) { .hatena-module-related-entries .hatena-module-title { font-size:21px; } } .related-entries { margin:0; padding:0; } .related-entries-item { margin:30px 0 0; line-height:1.65; } .related-entries-image-link { display:none; } .related-entries-date-link { font-size:15px; } .related-entries-date-link a { color:#787878 !important; } .related-entries-date-link a:hover { opacity:0.8; } .related-entries-title { display:block; margin-top:5px; font-size:17px; } .related-entries-entry-body { display:none; } /* ページャー */ .page-entry .pager { display:block; margin:90px 0 0; line-height:1.4; } @media only screen and (max-width: 859px) { .page-entry .pager { width:auto; margin:60px 20px 0; } } .page-entry .pager:after { content: ""; clear: both; display: block; } .page-entry .pager-prev { float:left; width:45%; text-align:left; } .page-entry .pager-next { float:right; width:45%; text-align:right; } .page-entry .pager a { color:#0088cc; } .page-entry .pager a:hover { color:#65a6ff; } /*---------------------- アーカイブ ----------------------*/ .page-archive .archive-heading { margin:0 0 60px; font-size:26px; } @media only screen and (max-width: 859px) { .page-archive .archive-heading { margin:0 20px 60px; line-height:1.4; } } .page-archive .archive-entry { margin:0 0 60px; } .page-archive .entry-title { margin:15px 0 20px; } .page-archive .archive-date { line-height:1; } .page-archive .categories { margin:20px 0 0; } .page-archive .entry-thumb-link, .page-archive .archive-entry-body { display:none; } .page-archive .archive-header-category { margin:0; } .page-archive .archive-heading { margin:5px 0 60px; font-size:26px; } @media only screen and (max-width: 859px) { .page-archive .archive-heading { margin:5px 20px 60px; line-height:1.4; } } @media only screen and (max-width: 859px) { .page-archive .archive-entries { margin:0 20px; } } /* パンくず */ .breadcrumb { width:860px; margin:0 auto; font-size:14px; } @media only screen and (max-width: 859px) { .breadcrumb { width:auto; margin:0 20px; } } .breadcrumb a { color:#787878 !important; } .breadcrumb a:hover { opacity:0.8; } /* 検索結果 */ .search-result { margin:0 0 60px; } .search-result .archive-heading { margin:0 0 20px; } @media only screen and (max-width: 859px) { .search-result .archive-heading { margin:0 20px 20px; } } .search-result-form { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; padding:4px 10px; border:1px solid #c1c1c1; border-radius:0; -webkit-box-sizing:border-box; box-sizing:border-box; font-size:15px; } @media only screen and (max-width: 859px) { .search-result-form { max-width:100%; margin:0 20px; } } .search-result-form .search-result-input { -webkit-box-flex:1; -ms-flex:1 0; flex:1 0%; height:20px; padding:5px; border:none; font-size:15px; outline:0; } .search-result-form .search-result-button { width:30px; height:30px; padding:0; background:transparent url(https://cdn.blog.st-hatena.com/images/theme/search@2x.png?version=84c17382a0e01792a172378d0e10ca) no-repeat center; background-size:30px; border:none; outline:none; color:transparent; overflow:hidden; opacity:.5; cursor:pointer; } .search-result-form .search-result-button:hover { opacity:.35; } .page-archive span.highlight { margin:.1em; padding:.05em .2em; background-color:#ffc; border:none; border-radius:0; font-weight:normal; } @media only screen and (max-width: 859px) { .page-archive p { margin:0 20px; } } /* プロフィール */ .page-about dd { margin:0 0 20px; } @media only screen and (max-width: 859px) { .page-about dl { margin:0 20px; } } /*---------------------- sytle ----------------------*/ .entry-content hr { width:100%; height:1px; background-color:#ebebeb; border:0; } @media only screen and (max-width: 859px) { .entry-content hr { width:auto; margin:0 20px; } } .entry-content .hatena-asin-detail { margin:0 auto 30px; padding:40px; box-sizing:border-box; } @media only screen and (max-width: 859px) { .entry-content .hatena-asin-detail { padding:20px; } } .hatena-asin-detail .hatena-asin-detail-image { margin:0 15px 15px 0; } .hatena-asin-detail ul { margin:0 !important; } .entry-content blockquote { position:relative; width:750px; margin:0 auto; padding:10px 15px 10px 50px; box-sizing:border-box; font-style:italic; color: #555; } @media only screen and (max-width: 859px) { .entry-content blockquote { width:auto; margin:0 20px; } } .entry-content blockquote:before{ display:inline-block; position:absolute; top:10px; left:-3px; vertical-align:middle; content:"“"; font-family:sans-serif; color:#cfcfcf; font-size:90px; line-height:1; } .entry-content blockquote p { margin:10px 0; font-size:0.9em; } .entry-content blockquote cite { display:block; font-size:0.9em; } .entry-content ul, .entry-content ol { margin:0; padding:0; } .entry-content ol ul li, .entry-content ul ol li, .entry-content ul ul li, .entry-content ol ol li { margin-left:20px; } @media only screen and (max-width: 859px) { .entry-content ol ul, .entry-content ul ol, .entry-content ul ul, .entry-content ol ol { margin:0 !important; } } .entry-content li { list-style-position:outside; margin: 0 0 .6em 1.4em; } .entry-content table, .entry-content tr { width:auto !important; } .entry-content table { margin:0 auto !important; border-collapse:collapse; } .entry-content th, .entry-content td { padding:5px 10px; border:solid 1px #f0f0f0; font-size:.9em; text-align:center; } .entry-content pre { padding:30px; background-color:#f5f5f5; font-size:.8em; box-sizing:border-box; color:#787878; } .entry-content .figure-image figcaption { font-size:85%; } .entry-content iframe { display:block; margin:0 auto !important; } .entry-content iframe + .hatena-citation { text-align:center; margin-bottom:20px; } .entry-content .twitter-tweet { margin:0 auto!important; } /* ブログカード */ .embed-card { margin:0 auto !important; } .embed-card + .hatena-citation { text-align:center; } /* ゲスト footer */ .guest-footer-content p { display:none; } /*---------------------- インデックスページ 一覧形式 ----------------------*/ .page-index .archive-entries { display:-webkit-box; display:-ms-flexbox; display:flex; -ms-flex-wrap:wrap; flex-wrap:wrap; } .page-index .archive-entry { display:-webkit-box; display:-ms-flexbox; display:flex; -ms-flex-wrap:wrap; flex-flow:column; flex-wrap:wrap; width:400px; margin-bottom:75px; } .page-index .archive-entry:nth-child(odd) { margin-right:60px; } .page-index .entry-thumb-link { position:relative; z-index:1; display:block; width:100%; margin-bottom:15px; padding-top:66.27906977%; /* 画像比率固定 570/860 */ order:-1; } .page-index .entry-thumb { float:none; position:absolute; top:0; left:0; z-index:1; display:block; width:100%; height:100%; margin:0; background-repeat:no-repeat; background-position:50% 50%; background-size:100% auto; } .page-index .entry-title { margin:3px 0 0 0; } .page-index .archive-date { line-height:inherit; } @media only screen and (max-width: 859px) { .page-index .archive-entries { margin-left:0; margin-right:0; } .page-index .archive-entry-header, .page-index .categories { margin-left:20px; margin-right:20px; } .page-index .archive-entry { width:100%; margin-bottom:90px; } .page-index .archive-entry:nth-child(odd) { margin-right:0; } } table { width: 100%; table-layout: fixed; word-break: break-all; word-wrap: break-all; } .no-entry .entry-content { position: relative; } .no-entry .entry-content :not(:first-child) { display: block; } figure { max-width: 100%; }