/* <system section="theme" selected="8599973812333959601"> */
@charset "UTF-8";
/*
  Theme: UnderShirt
  Author: rokuzeudon
  Responsive: yes
  Description:
    記事一覧ページでサムネイル画像を大きく表示するはてなブログテーマです。
*/
@import url("https://fonts.googleapis.com/css?family=Poppins:400,600");
/*! 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;
}

#content-inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-flow: column;
            flex-flow: column;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

@media (min-width: 992px) {
    #content-inner {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
    }
}

.entry-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-flow: column;
            flex-flow: column;
}

.entry-header .entry-title {
    -webkit-box-ordinal-group: 1;
        -ms-flex-order: 0;
            order: 0;
}

.entry-header .date {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
}

.entry-header .categories {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
}

.entry-header .customized-header {
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
}

.entry-header .social-buttons {
    -webkit-box-ordinal-group: 5;
        -ms-flex-order: 4;
            order: 4;
}

.archive-entries {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}

.page-archive .archive-entry {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-flow: column;
            flex-flow: column;
}

.page-archive .archive-entry .entry-thumb-link {
    -webkit-box-ordinal-group: 1;
        -ms-flex-order: 0;
            order: 0;
}

.page-archive .archive-entry .archive-entry-header {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
}

.page-archive .archive-entry .archive-entry-body {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
}

.page-archive .archive-entry .categories {
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
}

.archive-entry-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-flow: column;
            flex-flow: column;
}

.archive-entry-header .entry-title {
    -webkit-box-ordinal-group: 1;
        -ms-flex-order: 0;
            order: 0;
}

.archive-entry-header .date {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
}

.pager {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

html,
body {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, Segoe UI, 'Helvetica Neue', 'Helvetica', 'Arial', 'Hiragino Kaku Gothic Pro', 'Meiryo', sans-serif;
    color: #454545;
    background-color: #f5f5f5;
    line-height: 1.6;
    letter-spacing: .08em;
}

a {
    color: #454545;
    text-decoration: none;
    -webkit-transition: .1s ease-out;
    transition: .1s ease-out;
}

a:hover {
    color: #1487bd;
    text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
    color: #333;
    line-height: 1.4;
}

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 に背景色や文字色を指定することで中にも色が反映されます
*/
#globalheader-container {
    background-color: #454545;
    color: #f5f5f5;
}

#content-inner {
    max-width: 1200px;
    margin: auto;
}

#blog-title {
    margin: auto;
    max-width: 1200px;
    padding: 3em 20px 2em;
    text-align: center;
}

@media (min-width: 992px) {
    #blog-title {
        margin: 0 auto;
        padding: 3em 40px;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        text-align: left;
    }
}

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

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

#title a {
    color: #454545;
}

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

.header-image-enable #blog-title {
    margin: 0 auto 2em;
}

@media (min-width: 768px) {
    .header-image-enable #blog-title {
        padding: 0 40px;
    }
}

.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;
    margin: 30px 0 0;
}

@media (min-width: 992px) {
    .header-image-enable #blog-title-inner {
        background-size: cover;
    }
}

.header-image-enable #blog-title-content {
    margin: auto;
    text-align: center;
}

#top-box {
    max-width: 1200px;
    margin: 0 auto 1em;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

#top-editarea {
    margin-bottom: 1em;
}

.breadcrumb {
    padding: 0 20px;
    font-size: .78rem;
}

@media (min-width: 768px) {
    .breadcrumb {
        padding: 0 40px;
    }
}

@media (min-width: 992px) {
    #wrapper {
        width: calc( 100% - 337px);
    }
}

#main {
    width: 100%;
}

#main-inner {
    max-width: 1140px;
    margin: auto;
    padding: 0 20px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

@media (min-width: 992px) {
    #main-inner {
        padding: 0 40px;
    }
}

.entry {
    position: relative;
    margin-bottom: 20px;
    padding: 20px;
    background: #fff;
}

@media (min-width: 768px) {
    .entry {
        padding: 30px 40px;
    }
}

.entry-header {
    position: relative;
    margin: 10px 0 30px;
}

.entry-header .social-buttons {
    margin: 1em 0 0;
    padding: 1em 0;
    border-top: 1px solid #ddd;
}

.date {
    font-size: .9rem;
}

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

.date a:hover {
    color: #454545;
}

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

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

.categories a {
    font-size: .86rem;
    display: inline-block;
    margin: 8px 4px 0 0;
    padding: 4px 8px 2px;
    background: #f5f5f5;
    text-decoration: none;
}

.categories a:hover {
    color: #1487bd;
}

.entry-footer .social-buttons {
    margin-bottom: 1em;
}

.entry-footer-section {
    color: #999;
    font-size: .9rem;
}

.entry-footer-section a {
    color: #999;
}

.comment-box {
    margin: 2em 0 1em;
    padding: 2em 0 1em;
    border-top: 4px solid #ddd;
}

.comment {
    list-style: none;
    margin: 0 0 15px 0;
    padding: 0;
    line-height: 1.7;
    font-size: .85rem;
}

@media (min-width: 768px) {
    .comment {
        font-size: .9rem;
    }
}

.entry-comment {
    margin: 0 0 1em;
    padding: 10px 10px 10px 70px;
    background: #f5f5f5;
    border-radius: 6px;
    position: relative;
}

.read-more-comments {
    padding: 10px 0;
    text-decoration: underline;
}

.hatena-id-icon {
    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;
    background: #f5f5f5;
    top: 0;
    -webkit-box-shadow: 1px 3px 10px #ddd;
            box-shadow: 1px 3px 10px #ddd;
}

.leave-comment-title:hover {
    top: 3px;
    -webkit-box-shadow: 0 1px 3px #ddd;
            box-shadow: 0 1px 3px #ddd;
}

@media (min-width: 992px) {
    #box2 {
        width: 377px;
    }
}

#box2-inner {
    padding: 0 20px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

@media (min-width: 768px) {
    #box2-inner {
        padding: 0 40px;
    }
}

@media (min-width: 992px) {
    #box2-inner {
        padding-left: 0;
    }
}

.hatena-module {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    margin-bottom: 3em;
    font-size: .85rem;
}

@media (min-width: 768px) {
    .hatena-module {
        font-size: .9rem;
    }
}

.hatena-module-title {
    margin: 0;
    padding: 2em 0 1em;
    border-top: 4px solid #ddd;
    font-size: 1.2rem;
    font-weight: bold;
}

.hatena-module-title a {
    color: #454545;
    text-decoration: none;
}

.hatena-module-title a:hover {
    text-decoration: underline;
}

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

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

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

.urllist-title-link {
    font-size: .9rem;
}

.urllist-category-link {
    color: #999;
    font-size: .8rem;
    padding: .1em .3em .1em 0;
}

.urllist-date-link a {
    display: block;
    margin: 0 0 .4em;
    color: #999;
}

.urllist-entry-body {
    margin-top: .3em;
    color: #999;
}

.urllist-with-thumbnails li .urllist-image {
    position: relative;
    margin: 0 1em 1em 0;
    -webkit-transition: .1s ease-out;
    transition: .1s ease-out;
    top: 0;
    -webkit-box-shadow: 1px 3px 10px #ddd;
            box-shadow: 1px 3px 10px #ddd;
}

.urllist-with-thumbnails li .urllist-image:hover {
    top: 3px;
    -webkit-box-shadow: 0 1px 3px #ddd;
            box-shadow: 0 1px 3px #ddd;
}

.urllist-categories {
    margin: .4em 0 0;
}

.profile-icon {
    float: left;
    margin: 0 10px 10px 0;
}

.id {
    display: block;
    font-weight: bold;
    margin-bottom: .5em;
}

.profile-description p {
    margin-top: 0;
}

.search-form, .search-result-form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    border: 2px solid #ddd;
    border-radius: 3px;
    width: 100%;
    padding: 4px 0 2px 6px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

.search-module-input, .search-result-input {
    -webkit-box-flex: 1;
        -ms-flex: 1 0;
            flex: 1 0;
    padding: 5px;
    color: #454545;
    background: none;
    border: none;
    outline: none;
    height: 20px;
}

.search-module-button, .search-result-button {
    width: 24px;
    height: 24px;
    margin-right: 5px;
    background: transparent url("https://cdn.blog.st-hatena.com/images/theme/search@2x.png?version=e183e82cde48b4acbdcb72082d5918") no-repeat center;
    background-size: 20px 20px;
    border: none;
    outline: none;
    color: transparent;
    overflow: hidden;
    opacity: .5;
    cursor: pointer;
}

.search-module-button:hover, .search-result-button:hover {
    opacity: .85;
}

.archive-module-calendar a {
    display: block;
    margin: 0 .2em;
    padding: .2em 0 0;
    color: #1487bd;
    font-weight: bold;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 1em;
}

.archive-module-calendar a:hover {
    color: #0f668f;
    background: white;
}

.hatena-module-category a {
    position: relative;
    padding: 0 0 0 20px;
}

.hatena-module-category a::before {
    content: ">";
    display: inline;
    position: absolute;
    top: 0;
    left: 2px;
    color: #999;
    -webkit-transition: .1s ease-out;
    transition: .1s ease-out;
}

.hatena-module-category a:hover::before {
    color: #1487bd;
    left: 6px;
}

/* 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-header-category {
    margin: 30px;
    text-align: center;
}

.archive-entry {
    position: relative;
    width: 100%;
    margin-bottom: 20px;
    padding: 20px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    background: #fff;
}

@media (min-width: 768px) {
    .archive-entry {
        width: calc(50% - 10px);
        padding: 20px;
    }
    .archive-entry:nth-child(odd) {
        margin-right: 19.5px;
    }
}

.page-archive #main-inner {
    padding: 20px;
}

@media (min-width: 768px) {
    .page-archive #main-inner {
        padding: 0 40px;
    }
}

.page-archive .entry-thumb-link {
    width: calc( 100% + 40px);
    margin: -20px 0 20px -20px;
}

@media (min-width: 768px) {
    .page-archive .entry-thumb-link {
        width: calc( 100% + 40px);
        margin: -20px 0 20px -20px;
    }
}

.page-archive .entry-thumb {
    width: 100%;
    height: 48vw;
    background-position: center;
}

@media (min-width: 768px) {
    .page-archive .entry-thumb {
        height: 24vw;
    }
}

@media (min-width: 992px) {
    .page-archive .entry-thumb {
        height: 17vw;
        max-height: 202px;
    }
}

.page-archive .categories a {
    font-size: .7em;
}

.archive-date {
    margin-bottom: .2em;
}

.archive-entry-header .entry-title {
    font-size: 1rem;
}

.archive-entry-header .date {
    font-size: .8rem;
}

.archive-entry-body .entry-description {
    margin: 0;
    font-size: .8rem;
}

.archive-entry-body .social-buttons {
    display: block;
    margin-top: .3em;
}

.page-entry #main-inner {
    padding: 0;
}

@media (min-width: 768px) {
    .page-entry #main-inner {
        padding: 0 40px;
    }
}

.page-entry .breadcrumb {
    margin-bottom: 1em;
}

#footer {
    background: #eee;
}

#footer-inner {
    margin-top: 2em;
    padding: 10px 0;
    text-align: center;
    font-size: .8rem;
    color: #999;
}

#footer-inner a {
    color: #999;
}

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

@media (min-width: 768px) {
    #footer-inner {
        max-width: 1200px;
        margin: auto;
        padding: 20px 40px;
    }
}

.entry-content img,
.entry-content video {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
    margin: 3em 0 0.8em 0;
}

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

.entry-content h4 {
    margin: 2em 0 1em 0;
    font-size: 1.4rem;
}

.entry-content h5 {
    margin: 1.6em 0 1em 0;
    font-size: 1.2rem;
}

.entry-content h6 {
    margin: 1em 0 1em 0;
    font-size: .9rem;
}

.entry-content a {
    color: #1487bd;
    text-decoration: underline;
}

.entry-content a:hover {
    color: #0f668f;
    text-decoration: none;
}

.entry-content a.keyword {
    text-decoration: none;
    border-bottom: 1px dotted #ddd;
    color: #454545;
}

.entry-content .entry-see-more {
    display: inline-block;
    padding: 10px 16px;
    color: #454545;
    text-decoration: none;
    background: #f5f5f5;
    top: 0;
    -webkit-box-shadow: 1px 3px 10px #ddd;
            box-shadow: 1px 3px 10px #ddd;
    -webkit-transition: .1s ease-out;
    transition: .1s ease-out;
}

.entry-content .entry-see-more:hover {
    top: 3px;
    -webkit-box-shadow: 0 1px 3px #ddd;
            box-shadow: 0 1px 3px #ddd;
}

.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: #fff;
}

.entry-content blockquote {
    margin: 2em 0 1.6em;
    padding: 20px;
    background: #f5f5f5;
}

.entry-content blockquote p:first-child {
    margin-top: 0;
}

.entry-content blockquote p:last-child {
    margin-bottom: 0;
}

.entry-content blockquote::before {
    content: "“";
    display: block;
    position: absolute;
    top: -52px;
    left: -12px;
    font-size: 8em;
    opacity: .1;
}

.entry-content pre,
.entry-content code {
    font-family: 'Monaco', 'Consolas', 'Courier New', Courier, monospace, sans-serif;
}

.entry-content pre {
    background: #fff;
    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: #fff;
    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 {
    margin: 0;
    padding: 1.2em;
    border: 1px solid #ddd;
    font-size: .9em;
}

.entry-content .table-of-contents::before {
    content: "目次";
    display: block;
    margin: 0 0 .8rem;
    padding: 0 0 .4rem;
    border-bottom: 1px solid #ddd;
    font-size: 1rem;
}

.entry-content .table-of-contents a {
    color: #454545;
}

.entry-content .table-of-contents li {
    margin: 0 0 0 1.4em;
    list-style-type: decimal;
}

.entry-content .table-of-contents li ul {
    margin: 0 0 1em .5em;
}

.entry-content .table-of-contents li ul li {
    margin: 4px;
}

.pager {
    margin: 2em 0;
}

.pager .pager-prev, .pager .pager-next {
    display: block;
    width: 50%;
}

.pager .pager-next {
    text-align: right;
}

.pager .pager-prev a, .pager .pager-next a {
    display: inline-block;
    width: 96%;
    padding: 20px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

div.footnote {
    padding: 1em 0;
    border-top: #ddd 1px solid;
}

#footer .guest-footer {
    margin: 20px;
    padding: 25px 30px 10px;
    max-width: 700px;
    background: #fff;
    border-radius: 6px;
}

@media (min-width: 768px) {
    #footer .guest-footer {
        margin: 30px auto;
    }
}

.page-index .pager, .page-archive .pager {
    margin: 2em 0;
}

.entry-header-menu a {
    position: absolute;
    top: 0;
    right: 0;
    padding: 6px 10px;
    background: #f5f5f5;
    top: 0;
    -webkit-box-shadow: 1px 3px 10px #ddd;
            box-shadow: 1px 3px 10px #ddd;
    -webkit-transition: .1s ease-out;
    transition: .1s ease-out;
}

.entry-header-menu a:hover {
    top: 3px;
    -webkit-box-shadow: 0 1px 3px #ddd;
            box-shadow: 0 1px 3px #ddd;
}

.entry-header-html a, .entry-footer-html a {
    color: #1487bd;
    text-decoration: underline;
}

.entry-header-html a:hover, .entry-footer-html a:hover {
    text-decoration: none;
    color: #0f668f;
}

/*# sourceMappingURL=boilerplate.css.map */
/* </system> */

/* <system section="background" selected="e9f6e8"> */
body{background:#f8fbf8;}
/* </system> */

/* アーカイブからホームページ削除 */
.archive-entry[data-uuid="17179246901350486341"] {
  display: none;
}

/* 最新記事の一番目の要素を消す */
.recent-entries-item:first-child {
  display: none;
}

/* 月間アーカイブから一番目の要素を消す */
.archive-module-year:first-child {
  display: none;
}

/* 記事のフォントサイズ変更 */
.entry-content {
  font-size:15px;
}

/* ヘッダー画像周りの余白を消す */
#blog-title {
    margin: 0 auto;
    padding: 0;
}

/* ヘッダー画像レスポンシブ対応 */
.header-image-enable #blog-title #blog-title-inner, .header-image-only #blog-title #blog-title-inner {
    height: 20vw!important;
    max-height: 200px;
    max-width: 1000px;
    background-size: cover;
    margin: 0 auto;
}

/* サイドバータイトルリセット  */
.hatena-module-title {
  position: relative;
  background-color:transparet;
  border: none;
}
.hatena-module-title::before,
.hatena-module-title::after {
  content: none;
}

/* サイドバー見出し */
.hatena-module-title {
  position: relative;
  color: #555;/* 文字色 */
  font-size: 120%;/* 文字サイズ */
  font-weight: bold;/* 太字 */
  margin-bottom: 15px;/* 下余白 */
  padding: .25em 0 .25em 0;
  font-family: 'Lucida Grande', 'segoe UI', Verdana, Arial, sans-serif;/* フォント指定 */
  border-bottom: 4px double #226214;/* 下線 */
}

/* サイドバー各タイトルにはてなアイコン設定 */
.hatena-module-title::before {
  color: #226214 ;
  content: "\f02d";
  font-family: blogicon;
  font-style: normal;
  font-weight: normal;
}
.hatena-module-profile .hatena-module-title:before {
  content: "\f00c"; /* プロフィール */
}
.hatena-module-recent-entries .hatena-module-title:before {
  content: "\f024"; /* 最新記事 */
}
.hatena-module-entries-access-ranking .hatena-module-title:before {
  content: "\f033"; /* 注目記事 */
}
.hatena-module-search-box .hatena-module-title:before {
  content: "\f01a"; /* 検索 */
}
.hatena-module-category .hatena-module-title:before {
  content: "\f039"; /* カテゴリ */
}
.hatena-module-recent-comments .hatena-module-title:before {
  content: "\f014"; /* 最近のコメント */
}
.hatena-module-links .hatena-module-title:before {
  content: "\f702"; /* リンク */
}
.hatena-module-html .hatena-module-title:before {
  content: "\f725"; /* html */
}
.hatena-module-custom-about .hatena-module-title:before {
content: "\f032"; /* このサイトについて */
}

/* サイドバーのリンクにマウスを重ねた時 */
.hatena-module-recent-entries a:hover {color:#226214;}
.hatena-module-links a:hover {color:#226214;}
.hatena-module-profile a:hover {color:#226214;}
.hatena-module-category a:hover {color:#226214;}
.hatena-module-recent-comments a:hover {color:#226214;}

/* 記事一覧のブックマークユーザー・スター・説明文を消す */
.page-archive .archive-entry .archive-entry-body {
  display: none;
}

/* 記事一覧の日付の位置 */
.archive-entry-header .date {
  position: absolute;
  bottom: 0;
  right: 5px; /* 余白の調整 */
  margin-bottom: 0;
}

/* 記事一覧のカテゴリの位置 */
.page-archive .archive-entry {
  margin-bottom: 30px; /* 記事間の余白調整 */
}
.page-archive .archive-entry .categories {
  position: absolute;
  top: -12px;
  left: 8px;
}
.page-archive .archive-entry .categories a {
  background: #fcfc71; /* タグ背景色 */
  color: #888; /* 文字色 */
  font-weight: bold; /* タグを太字に */
  border: #65644e solid 1px; /* 枠線 */
  border-radius: 12px; /* 角丸 */
}

/* 記事一覧カードの枠線をつける */
.archive-entry {
  border: solid 10px #f8fbf8;
}

/*------------------------------
UnderShirtスマホで記事を２列表示
--------------------------------*/
@media (max-width: 767px){
.archive-entry {
    width: calc( 50% - 3px);
  }
.archive-entry:nth-child(2n) {
    margin-left: 6px;
  }
.page-archive .entry-thumb {
    height: 28vw;
    border-bottom: solid 1px #65644e;/* アイキャッチ下枠線 */
  }
.page-archive .entry-thumb-link {
    width: calc( 100% + 10px);
    margin: -10px 0 5px -5px;
}
.page-archive .archive-entry {
    position: relative;
    border: #65644e solid 1px;/* 記事の外枠線 */
    border-radius: 0 2px 3px 3px;/* 記事の外枠の丸み */
    padding: 10px 5px 10px 5px;
}
.page-archive #main-inner {
    padding: 20px 6px;
}
.archive-entry-header .entry-title {
    font-size: .9rem;
}
.archive-entry-header .date {
    position: absolute;
    bottom: -2px;/* 日付の位置下から */
    right: 3px;/* 日付の位置右から */
    margin: 0;
    font-size: .7em;/* 日付文字サイズ */
}
.page-archive .archive-entry .archive-entry-body {
    display: none;/* 記事説明文、スター、ブックマークまとめて消す */
}
/* タブ風なカテゴリタグ */
.page-archive .archive-entry {
    margin-bottom: 25px; /* 記事間の余白調整 */
}
.page-archive .archive-entry .categories {
    position: absolute;
    bottom: 100%;
    left: -1px;
}
.page-archive .archive-entry .categories a {
    margin: 0;
    background: #fcfc71;/* 背景色 */
    color: #888;/* 文字色 */
    font-weight: bold;/* 文字太さ */
    border: #65644e solid 1px;/* 枠 線*/
    border-bottom: none;/* 記事との境目の枠線を消す */
    border-radius: 4px 4px 0 0;/* 外枠角丸 */
    padding: 2px 4px 0 3px;/* カテゴリタグ内余白 */
    letter-spacing: -1px;/* 文字間の調整 */
    vertical-align: bottom;/* 文字下寄せ */
}
}
@media (max-width: 767px){
.page-archive .categories a:nth-child(n+2) {
    display: none;/* 最初のカテゴリのみ表示 */
}
}

/* 目次のリンク色を変更 */
.table-of-contents li a {
    color: #226214 !important; /* 目次のリンク色 */
}
/* 目次マウスホバー時の色 */
.table-of-contents a:hover {
    color: #a6c8b2 !important; /* ホバー色 */
}

/* 目次 */
.entry-content .table-of-contents {
  border-top:2px solid #a6c8b2; /* 目次枠線太さと色 */
  border-left:2px solid #a6c8b2;
  border-right:2px solid #a6c8b2;
  border-bottom:2px solid #a6c8b2;
  background:#fff; /* 目次内背景色 */
  border-radius:10px; /* 角を丸くする */
}
.entry-content .table-of-contents::before {
  display:block;
  content: "\f039　目　次"; /* 目次のタイトル文字 */
  font-family: blogicon;
  font-size: 18px; /* 文字サイズ */
  color:#a6c8b2; /*文字の色 */
  font-weight: bold; /* 太字 */
  text-align:center; /* 中央寄せ */
  border-bottom: 2px dashed #a6c8b2; /* 目次内境界線の太さと色下線 */
  /*border-bottom: none;*/
}

/* 目次リストの先頭マーク */
.entry-content .table-of-contents li{
  list-style-type: disc; /* 大見出し：黒丸 */
  font-weight: normal; /* 文字標準 */
  color: #226214;
}
.entry-content .table-of-contents li ul li{
  list-style-type: circle; /* 中見出し：白丸 */
  font-weight: normal; /* 文字標準 */
}
.entry-content .table-of-contents li ul li ul li{
  list-style-type: disc; /* 小見出し：黒丸 */
  font-weight: normal; /* 文字標準 */
}
ul.table-of-contents a{ 
  text-decoration: none; /* リンク下線なし */
}

/* 目次の表示非表示　*/
.show-area{
  display: inline-block;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
  margin-bottom: 0;
}

/* H3見出し */
.entry-content h3 {
  padding: .4em .75em;
  background-color: #226214;
  border-radius: 4px;
  color: #fff;/* 文字色 */
  font-size: 120%;/* 文字サイズ */
}

/* H4見出し */
.entry-content h4 {
  font-size: 120%;/* 文字サイズ */
  color: #555;/* 文字色 */
  padding: 3px 15px;/* 文字回りの余白（上下 左右） */
  display: block;
  border-left: 6px solid #226214;/* 二重線左側（太さ 実線 色） */
  border-bottom: 2px solid #226214;
  position: relative;
}
h4:before {
  content: "";
  display: block;
  position: absolute;
  left: 3px;
  top: 0;
  width: 2px;/* 二重線右側の太さ（幅） */
  height: 100%;
  background: #226214;/* 二重線右側の色 */
}

/* H5見出し */
.entry-content h5 {
  font-size: 120%;/* 文字サイズ */
  color: #555;/* 文字色 */
  position: relative;
  padding: .25em 0;
  line-height: 1.4;
}
h5:after {
  content: "";
  display: block;
  height: 4px;
  background: -webkit-linear-gradient(to right, rgb(34, 98, 20), transparent);
  background: linear-gradient(to right, rgb(34, 98, 20), transparent);
}

/* 表 */
.entry-content table th {
  border: 1px; /* 罫線の太さ */
  border-style: solid; /* 罫線の形：実線 */
  border-color: #a9a9a9; /* 罫線の色 */
  background: #e0e0e0; /* 背景色 */
}
.entry-content table td {
  border: 1px; /* 罫線の太さ */
  border-style: solid; /* 罫線の形：実線 */
  border-color: #a9a9a9; /* 罫線の色 */
}
.entry-content table {
  font-size: 1em; /* ここでサイズを調整（pxまたはem, %） */
}

/* 表の枠なしにする場合 */
table.noborder,
table.noborder th,
table.noborder td{
border:none;
}

/* ページトップへ戻る固定ボタン */
#pagetop {
  position: fixed;
  right: 10px;
  bottom: 60px;
  font-size: 1.2rem;
  line-height: 1.2rem;
  background: #226214; /* 背景色 */
  color: #fff; /* 文字色 */
  padding: 10px;
  border: solid 1px;
  border-radius: 50%;
  box-shadow: 0 2px 10px -6px rgba(0,0,0,.5), 0 3px 10px -4px rgba(0,0,0,.2);
}
/* ページボトムへ進む固定ボタン */
#pagebtm {
  position: fixed;
  right: 10px;
  bottom: 10px;
  font-size: 1.2rem;
  line-height: 1.2rem;
  background: #226214; /* 背景色 */
  color: #fff; /* 文字色 */
  padding: 10px;
  border: solid 1px;
  border-radius: 50%;
  box-shadow: 0 2px 10px -6px rgba(0,0,0,.5), 0 3px 10px -4px rgba(0,0,0,.2);
}

/* リンクカラー */
.entry-content a {
  color: #226214;
}
/* リンクのホバー効果 */
.entry-content a:hover {
  color: #a6c8b2; /* ホバー時の文字色 */
  transition: 0.3s; /* ふんわり変化させる効果 */
}
/* リンクの下線なし */
a {
  text-decoration: none !important;
}

/* パンくずリストのホバー時 */
.breadcrumb a:hover {
    color: #226214; /* ホバー時の文字色 */
}

/* 記事のカテゴリーを丸くする */
.entry-categories a {
    text-decoration: none;
    background-color: #fff; /* 背景色 */
    color: #226214; /* 文字色 */
    padding: 5px 10px; /* 内側の余白 */
    border-radius: 20px; /* 角丸の半径 */
    font-size: 12px;
    margin-right: 5px;
    display: inline-block;
    margin-bottom: 5px;
    border: 1px solid #226214; /* 枠線 */
    transition: all 0.3s ease; /* ホバー時のアニメーション */
}
/* ホバー（マウスを乗せた）時 */
.entry-categories a:hover {
    background-color: #226214; /* ホバー時の背景色 */
    color: #fff; /* ホバー時の文字色 */
    text-decoration: none;
}

/* 記事タイトルのホバー設定 */
.entry-title a:hover {
    color: #226214; /* ホバー時の文字色 */
}

/* トップページのヘッダーフッターページャー削除 */
.page-index .entry-header {
  display: none;
}
.page-index .entry-footer {
  display: none;
}
.page-index .pager {
  display: none;
}

/* 記事下の名前削除 */
span.author.vcard {
  display: none;
}

/* 記事下エリアのリンク色 */
.hatena-module-body a,
.entry-footer a {
  color: #226214; /* リンク色 */
}
/* ホバー時（マウスを乗せた時）の色 */
.hatena-module-body a:hover,
.entry-footer a:hover {
  color: #a6c8b2; /* ホバー時の色 */
}

/* ページボタン削除 */
.pager {
  display:none !important;
}

/* プロフィールアイコンに枠と丸とID削除 */
.profile-icon {
 border: 2px solid #226214;
 border-radius: 50px;
}
.user-name-paren {
 display:none;
}
.user-name-hatena-id {
 display:none;
}

/* 「このブログについて」を非表示にする  */
div.profile-about {
display: none;
}

/* 記事一覧をふわっと */
.page-archive .archive-entry {
    transition: .3s; /* 変化するまでの時間 */
}
.page-archive .archive-entry:hover {
    transform: translateY(-4px); /* 上に4px移動 */
    box-shadow: 0 6px 10px rgba(0,0,0,.2); /* 影の距離　ぼかし幅　色 */
}

/* グローバルメニュートップ固定 */
ul.navi-top, ul.navi-top a {
        color:white;/* 文字の色 */
        background-color:#226214;/* メニューバーの背景色 */}
ul.navi-top a:hover {
        color:white;/* マウスオーバーの時の文字の色 */
        background-color:#00885a;/* マウスオーバーの時の背景色 */}
ul.navi-top {
	position:fixed;
	left:0;
	top:0;
   	margin: 0;
   	padding:0;
	font-size:14px;
	width:100%;
	text-align:center;
	z-index:50;}/* 重なり順 */
/* 1階層目 */
ul.navi-top li {
	width: 180px;/* 1階層目の幅 */
   	display: inline-block;
   	list-style-type: none;
   	position: relative;}
ul.navi-top a {
   	line-height: 36px;/* メニューバーの高さ */
   	text-align: center;/* 文字位置中央寄せ */
	padding-left:10px;
   	text-decoration: none;
   	font-weight: nomarl;
   	display: block;}
/* 2階層目 */
ul.navi-top ul {
       display: none;
       margin:0px;
       padding:0px; 
       position: absolute;}
ul.navi-top ul a{
       width:170px;/* 2階層目の幅 */}
ul.navi-top li:hover ul {
       display: block;}

/* グローバルメニューヘッダー下とスマホ */
/*
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用ナビゲーション */
.drawer_menu .drawer_nav_wrapper {
	transform: translate(0);
	width: 100%;
	height: 40px;
	/* PC用メニュー高さ */
	position: relative;
	top: auto;
	right: auto;
	z-index: 100;
	background-color: #f8fbf8;
	/* PC用メニュー背景色 */
}
.drawer_menu .drawer_nav {
	max-width: 1000px;
	/* コンテンツ幅に合わせる */
	padding: 0;
	margin: 0 auto;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	list-style-type: none;
}
.drawer_menu .drawer_nav li {
	font-size: 90%;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 40px;
	/* PC用メニュー高さ */
	line-height: 40px;
	/* PC用メニュー高さ */
	background-color: #f8fbf8;
	/* PC用メニューボタン背景色 */
	text-align: center;
	list-style-type: none;
}
.drawer_menu .drawer_nav li a:hover {
	background-color: #f8fbf8;
	/* PC用メニューボタンマウスオーバー背景色 */
	color: #226214;
	list-style-type: none;
    font-weight: bold;
}
.drawer_menu .drawer_nav li a {
	color: #555;
	/* PC用メニューボタン文字色 */
}
/* 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: 40px;
		/* PC用メニューの高さに合わせる */
		transition: all .3s;
	}
	.drawer_menu .drawer_nav li:hover ul.second-level li {
		width: 200px;
		/* ドロップダウンメニューボタン横幅 */
		height: 40px;
		/* Pドロップダウンメニューボタン高さ */
		text-align: center;
	}
	.drawer_menu .drawer_nav li:hover ul.second-level li a {
		display: block;
		background-color: #f8fbf8;
		/* ドロップダウンメニューの文字の背景色 */
		color: #555;
		/* ドロップダウンメニューの文字色 */
		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: #f8fbf8;
		/* ドロップダウンメニューマウスホバー背景色 */
		color: #226214;
	}
	.touch-btn {
		color: #fff;
		margin-left: 5px;
	}
}
/*+++ Default Button Color +++*/
.drawer_menu .drawer_button {
	color: #fff;
	/* ハンバーガーメニュー文字色 */
	display: none;
}
.drawer_menu .drawer_button .drawer_bar {
	background-color: #fff;
	/* ハンバーガーメニュー三本線の色 */
}
/* 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);
		display: none;
		top: 0;
		left: 0;
	}
	.drawer_menu .drawer_button {
		display: block;
		background-color: #555;
		color: #fff;
		border: none;
		padding: 5px;
		width: 50px;
		letter-spacing: 0.1em;
		cursor: pointer;
		position: fixed;
		top: 120px;
		right: 10px;
		z-index: 1001;
		text-align: center;
		outline: none;
	}
	.drawer_menu .drawer_button.active .drawer_bar {
		width: 40px;
	}
	.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: 8px 2px;
		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: 250px;
		height: 100%;
		transition: all 0.2s;
		transform: translate(250px);
		position: fixed;
		top: 1;
		right: 0;
		z-index: 1000;
		background-color: #FFF;
		/* ドロワーメニュー内背景色 */
		overflow-x: hidden;
		overflow-y: auto;
	}
	.drawer_menu .drawer_nav {
		display: block;
		position: relative;
		margin-top: 40px;
	}
	.drawer_menu .drawer_nav li {
		background-color: #fff;
		height: auto;
		line-height: 50px;
		/*  ドロワーメニューリスト項目高さ */
		position: relative;
		border-bottom: 1px solid #eee;
	}
	.drawer_menu .drawer_nav li a {
		background-color: #fff;
		/* ドロワーメニューリスト背景色 */
		color: #555;
		/* ドロワーメニューリスト文字色 */
		display: block;
		text-align: left;
		padding-left: 20px;
	}
	/* スマートフォン2階層目 */
	.drawer_menu .drawer_nav li:hover ul.second-level {
		display: block;
	}
	.drawer_menu .drawer_nav li ul.second-level {
		display: none;
		position: relative;
		padding: 0;
		z-index: 1001;
	}
	.drawer_menu .drawer_nav li ul.second-level li a {
		padding-left: 40px;
	}
	.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(-250px);
		right: auto;
		left: 0;
	}
	.drawer_menu.left .drawer_nav_wrapper.open {
		transform: translate(0);
	}
	.pc-hidden {
		text-align: center;
	}
	.touch-btn {
		color: #555;
		position: absolute;
		top: .25rem;
		right: 2%;
		display: block;
		z-index: 10;
		width: 50px;
		height: 50px;
		text-align: center;
		vertical-align: middle;
	}
}
/* ウィジェットタイトル */
.drawer-title {
	text-align: center;
	width: 100%;
	height: 50px;
	line-height: 50px;
	background-color: #555;
	/* ドロワーメニュー内タイトルライン背景色 */
	color: #fff;
}

/* スマホ以外 */
@media(min-width: 768px){
/* 上部メニュー固定の時の内部リンクのズレ解消 */
@-webkit-keyframes modify{
      0% { padding-top: 50px; margin-top: -50px; }
    100% { padding-top: 0; margin-top: 0; }
}
@keyframes  modify{
      0% { padding-top: 50px; margin-top: -50px; }
    100% { padding-top: 0; margin-top: 0; }
}
:target {
    -webkit-animation: modify 0.1s;
    animation: modify 0.1s;}
/* スマホ以外→終わり */ }

/* スマホの時は上部グローバルメニューは表示しない */
@media(max-width: 767px){
    .navi-top{display:none; }
}

/* アコーディオンボタン枠なし */
.ac-box{
width: auto;
margin: 30px auto 5px;
}
.ac-box label{
max-width: 385px;/* ボタンの幅 */
font-size: 16px;/* 文字の大きさ */
font-weight: bold;/* 文字の太さ */
text-align: center;
background: #fff;/* ラベルの色 */
margin: auto;
line-height: 20px;/* ボタンの高さ */
position: relative;
display: block;
height: 20px;/* ボタンの高さ */
border-radius: 10px;/* ボタンの角の丸み */
cursor: pointer;
color: #226214;/* ラベルの文字の色 */
transition: all 0.5s;
}
.ac-box label:hover{
background: #fff;/* ラベルにマウスを乗せた時の色 */
-webkit-transition: all .3s;
transition: all .3s;
}
.ac-box input{
display: none;
}
.ac-box label:after{
color: #226214;/* アイコンの色 */
content: "\f008";
font-family: blogicon;
}
.ac-box input:checked ~ label::after {
color: #226214;/* アイコンの色 */
content: "\f007";
font-family: blogicon;
}
.ac-box div{
height: 0px;
padding: 0px;
overflow: hidden;
opacity: 0;
transition: 0.5s;
}
.ac-box input:checked ~ div{
height: auto;
padding: 5px;
background: #fff;/* クリック後の背景 */
opacity: 1;
}
.ac-box div p{
color: #333;/* クリック後の文字の色 */
line-height: 23px;/* クリック後の行間 */
font-size: 14px;/* クリック後の文字の大きさ */
padding: 20px;
text-align: justify;
}
.ac-small p{
margin-bottom: 0px;
}

/* アコーディオンボタン枠あり */
.ac-box1{
width: auto;
margin: 30px auto 5px;
}
.ac-box1 label{
max-width: 385px;/* ボタンの幅 */
font-size: 16px;/* 文字の大きさ */
font-weight: bold;/* 文字の太さ */
text-align: center;
background: #226214;/* ラベルの色 */
margin: auto;
line-height: 50px;/* ボタンの高さ */
position: relative;
display: block;
height: 50px;/* ボタンの高さ */
border-radius: 8px;/* ボタンの角の丸み */
cursor: pointer;
color: #fff;/* ラベルの文字の色 */
transition: all 0.5s;
}
.ac-box1 label:hover{
background: #00885a;/* ラベルにマウスを乗せた時の色 */
-webkit-transition: all .3s;
transition: all .3s;
}
.ac-box1 input{
display: none;
}
.ac-box1 label:after{
color: #fff;/*アイコンの色*/
content: "\f008";
font-family: blogicon;
}
.ac-box1 input:checked ~ label::after {
color: #fff;/*アイコンの色*/
content: "\f007";
font-family: blogicon;
}
.ac-box1 div{
height: 0px;
padding: 0px;
overflow: hidden;
opacity: 0;
transition: 0.5s;
}
.ac-box1 input:checked ~ div{
height: auto;
padding: 5px;
background: #fff;/*クリック後の背景*/
opacity: 1;
}
.ac-box1 div p{
color: #333;/*クリック後の文字の色*/
line-height: 23px;/*クリック後の行間*/
font-size: 14px;/*クリック後の文字の大きさ*/
padding: 20px;
text-align: justify;
}
.ac-small p{
margin-bottom: 0px;
}