/* */
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css");
/*
Theme: Innocent
Author: waitingmoon
Desciprtion: カスタマイズのためのテーマ
Responsive: yes
*/
/**
Table of Contents:
* Normalize
* Global
* Repeatable Patterns
* Layout
* Header
* Navigation
* Recommend Entries
* Breadcrumb
* Entry
* Entry Header
* Entry Content
* Entry Footer
* Archive
* Comment
* Pager
* Sidebar
* Profile
* Recent Post, Popular Post
* Recent Comment
* Archive
* List Style
* Calendar Style
* Category
* Search
* Group
* Footer
* Modify
* Colorbox
* Advertisement
**/
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
/**
* 1. Set default font family to sans-serif.
* 2. Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
font-family: sans-serif; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/**
* Remove default margin.
*/
body {
margin: 0;
}
/* HTML5 display definitions
========================================================================== */
/**
* Correct `block` display not defined for any HTML5 element in IE 8/9.
* Correct `block` display not defined for `details` or `summary` in IE 10/11
* and Firefox.
* Correct `block` display not defined for `main` in IE 11.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block;
}
/**
* 1. Correct `inline-block` display not defined in IE 8/9.
* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
*/
audio,
canvas,
progress,
video {
display: inline-block; /* 1 */
vertical-align: baseline; /* 2 */
}
/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Address `[hidden]` styling not present in IE 8/9/10.
* Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
*/
[hidden],
template {
display: none;
}
/* Links
========================================================================== */
/**
* Remove the gray background color from active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* Improve readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
outline: 0;
}
/* Text-level semantics
========================================================================== */
/**
* Address styling not present in IE 8/9/10/11, Safari, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted;
}
/**
* Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
*/
b,
strong {
font-weight: bold;
}
/**
* Address styling not present in Safari and Chrome.
*/
dfn {
font-style: italic;
}
/**
* Address variable `h1` font-size and margin within `section` and `article`
* contexts in Firefox 4+, Safari, and Chrome.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/**
* Address styling not present in IE 8/9.
*/
mark {
background: #ff0;
color: #000;
}
/**
* Address inconsistent and variable font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/* Embedded content
========================================================================== */
/**
* Remove border when inside `a` element in IE 8/9/10.
*/
img {
border: 0;
}
/**
* Correct overflow not hidden in IE 9/10/11.
*/
svg:not(:root) {
overflow: hidden;
}
/* Grouping content
========================================================================== */
/**
* Address margin not present in IE 8/9 and Safari.
*/
figure {
margin: 1em 40px;
}
/**
* Address differences between Firefox and other browsers.
*/
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
/**
* Contain overflow in all browsers.
*/
pre {
overflow: auto;
}
/**
* Address odd `em`-unit font size rendering in all browsers.
*/
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
/* Forms
========================================================================== */
/**
* Known limitation: by default, Chrome and Safari on OS X allow very limited
* styling of `select`, unless a `border` property is set.
*/
/**
* 1. Correct color not being inherited.
* Known issue: affects color of disabled elements.
* 2. Correct font properties not being inherited.
* 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
*/
button,
input,
optgroup,
select,
textarea {
color: inherit; /* 1 */
font: inherit; /* 2 */
margin: 0; /* 3 */
}
/**
* Address `overflow` set to `hidden` in IE 8/9/10/11.
*/
button {
overflow: visible;
}
/**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
* Correct `select` style inheritance in Firefox.
*/
button,
select {
text-transform: none;
}
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
*/
button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; /* 2 */
cursor: pointer; /* 3 */
}
/**
* Re-set default cursor for disabled elements.
*/
button[disabled],
html input[disabled] {
cursor: default;
}
/**
* Remove inner padding and border in Firefox 4+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/**
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
input {
line-height: normal;
}
/**
* It's recommended that you don't attempt to style these elements.
* Firefox's implementation doesn't respect box-sizing, padding, or width.
*
* 1. Address box sizing set to `content-box` in IE 8/9/10.
* 2. Remove excess padding in IE 8/9/10.
*/
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Fix the cursor style for Chrome's increment/decrement buttons. For certain
* `font-size` values of the `input`, it causes the cursor style of the
* decrement button to change from `default` to `text`.
*/
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Address `appearance` set to `searchfield` in Safari and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari and Chrome
* (include `-moz` to future-proof).
*/
input[type="search"] {
-webkit-appearance: textfield; /* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; /* 2 */
box-sizing: content-box;
}
/**
* Remove inner padding and search cancel button in Safari and Chrome on OS X.
* Safari (but not Chrome) clips the cancel button when the search input has
* padding (and `textfield` appearance).
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* Define consistent border, margin, and padding.
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct `color` not being inherited in IE 8/9/10/11.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
*/
legend {
border: 0; /* 1 */
padding: 0; /* 2 */
}
/**
* Remove default vertical scrollbar in IE 8/9/10/11.
*/
textarea {
overflow: auto;
}
/**
* Don't inherit the `font-weight` (applied by a rule above).
* NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
*/
optgroup {
font-weight: bold;
}
/* Tables
========================================================================== */
/**
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}
/* Global
========================================================================== */
::-moz-selection {
background-color: #ccc;
color: #fff;
}
::selection {
background-color: #ccc;
color: #fff;
}
html {
font-size: 85%;
}
body {
color: #333;
font-size: 15px;
font-family: Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
line-height: 1.7;
word-wrap: break-word;
}
@media screen and (min-width: 768px) {
html {
font-size: 100%;
}
body {
font-size: 16px;
}
}
a {
color: inherit;
text-decoration: none;
-webkit-transition: all .3s ease;
transition: all .3s ease;
}
.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;
}
a:hover {
color: #5687c3;
}
h1,
h2,
h3,
h4,
h5,
h6 {
clear: both;
color: #222;
letter-spacing: -0.01em;
line-height: 1.4;
}
h1 {
font-size: 1.625rem;
margin-top: 2em;
margin-bottom: 1em;
}
h2 {
font-size: 1.5rem;
margin-top: 2em;
margin-bottom: 1em;
}
h3 {
font-size: 1.375rem;
margin-top: 1.5em;
margin-bottom: 1em;
}
h4 {
font-size: 1.25rem;
margin-top: 1.5em;
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;
}
/* List */
ul,
ol {
margin: 0 0 1.5em 2em;
padding: 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;
}
.table-of-contents,
.entry-content .table-of-contents {
border: 1px solid #e6e6e6;
margin: 0 0 1.6em;
padding: 1.6em 1.6em 1.6em 3.2em;
}
/* Table */
table {
border-top: 1px solid #e6e6e6;
font-size: 0.9375em;
margin: 0 0 1.7em;
width: 100%;
}
th {
font-weight: 700;
text-align: left;
}
th,
td {
border-bottom: 1px solid #e6e6e6;
padding: 0.8em;
}
/* Elements */
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: #666;
font-size: 0.9375em;
margin: 1.85em 0 1.7em;
padding: 32px 24px 0.1em;
position: relative;
}
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;
}
/* Media */
img {
height: auto;
max-width: 100%;
vertical-align: middle;
}
embed,
iframe,
object {
max-width: 100%;
}
/* 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: 1.6em;
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;
}
.hatena-asin-detail::before {
content: "\f270";
}
.itunes-embed::before {
content: "\f179";
}
.hatena-asin-detail .hatena-asin-detail-image,
.itunes-embed .itunes-embed-image {
float: left;
margin-right: 1.6em;
max-width: 60px;
}
@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.8em;
}
.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;
}
/* Clearing */
#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;
}
/* Layout
========================================================================== */
#blog-title-inner,
#content-inner,
#footer-inner,
.breadcrumb-inner {
margin: 0 auto;
max-width: 656px;
padding: 0 20px;
}
#blog-title {
padding-top: 36px;
padding-bottom: 32px;
}
#top-box,
#content {
background-color: #fff;
border-top: 1px solid #e6e6e6;
padding-top: 24px;
}
#top-box + #content {
border-top: 0;
}
.entry,
.page-archive .archive-entry {
border-bottom: 1px solid #e6e6e6;
margin-bottom: 36px;
padding-bottom: 36px;
}
.entry-content {
margin-top: 28px;
}
.entry-footer {
margin-top: 36px;
}
.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 (min-width: 540px) {
#blog-title-inner,
#content-inner,
#footer-inner,
.breadcrumb-inner {
padding-left: 36px;
padding-right: 36px;
}
#top-box,
#content {
padding-top: 36px;
}
}
@media screen and (min-width: 768px) {
#blog-title-inner,
#content-inner,
#footer-inner,
.breadcrumb-inner {
padding-left: 54px;
padding-right: 54px;
}
#blog-title {
padding-top: 48px;
padding-bottom: 40px;
}
#top-box,
#content {
padding-top: 48px;
}
.entry,
.page-archive .archive-entry {
margin-bottom: 48px;
padding-bottom: 48px;
}
.pager {
margin-bottom: 48px;
}
#wrapper {
margin-bottom: 48px;
}
#footer {
padding-top: 36px;
padding-bottom: 36px;
}
}
@media screen and (min-width: 1024px) {
#blog-title-inner,
#content-inner,
#footer-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: -354px;
margin-bottom: 0;
padding-right: 354px;
width: 100%;
}
#main-inner {
border-right: 1px solid #e6e6e6;
padding-right: 54px;
}
#box2 {
float: right;
width: 354px;
}
#box2-inner {
border-left: 1px solid #e6e6e6;
margin-left: -1px;
padding-left: 54px;
}
.pager {
border-bottom: 0;
padding-bottom: 0;
}
}
@media screen and (min-width: 1280px) {
#blog-title-inner,
#content-inner,
#footer-inner,
.breadcrumb-inner,
.main-navigation-inner {
max-width: 1101px;
}
#wrapper {
margin-right: -390px;
padding-right: 390px;
}
#box2 {
width: 390px;
}
}
/* Breadcrumb margin fix */
.page-entry .breadcrumb { margin-bottom: 0; }
#top-box { padding-bottom: 24px; }
@media screen and (min-width: 540px) { #top-box { padding-bottom: 24px; padding-top: 24px; } }
@media screen and (min-width: 768px) { #top-box { padding-bottom: 28px; padding-top: 28px; } }
/* Header
========================================================================== */
#globalheader-container {
background-color: #222;
color: #eee;
}
#blog-title {
text-align: center;
}
@media screen and (min-width: 1024px) {
#blog-title {
text-align: left;
}
}
#title {
display: inline-block;
line-height: 1.2;
margin: 0;
}
#title a,
#title a:hover {
color: #222;
}
#title a:hover {
opacity: 0.7;
}
#blog-description {
color: #999;
font-size: 0.9375em;
font-weight: normal;
letter-spacing: normal;
margin: 0;
}
/* Header-Image */
.header-image-enable #blog-title #title a {
color: #fff;
-webkit-text-shadow: 0 1px 2px #000;
text-shadow: 0 1px 2px #000;
}
.header-image-enable #blog-title #blog-description {
color: rgba(255,255,255,0.9);
font-weight: normal;
-webkit-text-shadow: 0 1px 2px #000;
text-shadow: 0 1px 2px #000;
}
/* Navigation
========================================================================== */
.main-navigation {
font-size: 0.9375em;
}
.main-navigation,
.main-navigation ul ul {
background-color: #222;
}
.main-navigation ul {
display: none;
list-style: none;
margin: 0;
}
.main-navigation.toggled ul {
display: block;
}
.menu-toggle {
cursor: pointer;
}
.menu-toggle::before {
content: "\f0c9";
display: inline-block;
font: normal 16px/1 FontAwesome;
margin-right: 12px;
vertical-align: middle;
}
.menu-toggle,
.main-navigation a {
color: rgba(255,255,255,0.8);
display: block;
line-height: 54px;
padding: 0 20px;
text-decoration: none;
}
.menu-toggle:hover,
.main-navigation a:hover {
color: rgba(255,255,255,0.9);
}
.main-navigation a {
border-top: 1px solid rgba(255,255,255,0.2);
}
.main-navigation ul ul a {
padding-left: 30px;
}
.main-navigation ul ul ul a {
padding-left: 45px;
}
.main-navigation ul ul ul ul a {
padding-left: 60px;
}
@media screen and (min-width: 1024px) {
.menu-toggle {
display: none;
}
.main-navigation-inner {
margin: 0 auto;
}
.main-navigation-inner ul {
position: relative;
left: -18px;
}
.main-navigation ul {
display: block;
letter-spacing: -0.4em;
}
.main-navigation ul li {
display: inline-block;
letter-spacing: normal;
position: relative;
}
.main-navigation ul ul {
box-shadow: 0 0 2px rgba(0,0,0,0.5);
letter-spacing: normal;
opacity: 0;
text-align: left;
-webkit-transition: all .3s ease;
transition: all .3s ease;
width: 216px;
position: absolute;
top: 100%;
/* left: -9999px; */
left: 0;
visibility: hidden;
z-index: 9999;
}
.main-navigation ul ul li,
.main-navigation ul ul ul li,
.main-navigation ul ul ul ul li {
display: block;
}
.main-navigation ul li:hover > ul {
opacity: 1;
left: 0;
visibility: visible;
}
.main-navigation ul ul ul {
top: 0;
left: 100%;
}
.main-navigation ul ul li:hover > ul {
opacity: 1;
left: 100%;
visibility: visible;
}
.main-navigation a {
border-top: 0;
padding: 0 18px;
}
.main-navigation ul ul a {
border-top: 1px solid rgba(255,255,255,0.2);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.main-navigation ul ul a,
.main-navigation ul ul ul a,
.main-navigation ul ul ul ul a {
padding: 0 18px;
}
.main-navigation a.has-child::after {
content: "\f107";
display: inline-block;
font: normal 16px/1 FontAwesome;
margin-left: 8px;
vertical-align: middle;
position: relative;
top: -2px;
}
.main-navigation ul ul a.has-child::after {
content: "\f105";
display: inline-block;
font: normal 16px/1 FontAwesome;
position: absolute;
top: 19px;
right: 17px;
}
}
/* Recommend Entries
========================================================================== */
#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;
/* float: left; */
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;
}
/* Breadcrumb
========================================================================== */
.breadcrumb {
font-size: 0.9375em;
}
.breadcrumb-gt {
margin: 0 4px;
}
/* Entry Header
========================================================================== */
.entry-header {
position: relative;
}
.entry-title {
line-height: 1.2;
margin: 0;
}
.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;
}
.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: -78px;
}
.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 {
display: block;
font-size: 0;
}
@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
========================================================================== */
.entry-content > *:first-child {
margin-top: 0;
}
.entry-content > *:last-child {
margin-bottom: 0;
}
.entry-content .entry-see-more {
background-color: #222;
border-radius: 2px;
box-sizing: border-box;
color: rgba(255,255,255,0.9);
display: inline-block;
font-size: 0.875em;
line-height: 44px;
min-width: 176px;
text-align: center;
text-decoration: none;
}
.entry-content .entry-see-more:hover {
background-color: #555;
color: rgba(255,255,255,0.9);
}
.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
========================================================================== */
.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: 32px;
}
/* Archive
========================================================================== */
.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
========================================================================== */
.comment-box {
font-size: 0.9375em;
text-align: right;
}
.comment-box .comment {
list-style: none;
margin: 0;
padding: 0;
}
.entry-comment {
border-top: 1px solid #e6e6e6;
padding: 28px 0 28px 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 {
border: 1px solid #e6e6e6;
border-radius: 2px;
box-sizing: border-box;
color: #333;
display: inline-block;
font-size: 0.875em;
line-height: 44px;
min-width: 176px;
text-align: center;
}
.leave-comment-title:hover {
background-color: #f6f6f6;
color: #333;
}
/* Pager
========================================================================== */
.pager {
font-size: 0.9375em;
}
.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::before {
content: "prev";
}
.pager-prev {
float: left;
text-align: left;
width: 48%;
}
.pager-next::before {
content: "next";
}
.pager-next {
float: right;
text-align: right;
width: 48%;
}
.pager-arrow {
display: none;
}
/* Sidebar
========================================================================== */
.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;
}
/* Profile */
.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;
}
.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;
}
/* Recent Posts, Popular Posts */
.urllist-date-link {
color: #999;
font-size: 0.8667em; /* 15 * 0.8667 = 13 */
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: 20px 0;
}
.urllist-with-thumbnails li:first-child {
border-top: 0;
}
.urllist-with-thumbnails li .urllist-image {
float: left;
margin: 0 20px 0 0;
}
/* 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;
}
/* Category */
.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;
}
.hatena-module-category .hatena-urllist li a:hover {
background-color: #f6f6f6;
color: #333;
}
/* Search */
.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 {
border: 1px solid #e6e6e6;
box-shadow: none;
box-sizing: border-box;
height: 44px;
line-height: 44px;
outline: 0;
padding: 8px 52px 8px 12px;
-webkit-transition: all .3s ease;
transition: all .3s ease;
width: 100%;
}
.search-result-form .search-result-input {
font-size: 0.9375em;
}
.search-form .search-module-input:hover,
.search-result-form .search-result-input:hover {
border-color: #ccc;
}
.search-form .search-module-input:focus,
.search-form .search-result-input:hover {
border-color: #ccc;
}
.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=d521df40822702b2798181e2322e97") 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
========================================================================== */
#footer {
background-color: #222;
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
========================================================================== */
#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);
}
/* Advertisement
========================================================================== */
.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;
}
/* */
/* */
/* default */
/* */
/* Responsive: yes */
@font-face {
font-family: 'Noto Sans Japanese';
font-style: normal;
font-weight: 200;
src: url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-DemiLight.woff2) format('woff2'),
url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-DemiLight.woff) format('woff'),
url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-DemiLight.otf) format('opentype');
}
@font-face {
font-family: 'Noto Sans Japanese';
font-style: normal;
font-weight: 400;
src: local('NotoSansJP-Regular.otf'),
url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.woff2) format('woff2'),
url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.woff) format('woff'),
url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.otf) format('opentype');
}
@font-face {
font-family: 'Noto Sans Japanese';
font-style: normal;
font-weight: 700;
src: url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Bold.woff2) format('woff2'),
url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Bold.woff) format('woff'),
url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Bold.otf) format('opentype');
}
/* プロフィールアニメーション */
.profile-circle {
display: block;
position: relative;
width: 180px;
height: 180px;
cursor: pointer;
background: url(https://cdn-ak.f.st-hatena.com/images/fotolife/m/mshimfujin/20170601/20170601020427.png);
background-size: 101%;
background-position: top left;
border-radius: 100%;
margin: 10px auto;
-webkit-transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
border: solid 1px #ccc;
}
.profile-circle:hover {
background-size: 115%;
border:1px solid #ccc;
text-decoration:none;
}
.profile-circle:hover .outside {
color: #222222;
-webkit-transform: rotate(-45deg) translate(0px) rotate(-315deg);
transform: rotate(-45deg) translate(0px) rotate(-315deg);
background: rgba(255, 255, 255, 0.5);
width: 180px;
letter-spacing: 10px;
padding-left: 10px;
line-height: 180px;
height: 180px;
margin-top: -70px;
margin-left: -90px;
-webkit-transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1), letter-spacing 1.5s ease-out;
transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1), letter-spacing 1.5s ease-out;
}
.profile-circle .outside {
display: block;
position: absolute;
line-height: 100px;
text-align: center;
letter-spacing: 4px;
padding-left: 4px;
box-sizing: border-box;
font-weight: 800;
color: #fff;
border-radius: 100%;
width: 100px;
height: 100px;
background: #5d5d5d;
left: 50%;
top: 40%;
margin-top: -50px;
margin-left: -50px;
-webkit-transform: rotate(-135deg) translate(-100px) rotate(135deg);
transform: rotate(-135deg) translate(-100px) rotate(135deg);
-webkit-transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
}
html, body {
font-family: 'Noto Sans Japanese', YuGothic, 'Yu Gothic', 游ゴシック体, 游ゴシック, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Helvetica, Verdana;
}
body {
font-family: 'Noto Sans Japanese';
}
body p {
line-height: 1.4446;
letter-spacing: 0.1em;
color: #333;
}
#blog-title {
text-align: center;
}
#blog-title, #title a {
background-color: #c9c19f;
color:#ffffff;
}
/* カテゴリー */
.categories a {
color: #5d5d5d; /* 文字色 */
background-color: #fff; /* 背景色 */
border-radius: 2px;
border: solid 1px #5d5d5d;
padding-bottom: 2px;
}
.categories a:hover {
color: #fff; /* ホバー時の文字色 */
background-color: #5d5d5d; /* ホバー時の背景色 */
}
/* エントリーコンテンツ文 */
.entry-content p {
font-family: 'Noto Sans Japanese';
font-weight: 200;
}
/* entryカスタマイズ */
.entry-header {
position: relative;
padding: 0 0 15px;
margin-bottom: 20px;
border-radius: 3px;
padding:5px;
color: #707070;
border-left: 6px solid #bac5a5;
background: linear-gradient(
-45deg,
#fff 25%,
#f4f4ed 25%, #f4f4ed 50%,
#fff 50%, #fff 75%,
#f4f4ed 75%, #f4f4ed
);
background-size: 4px 4px;
}
.entry-header::before {
position: absolute;
left: -6px;
bottom: 0;
content: '';
width: 6px;
height: 60%;
background-color: #f6cd8a;
}
.entry-header .categories {
font-size: 0.6em;
padding-left: 85px;
display: block;
}
.entry-header .entry-title {
font-size: 1.5em;
padding: 0 0 0 70px;
margin: 0;
min-height: 60px;
}
.entry-title a:hover {
color: #fff;
text-shadow:
0 1px 0 #5d5d5d,
1px 0 0 #5d5d5d,
0 -1px 0 #5d5d5d,
-1px 0 0 #5d5d5d,
-1px -1px 0 #5d5d5d,
1px -1px 0 #5d5d5d,
-1px 1px 0 #5d5d5d,
1px 1px 0 #5d5d5d
;
}
/* hatenaモジュールタイトル */
.hatena-module-title {
position:relative;
font-size: 1.143em;
font-weight: bold;
position: relative;
padding: .5em 1em .5em 0em;
color: #707070;
border-bottom: solid 5px #f6cd8a;
background: linear-gradient(
-45deg,
#fff 25%,
#f4f4ed 25%, #f4f4ed 50%,
#fff 50%, #fff 75%,
#f4f4ed 75%, #f4f4ed
);
background-size: 4px 4px;
}
.hatena-module-title:after {
position: absolute;
content: " ";
display: block;
border-bottom: solid 5px #bac5a5;
bottom: -5px;
width: 30%;
}
/* hatena-module-titleの手前にアイコンを付ける */
.hatena-module-title:before {
font-family:"FontAwesome";
content:"\f06c";
color:#5d5d5d;
padding-left: .5em;
font-size:18px;
margin-right:9px;
}
/* 見出しデザイン */
.entry-content h2 {
position: relative;
font-size: 1.4em;
font-weight: bold;
padding: .75em 1em .75em 1em;
color: #707070;
border-left: 6px solid #bac5a5;
background: linear-gradient(
-45deg,
#fff 25%,
#f4f4ed 25%, #f4f4ed 50%,
#fff 50%, #fff 75%,
#f4f4ed 75%, #f4f4ed
);
background-size: 4px 4px;
}
.entry-content h2::before {
color: #707070;
position: absolute;
left: -6px;
bottom: 0;
content: '';
width: 6px;
height: 60%;
background-color: #f6cd8a;
}
.entry-content h3 {
position:relative;
font-size: 1.2em;
font-weight: bold;
padding: .5em 1em .5em 0em;
color: #707070;
border-bottom: solid 5px #f6cd8a;
background: linear-gradient(
-45deg,
#fff 25%,
#f4f4ed 25%, #f4f4ed 50%,
#fff 50%, #fff 75%,
#f4f4ed 75%, #f4f4ed
);
background-size: 4px 4px;
}
.entry-content h3:after {
position: absolute;
content: " ";
display: block;
border-bottom: solid 5px #bac5a5;
bottom: -5px;
width: 30%;
}
.entry-content h3:before {
font-family:"FontAwesome";
content:"\f101";
color:#5d5d5d;
font-size:18px;
margin-right:9px;
padding-left: .5em;
}
.entry-content h4 {
font-size: 1.143em;
color: #707070;
position: relative;
padding: .5em .75em .5em .5em;
}
.entry-content h4::before,
.entry-content h4::after {
position: absolute;
bottom: -4px;
left: 0;
content: '';
height: 4px;
}
.entry-content h4::before {
z-index: 2;
width: 15%;
background-color: #bac5a5;
}
.entry-content h4::after {
width: 100%;
background: linear-gradient(
-45deg,
#fff 25%,
#f6cd8a 25%, #f6cd8a 50%,
#fff 50%, #fff 75%,
#f6cd8a 75%, #f6cd8a);
background-size: 4px 4px;
}
.entry-content h5 {
font-size: 1.2em;
font-weight: bold;
padding: .5em .75em .5em .5em;
color: #707070;
border-left: 7px solid #bac5a5;
}
/*ナビゲーション関連ここから*/
/*ナビゲーション中央に*/
@media screen and (min-width: 1024px) {
.main-navigation {
text-align: center;
}
}
/*ナビゲーション色変更*/
.main-navigation,
.main-navigation ul ul {
background-color: #707070;
}
/*文字色変更*/
.menu-toggle,
.main-navigation a {
color: #fff;
}
.menu-toggle:hover,
.main-navigation a:hover {
color: #707070;
background: linear-gradient(
-45deg,
#fff 25%,
#f4f4ed 25%, #f4f4ed 50%,
#fff 50%, #fff 75%,
#f4f4ed 75%, #f4f4ed
);
background-size: 4px 4px;
}
/* ナビゲーション関連ここまで */
/*ナビゲーションバーの下の人気記事のカスタマイズ*/
#recommend-entries {
padding: 0;
}
#recommend-entries-inner {
max-width: 100%;
padding: 0;
}
#recommend-entries .urllist-title-link {
background: rgba(0, 0, 0, 0.5);
padding: 9px 12px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
/*****ここから会話のCSS*****/
.talk-wrap{
display: block;
clear: both;
margin:0 auto 3px auto;
font-weight: 200;
}
.talk-wrap p{
margin:0;
}
.left-icon{
width: 100px;
height: 100px;
border-radius: 50%;
-webkit-border-radius: 50%;
background: no-repeat;
background-size: 180%;
background-position: center;
float:left;
display:inline-block;
box-shadow: 1px 1px 5px #aaa; /*左のアイコンの影の設定*/
border: 3px solid #fff; /*左のアイコンの枠の設定*/
margin-bottom: 10px;
}
.talk-left{
float:right;
position: relative;
background: #fff; /*左の会話の背景色*/
border: 1px solid #707070;
padding: 3%;
border-radius: 10px;
width: 70%;
margin-top:10px;
box-shadow: 1px 1px 5px #aaa; /*左の会話の影の設定*/
margin-bottom: 10px;
}
.talk-left:before {
content: "";
display: inline-block;
border: 10px solid transparent;
border-right-color: #707070;
position: absolute;
left: -20px;
top: 25%;
margin-top: -6px;
}
.talk-left:after {
content: "";
display: inline-block;
border: 9px solid transparent;
border-right-color: #fff;
position: absolute;
left: -17px;
top: 25%;
margin-top: -5px;
}
.right-icon{
width: 100px;
height: 100px;
border-radius: 50%;
-webkit-border-radius:50%;
background: no-repeat;
background-size: 180%;
background-position: center;
float:right;
display:inline-block;
box-shadow: 1px 1px 5px #aaa; /*右のアイコンの影の設定*/
border: 3px solid #FFF; /*右のアイコンの枠の設定*/
margin-bottom: 10px;
}
.talk-right{
float:left;
position: relative;
background: #fff; /*右の会話の背景色*/
border: 1px solid #707070;
padding: 3%;
border-radius: 10px;
width: 70%;
margin-top:10px;
box-shadow: 1px 1px 5px #aaa; /*右の会話の影*/
margin-bottom:10px;
}
.talk-right:before {
content: "";
display: inline-block;
border: 10px solid transparent;
border-left-color: #666;
position: absolute;
right: -20px;
top: 25%;
margin-top: -6px;
}
.talk-right:after {
content: "";
display: inline-block;
border: 9px solid transparent;
border-left-color: #fff;
position: absolute;
right: -17px;
top: 25%;
margin-top: -5px;
}
.talk-end{
clear:both;
}
/*****レスポンシブ設定*****/
@media screen and (max-width: 480px){
.left-icon{
width: 80px;
height: 80px;
}
.talk-left{
width: 65%;
}
.right-icon{
width: 80px;
height: 80px;
}
.talk-right{
width: 65%;
}
}
@media screen and (max-width: 380px){
.left-icon{
width: 60px;
height: 60px;
}
.talk-left{
width: 65%;
}
.right-icon{
width: 60px;
height: 60px;
}
.talk-right{
width: 65%;
}
}
/* プロフィールのcss */
.prof-wrap{
display: block;
clear: both;
margin:0 auto 3px auto;
}
.prof-icon{
width: 100px;
height: 100px;
border-radius: 50%;
-webkit-border-radius: 50%;
background: no-repeat;
background-size: 180%;
background-position: center;
float:left;
display:inline-block;
box-shadow: 1px 1px 1px #aaa; /*左のアイコンの影の設定*/
border: 3px solid #fff; /*左のアイコンの枠の設定*/
margin-bottom: 3px;
margin-right: 3px;
}
/* プロフィールのcss */
.picedge{
border:1px solid #dcdcdc;/* 外枠の色 */
border-radius: 50%; /* 外枠の丸み */
padding:5px;/* 余白 */
background-color:#ffffff;/* 余白部分の色 */
}
/* プロフィールのcss */
.picedgef {
display: inline-block;
position: relative;
}
.picedgef:after { /* この要素が内向きのシャドウを写真に落とす */
position: absolute;
display: block;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5),
inset 0 0 100px rgba(0, 0, 0, 0.2);
}
/*写真用*/
.profframe{
border:1px solid #dcdcdc;/* 外枠の色 */
width: 50px;
height: 50px;
padding:5px;/* 余白 */
margin:2px; /* 上部余白 */
background-color:#ffffff;/* 余白部分の色 */
float:left;
}
/*旅日記用*/
.travelpic{
border:1px solid #dcdcdc;/* 外枠の色 */
padding:5px;/* 余白 */
margin:2px; /* 上部余白 */
background-color:#ffffff;/* 余白部分の色 */
word-break:break-all;
font-size: 60%;
color: gray;
}
travelpic.img {
display: block;
}
/*float手抜き用*/
.floatl{
float:left;
}
.floatr{
float:right;
}
/* 続きを読むボタンカスタマイズ */
.entry-content .entry-see-more {
display: inline-block;
font-size: 0.875em;
line-height: 44px; /* Button height */
min-width: 176px; /* Button width */
text-align: center;
text-decoration: none;
box-sizing: border-box;
background: #fff;
border: solid 1px #5d5d5d;
color: #5d5d5d;
vertical-align: middle;
position: relative;
-webkit-backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
-webkit-transition: background-color 0.3s, color 0.3s;
transition: background-color 0.3s, color 0.3s;
}
.entry-content .entry-see-more:focus {
outline: none;
}
.entry-content .entry-see-more::before {
content: '';
position: absolute;
top: -15px;
left: -15px;
bottom: -15px;
right: -15px;
background: inherit;
z-index: -1;
opacity: 0.4;
-webkit-transform: scale3d(0.8, 0.5, 1);
transform: scale3d(0.8, 0.5, 1);
}
.entry-content .entry-see-more:hover {
-webkit-transition: background-color 0.1s 0.3s, color 0.1s 0.3s;
transition: background-color 0.1s 0.3s, color 0.1s 0.3s;
color: #ECEFF1; /* カーソルを重ねた時の文字の色 */
background-color: #5b5b5b; /* カーソルを重ねた時の背景色 */
border:solid 1px #a4a4a4; /* ボーダー色 ボーダーが要らなければこの行を削除 */
-webkit-animation: anim-1 0.3s forwards;
animation: anim-1 0.3s forwards;
}
.entry-content .entry-see-more:hover::before {
-webkit-animation: anim-2 0.3s 0.3s forwards;
animation: anim-2 0.3s 0.3s forwards;
}
/* ページトップへ戻るボタン */
#pagetop {
position:fixed;
bottom:45px;
right:5px;
padding:10px 10px;
color: #353535; /* 文字色 */
text-decoration:none;
background: linear-gradient(
-45deg,
#fff 25%,
#f4f4ed 25%, #f4f4ed 50%,
#fff 50%, #fff 75%,
#f4f4ed 75%, #f4f4ed
);
background-size: 4px 4px;
border: 1px solid #5d5d5d;
border-radius: 2px;
opacity: 0.6;
z-index: 99;
}
/* ページトップへ戻るボタン：ホバー時 */
#pagetop:hover {
color: #ffffff; /* 文字色 */
background:#5d5d5d;
}
/* トップページのコメントを非表示に */
.page-index .comment-box {
display: none;
}
/* パンくずリスト */
.breadcrumb-link {
color: #5d5d5d;
font-size: .6em;
background-color: #fff; /* 背景色 */
border: 1px solid #5d5d5d;
border-radius: 2px;
text-decoration: none;
padding-top: .9em;
padding-bottom: .9em;
padding-right: 1em;
padding-left: 1em;
display: inline-block;
}
.breadcrumb-link a {
background-color: #5d5d5d;
}
.breadcrumb-child-link {
color: #5d5d5d;
font-size: .6em;
background-color: #fff; /* 背景色 */
border: 1px solid #5d5d5d;
border-radius: 2px;
text-decoration: none;
padding-top: .9em;
padding-bottom: .9em;
padding-right: 1em;
padding-left: 1em;
display: inline-block;
}
/* サイドバーのカテゴリーカスタマイズ */
.hatena-module-category .hatena-module-body ul.hatena-urllist li a{
color: #5d5d5d;
font-size: .6em;
background-color: #fff; /* 背景色 */
border: 1px solid #5d5d5d;
border-radius: 2px;
text-decoration: none;
*padding-top: 1px;
*padding-bottom: 1px;
padding-left: 5px;
padding-right: 5px;
}
.hatena-module-category .hatena-module-body ul.hatena-urllist li a:hover {
color: #fff;
background-color: #5d5d5d; /* 背景色 */
border: 1px solid #5d5d5d;
}
.hatena-module {
clear: both;
overflow: hidden;
}
/*トップページの星とエントリフッターを非表示に*/
@media screen and (max-width: 42.5em) {
.page-index .entry-footer,
.page-index .entry-see-more,
.page-index .entry-categories {
display: none;
}
}
/* うちのサイト専用ここから */
.page-index .talk-wrap {
display: initial;
}
.page-index .talk-wrap .left-icon {
display: none;
}
.page-index .talk-wrap .talk-left {
all: initial;
}
.entry-header .entry-title {
font-size: 1.3em;
padding: 0 0 0 60px;
}
/* 押した感じのエフェクト共通 */
@-webkit-keyframes anim-1 {
60% {
-webkit-transform: scale3d(0.8, 0.8, 1);
transform: scale3d(0.8, 0.8, 1);
}
85% {
-webkit-transform: scale3d(1.1, 1.1, 1);
transform: scale3d(1.1, 1.1, 1);
}
100% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes anim-1 {
60% {
-webkit-transform: scale3d(0.8, 0.8, 1);
transform: scale3d(0.8, 0.8, 1);
}
85% {
-webkit-transform: scale3d(1.1, 1.1, 1);
transform: scale3d(1.1, 1.1, 1);
}
100% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@-webkit-keyframes anim-2 {
to {
opacity: 0;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes anim-2 {
to {
opacity: 0;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
/* タイトル周り */
#blog-title {
padding-top: 5px;
padding-bottom: 5px;
height: initial;
}
.header-image-only #blog-title #blog-title-inner {
height: 250px;
background-size: contain;
}
@media (max-width: 480px) {
#blog-title {
height: initial;
}
.header-image-only #blog-title #blog-title-inner {
height: 150px;
background-size: contain;
}
}
/*ブログカード下のURL削除*/
.hatena-citation{
display:none;
}
/* footer調整 */
#footer {
height: 20px;
background-color: #5d5d5d;
color: #fff;
padding: initial;
}
#footer address {
font-size: 10px;
font-weight: 700;
text-align: center;
}
#footer p {
display: none;
}
.footer-address-name:before {
font-family:"FontAwesome";
content:"\f1f9";
margin-right:4px;
}
/* グローバルヘッダー */
#globalheader-container {
color: #5d5d5d;
background: #fff;
border-bottom: 1px solid #5d5d5d;
}
/* 読者カバー */
.cover_sec { box-sizing: border-box; }
.cover_sec, .d_button, .d_cover, .d_innie, .d_spine, .d_outie, .d_shadow {
transition: .6s;
}
.cover_sec, d_button { transition-timing-function: ease; }
.cover_sec {
display: inline-block;
position: relative;
align-self: center;
padding: .375rem 1rem 0 1rem;
width: 95px;
background: #A9ADB6;
border-radius: .25rem;
perspective: 300;
box-shadow: 0 -1px 2px #fff, inset 0 1px 2px rgba(0,0,0,.2), inset 0 .25rem 1rem rgba(0,0,0,.1);
}
.d_button { opacity: 0; }
.d_cover {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
transform-origin: center bottom;
transform-style: preserve-3d;
font-size: 1.8em;
color: white;
text-align: center;
pointer-events: none;
z-index: 50;
}
.d_innie, .d_outie, .d_spine, .d_shadow { position: absolute; width: 100%; }
.d_innie, .d_outie {
height: 100%;
background-image: -webkit-linear-gradient(top, transparent 0%, rgba(0,0,0,.1) 100%);
border-radius: .25rem;
}
.d_innie:after, .d_outie:after {
font-family: 'blogicon';
content: "\f000";
}
.d_innie {
background-color: #c2c2c2;
text-shadow: 0 -2px 4px rgba(0,0,0,.2);
}
.d_spine {
top: .25rem;
background: #c3c3c3;
height: .25rem;
transform: rotateX(90deg);
transform-origin: center top;
}
.d_shadow {
top: 100%;
left: 0;
height: 3.5rem;
transform-origin: center top;
transform: rotateX(90deg);
opacity: 0;
z-index: 0;
background-image: -webkit-linear-gradient(top, rgba(0,0,0,.6) 0%, transparent 100%);
background-image: linear-gradient(to bottom, rgba(0,0,0,.6) 0%, transparent 100%);
}
.d_outie {
background-color: #555;
transform: translateZ(.25rem);
text-shadow: 0 2px 4px rgba(0,0,0,.2);
}
.cover_sec:hover { background: #EBEFF2; }
.cover_sec:hover .d_button { opacity: 1; }
.cover_sec:hover .d_cover, .cover_sec:hover .d_innie, .cover_sec:hover .d_spine, .cover_sec:hover .d_outie, .cover_sec:hover .d_spine { transition-timing-function: cubic-bezier(.2,.7,.1,1.1); }
.cover_sec:hover .d_cover { transform: rotateX(-120deg); }
.cover_sec:hover .d_innie { background-color: #c2c2c2; }
.cover_sec:hover .d_spine { background-color: #000; }
.cover_sec:hover .d_outie { background-color: #c4c4c4; color: rgba(255,255,255,0); }
.cover_sec:hover .d_shadow {
opacity: 1;
transform: rotateX(45deg) scale(.95);
}
d_small {
display: block;
padding: 5rem;
font: .8rem/1 sans-serif;
color: #777;
}
d_small a { color: #222; text-decoration: none; border-bottom: 1px solid #ccc; }
d_small a:hover { border-bottom-color: #222; }
/ *読者カバー用リセット* /
.hatena-follow-button-box {}
.hatena-follow-button {
color: #5d5d5d !important;
padding: 4px 10px !important;
background: none !important;
border: 0px !important;
}
.hatena-follow-button-box .subscription-count {
height: 26px;
line-height: 26px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding:1px 10px 1px 10px;
}
.hatena-follow-button.subscribing, .hatena-follow-button.subscribing.hover, .hatena-follow-button.unsubscribing, .hatena-follow-button.unsubscribing.hover {
color: #5d5d5d!important;
font-weight: bold;
width: 80px;
}
.hatena-follow-button-box .subscription-count-box {
margin: 0 0 0 6px!important;
top:-2px;
}
/* ランキングと注目の写真に影 */
img.urllist-image.entries-access-ranking-image {
box-sizing: border-box;
display: block;
}
img.urllist-image.recent-entries-image {
box-sizing: border-box;
display: block;
}
/*関連記事Milliardのカスタマイズ*/
.ssImg{
height: 80px;
width: 80px;
padding: 0;
box-sizing: border-box;
display: block;
}
.ssTitle{
font-size: 90%;
}
.ssPanel{
border-top: 1px solid rgb(228, 228, 228) !important;
border-bottom: none !important;
width: 49% !important;
height: 100px !important;
float: left !important;
margin-right: 1% !important;
}
.ssLimitedContainerHeader > div > div > div{
color: #5d5d5d ;
background: #fff;
border: 1px solid #5d5d5d;
border-radius:2px;
font-size: 16px ;
padding: 10px 5px 10px 10px !important;
margin-top: 15px;
}
/*関連記事Milliardカスタマイズスマホ版*/
@media screen and (max-width:680px){
.ssPanel{
width: 100% !important;
}
}
/* トップページをすっきりみせたい */
.page-index .post-thumbnail {
display: block;
float: left;
margin: 0 1.5em 1.5em 0;
width: 160px;
height: 120px;
overflow: hidden;
}
.page-index .post-thumbnail img {
max-width: none;
height: 100%;
position: relative;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.page-index .cstmreba {
display:none;
}
.archive-entries .star-container {
display:none;
}
.entry-footer .hatena-star-container {
display:none;
}
/* youtubeをレスポンシブに */
.iframe-content {
position: relative;
width: 100%;
padding: 56.25% 0 0 0;
}
.iframe-content iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* 紹介 */
.syokai{
box-sizing: border-box;
width: 100%;
display: block;
margin:15px 0;
padding:10px;
border: solid 1px #5d5d5d;
border-radius:2px;
overflow: auto;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.syokai img{
height:65px;
width:65px;
text-align:left;
float:left;
margin: 0 5px 0 0;
clear: both;
}
.syokai p{
font-weight: 300;
}
/* card */
.card{
box-sizing: border-box;
width: 100%;
display: block;
margin:15px 0;
padding:10px;
border: solid 1px #5d5d5d;
border-radius:2px;
overflow: auto;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.card2{
padding:15px;
margin-bottom: 10px;
border: 1px solid #CCC;
border-radius: 2px;
font-weight:400;
}
/* aboutcard */
.aboutcard{
box-sizing: border-box;
width: 100%;
display: block;
margin:15px 0;
padding:10px;
border: solid 1px #5d5d5d;
border-radius:2px;
overflow: auto;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.aboutcard img{
height:170px;
margin-right: 5px;
float:left;
clear: both;
}
/* 子供紹介 */
.children {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
margin:5px;
border-radius: 5px;
box-shadow: 0 2px 5px #ccc;
}
.children-img {
border-radius: 5px 5px 0 0;
max-width: 100%;
height: auto;
}
.children-text {
font-size: 12px;
padding: 2px;
}
.children-wrap {
-webkit-flex: 2;
flex: 2;
max-width: 90px;
}
.children-wrap2 {
-webkit-flex: 2;
flex: 2;
}
.children-area {
display:inline-block;
text-decoration:none;
}
/* カード */
.mcard {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
margin:5px;
}
.mcard-img {
border-radius: 50%;
max-width: 100%;
height: auto;
}
.mcard-text {
font-size: 13px;
padding: 2px;
}
.mcard-wrap {
-webkit-flex: 2;
flex: 2;
max-width: 90px;
}
.mcard-wrap2 {
-webkit-flex: 2;
flex: 2;
}
.mcard-area {
display:inline-block;
text-decoration:none;
}
.pic_mfujin {
display: block;
position: relative;
width: 90px;
height: 90px;
background: url(https://cdn-ak.f.st-hatena.com/images/fotolife/m/mshimfujin/20170603/20170603171424.jpg);
background-position: top left;
background-size:cover;
border-radius: 100%;
margin: 10px auto;
}
.pic_mshi {
display: block;
position: relative;
width: 90px;
height: 90px;
background: url(https://cdn-ak.f.st-hatena.com/images/fotolife/m/mshimfujin/20170603/20170603171420.jpg);
background-position: top left;
background-size:cover;
border-radius: 100%;
margin: 10px auto;
}
.pic_mko {
display: block;
position: relative;
width: 90px;
height: 90px;
background: url(https://cdn-ak.f.st-hatena.com/images/fotolife/m/mshimfujin/20170603/20170603171415.jpg);
background-position: top left;
background-size:cover;
border-radius: 100%;
margin: 10px auto;
}
.pic_ponite {
display: block;
position: relative;
width: 90px;
height: 90px;
background: url(https://cdn-ak.f.st-hatena.com/images/fotolife/m/mshimfujin/20170603/20170603171430.jpg);
background-position: top left;
background-size:cover;
border-radius: 100%;
margin: 10px auto;
}
/* ブックマークの数字の位置調整 */
a.bookmark-widget-counter img {
position: absolute;
right: 0px;
bottom: 20px;
}
/* 記事がよかったらいいね */
.facebook_like {
box-sizing: border-box;
background-color: #535353;
margin-bottom: 10px;
max-width: 550px;
max-height: 200px;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
}
.p-entry__pushThumb {
height: 200px;
-webkit-flex: 1.7;
flex: 1.7;
}
.entry_favorite{
-webkit-flex: 2;
flex: 2;
padding-left: 5px;
padding-right: 5px;
overflow: hidden;
}
.entry_favorite p {
color: #fff;
}
/*********急がばさんフォローボタン着せ替え**********/
.follow-btn{
width: 100%;
margin: 5px 0px 5px 0px;
}
.follow-btn ul {
list-style: none;
display: -webkit-flex;
display: flex;
margin: 0;
padding: 0;
}
.follow-btn li {
height:80px;
width: 100%;
-webkit-transition: width 0.3s ease-out;
transition: width 0.3s ease-out;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
transition: all 0.6s ease;
}
.follow-btn li span{
line-height:2.0;
font-size:180%;
font-weight: normal;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.follow-btn li:hover {
width: 200%; /* 変化するボタンの大きさ */
}
/* btn */
.btn1 a, .btn2 a, .btn3 a, .btn4 a, .btn5 a {
color: #5d5d5d;
background-color:#f8f8f8;
transition: all 0.6s ease;
}
/* hatena */
.btn1 a {
border-bottom: solid 6px #5d5d5d; /* ボーダー色 */
}
.btn1 a:hover {
color: #fff;
background-color: #5d5d5d; /* カーソルを重ねた時の背景色 */
}
/* twitter */
.btn2 a {
border-bottom: solid 6px #6FB6C3; /* ボーダー色 */
}
.btn2 a:hover {
color: #fff;
background-color: #6FB6C3; /* 背景色 */
}
/* feedly */
.btn3 a {
border-bottom: solid 6px #82C36F; /* ボーダー色 */
}
.btn3 a:hover {
color: #fff;
background-color: #82C36F; /* 背景色 */
}
/* facebook */
.btn4 a {
border-bottom: solid 6px #6998b9; /* ボーダー色 */
}
.btn4 a:hover {
color: #fff;
background-color: #6998b9;/*Facebookの背景色*/
}
/* googleform */
.btn5 a {
border-bottom: solid 6px #b96969; /* ボーダー色 */
}
.btn5 a:hover {
color: #fff;
border-bottom: solid 6px #b96969; /* ボーダー色 */
background-color: #b96969;/*Fromの背景色*/
}
.btn1-icon:before{
content: "\f000";/*はてなアイコン*/
display: inline-block;
font-family: blogicon;
}
.btn2-icon:before{
content: "\f035";/*Twitterアイコン*/
display: inline-block;
font-family: blogicon;
}
.btn3-icon:before{
content: "\f04e";/*Feedlyアイコン*/
display: inline-block;
font-family: blogicon;
}
.btn4-icon:before{
content: "\f036";/*Facebookアイコン*/
display: inline-block;
font-family: blogicon;
}
.btn5-icon:before{
content: "\f04b";/*Formアイコン*/
display: inline-block;
font-family: blogicon;
}
.follow-btn a {
width:100%;
height:100%;
font-size: 13px;
line-height: 1;
font-weight: normal;
text-decoration: none;
text-align: center;
}
/* シェアボタン */
.share-btn{
width: 100%;
margin: 5px 0px 5px 0px;
}
.share-btn ul {
list-style: none;
display: -webkit-flex;
display: flex;
margin: 0;
padding: 0;
}
.share-btn li {
background-color: #fff;
height:60px;
width: 100%;
-webkit-transition: width 0.3s ease-out;
transition: width 0.3s ease-out;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
font-size: 5vmin;
}
.share-btn li:hover {
width: 200%;
}
.share-btn li a:hover {
color: #fff;
}
.share-btn li span{
line-height:1.5;
font-size:180%;
font-weight: normal;
font-style: normal;
font-weight: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.btn_hatena {
border-bottom: solid 6px #00A4DE;/*左線*/
}
.btn_hatena a {
color: #00A4DE;
}
.btn_hatena a:hover {
background-color: #00A4DE;
}
.btn_twitter{
border-bottom: solid 6px #55ACEE;/*左線*/
}
.btn_twitter a {
color: #55ACEE;
}
.btn_twitter a:hover {
background-color: #55ACEE;
}
.btn_facebook {
border-bottom: solid 6px #405BA7;/*左線*/
}
.btn_facebook a {
color: #405BA7;
}
.btn_facebook a {
color: #405BA7;
}
.btn_facebook a:hover {
background-color: #405BA7;
}
.btn_google {
border-bottom: solid 6px #ad3a2d;/*左線*/
}
.btn_google a {
color: #ad3a2d;
}
.btn_google a:hover {
background-color: #ad3a2d;
}
.btn_pocket {
border-bottom: solid 6px #EE4256;/*左線*/
}
.btn_pocket a {
color: #EE4256;
}
.btn_pocket a:hover {
background-color: #EE4256;
}
.btn_line {
border-bottom: solid 6px #00C300;/*左線*/
}
.btn_line a {
color: #00C300;
}
.btn_line a:hover {
background-color: #00C300;
}
.btn_hatena-icon:before{
display: inline-block;
font-family: "blogicon";
content: "\f027";
}
.btn_twitter-icon:before{
display: inline-block;
font-family: "fontawesome";
content: "\f081";
}
.btn_facebook-icon:before{
display: inline-block;
font-family: "fontawesome";
content: "\f082";
}
.btn_google-icon:before{
content: "\f0d4";/*Googleplusアイコン*/
display: inline-block;
font-family: fontawesome;
}
.btn_pocket-icon:before{
content: "\f265";/*Pocketアイコン*/
display: inline-block;
font-family: fontawesome;
}
.btn_line-icon:before{
content: "LINE";/*LINEアイコン*/
display: inline-block;
}
.share-btn a {
width:100%;
height:100%;
font-size: 13px;
line-height: 1;
font-weight: normal;
text-decoration: none;
text-align: center;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.share-btn .small-text{
line-height: 1;
font-size: 13px;
}
/* 日付カスタマイズ */
.entry-header .date a {
position: absolute;
color: #707070;
text-decoration: none;
font-size: 0.8em;
margin-top: 4px;
margin-bottom: 4px;
margin-left: 4px;
width: 45px;
height:45px;
background: #fff; /* 背景色 */
text-align: center;
border-style:solid;
border-width:6px 1px 1px 1px;
border-color: #707070;
border-radius: 2px; /* ボーダーの丸み */
line-height: 20px;
font-family: Helvetica, Arial, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',
Meiryo, メイリオ, sans-serif;
}
.entry-header .date a:hover {
background-color: #707070; /* ホバーした時の背景色 */
color: #fff; /* ホバーした時の文字の色 */
}
.date-mounth
.date-year {
display: block;
}
.date-day {
display: block;
font-size: 2em;
}
.date-year:after {
content: "-";
}
.hyphen {
display: none;
}
@media screen and (max-width: 680px) {
.entry-header .date a {
font-size: 0.7em;
}
}
/* 目次カスタマイズ */
.entry-content .table-of-contents {
position:relative;
border: 3px solid #f6cd8a;
background: linear-gradient(
-45deg,
#fff 25%,
#f4f4ed 25%, #f4f4ed 50%,
#fff 50%, #fff 75%,
#f4f4ed 75%, #f4f4ed
);
background-size: 4px 4px;
border-radius: 0px 0px 5px 5px;
font-family: 'Noto Sans Japanese';
font-weight: 400;
margin-top:3em;
}
.table-of-contents:after { /* タブ部分 */
position: absolute;
font-family: FontAwesome;
content: '\f03a 目次'; /* 名前を変えたければここを変更 */
background: #f6cd8a;
color: #fff;
right: 0%;
left: 0%;
bottom: 100%;
border-radius: 5px 5px 0 0;
padding: 2px 0px 2px 0px;
margin: 0 -3px 0 -3px;/* -で指定しているところはボーダーと同じ数値にする */
text-align:center;
font-size: 1.2em;
letter-spacing: 2em
}
.table-of-contents li {
font-size:0.9em;
font-weight: bold;
color:#333;
}
.table-of-contents a{
color:#545454;
padding:8px 0;/* 文字の間隔 */
display: block;
text-decoration: none;
}
.table-of-contents li a:hover {
padding-left: 7px; /* カーソル重ねた時に移動する距離 */
}
/*--------------------------------------
ヨメレバ・カエレバ・トマレバ
--------------------------------------*/
.booklink-box, .kaerebalink-box, .tomarebalink-box{
box-sizing: border-box;
border: solid 1px #ccc;
border-radius:5px;
padding: 10px;
margin-bottom: 10px;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
}
.booklink-image, .kaerebalink-image, .tomarebalink-image{
margin:0 15px 0 0;
width: 160px;
text-align: center;
-webkit-flex: 0.3;
flex: 0.3;
}
.cstmreba img{
margin:0 auto;
text-align:center;
}
.booklink-info, .kaerebalink-info, .tomarebalink-info{
-webkit-flex: 1;
flex: 1;
margin:0;
line-height:1.3em;
overflow: hidden;
}
.booklink-name, .kaerebalink-name, .tomarebalink-name{
line-height: 1.5em;
}
.booklink-name a, .kaerebalink-name a, .tomarebalink-name a{
text-decoration:none;
font-weight: bold;
}
.booklink-powered-date, .kaerebalink-powered-date, .tomarebalink-powered-date{
background-color:#DDD;
padding: 2px;
font-size: .5em;
text-align: right;
line-height: 1.2em;
margin-bottom: 3px;
}
.booklink-powered-date a, .kaerebalink-powered-date a, .tomarebalink-powered-date a{
text-decoration:none;
}
.booklink-detail, .kaerebalink-detail, .tomarebalink-address{
font-size: .7em;
}
.booklink-link2, .kaerebalink-link1, .tomarebalink-link1{
flex-wrap: wrap;
display: -webkit-flex;
display: flex;
}
.booklink-link2 a,
.kaerebalink-link1 a,
.tomarebalink-link1 a {
display:inline-block;
margin:2px 2px 0 0;
padding:10px 0;
text-align:center;
text-decoration:none;
font-weight: bold;
font-size:12px;
transition: all 0.6s ease;
}
.shoplinkamazon, .shoplinkrakuten, .shoplinkkindle, .shoplinkkakakucom, .shoplinkrakukobo, .shoplinkyahoo, .shoplinkseven, .shoplinkjtb, .shoplinkjalan {
width: 48%;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
.shoplinkamazon a, .shoplinkrakuten a, .shoplinkkindle a, .shoplinkkakakucom a, .shoplinkrakukobo a, .shoplinkyahoo a, .shoplinkseven a, .shoplinkjtb a, .shoplinkjalan a {
width: 100%;
background: linear-gradient(
-45deg,
#fff 25%,
#f4f4ed 25%, #f4f4ed 50%,
#fff 50%, #fff 75%,
#f4f4ed 75%, #f4f4ed
);
background-size: 4px 4px;
position: relative;
z-index: 2;
overflow: hidden;
}
.shoplinkamazon a::before,
.shoplinkamazon a::after,
.shoplinkrakuten a::before,
.shoplinkrakuten a::after,
.shoplinkkindle a::before,
.shoplinkkindle a::after,
.shoplinkkakakucom a::before,
.shoplinkkakakucom a::after,
.shoplinkrakukobo a::before,
.shoplinkrakukobo a::after,
.shoplinkyahoo a::before,
.shoplinkyahoo a::after,
.shoplinkseven a::before,
.shoplinkseven a::after,
.shoplinkjtb a::before,
.shoplinkjtb a::after,
.shoplinkjalan a::before,
.shoplinkjalan a::after {
position: absolute;
z-index: -1;
display: block;
content: '';
}
.shoplinkamazon a,
.shoplinkamazon a::before,
.shoplinkamazon a::after,
.shoplinkrakuten a,
.shoplinkrakuten a::before,
.shoplinkrakuten a::after,
.shoplinkkindle a,
.shoplinkkindle a::before,
.shoplinkkindle a::after,
.shoplinkkakakucom a,
.shoplinkkakakucom a::before,
.shoplinkkakakucom a::after,
.shoplinkrakukobo a,
.shoplinkrakukobo a::before,
.shoplinkrakukobo a::after,
.shoplinkyahoo a,
.shoplinkyahoo a::before,
.shoplinkyahoo a::after,
.shoplinkseven a,
.shoplinkseven a::before,
.shoplinkseven a::after,
.shoplinkjtb a,
.shoplinkjtb a::before,
.shoplinkjtb a::after,
.shoplinkjalan a,
.shoplinkjalan a::before,
.shoplinkjalan a::after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all .3s;
transition: all .3s;
}
.shoplinkamazon a:hover, .shoplinkrakuten a:hover, .shoplinkkindle a:hover, .shoplinkkakakucom a:hover, .shoplinkrakukobo a:hover, .shoplinkyahoo a:hover, .shoplinkseven a:hover, .shoplinkjtb a:hover, .shoplinkjalan a:hover {
color: #fff;
}
.shoplinkamazon a::after, .shoplinkrakuten a::after, .shoplinkkindle a::after, .shoplinkkakakucom a::after, .shoplinkrakukobo a::after, .shoplinkyahoo a::after, .shoplinkseven a::after, .shoplinkjtb a::after, .shoplinkjalan a::after {
top: -100%;
width: 100%;
height: 100%;
}
.shoplinkamazon a:hover::after, .shoplinkrakuten a:hover::after, .shoplinkkindle a:hover::after, .shoplinkkakakucom a:hover::after, .shoplinkrakukobo a:hover::after, .shoplinkyahoo a:hover::after, .shoplinkseven a:hover::after, .shoplinkjtb a:hover::after, .shoplinkjalan a:hover::after {
top: 0;
background-color: #707070;
}
/* amazon */
.shoplinkamazon a {
color: #FF9901 ; /* 文字の色 */
border-bottom: solid 6px #FF9901 ; /* ボーダー色 */
}
/* 楽天 */
.shoplinkrakuten a {
color: #c20004 ; /* 文字の色 */
border-bottom: solid 6px #c20004 ; /* ボーダー色 */
}
/* kindle */
.shoplinkkindle a {
color: #007dcd; /* 文字の色 */
border-bottom: solid 6px #007dcd ; /* ボーダー色 */
}
/* 価格 */
.shoplinkkakakucom a {
color: #314995; /* 文字の色 */
border-bottom: solid 6px #314995 ; /* ボーダー色 */
}
/* kobo */
.shoplinkrakukobo a {
color: #990000; /* 文字の色 */
border-bottom: solid 6px #990000 ; /* ボーダー色 */
}
/* yahoo */
.shoplinkyahoo a {
color: #7b0099; /* 文字の色 */
border-bottom: solid 6px #7b0099 ; /* ボーダー色 */
}
.shoplinkyahoo img {
display: none;
}
.shoplinkyahoo a {
font-size: 10px;
}
/* 7net */
.shoplinkseven a {
color: #82c36f ; /* 文字の色 */
border-bottom: solid 6px #82c36f ; /* ボーダー色 */
}
/* jtb */
.shoplinkjtb a {
color: #990000 ; /* 文字の色 */
border-bottom: solid 6px #990000 ; /* ボーダー色 */
}
/* jalan */
.shoplinkjalan a {
color: #FF9901 ; /* 文字の色 */
border-bottom: solid 6px #FF9901 ; /* ボーダー色 */
}
.booklink-footer{display: none;}
/* Masonry風ギャラリー */
.masonry {
margin: 1.5em 0;
padding: 0;
-moz-column-gap: 1.5em;
-webkit-column-gap: 1.5em;
column-gap: 1.5em;
font-size: .85em;
}
.item_m {
display: inline-block;
box-sizing: border-box;
background: #fff;
padding: 5px;
margin: 0 0 1.5em;
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
@media only screen and (min-width: 400px) {
.masonry {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}
@media only screen and (min-width: 780px) {
.masonry {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
}
/* card_list */
.card_list {
position: relative;
border: 3px solid #f6cd8a;
background: linear-gradient(
-45deg,
#fff 25%,
#f4f4ed 25%, #f4f4ed 50%,
#fff 50%, #fff 75%,
#f4f4ed 75%, #f4f4ed
);
background-size: 4px 4px;
padding-right: 1em;
border-radius: 0px 5px 5px 5px;
font-family: 'Noto Sans Japanese';
font-weight: 400;
padding-top: 1.5em;
margin-top: 1.5em;
margin-bottom: 1.5em;
}
.card_list:before{
display: inline-block;
position: absolute;
top: -20px;
left: -20px;
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 50%;
vertical-align: middle;
text-align: center;
content: "\f006";
font-family: FontAwesome;
background: #f6cd8a;
color: #FFF;
font-size: 22px;
}
.card_list li {
font-size:0.9em;
font-weight: bold;
color:#333;
}
.card_list a{
color:#7e7ebe;
padding: 8px 0;/* 文字の間隔 */
display: block;
text-decoration: none;
}
.card_list p {
padding-left: 8px;/* 文字の間隔 */
font-size:0.9em;
font-weight: bold;
color:#333;
}
/* 引用 */
.entry-content blockquote {
position: relative;
padding: 5px 15px 5px 55px;
box-sizing: border-box;
color: #464646;
background: linear-gradient(
-45deg,
#fff 25%,
#f4f4ed 25%, #f4f4ed 50%,
#fff 50%, #fff 75%,
#f4f4ed 75%, #f4f4ed
);
background-size: 4px 4px;
}
.entry-content blockquote:before{
display: inline-block;
position: absolute;
top: 0;
left: 8px;
width: 38px;
height: 30px;
vertical-align: middle;
text-align: center;
content: "\f10d";
font-family: FontAwesome;
color: #FFF;
font-size: 18px;
line-height: 30px;
background-color: #f6cd8a;
}
.entry-content blockquote:after{
content: '';
position: absolute;
left: 8px;
top: 30px;
height: 0;
width: 0;
border-left: 19px solid #f6cd8a;
border-right: 19px solid #f6cd8a;
border-bottom: 10px solid transparent;
}
.quote23 .entry-content blockquote p {
position: relative;
padding: 0;
margin: 10px 0;
z-index: 3;
line-height: 1.7;
}
.entry-content blockquote cite {
display: block;
text-align: right;
color: #888888;
font-size: 0.9em;
}
/* アコーディオン */
.accordion {
width: 100%;
margin: 0 auto;
margin-bottom: 3px;
padding: 10px;
}
.accordion .ac-content {
margin: 0 10px;
}
.accordion .ac-content label:before{
font-family:"FontAwesome";
content: "\f140";/*アイコン*/
display: inline-block;
margin-right:10px;
}
.accordion input {
display: none;
}
.accordion label {
display: block;
color: #707070; /* 文字色 */
background: linear-gradient(
-45deg,
#fff 25%,
#f4f4ed 25%, #f4f4ed 50%,
#fff 50%, #fff 75%,
#f4f4ed 75%, #f4f4ed
);
background-size: 4px 4px;
cursor: pointer;
padding: 10px;
border: 3px solid #f6cd8a;
border-radius: 10px;
position: relative;
-webkit-transition: none;
transition: none;
box-shadow: 0 3px 0 #c6a570;
}
.accordion label:hover {
color: #fff;
background: #707070;
top: -4px;
box-shadow: 0 7px 0 #c6a570;
}
.accordion label:active {
top: 3px;
box-shadow: none;
}
.accordion .ac-cont {
transition: 0.2s;
height: 0;
overflow: hidden;
background: #fff;
padding: 0 10px;
}
.accordion input:checked + .ac-cont {
height: auto;
padding: 10px;
}
/* s */
.accordion_s {
width: 1px;
}
.accordion .ac-content {
margin: 0 10px;
}
.accordion_s input {
display: none;
}
.accordion_s label {
display: block;
cursor: pointer;
}
.accordion_s .ac-cont_s {
transition: 0.2s;
height: 0;
overflow: hidden;
background: #fff;
padding: 0 10px;
}
.accordion_s input:checked + .ac-cont_s {
height: auto;
}
/* linebox */
.linebox {
position: relative;
margin: 2em 0;
padding: 0.5em 1em;
border: solid 3px #f6cd8a;
border-radius: 8px;
}
.linebox .linebox-title {
position: absolute;
display: inline-block;
top: -13px;
left: 10px;
padding: 0 9px;
line-height: 1;
font-size: 19px;
background: #FFF;
color: #f6cd8a;
font-weight: bold;
}
.linekbox p {
all: initial;
margin: 0;
padding: 0;
}
/* tableデザイン */
table.type09 {
border-collapse: collapse !important;
text-align: left !important;
line-height: 1.5 !important;
}
table.type09 thead th {
padding: 10px !important;
font-weight: bold !important;
vertical-align: top !important;
color: #369;
border-bottom: 3px solid #036 !important;
}
table.type09 tbody th {
width: 150px !important;
padding: 10px !important;
font-weight: bold !important;
vertical-align: top !important;
border-bottom: 1px solid #ccc !important;
background: #f3f6f7 !important;
}
table.type09 td {
width: 350px !important;
padding: 10px !important;
vertical-align: top !important;
border-bottom: 1px solid #ccc !important;
}