@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%;
}