/* */
@charset "UTF-8";
/*
Theme Name: 510.0
Theme URI: http://blog.hatena.ne.jp/-/store/theme/6653586347149180725
Description: Innocentをベースにモバイルユーザビリティの向上を目的に改良した、レスポンシブデザイン対応のブログテーマです。
改変元のテーマの作者 (半月)
改変元のテーマ名(Innocent)
改変元のテーマのストアURL(http://blog.hatena.ne.jp/-/store/theme/6653586347149180725)
Author: hogehoge223
Author http://www.gamehuntblog.com/
*/
/* Responsive: yes */
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css");
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block; }
ol, ul {
list-style: none; }
blockquote, q {
quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none; }
table {
border-collapse: collapse;
border-spacing: 0; }
a {
background-color: transparent; }
a:hover {
cursor: pointer; }
a:active, a:hover {
outline: 0; }
b, strong {
font-weight: bold; }
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; }
textarea, input[type="text"], input[type="number"] {
-webkit-appearance: none;
border-radius: 0; }
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; }
::-moz-selection {
background-color: #ccc;
color: #fff; }
::selection {
background-color: #ccc;
color: #fff; }
html {
-webkit-text-size-adjust: none; }
body {
color: #333;
font-size: 15px;
font-family: "ヒラギノ角ゴシック", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meryo, "メイリオ", Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
line-height: 1.5;
word-wrap: break-word;
background: #fff; }
a {
color: inherit;
text-decoration: none; }
@media screen and (min-width: 1024px) {
a:hover {
color: #41769f; } }
h1 {
font-size: 1.625rem;
margin-top: 2em;
margin-bottom: 1em; }
h2 {
font-size: 1.5rem;
margin-top: 2em;
margin-bottom: 1em; }
h5 {
font-size: 1.125rem;
margin-top: 1em;
margin-bottom: 0.5em; }
h6 {
font-size: 1rem;
margin-top: 1em;
margin-bottom: 0.5em; }
p {
margin: 0 0 1.5em; }
ul, ol {
margin: 0 0 1.5em 0;
padding: 0; }
ul {
list-style: circle; }
ol {
list-style: decimal; }
ul li, ol li {
margin-bottom: .35em; }
ul li:last-child, ol li:last-child {
margin-bottom: 0; }
li > ul, li > ol {
margin-bottom: 0;
margin-left: 1.5em; }
dl {
margin: 0; }
dt {
font-weight: 700;
margin-bottom: 0.75em; }
dd {
margin: 0 0 1.5em 1.5em; }
/**
ヘッダー
*/
#globalheader-container {
color: #eee;
background: #376b89; }
#blog-title {
color: #fff;
font-size: 24px;
text-align: center;
padding: 5px 0 16px;
background: #376b89 !important;
box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.13); }
@media screen and (min-width: 1024px) {
#blog-title {
text-align: left; } }
@media screen and (max-width: 1023px) {
#blog-title {
padding-top: 6px; } }
.globalheader-off #blog-title {
padding-top: 14px; }
.header-image-only #title {
width: 210px;
height: 26px; }
#title {
display: inline-block;
font-size: 25px;
font-weight: bold;
line-height: 1.2;
margin: 0; }
@media screen and (max-width: 1023px) {
#title {
font-size: 22px; } }
#title a {
color: #fff; }
@media screen and (max-width: 1023px) {
#title a a:hover {
opacity: 0.7; } }
#blog-description {
color: #e7f1fd;
font-size: 12px;
font-weight: normal;
letter-spacing: normal;
margin: 8px 0 0; }
@media screen and (max-width: 1023px) {
#blog-description {
font-size: 11px;
margin-top: 6px; } }
/**
ナビゲーション
*/
#global-navigation {
background: #376b89;
font-size: 0;
margin-top: -18px;
padding: 5px 0 4px;
box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.13); }
#global-navigation .global-navigation-inner {
-webkit-font-smoothing: antialiased;
margin: 0 auto;
height: 40px;
white-space: nowrap; }
@media screen and (max-width: 1023px) {
#global-navigation .global-navigation-inner {
width: 100%;
height: 38px;
padding: 0 16px;
overflow-x: auto;
overflow-y: hidden;
box-sizing: border-box;
text-align: center;
-webkit-overflow-scrolling: touch; } }
#global-navigation .menu {
display: inline-block; }
#global-navigation .menu:first-child a {
padding-left: 0; }
#global-navigation .menu a {
display: block;
color: #d2e2f7;
font-size: 14px;
font-weight: bold;
padding: 10px 10px 0;
height: 40px;
text-align: center;
overflow: hidden;
box-sizing: border-box; }
@media screen and (min-width: 1024px) {
#global-navigation .menu a:hover {
color: #fff; } }
@media screen and (max-width: 539px) {
#global-navigation .menu a {
padding: 9px 10px 0;
height: 38px; } }
#content-inner {
max-width: 656px;
margin: 0 auto; }
@media screen and (max-width: 767px) {
#content-inner {
padding: 0 16px; } }
@media screen and (max-width: 539px) {
#content-inner {
padding: 0 12px; } }
#top-box {
padding-top: 24px; }
@media screen and (max-width: 539px) {
#top-box {
padding-top: 20px; } }
#content {
padding-top: 24px; }
@media screen and (max-width: 539px) {
#content {
padding-top: 20px; } }
#top-box + #content {
border-top: 0; }
.entry, .page-archive .archive-entry {
border-bottom: 1px solid #e6e6e6;
margin-bottom: 26px;
padding-bottom: 26px; }
.entry-footer {
margin-top: 20px; }
.pager {
margin-bottom: 36px; }
#wrapper {
border-bottom: 1px solid #e6e6e6;
margin-bottom: 36px; }
.hatena-module {
margin-bottom: 48px; }
#footer {
padding-bottom: 28px;
padding-top: 28px; }
@media screen and (max-width: 1023px) {
#footer-inner, .breadcrumb-inner {
padding-left: 36px;
padding-right: 36px; } }
@media screen and (min-width: 1024px) {
#footer-inner, .breadcrumb-inner {
padding-left: 54px;
padding-right: 54px; }
.pager {
margin-bottom: 48px; }
#wrapper {
margin-bottom: 48px; } }
#blog-title-inner, #footer-inner, .breadcrumb-inner {
margin: 0 auto;
max-width: 656px;
padding: 0 12px; }
.entry-content {
font-size: 16px;
margin-top: 28px; }
@media screen and (max-width: 539px) {
.entry-content {
margin-top: 18px; } }
.entry-content ul, .entry-content ol {
margin-left: 22px; }
.entry-content ul > li > ul, .entry-content ul > li ol, .entry-content ol > li > ul, .entry-content ol > li ol {
margin-top: .3em; }
.entry-content ul > li > ul {
list-style: disc; }
.entry-content .check {
border: 1px solid #9ecfc1;
background: #ecf6f3;
border-radius: 4px;
padding: 12px 14px;
margin-bottom: 1.5em; }
.entry-content .check ul, .entry-content .check ol {
margin-left: 20px; }
.entry-content .check ul:last-child, .entry-content .check ol:last-child {
margin-bottom: 0; }
.entry-content .check br {
display: none; }
.breadcrumb {
font-size: 0.9375em; }
.breadcrumb-gt {
margin: 0 4px; }
.breadcrumb-inner {
font-size: 11px;
color: #777;
line-height: 1.5; }
.page-entry .breadcrumb {
margin-bottom: 0; }
.entry-header {
position: relative; }
.entry-title {
color: #444;
font-size: 26px;
font-weight: bold;
line-height: 1.3;
margin: 0; }
@media screen and (max-width: 539px) {
.entry-title {
font-size: 22px; } }
.date {
color: #999;
font-size: 0.875em;
margin-bottom: 7px; }
.categories {
font-size: 0.875em;
margin-top: 12px; }
.categories a {
border: 1px solid #e6e6e6;
border-radius: 2px;
float: left;
display: block;
line-height: 32px;
margin: 0 6px 6px 0;
padding: 0 12px; }
@media screen and (min-width: 1024px) {
.categories a:hover {
background-color: #f6f6f6;
color: #333; } }
.entry-header-menu {
background-color: #fff;
border-radius: 50%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
height: 48px;
line-height: 1;
text-align: center;
width: 48px;
position: absolute;
top: 0;
right: -55px; }
.entry-header-menu a::before {
content: "\f044";
display: block;
font: normal 16px/48px FontAwesome;
margin-left: 4px;
margin-top: 2px;
vertical-align: middle; }
.entry-header-menu a {
font-size: 0;
display: block;
height: 100%;
width: 100%; }
@media screen and (max-width: 1023px) {
.entry-header-menu {
display: none !important; } }
.entry-header .social-buttons {
font-size: 0;
line-height: 1;
margin: 12px 0 -8px; }
.entry-header .social-button-item {
display: inline-block;
margin: 0 8px 8px 0; }
.customized-header {
margin-top: 18px; }
.entry-content > *:first-child {
margin-top: 0; }
.entry-content > *:last-child {
margin-bottom: 0; }
.entry-content .entry-see-more {
display: inline-block;
color: #f8f8f8;
font-size: 14px;
line-height: 44px;
min-width: 176px;
text-align: center;
text-decoration: none;
background: #333;
border-radius: 2px;
box-sizing: border-box;
transition: all linear .2s; }
@media screen and (min-width: 1024px) {
.entry-content .entry-see-more:hover {
background-color: #555; } }
.entry-content .footnote {
font-size: 0.875em;
line-height: 1.5; }
.entry-content .footnote p.footnote {
font-size: 1em;
margin: 0 0 0.5em; }
.entry-content .footnote p.footnote:last-child {
margin-bottom: 0; }
.entry-footer-section {
color: #999;
display: block;
font-size: 0.875em;
margin-bottom: 24px; }
.entry-footer .social-buttons {
font-size: 0;
line-height: 1;
margin-bottom: 24px; }
.entry-footer .social-button-item {
display: inline-block;
margin: 0 8px 8px 0; }
.page-index .customized-footer, .page-category-category_name .customized-footer {
display: none; }
.customized-footer {
margin-bottom: 28px; }
.entry-content a, .comment-content a {
color: #3872b8;
text-decoration: underline; }
.entry-content a.keyword, .comment-content a.keyword {
border-bottom: 1px dotted;
text-decoration: none; }
.table-of-contents, .entry-content ul.table-of-contents {
border: 1px solid #e6e6e6;
padding: 14px 18px;
margin: 0 0 25px 0;
list-style: circle; }
.table-of-contents li, .entry-content ul.table-of-contents li {
margin-left: 20px;
margin-bottom: 0; }
.table-of-contents li:not(:last-child), .entry-content ul.table-of-contents li:not(:last-child) {
padding-bottom: 4px; }
.table-of-contents ul, .entry-content ul.table-of-contents ul {
margin-top: 4px;
list-style: disc; }
h3 {
font-size: 20px;
font-weight: bold;
color: #fff;
background-color: #43759d;
border-left: 5px solid #629fcc;
padding: 12px 14px 12px 14px;
border-radius: 4px;
line-height: 1.3;
letter-spacing: normal;
margin: 1.5em 0 1.3em; }
@media screen and (max-width: 539px) {
h3 {
padding: 10px 12px; } }
h4 {
color: #444;
font-size: 19px;
font-weight: bold;
padding: 0 0 6px 0;
border-bottom: 2px solid #5095c5;
letter-spacing: normal;
margin: 1.5em 0 1.2em; }
@media screen and (max-width: 1023px) {
h4 {
margin-bottom: 1em; } }
h5 {
color: #444;
font-size: 20px;
font-weight: bold;
border-left: 4px solid #477ea8;
padding-left: 12px;
margin: 1.5em 0 1.2em; }
@media screen and (max-width: 1023px) {
h5 {
margin-bottom: 1em; } }
.entry-content table {
width: 100%;
font-size: 14px;
margin-bottom: 25px; }
@media screen and (min-width: 1024px) {
.entry-content table {
border: 1px solid #dadada; } }
@media screen and (max-width: 1023px) {
.entry-content table {
display: block;
overflow-x: auto;
word-wrap: break-word;
word-break: keep-all; } }
@media screen and (max-width: 539px) {
.entry-content table {
font-size: 13px; } }
.entry-content table tr:nth-child(odd) td {
background: #f8f8f8; }
.entry-content table th, .entry-content table td {
padding: 8px 9px;
border: 1px solid #d8d8d8; }
@media screen and (max-width: 1023px) {
.entry-content table th, .entry-content table td {
padding: 7px 9px;
border: 1px solid #ddd; } }
.entry-content table th {
font-weight: bold;
text-align: left;
background: #f8f8f8; }
pre, .entry-content pre {
border: 1px solid #e6e6e6;
font-family: Consolas, "Courier New", Courier, Monaco, monospace;
font-size: 0.9375em;
line-height: 1.4;
margin: 0 0 1.7em;
padding: 1.6em;
word-wrap: normal; }
code, .entry-content code {
background-color: #fee5ee;
border: 0;
border-radius: 0;
color: #f92672;
font-family: Consolas, "Courier New", Courier, Monaco, monospace;
font-size: 0.9375em;
margin: 0;
padding: 0; }
pre > code, .entry-content pre > code {
color: inherit;
font-family: inherit;
font-size: 1em;
margin: 0;
padding: 0; }
blockquote, .entry-content blockquote {
border: 1px solid #e6e6e6;
color: #4a4a4a;
margin: 1.85em 0 1.7em;
padding: 32px 24px 0.1em;
position: relative; }
@media screen and (max-width: 767px) {
blockquote, .entry-content blockquote {
padding: 28px 18px 0.1em; } }
blockquote::before, .entry-content blockquote::before {
background-color: #fff;
content: "\f10d";
display: inline-block;
font: normal 28px/1 FontAwesome;
vertical-align: middle;
position: absolute;
top: -10px;
left: 24px; }
blockquote cite, .entry-content blockquote cite {
display: block;
margin-bottom: 1.5em;
text-align: right; }
blockquote > *:first-child, .entry-content blockquote > *:first-child {
margin-top: 0; }
hr {
background-color: #e6e6e6;
border: 0;
height: 1px;
margin: 0 0 28px; }
img {
height: auto;
max-width: 100%;
vertical-align: middle; }
embed, iframe, object {
max-width: 100%; }
.hatena-asin-detail ul {
margin: 0; }
.hatena-asin-detail ul li {
font-size: 14px; }
@media screen and (max-width: 539px) {
.hatena-asin-detail ul li {
font-size: 13px; } }
.hatena-asin-detail ul li:not(:last-child) {
margin-bottom: 3px; }
h2.archive-heading {
color: #444;
font-size: 24px;
font-weight: bold;
margin: 0 0 13px; }
.archive-entry-body p.entry-description {
margin: 0 0 14px; }
/* ASIN, iTunes */
.hatena-asin-detail, .itunes-embed {
border: 1px solid #e6e6e6;
font-size: 0.9375em;
line-height: 1.5;
margin: 0 0 1.7em;
padding: 12px 17px;
position: relative; }
.hatena-asin-detail:before, .itunes-embed:before {
color: #e6e6e6;
display: inline-block;
font: normal normal normal 32px/1 FontAwesome;
vertical-align: middle;
position: absolute;
bottom: 0;
right: 0; }
@media screen and (max-width: 539px) {
.hatena-asin-detail, .itunes-embed {
padding: 12px 14px 10px; } }
.itunes-embed::before {
content: "\f179"; }
.hatena-asin-detail:before {
content: "\f270"; }
.hatena-asin-detail .hatena-asin-detail-image, .hatena-asin-detail .itunes-embed .itunes-embed-image {
float: left;
margin-right: 1.6em;
max-width: 60px; }
@media screen and (max-width: 539px) {
.hatena-asin-detail .hatena-asin-detail-image, .hatena-asin-detail .itunes-embed .itunes-embed-image {
margin-right: 1.2em; } }
@media screen and (min-width: 768px) {
.hatena-asin-detail .hatena-asin-detail-image, .itunes-embed .itunes-embed-image {
max-width: 100px; } }
.hatena-asin-detail .hatena-asin-detail-info, .itunes-embed .itunes-embed-info {
overflow: hidden; }
.hatena-asin-detail .hatena-asin-detail-title, .itunes-embed .itunes-embed-title {
margin-bottom: 0.5em; }
@media screen and (min-width: 1024px) {
.hatena-asin-detail .hatena-asin-detail-title, .itunes-embed .itunes-embed-title {
font-size: 1.1em; } }
.hatena-asin-detail .hatena-asin-detail-info ul li:last-child, .itunes-embed .itunes-embed-info ul li:last-child {
margin-top: 0.4em; }
/* Repeatable Patterns
========================================================================== */
.hatena-image-right {
margin: 0 0 1.5em 1.5em; }
.hatena-image-left {
margin: 0 1.5em 1.5em 0; }
#content-inner::before, #content-inner::after, #main-inner::before, #main-inner::after, .categories::before, .categories::after, .entry-content::before, .entry-content::after, .comment-box::before, .comment-box::after, .pager::before, .pager::after, #box2-inner::before, #box2-inner::after, .hatena-urllist::before, .hatena-urllist::after {
content: "";
display: table; }
#content-inner::after, #main-inner::after, .categories::after, .entry-content::after, .comment-box::after, .pager::after, #box2-inner::after, .hatena-urllist::after {
clear: both; }
@media screen and (min-width: 1024px) {
#blog-title-inner, #content-inner, #footer-inner, .global-navigation-inner, .breadcrumb-inner, .main-navigation-inner {
max-width: 1065px; }
.main-navigation-inner {
padding-left: 54px;
padding-right: 54px; }
#content {
padding-bottom: 48px; }
#wrapper {
border-bottom: 0;
box-sizing: border-box;
float: left;
margin-right: -330px;
margin-bottom: 0;
padding-right: 330px;
width: 100%; }
#main-inner {
border-right: 1px solid #e6e6e6;
padding-right: 30px; }
#box2 {
float: right;
width: 330px; }
#box2-inner {
border-left: 1px solid #e6e6e6;
margin-left: -1px;
padding-left: 30px; } }
@media screen and (min-width: 1280px) {
#blog-title-inner, #content-inner, #footer-inner, .breadcrumb-inner, .global-navigation-inner, .main-navigation-inner {
max-width: 1101px; } }
#recommend-entries {
background-color: #fff;
padding: 48px 0; }
#recommend-entries-inner {
margin: 0 auto;
max-width: 1101px;
padding: 0 54px; }
#recommend-entries .hatena-module-entries-access-ranking {
margin-bottom: 0; }
#recommend-entries .urllist-with-thumbnails {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin: 0; }
#recommend-entries .urllist-item {
border-top: 0;
padding: 0;
width: 20%;
position: relative; }
@media screen and (max-width: 1279px) {
#recommend-entries-inner {
max-width: 1065px; }
#recommend-entries .urllist-item {
width: 25%; }
#recommend-entries .urllist-item:nth-child(5) {
display: none; } }
@media screen and (max-width: 1023px) {
#recommend-entries-inner {
max-width: 656px; }
#recommend-entries .urllist-item {
width: 33.3333%; }
#recommend-entries .urllist-item:nth-child(4) {
display: none; } }
@media screen and (max-width: 767px) {
#recommend-entries-inner {
padding: 0 36px; } }
@media screen and (max-width: 599px) {
#recommend-entries .urllist-item {
width: 50%; }
#recommend-entries .urllist-item:nth-child(3) {
display: none; } }
@media screen and (max-width: 539px) {
#recommend-entries {
display: none; } }
#recommend-entries .urllist-image-link {
display: block;
margin: 0;
overflow: hidden; }
#recommend-entries .urllist-image {
box-sizing: border-box;
float: none;
margin: 0;
opacity: 0.8;
width: 100%;
-webkit-transition: all .3s ease;
transition: all .3s ease; }
#recommend-entries .urllist-item:hover .urllist-image {
opacity: 1;
-webkit-transform: scale(1.2);
transform: scale(1.2); }
#recommend-entries .urllist-title-link {
background-color: rgba(0, 0, 0, 0.5);
background: transparent -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.5));
background: transparent linear-gradient(transparent, rgba(0, 0, 0, 0.5));
box-sizing: border-box;
color: #fff;
font-size: 0.8667em;
font-weight: 700;
line-height: 1.2;
padding: 16px 12px 11px;
width: 100%;
position: absolute;
left: 0;
bottom: 0; }
#recommend-entries .bookmark-widget-counter {
display: inline-block;
line-height: 1;
position: absolute;
top: 10px;
right: 12px; }
.page-archive .archive-entry-body {
margin-top: 28px; }
.page-archive .entry-thumb {
margin: 28px 26px 26px 0; }
@media screen and (min-width: 768px) {
.page-archive .entry-thumb {
margin-right: 32px;
margin-bottom: 32px; } }
.page-archive .social-buttons {
clear: both;
display: block; }
.comment-box {
text-align: right; }
.comment-box .comment {
list-style: none;
margin: 0;
padding: 0; }
.entry-comment {
border-top: 1px solid #ddd;
padding: 20px 0 20px 60px;
position: relative;
text-align: left; }
.entry-comment:first-child {
border-top: 0;
margin-top: 16px;
padding-top: 0; }
.entry-comment .comment-user-name {
color: #222;
display: block;
font-weight: 700;
margin-bottom: 6px; }
.entry-comment .comment-user-name img {
border-radius: 2px;
height: 40px !important;
width: 40px !important;
position: absolute;
top: 28px;
left: 0; }
.entry-comment:first-child .comment-user-name img {
top: 0; }
@media screen and (min-width: 768px) {
.entry-comment {
padding-left: 72px; }
.entry-comment .comment-user-name img {
height: 48px !important;
width: 48px !important; } }
.comment-content {
margin-bottom: 12px; }
.comment-content > p:last-child {
margin-bottom: 0; }
.comment-metadata {
color: #999;
font-size: 0.9333em;
margin-bottom: 0; }
.leave-comment-title {
color: #333;
border: 1px solid #ddd;
box-sizing: border-box;
display: inline-block;
font-size: 14px;
line-height: 40px;
min-width: 170px;
text-align: center;
border-radius: 2px; }
@media screen and (min-width: 768px) {
.leave-comment-title:hover {
background-color: #f6f6f6;
color: #333; } }
/**
ページャー
*/
.pager {
font-size: 0.9375em; }
.pager.autopagerize_insert_before {
margin-right: 20px; }
.pager a {
text-decoration: underline; }
.pager-prev::before, .pager-next::before {
color: #999;
display: block;
font-size: 0.875em;
margin-bottom: 3px;
text-transform: uppercase; }
.pager-prev {
float: left;
text-align: left;
width: 48%; }
.pager-prev::before {
content: "前の記事"; }
.pager-next {
float: right;
text-align: right;
width: 48%; }
.pager-next::before {
content: "次の記事"; }
.pager-arrow {
display: none; }
.hatena-module {
font-size: 0.9375em;
line-height: 1.5; }
.hatena-module-title {
color: #222;
font-weight: 700;
margin-bottom: 18px; }
.hatena-urllist {
list-style: none;
margin: -12px 0;
padding: 0; }
.hatena-urllist li {
border-top: 1px solid #e6e6e6;
padding: 12px 0;
position: relative; }
.hatena-urllist li:first-child {
border-top: 0; }
.id {
display: block;
font-weight: 700;
margin-bottom: 8px; }
.profile-icon {
border-radius: 2px;
float: left;
height: 48px;
margin: 0 20px 20px 0;
width: 48px; }
.page-about .entry-content img.profile-icon {
margin: 0 8px 8px 0; }
.profile-description > p:last-child {
margin-bottom: 0; }
.hatena-follow-button-box {
margin-top: 24px; }
.hatena-follow-button-box + .hatena-follow-button-box {
margin-top: 8px; }
/**
最新記事・注目記事
*/
.urllist-date-link {
color: #999;
font-size: 13px;
overflow: hidden;
padding-bottom: 3px; }
.urllist-title-link {
font-size: 1em; }
.urllist-categories {
font-size: 0.8667em;
overflow: hidden;
padding-top: 3px; }
.urllist-category-link {
font-size: 1em;
margin-right: 6px; }
.urllist-entry-body {
color: #999;
font-size: 0.8667em;
line-height: inherit;
overflow: hidden;
padding-top: 3px; }
.urllist-with-thumbnails {
margin: -20px 0; }
.urllist-with-thumbnails li::before {
content: none; }
.urllist-with-thumbnails li {
border-top: 1px solid #e6e6e6;
padding: 14px 0; }
.urllist-with-thumbnails li:first-child {
border-top: 0; }
.urllist-with-thumbnails li .urllist-image {
float: left;
margin: 0 13px 0 0;
border-radius: 3px;
width: 70px;
height: 70px; }
@media screen and (min-width: 1024px) {
.urllist-with-thumbnails li .urllist-image:hover {
opacity: .8; } }
/* Recent Comment */
.recent-comments .user-id img {
border-radius: 2px;
margin-right: 5px;
vertical-align: middle;
position: relative;
top: -2px; }
.recent-comments .recent-comment-time {
color: #999;
font-size: 0.8667em;
font-style: normal;
opacity: 1; }
/* Archive - List Style */
.hatena-urllist .archive-module-year {
padding-left: 24px; }
.hatena-urllist .archive-module-year .archive-module-months {
margin-bottom: -2px;
margin-top: 2px; }
.hatena-urllist .archive-module-year .archive-module-month {
margin-left: 0;
padding: 2px 0 2px 24px; }
.hatena-urllist .archive-module-year .archive-module-button {
display: inline-block;
font-size: 0;
opacity: 1;
position: absolute;
top: 14px;
left: 7px; }
.hatena-urllist .archive-module-year .archive-module-show-button, .hatena-urllist .archive-module-year .archive-module-hide-button {
opacity: 1; }
.hatena-urllist .archive-module-year .archive-module-show-button::before, .hatena-urllist .archive-module-year .archive-module-hide-button::before {
color: #999;
font: normal 16px/1 FontAwesome;
display: inline-block;
-webkit-transition: .3s all ease;
transition: all .3s ease;
vertical-align: middle;
position: relative; }
.hatena-urllist .archive-module-year .archive-module-show-button:hover::before, .hatena-urllist .archive-module-year .archive-module-hide-button:hover::before {
color: #111; }
.hatena-urllist .archive-module-year .archive-module-show-button::before {
content: "\f105"; }
.hatena-urllist .archive-module-year .archive-module-hide-button::before {
content: "\f107";
left: -3px; }
/* Archive - Calendar Style */
.archive-module-calendar .archive-module-calendar-selector {
margin-bottom: 24px; }
.archive-module-calendar table {
font-size: 1em;
margin-bottom: 0; }
.archive-module-calendar th, .archive-module-calendar td {
font-size: 0.9333em;
line-height: 40px;
padding: 0; }
.archive-module-calendar th a, .archive-module-calendar td a {
text-decoration: underline; }
/**
カテゴリ
*/
.hatena-module-category .hatena-urllist {
margin: 0 0 -6px;
padding: 0; }
.hatena-module-category .hatena-urllist li::before {
content: none; }
.hatena-module-category .hatena-urllist li {
border-top: 0;
display: block;
float: left;
margin: 0 6px 6px 0;
padding: 0; }
.hatena-module-category .hatena-urllist li a {
border: 1px solid #e6e6e6;
border-radius: 2px;
display: block;
font-size: 0.8667em;
line-height: 32px;
padding: 0 12px; }
@media screen and (min-width: 768px) {
.hatena-module-category .hatena-urllist li a:hover {
background-color: #f6f6f6;
color: #333; } }
/**
検索
*/
.search-form, .search-result-form {
background-color: transparent;
border-radius: 0;
border: 0;
box-sizing: border-box;
max-width: 336px;
position: relative; }
.search-form .search-module-input, .search-result .search-result-input {
width: 100%;
border: 1px solid #ddd;
box-shadow: none;
height: 44px;
line-height: 44px;
outline: 0;
padding: 8px 52px 8px 12px;
box-sizing: border-box; }
.search-result-form .search-result-input {
font-size: 0.9375em; }
@media screen and (min-width: 1024px) {
.search-result-input:hover {
border-color: #bbb; } }
.search-form .search-module-button, .search-result-form .search-result-button {
background: transparent url("https://cdn.blog.st-hatena.com/images/theme/search.png?version=a11a0e0f57b771831b00fa2d305c51") no-repeat center center;
border: 0;
height: 44px;
line-height: 44px;
opacity: 0.6;
overflow: hidden;
padding: 0;
text-indent: 100%;
-webkit-transition: all .3s ease;
transition: all .3s ease;
width: 44px;
white-space: nowrap;
position: absolute;
top: 1px;
right: 1px; }
.search-form .search-module-button:hover, .search-result-form .search-result-button:hover {
opacity: 1; }
.search-result {
margin-bottom: 40px; }
.search-result + p {
margin-bottom: 36px; }
.page-archive span.highlight {
background-color: #fee5ee;
border: 0;
border-radius: 0;
color: #f92672;
font-weight: 700;
margin: 0;
padding: 0; }
/* Group */
.hatena-module-circles .circle-urllist {
margin: -20px 0; }
.hatena-module-circles .circle-urllist li {
padding: 20px 0; }
.hatena-module-circles .circle-urllist li a .circle-image {
border: 1px solid #e6e6e6;
border-radius: 2px;
box-sizing: border-box;
height: 44px;
margin-right: 20px;
padding: 8px;
width: 44px; }
/**
フッター
*/
#footer {
background-color: #3a3a3a;
color: rgba(255, 255, 255, 0.9);
font-size: 0.875em;
text-align: center; }
@media screen and (min-width: 1024px) {
#footer {
text-align: left; }
#footer a:hover {
color: #fff; } }
#footer address, #footer p {
margin: 0; }
#footer address img {
display: none; }
#footer p {
color: rgba(255, 255, 255, 0.5); }
/**
カラーボックス
*/
#colorbox, #cboxOverlay, #cboxWrapper {
overflow: visible; }
#cboxOverlay {
background-color: #000;
opacity: 0.85 !important; }
#colorbox #cboxContent, #colorbox #cboxContent #cboxLoadedContent {
background-color: transparent;
overflow: visible !important; }
.cboxPhoto {
box-shadow: 0 0 20px rgba(0, 0, 0, 0.7); }
/*
広告
*/
.google-afc-image, .google-afc-text {
font-family: inherit;
font-size: inherit;
margin: 0 0 32px; }
.page-archive .google-afc-image, .page-archive .google-afc-text {
border-bottom: 1px solid #e6e6e6;
margin-bottom: 36px;
padding-bottom: 36px; }
@media screen and (min-width: 768px) {
.page-archive .google-afc-image, .page-archive .google-afc-text {
margin-bottom: 48px;
padding-bottom: 48px; } }
.google-afc-image div.google_ads_by, .google-afc-text div.google_ads_by {
font-size: 13px;
margin-bottom: 8px; }
.google-afc-image ul, .google-afc-text ul {
margin: 0; }
.google-afc-image li, .google-afc-text li {
margin: 0 !important; }
.google-afc-image ul .title, .google-afc-text ul .title {
font-size: 17px;
margin-bottom: 8px; }
.google-afc-image ul .title a, .google-afc-text ul .title a {
font-size: 17px !important;
letter-spacing: normal;
padding: 0; }
.google-afc-image ul .summary, .google-afc-text ul .summary {
font-size: 13px !important;
margin: 0 8px 0 0; }
.google-afc-image ul .visible_url, .google-afc-text ul .visible_url {
font-size: 13px; }
.google-afc-image ul .visible_url a, .google-afc-text ul .visible_url a {
font-size: 13px !important;
letter-spacing: normal;
padding: 0; }
.google-afc-image .open-pro-modal, .google-afc-text .open-pro-modal {
font-size: 13px;
padding-top: 16px; }
.custom-adsense-label {
color: #888;
font-size: 12px;
margin-bottom: 8px; }
.custom-adsense-style {
text-align: center;
margin: 0 auto; }
@media screen and (max-width: 479px) and (min-width: 336px) {
.custom-adsense-style {
width: 336px;
height: 280px; } }
@media screen and (max-width: 335px) {
.custom-adsense-style {
width: 300px;
height: 250px; } }
.profile-icon {
border-radius: 4px;
margin: 0 14px 20px 0; }
.hatena-module-title {
font-size: 14px;
font-weight: bold;
color: #464646;
border-bottom: 1px solid #bbb;
padding-bottom: 4px; }
.sidebar-adsense {
text-align: center; }
.ssPanel {
padding: 12px 0 !important; }
.ssPanel div.ssTitle {
padding-left: 13px !important; }
.ssPanel > div.ssOriginalTemplateImgContainer {
padding-left: 0 !important; }
/**
アプリーチ
*/
#appreach-box {
max-width: 500px;
border: 1px solid #ddd;
background: #fff;
padding: 4px 6px;
border-radius: 4px;
line-height: 1.4;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.06); }
#appreach-box br {
display: none; }
#appreach-image {
margin-right: 15px !important;
margin-bottom: 0 !important; }
#appreach-appname {
color: #3a3a3a;
font-size: 18px;
font-weight: bold; }
#appreach-developer, #appreach-price, .appreach-powered {
color: #888;
font-size: 11px !important; }
#appreach-box .appreach-links {
margin-top: 10px; }
#appreach-itunes-link {
margin-right: 10px; }
@media screen and (min-width: 768px) {
#appreach-box .appreach-links img:hover {
opacity: 0.8; } }
/**
フォローボタン
**/
.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 {
color: #555;
font-size: 15px;
font-weight: bold;
margin-bottom: 12px; }
.custom-sns-follow-button ul {
margin: 0; }
.custom-sns-follow-button.narrow li {
padding: 0 5px; }
.custom-sns-follow-button.narrow li a {
padding: 9px 0; }
.custom-sns-follow-button li {
display: inline-block;
width: 33.3%;
font-size: 14px;
box-sizing: border-box;
padding: 0 8px; }
@media screen and (max-width: 539px) {
.custom-sns-follow-button li {
padding: 0 5px; } }
.custom-sns-follow-button li a {
display: block;
color: #fff;
padding: 13px 0;
text-align: center;
text-decoration: none;
border-radius: 3px;
background: #fff; }
@media screen and (min-width: 1024px) {
.custom-sns-follow-button li a {
transition: linear all .3s; } }
@media screen and (max-width: 539px) {
.custom-sns-follow-button li a {
padding: 9px 0; } }
.custom-sns-follow-button li .hatena {
background: #777;
border: 1px solid #777; }
.custom-sns-follow-button li .twitter {
background: #559fee;
border: 1px solid #559fee; }
.custom-sns-follow-button li .feedly {
background: #60c667;
border: 1px solid #60c667; }
@media screen and (min-width: 768px) {
.custom-sns-follow-button li a:hover {
color: #fff; }
.custom-sns-follow-button li .hatena:hover {
color: #777;
background: #fff; }
.custom-sns-follow-button li .twitter:hover {
color: #559fee;
background: #fff; }
.custom-sns-follow-button li .feedly:hover {
color: #60c667;
background: #fff; } }
/**
Millard
*/
.ssLimitedContainerHeader {
margin-top: 20px; }
.ssArticlesContainer .ssImg {
border-radius: 2px; }
/* */
/* ------------------------------------------------------ */
/* 510テーマの補正用 (h2を使うことが想定されていないので) */
/* ------------------------------------------------------ */
h2 {
font-size: 20px;
font-weight: bold;
color: #fff;
background-color: #43759d;
border-left: 5px solid #629fcc;
padding: 12px 14px 12px 14px;
border-radius: 4px;
line-height: 1.3;
letter-spacing: normal;
margin: 1.5em 0 1.3em; }
@media screen and (max-width: 539px) {
h2 {
padding: 10px 12px; } }
h3 {
color: #fff;
font-size: 19px;
font-weight: bold;
padding: 4px 4px 0 4px;
border-bottom: 2px solid #5095c5;
letter-spacing: normal;
margin: 1.5em 0 1.2em; }
@media screen and (max-width: 1023px) {
h3 {
margin-bottom: 1em; } }
h4 {
color: #444;
font-size: 16px;
font-weight: bold;
border-left: 4px solid #477ea8;
padding-left: 12px;
margin: 1.5em 0 1.2em; }
@media screen and (max-width: 1023px) {
h4 {
margin-bottom: 1em; } }
/* ------------------------------------------------------ */
:root {
/* 共通カラー */
--caution-bg-color: #FFEBEE;
--caution-font-color: #EF5350;
--caution-icon: "\f06a";
--point-bg-color: #FFF3E0;
--point-font-color: #FFA726;
--point-icon: "\f0eb";
--info-bg-color: #FFFDE7;
--info-font-color: #FFEB3B;
--info-icon: "\f0a1";
--hatena-bg-color: #E1F5FE;
--hatena-font-color: #4FC3F7;
--hatena-icon: "\f059";
--comment-bg-color: #FCE4EC;
--comment-font-color: #F48FB1;
--comment-icon: "\f086";
/* 用途別丸角クリップメモ */
--usu-caution-rmemo-bg-color: #FFEBEE;
--usu-caution-rmemo-font-color: red;
--usu-caution-rmemo-icon: "\f06a";
--caution-rmemo-bg-color: red;
--caution-rmemo-font-color: white;
--caution-rmemo-icon: "\f06a";
/* 丸角クリップメモ */
--p-rmemo-bg-color: #F48FB1;
--p-rmemo-font-color: white;
--b-rmemo-bg-color: #4FC3F7;
--b-rmemo-font-color: white;
--o-rmemo-bg-color: #FFB74D;
--o-rmemo-font-color: white;
/* BOX(タイトル上) */
--rbox-tu-bg-color: #FFFFFF;
--rbox-tu-font-color: #EF5350;
--bbox-tu-bg-color: #FFFFFF;
--bbox-tu-font-color: #4FC3F7;
--ybox-tu-bg-color: #FFFFFF;
--ybox-tu-font-color: #FFEB3B;
--gbox-tu-bg-color: #FFFFFF;
--gbox-tu-font-color: #62C1CE;
/* BOX(タイトル下) */
--rbox-tb-title-bg-color: #F48FB1;
--rbox-tb-bg-color: #FFEBEE;
--bbox-tb-title-bg-color: #039BE5;
--bbox-tb-bg-color: #F4FBFF;
--gbox-tb-title-bg-color: #31862D;
--gbox-tb-bg-color: #EAFAEE;
/* リンクボタン */
--r-link-btn-sq-color1: #EF6C6C;
--r-link-btn-sq-color2: #ED4545;
--r-link-btn-sq-shadow-color: rgba(198, 39, 39, 1);
--b-link-btn-sq-color1: #4EC2F7;
--b-link-btn-sq-color2: #29B6F6;
--b-link-btn-sq-shadow-color: rgba(3, 155, 229, 1);
/* 丸角リンクボタン */
--x-link-btn-icon: "\f054";
--p-link-btn-color1: #F9C4D6;
--p-link-btn-color2: #F8BBD0;
--p-link-btn-border-color: #F8BBD0;
--y-link-btn-color1: #FFD54F;
--y-link-btn-color2: #FFD54F;
--y-link-btn-border-color: #FFEB3B;
--b-link-btn-color1: #4FC3F7;
--b-link-btn-color2: #4FC3F7;
--b-link-btn-border-color: #4FC3F7;
}
/*=================================================================================
テスト中
=================================================================================*/
/*=================================================================================
画像
=================================================================================*/
img {
margin: 1em 0 1em 0;
vertical-align: bottom;
}
/*=================================================================================
ブログカード
=================================================================================*/
iframe.embed-blogcard {
}
cite.hatena-citation {
margin: -0.8em 0 2.0em 0;
font-size: 80%;
}
/*=================================================================================
メモ
=================================================================================*/
.simple-memo {
padding: 0.5em;
background-color: #F3F3F3;
}
/*=================================================================================
Code
=================================================================================*/
/*------------------------------
共通
------------------------------*/
pre.code {
font-size: 90%;
/* border: solid 1px #F0F0F0;*/
}
pre.code {
margin: 2.0em 0 1.0em 0 !important;
padding: 0 0 0 0 !important;
}
/* 言語名 */
pre.code::before {
position: absolute;
background: #454545;
font-size: 90%;
color: #fff;
border-radius: 4px 4px 0 0;
padding-left: 1.0em;
padding-right: 1.0em;
margin-left: -1px;
margin-top: -1.5em;
}
.code-line{
counter-increment: linenumber;
}
.code-line:nth-child(even){
background-color: #eee;
}
.code-line::before {
content: counter(linenumber);
display:inline-block;
color: #79B0E7;
text-align: right;
width: 2.0em;
margin-right: 1.0em;
padding: 0 0.5em 0 0;
}
/* ハイライト設定 */
/*
.synComment { color: #75715E }
.synSpecial { color: #E6DB74 }
.synType { color: #66D9EF }
.synPreProc { color: #F92672 }
.synStatement { color: #F92672 }
.synIdentifier { color: #F8F8F2 }
.synConstant { color: #AE81FF }
*/
/*------------------------------
shell
------------------------------*/
.code-line[data-lang="shell"]::before {
content: counter(linenumber) " $" !important;
width: 4.0em !important;
margin-right: 0 !important;
}
/*------------------------------
command-prompt
------------------------------*/
pre.code[data-lang="command-prompt"]::before {
content: "コマンドプロンプト" !important;
font-size: 80% !important;
}
.code-line[data-lang="command-prompt"]::before {
content: counter(linenumber) " >" !important;
width: 4.0em !important;
margin-right: 0 !important;
}
/*------------------------------
dosbatch
------------------------------*/
pre.code[data-lang="dosbatch"]::before {
content: "バッチファイル" !important;
font-size: 80% !important;
}
/*=================================================================================
マーカー
=================================================================================*/
/* 赤 */
.rmarker-s {
background: linear-gradient(transparent 60%, #FFC0CB 0%);
/* font-weight: bold;*/
}
.futo-rmarker-s {
background: linear-gradient(transparent 60%, #FFC0CB 0%);
font-weight: bold;
}
.rmarker {
background: linear-gradient(transparent 60%, #FFC0CB 0%);
/* font-weight: bold;*/
}
/* 黄色 */
.ymarker-s {
background: linear-gradient(transparent 60%, #fff799 0%);
/* font-weight: bold;*/
}
.futo-ymarker-s {
background: linear-gradient(transparent 60%, #fff799 0%);
font-weight: bold;
}
.ymarker {
background: linear-gradient(transparent 60%, #fff799 0%);
/* font-weight: bold;*/
}
/* 青 */
.bmarker-s {
background: linear-gradient(transparent 60%, #87cefa 0%);
/* font-weight: bold;*/
}
.futo-bmarker-s {
background: linear-gradient(transparent 60%, #87cefa 0%);
font-weight: bold;
}
.bmarker {
background: linear-gradient(transparent 60%, #87cefa 0%);
/* font-weight: bold;*/
}
/* オレンジ */
.omarker-s {
background: linear-gradient(transparent 60%, #ffdab9 0%);
/* font-weight: bold;*/
}
.futo-omarker-s {
background: linear-gradient(transparent 60%, #ffdab9 0%);
font-weight: bold;
}
.omarker {
background: linear-gradient(transparent 60%, #ffdab9 0%);
/* font-weight: bold;*/
}
/*=================================================================================
文字
=================================================================================*/
.red,
.aka {
color: red;
}
.blue,
.ao {
color: blue;
}
.orange {
color: orange;
}
/* 太文字 */
.huto,
.futo {
font-weight: bold;
}
.hutoaka,
.futoaka {
color: red;
font-weight: bold;
}
.hutoao,
.futoao {
color: blue;
font-weight: bold;
}
.huto_orange,
.futo_orange {
color: orange;
font-weight: bold;
}
/* 小文字 */
.komozi,
.komoji {
font-size: 70%;
}
/* 大文字 */
.oomozi,
.oomoji {
font-size: 150%;
}
.futo-oomozi,
.futo-oomoji {
font-size: 150%;
font-weight: bold;
}
/*=================================================================================
リスト
=================================================================================*/
/* ul 囲みなし/あり */
.maruck ul, .maruck-k ul {
position: relative;
list-style: none;
margin-left: 0;
padding: 0.5em 1em 0.5em 2.0em;
}
.maruck li, .maruck-k li {
position: relative;
line-height: 1.5;
padding: 0.5em 0.5em 0.5em 2px;
list-style-type: none!important;
}
.maruck li::before, .maruck-k li::before {
font-family: "Font Awesome 5 Free";
content: "\f058";
font-weight: 900;
color: #4abdac;
position: absolute;
top: 0.3em;
left: -1.1em;
font-size: 1.2em;
}
.maruck-k ul {
border: solid 2px #4abdac;
border-radius: 5px;
}
/* ol 囲みなし/あり */
.maruno ol, .maruno-k ol {
counter-reset:number; /*数字をリセット*/
list-style-type: none!important; /*数字を一旦消す*/
position: relative;
margin-left: 0;
padding: 0.5em 1em 0.5em 0.7em;
/*background: #f9fff5;*/
}
.maruno li, .maruno-k li {
position: relative;
line-height: 1.5em;
padding: 0.5em 0.5em 0.5em 1.5em;
list-style-type: none!important;
}
.maruno li::before, .maruno-k li::before {
/* 以下数字をつける */
position: absolute;
counter-increment: number;
content: counter(number);
/* 以下数字のデザイン変える */
display:inline-block;
background: #4abdac;
color: white;
font-family: 'Avenir','Arial Black','Arial',sans-serif;
border-radius: 50%;
font-weight:bold;
font-size: 0.7em;
width: 1.8em;
height: 1.8em;
line-height: 1.8em;
left: 0;
text-align: center;
/* 以下 上下中央寄せのため */
/*
top: 50%;
transform: translateY(-50%);
*/
}
.maruno-k ol {
border: solid 2px #4abdac;
border-radius: 5px;
}
/*=================================================================================
見出し
=================================================================================*/
/* h2の上を少し空ける */
.entry-content h2 {
margin-top: 50px;
}
/* 関連記事 */
.entry-footer-html h4.point {
border-bottom: solid 2px #ececec;
padding-bottom: 5px;
}
.entry-footer-html .point-in {
}
/*=================================================================================
引用デザイン
=================================================================================*/
/* --- テーマで用意されているのでコメントアウト
.entry-content blockquote {
position: relative;
padding: 25px 55px;
border: 0px;
font-style: oblique;
color: #2b2b2b;
background: #f7f6f5;
}
.entry-content blockquote:before{
display: inline-block;
position: absolute;
top: 0;
left: -10px;
content: "“";
font-family: serif;
color: #dcdcdc;
font-size: 100px;
line-height: 1;
}
.entry-content blockquote:after{
display: inline-block;
position: absolute;
bottom: -50px;
right: 20px;
content: "”";
font-family: serif;
color: #dcdcdc;
font-size: 100px;
line-height: 1;
}
.entry-content blockquote cite {
position: relative;
padding: 10px;
z-index: 3;
display: block;
text-align: right;
color: #888888;
font-size: 0.9em;
}
-------------------------------------------------*/
.inyoumodoki {
position: relative;
background-color: #f3f3f3;
/* background-image: url(images/quote.png); */
background-repeat: no-repeat;
background-position: left top;
padding-top: 50px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
margin-top: 20px;
margin-right: 0px;
margin-bottom: 20px;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #CCC;
}
.inyoumodoki:before
{
display: inline-block;
position: absolute;
top: 6px;
left: 8px;
content: "“";
font-family: serif;
color: #dcdcdc;
font-size: 100px;
line-height: 1;
}
/*=================================================================================
目次
=================================================================================*/
.mokuji {
border: #c0c0c0 1px dotted;
padding:10px 10px 20px 10px;
}
.mokuji-title {
display: block;
text-align: center;
font-weight: bold;
margin-top: 0;
margin-bottom: 10px;
}
.mokuji-icon {
display: inline-block;
font-weight: 900;
color: #4abdac;
}
/*
.mokuji-title {
position: relative;
display: block;
text-align: center;
font-weight: bold;
margin-top: 0;
margin-bottom: 10px;
}
.mokuji-title::before {
font-family: "Font Awesome 5 Free";
content: "\f5a1";
font-weight: 900;
color: #4abdac;
position: absolute;
top: 0;
left: 50%;
margin-left: -2.5em;
font-size: 1em;
}
*/
/*=================================================================================
アドセンス
=================================================================================*/
.adsense {
margin-top: 20px;
margin-bottom: 20px;
}
.header-adsense {
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
}
/* 背景の黄色を消す */
mark, ins {
background: transparent;
text-decoration: none;
}
/* 記事下アドセンス */
.ad-doublerec ul {
padding: 0;
margin: 0;
list-style: none;
font-size: 0;
}
.ad-doublerec li{
padding: 0;
margin: 0;
display: inline-block;
}
/*=================================================================================
カエレバ・ヨメレバ・トマレバ
=================================================================================*/
.cstmreba {
width:98%;
height:auto;
margin:36px auto;
font-family:'Lucida Grande','Hiragino Kaku Gothic ProN',Helvetica, Meiryo, sans-serif;
line-height: 1.5;
word-wrap: break-word;
box-sizing: border-box;
display: block;
}
/* WordPressで自動挿入されるPタグの余白を対処 */
.cstmreba p {
margin: 0;
padding: 0;
}
.cstmreba a {
transition: 0.8s ;
color:#285EFF; /* テキストリンクカラー */
}
.cstmreba a:hover {
color:#FFCA28; /* テキストリンクカラー(マウスオーバー時) */
}
.cstmreba .booklink-box,
.cstmreba .kaerebalink-box,
.cstmreba .tomarebalink-box {
width: 100%;
background-color: #fafafa; /* 全体の背景カラー */
overflow: hidden;
border-radius: 0px;
box-sizing: border-box;
padding: 12px 8px;
box-shadow: 0px 2px 5px 0 rgba(0,0,0,.26);
}
/* サムネイル画像ボックス */
.cstmreba .booklink-image,
.cstmreba .kaerebalink-image,
.cstmreba .tomarebalink-image {
width:150px;
float:left;
margin:0 14px 0 0;
text-align: center;
background: #fff;
}
.cstmreba .booklink-image a,
.cstmreba .kaerebalink-image a,
.cstmreba .tomarebalink-image a {
width:100%;
display:block;
}
.cstmreba .booklink-image a img,
.cstmreba .kaerebalink-image a img,
.cstmreba .tomarebalink-image a img {
margin:0 ;
padding: 0;
text-align:center;
background: #fff;
}
.cstmreba .booklink-info,.cstmreba .kaerebalink-info,.cstmreba .tomarebalink-info {
overflow:hidden;
line-height:170%;
color: #333;
}
/* infoボックス内リンク下線非表示 */
.cstmreba .booklink-info a,
.cstmreba .kaerebalink-info a,
.cstmreba .tomarebalink-info a {
text-decoration: none;
}
/* 作品・商品・ホテル名 リンク */
.cstmreba .booklink-name>a,
.cstmreba .kaerebalink-name>a,
.cstmreba .tomarebalink-name>a {
border-bottom: 1px solid ;
font-size:16px;
}
/* powered by */
.cstmreba .booklink-powered-date,
.cstmreba .kaerebalink-powered-date,
.cstmreba .tomarebalink-powered-date {
font-size:10px;
line-height:150%;
}
.cstmreba .booklink-powered-date a,
.cstmreba .kaerebalink-powered-date a,
.cstmreba .tomarebalink-powered-date a {
color:#333;
border-bottom: none ;
}
.cstmreba .booklink-powered-date a:hover,
.cstmreba .kaerebalink-powered-date a:hover,
.cstmreba .tomarebalink-powered-date a:hover {
color:#333;
border-bottom: 1px solid #333 ;
}
/* 著者・住所 */
.cstmreba .booklink-detail,.cstmreba .kaerebalink-detail,.cstmreba .tomarebalink-address {
font-size:12px;
}
.cstmreba .kaerebalink-link1 div img,.cstmreba .booklink-link2 div img,.cstmreba .tomarebalink-link1 div img {
display:none !important;
}
.cstmreba .kaerebalink-link1, .cstmreba .booklink-link2,.cstmreba .tomarebalink-link1 {
display: inline-block;
width: 100%;
margin-top: 5px;
}
.cstmreba .booklink-link2>div,
.cstmreba .kaerebalink-link1>div,
.cstmreba .tomarebalink-link1>div {
float:left;
width:24%;
min-width:128px;
margin:0.5%;
}
/***** ボタンデザインここから ******/
.cstmreba .booklink-link2 a,
.cstmreba .kaerebalink-link1 a,
.cstmreba .tomarebalink-link1 a {
width: 100%;
display: inline-block;
text-align: center;
box-sizing: border-box;
margin: 1px 0;
padding:3% 0.5%;
border-radius: 8px;
font-size: 13px;
font-weight: bold;
line-height: 180%;
color: #fff;
box-shadow: 0px 2px 4px 0 rgba(0,0,0,.26);
}
/* トマレバ */
.cstmreba .tomarebalink-link1 .shoplinkrakuten a {background: #76ae25; border: 2px solid #76ae25; }/* 楽天トラベル */
.cstmreba .tomarebalink-link1 .shoplinkjalan a { background: #ff7a15; border: 2px solid #ff7a15;}/* じゃらん */
.cstmreba .tomarebalink-link1 .shoplinkjtb a { background: #c81528; border: 2px solid #c81528;}/* JTB */
.cstmreba .tomarebalink-link1 .shoplinkknt a { background: #0b499d; border: 2px solid #0b499d;}/* KNT */
.cstmreba .tomarebalink-link1 .shoplinkikyu a { background: #bf9500; border: 2px solid #bf9500;}/* 一休 */
.cstmreba .tomarebalink-link1 .shoplinkrurubu a { background: #000066; border: 2px solid #000066;}/* るるぶ */
.cstmreba .tomarebalink-link1 .shoplinkyahoo a { background: #ff0033; border: 2px solid #ff0033;}/* Yahoo!トラベル */
.cstmreba .tomarebalink-link1 .shoplinkhis a { background: #004bb0; border: 2px solid #004bb0;}/*** HIS ***/
/* カエレバ */
.cstmreba .kaerebalink-link1 .shoplinkyahoo a {background:#ff0033; border:2px solid #ff0033; letter-spacing:normal;} /* Yahoo!ショッピング */
.cstmreba .kaerebalink-link1 .shoplinkbellemaison a { background:#84be24 ; border: 2px solid #84be24;} /* ベルメゾン */
.cstmreba .kaerebalink-link1 .shoplinkcecile a { background:#8d124b; border: 2px solid #8d124b;} /* セシール */
.cstmreba .kaerebalink-link1 .shoplinkwowma a { background:#ea5404; border: 2px solid #ea5404;} /* Wowma */
.cstmreba .kaerebalink-link1 .shoplinkkakakucom a {background:#314995; border: 2px solid #314995;} /* 価格コム */
/* ヨメレバ */
.cstmreba .booklink-link2 .shoplinkkindle a { background:#007dcd; border: 2px solid #007dcd;} /* Kindle */
.cstmreba .booklink-link2 .shoplinkrakukobo a { background:#bf0000; border: 2px solid #bf0000;} /* 楽天kobo */
.cstmreba .booklink-link2 .shoplinkbk1 a { background:#0085cd; border: 2px solid #0085cd;} /* honto */
.cstmreba .booklink-link2 .shoplinkehon a { background:#2a2c6d; border: 2px solid #2a2c6d;} /* ehon */
.cstmreba .booklink-link2 .shoplinkkino a { background:#003e92; border: 2px solid #003e92;} /* 紀伊國屋書店 */
.cstmreba .booklink-link2 .shoplinkebj a { background:#f8485e; border: 2px solid #f8485e;} /* ebookjapan */
.cstmreba .booklink-link2 .shoplinktoshokan a { background:#333333; border: 2px solid #333333;} /* 図書館 */
/* カエレバ・ヨメレバ共通 */
.cstmreba .kaerebalink-link1 .shoplinkamazon a,
.cstmreba .booklink-link2 .shoplinkamazon a {
background:#FF9901;
border: 2px solid #ff9901;
} /* Amazon */
.cstmreba .kaerebalink-link1 .shoplinkrakuten a,
.cstmreba .booklink-link2 .shoplinkrakuten a {
background: #bf0000;
border: 2px solid #bf0000;
} /* 楽天 */
.cstmreba .kaerebalink-link1 .shoplinkseven a,
.cstmreba .booklink-link2 .shoplinkseven a {
background:#225496;
border: 2px solid #225496;
} /* 7net */
/****** ボタンカラー ここまで *****/
/***** ボタンデザイン マウスオーバー時ここから *****/
.cstmreba .booklink-link2 a:hover,
.cstmreba .kaerebalink-link1 a:hover,
.cstmreba .tomarebalink-link1 a:hover {
background: #fff;
}
/* トマレバ */
.cstmreba .tomarebalink-link1 .shoplinkrakuten a:hover { color: #76ae25; }/* 楽天トラベル */
.cstmreba .tomarebalink-link1 .shoplinkjalan a:hover { color: #ff7a15; }/* じゃらん */
.cstmreba .tomarebalink-link1 .shoplinkjtb a:hover { color: #c81528; }/* JTB */
.cstmreba .tomarebalink-link1 .shoplinkknt a:hover { color: #0b499d; }/* KNT */
.cstmreba .tomarebalink-link1 .shoplinkikyu a:hover { color: #bf9500; }/* 一休 */
.cstmreba .tomarebalink-link1 .shoplinkrurubu a:hover { color: #000066; }/* るるぶ */
.cstmreba .tomarebalink-link1 .shoplinkyahoo a:hover { color: #ff0033; }/* Yahoo!トラベル */
.cstmreba .tomarebalink-link1 .shoplinkhis a:hover { color: #004bb0; }/*** HIS ***/
/* カエレバ */
.cstmreba .kaerebalink-link1 .shoplinkyahoo a:hover {color:#ff0033;} /* Yahoo!ショッピング */
.cstmreba .kaerebalink-link1 .shoplinkbellemaison a:hover { color:#84be24 ; } /* ベルメゾン */
.cstmreba .kaerebalink-link1 .shoplinkcecile a:hover { color:#8d124b; } /* セシール */
.cstmreba .kaerebalink-link1 .shoplinkwowma a:hover { color:#ea5404; } /* Wowma */
.cstmreba .kaerebalink-link1 .shoplinkkakakucom a:hover {color:#314995;} /* 価格コム */
/* ヨメレバ */
.cstmreba .booklink-link2 .shoplinkkindle a:hover { color:#007dcd;} /* Kindle */
.cstmreba .booklink-link2 .shoplinkrakukobo a:hover { color:#bf0000; } /* 楽天kobo */
.cstmreba .booklink-link2 .shoplinkbk1 a:hover { color:#0085cd; } /* honto */
.cstmreba .booklink-link2 .shoplinkehon a:hover { color:#2a2c6d; } /* ehon */
.cstmreba .booklink-link2 .shoplinkkino a:hover { color:#003e92; } /* 紀伊國屋書店 */
.cstmreba .booklink-link2 .shoplinkebj a:hover { color:#f8485e; } /* ebookjapan */
.cstmreba .booklink-link2 .shoplinktoshokan a:hover { color:#333333; } /* 図書館 */
/* カエレバ・ヨメレバ共通 */
.cstmreba .kaerebalink-link1 .shoplinkamazon a:hover,
.cstmreba .booklink-link2 .shoplinkamazon a:hover {
color:#FF9901; } /* Amazon */
.cstmreba .kaerebalink-link1 .shoplinkrakuten a:hover,
.cstmreba .booklink-link2 .shoplinkrakuten a:hover {
color: #bf0000; } /* 楽天 */
.cstmreba .kaerebalink-link1 .shoplinkseven a:hover,
.cstmreba .booklink-link2 .shoplinkseven a:hover {
color:#225496;} /* 7net */
/***** ボタンデザイン マウスオーバー時ここまで *****/
.cstmreba .booklink-footer {
clear:both;
}
/***** 解像度768px以下のスタイル *****/
@media screen and (max-width:768px){
.cstmreba .booklink-image,
.cstmreba .kaerebalink-image,
.cstmreba .tomarebalink-image {
width:100%;
float:none;
}
.cstmreba .booklink-link2>div,
.cstmreba .kaerebalink-link1>div,
.cstmreba .tomarebalink-link1>div {
width: 32.33%;
margin: 0.5%;
}
.cstmreba .booklink-info,
.cstmreba .kaerebalink-info,
.cstmreba .tomarebalink-info {
text-align:center;
padding-bottom: 1px;
}
}
/***** 解像度480px以下のスタイル *****/
@media screen and (max-width:480px){
.cstmreba .booklink-link2>div,
.cstmreba .kaerebalink-link1>div,
.cstmreba .tomarebalink-link1>div {
width: 49%;
margin: 0.5%;
}
}
/*=================================================================================
自動生成
=================================================================================*/
@charset "UTF-8";
/*=================================================================================
https://www.sassmeister.com/ でCSSにコンパイルして、
05.cssに貼り付ける
=================================================================================*/
/*=================================================================================
クリップメモ
=================================================================================*/
/*--------------------------------------------
--------------------------------------------*/
/*------------------------------
caution
------------------------------*/
.caution-memo {
margin: 1em 0;
padding: 0.5em;
background-color: var(--caution-bg-color);
}
.caution-memo:before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
color: var(--caution-font-color);
content: var(--caution-icon);
padding-right: 10px;
margin-right: 10px;
border-right: 1px solid var(--caution-font-color);
text-align: center;
vertical-align: middle;
display: table-cell;
}
.caution-memo .text {
padding: 0 0 0 0.5em;
display: table-cell;
}
.caution-memo p {
margin: 0;
padding: 0;
}
/*------------------------------
point
------------------------------*/
.point-memo {
margin: 1em 0;
padding: 0.5em;
background-color: var(--point-bg-color);
}
.point-memo:before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
color: var(--point-font-color);
content: var(--point-icon);
padding-right: 10px;
margin-right: 10px;
border-right: 1px solid var(--point-font-color);
text-align: center;
vertical-align: middle;
display: table-cell;
}
.point-memo .text {
padding: 0 0 0 0.5em;
display: table-cell;
}
.point-memo p {
margin: 0;
padding: 0;
}
/*------------------------------
info
------------------------------*/
.info-memo {
margin: 1em 0;
padding: 0.5em;
background-color: var(--info-bg-color);
}
.info-memo:before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
color: var(--info-font-color);
content: var(--info-icon);
padding-right: 10px;
margin-right: 10px;
border-right: 1px solid var(--info-font-color);
text-align: center;
vertical-align: middle;
display: table-cell;
}
.info-memo .text {
padding: 0 0 0 0.5em;
display: table-cell;
}
.info-memo p {
margin: 0;
padding: 0;
}
/*------------------------------
hatena
------------------------------*/
.hatena-memo {
margin: 1em 0;
padding: 0.5em;
background-color: var(--hatena-bg-color);
}
.hatena-memo:before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
color: var(--hatena-font-color);
content: var(--hatena-icon);
padding-right: 10px;
margin-right: 10px;
border-right: 1px solid var(--hatena-font-color);
text-align: center;
vertical-align: middle;
display: table-cell;
}
.hatena-memo .text {
padding: 0 0 0 0.5em;
display: table-cell;
}
.hatena-memo p {
margin: 0;
padding: 0;
}
/*------------------------------
comment
------------------------------*/
.comment-memo {
margin: 1em 0;
padding: 0.5em;
background-color: var(--comment-bg-color);
}
.comment-memo:before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
color: var(--comment-font-color);
content: var(--comment-icon);
padding-right: 10px;
margin-right: 10px;
border-right: 1px solid var(--comment-font-color);
text-align: center;
vertical-align: middle;
display: table-cell;
}
.comment-memo .text {
padding: 0 0 0 0.5em;
display: table-cell;
}
.comment-memo p {
margin: 0;
padding: 0;
}
/*=================================================================================
タイトル付き クリップメモ
=================================================================================*/
/*-------------------------------------------------
-------------------------------------------------*/
/*------------------------------
caution
------------------------------*/
.caution-memo-t {
margin: 1em 0;
padding: 0.5em;
background-color: var(--caution-bg-color);
}
.caution-memo-t .title {
color: var(--caution-font-color);
font-weight: 900;
border-bottom: 1px solid var(--caution-font-color);
margin-bottom: 10px;
}
.caution-memo-t .title:before {
font-family: "Font Awesome 5 Free";
content: var(--caution-icon);
}
.caution-memo-t p {
margin: 0;
padding: 0;
}
/*------------------------------
point
------------------------------*/
.point-memo-t {
margin: 1em 0;
padding: 0.5em;
background-color: var(--point-bg-color);
}
.point-memo-t .title {
color: var(--point-font-color);
font-weight: 900;
border-bottom: 1px solid var(--point-font-color);
margin-bottom: 10px;
}
.point-memo-t .title:before {
font-family: "Font Awesome 5 Free";
content: var(--point-icon);
}
.point-memo-t p {
margin: 0;
padding: 0;
}
/*------------------------------
info
------------------------------*/
.info-memo-t {
margin: 1em 0;
padding: 0.5em;
background-color: var(--info-bg-color);
}
.info-memo-t .title {
color: var(--info-font-color);
font-weight: 900;
border-bottom: 1px solid var(--info-font-color);
margin-bottom: 10px;
}
.info-memo-t .title:before {
font-family: "Font Awesome 5 Free";
content: var(--info-icon);
}
.info-memo-t p {
margin: 0;
padding: 0;
}
/*------------------------------
hatena
------------------------------*/
.hatena-memo-t {
margin: 1em 0;
padding: 0.5em;
background-color: var(--hatena-bg-color);
}
.hatena-memo-t .title {
color: var(--hatena-font-color);
font-weight: 900;
border-bottom: 1px solid var(--hatena-font-color);
margin-bottom: 10px;
}
.hatena-memo-t .title:before {
font-family: "Font Awesome 5 Free";
content: var(--hatena-icon);
}
.hatena-memo-t p {
margin: 0;
padding: 0;
}
/*------------------------------
comment
------------------------------*/
.comment-memo-t {
margin: 1em 0;
padding: 0.5em;
background-color: var(--comment-bg-color);
}
.comment-memo-t .title {
color: var(--comment-font-color);
font-weight: 900;
border-bottom: 1px solid var(--comment-font-color);
margin-bottom: 10px;
}
.comment-memo-t .title:before {
font-family: "Font Awesome 5 Free";
content: var(--comment-icon);
}
.comment-memo-t p {
margin: 0;
padding: 0;
}
/*=================================================================================
用途別丸角クリップメモ
=================================================================================*/
/*--------------------------------------------
--------------------------------------------*/
/*------------------------------
薄いcaution
------------------------------*/
.usu-caution-rmemo {
display: inline-block;
margin: 0.5em;
padding: 0.5em 1em 0.5em 0.5em;
background-color: var(--usu-caution-rmemo-bg-color);
border-radius: 30px;
color: var(--usu-caution-rmemo-font-color);
font-size: 90%;
}
.usu-caution-rmemo:before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
color: var(--usu-caution-rmemo-font-color);
content: var(--usu-caution-rmemo-icon);
padding-left: 0.5em;
text-align: center;
vertical-align: middle;
display: table-cell;
}
.usu-caution-rmemo .text {
padding: 0 0 0 0.5em;
display: table-cell;
}
.usu-caution-rmemo p {
margin: 0;
padding: 0;
}
/*------------------------------
caution
------------------------------*/
.caution-rmemo {
display: inline-block;
margin: 0.5em;
padding: 0.5em 1em 0.5em 0.5em;
background-color: var(--caution-rmemo-bg-color);
border-radius: 30px;
color: var(--caution-rmemo-font-color);
font-size: 90%;
}
.caution-rmemo:before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
color: var(--caution-rmemo-font-color);
content: var(--caution-rmemo-icon);
padding-left: 0.5em;
text-align: center;
vertical-align: middle;
display: table-cell;
}
.caution-rmemo .text {
padding: 0 0 0 0.5em;
display: table-cell;
}
.caution-rmemo p {
margin: 0;
padding: 0;
}
/*=================================================================================
丸角クリップメモ
=================================================================================*/
/*--------------------------------------------
--------------------------------------------*/
/*------------------------------
ピンク
------------------------------*/
.p-rmemo {
display: inline-block;
margin: 0.5em;
padding: 0.5em 1.5em 0.5em 1.5em;
background-color: var(--p-rmemo-bg-color);
border-radius: 30px;
color: var(--p-rmemo-font-color);
font-size: 90%;
}
.p-rmemo p {
margin: 0;
padding: 0;
}
/*------------------------------
ブルー
------------------------------*/
.b-rmemo {
display: inline-block;
margin: 0.5em;
padding: 0.5em 1.5em 0.5em 1.5em;
background-color: var(--b-rmemo-bg-color);
border-radius: 30px;
color: var(--b-rmemo-font-color);
font-size: 90%;
}
.b-rmemo p {
margin: 0;
padding: 0;
}
/*------------------------------
オレンジ
------------------------------*/
.o-rmemo {
display: inline-block;
margin: 0.5em;
padding: 0.5em 1.5em 0.5em 1.5em;
background-color: var(--o-rmemo-bg-color);
border-radius: 30px;
color: var(--o-rmemo-font-color);
font-size: 90%;
}
.o-rmemo p {
margin: 0;
padding: 0;
}
/*=================================================================================
用途別Box
=================================================================================*/
/*-------------------------------------------------
-------------------------------------------------*/
/*------------------------------
caution
------------------------------*/
.caution-box-t {
position: relative;
margin: 1.5em 0;
padding: 1em 1em 1em 1em;
border: 2px solid var(--caution-font-color);
border-radius: 5px;
background-color: var(--caution-bg-color);
}
.caution-box-t .title {
position: absolute;
top: -0.9em;
left: 0.5em;
font-weight: bold;
color: var(--caution-font-color);
font-feature-settings: "palt";
padding: 0 0.5em;
text-shadow: #fff 3px 0px 0px, #fff 2.83487px 0.981584px 0px, #fff 2.35766px 1.85511px 0px, #fff 1.62091px 2.52441px 0px, #fff 0.705713px 2.91581px 0px, #fff -0.287171px 2.98622px 0px, #fff -1.24844px 2.72789px 0px, #fff -2.07227px 2.16926px 0px, #fff -2.66798px 1.37182px 0px, #fff -2.96998px 0.42336px 0px, #fff -2.94502px -0.571704px 0px, #fff -2.59586px -1.50383px 0px, #fff -1.96093px -2.27041px 0px, #fff -1.11013px -2.78704px 0px, #fff -0.137119px -2.99686px 0px, #fff 0.850987px -2.87677px 0px, #fff 1.74541px -2.43999px 0px, #fff 2.44769px -1.73459px 0px, #fff 2.88051px -0.838246px 0px;
}
.caution-box-t .title:before {
font-family: "Font Awesome 5 Free";
content: var(--caution-icon);
padding-right: 0.2em;
}
.caution-box-t p {
margin: 0;
padding: 0;
}
/*------------------------------
point
------------------------------*/
.point-box-t {
position: relative;
margin: 1.5em 0;
padding: 1em 1em 1em 1em;
border: 2px solid var(--point-font-color);
border-radius: 5px;
background-color: var(--point-bg-color);
}
.point-box-t .title {
position: absolute;
top: -0.9em;
left: 0.5em;
font-weight: bold;
color: var(--point-font-color);
font-feature-settings: "palt";
padding: 0 0.5em;
text-shadow: #fff 3px 0px 0px, #fff 2.83487px 0.981584px 0px, #fff 2.35766px 1.85511px 0px, #fff 1.62091px 2.52441px 0px, #fff 0.705713px 2.91581px 0px, #fff -0.287171px 2.98622px 0px, #fff -1.24844px 2.72789px 0px, #fff -2.07227px 2.16926px 0px, #fff -2.66798px 1.37182px 0px, #fff -2.96998px 0.42336px 0px, #fff -2.94502px -0.571704px 0px, #fff -2.59586px -1.50383px 0px, #fff -1.96093px -2.27041px 0px, #fff -1.11013px -2.78704px 0px, #fff -0.137119px -2.99686px 0px, #fff 0.850987px -2.87677px 0px, #fff 1.74541px -2.43999px 0px, #fff 2.44769px -1.73459px 0px, #fff 2.88051px -0.838246px 0px;
}
.point-box-t .title:before {
font-family: "Font Awesome 5 Free";
content: var(--point-icon);
padding-right: 0.2em;
}
.point-box-t p {
margin: 0;
padding: 0;
}
/*------------------------------
info
------------------------------*/
.info-box-t {
position: relative;
margin: 1.5em 0;
padding: 1em 1em 1em 1em;
border: 2px solid var(--info-font-color);
border-radius: 5px;
background-color: var(--info-bg-color);
}
.info-box-t .title {
position: absolute;
top: -0.9em;
left: 0.5em;
font-weight: bold;
color: var(--info-font-color);
font-feature-settings: "palt";
padding: 0 0.5em;
text-shadow: #fff 3px 0px 0px, #fff 2.83487px 0.981584px 0px, #fff 2.35766px 1.85511px 0px, #fff 1.62091px 2.52441px 0px, #fff 0.705713px 2.91581px 0px, #fff -0.287171px 2.98622px 0px, #fff -1.24844px 2.72789px 0px, #fff -2.07227px 2.16926px 0px, #fff -2.66798px 1.37182px 0px, #fff -2.96998px 0.42336px 0px, #fff -2.94502px -0.571704px 0px, #fff -2.59586px -1.50383px 0px, #fff -1.96093px -2.27041px 0px, #fff -1.11013px -2.78704px 0px, #fff -0.137119px -2.99686px 0px, #fff 0.850987px -2.87677px 0px, #fff 1.74541px -2.43999px 0px, #fff 2.44769px -1.73459px 0px, #fff 2.88051px -0.838246px 0px;
}
.info-box-t .title:before {
font-family: "Font Awesome 5 Free";
content: var(--info-icon);
padding-right: 0.2em;
}
.info-box-t p {
margin: 0;
padding: 0;
}
/*------------------------------
hatena
------------------------------*/
.hatena-box-t {
position: relative;
margin: 1.5em 0;
padding: 1em 1em 1em 1em;
border: 2px solid var(--hatena-font-color);
border-radius: 5px;
background-color: var(--hatena-bg-color);
}
.hatena-box-t .title {
position: absolute;
top: -0.9em;
left: 0.5em;
font-weight: bold;
color: var(--hatena-font-color);
font-feature-settings: "palt";
padding: 0 0.5em;
text-shadow: #fff 3px 0px 0px, #fff 2.83487px 0.981584px 0px, #fff 2.35766px 1.85511px 0px, #fff 1.62091px 2.52441px 0px, #fff 0.705713px 2.91581px 0px, #fff -0.287171px 2.98622px 0px, #fff -1.24844px 2.72789px 0px, #fff -2.07227px 2.16926px 0px, #fff -2.66798px 1.37182px 0px, #fff -2.96998px 0.42336px 0px, #fff -2.94502px -0.571704px 0px, #fff -2.59586px -1.50383px 0px, #fff -1.96093px -2.27041px 0px, #fff -1.11013px -2.78704px 0px, #fff -0.137119px -2.99686px 0px, #fff 0.850987px -2.87677px 0px, #fff 1.74541px -2.43999px 0px, #fff 2.44769px -1.73459px 0px, #fff 2.88051px -0.838246px 0px;
}
.hatena-box-t .title:before {
font-family: "Font Awesome 5 Free";
content: var(--hatena-icon);
padding-right: 0.2em;
}
.hatena-box-t p {
margin: 0;
padding: 0;
}
/*------------------------------
comment
------------------------------*/
.comment-box-t {
position: relative;
margin: 1.5em 0;
padding: 1em 1em 1em 1em;
border: 2px solid var(--comment-font-color);
border-radius: 5px;
background-color: var(--comment-bg-color);
}
.comment-box-t .title {
position: absolute;
top: -0.9em;
left: 0.5em;
font-weight: bold;
color: var(--comment-font-color);
font-feature-settings: "palt";
padding: 0 0.5em;
text-shadow: #fff 3px 0px 0px, #fff 2.83487px 0.981584px 0px, #fff 2.35766px 1.85511px 0px, #fff 1.62091px 2.52441px 0px, #fff 0.705713px 2.91581px 0px, #fff -0.287171px 2.98622px 0px, #fff -1.24844px 2.72789px 0px, #fff -2.07227px 2.16926px 0px, #fff -2.66798px 1.37182px 0px, #fff -2.96998px 0.42336px 0px, #fff -2.94502px -0.571704px 0px, #fff -2.59586px -1.50383px 0px, #fff -1.96093px -2.27041px 0px, #fff -1.11013px -2.78704px 0px, #fff -0.137119px -2.99686px 0px, #fff 0.850987px -2.87677px 0px, #fff 1.74541px -2.43999px 0px, #fff 2.44769px -1.73459px 0px, #fff 2.88051px -0.838246px 0px;
}
.comment-box-t .title:before {
font-family: "Font Awesome 5 Free";
content: var(--comment-icon);
padding-right: 0.2em;
}
.comment-box-t p {
margin: 0;
padding: 0;
}
/*=================================================================================
Box(タイトル上)
=================================================================================*/
/*--- [使い方] ------------------------------------------
-------------------------------------------------*/
/*------------------------------
赤
------------------------------*/
.rbox-tu {
position: relative;
margin: 1em 0;
padding: 1em 1em 1em 1em;
border: 2px solid var(--rbox-font-color);
border-radius: 5px;
background-color: var(--rbox-bg-color);
}
.rbox-tu .title {
position: absolute;
top: -0.8em;
left: 0.5em;
font-weight: bold;
color: var(--rbox-font-color);
font-feature-settings: "palt";
padding: 0 0.5em;
text-shadow: #fff 3px 0px 0px, #fff 2.83487px 0.981584px 0px, #fff 2.35766px 1.85511px 0px, #fff 1.62091px 2.52441px 0px, #fff 0.705713px 2.91581px 0px, #fff -0.287171px 2.98622px 0px, #fff -1.24844px 2.72789px 0px, #fff -2.07227px 2.16926px 0px, #fff -2.66798px 1.37182px 0px, #fff -2.96998px 0.42336px 0px, #fff -2.94502px -0.571704px 0px, #fff -2.59586px -1.50383px 0px, #fff -1.96093px -2.27041px 0px, #fff -1.11013px -2.78704px 0px, #fff -0.137119px -2.99686px 0px, #fff 0.850987px -2.87677px 0px, #fff 1.74541px -2.43999px 0px, #fff 2.44769px -1.73459px 0px, #fff 2.88051px -0.838246px 0px;
}
.rbox-tu p {
margin: 0;
padding: 0;
}
/*------------------------------
青
------------------------------*/
.bbox-tu {
position: relative;
margin: 1em 0;
padding: 1em 1em 1em 1em;
border: 2px solid var(--bbox-font-color);
border-radius: 5px;
background-color: var(--bbox-bg-color);
}
.bbox-tu .title {
position: absolute;
top: -0.8em;
left: 0.5em;
font-weight: bold;
color: var(--bbox-font-color);
font-feature-settings: "palt";
padding: 0 0.5em;
text-shadow: #fff 3px 0px 0px, #fff 2.83487px 0.981584px 0px, #fff 2.35766px 1.85511px 0px, #fff 1.62091px 2.52441px 0px, #fff 0.705713px 2.91581px 0px, #fff -0.287171px 2.98622px 0px, #fff -1.24844px 2.72789px 0px, #fff -2.07227px 2.16926px 0px, #fff -2.66798px 1.37182px 0px, #fff -2.96998px 0.42336px 0px, #fff -2.94502px -0.571704px 0px, #fff -2.59586px -1.50383px 0px, #fff -1.96093px -2.27041px 0px, #fff -1.11013px -2.78704px 0px, #fff -0.137119px -2.99686px 0px, #fff 0.850987px -2.87677px 0px, #fff 1.74541px -2.43999px 0px, #fff 2.44769px -1.73459px 0px, #fff 2.88051px -0.838246px 0px;
}
.bbox-tu p {
margin: 0;
padding: 0;
}
/*------------------------------
黄色
------------------------------*/
.ybox-tu {
position: relative;
margin: 1em 0;
padding: 1em 1em 1em 1em;
border: 2px solid var(--ybox-font-color);
border-radius: 5px;
background-color: var(--ybox-bg-color);
}
.ybox-tu .title {
position: absolute;
top: -0.8em;
left: 0.5em;
font-weight: bold;
color: var(--ybox-font-color);
font-feature-settings: "palt";
padding: 0 0.5em;
text-shadow: #fff 3px 0px 0px, #fff 2.83487px 0.981584px 0px, #fff 2.35766px 1.85511px 0px, #fff 1.62091px 2.52441px 0px, #fff 0.705713px 2.91581px 0px, #fff -0.287171px 2.98622px 0px, #fff -1.24844px 2.72789px 0px, #fff -2.07227px 2.16926px 0px, #fff -2.66798px 1.37182px 0px, #fff -2.96998px 0.42336px 0px, #fff -2.94502px -0.571704px 0px, #fff -2.59586px -1.50383px 0px, #fff -1.96093px -2.27041px 0px, #fff -1.11013px -2.78704px 0px, #fff -0.137119px -2.99686px 0px, #fff 0.850987px -2.87677px 0px, #fff 1.74541px -2.43999px 0px, #fff 2.44769px -1.73459px 0px, #fff 2.88051px -0.838246px 0px;
}
.ybox-tu p {
margin: 0;
padding: 0;
}
/*------------------------------
緑
------------------------------*/
.gbox-tu {
position: relative;
margin: 1em 0;
padding: 1em 1em 1em 1em;
border: 2px solid var(--gbox-font-color);
border-radius: 5px;
background-color: var(--gbox-bg-color);
}
.gbox-tu .title {
position: absolute;
top: -0.8em;
left: 0.5em;
font-weight: bold;
color: var(--gbox-font-color);
font-feature-settings: "palt";
padding: 0 0.5em;
text-shadow: #fff 3px 0px 0px, #fff 2.83487px 0.981584px 0px, #fff 2.35766px 1.85511px 0px, #fff 1.62091px 2.52441px 0px, #fff 0.705713px 2.91581px 0px, #fff -0.287171px 2.98622px 0px, #fff -1.24844px 2.72789px 0px, #fff -2.07227px 2.16926px 0px, #fff -2.66798px 1.37182px 0px, #fff -2.96998px 0.42336px 0px, #fff -2.94502px -0.571704px 0px, #fff -2.59586px -1.50383px 0px, #fff -1.96093px -2.27041px 0px, #fff -1.11013px -2.78704px 0px, #fff -0.137119px -2.99686px 0px, #fff 0.850987px -2.87677px 0px, #fff 1.74541px -2.43999px 0px, #fff 2.44769px -1.73459px 0px, #fff 2.88051px -0.838246px 0px;
}
.gbox-tu p {
margin: 0;
padding: 0;
}
/*=================================================================================
Box(タイトル下)
=================================================================================*/
/*--- [使い方] ------------------------------------------
-------------------------------------------------*/
/*------------------------------
赤
------------------------------*/
.rbox-t {
position: relative;
margin: 2em 0;
padding: 2.5em 1em 1em;
border-top: solid 1px var(--rbox-tb-title-bg-color);
background-color: var(--rbox-tb-bg-color);
}
.rbox-t .title {
position: absolute;
display: inline-block;
top: 0;
left: 0;
padding: 0.3em 0.5em 0.3em 0.5em;
background: var(--rbox-tb-title-bg-color);
color: #ffffff;
font-size: 90%;
font-weight: bold;
}
.rbox-t p {
margin: 0;
padding: 0;
}
/*------------------------------
青
------------------------------*/
.bbox-t {
position: relative;
margin: 2em 0;
padding: 2.5em 1em 1em;
border-top: solid 1px var(--bbox-tb-title-bg-color);
background-color: var(--bbox-tb-bg-color);
}
.bbox-t .title {
position: absolute;
display: inline-block;
top: 0;
left: 0;
padding: 0.3em 0.5em 0.3em 0.5em;
background: var(--bbox-tb-title-bg-color);
color: #ffffff;
font-size: 90%;
font-weight: bold;
}
.bbox-t p {
margin: 0;
padding: 0;
}
/*------------------------------
緑
------------------------------*/
.gbox-t {
position: relative;
margin: 2em 0;
padding: 2.5em 1em 1em;
border-top: solid 1px var(--gbox-tb-title-bg-color);
background-color: var(--gbox-tb-bg-color);
}
.gbox-t .title {
position: absolute;
display: inline-block;
top: 0;
left: 0;
padding: 0.3em 0.5em 0.3em 0.5em;
background: var(--gbox-tb-title-bg-color);
color: #ffffff;
font-size: 90%;
font-weight: bold;
}
.gbox-t p {
margin: 0;
padding: 0;
}
/*=================================================================================
四角リンクボタン
=================================================================================*/
/*--- [使い方] ------------------------------------------
-------------------------------------------------*/
@keyframes link-btn {
0% {
transform: scale(0) rotate(45deg);
opacity: 0;
}
80% {
transform: scale(0) rotate(45deg);
opacity: 0.5;
}
81% {
transform: scale(4) rotate(45deg);
opacity: 1;
}
100% {
transform: scale(50) rotate(45deg);
opacity: 0;
}
}
/*------------------------------
赤
------------------------------*/
.r-link-btn {
display: block;
position: relative;
width: 50%;
/* ボタンの幅 */
padding: 10px 0;
margin: 10px auto 30px auto;
background: linear-gradient(to bottom, var(--r-link-btn-sq-color1), var(--r-link-btn-sq-color2));
/* ボタンの色 */
box-shadow: 0 3px 0 0 var(--r-link-btn-sq-shadow-color);
/* 影の色 */
border-radius: 5px;
font-weight: bold;
font-size: 85%;
color: #fff;
text-align: center;
text-decoration: none;
overflow: hidden;
transition: 0.2s;
}
.r-link-btn a {
text-decoration: none;
color: #fff;
}
.r-link-btn:hover {
text-decoration: none;
color: #fff;
opacity: 0.7;
/* 不透明度 */
box-shadow: none;
transform: translateY(3px);
}
.r-link-btn::before {
position: absolute;
content: "";
display: inline-block;
top: -180px;
left: 0;
width: 30px;
height: 100%;
background-color: #fff;
animation: link-btn 3s ease-in-out infinite;
}
/*------------------------------
青
------------------------------*/
.b-link-btn {
display: block;
position: relative;
width: 50%;
/* ボタンの幅 */
padding: 10px 0;
margin: 10px auto 30px auto;
background: linear-gradient(to bottom, var(--b-link-btn-sq-color1), var(--b-link-btn-sq-color2));
/* ボタンの色 */
box-shadow: 0 3px 0 0 var(--b-link-btn-sq-shadow-color);
/* 影の色 */
border-radius: 5px;
font-weight: bold;
font-size: 85%;
color: #fff;
text-align: center;
text-decoration: none;
overflow: hidden;
transition: 0.2s;
}
.b-link-btn a {
text-decoration: none;
color: #fff;
}
.b-link-btn:hover {
text-decoration: none;
color: #fff;
opacity: 0.7;
/* 不透明度 */
box-shadow: none;
transform: translateY(3px);
}
.b-link-btn::before {
position: absolute;
content: "";
display: inline-block;
top: -180px;
left: 0;
width: 30px;
height: 100%;
background-color: #fff;
animation: link-btn 3s ease-in-out infinite;
}
/*=================================================================================
丸角リンクボタン
=================================================================================*/
/*--- [使い方] ------------------------------------------
-------------------------------------------------*/
/*------------------------------
ピンク
------------------------------*/
.p-link-rbtn {
display: block;
position: relative;
width: 40%;
/* ボタンの幅 */
padding: 15px 0;
margin: 10px auto 30px auto;
background: linear-gradient(to bottom, var(--p-link-btn-color1), var(--p-link-btn-color2));
/* ボタンの色 */
border-radius: 30px;
border: 1px solid var(--p-link-btn-border-color);
font-size: 85%;
color: #fff;
text-align: center;
text-decoration: none;
overflow: hidden;
transition: 0.2s;
}
.p-link-rbtn a {
text-decoration: none;
color: #fff;
}
.p-link-rbtn:hover {
text-decoration: none;
color: #fff;
opacity: 0.7;
}
.p-link-rbtn::before {
position: absolute;
content: "";
display: inline-block;
top: -180px;
left: 0;
width: 30px;
height: 100%;
background-color: #fff;
animation: link-btn 3s ease-in-out infinite;
}
.p-link-rbtn::after {
content: var(--x-link-btn-icon);
font-family: "Font Awesome 5 Free";
font-size: 85%;
font-weight: bold;
margin-left: 0.5em;
}
/*------------------------------
イエロー
------------------------------*/
.y-link-rbtn {
display: block;
position: relative;
width: 40%;
/* ボタンの幅 */
padding: 15px 0;
margin: 10px auto 30px auto;
background: linear-gradient(to bottom, var(--y-link-btn-color1), var(--y-link-btn-color2));
/* ボタンの色 */
border-radius: 30px;
border: 1px solid var(--y-link-btn-border-color);
font-size: 85%;
color: #fff;
text-align: center;
text-decoration: none;
overflow: hidden;
transition: 0.2s;
}
.y-link-rbtn a {
text-decoration: none;
color: #fff;
}
.y-link-rbtn:hover {
text-decoration: none;
color: #fff;
opacity: 0.7;
}
.y-link-rbtn::before {
position: absolute;
content: "";
display: inline-block;
top: -180px;
left: 0;
width: 30px;
height: 100%;
background-color: #fff;
animation: link-btn 3s ease-in-out infinite;
}
.y-link-rbtn::after {
content: var(--x-link-btn-icon);
font-family: "Font Awesome 5 Free";
font-size: 85%;
font-weight: bold;
margin-left: 0.5em;
}
/*------------------------------
ブルー
------------------------------*/
.b-link-rbtn {
display: block;
position: relative;
width: 40%;
/* ボタンの幅 */
padding: 15px 0;
margin: 10px auto 30px auto;
background: linear-gradient(to bottom, var(--b-link-btn-color1), var(--b-link-btn-color2));
/* ボタンの色 */
border-radius: 30px;
border: 1px solid var(--b-link-btn-border-color);
font-size: 85%;
color: #fff;
text-align: center;
text-decoration: none;
overflow: hidden;
transition: 0.2s;
}
.b-link-rbtn a {
text-decoration: none;
color: #fff;
}
.b-link-rbtn:hover {
text-decoration: none;
color: #fff;
opacity: 0.7;
}
.b-link-rbtn::before {
position: absolute;
content: "";
display: inline-block;
top: -180px;
left: 0;
width: 30px;
height: 100%;
background-color: #fff;
animation: link-btn 3s ease-in-out infinite;
}
.b-link-rbtn::after {
content: var(--x-link-btn-icon);
font-family: "Font Awesome 5 Free";
font-size: 85%;
font-weight: bold;
margin-left: 0.5em;
}