/* <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=4d776f2b7a248fe0227f52f5e9d786") 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="fff"> */
body{background:#fff;}
/* </system> */


/*アプリーチ
 * Copyright (c) NomadWorks
 * Design: NomadCode
 * https://www.code.nomad.inc/
 */

.appreach {
  text-align: left;
  box-shadow: 0px 0px 6px #00000029;
  background: #FFF;
  max-width: 100% !important;
  width: 100% !important;
  padding: 25px;
  margin: 20px auto;
  overflow: hidden;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.appreach:after {
  content: "";
  display: block;
  clear: both;
}

.appreach p {
  line-height: 1.8em !important;
  margin: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  padding-bottom: 0 !important;
}

.appreach a:after {
  display: none;
}

.appreach__icon {
  float: left;
  border-radius: 10%;
  overflow: hidden;
  margin: 0% 3% 0% 0% !important;
  width: 22.5% !important;
  height: auto !important;
  max-width: 100px !important;
}

.appreach__detail {
  display: inline-block;
  line-height: 1.5;
  width: 72%;
}

.appreach__detail:after {
  content: "";
  display: block;
  clear: both;
}

.appreach__name {
  font-size: 15px !important;
  color: #323232 !important;
  line-height: 1.5em !important;
  font-weight: bold !important;
  max-height: 3em;
  overflow: hidden;
}

.appreach__detail .appreach__name {
  line-height: 1.3em !important;
  padding-bottom: 5px !important;
}

.appreach__detail .appreach__info .appreach__posted {
  line-height: 1.3em !important;
  font-size: .8em !important;
}

.appreach__info {
  font-size: 12px !important;
  color: #929292 !important;
}

.appreach__posted {
  font-size: .9em !important;
}

.appreach__developper,
.appreach__price {
  margin-right: 0.5em;
}

.appreach__posted a {
  margin-left: 0.8em;
  color: #55A8DC !important;
}

.appreach__links {
  float: left;
  margin-top: 8px;
  white-space: nowrap;
}

.appreach__aslink img {
  -webkit-backface-visibility: hidden;
  margin-right: 10px;
}

.appreach__gplink img {
  -webkit-backface-visibility: hidden;
   height: 40px;
}

@media(max-width:460px) {
  .appreach {
    overflow: hidden;
    max-width: 320px !important;
  }

  .appreach__detail .appreach__name {
    line-height: 1.3em !important;
    padding-bottom: 5px !important;
    font-size: .7em !important;
  }

  .appreach__posted {
    font-size: .7em !important;
  }

  .appreach__icon {
    width: 25% !important;
  }

  .appreach__info {
    font-size: 10px !important;
  }

  .appreach__links {
    margin: auto;
    margin-top: 10px;
    float: left;
    padding-top: 5px;
    width: 100%;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  .appreach__aslink img,
  .appreach__gplink img {
    margin-right: 2px;
    height: 30px;
  }

}


table {
  width: 100%;
}

.my-btn {
  text-align: center;
}

.my-btn a {
  display: inline-block;
  width: 70%;
  margin: 20px auto;
  padding: 10px;
  border-radius: 5px;
  text-align: center;
  color: #fff!important;
  text-decoration: none;
  font-size: 15px;
  line-height: 27px;
  background: midnightblue;
  border-bottom: solid 3px #0b0b33; /*ボタンの下の影の色*/
  position: relative;
  overflow: hidden;
}
.my-btn :hover {
    opacity: 0.7;
    transition-duration: 0.5s;
}
/* ボタンを凹ませる */
.my-btn a:active {
  transform: translateY(4px); /*下に動く*/
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2); /*影を小さく*/
  border-bottom: none;
}
/* ボタンをキラッとさせる */
.my-btn a:before {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: -100%;
  background-image: linear-gradient(130deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 100) 81%, rgba(255, 255, 255, 0) 100%);
  animation: shine 3s infinite; /* inifiniteによりずっと続ける */
}
@keyframes shine {
  33% {
    left: 100%;
  }
  100% {
    left: 100%;
  }
}
/* 767px（iPad）以下 */
@media (max-width: 767px) {
  .my-btn a {
    width: 80%;
  }
}


/* 点滅 */
.blink {
	animation: blinking 1s ease-in-out infinite alternate;
}
 
@keyframes blinking {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

/* ページふわっと */
  body {
    -webkit-animation: fadeIn 1.5s ease 0s 1 normal;
    animation: fadeIn 1.5s ease 0s 1 normal;
  }

  @keyframes fadeIn {
      0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
      100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

  @-webkit-keyframes fadeIn {
      0% { opacity: 0; -webkit-transform: translateY(-20px); }
      100% { opacity: 1; -webkit-transform: translateY(0); }
}

/* テーブルカスタマイズここから */
table.nomad_table {
  max-width: 900px !important;
  width: 100%;
  margin: 15px auto !important;
  background: #FFF;
  text-align: center !important;
  font-size: 14px !important;
  display: block !important;
  overflow-x: scroll !important;
  overflow-y: hidden !important;
  white-space: nowrap !important;
  -webkit-overflow-scrolling: touch !important;
  color: #333 !important;
  border: none !important;
  border-collapse: collapse !important;
}

table.nomad_table a {
  color: #333 !important;
  text-decoration: none !important;
  transition: .2s;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1.25em !important;
  font-size: 13px !important;
  display: block !important;
  position: relative !important;
  text-align: center !important;
}

table.nomad_table a:hover {
  opacity: .8;
}

table.nomad_table tr td,
table.nomad_table tr th {
  padding: 1.5em 2.2em !important;
  line-height: 1.25em !important;
  font-size: 14px !important;
  border: none !important;
  position: relative !important;
  text-align: center !important;
  vertical-align: middle !important;
}

table.nomad_table tr td {
  font-size: 13px !important;
}

table.nomad_table tr td:first-child {
  position: sticky !important;
  left: 0 !important;
  background: #FFF !important;
  z-index: 2;
}

table.nomad_table tr th:first-child {
  position: sticky !important;
  left: 0 !important;
  z-index: 2;
}

table.nomad_table tr td:nth-child(even) {
  background: #FAFAFA !important;
}

table.nomad_table tr th {
  padding: .8em 2em !important;
  background: #505050 !important;
  color: #fff !important;
  width: 100% !important;
  position: relative !important;
}

table.nomad_table tr th:nth-child(even):after {
  content: "";
  display: block !important;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .05);
  position: absolute;
}

table.nomad_table tr:nth-child(even) td:nth-child(even):after {
  content: "";
  display: block !important;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .03);
  position: absolute;
}

table.nomad_table::-webkit-scrollbar {
  width: 10px !important;
  height: 10px !important;
}

table.nomad_table::-webkit-scrollbar-track {
  background: #FAFAFA !important;
}

table.nomad_table::-webkit-scrollbar-thumb {
  border-radius: 5px !important;
  background: #505050 !important;
}

@media(max-width:480px) {

  table.nomad_table tr td,
  table.nomad_table tr th {
    padding: 2em !important;
    font-size: 12px !important;
  }

table.nomad_table tr th {
    padding: .8em 2em !important;
    font-size: 13px !important;
  }

table.nomad_table a {
    font-size: 10px !important;
  }

}
/* テーブルカスタマイズここまで */

/* ヘッダー下カルーセル */
.carousel {
width:93%;
max-width:1000px /* カルーセル最大幅 */
display:block;
margin:2em auto;
padding:1em;
background:white /*カルセール背景色*/;}

.carousel-cell {
width: 19%;
height: auto;
margin-top:0.5em;
margin-right:1.2vw;
margin-bottom:0.5em;
border-radius:0px;
counter-increment: carousel-cell;
overflow: hidden;
transition-duration: 0s;}

.cimage:hover{
opacity: 0.6;
transition-duration: 0.5s;}

.ccat{
display:block;
position:absolute;
top:.5vw;
left:.5vw;
z-index:2;
padding:.3vw;
font-size:.6em;
font-weight:800;
letter-spacing:.2vw;
text-decoration:none;
border-radius:0em;
color:black /* カテゴリー文字色 */;
background:white /* カテゴリー背景色 */;
opacity:.5;}

.ccat:hover{
background:black /* マウス重ねた時のカテゴリー背景色 */;
color: white;
transition-duration: 0.3s;}

.cimage {
position: relative;
width:100%;
height:auto;
border-radius:0px;}

.headline{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
flex: 1 0 auto;
padding:0 0.5vw;
font-size: .8em /* 記事タイトル文字サイズ */;
font-weight: 400;
line-height: 1.5;
text-align: center;
text-decoration:none;
text-overflow: ellipsis;}

.flickity-page-dots{
display:flex;
justify-content: center;/* 中央配置 */}

@media screen and (max-width:480px){ 
.carousel-cell {
width:50%;
margin-right:1em;}
.ccat{font-size:.5em;}
.headline{font-size:.7em;}}

.page-entry .carousel{
      display: none; /*記事ページカルーセル非表示*/
    }
.page-archive-category .carousel{
      display: none; /*カテゴリページカルーセル非表示*/
    }
.page-static_page .carousel{
      display: none; /*固定ページカルーセル非表示*/
    }
.page-about .carousel{
      display: none; /*アバウトページカルーセル非表示*/
    }

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

/* スクロールアニメーションここから */
.scroll {
  display: inline-block;
  padding-top: 70px;
  padding-bottom: 20px;
  position: relative;
}
.scroll{
  display:flex;
  justify-content: center;/* 中央配置 */}
.scroll::before {
  animation: scroll 3.5s infinite;
  font-family: "FontAwesome";
  content: "\f103";/*アイコンの種類*/
  font-size:2em; /*2倍にする*/
  color:#555; /*薄い黒色にする*/
  display: inline-block;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  width: 20px;
  height: 20px;
}
.page-entry .scroll{
      display: none; /*記事ページスクロールアニメーション非表示*/
    }
.page-archive-category .scroll{
      display: none; /*カテゴリページスクロールアニメーション非表示*/
    }
.page-static_page .scroll{
      display: none; /*固定ページスクロールアニメーション非表示*/
    }
.page-about .scroll{
      display: none; /*アバウトページスクロールアニメーション非表示*/
    }
@keyframes scroll {
  0% {
    transform: translateY(0px);
  }
  80% {
    transform: translateY(30px);
  }
  0%, 80%, 100% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
}
/* スクロールアニメーションここまで*/

/*上に戻るボタンここから*/
#page_top{
   width: 50px;
   height: 50px;
   position: fixed;
   right: 20px;
   bottom: 15px;
   background: #fff;
   background-color:rgba(255,255,255,0.5);
   border-radius: 50%;
   border: 1px solid #555;
   display:none;
}
#page_top a{
   position: relative;
   display: block;
   width: 50px;
   height: 50px;
   text-decoration: none;
}
#page_top a::before{
   font-family: "FontAwesome";
   font-weight: 900;
   content: '\f106';
   font-size: 18px;
   color: #555; /* 初期値でアイコンに色を追加 */
   position: absolute;
   width: 20px;
   height: 20px;
   top: -26px;
   bottom: 0;
   right: 0;
   left: 0;
   margin: auto;
   text-align: center;
}
#page_top a::after{
   content: 'TOP';
   font-size: 8px;
   color: #555; /* 初期値で文字に色を追加 */
   position: absolute;
   top: 26px;
   bottom: 0;
   right: 0;
   left: 0;
   margin: auto;
   text-align: center;
}

/* ホバー時に色を反転 */
#page_top:hover {
   background: #555;
   border: 1px solid #fff;
}
#page_top:hover a::before {
   color: #fff;
}
#page_top:hover a::after {
   color: #fff;
}
/*上に戻るボタンここまで*/

/* PC用ナビゲーション */

.drawer_menu .drawer_nav_wrapper {
	transform: translate(0);
	width: 100%;
	height: 45px;
	/* PC用メニュー高さ */
	position: relative;
	top: auto;
	right: auto;
	z-index: 100;
	background-color: #fff;
	/* 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: 15px;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 50px;
	/* PC用メニュー高さ */
	line-height: 50px;
	/* PC用メニュー高さ */
	background-color: #fff;
	/* PC用メニューボタン背景色 */
	text-align: center;
	list-style-type: none;
}

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

.drawer_menu .drawer_nav li a {
	color: #333;
	/* 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: 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;
		/* ドロップダウンメニューマウスホバー背景色 */
	}

	.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: #333;
	/* ハンバーガーメニュー三本線の色 */
}

/* 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: rgba(255, 255, 255, 0.50);
		color: #333;
		border: none;
		padding: 5px;
		width: 50px;
		letter-spacing: 0.1em;
		cursor: pointer;
		position: fixed;
		top: 10px;
		right: 20px;
		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: 320px;
		height: 100%;
		transition: all 0.2s;
		transform: translate(320px);
		position: fixed;
		top: 0;
		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;
	}
	
	.pc-hidden2 {
		text-align: left;
		font-size: 13px;
		padding: 20px;
	}

	.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;
}

/* フォローボタン */
.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 .youtube {
	color: #D93177;
	background-color: transparent;
}

.follow-buttons .blogicon-youtube {
	background: #DA1725;
	color: #ffffff;
}

.follow-buttons .blogicon-youtube: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;
}

/*左右に動くテキストここから*/
.animation{
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 1.5s;
  width: 640px;
}

.keyframe2{
  animation-name: anim_h;
}

@keyframes anim_h {
  0% {
    transform: translate(0px, 0);
  }
  100% {
    transform: translate(30px, 0);
  }
}
/*左右に動くテキストここまで*/

/* タイトルのフォント変更 */
#blog-title{
font-family: '游ゴシック', 'ヒラギノ角ゴ ProN W3', 'MS Pゴシック', Arial, sans-serif !important;
text-align: center;
}

/* 記事タイトルのフォントサイズ */
.entry-title {
    font-size: 19px;
}

/* 見出しのフォントサイズ */
h3 {
    font-size: 19px !important;
}

h4 {
    font-size: 18px !important;
}

h5 {
    font-size: 17px !important;
}

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

/* 記事の行間 */
.entry-content {
line-height : 180%;
}

/* 全体 */
body {
font-family: '游ゴシック', 'ヒラギノ角ゴ ProN W3', 'MS Pゴシック', Arial, sans-serif !important;
}

/* 記事のフォント変更 */
.entry-content {
font-family: '游ゴシック', 'ヒラギノ角ゴ ProN W3', 'MS Pゴシック', Arial, sans-serif !important;
}

/* 画像に影をつける */
.hatena-fotolife{
-moz-box-shadow: 1px 3px 7px 2px #C5C5C5;
-webkit-box-shadow: 1px 3px 7px 2px #C5C5C5;
box-shadow: 1px 3px 7px 2px #C5C5C5;
}

/*目次カスタマイズ*/
.entry-content .table-of-contents {
    position: relative;
    margin: 0;
    padding: 4em 1.2em 1em;
    background: #fff;
    font-size: 100%;
    border-top: solid 5px #555;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    color: #333;
    box-shadow: 0 1px 5px 2px #e9e9e9;
}
.entry-content .table-of-contents::before {
    content: "Contents";
    display: block;
    position: absolute;
    top: 18px;
    left: 50px;
    margin: 0;
    text-align: start;
    color: #333;
    border: none;
    font-size: 120%;
    font-weight: normal;
}
.entry-content .table-of-contents::after {
    content: "\f03a";
    font-family: FontAwesome;
    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: #333;
    font-weight: normal;
}
.entry-content .table-of-contents li {
    margin: .2em 0 1em 1.5em;
    list-style-type: decimal;
    line-height: 1.6em;
    font-weight: normal;
}
.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: "\f105";
    font-family: FontAwesome;
    margin-right: .5em;
    color: #333;
}
.entry-content .table-of-contents li ul li ul li {
    font-size: 90%;
}
.entry-content .table-of-contents a {
    color: #333;
    line-height: 1.6em;
    text-decoration: none;
}

/*  フッターメニューボックス  */
/* bottom-editarea */
#bottom-editarea {
	background-color: #f5f5f5;
	margin: 0;
	padding: 0;
}
#footer_menu {
	width: 1000px;  /*contentの幅と合わせる*/
	margin: 0 auto;
	padding: 40px 0 0 0;
	font-size: 90%;
}
#footer_menu h6 {
	color: #222;
	font-size: 15px;
	margin: 0 0 20px 0;
}
#footer_menu p {
	color: #222;
	font-size: 14px;
	margin: 1em 0;
}
#footer_menu ul {
	text-align: left;
	font-size: 14px;
	color: #222;
	float: left;
	list-style: none;
	margin: 0;
	padding: 0;
}
#footer_menu ul li {
	line-height: 1.1em;
	margin: 0 0 25px 0;
	padding: 0;
}
#footer_menu ul li a {
	color: #222;
}
#footer_menu a:hover {
    color: #1a0dab;
    text-decoration:underline;
}
#footer_menu .footer_box01 {
	width: 300px;
	float: left;
	margin: 20px 0 40px 30px;
	margin-bottom:40px;
	padding: 0;
	overflow: hidden;
}
#footer_menu .footer_box01 img {
	max-width: 300px;
	margin: 0 0 20px 0;
	padding: 0;
}
#footer_menu .footer_box02 {
	width: 300px;
	float: left;
	margin: 20px 0 40px 30px;
	padding: 0;
	overflow: hidden;
}
#footer_menu .footer_box03 {
	width: 300px;
	float: left;
	margin: 20px 0 40px 30px;
	padding: 0;
	overflow: hidden;
}
#footer_menu .footer_clear {
	clear: both;
}

/* Media Queries - Small Tablet & Smartphone */
@media (max-width: 919px) {
#footer_menu {
    display: inline;
  }
}

/*  フッター  */
#footer {
    padding: 20px;
    text-align: center;
    background: #222;/* 背景色 */
    font-size: 12px;
    color:#fff;/* 文字の色 */
}
.footer-links ul {
    list-style: none;
    padding: 0;
}
.footer-links ul li {
    display: inline-block;
    padding: 0 6px;
    font-size: 12px;
    box-sizing: border-box;
}
.footer-links ul li a {
    text-decoration: none;
    color: #fff;
}

.footer-links ul li a:hover {
    color: deeppink;
    text-decoration:underline;
}
.footer-links ul li a{
    color: #ffffff;
}
.copyright {
    font-size: 11px;
}

/*サイドバー目次スクロールバーここから*/
#stoc-module{
	overflow-y:scroll;/*縦方向スクロールを設置*/
	max-height: calc(100vh - 150px); /* 目次の高さ上限*/
}

/*スクロールバー調整*/
#stoc-module::-webkit-scrollbar {
	width: 10px;/*幅*/
}
#stoc-module::-webkit-scrollbar-track {
	background: transparent;/*背景色を消す*/
}
#stoc-module::-webkit-scrollbar-thumb {
	background: #ccc;/*可動部のみ背景色を付ける*/
	border-radius: 10px;
}
/*サイドバー目次スクロールバーここまで*/

/*  サイドバー追尾する目次 スマホ非表示 */
@media screen and (max-width:768px){
     #box2-inner .hatena-module:last-child {display: none;}
}

/*  サイドバー固定 */
#box2 {
  display: flex;
}
.hatena-module:last-of-type {
  position: -webkit-sticky;/*safari対応*/
  position: sticky;
  top: 10px;/*ここで上からの距離を調整*/
}

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

/* ヘッダー画像の比率の調整↓ */
.header-image-only #blog-title #blog-title-inner {
position: relative;
background-size: cover;
height: auto;
}
.header-image-only #blog-title #blog-title-inner:before {
display: block;
content: "";
width: 100%;
padding-top: 20%;
}
.header-image-only #blog-title #blog-title-content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

/* ヘッダー上下の余白を取る */
#blog-title {
margin: 0 auto;
padding: 0;
}
/* ヘッダー画像の比率の調整↑ */

/* テーブルに横スクロールバーを表示 */
@media (max-width: 760px) {
    .table-scroll {
        overflow-x: scroll;
    }
}

/* レビュー評価用スター */
.star-rating2 th{font-weight:normal;vertical-align:middle;font-size:0.9rem;padding:3px 4px 0 4px;}
.star-rating2 td{font-family:blogicon;font-size:1.5em;-webkit-background-clip:text!important;-webkit-text-fill-color: transparent!important;}

/* 吹き出しの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 #999;
box-shadow: 1px 1px 5px #aaa;
background-color: #fff;
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 #999;
border-bottom: 2px solid #999;
background-color: #fff;
z-index: 2;
}
.entry-content .l-fuki::before {
right: -7px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.entry-content .r-fuki::before {
left: -7px;
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
.entry-content .l-fuki::after,
.entry-content .r-fuki::after {
position: absolute;
content: "";
width: 80px;
height: 80px;
top: -10px;
border-radius: 40px;
border: 3px solid #fff;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
box-shadow: 1px 1px 5px #aaa;
}
.entry-content .l-fuki::after {
right: -110px;
}
.entry-content .r-fuki::after {
left: -110px;
}
@media screen and (max-width: 620px) {
.entry-content .l-fuki,
.entry-content .r-fuki {
width: 70%
}
.entry-content .l-fuki {
margin-right: 30%;
}
.entry-content .r-fuki {
margin-left: 30%;
}
}
@media screen and (max-width: 478px) {
.entry-content .l-fuki::after,
.entry-content .r-fuki::after {
width: 60px;
height: 60px;
border-radius: 30px;
}
.entry-content .l-fuki::after {
right: -84px;
}
.entry-content .r-fuki::after {
left: -84px;
}
}
.fukidashi1::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/n/nabeyasukun/20200603/20200603140241.png);}
.fukidashi2::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/n/nabeyasukun/20201026/20201026143509.png);}

/* コメントタイプ吹き出し */
.balloon1 {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #fff;
  font-size: 16px;
  background: midnightblue;
}

.balloon1:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 20%;
  margin-left: -15px;
  border: 10px solid transparent;
  border-top: 10px solid midnightblue;
}

.balloon1 p {
  margin: 0;
  padding: 0;
}

/* コメントタイプ吹き出し2 */
.balloon2 {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #333; /* 文字色を見やすい色に変更 */
  font-size: 16px;
  background: #d3d3d3; /* 背景色を薄いグレーに変更 */
}

.balloon2:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 20%;
  margin-left: -15px;
  border: 10px solid transparent;
  border-top: 10px solid #d3d3d3; /* 背景色を薄いグレーに変更 */
}

.balloon2 p {
  margin: 0;
  padding: 0;
}

/* 見出し */
h3 {
  border-bottom: solid 2px lightgray;
  position: relative;
}

h3:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 2px #333;
  bottom: -2px;
  width: 25%;
}

h4 {
  position: relative;
  padding-left: 1.2em;/*アイコン分のスペース*/
  line-height: 1.4;
}

h4:before {
  font-family: "FontAwesome";
  content: "\f00c";/*アイコンのユニコード*/
  position: absolute;/*絶対位置*/
  font-size: 1em;/*サイズ*/
  left: 0;/*アイコンの位置*/
  top: 0;/*アイコンの位置*/
  color: #333; /*アイコン色*/
}

/*引用デザイン--ここから↓↓--*/
.entry-content blockquote {
    position: relative;
    padding: 16px;
    box-sizing: border-box;
    font-style: normal;
    color: #585858;
    background: #fff;
    border: solid 2px #4b4b4b;
}

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

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

.entry-content blockquote::before {
    display: inline-block;
    position: absolute;
    top: -20px;
    left: -20px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%;
    text-align: center;
    content: "\f10d";
    font-family: FontAwesome;
    background: #4b4b4b;
    color: #FFF;
    font-size: 22px;
    opacity: 100%;
    font-weight: 900;
}

.entry-content blockquote::after {
    display: inline-block;
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%;
    text-align: center;
    content: "\f10e";
    font-family: FontAwesome;
    background: #4b4b4b;
    color: #FFF;
    font-size: 22px;
    opacity: 100%;
}

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

.entry-content blockquote cite {
    display: block;
    text-align: right;
    color: #888888;
    font-size: 0.9em;
}
/*引用デザイン--ここまで↑↑--*/

/*サイドバー、タイトル、アイコン*/	.hatena-module-title:before {	font-family:FontAwesome;	font-size:1.5rem; 	font-weight:normal;	}	/*以下、contentの中を自分の選ぶアイコンに変える*/	.hatena-module-profile .hatena-module-title:before {	content: '\f007'; /*プロフィール*/	}	.hatena-module-search-box .hatena-module-title:before {	content: '\f002'; /*検索*/	} 	.hatena-module-recent-entries .hatena-module-title:before {	content: '\f040'; /*最新記事*/	}	.hatena-module-entries-access-ranking .hatena-module-title:before {	content: '\f201'; /*注目記事*/	}	.hatena-module-category .hatena-module-title:before {	content: '\f07c'; /*カテゴリー*/	}	.hatena-module-related-entries .hatena-module-title:before {	content: '\f0ca'; /*関連記事*/	}	.hatena-module-archive .hatena-module-title:before {	content: '\f073'; /*月別アーカイブ*/	} 	.hatena-module-html .hatena-module-title:before {	content: '\f0c1'; /*HTML編集*/	}


/*自分で設定したフッターとページ下の余白を消す*/
#container {
  margin-bottom: 0;
}

/*ボックスデザイン--ここから↓↓--*/
.box1 {
    padding: 1.2em 1em;
    margin: 2em 0;
    font-weight: normal;
    border: solid 2px #4b4b4b;
}
.box1 p {
    margin: 0; 
    padding: 0;
}

.box11 {
    padding: 1em; /* 上下左右に均等な余白を追加 */
    margin: 2em 0;
    background: #fffafa;
    border-left: solid 5px #191970;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}

.box11 p {
    margin: 0;
    padding: 0;
}

.box11 ol {
    counter-reset: list-counter;
    list-style: none;
    padding-left: 0; /* 左側の余白を削除 */
}

.box11 ol li {
    counter-increment: list-counter;
    margin: 0.5em 0;
    position: relative;
    padding-left: 30px; /* 左側の余白を調整 */
}

.box11 ol li::before {
    content: counter(list-counter);
    font-family: Arial, sans-serif;
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 0;
    color: #FFF;
    background: #191970;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px; /* 四角にするために角を丸めない */
}

.box11 ul {
    list-style: none;
    padding-left: 0; /* 左側の余白を削除 */
}

.box11 ul li {
    margin: 0.5em 0;
    position: relative;
    padding-left: 30px; /* 左側の余白を調整 */
}

.box11 ul li::before {
    content: "\f0da";
    font-family: "FontAwesome";
    font-weight: 900;
    position: absolute;
    left: 10px; /* 右に10px移動 */
    top: 0;
    color: #191970;
    margin-right: 5px; /* テキストとの間隔を狭める */
}

.box26 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 2px midnightblue;
}

.box26 .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 16px;
    background: #FFF;
    color: midnightblue;
    font-weight: bold;
}
.box26 p {
    margin: 15px 0 13px 13px; 
    padding: 0;
}

.box27 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 2px #333;
}
.box27 .box-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -2px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 16px;
    background: #333;
    color: #ffffff;
    font-weight: bold;
}
.box27 p {
    margin: 0; 
    padding: 0;
}

.box28 {
    position: relative;
    margin: 2em 0;
    padding: 20px 10px; /* 上下の余白を20px、左右の余白を10pxに設定 */
    border: solid 2px #dc143c; /* 色を#dc143cに変更 */
}

.box28 .box-title {
    position: absolute;
    display: inline-block;
    top: -2px;
    left: -2px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 16px;
    background: #dc143c; /* 色を#dc143cに変更 */
    color: #ffffff;
    font-weight: bold;
}

.box28 p {
    margin: 0; 
    padding: 0;
    margin-top: 10px; /* テキストを少し下に下げる */
}

/* リストタグのスタイルをカスタマイズ */
.box28 ul {
    list-style: none; /* デフォルトのリストスタイルを無効化 */
    padding-left: 0px; /* 左側余白を調整 */
    margin-top: 10px; /* リストタグを少し下に下げる */
}

.box28 ul li {
    position: relative;
    padding-left: 11px; /* 左側余白を調整 */
}

.box28 ul li::before {
    content: "\25A0"; /* 四角のUnicodeキャラクター */
    position: absolute;
    left: 0;
    color: #dc143c; /* 色を#dc143cに変更 */
    font-size: 0.5em; /* 四角を小さくする */
}

.box30 {
    margin: 2em 0;
    background: #f1f1f1;
    padding: 0 0 15px 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}
.box30 .box-title {
    font-size: 1.05em;
    background: midnightblue;
    padding: 4px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.box30 p {
    padding: 15px 20px;
    margin: 0;
}
.box30 li {
    margin: 8px 16px;
}

.memobox{
  margin: 1em 0;
  background-color: #ffffe0;
  padding: 1em;
}

.memobox-title {
    font-size: 18px;
    font-weight: bold;
    color: #ffa500;
    display: flex;
    align-items: center;
}

.memobox-title:before {
    font-family: FontAwesome;
    content: "\f040";
    font-size: 16px; /* アイコンのサイズを少し小さく */
    color: #ffffe0; /* アイコンの色を白に設定 */
    background-color: #ffa500; /* サークルの背景色を設定 */
    border-radius: 50%; /* サークルにするための設定 */
    width: 28px; /* サークルの幅を少し大きく */
    height: 28px; /* サークルの高さを少し大きく */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px; /* アイコンとタイトルの間に間隔を追加 */
}

.memobox p{
  margin: 0;
  padding: 0;
}

.hitokoto{
  background-color:whitesmoke;
  margin: 2em 0;
  padding: 25px;
  border-radius: 10px;
}

.hitokoto-circle1{
  font-size: 16px;
  line-height: 1.5;
  position: absolute;
  margin-top: -37px;
  font-weight: bold;
  color: #fff;
  background-color:midnightblue;
  border-radius: 50%;
  text-align: center;
  width: 24px;
  height: 24px;
}

.hitokoto-circle1:after{
  content: "と";
  position: absolute;
  margin-top: .2em;
  font-weight: bold;
  color: #fff;
  background-color:midnightblue;
  border-radius: 50%;
  text-align: center;
  width: 24px;
  height: 24px;
}

.hitokoto-circle2:before{
  content: "";
  position: absolute;
  top: 100%;
  margin-left: -12px;
  border: 5px solid transparent;
  border-top: 10px solid midnightblue;
  -ms-transform: rotate(-20deg);
  -webkit-transform: rotate(-20deg);
  transform: rotate(-20deg);
}

.hitokoto-circle2{
  position: absolute;
  font-size: 16px;
  line-height: 1.5;
  margin-top: -37px;
  margin-left: 40px;
  font-weight: bold;
  color: #fff;
  background-color:midnightblue;
  border-radius: 50%;
  text-align: center;
  width: 24px;
  height: 24px;
}

.hitokoto-circle2:after{
  content: "と";
  position: absolute;
  margin-top: .2em;
  font-weight: bold;
  color: #fff;
  background-color:midnightblue;
  border-radius: 50%;
  text-align: center;
  width: 24px;
  height: 24px;
}

.hitokoto p{
  margin: 0;
  padding: 0;
}

.cautionbox{
  margin: 1em 0;
  background-color: #fff0f2;
  padding: 1em;
}

.cautionbox-title {
    color: red;
    font-size: 18px;
    font-weight: bold;
    display: flex;
    align-items: center;
}

.cautionbox-title:before {
    font-family: FontAwesome;
    content: "\f06a";
    font-size: 30px;
    margin-right: 9px; /* アイコンとタイトルの間に9pxの間隔を追加 */
}

.cautionbox p{
  margin: 0;
  padding: 0;
}

.info-box {
    background-color: #f1f1f1;
    padding: 20px 20px 20px 60px; /* 左右の余白 */
    position: relative;
    margin-top: 1em;
    margin-bottom: 1em;
    display: block;
}

.info-box::before {
    font-family: "FontAwesome";
    content: '\f05a';
    font-size: 20px; /* アイコンのサイズ */
    position: absolute;
    top: 50%;
    left: 15px; /* 左側の余白 */
    color: midnightblue;
    transform: translateY(-50%);
}

.info-box::after {
    content: '';
    width: 0.7px;
    height: 22px; /* 縦線の長さ */
    background-color: midnightblue;
    position: absolute;
    top: 50%;
    left: 45px; /* アイコンの右側に配置 */
    transform: translateY(-50%);
}

.question-box {
    background-color: #f9fbe7; /* 新しい背景色（淡い黄色） */
    padding: 20px 20px 20px 60px; /* 左右の余白 */
    position: relative;
    margin-top: 1em;
    margin-bottom: 1em;
    display: block;
}

.question-box::before {
    font-family: "FontAwesome";
    content: '\f059'; /* 新しいアイコン */
    font-size: 20px; /* アイコンのサイズ */
    position: absolute;
    top: 50%;
    left: 15px; /* 左側の余白 */
    color: #ff9800; /* 新しいアイコンの色（オレンジ） */
    transform: translateY(-50%);
}

.question-box::after {
    content: '';
    width: 0.7px;
    height: 22px; /* 縦線の長さ */
    background-color: #ff9800; /* 新しい縦線の色（オレンジ） */
    position: absolute;
    top: 50%;
    left: 45px; /* アイコンの右側に配置 */
    transform: translateY(-50%);
}

.bullhorn-box {
    background-color: #e8f5e9; /* 新しい背景色（淡い緑色） */
    padding: 20px 20px 20px 60px; /* 左右の余白 */
    position: relative;
    margin-top: 1em;
    margin-bottom: 1em;
    display: block;
}

.bullhorn-box::before {
    font-family: "FontAwesome";
    content: '\f0a1'; /* 新しいアイコン */
    font-size: 20px; /* アイコンのサイズ */
    position: absolute;
    top: 50%;
    left: 15px; /* 左側の余白 */
    color: #388e3c; /* 新しいアイコンの色 */
    transform: translateY(-50%);
}

.bullhorn-box::after {
    content: '';
    width: 0.7px;
    height: 22px; /* 縦線の長さ */
    background-color: #388e3c; /* 新しい縦線の色 */
    position: absolute;
    top: 50%;
    left: 45px; /* アイコンの右側に配置 */
    transform: translateY(-50%);
}

/* kuchikomi-boxスタイル */
.kuchikomi-box {
    background-color: #f1f1f1;
    padding: 20px 20px 20px 60px; /* 左右の余白 */
    position: relative;
    margin-top: 1em;
    margin-bottom: 1em;
    display: block;
}

/* kuchikomi-boxの前に表示されるアイコン */
.kuchikomi-box::before {
    font-family: "FontAwesome";
    content: '\f0e6'; /* アイコンの変更 */
    font-size: 20px; /* アイコンのサイズ */
    position: absolute;
    top: 50%;
    left: 15px; /* 左側の余白 */
    color: #333333; /* アイコンの色を濃いグレーに変更 */
    transform: translateY(-50%);
}

/* kuchikomi-boxのアイコン右側に表示される縦線 */
.kuchikomi-box::after {
    content: '';
    width: 0.7px;
    height: 22px; /* 縦線の長さ */
    background-color: #333333; /* 縦線の色を濃いグレーに変更 */
    position: absolute;
    top: 50%;
    left: 45px; /* アイコンの右側に配置 */
    transform: translateY(-50%);
}

/*ボックスデザイン--ここまで↑↑--*/

/*リストボックス--ここから↓↓--*/
.box01 {
    position: relative;
    margin: 2em 0;
    padding:1.2em 1em 1em;
    border: solid 2px midnightblue;
}
.box01 .box-title {
    position: absolute;
    display: inline-block;
    top: -14px;
    left: 11px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    vertical-align: middle;
    font-size: 15px;
    background: midnightblue;
    color: #ffffff;
    font-weight: bold;
}
.box01 p {
    margin: 0;
    padding: 0;
}
.box01 ul li {
  line-height: 1.5;
  border-bottom: dashed 1px silver;  
  padding: 0.5em 0;
  list-style-type: none!important;
}
.box01 ul li:before {/*疑似要素*/
  font-family: "FontAwesome";
  content: "\f00c";/*アイコンの種類*/
  position: absolute;
  font-size: 16px;
  left : 1em;/*左端からのアイコンまでの距離*/
  color: midnightblue;/*アイコン色*/
}
/*リストボックス--ここまで↑↑--

/*リストボックス2--ここから↓↓--*/
.box01a {
    position: relative;
    margin: 2em 0;
    padding:1.2em 1em 1em;
    border: solid 2px midnightblue;
}
.box01a .box-title {
    position: absolute;
    display: inline-block;
    top: -14px;
    left: 11px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    vertical-align: middle;
    font-size: 15px;
    background: #FFF;
    color: midnightblue;
    font-weight: bold;
}
.box01a p {
    margin: 0;
    padding: 0;
}
.box01a ul li {
  line-height: 1.5;
  padding: 0.5em 0;
  list-style-type: none!important;
}
.box01a ul li:before {/*疑似要素*/
  font-family: "FontAwesome";
  content: "\f058";/*アイコンの種類*/
  position: absolute;
  font-size: 16px;
  left : 1em;/*左端からのアイコンまでの距離*/
  color: midnightblue;/*アイコン色*/
}
/*リストボックス2--ここまで↑↑--

/*ナンバーリスト--ここから↓↓--*/
.list01 {
  counter-reset:number; /*数字をリセット*/
  list-style-type: none!important; /*数字を一旦消す*/
  padding:1.5em 1em 1em 1em;
  background: whitesmoke;
}
.list01 li {
  position: relative;
  padding-left: 30px;
  line-height: 1.5em;
  display:block;
  padding: 0.5em 0.5em 0.5em 30px;
}

.list01 li:before{
  /* 以下数字をつける */
  position: absolute;
  counter-increment: number;
  content: counter(number);
  /*以下数字のデザイン変える*/
  display:inline-block;
  background: midnightblue;
  color: white;
  font-family: 'Avenir','Arial Black','Arial',sans-serif;
  font-weight:bold;
  font-size: 15px;
  border-radius: 50%;
  left: 0;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  /*以下 上下中央寄せのため*/
  top: 2px;
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
}
/*ナンバーリスト--ここまで↑↑--

/* 切り替えタブここから */
.tab-wrap {
  display: flex;
  flex-wrap: wrap;
  margin:20px 0;
}
.tab-wrap:after {
  content: '';
  width: 100%;
  height: 3px;
  background: midnightblue;
  display: block;
  order: -1;
}
.tab-label {
  color: White;
  background: LightGray;
  font-weight: bold;
  text-shadow: 0 -1px 0 rgba(0,0,0,.2);
  white-space: nowrap;
  text-align: center;
  padding: 10px .5em;
  order: -1;
  position: relative;
  z-index: 1;
  cursor: pointer;
  flex: 1;
}
.tab-label:not(:last-of-type) {
  margin-right: 5px;
}
.tab-content {
  width: 100%;
  height: 0;
  overflow: hidden;
  opacity: 0;
}
/* アクティブなタブ */
.tab-switch:checked+.tab-label {
  background: midnightblue;
}
.tab-switch:checked+.tab-label+.tab-content {
  height: auto;
  overflow: auto;
  padding: 15px;
  opacity: 1;
  transition: .5s opacity;
  box-shadow: 0 0 3px rgba(0,0,0,.2);
}
/* ラジオボタン非表示 */
.tab-switch {
  display: none;
}
/* 切り替えタブここまで */

/* FAQここから */
.qa-1 {
    max-width: 100%;
    margin-bottom: 7px;
    border: 1px solid #d6dde3;
    border-radius: 5px;
}

.qa-1 summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 1em 2em 1em 3em;
    color: #333333;
    font-weight: 600;
    cursor: pointer;
}

.qa-1 summary::before,
.qa-1 p::before {
    position: absolute;
    left: 1em;
    font-weight: 600;
    font-size: 1.3em;
}

.qa-1 summary::before {
    color: #75bbff;
    content: "Q";
}

.qa-1 summary::after {
    transform: translateY(-25%) rotate(45deg);
    width: 7px;
    height: 7px;
    margin-left: 10px;
    border-bottom: 3px solid #333333b3;
    border-right: 3px solid #333333b3;
    content: '';
    transition: transform .5s;
}

.qa-1[open] summary::after {
    transform: rotate(225deg);
}

.qa-1 p {
    position: relative;
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding: .3em 3em 1.5em;
    color: #333;
    transition: transform .5s, opacity .5s;
}

.qa-1[open] p {
    transform: none;
    opacity: 1;
}

.qa-1 p::before {
    color: #ff8d8d;
    line-height: 1.2;
    content: "A";
}
/* FAQここまで */

/*キラリと光るボタンここから*/
.shiny-btn2 {
    display: block;
    position: relative;
    width: 70%;/*ボタンの幅*/
    padding: 10px 0;
    margin: 30px auto;
    background-color: midnightblue;/*ボタンの色*/
    box-shadow: 0 3px 0 0 rgba(128, 128, 128, 1);/*影の色(rgbaの値を変更)*/
    border-radius: 5px;
    font-size: 16px;
    color: #fff!important;
    text-align: center;
    text-decoration: none!important;
    overflow: hidden;
}
.shiny-btn2:hover {
    text-decoration: none;
    color: #555!important;
    font-weight: bold;
    background-color: lightcyan;/*ボタンの色*/
    box-shadow: 0 3px 0 0 rgba(211, 211, 211, 1);/*影の色(rgbaの値を変更)*/
}
.shiny-btn2:active {
  -webkit-transform: translateY(4px);
  transform: translateY(4px);/*下に動く*/
  border-bottom: none;/*線を消す*/
}
.shiny-btn2::before {
    position: absolute;
    content: '';
    display: inline-block;
    top: -180px;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: #fff;
    transition: 0.2s;
    animation: shiny-btn2 3s ease-in-out infinite;
}
@-webkit-keyframes shiny-btn2 {
    0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}
/*キラリと光るボタンここまで

/***ステップバーデザイン4***/
.step-wrap4 {
 counter-reset: count;
 margin: 2em 0;
 position: relative;
}
.step-content4 {
 padding: 1em 0 1.3em 2.5em;
 margin: 0;
 position: relative;
}
.step-content4::before {
 content: "";
 display: block;
 width: 55px;
 height: 55px;
 background: midnightblue;
 border-radius: 50%;
 position: absolute;
 top: 0;
 left: -3px;
}
.step-content4::after {
 content: "";
 display: block;
 height: calc(100% - 55px);
 border-left: solid 2px paleturquoise;
 position: absolute;
 top: 55px;
 left: 10px;
}
.step-label4 {
 color: #fff;
 font-weight: bold;
 font-size: 12px;
 position: absolute;
 top: 3px;
 left: 7px;
}
.step-label4::after {
 counter-increment: count;
 content: counter(count);
 position: absolute;
 font-size: 28px;
 top: 18px;
 left: 8px;
}
.step-title4 {
 font-weight: bold;
 font-size: 120%;
 margin-left: 1.5em;
}
.step-body4 {
 margin-top: 1em;
 padding: 0 0 1em;
 border-bottom: dotted 2px paleturquoise;
}
.step-wrap4 > :last-of-type::after {
 display: none;
}
/***ステップバーデザイン４***/

/* PCトップページはてなスターを消す */
.page-archive .archive-entry .star-container {
    display: none;
}

/* PCトップページブックマークユーザーを消す */
.page-archive .bookmark-widget-counter {
    display: none;
}

/* UnderShirt - PCトップページカテゴリを左上に配置 */
.page-archive .archive-entry .categories {
   position: absolute;
   top: -8px;
   left: 0px;
}

/* UnderShirt - スマホでも記事を２列で表示 */
@media (max-width: 767px){
  .archive-entry {
    width: calc( 50% - 6px);
  }
  .archive-entry:nth-child(2n) {
    margin-left: 12px;
  }
  .archive-entry-header .entry-title {
    font-size: .9rem;/*タイトル文字大きさ*/
}
.page-archive .archive-entry .archive-entry-body {
    display: none;/*記事説明文、スター、ブックマークまとめて消す*/
}
  .page-archive .entry-thumb {
    height: 28vw;
  }
  .page-archive .archive-entry .categories {
   position: absolute;/*カテゴリを左上に配置*/
   top: -8px;
   left: 0px;
}
.archive-entry-tags-wrapper {
    display: none;/*ハッシュタグを消す*/
}
}

@media (max-width: 767px){
.page-archive .categories a:nth-child(n+2) {
    display: none;/*最初のカテゴリのみ表示*/
}
}

/* UnderShirt - 一覧（スマホ）での記事の余白を狭くする */
@media (max-width: 767px){
  .archive-entry {
    padding: 10px;
  }
  .page-archive .entry-thumb-link {
    width: calc( 100% + 20px);
    margin: -10px 0 10px -10px;
  }
}