blockquote {
    position: relative;
    padding: 10px 15px 10px 50px;
    box-sizing: border-box;
    font-style: italic;
    background: #efefef;
    color: #555;
}

blockquote:before{
    display: inline-block;
}

blockquote p {
    padding: 0;
    margin: 10px 0;
    line-height: 1.7;
}

blockquote cite {
    display: block;
    text-align: right;
    color: #888888;
    font-size: 0.9em;
}

/* <system section="theme" selected="10257846132600779075"> */

/* <system section="background" selected="undefined"> */

/* </system> */
@charset "UTF-8";
/*
  Theme: Koala
  Author: taku
  Responsive: yes
  Description:
   カスタマイズに適した、カード型デザインのレスポンシブデザイン対応テーマです。
  Released under the MIT License.
*/
/*! 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: 'Helvetica Neue','Helvetica','Arial',YuGothic,'Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', Meiryo,'ＭＳ ゴシック',sans-serif;
    color: #454545;
    line-height: 1.6;
}

a {
    color: #1487bd;
}

a:hover {
    color: #0f668f;
}

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 {
    background-color: #454545;
    color: #fff;
}

/* container */
#container,
#footer {
    padding: 0;
}




#content-inner {
    margin-right: auto;
    margin-left: auto;
    max-width: 1136px;
}

#wrapper {
    width: 67%;
    margin-left: 1%;
    vertical-align: top;
    display: inline-block;
}




/* ヘッダ */
#blog-title {
    padding: 2em 0;
    text-align: center;
}

@media (min-width: 768px) {
#blog-title {
    padding: 2em 0;
}}

#title {
    margin: 0;
    font-size: 1.5rem;
}

@media (min-width: 992px) {
    #title {
        font-size: 1.7rem;
    }
}

#title a {
    color: #454545;
}

#blog-description {
    font-weight: normal;
    font-size: .8rem;
    margin: 1em 0 0;
}

/* ヘッダ画像を設定したとき */
.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: 10px;
    margin-right: 10px;
}

/* タイトル下HTML */
#top-editarea {
    margin-bottom: 0; /*スライドメニュー下の余白*/
}

/*スライドメニュー*/
#slide-nav {
	font-size: 0;
	font-weight: bold;
	padding: 0 0 0;
}

#slide-nav .menu a {
	display: block;
	color: #3d3f44;
	font-size: 15px;
	font-weight: bold;
    line-height: 35px;
	text-align: center;
	overflow: hidden;
	padding: 0 8px;
	box-sizing: border-box;
	text-decoration: none;
}

#slide-nav .slide-nav-inner {
	width: 100%;
	height: 35px;
	padding: 0 6px;
	overflow-x: auto;
	overflow-y: hidden;
	box-sizing: border-box;
	text-align: center;
	white-space: nowrap;
	margin: 0 auto;
	background-color: #dfe5e7;
	-webkit-font-smoothing: antialiased;
	-webkit-overflow-scrolling: touch;
}
#slide-nav .menu {
	display: inline-block;
}

/* パンくず（カテゴリー、記事ページで表示されます） */
.breadcrumb {
    font-size: .9rem;
    padding: 10px;
}

/* entry */

#main-inner {
    margin-right: auto;
    margin-left: auto;
    padding: 1em; /*記事の余白*/
}

.entry {
    position: relative;
    margin-bottom: 4em;
}

.entry-header {
    margin-bottom: 2em;
    border-bottom: 1px solid #ddd;
    position: relative;
}

.date {
    margin-bottom: .5em;
    font-size: .9rem;
}

.date a {
    color: #999;
    text-decoration: none;
}

.date a:hover {
    text-decoration: underline;
}

.entry-title {
    margin: 0 0 .3em;
    font-size: 1.5rem;
}

@media (min-width: 992px) {
    .entry-title {
        font-size: 1.6rem;
    }
}

.categories {
    margin: .5em 0;
    font-size: .9rem;
}

.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: 2.0em 0 1.8em 0;
}

.entry-content h1 {
    font-size: 1.5rem;
}

@media (min-width: 992px) {
    .entry-content h1 {
        font-size: 1.7rem;
    }
}

.entry-content h2 {
    font-size: 1.4rem;
}

@media (min-width: 992px) {
    .entry-content h2 {
        font-size: 1.5rem;
    }
}

.entry-content h3 {
    font-size: 1.2rem;
}

@media (min-width: 992px) {
    .entry-content h3 {
        font-size: 1.3rem;
    }
}

.entry-content h4 {
    font-size: 1.1rem;
}

.entry-content h5 {
    font-size: 1rem;
}

.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: 992px) {
    .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;
}

/* 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;
}

/* サイドバーモジュール */
.hatena-module {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    margin-bottom: 3em;
    text-align: left;
}




.hatena-module {
    width: 100%;
    margin: 3% 1% 3% 1%;
    display: inline-block;
    vertical-align: top;
}

.hatena-module-body {
    padding: 0 8px;
}


#box2 {
    text-align: reft; /*モジュールが奇数の場合中央寄せ不可*/
    display: inline-block;
    width: 30%;
    margin-right: 1%;
    font-size: 0.9rem;
}

.entry-content {
    font-size: 0.92rem;　/*記事の文字の大きさ、スマホ以外*/
}

.entry-inner {
    padding: 15px; /*記事左右の余白*/
}

/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/





@media (max-width: 1023px) { /*iPad横は1024*/

    #box2 {
       width: 100%; /*30%を解除*/
       margin: 0; /*1%を解除*/
    }
    
    #wrapper {
    width: 100%; /*アーカイブの幅*/
    margin: 0; /*margin-leftの1%を解除*/
    display: block;
    }
    
    .hatena-module {
        width: 47.6%;
    }}

@media (max-width: 599px) {
    .hatena-module {
       margin: 2em 0 0 0;
    }

    #box2 {
       width: 100% !important;
       padding: 0;
       float: none;
    }}

.hatena-module-title {
    margin-bottom: .8em;
    padding-top: .5em;
    padding-bottom: .2em;
    border-bottom: 8px solid #ddd;
    border-radius: 2px;
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
}

.hatena-module-title a {
    color: #454545;
    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;
}

/* urllist module */

.hatena-urllist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hatena-urllist li {
    padding: .5em 0;
}

.hatena-urllist li:last-child {
    padding-bottom: 1em;
}

.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(data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2…8,0,0,1-3.8,3.8'/%3E%3Crect class='a' width='20' height='20'/%3E%3C/svg%3E) 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;
}

/* 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;
}


/*アーカイヴ*/

#content {
    margin-top: 1em; /*アーカイヴ上の余白*/
}

.page-archive .archive-entries .archive-entry {
  margin-bottom: 3em;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.page-archive .archive-entries .entry-title {
  font-size: 15px;
  letter-spacing: 0.08em;
  line-height: 1.4;
  margin: 0 0 .1em 0;
}

.page-archive .archive-entries .categories {
  margin: 0 0 .5em;
}

.page-archive .categories a { /*パンくずリストには指定しない*/
  color: #fff;
  font-size: 70%;
  background: #aaa;
  padding: 2px 5px;
  border-radius: 3px;
  text-decoration: none;
  display: inline-block;
  *display: inline;
  *zoom: 1;
  margin: 2px;
  line-height: normal; /*初期値に戻す*/
}

.page-archive .archive-entries .archive-entry {
    background-color: #f5f5f5; /*archiveの背景色*/
    width: 45%;
    box-sizing: border-box;
    overflow: hidden;
    padding: 10px;
    display: inline-block;
    margin: 0 0 3% 3%;
    vertical-align: top; /*基準点を上に*/
}

.date.archive-date {
    display: none;
}

.page-archive .archive-entries {
    font-size: 100%;
    margin: 0; /*記事一覧下の不要な余白を消す*/
    line-height: 1.7em;
}

.page-archive .entry-thumb {
    width: 300px;
    height: 200px;
}

.page-archive .entry-thumb:hover{
    transition: all 1s; /* 2秒で適用するということ*/
    opacity:0.7
}

.page-archive .archive-entries .entry-description {
    margin: 0;
    line-height: 1.6;
    height: 100px;
    overflow: hidden;
    font-size: 13px;
   /* display: none;*/
}


@media (min-width: 768px) {
    .page-archive .entry-description {
        font-size: .9rem;
    }
}

.page-archive .social-buttons {
    display: none; /*初期値はblock*/
    margin-top: .3em;
}

/*カテゴリーページのタイトル*/

.archive-header-category {
    margin-bottom: 2em
}

.archive-header-category .archive-heading {
    margin: .5em;
    margin-bottom: .5em;
    font-size: 1.3rem;
}





/*-----ボックス２の記事リンク全て-----*/

#box2 .hatena-module-recent-entries li, #box2 .entries-access-ranking li, #box2 .hatena-module-related-entries li {
    display: inline-block;
    height: 65px; /*サムネの高さに揃える*/
    overflow: hidden; /*はみ出した文字は隠す*/
    text-decoration: none;
    text-align: left; /*box2内はcenterのため*/
    margin: 0 0 10px 0;
    padding: 0 3px 0 0;
    width: 100%;
    background-color: #f5f5f5;
    border: none;
    box-sizing: border-box;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

#box2 .hatena-module-recent-entries img.urllist-image.recent-entries-image, #box2 .entries-access-ranking img.urllist-image, #box2 .hatena-module-related-entries img.urllist-image {
    width: 65px; /*サムネの大きさ*/
    height: 65px;
    float: left;
    margin: 0 5px 0 0;
}

#box2 .hatena-module-recent-entries li a, #box2 .hatena-module-entries-access-ranking li a, #box2 .hatena-module-related-entries li a {
    text-decoration: none;
    color: #666;
    font-weight: bold;
    vertical-align: middle; /*ボックスの中央に配置*/
    line-height: 1.83;
    font-size: 12px; /*フォントサイズを固定*/
}

#box2 .hatena-module-recent-entries .hatena-module-body, #box2 .hatena-module-entries-access-ranking .hatena-module-body, #box2 .hatena-module-related-entries .hatena-module-body {
   line-height: 0; /*上下を詰めて余白はmarginを使う*/
   text-align: center;
}
#box2 .hatena-module-recent-entries .hatena-urllist, #box2 .hatena-module-entries-access-ranking .hatena-urllist, #box2 .hatena-module-related-entries .hatena-urllist {
   padding: 0; /*リスト左のpaddingを解除*/
}

#main {
    margin-bottom: 3em; /*アーカイブ下の余白*/
}





/*記事ページの設定*/

.entry {
    background-color: #fff; /*記事ページの背景を白に*/
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/*記事下の関連記事*/

#entry-footer-secondary-modules .hatena-module {
    width: 100%;
    float: none;
}

#entry-footer-secondary-modules .hatena-module .hatena-module-body {
    padding: 0;
}

#entry-footer-secondary-modules .hatena-urllist {
    list-style: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    line-height: 0;
}

#entry-footer-secondary-modules .hatena-module {
    margin: 0;
}

#entry-footer-secondary-modules .hatena-urllist li {
    height: 65px;
    width: 46.7%;
    padding: 0 3px 0 0;
    box-sizing: border-box;
    display: inline-block;
    margin: 0 0 10px 2%;
    background-color: #fdfdfd;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

#entry-footer-secondary-modules .hatena-urllist li:nth-child(2n) {
    float: right;
    margin: 0 2% 10px 0;
}

#entry-footer-secondary-modules .urllist-with-thumbnails li .urllist-image {
    margin: 0;
    float: left;
    height: 65px;
    width: 65px;
    margin-right: 5px;
}

#entry-footer-secondary-modules .hatena-urllist li a {
    font-size: 12px;
    text-decoration: none;
    color: #666;
    font-weight: bold;
    line-height: 1.83; /*余白調節のため一度0にしている*/
}

#entry-footer-secondary-modules .hatena-urllist .urllist-entry-body {
    display: none; /*タイトルのみを表示する*/
}

#entry-footer-secondary-modules .hatena-urllist .urllist-date-link {
    display: none; /*日付は表示しない*/
}









/* footer */
#footer {
    margin-top: 2em;
    padding-bottom: 2rem;
    text-align: center;
    font-size: .8rem;
    color: #999;
}

#footer a {
    color: #999;
}

#footer p {
    margin: .5em auto;
}























/*  import media queries */

/* Media Queries - Retina Display */

@media (-webkit-min-device-pixel-ratio: 2) {
  .hatena-module-search-box .search-module-button {
    background: transparent url(data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2…8,0,0,1-3.8,3.8'/%3E%3Crect class='a' width='20' height='20'/%3E%3C/svg%3E) no-repeat right center;
    background-size: 20px 20px;
  }

}

@media (min-width: 768px) and (max-width: 1023px) {
#main {
    width: 100%;
    padding: 0;
    box-sizing: border-box;
    float: left;
}

#main-inner {
    width: 700px; /*PCでは1000px*/
}

.entry-content {
    padding: 0 20px 0 20px; /*記事幅*/
}

/*アーカイブここから*/

.page-archive .archive-entries {
　　text-align: left;
    padding-left: 0px;
    box-sizing: border-box;
}

.page-archive .archive-entries .archive-entry {
    width: 46%;
    margin: 0 0 3% 2%;
    padding: 7px;
    text-align: left;
}

.page-archive .archive-entries .archive-entry:nth-child(even) {
    margin-left: 3%; /*偶数列のみ*/
    margin-right: 2%;
}

.page-archive .archive-entries .entry-title {
  font-size: 14px;
}

.page-archive .entry-thumb {
    width: 80px;
    height: 80px;
}

.page-archive .archive-entries .entry-description {
    line-height: 1.9;
    height: 80px;
    font-size: 11px;
}

/*フッタ*/

.entry-footer {
    padding: 0;
}}

@media screen and (min-width: 600px) and (max-width: 767px) {

#content {
    margin-top: 0; /*アーカイヴ上の余白*/
}

.entry-content {
    padding: 0 10px; /*記事左右の余白*/
}

#main {
  width: 100%;
  padding: 0;
}

#main-inner {
    width: auto; /*PCでは1000px*/
    padding: 0;
}

#wrapper {
    width: 100%;
    display: block;
}

#box2 { /*文字サイズ等は別の位置に記載*/
  width: 100%;
}

.page-archive .archive-entries .archive-entry {
    width: 96%;
    overflow: hidden;
    padding: 7px;
    margin: 0 2% 2% 2%;
}

.page-archive .archive-entries .archive-entry:first-child {
    margin-top: 2%;
}

.page-archive .archive-entries {
    font-size: 95%;
    margin: 0; /*記事一覧下の不要な余白を削除*/
    line-height: 1.6em;
}

.archive-header-category {
    margin-bottom: 0; /*カテゴリーページのタイトル下*/
}

/*フッタ*/

.entry-footer {
    padding: 0;
}}







/* Media Queries - Small Tablet & Smartphone */
@media only screen and (max-width: 599px) {

#globalheader-container {
    position: static;
}

#container {
  width: 100%;
  word-wrap: break-word;
  overflow: hidden;
  padding-top: 0;
}

#top-editarea {
    margin-bottom: 0; /*スライドメニュー下の余白を削除*/
}

#main {
  width: 100%;
  float: none;
}

#main-inner {
    width: auto; /*PCでは1000px*/
    margin-top: 0;
    padding: 0;
}
  
#box2-inner {
  width: 100%;
}

#wrapper {
    width: 100%;
    display: block;
}

.hatena-module {
  width: 100%;
  float: none;
}

#box2 .hatena-module-recent-entries .hatena-module-body, #box2 .hatena-module-entries-access-ranking .hatena-module-body, #box2 .hatena-module-related-entries .hatena-module-body {
    padding: 0 3%; /*小リンク横幅*/
}

.entry-header-menu {
  top: -30px;
  left: 0px;
}
  
#slide-nav {
	background-color: #dfe5e7;
	height: 33px;
	width: 100%;
	padding-left: 30px;
	overflow: scroll;
  overflow-x: scroll;
  overflow-y: hidden;
  -webkit-font-smoothing: antialiased;
	-webkit-overflow-scrolling: touch;
}
  
#slide-nav .menu a {
  font-size: 14px;
  font-weight: bold;
  padding: 0px 6px;
  line-height: 33px;
}

#slide-nav .slide-nav-inner {
	margin: 0 auto;
	background-color: #dfe5e7;
	position: relative;
	height: 33px;
}

/*id="menu-scroll"*/

#slide-nav .slide-nav-inner {
    position: relative;
    animation: slideIn 1s ease-out 0s 1 normal forwards;
    -webkit-animation: slideIn 1s ease-out 0s 1 normal forwards;
}

@keyframes slideIn {
  0% {}
  100% {
    -webkit-transform: translate(-30px); 
    transform: translate(-30px);}
}

@-webkit-keyframes slideIn {
 0% {}
  100% {
    -webkit-transform: translate(-30px); 
    transform: translate(-30px);}
}

/*記事一覧*/

.page-archive .archive-entries .archive-entry {
    background-color: #eee;
    width: 96%;
    box-sizing: border-box;
    overflow: hidden;
    padding: 5px;
    display: inline-block;
    margin: 0 2% 3% 2%;
    padding: left;
    vertical-align: top;
}

.page-archive .archive-entries .archive-entry:first-child {
    margin-top: 3%;
}

.page-archive .archive-entries .archive-entry:nth-child(even) {
    margin-left: 2%;
    margin-right: 2%;
}

.page-archive .archive-entries {
    font-size: 95%;
    margin: 0; /*記事一覧下の不要な余白を削除*/
    line-height: 1.6em;
}

.archive-header-category {
    margin-bottom: 0; /*カテゴリーページのタイトル下*/
}

/*記事ページ内の設定*/

#content {
    margin-top: 0;
}

.entry-title {
    font-size: 110%; /*pc表示は130%*/
}

.entry-content {
    padding: 0; /*記事左右の余白*/
    font-size: 0.91rem; /*記事の文字サイズ*/
}

.entry-footer {
    margin-top: 10px;
    padding: 0px; /*記事下の関連記事も含むため*/
}

#box2 .hatena-module-recent-entries li, #box2 .entries-access-ranking li, #box2 .hatena-module-related-entries li {
    line-height: 1.85;
    font-size: 12px;
    height: 75px;
    width: 100%; /*SP表示のみ*/
}

#box2 .hatena-module-recent-entries img.urllist-image.recent-entries-image, #box2 .entries-access-ranking img.urllist-image, #box2 .hatena-module-related-entries img.urllist-image {
    width: 75px; /*サムネの大きさ*/
    height: 75px;
}

#box2 .hatena-module-recent-entries li a, #box2 .hatena-module-entries-access-ranking li a, #box2 .hatena-module-related-entries li a {
    line-height: 1.9;
    font-size: 12.5px;
}

/*記事下の関連記事*/

#entry-footer-secondary-modules .hatena-urllist li {
    width: 100%; /*一列にする*/
    margin: 0 0 10px 0;
    height: 75px;
}

#entry-footer-secondary-modules .hatena-urllist li:nth-child(2n) {
    float: none;
    margin: 0 0 10px 0;
}

#entry-footer-secondary-modules .hatena-module .hatena-module-body {
    padding: 0 2%;
}

#entry-footer-secondary-modules .hatena-urllist li a {
    line-height: 1.9;
    font-size: 12.5px;
    text-decoration: none;
    color: #666;
    font-weight: bold;
}

#entry-footer-secondary-modules .urllist-with-thumbnails li .urllist-image {
    height: 75px;
    width: 75px;
}

}

/* Media Queries - Smartphone */

@media (-webkit-min-device-pixel-ratio: 2) {
  .hatena-module-search-box .search-module-button {
    background: transparent url(data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2…8,0,0,1-3.8,3.8'/%3E%3Crect class='a' width='20' height='20'/%3E%3C/svg%3E) no-repeat right center;
    background-size: 20px 20px;
  }

}

@media (min-width: 768px) and (max-width: 1023px) {
#main {
    width: 100%;
    padding: 0;
    box-sizing: border-box;
    float: left;
}

#main-inner {
    width: 700px; /*PCでは1000px*/
}

.entry-content {
    padding: 0 20px 0 20px; /*記事幅*/
}

/*アーカイブここから*/

.page-archive .archive-entries {
　　text-align: left;
    padding-left: 0px;
    box-sizing: border-box;
}

.page-archive .archive-entries .archive-entry {
    width: 46%;
    margin: 0 0 3% 2%;
    padding: 7px;
    text-align: left;
}

.page-archive .archive-entries .archive-entry:nth-child(even) {
    margin-left: 3%; /*偶数列のみ*/
    margin-right: 2%;
}

.page-archive .archive-entries .entry-title {
  font-size: 14px;
}

.page-archive .entry-thumb {
    width: 80px;
    height: 80px;
}

.page-archive .archive-entries .entry-description {
    line-height: 1.9;
    height: 80px;
    font-size: 11px;
}

/*フッタ*/

.entry-footer {
    padding: 0;
}}

@media screen and (min-width: 600px) and (max-width: 767px) {

#content {
    margin-top: 0; /*アーカイヴ上の余白*/
}

.entry-content {
    padding: 0 10px; /*記事左右の余白*/
}

#main {
  width: 100%;
  padding: 0;
}

#main-inner {
    width: auto; /*PCでは1000px*/
    padding: 0;
}

#wrapper {
    width: 100%;
    display: block;
}

#box2 { /*文字サイズ等は別の位置に記載*/
  width: 100%;
}

.page-archive .archive-entries .archive-entry {
    width: 96%;
    overflow: hidden;
    padding: 7px;
    margin: 0 2% 2% 2%;
}

.page-archive .archive-entries .archive-entry:first-child {
    margin-top: 2%;
}

.page-archive .archive-entries {
    font-size: 95%;
    margin: 0; /*記事一覧下の不要な余白を削除*/
    line-height: 1.6em;
}

.archive-header-category {
    margin-bottom: 0; /*カテゴリーページのタイトル下*/
}

/*フッタ*/

.entry-footer {
    padding: 0;
}}







/* Media Queries - Small Tablet & Smartphone */
@media only screen and (max-width: 599px) {

#globalheader-container {
    position: static;
}

#container {
  width: 100%;
  word-wrap: break-word;
  overflow: hidden;
  padding-top: 0;
}

#top-editarea {
    margin-bottom: 0; /*スライドメニュー下の余白を削除*/
}

#main {
  width: 100%;
  float: none;
}

#main-inner {
    width: auto; /*PCでは1000px*/
    margin-top: 0;
    padding: 0;
}
  
#box2-inner {
  width: 100%;
}

#wrapper {
    width: 100%;
    display: block;
}

.hatena-module {
  width: 100%;
  float: none;
}

#box2 .hatena-module-recent-entries .hatena-module-body, #box2 .hatena-module-entries-access-ranking .hatena-module-body, #box2 .hatena-module-related-entries .hatena-module-body {
    padding: 0 3%; /*小リンク横幅*/
}

.entry-header-menu {
  top: -30px;
  left: 0px;
}
  
#slide-nav {
	background-color: #dfe5e7;
	height: 33px;
	width: 100%;
	padding-left: 30px;
	overflow: scroll;
  overflow-x: scroll;
  overflow-y: hidden;
  -webkit-font-smoothing: antialiased;
	-webkit-overflow-scrolling: touch;
}
  
#slide-nav .menu a {
  font-size: 14px;
  font-weight: bold;
  padding: 0px 6px;
  line-height: 33px;
}

#slide-nav .slide-nav-inner {
	margin: 0 auto;
	background-color: #dfe5e7;
	position: relative;
	height: 33px;
}

/*id="menu-scroll"*/

#slide-nav .slide-nav-inner {
    position: relative;
    animation: slideIn 1s ease-out 0s 1 normal forwards;
    -webkit-animation: slideIn 1s ease-out 0s 1 normal forwards;
}

@keyframes slideIn {
  0% {}
  100% {
    -webkit-transform: translate(-30px); 
    transform: translate(-30px);}
}

@-webkit-keyframes slideIn {
 0% {}
  100% {
    -webkit-transform: translate(-30px); 
    transform: translate(-30px);}
}

/*記事一覧*/

.page-archive .archive-entries .archive-entry {
    background-color: #eee;
    width: 96%;
    box-sizing: border-box;
    overflow: hidden;
    padding: 5px;
    display: inline-block;
    margin: 0 2% 3% 2%;
    padding: left;
    vertical-align: top;
}

.page-archive .archive-entries .archive-entry:first-child {
    margin-top: 3%;
}

.page-archive .archive-entries .archive-entry:nth-child(even) {
    margin-left: 2%;
    margin-right: 2%;
}

.page-archive .archive-entries {
    font-size: 95%;
    margin: 0; /*記事一覧下の不要な余白を削除*/
    line-height: 1.6em;
}

.archive-header-category {
    margin-bottom: 0; /*カテゴリーページのタイトル下*/
}

/*記事ページ内の設定*/

#content {
    margin-top: 0;
}

.entry-title {
    font-size: 110%; /*pc表示は130%*/
}

.entry-content {
    padding: 0; /*記事左右の余白*/
    font-size: 0.91rem; /*記事の文字サイズ*/
}

.entry-footer {
    margin-top: 10px;
    padding: 0px; /*記事下の関連記事も含むため*/
}

#box2 .hatena-module-recent-entries li, #box2 .entries-access-ranking li, #box2 .hatena-module-related-entries li {
    line-height: 1.85;
    font-size: 12px;
    height: 75px;
    width: 100%; /*SP表示のみ*/
}

#box2 .hatena-module-recent-entries img.urllist-image.recent-entries-image, #box2 .entries-access-ranking img.urllist-image, #box2 .hatena-module-related-entries img.urllist-image {
    width: 75px; /*サムネの大きさ*/
    height: 75px;
}

#box2 .hatena-module-recent-entries li a, #box2 .hatena-module-entries-access-ranking li a, #box2 .hatena-module-related-entries li a {
    line-height: 1.9;
    font-size: 12.5px;
}

/*記事下の関連記事*/

#entry-footer-secondary-modules .hatena-urllist li {
    width: 100%; /*一列にする*/
    margin: 0 0 10px 0;
    height: 75px;
}

#entry-footer-secondary-modules .hatena-urllist li:nth-child(2n) {
    float: none;
    margin: 0 0 10px 0;
}

#entry-footer-secondary-modules .hatena-module .hatena-module-body {
    padding: 0 2%;
}

#entry-footer-secondary-modules .hatena-urllist li a {
    line-height: 1.9;
    font-size: 12.5px;
    text-decoration: none;
    color: #666;
    font-weight: bold;
}

#entry-footer-secondary-modules .urllist-with-thumbnails li .urllist-image {
    height: 75px;
    width: 75px;
}

}

/* Media Queries - Smartphone */
/* </system> */


/* <system section="background" selected="pattern-09"> */
body{ background-image: url('https://cdn.blog.st-hatena.com/images/theme/backgrounds/2014/pattern-09.png?version=c9b53794dc2c21dcf5ca3c7d4faf84'); background-repeat: repeat; background-attachment: scroll; background-position: 0 0; }
/* </system> */
/* Font Awesome hatena bookmark */
.fa-hatena:before {
    content: "B!";
    font-family: Verdana;
    font-weight: bold
}

/***フォローボタンラベル部分***/
.follow-label {
    font-weight: bold;
    font-size: 1em;
    text-align: center;
    line-height: 1.5;
}
/***ここからフォローボタンカラー***/
.follow-btn-list {
    list-style: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 auto;
    padding: 0 0 1em;
}
.follow-btn-item a {
    display: inline-block;
    text-align: center;
    width: 40px;
    height: 40px;
    margin: .15em;
    padding: .1em;
    color: #fff;
    font-size: 26px;
    line-height: 40px;
    border-radius: 20px;
    box-sizing: border-box;
    transition: .2s;
}
.follow-btn-item a:hover {
    transform: translateY(-4px);
    box-shadow: 1px 10px 8px -4px rgba(0,0,0,.2);
    opacity: .8;
    color: #fff;
}
/*** 読者登録 ***/
.follow-btn-item .hatena {
    background: #333;
}
/*** ツイッター ***/
.follow-btn-item .twitter {
    background: #1da1f2;
}
/*** feedly ***/
.follow-btn-item .feedly {
    background: #2bb24c;
}
/*** pinterest ***/
.follow-btn-item .pinterest {
    background: #e60023;
}
/*** youtube ***/
.follow-btn-item .youtube {
    background: #ff0000;
}
/*** instagram ***/
.follow-btn-item .instagram {
    background: linear-gradient(125deg, #427eff 0%, #f13f79 70%) no-repeat;
    position: relative;
    overflow: hidden;
}
.follow-btn-item .instagram::before {
    content: "";
    position: absolute;
    top: 20px;
    left: -14px;
    width: 53px;
    height: 53px;
    background: radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);
}
.blogicon-instagram {
    position: relative;
    z-index: 1;
}
/*** instagramここまで ***/
.follow-btn-item i {
    vertical-align: 7%;
}

/*
Zarigani Design Office Drawer Menu
Copyright 2018 Zarigani Design Office
Customized by minimalgreen

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/

.drawer_menu a {
    color: inherit;
    text-decoration: none;
}

.drawer_menu a:visited {
    color: inherit;
}


/* PC用ナビゲーション */
@media screen and (min-width: 700px){
.drawer_menu .drawer_nav_wrapper {
    transform: translate(0);
    width: 100%;
    height: 150px;/* PC用メニュー高さ */
    position: absolute;
    margin: -172px 0px 0px 0px;
    top: auto;
    right: -600px;
    z-index: 100;
    display:flex;
    justify-content:center;
    background-color:#BFBFBF;/* PC用メニュー背景色 */
    margin-left: 0px;

}
}

.drawer_menu .drawer_nav {
    max-width: 700px;/* コンテンツ幅に合わせる */
    padding-left: 0px;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    list-style-type: none;

}

.drawer_menu .drawer_nav li {
    font-size: 15px;
  margin: -16px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
    width: 120px;
    text-align: center;
    height: 150px;/* PC用メニュー高さ */
    line-height: 150px;/* PC用メニュー高さ */
    background-color: #BFBFBF;/* PC用メニューボタン背景色 */
    list-style-type: none;


}

.drawer_menu .drawer_nav li:hover {
    background-color: #BFBFBF;/* PC用メニューボタンマウスオーバー背景色 */
    color: #163473;/* PC用メニューボタン文字色 */
}

.drawer_menu .drawer_nav li a {
    color: #fff;/* PC用メニューボタン文字色 */
}

.drawer_menu .drawer_nav li a:hover {
    color: #4682b4;/* PC用メニューボタン文字色 */
}
        a:hover {
    text-decoration: underline;
}
/* PC非表示 */

@media screen and (min-width:1001px) {
    .pc-hidden {
        display: none;
        text-align: center;
    }
}

@media screen and (min-width: 1001px) {
/* ドロップダウンメニュー2階層目 */
.drawer_menu .drawer_nav li ul.second-level {
    visibility: hidden;
    list-style-type: none;
    position: absolute;
    z-index: -1;
    top: 0;
    margin: 0;
    padding-left: 0;
}

.drawer_menu .drawer_nav li:hover ul.second-level {
    visibility: visible;
    z-index: 1;
    top: 50px;/* PC用メニューの高さに合わせる */
    transition: all .3s;
}

.drawer_menu .drawer_nav li:hover ul.second-level li {
    width: 200px;/* ドロップダウンメニューボタン横幅 */
    height: 50px;/* Pドロップダウンメニューボタン高さ */
    text-align: center;
}

.drawer_menu .drawer_nav li:hover ul.second-level li a {
    display: block;
    background-color: #555;/* ドロップダウンメニューの文字の背景色 */
    color: #fff;/* ドロップダウンメニューの文字色 */
    font-size: 100%;
    text-decoration: none;
    line-height: 50px;/* Pドロップダウンメニューボタン高さ */
    text-align: center;
}

.drawer_menu .drawer_nav li:hover ul.second-level li a:hover {
    background-color: #999;/* ドロップダウンメニューマウスホバー背景色*/
    background: none;

}
}

/*+++ Default Button Color +++*/

.drawer_menu .drawer_button {
    color: #555;/* ハンバーガーメニュー文字色 */
    display: none;
}

.drawer_menu .drawer_button .drawer_bar {
    background-color:  #4682b4;/* ハンバーガーメニュー三本線の色 */
}


/* 1000px以下 */

@media screen and (max-width: 1000px) {
    .drawer_menu .drawer_bg {
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 999;
       /* background-color: rgba(51, 51, 51, 0.5);*/
       background:rgba(255,255,255,0);
        display: none;
        top: 0;
        left: 0;
    }
    .drawer_menu .drawer_button {
        display: block;
        background: none;
        border: none;
        padding: 0;
        width: 40px;
        letter-spacing: 0.1em;
        cursor: pointer;
        position: fixed;
        top: 5px;
        right: 20px;
        z-index: 1001;
        text-align: center;
        outline: none;
    }
    .drawer_menu .drawer_button.active .drawer_bar {
        width: 49px;
    }
    .drawer_menu .drawer_button.active .drawer_bar1 {
        transform: rotate(30deg);
    }
    .drawer_menu .drawer_button.active .drawer_bar2 {
        opacity: 0;
    }
    .drawer_menu .drawer_button.active .drawer_bar3 {
        transform: rotate(-30deg);
    }
    .drawer_menu .drawer_button.active .drawer_menu_text {
        display: none;
    }
    .drawer_menu .drawer_button.active .drawer_close {
        display: block;
    }
    .drawer_menu .drawer_bar {
        display: block;
        height: 2px;
        margin: 10px 0;
        transition: all 0.2s;
        transform-origin: 0 0;
    }
    .drawer_menu .drawer_text {
        text-align: center;
        font-size: 10px;
    }
    .drawer_menu .drawer_close {
        letter-spacing: 0.08em;
        display: none;
    }
    .drawer_menu .drawer_menu_text {
        display: block;
    }
    .drawer_menu .drawer_nav_wrapper {
        width: 100%;
        height: 100%;
        transition: all 0.4s;
        transform: translate(100%);
        position: fixed;
        top: 0;
        right: 0;
        z-index: 1000;
       /* background-color: #FFF; */  /* ドロワーメニュー内背景色 */
       background:rgba(240,240,240,0.9);
        overflow-x: hidden;
        overflow-y: auto;
    }
    .drawer_menu .drawer_nav {
        display: block;
        position: relative;
        margin-top: 40px;
        padding-left: 20px;
    }
    .drawer_menu .drawer_nav li {
       /* background-color: #fff;*/ 
       background:rgba(255,255,255,0);
        height: auto;
        line-height: 50px;/*  ドロワーメニューリスト項目高さ */
        position: relative;
    }
    .drawer_menu .drawer_nav li a {
       /* background-color: #fff;*/  /* ドロワーメニューリスト背景色 */
       background:rgba(255,255,255,0);
        color: #555;/* ドロワーメニューリスト文字色 */
        display: block;
        text-align: left;
    }
    /* スマートフォン2階層目 */
    .drawer_menu .drawer_nav li:hover ul.second-level {
        display: block;
    }
    .drawer_menu .drawer_nav li ul.second-level {
        visibility: visible;
        position: relative;
        padding: 0;
        z-index: 1001;
    }
    .drawer_menu .drawer_nav li ul.second-level li {
        border-top: 1px solid #eee;
    }
    .drawer_menu .drawer_nav li ul.second-level li a {
        padding-left: 20px;
    }
    .drawer_menu .drawer_nav_wrapper.open {
        transform: translate(0);
    }
    .drawer_menu.left .drawer_button {
        right: auto;
        left: 32px;
    }
    .drawer_menu.left .drawer_nav_wrapper {
        transform: translate(-100%);
        right: auto;
        left: 0;
    }
    .drawer_menu.left .drawer_nav_wrapper.open {
        transform: translate(0);
    }
    .pc-hidden {
        text-align: center;
    }
}
/*  ウィジェットタイトル */
.drawer-title {
    text-align: center;
    width: 100%;
    height: 50px;
    line-height: 50px;
    background-color: #555;/* ドロワーメニュー内タイトルライン背景色 */
    opacity:0.9;
    color: #fff;
}
/* フォローボタン */

.follow-buttons {
    text-align: center;
    margin-top: 0;
    width: 100%;
}

.follow-buttons a {
    display: inline-block;
    width: 60px;
    text-align: center;
    text-decoration: none;
    margin: 5px;
}

.follow-buttons .inner-text {
    font-size: 10px;
    display: block;
}

.follow-buttons .lg, .content-inner-follow-buttons .fa {
    padding: 15px;
    border-radius: 5px;
    margin: 2px auto;
}

.follow-buttons .hatena {
    color: #38393C;
    background-color: transparent;
}

.follow-buttons .blogicon-hatenablog {
    background: #38393C;
    color: #ffffff;
}

.follow-buttons .blogicon-hatenablog:hover {
    background: #5F6063;
}

.follow-buttons .facebook {
    color: #305097;
    background-color: transparent;
}

.follow-buttons .blogicon-facebook {
    background: #305097;
    color: #ffffff;
}

.follow-buttons .blogicon-facebook:hover {
    background: #5A77B7;
}

.follow-buttons .twitter {
    color: #55acee;
    background-color: transparent;
}

.follow-buttons .blogicon-twitter {
    background: #55acee;
    color: #ffffff;
}

.follow-buttons .blogicon-twitter:hover {
    background: #89C7F7;
}

.follow-buttons .instagram {
    color: #D93177;
    background-color: transparent;
}

.follow-buttons .blogicon-instagram {
    background: #D93177;
    color: #ffffff;
}

.follow-buttons .blogicon-instagram:hover {
    background: #df528d;
}

.follow-buttons .feedly {
    color: #6cc655;
    background-color: transparent;
}

.follow-buttons .blogicon-rss {
    background: #6cc655;
    color: #ffffff;
}
.pc-hidden .profile-icon {
    float: none;
}

/*==============================================
　global navigation bar (top)
================================================*/
ul.navi-top, ul.navi-top a {
        color:WHITE;/*文字の色*/
        background-color:#4682b4;/*メニューバーの背景色*/}

ul.navi-top a:hover {
        color:#191970;/*マウスオーバーの時の文字の色*/
        background-color:#4682b4;/*マウスオーバーの時の背景色*/}

/*カテゴリ名表示*/
.archive-header-category .archive-heading {
  margin: 50px 20px 10px 20px;
  padding: 5px 0 5px 10px;
  font-size: 20px !important;
  background: #4f8299;
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 0 4px 0 rgba(0,0,0,.15), 0 3px 4px 0 rgba(0,0,0,.25);
  text-align: center;
}

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: none !important; 
  margin: -25px 0px 0px 0px !important;}
.sp { display: block !important; 
  margin: -65px 0px 0px 0px !important;
  }


/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
    .pc { display: none !important; }
    .sp { display: block !important;
  margin: -65px 0px 0px 0px !important;
  padding: 0px 0px 0px 0px;
   }
}

/*大見出しデザイン */
.entry-content h3 {
  padding: .5em .75em!important;
  border-radius: 4px!important;
    background-color: #4682b4;/* 背景の色 */
    color: #FFFFFF;/* 文字の色 */
}
/*中見出しデザイン */
.entry-content h4 {
  border-left: 6px solid #4682b4;
  border-bottom: solid 2px #4682b4;
  padding-left: 8px;
  background-color: #FFFFFF;
  position: relative;
  color: #333;
  line-height: 1.5;
}


/*スマホ用 記事一覧カテゴリ表示*/
@media only screen and (max-width: 750px) {
.page-archive .archive-entry {
    margin-bottom: 10px; /*記事間の余白調整*/
}

.page-archive .archive-entry .categories a {
    background: #F5FAFF; /*タグ背景色*/
    color: #000000; /*文字色*/
    font-weight: bold; /*タグを太字に*/
    border: #65644e solid 1px; /*枠線*/
    border-radius: 3px; /*角丸*/
}
.page-index .entry-title{
display:none;/* タイトルを消す */
}

 /*--------------------------------------
 スマホ用タイトル表示設定＆位置設定
 --------------------------------------*/

/*アイキャッチのサムネイル*/
.page-index .entry-thumb{
  width: 150px;  /*アイキャッチサムネイル画像の横幅（要調整）*/
  height: 100px; /*アイキャッチサムネイル画像の縦幅（要調整）*/
}



.page-archive .archive-entry .categories {
    position: absolute;
    margin: 75px 0px 0px 155px;    
}
.page-index .entry-description{
	font-size:16px;imprortant;
	font-weight: bold;
}
.page-achive-category .archive-entry {
    margin-bottom: 0px; /*記事間の余白調整*/
}

/*アイキャッチのサムネイル*/
.page-achive-category .entry-thumb{
  width: 150px;  /*アイキャッチサムネイル画像の横幅（要調整）*/
  height: 100px; /*アイキャッチサムネイル画像の縦幅（要調整）*/
}

}
/****スマホ用 記事一覧カテゴリ表示ここまで*/


/*****スマホ用 カテゴリ別記事一覧カテゴリ表示*/
@media only screen and (max-width: 750px) {

/*カテゴリ名表示*/
.archive-header-category .archive-heading {
  margin: 50px 20px 10px 20px;
  padding: 5px 0 5px 10px;
  font-size: 20px !important;
  background: #4f8299;
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 0 4px 0 rgba(0,0,0,.15), 0 3px 4px 0 rgba(0,0,0,.25);
  text-align: center;
}

body.page-archive-category .archive-entry .categories a {
    background: #F5FAFF; /*タグ背景色*/
    color: #000000; /*文字色*/
    font-weight: bold; /*タグを太字に*/
    border: #65644e solid 1px; /*枠線*/
    border-radius: 3px; /*角丸*/
}
body.page-archive-category .entry-title{
display:none;/* タイトルを消す */
}
 /*--------------------------------------
 スマホ用タイトル表示設定＆位置設定
 --------------------------------------*/

/*アイキャッチのサムネイル*/
body.page-archive-category .entry-thumb{
  width: 150px;  /*アイキャッチサムネイル画像の横幅（要調整）*/
  height: 100px; /*アイキャッチサムネイル画像の縦幅（要調整）*/
}

body.page-archive-category .archive-entry .categories {
    position: absolute;
    margin: 75px 0px 0px 155px;    
}
body.page-archive-category .entry-description{
	font-size:16px;imprortant;
	font-weight: bold;
}
body.page-archive-category .archive-entry {
    margin-bottom: 0px; /*記事間の余白調整*/
}

/*アイキャッチのサムネイル*/
body.page-archive-category .entry-thumb{
  width: 150px;  /*アイキャッチサムネイル画像の横幅（要調整）*/
  height: 100px; /*アイキャッチサムネイル画像の縦幅（要調整）*/
}
}

/****スマホ用 記事一覧カテゴリ表示ここまで*/

/*1階層目*/
ul.navi-top li {
	width: auto;/*１階層目の幅*/
   	display: inline-block;
   	list-style-type: none;
}

ul.navi-top a {
   	line-height: 30px;/*メニューバーの高さ*/
   	text-align: center;/*文字位置中央寄せ*/
   	margin-top:-10px;
	padding-left:10px;
   	text-decoration: none;
   	font-weight: nomarl;
   	display: block;
   	position: relative;
   	   	}
   	   	
ul.navi-top {
	position:fixed;
	left:0;
	top:0;
   	margin: 0;
   	padding:0;
	font-size:14px;
	font-weight: bold;
	width:100%;
	text-align:center;
	z-index:50;}/*重なり順*/
	
.hatena-module-title,
.hatena-module-title::before,
.hatena-module-title::after {
  background: none;
  border: none;
}
	
 /*トップページのタグ非表示*/
.archive-entry-tags-wrapper {
display:none;
}

/*パンくずリスト*/
.breadcrumb {
    display: none;
}

.hatena-module-title:after {
    border-style: none;
    display: none;
}



/*  サイドバー見出し*/
.hatena-module-title {
    position: relative;
    text-align: center;
    background-color: #4682b4;/* 背景の色 */
    color: #ffffff!important;/* 文字の色 */
    font-weight: bold;
    margin-bottom: 15px;
    margin-left: 15px;
    margin-right: 15px;
    padding: 5px;
    border: 0px;
    font-size: 120%;
    border-radius: 16px;
}

/* 次のページリンク*/
.pager-next,.pager-prev {
   display: block;
  margin: 5px 10px 10px 20px;
  padding: 5px 5px 5px 5px;
  background: #4f8299;
  border-radius: 16px;
/*  box-shadow: 0 0 4px 0 rgba(0,0,0,.15), 0 3px 4px 0 rgba(0,0,0,.25); */
  text-align: center;
  font-size:12px;
  font-weight: bold;
}

.pager-next a,.pager-prev a{/*リンクされた文字*/
font-style:normal;
color:#ffffff!important;
}

.pager-next a:link,.pager-prev a:link {*未訪問のリンク*/
color:#ffffff!important;
text-decoration:none;
    border-bottom: none ;
}
.pager-next a:visited,.pager-prev a:visited {/*訪問後のリンク*/
color:#ffffff!important;
text-decoration:none;
    border-bottom: none ;
}

.pager-next a:hover,.pager-prev a:hover{
color:#000000!important;
text-decoration:none;
    border-bottom: none ;
}
.pager-next a:active,.pager-prev a:active {/*クリック中*/
text-decoration:none;
    color: #000000;
}

.hatena-module-title a {
    color: #ffffff;
}

/*  サイドバー見出し吹き出し削除*/
.hatena-module-title:before {
    border-style: none;
    display: none;
}

/* 表 */
.entry-content table {
width:auto; /* 大きさを自動に */
}
.entry-content table caption{ /* タイトル */
font-size: 17px; /* 文字の大きさ */
padding: 0.5px; /* 文字周りの余白 */
}
.entry-content table th { /* 見出しセル */
border: 1px solid #000000; /* 線の太さ・種類・色コード */
background: E6EFFF; /* 背景色 */
text-align: center; /* 中央揃え */
padding: 0.5em; /* 文字周りの余白 */
width:auto;/* 大きさを自動に */
white-space:nowrap; /* 文字を折り返さない */
}
.entry-content table td { /* 普通のセル */
border: 1px solid #000000; /* 線の太さ・種類・色コード */
padding: 0.5em; /* 文字周りの余白 */
width:auto;/* 大きさを自動に */
white-space:nowrap; /* 文字を折り返さない */
}
/* 表おわり */

/*次へページボタン*/

.pager {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}
.pager.autopagerize_insert_before .pager-prev {
    padding: .5em 0;
    border: 1px solid #ddd;
    top: 0.8em;
    color:  #ffffff;
    border-radius: 12px;
}

.pager.autopagerize_insert_before .pager-prev a {
    padding: .5em 1em .5em 2em;
}

.pager.autopagerize_insert_before .pager-prev:before {
    content: "<<";
    font-weight: 900;
    position: absolute;
    left: 1.7em;
    top: 0.8em;
    color:  #ffffff;
}

.pager.autopagerize_insert_before .pager-next {
    padding: .5em 0;
    border: 1px solid #ddd;
    margin-left: auto;
    top: 0.8em;
    color:  #ffffff;
    border-radius: 12px;
}

.pager.autopagerize_insert_before .pager-next a {
    padding: .5em 2em .5em 1em;
}

.pager.autopagerize_insert_before .pager-next:after {
    content: ">>";
    font-weight: 900;
    position: absolute;
    right: 1.1em;
    top: 0.8em;
    color:  #ffffff;
}

.pager.pager-permalink .pager-prev {
    margin-right: .25em;
    padding: .5em;
    border: 1px solid #ddd;
    border-radius: 3px;


}

.pager.pager-permalink .pager-next {
    margin-left: auto;
    padding: .5em;
    border: 1px solid #ddd;
    border-radius: 3px;

}

.pager-next a:hover,.pager-prev a:hover{
    color:#ffffff!important;
    text-decoration: underline;
    border-bottom: none ;
}
/*次へページおわり*/


/*アイコンフォント使用目次はじまり*/
.entry-content .table-of-contents {
    position: relative;
    margin: 0;
    padding: 4em 1.2em 1em;
    background: #fff;
    font-size: 100%;
    border-top: solid 5px #72b0ed;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    color: #72b0ed;
    box-shadow: 0 1px 5px 2px #e9e9e9;
}
.entry-content .table-of-contents::before {
    content: "目次";

    display: block;
    position: absolute;
    top: 18px;
    left: 60px;
    margin: 0;
    text-align: start;
    color: #72b0ed;
    border: none;
    font-size: 120%;
    font-weight: bold;
}
.entry-content .table-of-contents::after {
    content: "\f039";
    font-family: blogicon;
    display: block;
    font-size: 120%;
    position: absolute;
    line-height: 40px;
    top: 12px;
    left: 12px;
    width: 40px;
    height: 40px;
    text-align: center;
    vertical-align: bottom;
    border-radius: 50%;
    color: #fff;
    background: #72b0ed;
}
.entry-content .table-of-contents li {
    margin: .2em 0 1em 1.5em;
    list-style-type: decimal;
    line-height: 1.6em;
    font-weight: bold;
}
.entry-content .table-of-contents li ul {
    margin: 0 0 1em .5em;
    padding: 0;
}
.entry-content .table-of-contents li ul li {
    margin: .2em 0 0 1em;
    list-style-type: none;
    font-weight: normal;
    font-size: 100%;
}
.entry-content .table-of-contents li ul li::before {
    content: "\f006";
    font-family: blogicon;
    margin-right: .5em;
    color: #72b0ed;
}
.entry-content .table-of-contents li ul li ul li {
    font-size: 90%;
}
.entry-content .table-of-contents a {
    color: #72b0ed;
    line-height: 1.6em;
    text-decoration: underline;
}
/* 目次終わり　*/


/*記事一覧日付表示*/
.date.archive-date {
    display: block;
}
/*スマホ用 記事一覧日付表示*/
@media only screen and (max-width: 750px) {
.date.archive-date {
    display: block;
    position: absolute;
    margin: 80px 0px 0px 310px;    
}
}





/* 吹き出しの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 #163473;
/* box-shadow: 1px 1px 5px #000;*/
color: #163473;
background-color: #F5FAFF;
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 #163473;
border-bottom: 2px solid #163473;
/* box-shadow: 1px 1px 5px #000;*/
color: #163473;
background-color: #F5FAFF;
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 #163473;;
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;
}
}
.fukidashi1::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/s/sharin0gan/20210828/20210828001858.jpg);}
.fukidashi2::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/s/sharin0ga