/*--------------------------------------
Haruniの読み込み元からコピー ここから
--------------------------------------*/
/*
Theme Name: Haruni
Theme URI: http://blog.hatena.ne.jp/-/store/theme/17391345971624603155
Description: 春らしいピンクグラデーションのシンプルなレスポンシブデザインテーマです。2カラム。トップページ横長カード型（はてなブログProのみ）タイトル画像は背景透過のシンプルなものが良いと思います。背景色・背景画像かグラデーションを変えることで違った印象にも出来ます。<b>※記事一覧形式ではデフォルト画像でも良いので必ずアイキャッチ画像を設定して下さい。</b>※はてなブログProじゃなくても普通にテーマとして使えます。（カード型の表示にはなりません）無料ユーザーの方は記事に「続きを読む」を付けられることをおすすめします。※PC版でダブルレクタングルのAdSenseが入るように記事幅調整しました。*Demoデモブログ：[http://test-test-test.hatenadiary.jp:title]背景グラデーションはbodyに指定しています。各自お好みのグラデーションに変更出来ます。*記事一覧表示（はてなブログPro向け）はてなブログProの方はトップページを一覧形式にすると横長のカードレイアウトになります。はてなブログProで設定＞詳細設定からトップページの表示形式（PC版） を「一覧形式」します。※記事には必ずアイキャッチ画像を設定して下さい。*カラーバリエーション[f:id:minimalgreen:20180315190748p:plain]はてなブログの管理画面＞デザイン＞カスタマイズ＞背景色からグラデーション部分の背景色は簡単に変更出来ます。[http://test-test-test.hatenadiary.jp/entry/2018/03/15/191030:title]*着せ替え用CSS　水色グラデーション※着せ替え用の記事に一部修正があります。2018/3/14以前にコピペされた方は貼り替えをお願いします。[f:id:minimalgreen:20180312020235p:plain]ピンクグラデーションをお好みの色に変えたい場合は以下の記事をご参照下さい。[http://test-test-test.hatenadiary.jp/entry/2018/03/12/020610:title]*背景画像を設定をした場合背景画像を設定をすると、グラデーションの部分が写真・画像に置き換わります。また背景画像に重ねてタイトル画像も管理画面のタイトル画像アップロード機能から設定出来ます。[f:id:minimalgreen:20180312031930p:plain]*グローバルメニューの設置方法グローバルメニューの設置は以下の記事をご参照下さい。[http://test-test-test.hatenadiary.jp/entry/2018/03/11/205405:title]*オリジナルシェアボタンデモブログと同じシェアボタンの設置方法は↓をどうぞ。[http://test-test-test.hatenadiary.jp/entry/2018/03/11/212409:title]*お問い合わせこのテーマについてのお問い合わせは下記ブログへどうぞ。[http://blog.minimal-green.com/:title]
Author: minimalgreen
Author URI: http://blog.hatena.ne.jp/minimalgreen/
*/
@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Fira+Sans');
/*
 Theme: haruni
 Theme URI:    test-test-test.hatenadiary.jp
 Author: minimalgreen
 Author URI: http://blog.minimal-green.com/
 Description:
 春らしいピンクグラデーションのシンプルなレスポンシブデザインテーマです。2カラム。
 License: GNU General Public License v3 or later
 License URI: https://www.gnu.org/licenses/gpl-3.0.ja.html
 Responsive: yes
 Based on: https://github.com/hatena/Hatena-Blog-Theme-Boilerplate
*/

/* ---------------------
 - reset
 - 一般
 - ヘッダー周り
 - メインコンテンツ
 - フッター周り
 - その他
--------------------- */

/*-------------------------------
    reset
-------------------------------*/

/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */

/* Document
 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in
 * IE on Windows Phone and in iOS.
 */
html {
 line-height: 1.15;
 /* 1 */
 -ms-text-size-adjust: 100%;
 /* 2 */
 -webkit-text-size-adjust: 100%;
 /* 2 */
}

/* Sections
 ========================================================================== */

/**
 * Remove the margin in all browsers (opinionated).
 */
body {
 margin: 0;
}

/**
 * Add the correct display in IE 9-.
 */
article, aside, footer, header, nav, section {
 display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
 font-size: 2em;
 margin: 0.67em 0;
}

/* Grouping content
 ========================================================================== */

/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */
figcaption, figure, main {
 /* 1 */
 display: block;
}

/**
 * Add the correct margin in IE 8.
 */
figure {
 margin: 1em 40px;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
 -webkit-box-sizing: content-box;
 box-sizing: content-box;
 /* 1 */
 height: 0;
 /* 1 */
 overflow: visible;
 /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
 font-family: monospace, monospace;
 /* 1 */
 font-size: 1em;
 /* 2 */
}

/* Text-level semantics
 ========================================================================== */

/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */
a {
 background-color: transparent;
 /* 1 */
 -webkit-text-decoration-skip: objects;
 /* 2 */
}

/**
 * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
 border-bottom: none;
 /* 1 */
 text-decoration: underline;
 /* 2 */
 -webkit-text-decoration: underline dotted;
 text-decoration: underline dotted;
 /* 2 */
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */
b, strong {
 font-weight: inherit;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b, strong {
 font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code, kbd, samp {
 font-family: monospace, monospace;
 /* 1 */
 font-size: 1em;
 /* 2 */
}

/**
 * Add the correct font style in Android 4.3-.
 */
dfn {
 font-style: italic;
}

/**
 * Add the correct background and color in IE 9-.
 */
mark {
 background-color: #ff0;
 color: #000;
}

/**
 * Add the correct font size in all browsers.
 */
small {
 font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub, sup {
 font-size: 75%;
 line-height: 0;
 position: relative;
 vertical-align: baseline;
}
sub {
 bottom: -0.25em;
}
sup {
 top: -0.5em;
}

/* Embedded content
 ========================================================================== */

/**
 * Add the correct display in IE 9-.
 */
audio, video {
 display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */
audio:not([controls]) {
 display: none;
 height: 0;
}

/**
 * Remove the border on images inside links in IE 10-.
 */
img {
 border-style: none;
}

/**
 * Hide the overflow in IE.
 */
svg:not(:root) {
 overflow: hidden;
}

/* Forms
 ========================================================================== */

/**
 * 1. Change the font styles in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */
button, input, optgroup, select, textarea {
 font-family: sans-serif;
 /* 1 */
 font-size: 100%;
 /* 1 */
 line-height: 1.15;
 /* 1 */
 margin: 0;
 /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button, input {
 /* 1 */
 overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button, select {
 /* 1 */
 text-transform: none;
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 * controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */
button, html [type="button"], [type="reset"], [type="submit"] {
 -webkit-appearance: button;
 /* 2 */
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
 border-style: none;
 padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {
 outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
 padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 * `fieldset` elements in all browsers.
 */
legend {
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 /* 1 */
 color: inherit;
 /* 2 */
 display: table;
 /* 1 */
 max-width: 100%;
 /* 1 */
 padding: 0;
 /* 3 */
 white-space: normal;
 /* 1 */
}

/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
 display: inline-block;
 /* 1 */
 vertical-align: baseline;
 /* 2 */
}

/**
 * Remove the default vertical scrollbar in IE.
 */
textarea {
 overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */
[type="checkbox"], [type="radio"] {
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 /* 1 */
 padding: 0;
 /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
 height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
 -webkit-appearance: textfield;
 /* 1 */
 outline-offset: -2px;
 /* 2 */
}

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration {
 -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
 -webkit-appearance: button;
 /* 1 */
 font: inherit;
 /* 2 */
}

/* Interactive
 ========================================================================== */

/*
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */
details, menu {
 display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
 display: list-item;
}

/* Scripting
 ========================================================================== */

/**
 * Add the correct display in IE 9-.
 */
canvas {
 display: inline-block;
}

/**
 * Add the correct display in IE.
 */
template {
 display: none;
}

/* Hidden
 ========================================================================== */

/**
 * Add the correct display in IE 10-.
 */
[hidden] {
 display: none;
}

/*-------------------------------
    一般
-------------------------------*/
html, body {
 font-family: 'メイリオ','Meiryo',"游ゴシック", "Yu Gothic", YuGothic,'Helvetica Neue', 'Helvetica', 'Arial', 'Hiragino Kaku Gothic Pro',  'MS PGothic';
 color: #000000; /* 黒に設定 */
 line-height: 1.7; /* 行間 */
}
/* 段落間の幅の設定*/
.entry-content p {
margin-bottom : 1.8em ;
}
body {
 background: -moz-linear-gradient(left, #ffb8bb 0%, #f0b77f 60%, #fad0c4 100%);
 background: -webkit-linear-gradient(left, #ffb8bb 0%, #f0b77f 60%, #fad0c4 100%);
 background: linear-gradient(to right, #ffb8bb 0%, #f0b77f 60%, #fad0c4 100%);
 /* 背景グラデーション */
}
@media (max-width: 1024px) {
/* 背景画像のスマートフォン調整 */
body {
 background-repeat: repeat!important;
 background-size:auto!important;
}
}
a {
 color: #FF989E;
}
a:hover {
 color: #1487bd;
}
a.keyword {
 text-decoration: none;
 border-bottom: 1px dotted #ddd;
 color: #454545;
}
h1, h2, h3, h4, h5, h6 {
 color: #333;
 line-height: 1.3;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
 color: #333;
 text-decoration: none;
}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
 color: #0f668f;
}

/*-------------------------------
    ヘッダー周り
-------------------------------*/

/* ヘッダ（グローバルヘッダ）
 グローバルヘッダの中はiframeですが、
 #globalheader-container に背景色や文字色を指定することでiframeの中にも色が反映されます。
*/
#globalheader-container {
 color: #fff;
 z-index: 20000;
}

/*-------------------------------
    レイアウト
-------------------------------*/

/* container */
#container, #footer {
 padding-left: 0px;
 padding-right: 0px;
}
#content {
 width: 100%;
 margin: 0px auto;
 padding: 20px 10px;
 background-color: #f8f8f8;
 box-sizing: border-box;
}
@media (min-width: 768px) {
 #container, #footer {
 width: 100%;
 margin: auto;
 padding-left: 0;
 padding-right: 0;
 }
 #content-inner {
 width: 700px;
 margin: 0 auto;
 }
 #content {
 width: 100%;
 margin: 0px auto;
 padding: 30px;
 box-sizing: border-box;
 }
}
@media (min-width: 900px) {
 #content-inner {
 width: 100%;
 margin: 0 auto;
 }
}
@media (min-width: 1142px) {
 #container, #footer {
 width: 100%;
 margin: auto;
 }
 #content {
 width: 100%;
 margin: 0px auto;
 padding: 40px 0;
 }
 #content-inner {
 width: 1142px;
 margin: 0 auto;
 }
}

/* 2カラムレイアウト */
#content-inner {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
 -ms-flex-direction: column;
 flex-direction: column;
 -webkit-box-pack: justify;
 -ms-flex-pack: justify;
 justify-content: space-between;
}
@media (min-width: 768px) {
 #content-inner {
 -webkit-box-orient: horizontal;
 -webkit-box-direction: normal;
 -ms-flex-direction: row;
 flex-direction: row;
 }
}
@media (min-width: 768px) {
 #wrapper {
 width: 480px;
 }
}
@media (min-width: 900px) {
 #wrapper {
 width: 67%;
 }
}
@media (min-width: 1142px) {
 #wrapper {
 width: 742px;
 }
}
@media (min-width: 768px) {
 #box2 {
 width: 200px;
 }
}
@media (min-width: 900px) {
 #box2 {
 width: 30%;
 }
}
@media (min-width: 1142px) {
 #box2 {
 width: 360px;
 }
}
#box2-inner {
 overflow: hidden;
}
@media and (min-width: 768px) and (max-width: 1141px) {
 .hatena-module-search-box .search-module-input {
 width: 150px;
 }
}

/* 下記のスタイルを適用するとテーマを1カラムレイアウトにできます。
利用するにはコメントアウトを解除してください。
（2カラムレイアウトの場合はコメントアウト全体が不要です）
#content-inner {
 flex-direction: column;
 align-items: center;
}
#wrapper {
 @media (min-width: 768px) {
 width: 100%;
 }
 @media (min-width: 1142px) {
 max-width: 720px;
 }
}
#box2 {
 width: 100%;
 @media (min-width: 768px) {
 width: 100%;
 }
 @media (min-width: 1142px) {
 width: 100%;
 }
}
#box2-inner {
 display: flex;
 flex-wrap: wrap;
 flex-direction: column;
 justify-content: flex-start;
 @media (min-width: 768px) {
 margin-left: -20px;
 flex-direction: row;
 }
 @media (min-width: 1142px) {
 margin-left: -30px;
 }
}
.hatena-module {
 width: 100%;
 @media (min-width: 768px) {
 width: 33.3333%;
 }
 @media (min-width: 1142px) {
 padding-left: 30px;
 }
}
---- END 1カラム */

/*-------------------------------
    ヘッダー周り
-------------------------------*/

/* ヘッダ */
#blog-title {
 margin: 0 auto;
 text-align: center;
 padding: 3rem 0;
 text-align: center;
 font-family: 'Fira Sans', sans-serif;
}
@media (min-width: 768px) {
 #blog-title {
 text-align: center;
 }
}
@media (max-width: 767px) {
#blog-title {
 margin: 0 auto;
 text-align: center;
 padding: 1rem 0;
}
}
#title {
 margin: 0;
 font-size: 1.7rem;
}
@media (min-width: 1142px) {
 #title {
 font-size: 200%;
 ;
 }
}
#title a {
 color: #fff;
 letter-spacing: 1.8px;
}
#blog-description {
 font-weight: normal;
 font-size: .8rem;
 margin: 1em 0 0;
 color: #fff;
}
@media (max-width: 1141px) {
#blog-title-content {
 padding: 0 30px;
}
}
@media (max-width: 767px) {
#blog-title-content {
 padding: 0 10px;
}
}

/* ヘッダ画像を設定したとき */
.header-image-enable #blog-title {
 margin: 0 0 2em;
}
.header-image-enable #blog-title-inner {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: horizontal;
 -webkit-box-direction: normal;
 -ms-flex-direction: row;
 flex-direction: row;
 -webkit-box-align: center;
 -ms-flex-align: center;
 align-items: center;
}

.header-image-enable #blog-title-content {
 margin-left: auto;
 margin-right: auto;
}

/* タイトル下HTML */
#top-editarea {
 margin-bottom: 1em;
}

/* パンくず（カテゴリーページで表示されます） */
#top-box {
 width: 100%;
 margin: 0 auto;
 font-size: 90%;
}
.breadcrumb {
 width: 100%;
 margin: 0 auto;
 padding: 0 40px 20px;
 text-align: left;
 text-decoration: none;
 color: #fff;
 box-sizing: border-box;
}
.breadcrumb a {
 text-decoration: none;
 color: #fff;
}
.page-entry .breadcrumb {
 margin-bottom: 0;
 padding: 0 20px 20px;
 box-sizing: border-box;
}
a.breadcrumb-link:before {
 font-family: "blogicon";
 content: "\f017";
}
a.breadcrumb-child-link:before {
 font-family: "blogicon";
 content: "\f04a";
}
@media (min-width: 768px) {
 #top-box {
 font-size: 90%;
 width: 700px;
 margin-left: auto;
 margin-right: auto;
 }
 .breadcrumb {
 width: 700px;
 padding: 0 0 20px;
 margin-left: auto;
 margin-right: auto;
 }
 .page-entry .breadcrumb {
 margin-bottom: 0;
 padding: 0 0 20px;
 box-sizing: border-box;
 }
}
@media (min-width: 900px) {
 #top-box {
 width: 90%;
 }
 .breadcrumb {
 width: 90%;
 }
}
@media (min-width: 1142px) {
 #top-box {
 font-size: 90%;
 width: 1142px;
 margin-left: auto;
 margin-right: auto;
 }
 .breadcrumb {
 width: 1142px;
 margin-left: auto;
 margin-right: auto;
 }
}

/*-------------------------------
    メインコンテンツ
-------------------------------*/

/* entry */
.entry {
 position: relative;
 margin-bottom: 3em;
}
.entry-header {
 padding-bottom: .3em;
 margin-bottom: 1em;
 border-bottom: 3px double #ddd;
 position: relative;
}
.entry-content p {
 font-size: 17px;
}
/* date */
.date {
 margin-bottom: .5em;
 font-size: .9rem;
}
.date a {
 color: #999;
 text-decoration: none;
}
.date a:hover {
 text-decoration: underline;
}

/* 日付アイコン付き */
.date a::before {
 font-family: "blogicon";
 content: "\f043";
}
.date a {
 color: #333;
 font-weight: bold;
}
.hyphen {
 display: none;
}
.date-year::after {
 content: ".";
}
.date-month::after {
 content: ".";
}
.entry-title {
 margin: 0 0 .3em;
 font-size: 1.3rem;
}
@media (min-width: 1142px) {
 .entry-title {
 font-size: 1.4rem;
 }
}
.categories {
 margin: .5em 0;
 font-size: .8rem;
}
.categories a {
 margin-right: .5em;
}

/* 「編集する」ボタン */
.entry-header-menu {
 position: absolute;
 top: 0;
 right: 0;
}

/* 記事内の書式 */
.entry-content img, .entry-content video {
 max-width: 100%;
 height: auto;
}
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6 {
 margin: 1em 0 0.8em 0;
}
.entry-content h1 {
 font-size: 1.5rem;
}
@media (min-width: 1142px) {
 .entry-content h1 {
 font-size: 1.7rem;
 }
}
.entry-content h2 {
 font-size: 1.4rem;
}
.entry-content h2 {
 position: relative;
 padding: 0.2em 0.5em;
 border-left: 8px solid #ff9a9e;
}
@media (min-width: 1142px) {
 .entry-content h2 {
 font-size: 1.5rem;
 }
}
.entry-content h3 {
 font-size: 1.2rem;
}
.entry-content h3 {
 padding: .5em 0 .5em .75em;
 background: -moz-linear-gradient(left, #ffb8bb 0%, #f0b77f 60%, #fad0c4 100%);
 background: -webkit-linear-gradient(left, #ffb8bb 0%, #f0b77f 60%, #fad0c4 100%);
 background: linear-gradient(to right, #ffb8bb 0%, #f0b77f 60%, #fad0c4 100%);
 /* 背景グラデーション */
 color: #fff;
}
@media (min-width: 1142px) {
 .entry-content h3 {
 font-size: 1.3rem;
 }
}
.entry-content h4 {
 font-size: 1.1rem;
}
.entry-content h4 {
 position: relative;
 padding: .5em;
 color: #ff9a9e;
 border-top: 1px solid #ff9a9e;
 border-bottom: 1px solid #ff9a9e;
}
.entry-content h5 {
 font-size: 1rem;
}
.entry-content h5 {
 position: relative;
 padding: .5em;
 color: #ff9a9e;
 border-left: 4px solid #ff9a9e;
}
.entry-content h6 {
 font-size: .9rem;
}
.entry-content ul, .entry-content ol, .entry-content dd {
 margin: 0 0 1em 1.5em;
 padding: 0;
}
.entry-content ul li ul, .entry-content ul li ol, .entry-content ol li ul, .entry-content ol li ol, .entry-content dd li ul, .entry-content dd li ol {
 margin-bottom: 0;
}
.entry-content table {
 border-collapse: collapse;
 border-spacing: 0;
 border-bottom: 1em;
 margin-bottom: 1em;
 width: 100%;
 overflow: auto;
 display: block;
 font-size: .8rem;
}
@media (min-width: 1142px) {
 .entry-content table {
 font-size: .9rem;
 }
}
.entry-content table th, .entry-content table td {
 border: 1px solid #ddd;
 padding: 5px 10px;
}
.entry-content table th {
 background: #f5f5f5;
}
.entry-content blockquote {
 border: 1px solid #ddd;
 margin: 0 0 10px;
 padding: 20px;
}
.entry-content blockquote p:first-child {
 margin-top: 0;
}
.entry-content blockquote p:last-child {
 margin-bottom: 0;
}
.entry-content pre, .entry-content code {
 font-family: 'Monaco', 'Consolas', 'Courier New', Courier, monospace, sans-serif;
}
.entry-content pre {
 background: #f5f5f5;
 border: none;
 white-space: pre-wrap;
 text-overflow: ellipsis;
 font-size: 100%;
 line-height: 1.3;
 font-size: .8rem;
 padding: 10px;
}
.entry-content pre>code {
 margin: 0;
 padding: 0;
 white-space: pre;
 border: none;
 background-color: transparent;
 font-family: 'Monaco', 'Consolas', 'Courier New', Courier, monospace, sans-serif;
}
.entry-content code {
 font-size: 90%;
 margin: 0 2px;
 padding: 0px 5px;
 background-color: #f5f5f5;
 border-radius: 3px;
}
.entry-content hr {
 width: 50%;
 border: 0;
 border: none;
 border-top: 1px solid #ddd;
 margin: 2em auto;
}
.entry-content .table-of-contents {
 padding: 1em 1em 1em 2em;
 margin: 1em 0;
 border: 1px solid #ddd;
}

/* 記事下 */
.entry-footer .social-buttons {
 margin-bottom: 1em;
}
.entry-footer-section {
 color: #999;
 font-size: .9rem;
}
.entry-footer-section a {
 color: #999;
}

/* コメント */
.comment-box {
 margin: 1em 0;
}
.comment-box .comment {
 list-style: none;
 margin: 0 0 15px 0;
 padding: 0;
 line-height: 1.7;
 font-size: .85rem;
}
@media (min-width: 768px) {
 .comment-box .comment {
 font-size: .9rem;
 }
}
.comment-box .entry-comment {
 padding: 10px 0 10px 60px;
 border-bottom: 1px solid #ddd;
 position: relative;
}
.comment-box .entry-comment:first-child {
 border-top: 1px solid #ddd;
}
.comment-box .read-more-comments {
 padding: 10px 0;
}
.comment-box .hatena-id-icon {
 position: absolute;
 top: 10px;
 left: 0;
 width: 50px !important;
 height: 50px !important;
 border-radius: 3px;
}
.comment-user-name {
 margin: 0 0 .4em 0;
 font-weight: bold;
}
.comment-content {
 margin: 0 0 .4em 0;
 word-wrap: break-word;
 color: #454545;
 font-size: .85rem;
}
.comment-content p {
 margin: 0 0 .6em 0;
}
.comment-metadata {
 color: #999;
 margin: 0;
 font-size: .8rem;
}
.comment-metadata a {
 color: #999;
}
.leave-comment-title {
 padding: .6em 1em;
 font-size: .85rem;
 border: 1px solid #ddd;
}

/* コメントを書く */
.leave-comment-title {
 display: inline-block;
 *display: inline;
 *zoom: 1;
 padding: 10px;
 margin-bottom: 0;
 line-height: 20px;
 color: #FF989E;
 background-color: #ffffff;
 text-align: center;
 vertical-align: middle;
 border-radius: 4px;
 background-clip: padding-box;
 cursor: pointer;
 font-size: 14px;
 text-decoration: none;
 font-weight: bold;
 border: 1px solid #FF989E;
 text-decoration: none !important;
}
.leave-comment-title::before {
 font-family: "blogicon";
 content: "\f01d";
 padding-right: 5px;
}
.leave-comment-title:hover {
 background-color: #f5f5f5;
 text-decoration: none !important;
}

/* Pager */
.pager {
 margin: 2em 0;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-pack: justify;
 -ms-flex-pack: justify;
 justify-content: space-between;
}
/*
.pager a {
 background-color: #FF989E;
 color: #fff;
}*/
/* サイドバーモジュール */
.hatena-module {
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 margin-bottom: 2em;
 font-size: .85rem;
 background-color: #fff;
 padding: 20px;
 border-radius: 6px;
}
@media (min-width: 768px) {
 .hatena-module {
 font-size: .9rem;
 background-color: #fff;
 padding: 20px;
 border-radius: 6px;
 margin-bottom: 3em;
 }
}
@media (min-width: 1142px) {
 .hatena-module {
 font-size: .9rem;
 background-color: #fff;
 padding: 30px;
 border-radius: 6px;
 margin-bottom: 3em;
 }
}
.hatena-module-title {
 margin-bottom: .6em;
 padding-bottom: .2em;
 border-bottom: 3px double #ddd;
 font-size: 1rem;
 font-weight: bold;
 color: #FF989E;
 text-align: center;
 font-family: 'Fira Sans', sans-serif;
}
.hatena-module-title a {
 color: #FF989E;
 text-decoration: none;
}
.hatena-module-title a:hover {
 text-decoration: underline;
}

/* Profile module */
.hatena-module-profile .profile-icon {
 float: left;
 margin: 0 10px 10px 0;
}
.hatena-module-profile .id {
 display: block;
 font-weight: bold;
 margin-bottom: .5em;
}
.hatena-module-profile .profile-description p {
 margin-top: 0;
}
.prof-img {
 border-radius: 50%;
 width: 150px;
 height: 150px;
}

/* urllist module */
.hatena-urllist {
 list-style: none;
 margin: 0;
 padding: 0;
}
.hatena-urllist li {
 padding: .5em 0;
}
.hatena-urllist li:last-child {
 padding-bottom: 0;
}
.hatena-urllist li a {
 text-decoration: none;
}
.hatena-urllist li a:hover {
 text-decoration: underline;
}
.hatena-urllist .urllist-category-link {
 font-size: .7rem;
 padding: .1em .3em;
}
.hatena-urllist .urllist-date-link a {
 color: #999;
}
.hatena-urllist .urllist-entry-body {
 margin-top: .3em;
}

/* Search module */
.hatena-module-search-box .search-form {
 border: 1px solid #ddd;
 border-radius: 3px;
 width: 100%;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-align: center;
 -ms-flex-align: center;
 align-items: center;
}
.hatena-module-search-box .search-module-input {
 -webkit-box-flex: 1;
 -ms-flex: 1 0;
 flex: 1 0;
 padding: 5px;
 color: #454545;
 background: none;
 border: none;
 outline: none;
 height: 20px;
}
.hatena-module-search-box .search-module-button {
 width: 24px;
 height: 24px;
 margin-right: 5px;
 background: transparent url("https://cdn.blog.st-hatena.com/images/theme/search@2x.png?version=e0e0a3993d8aff6a6344f19dd784d5") no-repeat center;
 background-size: 20px 20px;
 border: none;
 outline: none;
 color: transparent;
 overflow: hidden;
 opacity: .5;
 cursor: pointer;
}
.hatena-module-search-box .search-module-button:hover {
 opacity: .85;
}

/* サイドバーカテゴリーリスト */
.hatena-module-category .hatena-urllist {
 display: table;
 width: 100%;
}
.hatena-module-category .hatena-urllist li {
 display: table-cell;
 margin-right: 12px;
 float: left;
}
.hatena-module-category .hatena-urllist li a {
 background: -moz-linear-gradient(left, #ffb8bb 0%, #f0b77f 60%, #fad0c4 100%);
 background: -webkit-linear-gradient(left, #ffb8bb 0%, #f0b77f 60%, #fad0c4 100%);
 background: linear-gradient(to right, #ffb8bb 0%, #f0b77f 60%, #fad0c4 100%);
 border-radius: 12px;
 padding: 5px 10px;
 display: inline-block;
 margin-right: 0;
 color: #fff;
 text-decoration: none;
}

/* About ページ */
.page-about .entry-content dt {
 font-weight: bold;
 border-bottom: 1px solid #ddd;
 margin-bottom: .5em;
}
.page-about .entry-content dd {
 margin-left: 0;
 margin-bottom: 2em;
}

/* Archive */
.archive-header-category {
 text-align: center;
}
.page-archive .archive-entry {
 margin-bottom: 1em;
 margin-left: auto;
 margin-right: auto;
 line-height: 1.3;
 display: -webkit-flex;
 display: flex;/* 記事枠内横並び */
}
.page-archive .entry-title {
 font-size: 1rem;
}
.page-archive .entry-thumb {
 background-size: cover;
 background-position: center center;
}
.page-archive .entry-description {
 margin: 0;
 font-size: .85rem;
}
.page-archive .social-buttons {
 display: block;
 margin-top: .3em;
}
.page-archive .archive-entry {
 position: relative;
 background-color: #fff;
 border-radius: 6px;
}
.archive-entry-body {
 display: none;
}

/* トップページ記事一覧レイアウト */
.page-archive .entry-thumb {
 width: 200px;
 height: 150px;
 background-size: cover;
 /* 左上のみ角丸 */
 border-top-left-radius: 6px;
 -webkit-border-top-left-radius: 6px;
 -moz-border-radius-topleft: 6px;
 /* 左下のみ角丸 */
 border-bottom-left-radius: 6px;
 -webkit-border-bottom-left-radius: 6px;
 -moz-border-radius-bottomleft: 6px;
 -webkit-order: 1;
 order: 1;
 margin-right: 0;
}
.page-archive .archive-entry {
 height: 150px;
}
.archive-entry-header {
 width: auto;
 -webkit-order:2;
 order: 2;
}
.page-archive .date {
 margin: 8px .7em 0;
}
.page-archive .entry-title {
 margin: 0em 8px;
}

@media (max-width: 360px) {
 .page-archive .entry-thumb {
 width: 180px;
 height: 120px;
 }
 .page-archive .archive-entry {
 height: 120px;
 }
 .entry-title {
 font-size: 1.2rem;
 }
 .page-archive .entry-title {
 font-size: .8rem;
 }
 .page-archive .categories a {
 font-size: .7rem;
 }
}
@media (max-width: 320px) {
 .page-archive .archive-entry {
 height:  120px;
 }
 .page-archive .entry-thumb {
 width: 180px;
 height: 120px;
 }
 .entry-title {
 font-size: 1.1rem;
 }
 .page-archive .entry-title {
 font-size: .8rem;
 }
 .page-archive .categories a {
 font-size: .7rem;
 }
 #content {
 padding: 20px 10px;
 }
}
@media (min-width: 768px) {
 .page-archive .archive-entry {
 height: 200px; /* 200px; */
 }
 .page-archive .entry-thumb {
 width: 300px; 
 height: 200px; /* 200px; */
 /* 左上のみ角丸 */
 border-top-left-radius: 6px;
 -webkit-border-top-left-radius: 6px;
 -moz-border-radius-topleft: 6px;
 /* 左下のみ角丸 */
 border-bottom-left-radius: 6px;
 -webkit-border-bottom-left-radius: 6px;
 -moz-border-radius-bottomleft: 6px;
 }
 .page-archive .entry-title {
 font-size: 1.3rem;
 }
}
@media (min-width: 1142px) {
 .page-archive .archive-entry {
 margin-bottom: 3em;
 height: 200px; 
 }
 .page-archive .entry-thumb {
 width: 300px;
 height: 200px; 
 }
}
/* カテゴリー */
.categories a {
 background: -moz-linear-gradient(left, #ffb8bb 0%, #f0b77f 60%, #fad0c4 100%);
 background: -webkit-linear-gradient(left, #ffb8bb 0%, #f0b77f 60%, #fad0c4 100%);
 background: linear-gradient(to right, #ffb8bb 0%, #f0b77f 60%, #fad0c4 100%);
 /* 背景グラデーション */
 border-radius: 12px;
 padding: 5px 10px;
 display: inline-block;
 margin-right: 0;
 color: #fff;
 text-decoration: none;
}
.archive-entry .categories {
 position: absolute;
 bottom: 0;
 right: 8px;
 margin-bottom: 8px;
}
/* 記事枠レイアウト */
.page-entry #main {
 background-color: #fff;
 padding: 20px;
 border-radius: 6px;
 margin-bottom: 3rem;
}
@media (min-width: 1142px) {
 .page-entry #main {
 background-color: #fff;
 padding: 30px;
 }
 .page-index .entry {
 background-color: #fff;
 padding: 30px;
 border-radius: 6px;
 }
}
.page-index .entry {
 background-color: #fff;
 padding: 20px;
 border-radius: 6px;
}
@media (min-width: 1142px) {
 .page-index .entry {
 background-color: #fff;
 padding: 30px;
 border-radius: 6px;
 }
}
/* 記事下関連記事モジュール */
#entry-footer-secondary-modules .hatena-module {
 padding: 0;
}
/*続きを読む*/
a.entry-see-more {
 display: block;
 width: 100%;
 height: 40px;
 margin: 20px auto;
 line-height: 40px;
 font-size: 16px;
 position: relative;
 background: -moz-linear-gradient(left, #ffb8bb 0%, #f0b77f 60%, #fad0c4 100%);
 background: -webkit-linear-gradient(left, #ffb8bb 0%, #f0b77f 60%, #fad0c4 100%);
 background: linear-gradient(to right, #ffb8bb 0%, #f0b77f 60%, #fad0c4 100%);
 /* 背景グラデーション */
 color: #fff;
 border-radius: 6px;
 text-decoration: none;
 text-align: center;
}


/*-------------------------------
    フッター周り
-------------------------------*/

/* footer */
#footer {
 margin-top: 0;
 padding-bottom: 1rem;
 padding-top: 1rem;
 text-align: center;
 font-size: .8rem;
 color: #fff;
 background: transparent;
 /* 背景グラデーション */
}
#copyright a, #footer a {
 color: #fff;
}
#footer p {
 margin: .5em auto;
}

/* copyright */
#copyright {
 padding: 20px;
 text-align: center;
 font-size: 12px;
 color: #fff;
}

/*-------------------------------
    その他
-------------------------------*/

/* フォローボタン */
ul.social-icon {
 display: -webkit-flex;
 display: flex;
 -webkit-justify-content: center;
 justify-content: center;
 list-style-type: none;
 -webkit-padding-start: 0;
 /* user agent stylesheet の無効化 */
}
.social-icon li a {
 display: block;
 margin: 0 5px 5px 0;
 color: #fff;
 width: 50px;
 /* 丸ボタンの幅 */
 height: 50px;
 /* 丸ボタンの高さ */
 line-height: 50px;
 /* 高さに揃える */
 border-radius: 50%;
 text-align: center;
}
.social-icon .hatena {
 background: #3d3f44;
 color: #fff;
}
.social-icon .hatena .lg {
 font-size: 1.3333333333333333em;
 line-height: .75em;
 vertical-align: -20%;
}
.social-icon .twitter {
 background: #00a1e9;
 color: #fff;
}
.social-icon .facebook {
 background: #3b5998;
 color: #fff;
}

/* シェアボタン */
.sns-share {
 background: #fff;
}
.sns-area li {
 vertical-align: baseline;
}
.sns-area li a {
 text-decoration: none;
}
.sns-area {
 width: 100%;
 margin: 0px auto;
 padding: 10px;
 box-sizing: border-box;
 display: -webkit-flex;
 /* Safari */
 display: flex;
 -webkit-justify-content: space-around;
 /* Safari */
 justify-content: space-around;
}
.sns-area li {
 list-style-type: none;
 display: inline-block;
 vertical-align: middle;
}
.sns-area li:last-child {
 margin-right: 0
}
.sns-link {
 height: 40px;
 line-height: 40px;
 overflow: visible;
}
.sns-twitter {
 color: #FF989E;
 background: transparent;
 border-radius: 0;
 box-shadow: none;
 border: none;
 font-size: 40px;
}
.sns-facebook {
 color: #FF989E;
 background: transparent;
 border-radius: 0;
 box-shadow: none;
 border: none;
 font-size: 40px;
}
.blogicon-bookmark.lg {
 margin-top: -10px;
}
.sns-bookmark, a.sns-bookmark:visited {
 color: #FF989E;
 background: transparent;
 border-radius: 0;
 box-shadow: none;
 border: none;
 font-size: 40px;
}
.sns-googleplus {
 color: #FF989E;
 background: transparent;
 border-radius: 0;
 box-shadow: none;
 border: none;
 font-size: 40px;
}
.sns-pocket {
 color: #FF989E;
 background: transparent;
 border-radius: 0;
 box-shadow: none;
 border: none;
 font-size: 40px;
}
.sns-line {
 color: #FF989E;
 background: transparent;
 border-radius: 0;
 box-shadow: none;
 border: none;
 font-size: 40px;
}
.sns-line img {
 position: relative;
 top: 5px;
}
.blogicon-twitter, .blogicon-facebook, .blogicon-bookmark, .fa-google-plus, .blogicon-chevron-down {
 margin-right: 5px;
}
a.sns-link:hover {
 color: #FF989E;
 opacity: 0.7;
}
.share-text {
 padding-left: 4px;
 font-size: 14px
}
.sns-txt {
 font-size: 12px;
}
@media only screen and (max-width: 767px) {
 .share-text, .sns-txt {
 display: none;
 }
 .blogicon-twitter, .blogicon-facebook, .blogicon-bookmark, .fa-google-plus, .blogicon-chevron-down {
 margin-right: 0;
 }
 .sns-area {
 padding: 0;
 }
}

/* フッターフォローボタン */
.footer-follow-buttons {
 text-align: center;
 margin-top: 0;
 width: 100%;
}
.footer-follow-buttons .follow-title {
 width: 100%;
 color: #666;
 margin-bottom: 5px;
}
.footer-follow-buttons a {
 display: inline-block;
 width: 60px;
 text-align: center;
 text-decoration: none;
 margin: 5px;
}
.footer-follow-buttons .inner-text {
 font-size: 13px;
 display: block;
}
.footer-follow-buttons .lg, .content-inner-follow-buttons .fa {
 border-radius: 5px;
 margin: 2px auto;
}
.footer-follow-buttons .hatena {
 color: #fff;
}
.footer-follow-buttons .blogicon-hatenablog {
 color: #fff;
 font-size: 40px;
}
.footer-follow-buttons .blogicon-hatenablog:hover {
 opacity: 0.8;
}
.footer-follow-buttons .facebook {
 color: #fff;
}
.footer-follow-buttons .blogicon-facebook {
 color: #fff;
 font-size: 40px;
}
.footer-follow-buttons .blogicon-facebook:hover {
 opacity: 0.8;
}
.footer-follow-buttons.twitter {
 color: #fff;
}
.footer-follow-buttons .blogicon-twitter {
 color: #fff;
 font-size: 40px;
}
.footer-follow-buttons .blogicon-twitter:hover {
 opacity: 0.8;
}
.footer-follow-buttons .instagram {
 color: #fff;
}
.footer-follow-buttons .blogicon-instagram {
 color: #fff;
 font-size: 40px;
}
.footer-follow-buttons.blogicon-instagram:hover {
 opacity: 0.8;
}
.footer-follow-buttons .feedly {
 color: #fff;
}
.footer-follow-buttons .blogicon-rss {
 color: #fff;
 font-size: 40px;
}
.footer-follow-buttons .blogicon-rss:hover {
 opacity: 0.8;
}
.footer-follow-buttons .googleplus {
 color: #fff;
}
.footer-follow-buttons .fa-google-plus {
 color: #fff;
 font-size: 40%;
}
.footer-follow-buttons .fa-google-plus:hover {
 opacity: 0.8;
}
@media (max-width: 1150px) and (min-width: 920px) {
 .footer-follow-buttons a {
 display: inline-block;
 width: initial;
 text-align: center;
 text-decoration: none;
 margin: 5px;
 }
}

/* サイドバーフォローボタン */
.sidebar-follow-buttons {
 text-align: center;
 margin-top: 0;
 width: 100%;
}
.sidebar-follow-buttons .follow-title {
 width: 100%;
 color: #666;
 margin-bottom: 5px;
}
.sidebar-follow-buttons a {
 display: inline-block;
 width: 60px;
 text-align: center;
 text-decoration: none;
 margin: 5px;
}
.sidebar-follow-buttons .inner-text {
 font-size: 13px;
 display: block;
}
.sidebar-follow-buttons .lg, .content-inner-follow-buttons .fa {
 padding: 15px;
 border-radius: 5px;
 margin: 2px auto;
}
.sidebar-follow-buttons .hatena {
 color: #38393C;
 background-color: transparent;
}
.sidebar-follow-buttons .blogicon-hatenablog {
 background: #38393C;
 color: #ffffff;
}
.sidebar-follow-buttons .blogicon-hatenablog:hover {
 background: #5F6063;
}
.sidebar-follow-buttons .facebook {
 color: #305097;
 background-color: transparent;
}
.sidebar-follow-buttons .blogicon-facebook {
 background: #305097;
 color: #ffffff;
}
.sidebar-follow-buttons .blogicon-facebook:hover {
 background: #5A77B7;
}
.sidebar-follow-buttons .twitter {
 color: #55acee;
 background-color: transparent;
}
.sidebar-follow-buttons .blogicon-twitter {
 background: #55acee;
 color: #ffffff;
}
.sidebar-follow-buttons .blogicon-twitter:hover {
 background: #89C7F7;
}
.sidebar-follow-buttons .instagram {
 color: #3f729b;
 background-color: transparent;
}
.sidebar-follow-buttons .blogicon-instagram {
 background: #3f729b;
 color: #ffffff;
}
.sidebar-follow-buttons .blogicon-instagram:hover {
 background: #7AA5C7;
}
.sidebar-follow-buttons .feedly {
 color: #6cc655;
 background-color: transparent;
}
.sidebar-follow-buttons .blogicon-rss {
 background: #6cc655;
 color: #ffffff;
}
.sidebar-follow-buttons .blogicon-rss:hover {
 background: #8EDC7A;
}
.sidebar-follow-buttons .googleplus {
 color: #db4a39;
 background-color: transparent;
}
.sidebar-follow-buttons .fa-google-plus {
 background: #db4a39;
 color: #ffffff;
}
.sidebar-follow-buttons .fa-google-plus:hover {
 background: #e47365;
}

/* Menu */
#top-editarea {
 margin-bottom: 0;
}
nav#slide-menu {
 width: 100%;
}
nav#slide-menu ul {
 list-style-type: none;
 height: 44px;
 width: 1142px;
 margin: 0 auto;
 padding: 0;
 display: -webkit-flex;
 /* Safari */
 display: flex;
 -webkit-justify-content: space-around;
 /* Safari */
 justify-content: space-around;
}
nav#slide-menu li {
 width: 100%;
 position: relative;
 margin: 0;
 padding: 0;
 text-align: center;
 line-height: 44px;
 height: 44px;
}
nav#slide-menu li a {
 display: block;
 margin: 0;
 line-height: 44px;
 height: 44px;
 color: #fff;
 font-size: 14px;
 font-weight: bold;
 text-decoration: none;
}
nav#slide-menu li:hover>a {
 background-color: rgba(255, 255, 255, 0.5);
 color: #fff;
}
nav#slide-menu li ul {
 width: 200px;
 list-style: none;
 position: absolute;
 top: 100%;
 left: 0;
 margin: 0;
 padding: 0;
 z-index: 9999;
 visibility: hidden;
}
nav#slide-menu li ul li {
 width: 200px;
 height: 44px;
 line-height: 44px;
 color: #fff;
 background: #D496A5;
 -moz-transition: .2s;
 -webkit-transition: .2s;
 -o-transition: .2s;
 -ms-transition: .2s;
 transition: .2s;
}
nav#slide-menu li ul li a {
 line-height: 44px;
 height: 44px;
 background: #D496A5;
 text-align: center;
 font-size: 12px;
 font-weight: normal;
 color: #fff;
}
nav#slide-menu li:hover ul {
 overflow: visible;
 background: #D496A5;
 visibility: visible;
 top: 44px;
 width: 200px;
 display: block;
}
div.menu-trigger {
 display: none;
}
nav#slide-menu li a.menu-close {
 display: none;
}
nav#slide-menu li:last-child {
 display: none;
}
@media only screen and (max-width:1141px) {
 nav#slide-menu {
 overflow-x: hidden;
 overflow-y: auto;
 z-index: 20;
 position: fixed;
 top: 0;
 left: -284px;
 bottom: 0;
 display: block;
 float: left;
 width: 100%;
 max-width: 284px;
 height: 100%;
 -moz-transition: all 300ms;
 -webkit-transition: all 300ms;
 transition: all 300ms;
 background: -moz-linear-gradient(45deg, #ff9a9e 0%, #f0b77f 99%, #fad0c4 100%);
 background: -webkit-linear-gradient(45deg, #ff9a9e 0%, #f0b77f 99%, #fad0c4 100%);
 background: linear-gradient(45deg, #ff9a9e 0%, #f0b77f 99%, #fad0c4 100%);
 /* 背景グラデーション2 */
 }
 nav#slide-menu ul {
 position: static;
 display: block;
 margin: 0;
 padding: 0;
 list-style: none;
 opacity: 0.5;
 -moz-transition: all 300ms;
 -webkit-transition: all 300ms;
 transition: all 300ms;
 width: 100%;
 overflow: visible;
 }
 nav#slide-menu li {
 width: 100%;
 padding: 6px 0;
 cursor: pointer;
 display: block;
 position: relative;
 text-align: center;
 }
 nav#slide-menu li ul {
 display: none;
 }
 nav#slide-menu li:hover ul {
 display: none;
 }
 body.menu-active nav#slide-menu {
 left: 0px;
 }
 body.menu-active nav#slide-menu ul {
 left: 0px;
 opacity: 1;
 }
 div.menu-trigger {
 text-align: center;
 display: block;
 position: fixed;
 top: 10px;
 right: 10px;
 width: 46px;
 height: 46px;
 line-height: 46px;
 background: -moz-linear-gradient(45deg, #ff9a9e 0%, #f0b77f 99%, #fad0c4 100%);
 background: -webkit-linear-gradient(45deg, #ff9a9e 0%, #f0b77f 99%, #fad0c4 100%);
 background: linear-gradient(45deg, #ff9a9e 0%, #f0b77f 99%, #fad0c4 100%);
 /* 背景グラデーション2 */
 color: #fff;
 cursor: pointer;
 border-radius: 50%;
 -moz-transition: all 300ms;
 -webkit-transition: all 300ms;
 transition: all 300ms;
 z-index: 1000;
 }
 nav#slide-menu li a.menu-close {
 display: block;
 border: 1px solid #fff;
 border-radius: 4px;
 -moz-transition: all 300ms;
 -webkit-transition: all 300ms;
 transition: all 300ms;
 margin: 0 auto;
 }
 nav#slide-menu li div.menu-close {
 display: block;
 color: #fff;
 border: 1px solid #fff;
 border-radius: 4px;
 -moz-transition: all 300ms;
 -webkit-transition: all 300ms;
 transition: all 300ms;
 margin: 0 auto;
 }
 nav#slide-menu li:last-child {
 display: block;
 }
}

/* 目次 */
.entry-content .table-of-contents {
 border: 2px dashed #fff;
 box-shadow: 0 0 0 10px #f6f6f6;
 padding: 20px 10px 20px 40px;
 list-style-type: decimal;
 border-radius: 6px;
 font-size: 90%;
 background: #f6f6f6;
 width: 88%;
 margin: 3rem auto;
}
.entry-content .table-of-contents:before {
 content: "目次";
 font-size: 120%;
}
.entry-content .table-of-contents li, .entry-content .table-of-contents ul {
 list-style-type: decimal;
}
@media (max-width: 480px) {
 .entry-content .table-of-contents {
 width: 78%;
 }
}
/* footer-ad */
.adx-responsive-mode {
 text-align: center;
}
/*sp padding */
@media (max-width: 480px) {
.hatena-module,
.page-entry #main {
 padding: 20px 10px;/* 余白 上下 左右 */
}
}
/*--------------------------------------
Haruniの読み込み元からコピー ここまで
以下、ひきつづきHaruni関係の設定
--------------------------------------*/
/* <system section="background" selected="undefined"> */
/* </system> */
/* テーマ Haruni*/
/* 水色グラデーション着せ替え */
body, .entry-content h3, .categories a, .hatena-module-category .hatena-urllist li a, a.entry-see-more {
    background: -moz-linear-gradient(left, #84fab0 0%, #8fd3f4 100%);
    background: -webkit-linear-gradient(left, #84fab0 0%, #8fd3f4 100%);
    background: linear-gradient(to right, #84fab0 0%, #8fd3f4 100%);
    /* 背景グラデーション1 */
}
@media only screen and (max-width:1141px) {
    nav#slide-menu, div.menu-trigger {
        background: -moz-linear-gradient(30deg, #84fab0 0%, #8fd3f4 100%);
        background: -webkit-linear-gradient(30deg, #84fab0 0%, #8fd3f4 100%);
        background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
        /* 背景グラデーション2 */
    }
}

/* 文字色 */
a, .leave-comment-title, .hatena-module-title, .hatena-module-title a, .sns-twitter, .sns-facebook, .sns-bookmark, a.sns-bookmark:visited, .sns-googleplus, .sns-pocket, .sns-line, a.sns-link:hover {
    color: #49b7ed;
}
.leave-comment-title {
    border: 1px solid #49b7ed;
}

/* 見出し */
.entry-content h2 {
    position: relative;
    padding: 0.2em 0.5em;
    border-left: 8px solid #49b7ed;
}
.entry-content h4 {
    position: relative;
    padding: .5em;
    color: #49b7ed;
    border-top: 1px solid #49b7ed;
    border-bottom: 1px solid #49b7ed;
}
.entry-content h5 {
    position: relative;
    padding: .5em;
    color: #49b7ed;
    border-left: 4px solid #49b7ed;
}
/* ヘッダーの縦横比維持  */
@media screen and (max-width: 1141px) {
.header-image-only #blog-title #blog-title-inner {
  position: relative;
  background-size: cover;
  height: auto;
  width: 100%;
  max-width: 1000px;/* タイトル画像の横幅 */
  margin: 0 auto;
}
.header-image-only #blog-title #blog-title-inner:before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 21%;/* タイトル画像の高さ÷横幅％ */
}
.header-image-only #blog-title #blog-title-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
}
/* タイトル画像上下の余白を取る */
#blog-title { 
margin: 0 auto;
padding: 0; 
}
/* aboutページのカスタマイズ */
/*aboutページ、デフォdl（プロフィール〜読者までを囲うエリア）*/
.page-about dl {
    text-align: center;
    margin: 0;
}
/*aboutページ、デフォdt（プロフィール等のタイトル）*/
.page-about dt {
    text-align: center;
    font-weight: bold;
    font-size: 1.3em;
    color: #676F74;
    margin-bottom: 15px;
}
/*aboutページ、デフォdd→吹き出し風に*/
.page-about dd {
    text-align: center;
    position: relative;
    display: inline-block;
    margin: 0.5em auto 1.5em;
    padding: 7px 10px;
    min-width: 120px;
    max-width: 100%;
    color: #676F74;
    font-size: 16px;
    background: #FFF;
    border: solid 3px #676F74;
    box-sizing: border-box;
    border-radius: 10px;
}
.page-about dd:before{
    content: "";
    position: absolute;
    top: -23px;
    left: 50%;
     margin-left: -15px;
    border: 12px solid transparent;
    border-bottom: 12px solid #FFF;
     z-index: 2;
}
.page-about dd:after{
    content: "";
    position: absolute;
    top: -30px;
    left: 50%;
     margin-left: -17px;
    border: 14px solid transparent;
    border-bottom: 14px solid #676F74;
     z-index: 1;
}
/*aboutページ、読者数（＼99人／のところ）*/
.about-subscription-count {
display: table;
position: relative;
padding: 0 30px;
color: #676F74;
font-size: 1.5em;
font-weight: bold;
line-height: 1;
letter-spacing: 1px;
margin: 12px auto;
}
.about-subscription-count:before,
.about-subscription-count:after {
display: inline-block;
position: absolute;
top: 50%;
width: 20px;
height: 3px;
border-radius: 3px;
background-color: #676F74;
content: "";
}
.about-subscription-count:before {
left: 0;
-webkit-transform: rotate(50deg);
   transform: rotate(50deg);
}
.about-subscription-count:after {
right: 0;
-webkit-transform: rotate(-50deg);
   transform: rotate(-50deg);
}
/*aboutページ、読者アイコン（拡大＆円形＆ふわっとアニメーション）*/
.page-about .entry-content img.profile-icon {
    height: 45px;
    width: 45px;
    border-radius: 50%;
    margin: 4px 4px;
    transition: .3s;
}
.page-about .entry-content img.profile-icon:hover {
    box-shadow: 0 10px 20px -4px rgba(0,0,0,.25);
    transform: translateY(-3px);
}
/*上に戻る*/
#page-top {
  display:none;
  position:fixed;
  right:10px;
  bottom:20px;
  margin: 0;
  padding: 0;
  text-align:center;
}
#move-page-top{
  color:rgba(0,0,0,0.4);
  text-decoration:none;
  display:block;
  cursor:pointer;
}
#move-page-top:hover{
  color:rgba(0,0,0,0.6);
}
@media only screen and (min-width: 400px){
  #page-top{
    right:50%;
    margin-right: -450px;
  }
}
/* マーカー設定 */
.marker-orange {
  background: linear-gradient(transparent 60%, #ffa500 60%);
}
.marker-lightcoral {
  background: linear-gradient(transparent 60%, #f08080 60%);
}
.marker-coral {
  background: linear-gradient(transparent 60%, #ff7f50 60%);
}
.marker-pink {
  background: linear-gradient(transparent 60%, #ffc0cb 60%);
}
.marker-yellow {
  background: linear-gradient(transparent 60%, #ffff00 60%);
}
.marker-deepskyblue {
  background: linear-gradient(transparent 60%, #00bfff 60%);
}
.marker-skyblue {
  background: linear-gradient(transparent 60%, #87cefa 60%);
}
.marker-lightskyblue {
  background: linear-gradient(transparent 60%, #87ceeb 60%);
}
.marker-lawngreen {
  background: linear-gradient(transparent 60%, #7cfc00 60%);
}
.marker-lime {
  background: linear-gradient(transparent 60%, #00ff00 60%);
}
/* アプリーチ設定 */
.appreach {
  text-align: left;
  padding: 10px;
  border: 1px solid #7C7C7C;
  overflow: hidden;
}
.appreach:after {
  content: "";
  display: block;
  clear: both;
}
.appreach p {
  margin: 0;
}
.appreach a:after {
  display: none;
}
.appreach__icon {
  float: left;
  border-radius: 10%;
  overflow: hidden;
  margin: 0 3% 0 0 !important;
  width: 25% !important;
  height: auto !important;
  max-width: 120px !important;
}
.appreach__detail {
  display: inline-block;
  font-size: 20px;
  line-height: 1.5;
  width: 72%;
  max-width: 72%;
}
.appreach__detail:after {
  content: "";
  display: block;
  clear: both;
}
.appreach__name {
  font-size: 16px;
  line-height: 1.5em !important;
  max-height: 3em;
  overflow: hidden;
}
.appreach__info {
  font-size: 12px !important;
}
.appreach__developper, .appreach__price {
  margin-right: 0.5em;
}
.appreach__posted a {
  margin-left: 0.5em;
}
.appreach__links {
  float: left;
  height: 40px;
  margin-top: 8px;
  white-space: nowrap;
}
.appreach__aslink img {
  margin-right: 10px;
  height: 40px;
  width: 135px;
}
.appreach__gplink img {
  height: 40px;
  width: 134.5px;
}

/* 開閉できる目次*/
.table-of-contents{
display: none;
}
.show-area{
display: inline-block;
padding: 10px;
border-radius: 5px;
cursor: pointer;
margin-bottom: 0;
color: blue;
}

/* 背景塗りつぶしボックス */
.box3 {
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #2c2c2f;
    background: #cde4ff;/*背景色*/
}
.box3 p {
    margin: 0; 
    padding: 0;
}
/* ストライプボックス */
.box16{
    padding: 0.5em 1em;
    margin: 2em 0;
    background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
    background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
}
.box16 p {
    margin: 0; 
    padding: 0;
}
/*こちらへどうぞボックス*/
.box {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #ffbb00;
    border-radius: 0 8px 8px 8px;
}
.box .box-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    vertical-align: middle;
    font-size: 17px;
    background: #ffbb00;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.box p {
    margin: 0; 
    padding: 0;
}
.box ul li {
  line-height: 1.5;
  padding: 0.5em 0;
  list-style-type: none!important;
}
.box ul li:before {/*疑似要素*/
  font-family: "FontAwesome";
  content: "\f138";/*アイコンの種類*/
  position: absolute;
  left : 2em;/*左端からのアイコンまでの距離*/
  color: #ffbb00;/*アイコン色*/
}
/*--------------------------------------
  ヨメレバ・カエレバ（レスポンシブ）
--------------------------------------*/
.booklink-box, .kaerebalink-box{
    padding:25px;
    margin-bottom: 10px;
    border:double #CCC;
    overflow: hidden;
    font-size:small;
}
.booklink-image, .kaerebalink-image{
    margin:0 15px 0 0;
    float:left;
    min-width: 160px;
    text-align: center;
}
.booklink-image img, .kaerebalink-image img{
    margin:0 auto;
    text-align:center;
}
.booklink-info, .kaerebalink-info{
    margin:0;
    line-height:120%;
    overflow: hidden;
}
.booklink-name, .kaerebalink-name{
    margin-bottom:24px;
    line-height:1.5em;
}
.booklink-powered-date, .kaerebalink-powered-date{
     font-size:8px;
     margin-top:10px;
     font-family:verdana;
     line-height:120%;
}
.booklink-detail, .kaerebalink-detail{font-size: 12px;}
.booklink-powered-date, .kaerebalink-detail{margin-bottom:15px;}
.booklink-link2, .kaerebalink-link1{margin-top:10px;}
.booklink-link2 a,
.kaerebalink-link1 a{
    width:30%;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    display:inline-block;
    margin:5px 2px 0 0;
    padding:10px 1px;
    text-align:center;
    float:left;
    text-decoration:none;
    font-weight:800;
    text-shadow:1px 1px 1px #dcdcdc;
    font-size:12px;
    color: #fff !important;
}
.booklink-link2 a:hover,
.kaerebalink-link1 a:hover{opacity: 0.6;}
.booklink-link2 a:active
.kaerebalink-link1 a:active{
    position:relative;
    top:1px;
}
/*ボタンを変えるときはここから*/
.shoplinkamazon a{background-color:#FF9901 !important;}
.shoplinkrakuten a{background-color:#c20004 !important;}
.shoplinkkindle a{background-color:#007dcd !important;}
.shoplinkkakakucom a{background-color:#314995 !important;}
.shoplinkyahoo a{background-color:#7b0099 !important;}
/*ここまでを変更*/
.shoplinkyahoo img{display:none;}
.shoplinkyahoo a{font-size:10px;}
.booklink-footer{display: none;}
.shoplinkrakuten img{display:none;}
.shoplinkamazon img{display:none;}
.shoplinkkindle img{display:none;}
@media screen and (max-width: 680px) {
.booklink-box, .kaerebalink-box{padding:15px;}
.booklink-image, .kaerebalink-image{
    width: 100px !important;
    min-width: initial;
}
.booklink-name > a, .kaerebalink-name > a{
    font-size: 15px;
    font-weight: bold;
}
.booklink-name, .kaerebalink-name{margin-bottom:12px;}
.booklink-powered-date, .kaerebalink-powered-date{margin-top:5px;}
.booklink-link2 a,
.kaerebalink-link1 a{
    width:calc(100% - 4px);
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    margin: 2px 0px;
    padding:10px 0px;
}
}
/* 吹き出しのCSS　*/
.entry-content .l-fuki,
.entry-content .r-fuki {
position: relative;
width: 80%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
padding: 20px;
border-radius: 6px;
border: 2px solid #9FC;
box-shadow: 1px 1px 5px #aaa;
background-color: #f5fffa;
z-index: 1;
}
.entry-content .l-fuki {
margin: 20px 20% 40px 0;
}
.entry-content .r-fuki {
margin: 20px 0 40px 19%;
}
.entry-content .l-fuki::before,
.entry-content .r-fuki::before {
position: absolute;
content: "";
top: 16px;
width: 10px;
height: 10px;
border-right: 2px solid #9FC;
border-bottom: 2px solid #9FC;
background-color: #f5fffa;
z-index: 2;
}
.entry-content .l-fuki::before {
right: -7px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.entry-content .r-fuki::before {
left: -7px;
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
.entry-content .l-fuki::after,
.entry-content .r-fuki::after {
position: absolute;
content: "";
width: 80px;
height: 80px;
top: -10px;
border-radius: 40px;
border: 3px solid #fff;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
box-shadow: 1px 1px 5px #aaa;
}
.entry-content .l-fuki::after {
right: -110px;
}
.entry-content .r-fuki::after {
left: -110px;
}
@media screen and (max-width: 620px) {
.entry-content .l-fuki,
.entry-content .r-fuki {
width: 70%
}
.entry-content .l-fuki {
margin-right: 30%;
}
.entry-content .r-fuki {
margin-left: 30%;
}
}
@media screen and (max-width: 478px) {
.entry-content .l-fuki::after,
.entry-content .r-fuki::after {
width: 60px;
height: 60px;
border-radius: 30px;
}
.entry-content .l-fuki::after {
right: -84px;
}
.entry-content .r-fuki::after {
left: -84px;
}
}
.fusani_01::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/f/fusani/20190102/20190102065910.png);}
.fusani_02::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/f/fusani/20190103/20190103222029.png);}
.hamu_01::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/f/fusani/20190103/20190103232428.jpg);}