/* <system section="theme" selected="26006613659732769"> */
/* <system section="theme" selected="26006613652605202"> */
@charset "UTF-8";
/*
  Theme: Cuppuccino
  Author: fujiguchi
  Responsive: yes
  Description:
    大人可愛い（かっこいい）デザインのはてなブログテーマです。
    カスタマイズが苦手な方でもすぐに使えるようになっています。
*/
@import url('https://fonts.googleapis.com/css2?family=Fredericka+the+Great&display=swap');
:root {
  --theme-color: #2a2922;
  --navigation-color: #7d5642;
  --navigation-hover-color: #9a725d;
  --main-color: #7d5642;
  --main-text-color: #fff;
  --font-color: #5f5750;
  --accent-color: #57a085;
  --shadow1-color: rgba(0,0,0,.1);
  --shadow2-color: rgba(0,0,0,.06);
}
/*! 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 */
    scroll-behavior: smooth;
}

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

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

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

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

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

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

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

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

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

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

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

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

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

a:hover {
    color: #0f668f;
}

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

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

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: #5f5750;
    color: var(--font-color);
    text-decoration: none;
}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
    color: #0f668f;
}

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

#globalheader-container {
    background: var(--theme-color);  
}

/* container */
#content {
    margin-top: 2rem;
}

/* 2カラムレイアウト */
#content-inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
}

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

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

#main {
    width: 100%;
}

#main-inner, #box2-inner, .breadcrumb {
    padding: 0 10px;
}

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

#box2 {
    word-wrap: break-word;
}
@media (min-width: 992px) {
    #box2 {
        width: 370px;
    }
}

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

@media (min-width: 768px) {
    #blog-title {
      padding: 3em;
    }
    #title {
        font-size: 2.5rem;
    }
    .page-archive #content {
        margin-top: 3rem;
    }
    .page-archive-category #content {
    margin-top: 0;
}
}

#title {
    margin: 0;
    font-weight: normal;
    font-family: 'Fredericka the Great', cursive;
}

@media (min-width: 992px) {
    #title {
        font-size: 3rem;
    }
    #wrapper {
        width: calc( 100% - 370px);
    }
    #box2-inner {
      padding: 0;
    }
}

#title a {
    color: #454545;
    color: #fff;
    text-shadow: 3px 3px 5px black;
}

#blog-description {
    font-weight: normal;
    font-size: .8rem;
    margin: .5em 0 0;
    text-shadow: 1px 1px 2px black;
    color: #fff;
}

/* ヘッダ画像を設定したとき */
.header-image-enable #blog-title {
    margin: 0 0 2em;
}

.header-image-enable #blog-title-inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

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

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

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

/* entry */
.entry {
    position: relative;
    margin-bottom: 3em;
    line-height: 1.8;
    padding: 1rem 4.5vw;
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 5px 10px var(--shadow-color);
    box-shadow: rgba(0,0,0,.1), rgba(0,0,0,.06);
    box-shadow: var(--shadow1-color) 0px 4px 6px -1px, var(--shadow2-color) 0px 2px 4px -1px;
    word-break: break-word;
}

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


time[title*="-01-"] .date-month::before {
  content: 'JANUARY';
}

time[title*="-02-"] .date-month::before {
  content: 'FEBRUARY';
}

time[title*="-03-"] .date-month::before {
  content: 'MARCH';
}

time[title*="-04-"] .date-month::before {
  content: 'APRIL';
}

time[title*="-05-"] .date-month::before {
  content: 'MAY';
}

time[title*="-06-"] .date-month::before {
  content: 'JUNE';
}

time[title*="-07-"] .date-month::before {
  content: 'JULY';
}

time[title*="-08-"] .date-month::before {
  content: 'AUGUST';
}

time[title*="-09-"] .date-month::before {
  content: 'SEPTEMBER';
}

time[title*="-10-"] .date-month::before {
  content: 'OCTOBER';
}

time[title*="-11-"] .date-month::before {
  content: 'NOVEMBER';
}

time[title*="-12-"] .date-month::before {
  content: 'DECEMBER';
}

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

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

.entry-title {
    margin: 0 0 .3em;
    padding-bottom: .5em;
    font-size: 1.5rem;
    border-bottom: solid 2px #5f5750;
    border-bottom: solid 2px var(--font-color);
}

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

.page-archive .categories {
    position: absolute;
    bottom: 0;
    font-size: .75rem;
    z-index: 2;
}

 .archive-entry:nth-child(odd) .categories {
    right: 0;
}

.entry .categories a {
    margin-bottom: .2em;
}

.categories a, .urllist-categories a {
    text-decoration: none;
    padding: .1em .5em;
    background: #57a085;
    background: var(--accent-color);
    border-radius: 4px;
    color: #fff;
    display: inline-block;
}

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

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

 @media (max-width: 767px) {
    .archive-entry:nth-child(even) .categories {
        left: 0;
    }
    .page-archive .archive-entry:nth-child(odd) .archive-date {
        left: 0;
    }

    .page-archive .archive-entry:nth-child(even) .archive-date {
        right: 0;
    }
}

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

/* 記事内の書式 */
.entry-content img,
.entry-content video {
    max-width: 100%;
    height: auto;
}

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

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

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

.entry-content h2 {
    font-size: 1.4rem;
    padding: 0 .7em;
    background: linear-gradient(-45deg,transparent 25%, #7d5642 25%, #7d5642 50%,transparent 50%,transparent 75%, #7d5642 75%)left bottom/ 7px 7px repeat-y; 
    background: linear-gradient(-45deg,transparent 25%,var(--main-color) 25%,var(--main-color) 50%,transparent 50%,transparent 75%,var(--main-color) 75%)left bottom/ 7px 7px repeat-y;
}

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

.entry-content h4 {
    font-size: 1.2rem;
    padding: .6em 0;
    background: linear-gradient(-45deg,transparent 25%, #7d5642 25%, #7d5642 50%,transparent 50%,transparent 75%, #7d5642 75%)left bottom/ 7px 7px repeat-x; 
    background: linear-gradient(-45deg,transparent 25%,var( --main-color) 25%,var(--main-color) 50%,transparent 50%,transparent 75%,var(--main-color) 75%)left bottom/ 7px 7px repeat-x;
}
@media (min-width: 992px) {
    .entry-content h3 {
        font-size: 1.3rem;
    }
}

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

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

.entry-content h6 {
    font-size: .9rem;
}

.entry-content a {
    color: #3583b0;
    text-decoration: underline;
}
.entry-content a:hover {
    color: #1d6a96;
    text-decoration: none;
}
.entry-content ul:not(.table-of-contents),
.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;
    font-size: .8rem;
}

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

.entry-content table th,
.entry-content table td {
    border: 1px solid #ddd;
    padding: 5px 10px;
}

.entry-content table th {
    background: #f5f5f5;
}

.entry-content blockquote {
    border: 1px solid #ddd;
    margin: 0 0 10px;
    padding: 25px 20px;
    position: relative;
    background: #fbfbfb;
    margin: 2em 0;
}

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

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

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

.entry-content pre {
    background: #f5f5f5;
    border: none;
    white-space: pre-wrap;
    text-overflow: ellipsis;
    font-size: 100%;
    line-height: 1.3;
    font-size: .8rem;
    padding: 10px;
}

.entry-content pre > code {
    margin: 0;
    padding: 0;
    white-space: pre;
    border: none;
    background-color: transparent;
    font-family: 'Monaco', 'Consolas', 'Courier New', Courier, monospace, sans-serif;
}

.entry-content code {
    font-size: 90%;
    margin: 0 2px;
    padding: 0px 5px;
    background-color: #f5f5f5;
    border-radius: 3px;
}

.entry-content hr {
    width: 50%;
    border: 0;
    border: none;
    border-top: 1px solid #ddd;
    margin: 2em auto;
}

.table-of-contents {
    padding: 2.5em 1em 1em 2em;
    margin: 1em 0;
    border: 1px solid #ddd;
    position: relative;
    background: #343434;
    border: solid 5px #b58c6a;
    border-radius: 4px;
    color: #fff;
    list-style: decimal;
}

.table-of-contents::before {
    content: "CONTENTS";
    display: inline-block;
    padding: 0 1em;
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 120%;
    font-family: 'Fredericka the Great', cursive;
    letter-spacing: .05em;
    color: #fff;
    background: #343434;
    white-space: nowrap;
    z-index: 1;
}

.table-of-contents::after {
    content: "";
    display: block;
    position: absolute;
    top: 1em;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 2em);
    height: 10px;
    background: linear-gradient(-45deg,transparent 25%, #8e7250 25%, #8e7250 50%,transparent 50%,transparent 75%, #8e7250 75%)left bottom/ 7px 7px repeat-x;
}

.table-of-contents a {
    color: #fff;
    text-decoration: none;
}

.table-of-contents li {
    margin: .3em 0;
    position: relative;
}

.table-of-contents li ul {
    margin: 0 0 .3em 2em;
}

.table-of-contents ul {
    list-style: none;
}

.table-of-contents ul li::before {
    content: "";
    width: 4px;
    height: 10px;
    border-left: solid 2px #fff;
    border-bottom: solid 2px #fff;
    position: absolute;
    top: 2px;
    left: -12px;
}

/* 記事下 */
.entry-footer .social-buttons {
    margin-bottom: 1em;
}

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

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

/* コメント */
.comment-box {
    margin: 1em 0;
}

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

.comment-box .entry-comment {
    padding: 1em;
    border: solid #ddd 1px;
    border-radius: 6px;
    margin: 10px 0 10px 65px;
}

ul.comment li::before {
    content: "";
    display: block;
    height: calc(100% - 45px);
    width: 2px;
    background: #eee;
    position: absolute;
    left: -45px;
    bottom: -10px;
}

.comment-box .entry-comment::after {
    content: "";
    display: inline-block;
    width: .6rem;
    height: .6rem;
    background: #fff;
    border-left: solid 1px #ddd;
    border-top: solid 1px #ddd;
    position: absolute;
    top: 20px;
    left: -6px;
    transform: rotate(-45deg);
}

.comment-box .hatena-id-icon {
    position: absolute;
    top: 0;
    left: -70px;
    width: 50px !important;
    height: 50px !important;
    border-radius: 50%;
    border: solid #ddd 1px;
}
ul.comment li:nth-last-child(2)::before, ul.comment li:last-child::before {
    display: none;
}

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

.comment-box .entry-comment:first-child {
    border-top: 1px solid #ddd;
}

.comment-box .read-more-comments {
    padding: 10px 0;
}

.read-more-comments a {
    cursor: pointer;
    text-decoration: underline;
}

.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 {
    font-size: .85rem;
    padding: .8em 1.3em;
    border-radius: 2em;
    background: #7d5642;
    background: var(--main-color);
    color: #fff;
    color: var(--main-text-color);
    box-shadow: 0 4px 15px 0 #d2c2ac;
}

.leave-comment-title:hover {
    color: #fff;
    color: var(--main-text-color);
    text-decoration: underline;
    box-shadow: 0 0 5px 0 #ccaa7d;
}

/* Pager */
.pager {
    margin: 2em 1em 3em;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

/* サイドバーモジュール */
.hatena-module {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    margin-bottom: 2em;
    padding: 1rem;
    background: #fff;
    font-size: .85rem;
    border-radius: 2px;
    box-shadow: rgba(0,0,0,.1) 0px 4px 6px -1px, rgba(0,0,0,.06) 0px 2px 4px -1px;
    box-shadow: var(--shadow1-color) 0px 4px 6px -1px, var(--shadow2-color) 0px 2px 4px -1px;
}

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

.hatena-module-title {
    margin-bottom: 1em;
    padding-top: .3em;
    color: #5f5750;
    color: var(--font-color);
    font-size: 1rem;
    font-weight: bold;
    font-style: italic;
    text-align: center;
    letter-spacing: .1em;
    border-bottom: solid 2px;
}

.hatena-module-title a {
    text-decoration: none;
    color: #5f5750;
    color: var(--font-color);
}

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

/* Profile module */
.hatena-module-profile .profile-icon {
    display: block;
    width: 100px;
    margin: 0 auto;
    border: solid 1px #ddd;
    border-radius: 50%;
}

.hatena-module-profile .id {
    display: block;
    font-weight: bold;
    margin-bottom: .5em;
    text-align: center;
}

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

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

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

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

.hatena-urllist li a {
    text-decoration: none;
}

.hatena-urllist li a:hover {
    /*text-decoration: underline;*/
}

.hatena-urllist .urllist-category-link {
    font-size: .7rem;
    padding: .1em .3em;
}

.hatena-urllist .urllist-date-link a {
    color: #999;
}

.hatena-urllist .urllist-entry-body {
    margin-top: .3em;
}
.hatena-urllist .archive-module-year .archive-module-month {
    margin: .2em 0 .1em 2.5em;
    padding: 0;
    border: none;
    list-style-type: none!important;
    background: none;
}

.hatena-module-category .hatena-urllist li {
    padding: 0;
    display: inline-block;
}

.hatena-module-category .hatena-urllist li a {
    display: inline-block;
    font-size: .8rem;
    margin: 0 .2rem .8rem;
    padding: .3rem 1rem;
    border: solid 1px #7d5642;
    border: solid 1px var(--main-color);
    border-radius: 2rem;
    transition: .3s;
}

.hatena-module-category .hatena-urllist li a:hover {
    background: #7d5642;
    background: var(--main-color);
    color: #fff;
    color: var(--main-text-color);
    text-decoration: none;
}

.hatena-module-related-entries .hatena-module-title {
    padding: 1em 0 .5em;
}

.entry .hatena-module-related-entries {
    box-shadow: none;
    border: none;
    padding: 0;
}


/***階層化デザイン修正コード***/
.hatena-module-category ul li.on-border {
    border: none!important;
}

.recent-entries li:not(:last-child), .entries-access-ranking li:not(:last-child) {
    border-bottom: solid 1px #ddd;
}


/*サイドバーもっと見るボタン*/
.urllist-see-more-link {
    display: inline-block;
    padding: .3em .8em;
    background: #7d5642;
    background: var(--main-color);
    color: #fff;
    color: var(--main-text-color);
    border-radius: 2em;
}

.urllist-see-more-link:hover {
    color: #fff;
    text-decoration: underline;
}

.urllist-with-thumbnails li .urllist-image {
    margin: 0 .7em .7em 0;
    float: left;
    border-radius: 6px;
    box-shadow: rgba(0,0,0,.1), rgba(0,0,0,.06);
    box-shadow: var(--shadow1-color) 0px 4px 6px -1px, var(--shadow2-color) 0px 2px 4px -1px;
    transition: .3s;
}

.urllist-with-thumbnails li .urllist-image:hover {
    transform: translateY(4px);
    box-shadow: none;
}

.archive-module-calendar-highlight {
    background: var(--accent-color);
    color: #fff;
    padding: .2em .8em;
    border-radius: 1em;
}

.archive-module-calendar, .archive-module-calendar .archive-module-calendar-selector {
    font-family: 'Fredericka the Great', cursive;
}

/* Search module */
.search-form {
    border: 1px solid #ddd;
    border-radius: 3px;
    width: 100%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

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

.search-module-button {
    width: 24px;
    height: 24px;
    margin-right: 5px;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:none;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Esearch%3C/title%3E%3Cpath d='M16.7,15l-3.4-3.3h-.1a5.4,5.4,0,0,0,.9-3.1,5.6,5.6,0,1,0-5.6,5.6,5.4,5.4,0,0,0,3.1-.9.1.1,0,0,0,.1.1L15,16.7a1.1,1.1,0,0,0,.8.3,1.6,1.6,0,0,0,.9-.3,1.4,1.4,0,0,0,0-1.7M8.5,12.3A3.8,3.8,0,0,1,4.8,8.5,3.8,3.8,0,0,1,8.5,4.7a3.9,3.9,0,0,1,3.8,3.8,3.8,3.8,0,0,1-3.8,3.8'/%3E%3Crect class='a' width='20' height='20'/%3E%3C/svg%3E") no-repeat center;
    background-size: 20px 20px;
    border: none;
    outline: none;
    color: transparent;
    overflow: hidden;
    opacity: .5;
    cursor: pointer;
}

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

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

.page-about .entry-content dd {
    margin-left: 0;
    margin-bottom: 2em;
}

/* Archive */
.entry-thumb-link {
    order: 0;
    width: 100%;
    margin: -4vw auto 1vw;
}

.entry-thumb-link::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.archive-entry-header {
    order: 1;
    width: 100%;
}

.page-archive .entry-title {
    font-size: calc(1rem - 1px);
    position: relative;
}

.page-archive .archive-entry:nth-child(odd) .entry-title {
    margin: 0 0 1.6em 1em;
}

.page-archive .archive-entry:nth-child(even) .entry-title {
    margin: 0 1em 1.6em 0;
}

.archive-header-category {
    text-align: center;
}

.archive-entry-body {
    display: none;
}

.page-archive .archive-entry {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    position: relative;
    padding: 3vw;
    margin: 0 auto 6vw;
    background: #fff;
    border-radius: 2px;
    box-shadow: rgba(0,0,0,.1), rgba(0,0,0,.06);
    box-shadow: var(--shadow1-color) 0px 4px 6px -1px, var(--shadow2-color) 0px 2px 4px -1px;
    width: 100%;
    transition: .5s;
    box-sizing: border-box;
}

.page-archive .entry-thumb {
    position: relative;
    background-size: cover;
    width: 100%;
    transition: .5s;
    height: 0;
    padding-top: 56.25%;
    border-radius: 4px 4px 0 0;
    box-shadow: rgba(0,0,0,.2) 0px 10px 10px -4px, rgba(0,0,0,.01) 0px 4px 6px -2px;
}

.page-archive .entry-description {
    margin: 0;
    font-size: .85rem;
}


.page-archive .social-buttons {
    display: none;
    margin-top: .3em;
}

.page-index .archive-date, .page-archive .archive-date {
    position: absolute;
    display: inline-block;
}

.page-index .archive-date a, .entry-date a, .page-archive .archive-date a {
    color: #5f5750;
    color: var(--font-color);
    font-family: 'Fredericka the Great', cursive;
    position: relative;
    display: inline-block;
    text-decoration: none;
    pointer-events: none;
}

.page-index .archive-date a .hyphen, .entry-date a .hyphen, .page-archive a .hyphen {
    display: none;
}

.page-index .archive-date time, .entry-date time, .page-archive time {
    display: flex;
    align-items: flex-end;
}

.entry-date .date-day {
    order: 1;
    font-size: 7vw;
    line-height: 1;
}
.page-index .archive-date .date-day, .page-archive .date-day {
    order: 1;
    font-size: 5vw;
    line-height: 1;
}

.page-index .archive-date .date-year, .entry-date .date-year, .page-archive .date-year {
    display: none;
}

.page-index .archive-date .date-month, .entry-date .date-month, .page-archive .date-month {
    order: 2;
    font-size: 0;
}

.entry-date .date-month::before {
    font-size: 3vw;
    display: inline-block;
    margin: 0 .5em;
    letter-spacing: .1em;
}

.page-index .archive-date .date-month::before, .page-archive .date-month::before {
    font-size: 2vw;
    display: inline-block;
    margin: 0 .5em;
    letter-spacing: .1em;
}

.page-archive .archive-entry .archive-date {
    position: absolute;
    bottom: 0;
    padding: .2em 1em .2em 1em;
    border-radius: 2px;
    background: rgba(255,255,255,.8);
    z-index: 1;
}

.page-archive .archive-entry:nth-child(n+3):nth-child(2n) .archive-date {
    right: 0;
}

.page-archive .archive-entry:nth-child(n+3):nth-child(2n+1) .archive-date {
    left: 0;
}

.page-archive .archive-entry:nth-child(even) {
    flex-direction: row-reverse;
}

.archive-entry-tags-wrapper {
    display: none;
}

@media (min-width: 768px) {
    .page-archive .entry-description {
        font-size: .9rem;
    }
}
@media (min-width: 992px) {
    .page-index .archive-date .date-month::before, .entry-date .date-month::before {
        font-size: 1vw;
    }
    .page-index .archive-date .date-day, .entry-date .date-day {
        font-size: 3vw;
    }
    .page-archive .archive-entry .date-day {
        font-size: 3vw;
        font-size: min(3vw, 46px);
    }
    .page-archive .archive-entry .date-month::before {
        font-size: 1vw;
        font-size: min(1vw, 18px);
    }
}

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

#footer a {
    color: #999;
}

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

@media (min-width: 768px) {
  #main-inner, .breadcrumb {
      padding: 0 2vw;
  }
  .archive-entries {
      display: flex;
      flex-wrap: wrap;
  }
  .page-archive .archive-entry {
    margin-bottom: 4vw;
    padding: 2vw;
  }
  .page-archive .archive-entry:nth-child(-n+2) {
    flex-direction: column;
    width: calc(50% - 10px);
  }
  .page-archive .archive-entry:nth-child(2) {
      margin-left: 20px;
  }
  .page-archive .archive-entry:nth-child(-n+2) .entry-title {
      margin: .3em 0 1.6em;
  }
  .entry-thumb-link {
      margin: -3vw auto 1vw;
  }

  .page-archive .archive-entry:nth-child(2) .categories {
      right: 0;
  }
  .archive-entry:nth-child(even).archive-entry:nth-child(n+3) .categories {
      left: 0;
  }
  .page-archive .archive-entry:nth-child(-n+2) .archive-date {
      left: 0;
  }
  .page-archive .archive-entry:nth-child(even) .archive-entry:nth-child(n+3) .archive-date {
      right: 0;
  }
  .page-archive .archive-entry:nth-child(-n+2) .archive-date {
      padding: .15em 1em;
  }
  .page-archive .entry-title {
      font-size: 2vw;
  }
  .archive-entry:nth-child(n+3) .entry-title-link::before {
      content: "READ MORE";
      display: inline-block;
      position: absolute;
      bottom: -3em;
      font-family: 'Fredericka the Great', cursive;
      font-weight: normal;
      font-size: .8em;
      padding: .5em 1em;
      background: #7d5642;
      background: var(--main-color);
      color: #fff;
      color: var(--main-text-color);
      border-radius: 2em;
      z-index: 2;
  }
  .archive-entry:nth-child(even):nth-child(n+3) .entry-title-link::before {
      right: 0;
  }
  .archive-entry:nth-child(odd):nth-child(n+3) .entry-title-link::before {
      left: 0;
  }
}

.page-archive .entry-title::before {
    content: "";
    width: 15%;
    border-top: solid 2px #5f5750;
    border-top: solid 2px var(--font-color);
    position: absolute;
    bottom: .2em;
    right: 0;
}

@media screen and (min-width:768px) and ( max-width:991px) {
    #box2 {
        word-wrap: break-word;
        background: none;
        padding: 0;
    }
    #box2-inner {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 0 40px;
    }
    .page-entry #main-inner {
        padding: 0 2vw;
    }
    .page-archive .archive-entry .date-day {
        font-size: 3.5vw;
    }
    .page-archive .archive-entry .date-month::before {
        font-size: 1.5vw;
    }
    .hatena-module {
        width: 49%;
        background: #fff;
        margin-bottom: 2rem;
    }
}

@media (min-width: 992px) {
  .page-archive .archive-entry {
      margin-bottom: 3vw;
  }
  .page-archive .archive-entry:nth-child(-n+2) {
      padding: 1vw;
  }
  .page-archive .archive-entry:nth-child(-n+2) .entry-title {
      margin: .3em 0 2em;
  }
  .page-archive .archive-entry:nth-child(-n+2) .entry-thumb-link {
      margin-top: -2vw;
  }
  .page-archive .entry-title {
      font-size: 17px;
}
}

@media (min-width: 1200px) {
    .page-archive .archive-entry {
      margin-bottom: 36px;
      padding: 24px;
    }
    .entry-thumb-link {
      margin: -36px auto 12px;
    }
    .page-archive .archive-entry:nth-child(-n+2) {
      padding: 12px;
    }
    .page-archive .archive-entry:nth-child(-n+2) .entry-thumb-link {
      margin-top: -24px;
    }
}

.entry-content h3 {
    border-bottom: solid 3px;
    position: relative;
    margin: 2em 0 1.5em;
    padding: .3em 0;
}

.entry-content h3::brfore {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    width: 15%;
    border-bottom: solid 3px #7dc3a3;
}

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

.archive-entry:hover .entry-thumb {
    transform: translateY(.5vw);
    box-shadow: none;
    opacity: .7;
}
.archive-entry:hover .entry-thumb-link::before {
    background: rgba(255,255,255,.3);
}

a.entry-see-more {
    display: inline-block;
    background: #7d5642;
    background: var(--main-color);
    color: #fff;
    color: var(--main-text-color);
    padding: .3rem 1rem;
    border-radius: 2rem;
    text-decoration: none;
    transition: .3s;
}

a.entry-see-more:hover {
    opacity: .8;
    text-decoration: underline;
    color: #fff;
}

.entry-categories {
    margin: 1em 0;
}

.pager-prev, .pager-next {
    position: relative;
    width: 40%;
    text-align: center;
}

.pager-next a, .pager-prev a {
    display: block;
}

.pager-prev a::before, .pager-next a::before {
    display: block;
    font-family: 'Fredericka the Great', cursive;
    font-size: 25px;
    font-style: italic;
    text-align: center;
    line-height: 1;
    margin-bottom: .3em;
    border-bottom: solid 1px #777;
}

.pager-prev a::before {
    content: "NEW";
}

.pager-next a::before {
    content: "OLD";
}

.pager-prev a::after, .pager-next a::after {
    content: "";
    display: inline-block;
    width: 15px;
    height: 1px;
    background: #777;
    position: absolute;
}

.pager-prev a::after {
    left: 0;
    top: 21px;
    transform: rotate(-30deg);
}

.pager-next a::after {
    right: 0;
    top: 21px;
    transform: rotate(30deg);
}

.pager-arrow {
    display: none;
}

.entry-title {
    position: relative;
}
.entry-title::before {
    content: "";
    width: 10%;
    border-top: solid 2px #5f5750;
    border-top: solid 2px var(--font-color);
    position: absolute;
    bottom: .2em;
    right: 0;
}

.entry-content ul:not(.table-of-contents), .entry-content ol, .entry-content dd {
    margin: 1em 0 1em 1.5em;
}


.archive-module-month {
    transition: .3s;
    text-decoration: none;
}

.archive-module-month:hover {
    transform: translateX(4px);
    text-decoration: none;
}

.archive-module-month-title {
    position: relative;
    transition: .3s;
}

.archive-module-month-title:hover {
    text-decoration: none;
}

.archive-module-month a::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    border-top: solid 2px #777;
    border-right: solid 2px #777;
    transform: rotate(45deg);
    position: absolute;
    top: .4em;
    left: -1em;
}

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

#blog-title, #footer, #header #header-body  {
    background: #2a2922;
    background: var(--theme-color);
}

#footer, #footer a {
    color: #fff;
}
.page-entry .breadcrumb {
    margin-bottom: 1em;
}

blockquote::before, blockquote::after {
    color: #eee;
    content: "\f704";
    font-family: 'blogicon';
    position: absolute;
    font-size: 3em;
}
blockquote::before {
    top: -35px;
    left: 10px;
}
blockquote::after {
    bottom: -35px;
    right: 10px;
    transform: rotate(180deg);
}

/***記事内コード用***/
.entry-content pre {
    background: #000;
    white-space: pre;
    text-overflow: ellipsis;
    line-height: 1.3;
    font-size: .8rem;
    position: relative;
    padding: 1.5em 1em .5em;
    border: solid 1px #ddd;
    font-size: 1em;
    text-overflow: unset;
}

.entry-content pre.lang-html::before {
    content: " html ";
    position: absolute;
    top: 0;
    left: 0;
    background: #5e6bff;
    color: #fff;
}

.entry-content pre.lang-css::before {
    content: " CSS ";
    position: absolute;
    top: 0;
    left: 0;
    background: #fff75e;
}

/***グローバルナビゲーション***/

.g-nav {
    list-style: none;
    text-align: center;
    padding: 0;
    margin: 0;
}

.g-nav li a {
    display: block;
    padding: .8em 0;
    color: #555;
    font-weight: bold;
    transition: .3s;
}

.g-nav li {
    width: 100%;
}

.g-nav li a:hover {
  background: #9a725d;
    background: var(--navigation-hover-color);
}

@media (max-width: 767px) {
  #nav-drawer {
      position: fixed;
      top: 10px;
      right: 10px;
      z-index: 9999;
  }

.nav-unshown {
  display:none;
}

#nav-open {
    display: flex;
    flex-direction: column;
    text-align: center;
    line-height: 1;
    background: rgba(255,255,255,.7);
    padding: .5em;
    border-radius: 6px;
    color: #2a2922;
    font-weight: bold;
}

.g-nav-icon {
    font-size: 25px;
}

.mini-text {
    font-size: 10px;
}

#nav-close {
  display: none;
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
}

#nav-content {
    overflow: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 85%;
    max-width: 500px;
    height: 100%;
    background: #fff;
    transition: .3s ease-in-out;
    -webkit-transform: translateX(-130%);
    transform: translateX(-130%);
}

#nav-input:checked ~ #nav-close {
  display: block;
  opacity: .5;
}

#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

.nav-close {
    text-align: center;
    display: flex;
    flex-direction: column;
    padding: 1em;
    font-size: .85rem;
    font-weight: bold;
    letter-spacing: .05em;
    line-height: 1;
}

.nav-close i {
    font-size: 2rem;
}
}

@media (min-width: 768px) {
  #nav-input, .nav-close {
      display: none;
  }
  #nav-content {
      position: relative;
      background: #7d5642;
      background: var(--navigation-color);
      box-shadow: rgba(0,0,0,.1), rgba(0,0,0,.06);
      box-shadow: var(--shadow1-color) 0px 4px 6px -1px, var(--shadow2-color) 0px 2px 4px -1px;
  }
  #nav-open {
    display: none;
  }
  .g-nav {
      display: flex;
      justify-content: space-around;
      margin: 0 auto;
      padding: 0;
      max-width: 1200px;
  }
  .g-nav li a {
      color: #fff;
      font-size: .85rem;
  }
}
/***シェアボタン***/
.sharebtn{margin:0 0 1em 0;}
.sharebtn a{display: block;width: 48px;height: 48px;line-height: 48px;color: #fff;text-align: center;border-radius: 4px;background: #fff;box-sizing: border-box;transition: .2s;box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;*/}
.sharebtn a i{margin: 0;font-size: 25px;line-height: 48px;}

.sharebtn .btn_fb{background:#1877f2;}
.sharebtn .btn_tw{background:#1da1f2;}
.sharebtn .btn_po{background:#ee4056;}
.sharebtn .btn_hb{background:#00a4de;}
.sharebtn .btn_li{background:#06c755;}
.sharebtn a:hover {opacity: .7;box-shadow: rgba(0, 0, 0, 0.16) 0px 5px 10px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;}
.sharebtn .blogicon-bookmark {font-size: 33px;line-height: 1.3em;vertical-align: -11%;}
.sharebtn_list {padding: 0;list-style: none;display: flex;margin: .5em 0 2em;}

.sharebtn_item:not(:last-child) {margin-right: 8px;}
/***ボーダーボタン***/
.sharebtn .bd:not(:hover) {background: none;border: solid 1px;}
.sharebtn a.bd:hover {color:#fff;opacity: 1;}
.sharebtn .btn_fb.bd{color: #1877f2;}
.sharebtn .btn_tw.bd{color: #1da1f2;}
.sharebtn .btn_po.bd{color: #ee4056;}
.sharebtn .btn_hb.bd{color: #00a4de;}
.sharebtn .btn_li.bd{color: #06c755;}

/***おすすめ記事***/
.c_recommend-container {
  margin: 0;
  padding: 2em 2.5vw 0;
  background: #fff;
}
#top-editarea .c_recommend-container {
    box-shadow: rgba(0,0,0,.1) 0px 4px 6px -1px, rgba(0,0,0,.06) 0px 2px 4px -1px;
    box-shadow: var(--shadow1-color) 0px 4px 6px -1px, var(--shadow2-color) 0px 2px 4px -1px;
}
.c_recommend {
  display: flex;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0!important;
  list-style: none;
}
.c_recommend-item {
  width: 50%;
  margin-bottom: 1.5em;
  padding: 0 .5em;
  box-sizing: border-box;
  border-radius: 4px;
}
.c_recommend-thumb {
    position: relative;
    overflow: hidden;
    margin: 0;
    padding-top: 56.25%;
    border-radius: 4px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
.c_recommend-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    object-fit: cover;
    transition: .5s;
    -webkit-transform: scale(1.01);
    transform: scale(1.01);
}
.c_recommend-item:hover .c_recommend-img {
    transform: scale(1.06);
    opacity: .8;
}
.c_recommend-item-body {}

.c_recommend-item-title {
    display: block;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.4;
    padding: .5em 0 0;
}
@media (min-width: 600px) {
  .c_recommend-item-title {
    font-size: 1rem;
}
}
@media (min-width: 768px) {
  .g-nav {
    margin: 0 auto;
}
  .c_recommend-item {
    width: 25%;
}
  .entry .c_recommend-item {
    width: 33.3%;
}
}
.entry .c_recommend-container {
    padding: 0;
    margin: 1em -.5em 0;
}

.hatena-module-html .c_recommend-container {
    padding: 0;
}

.hatena-module-html .c_recommend-item {
    width: 50%;
}

.hatena-module-html .c_recommend-item-title {
    font-size: 14px;
}

.hatena-module-html .c_recommend-item:nth-child(odd) {
    padding-left: 0;
}

.hatena-module-html .c_recommend-item:nth-child(even) {
    padding-right: 0;
}

/***おすすめ記事カード型***/
.c_recommend-thumb.card, .c_recommend-thumb .c_recommend-img {
    border-radius: 3px 3px 0 0;
    box-shadow: none;
}
.c_recommend-item-body.card {
    padding: 0 .5em .5em;
}
.c_recommend-item.card, .entry .c_recommend-item.card {
    border: solid 1px #acacac;
    padding: 0;
    width: 48%;
    margin: 0 1% 1.5em;
}
@media (min-width:768px) {
.c_recommend-item.card {
    margin: 0 .5% 2em;
    width: 24%;
}
.entry .c_recommend-item.card {
    width: 31%;
}
}
.hatena-module-html .c_recommend {
    justify-content: space-between;
}
.hatena-module-html .c_recommend-item.card {
    width: 48%;
    margin-bottom: 1.5em;
}

/* </system> */

/* <system section="background" selected="pixel-01"> */
body{ background-image: url(https://cdn.blog.st-hatena.com/images/theme/backgrounds/2014/pixel-01.png?version=0d6b3b1a3a0fb98bc54e1069a3355a); background-repeat: repeat; background-attachment: scroll; background-position: 0 0; background-size: 188px 178px; } @media (-webkit-min-device-pixel-ratio: 2) { body {background-image: url(https://cdn.blog.st-hatena.com/images/theme/backgrounds/2014/pixel-01@2x.png?version=0d6b3b1a3a0fb98bc54e1069a3355a);} }
/* </system> */

.entry-content p {
 font-size: 16px;
 margin-bottom: 2.0em;
 color: #383c3c;
 line-height: 1.5;
}

/***着せ替えコード***/
:root {
  --main-color: #79a3b1;
  --accent-color: #e3c5c5;
  
}
/***見出しまとめてリセット***/

.entry-content h2, .entry-content h3, .entry-content h4 {
  background: none;
  border: none;
  padding: 0;
}


.entry-content h2 {
  font-size: 22.5px !important;/*文字のサイズ*/
  background: #E07487;/*背景色*/
  padding: .8em .7em;/*余白*/
  color: #FFF;
  margin-bottom: 15px;
  border-top: none;
  border-bottom: none;
}

.entry-content h3 {
  padding-bottom: 10px;
  margin-top: 3em;
  border-bottom: solid 2px #e6edf3;
  padding-left: 1.5em;/*アイコン分のスペース*/
  line-height: 1.4;/*行高*/
  position: relative;
}

.entry-content h3:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 2px #E07487;
  bottom: -2px;
  width: 40%;
  left: 0;/*アイコンの位置*/
}

.entry-content h3:before {
 font-family: "Font Awesome 5 Free";
  content: "\f00c";/*アイコンのユニコード*/
  font-weight: 900;
  position: absolute;/*絶対位置*/
  font-size: 1em;/*サイズ*/
  left: 0;/*アイコンの位置*/
  top: 0;/*アイコンの位置*/
  color: #E07487; /*アイコン色*/
}

.entry-content h4 {
  font-size: 18px !important;/*文字のサイズ*/
  border-left: 2px solid #E07487;/*左線*/
  padding: .8em .7em;/*余白*/
  color: #323232;
  margin-bottom: 15px;
  border-top: none;
  border-bottom: none;
}

.entry-content h5 {
    font-size: 90%;
    padding: .5em .5em;
    padding-right: 0px;
    border-left: 1px solid #dea08b;
    border-bottom: none;
    margin-top: 2em;
}

/*写真を中央に表示*/
.hatena-fotolife, .http-image {
display: block;
margin: 0px auto;
}

.entry-content .table-of-contents {
  list-style: inherit;
  color: inherit;
  background: none;
  position: static;
  border: none;
  border-radius: 0;
}
.entry-content .table-of-contents::before, .entry-content .table-of-contents::after {
  content: none;
  transform: translate(0);
  position: static;
  background: none;
  font-size: inherit;
  letter-spacing: inherit;
  font-family: auto;/*スケッチフォントを使いたい場合はこの行を消してください*/
  color: inherit;
}
.table-of-contents a {
  color: inherit;
  text-decoration: inherit;
}
.table-of-contents li {
  position: static;
}
.table-of-contents ul {
  list-style: inherit;
}
.table-of-contents ul li::before {
  content: none;
  border: none;
  position: static;
}

/*--------------------------------------
  口コミボックス
--------------------------------------*/
.good,.ungood{border:2px solid #f4f4f5;color:#797979;padding:1.5em 1em;margin:2em 0}.good .box-title,.ungood .box-title{display:flex;align-items:center;line-height:1;margin-bottom:5px}.good .box-title,.good .box-title:before{color:#fda359}.ungood .box-title,.ungood .box-title:before{color:#4cb1bf}.good .box-title:before,.ungood .box-title:before{font-family:"font awesome 5 free";margin-right:5px;font-size:1.7em}.good .box-title:before{content:"\f599"}.ungood .box-title:before{content:"\f5c8"}

/*---質疑応答---*/
.qaContainer dt {
padding: 10px 10px 10px 35px;
border-radius: 5px;
background: #cce6ff;
text-indent: -25px;
}
.qaContainer dt:before {
content: "Q.";
font-weight: bold;
margin-right: 7px;
}
.qaContainer dd {
margin: 20px 10px 40px 35px;
text-indent: -25px;
}
.qaContainer dd:before {
content: "A.";
color: #1771c6;
font-weight: bold;
margin-right: 7px;
}

/*** Cappuccino 年を表示する ***/
.page-index .archive-date .date-year,.entry-date .date-year,.page-archive .date-year{order:3;display:block;padding:0 6px;margin:0 6px 0 0;border:solid 1px #b7b7b7;border-radius:4px;font-size:13px;line-height:1.4;letter-spacing:1px;display:flex;flex-direction:column;text-align:center}.page-index .archive-date .date-year::before,.entry-date .date-year::before,.page-archive .date-year::before{content:"YEAR";font-size:10px;border-bottom:solid 1px #b7afaf}@media (max-width:600px){.page-archive .date-year::before{display:none}}

/*---追従する記事名URLコピーボタン---*/
.kijicopy {/*ボタンの形を調整*/
    position: fixed;/*画面に固定して表示*/
    bottom: 60px;
    left: 10px;/*画面左からの位置*/
    height: 50px;/*ボタンの高さ*/
    width: 100px;/*ボタンの横幅*/
    border-radius: 5%;/*丸さ加減*/
    z-index: 9;/*重なりの順番を指定*/
    opacity: 0.9;/*透明度合。少ないほど透明*/
    font-size: .7em;/*文字の大きさは少し小さく*/
    text-align: center;/*文字は中央寄せ*/   
    background: #FFF;/*背景色*/
    opacity: 0.6;/*透明度合。少ないほど透明*/
    color: #043F98;/*文字色＆枠線の色*/
    border: 1px solid;/*枠線の太さと種類*/
    text-decoration: none;/*下線を削除*/
}
.kijicopy p {/*文字部分の位置調整*/
    margin-bottom: -5px;/*外側下の余白*/
    margin-top: 5px;/*外側上の余白*/
}

/*---↑記事名URLコピーボタン---*/ 
.hatena-module-title {
    margin-bottom: none;
    padding-top: none;
    color: none;
    color: var(--font-color);
    font-size: none;
    font-weight: none;
    font-style: none;
    text-align: none;
    letter-spacing: none;
    border-bottom: none;
}
/* サイドバー 直線重ねる */
.hatena-module-title {
    color: #555;
    font-size: 120%;/* 文字サイズ */
    position: relative;
    text-align: center;
    display: -webkit-flex;
    display: flex;
    padding: 0;
    margin-bottom:15px;
    align-items: center;
}
.hatena-module-title::before,
.hatena-module-title::after {
    content: '';
    flex-grow: 1;
    background-color:#555;
    height: 1px;
}
.hatena-module-title::before {
     margin-right: .5em;
}
.hatena-module-title::after {
     margin-left:.5em;
}

.carousel {
    width: 100%;
    max-width: 1120px;
    /* カルーセル最大幅 */
    display: block;
    margin: 2em auto;
    margin-bottom: 5em ;
    padding: 0em;
    height:230px;
box-shadow: var(--shadow1-color) 0px 4px 6px -1px, var(--shadow2-color) 0px 2px 4px -1px;
}

.carousel-cell {
  width: 20%;
  height: auto;
  margin-right: 1vw;
  border-radius: 5px;
  counter-increment: carousel-cell;
  overflow: hidden;
  box-shadow: var(--shadow1-color) 0px 4px 6px -1px;
}

.cimage:hover {
    opacity: 0.6;
    transition-duration: 0.5s;
}
.flickity-viewport{
height:100% !important;
}

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

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

.cimage {
    position: relative;
    width: 100%;
    height: 150px;
    max-height: 150px;
    object-fit: fill;
}

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

@media screen and (max-width:480px){
.carousel {
    width: 100%;
    max-width: 480px;
    /* カルーセル最大幅 */
    margin: 0.1em auto;
    margin-bottom: 3em ;
    padding: 1em;
    height:155px;
}
.carousel-cell {
        width: 35%;
        margin-right: 0.5em;
}
    .ccat {
        font-size: .5em;
    }
    .headline {
        font-size: .7em;
    }

    .cimage {
        height: 90px;
    }
    .flickity-prev-next-button.next {
right: 40px!important;
    }
.flickity-page-dots {
    display: block;
    width: 85% !important;
}
}

@media only screen and (max-width: 750px) {
    body {
        overflow-x: hidden;
    }
    html {
        overflow-x: hidden;
    }
}

/************************************
** 何でも追従機能
************************************/
/* PC(タブレット) */
.fixed-wrap{
  position:fixed;
  z-index:100;
  max-width:220px; /* 最大横幅 */
  display:none;
  bottom:45px; /* 配置場所(画面下からの距離) */
  right:430px; /* 配置場所(画面右からの距離) */
}
.fixed-wrap img{
  width:100%;
  height:auto;
}
/* スマホ */
@media screen and (max-width: 559px) {
  .fixed-wrap{
    max-width:200px; /* 最大横幅 */
    bottom:48px; /* 配置場所(画面下からの距離) */
    right:60px; /* 配置場所(画面右からの距離) */ 
    left:unset;
    }
}

/*ここから*/
@media screen and (max-width: 960px) {
    #box2-inner {
        padding: 0;
        height: 100%;
     }
    .hatena-module.hatena-module-html:nth-last-child(1) {
        display: none;
    }
    .hatena-module.hatena-module-html:nth-last-child(2) {
        position: sticky;
        position: -webkit-sticky;
        /* Safari */
        top: 10px;
        overflow-y: scroll;
    }
}

/* スマホPC共有 */

/*         var tocHatenaModule = $(document.createElement("div"))
.addClass("hatena-module hatena-module-html humcontent")
            .append($(document.createElement("div")).addClass("hatena-module-body").append(toc_clone)) */

.humcontent {
    position: fixed;
    top: 63px;
    left: -100%;
    width: 100%;
    z-index: 100;
    transition: all .5s;
}

.humcontent.active {
    left: 0;
}
.humcontent .hatena-module-body {
  background-color: #fff;
  overflow: hidden;
  margin: 0 3%;
  border-radius: 10px;
}
.humcontent .table-of-contents {
  background-color: rgba(255, 255, 255, .9);
  border: none;
  padding: 2.5em 1em 1em 3em;
  margin: 1em 0 1.5em;
  position: relative;
  color: #fff;
  list-style: decimal;
  max-height: calc(100vh - 330px);
  overflow: scroll;
}
.humcontent .table-of-contents::before {
    font-family: fontawesome !important;
    content: "\f0ca  タップできる目次" !important;
    display: inline-block;
    padding: 0 1em;
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 125%;
    letter-spacing: .05em;
    color: #668ad8;
    font-family : "Segoe UI", "Helvetica Neue", Helvetica, Arial, "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
    background-color: transparent;
    white-space: nowrap;
    z-index: 1;
}
.humcontent .table-of-contents::after {
    content: "";
    display: block;
    position: absolute;
    top: 1em;
    left: 35%;
    transform: translateX(-50%);
    width: calc(100% - 2em);
    height: 10px;
    background: none
}
/*  */
.humcontent .table-of-contents li ul {
    margin: 0 0 .3em 0;
    font-size: 15px;
    line-height: 1.4;
}

.humcontent .table-of-contents li ul li {
    position: relative;
    font-weight: normal;
}

.humcontent .table-of-contents li ul li::before {
    position: absolute;
    content: "";
    font-size: 1.4em;
    left: -20px;
    top: 9px;
    color: #668ad8;
    background-color: #668ad8;
    width: 10px;
    border-radius: 50%;
    border: none;
    height: 10px;
}

/* h4以降非表示 */
.humcontent .table-of-contents li ul li ul{
display: none;

}
/* ｈ２のみ */
.humcontent .table-of-contents > li {
    font-weight: bold;
    line-height: 1.2;
}
.humcontent .table-of-contents > li::marker {
    color: #333;
}
.humcontent a {
    color: #333 !important;
}

@media screen and (min-width: 960px) {
    .humcontent .table-of-contents>li {
        position: relative;
        left: 25%;
    }
}
/* 2022/04/29 */

.humcontentBefore.active {
  background: rgba(0,0,0,.75);
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100vw !important;
  z-index: 100;
}
/*目次ボタン*/

.hi-mkj {
    display: inline-block;
    position: fixed;
    bottom: 80px;
    left: 9px;
    height: 60px;
    width: 60px;
    line-height: 60px;
    text-align: center;
    opacity: 0.7;
    border-radius: 50%;
    z-index: 5;
    text-decoration: none!important;
    background: #fff!important;
    border: 1px solid #668ad8;
    color: #668ad8!important;
    z-index: 1000;
}

.hi-mkj:after {
    content: "目次";
    position: absolute;
    top: 15px;
    left: 14px;
    font-size: 10px;
}

.hi-mkj:before {
    font-family: fontawesome;
    content: "\f0ca";
    position: absolute;
    top: -2px;
    left: 17px;
    font-size: 26px;
}
.hi-mkj.active:before {
    font-family: fontawesome;
    content: "\f00d";
    position: absolute;
    top: -4px;
    left: 20px;
    font-size: 26px;
}

/*目次ボタン*/

.hi-mkj {
    display: inline-block;
    position: fixed;
    bottom: 130px;
    left: 9px;
    height: 60px;
    width: 60px;
    line-height: 60px;
    text-align: center;
    opacity: 0.7;
    border-radius: 50%;
    z-index: 5;
    text-decoration: none!important;
    background: #fff!important;
    border: 1px solid #668ad8;
    color: #668ad8!important;
    z-index: 1000
}
.hi-mkj.active:after {
    content: "閉じる";
    position: absolute;
    top: 15px;
    left: 14px;
    font-size: 10px;
}

.hi-mkj:after {
    content: "目　次";
    position: absolute;
    top: 15px;
    left: 14px;
    font-size: 10px;
}

.hi-mkj:before {
    font-family: fontawesome;
    content: "\f0ca";
    position: absolute;
    top: -2px;
    left: 17px;
    font-size: 26px;
}
/* サイドバー固定*/
#box2 {
  display: flex;
}
.hatena-module:last-of-type {
  position: -webkit-sticky;/*safari対応*/
  position: sticky;
  top: 70px;/*ここで上からの距離を調整*/
}

/* 比較表*/
#syusin {
  border-collapse: collapse;
  margin: 0 auto;
  padding: 0;
  max-width: 700px;
  table-layout: fixed;
}

#syusin thead th {
  padding: 1em .8em;
  border: 3px solid #fff ;
  /* 線の太さ・種類・色コード */
  background-color: #fff ;
}
#syusin thead th:nth-child(1){
background: #bccdeb;
}
#syusin tr {
  background-color: #fff;
  padding: .35em;
}

#syusin tr:nth-child(even) {
  background-color: #f9f9f9 ;
}

#syusin td {
  padding: .7em;
  text-align: center;
  border: 3px solid #fff ;
  /* 線の太さ・種類・色コード */
}

#syusin th {
  font-size: .75em;
  border: 3px solid #fff ;
  /* 線の太さ・種類・色コード */
  background: #bccdeb ;
}

i {
  font-size: 1em
}

.plan1 {
  background: #03A9F4 !important;
}
.plan1_i {
  color: #03A9F4;
}
.plan5 {
  background: #fd6767 !important;
}
.plan5_i {
  color: #fd6767;
}
.plan6 {
  background: #FFC107 !important;
}
.plan6_i {
  color: #FFC107;
}
.plan4 {
  background: #009688 !important;
}
.plan4_i {
  color: #009688;
}
.plan3 {
  background: #4caf50 !important;
}
.plan3_i {
  color: #4caf50;
}
.plan2 {
  background: #cddc39 !important;
}
.plan2_i {
  color: #cddc39;
}
.price {
  color: #fff;
  font-weight: bold;
  font-size: 1.8em;
  text-align: center;
  margin-bottom: 10px
}
.price span {
  font-size: .6em;
}
.btnhikaku {
  background: #fff;
  color: #000 !important;
  padding: 1em;
  border-radius: 5px;
  display: block;
  text-decoration: none !important;
  font-size: .8em
}
/* 比較表終わり*/

/* ### パン屑リストタイトル名表示 ### */
.breadcrumb-child:last-of-type {
display: block;
}

/* ### ヘッダーの背景色 ### */
#blog-title{
background: #d1d9e8 !important; 
}

.box29 {
    margin: 2em 0;
    background: #ffebe9;
}
.box29 .box-title {
    font-size: 1em;
    background: #ff7d6e;
    padding: 2px;
    text-align: center;
    color: #FFF;
   letter-spacing: 0.05em;
}
.box29 p {
    padding: 15px 20px;
    margin: 0;
}

.box9 {
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #ff7d6e;
    background: #ffebe9;
    border-top: solid 10px #ff7d6e;
}
.box9 p {
    margin: 0; 
    padding: 0;
}

/** 合わせて読みたい囲み枠 */
.emphasize-link-tab{position:relative;margin:36px 0 16px;padding:16px 10px;border:2px solid #facfcf;background-color:#fffbf5}.emphasize-link-tab::before{font-family:FontAwesome;position:absolute;top:-12px;left:10px;padding:0 10px 0 26px;content:"あわせて読みたい";background-color:#facfcf;border-radius:10px;color:#fff;font-size:14px;font-weight:700;line-height:20px}.emphasize-link-tab::after{position:absolute;top:-16px;left:4px;width:28px;height:28px;background-color:#facfcf;border-radius:14px;line-height:25px;text-align:center;content:"\f010";font-size:18px;font-family:"blogicon";color:#fff}.emphasize-link-tab a::after{font-family:FontAwesome;content:"\f08e";color:#0044cc!important}.emphasize-link-tab a:hover:after{color:#b22222}

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

.entry-content tr:nth-child(odd) td {
  background: #fff;
}
.entry-content tr:nth-child(even) td {
  background: #f9f9f9;
}

.entry-content tr th:nth-child(1){
    position: sticky;
    left: -5px;
  }
/* スクロール */
#table-scroll01 {
box-sizing: border-box; /* スクロール用の箱*/
overflow-x: scroll; /* 横スクロール */
 -webkit-overflow-scrolling: touch;
border-right:3px solid #E0E0E0; /* 右端の線の太さ・種類・色コード */
}

/*赤光るボタン*/
.shiny-btn9 {
    display: block;
    position: relative;
    width: 80%;/*ボタンの幅*/
    padding: 10px 0;
    margin: 30px auto;
    background-color: #ed4545;/*ボタンの色*/
    box-shadow: 0 3px 0 0 rgba(198, 39, 39, 1);/*影の色(rgbaの値を変更)*/
    border-radius: 25px;
    font-weight: bold;
    font-size: 18px;
    color: #fff !important;
    text-align: center;
    text-decoration: none !important;
    overflow: hidden;
    transition: 0.2s;
}
.shiny-btn9:hover {
    text-decoration: none;
    color: #fff;
    opacity: 0.7;
    box-shadow: none;
    -webkit-transform: translateY(3px);
}
.shiny-btn9::before {
    position: absolute;
    content: '';
    display: inline-block;
    top: -180px;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: #fff;
    animation: shiny-btn9 3s ease-in-out infinite;
}
@-webkit-keyframes shiny-btn9 {
    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; }
}

/* To Top */
.toTop-nav {
position: fixed;
bottom: 130px;
right: -1px;
display: -webkit-flex;
display: flex;
padding: 0;
margin: 0;
z-index: 999; }
.toTop-nav li {
list-style-type: none;
background: rgba(0, 0, 0, 0.3);
border-radius: 50px;
text-align: center; }
.toTop-nav li:first-child {
margin-right: 10px; }
.toTop-nav li a {
display: block;
width: 50px;
height: 50px;
font-size: 30px;
line-height: 50px; }
.toTop-nav li a {
color: #fff;
text-decoration: none; }
.toTop-nav li a:visited {
color: #fff; }
.toTop-nav li a:hover {
color: #fff;
text-decoration: underline; }
.toTop-nav li a:active, .toTop-nav li a:focus {
color: #fff; }
.toTop-nav li a:hover {
text-decoration: none; }

/*アンダーラインで段落分け目次*/
.entry-content .table-of-contents{position:relative;margin:0;padding:.5em 1.2em 1em;background:#fff;font-size:100%;border-top:solid 40px #668ad8;border-right:solid 3px #668ad8;border-bottom:solid 3px #668ad8;border-left:solid 3px #668ad8;border-radius:8px;color:#668ad8}.entry-content .table-of-contents::before{content:"タップできる目次";position:absolute;top:-35px;left:23px;margin:0;color:#fff;border:0;font-size:120%;font-weight:700}.entry-content .table-of-contents::after{content:"\f039";font-family:blogicon;position:absolute;top:-35px;left:13px;color:#fff;font-weight:700;font-size:120%}.entry-content .table-of-contents li{margin:.2em 0 1em 1em;list-style-type:decimal;line-height:1.6em;color:#5a5a5a;font-weight:700}.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;font-weight:400;font-size:100%}.entry-content .table-of-contents li ul li ul li{font-size:90%}.entry-content .table-of-contents a{color:#5a5a5a;display:block;text-decoration:none;border-bottom:solid 2px #668ad8}.entry-content .table-of-contents ul li a{border-bottom:dashed 1px #668ad8}

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

.kakomi-box13 {
 position: relative;
 margin: 2em auto;
 padding: 1.2em;
 width: 90%;
 color: #555555; /* 文字色 */
 background-color: #fff;
 border: 2px solid #f09199; /* 枠線の太さ・色 */
 box-shadow: 0 0 5px 2px #fce2c4 inset;/* 影の色 */
}
.title-box13 {
 position: absolute;
 padding: 0 .5em;
 left: 20px;
 top: -15px;
 font-weight: bold;
 background-color:  #fff; /* タイトル背景色 */
 color: #f09199; /* タイトル文字色 */
}

.box26 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #f9e059;
    border-radius: 8px;
}
.box26 .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 17px;
    background: #FFF;
    color: #f9e059;
    font-weight: bold;
}
.box26 p {
    margin: 0; 
    padding: 0;
}

.box14{
    padding: 0.2em 0.5em;
    margin: 2em 0;
    background: #d6ebff;
    box-shadow: 0px 0px 0px 10px #d6ebff;
    border: dashed 2px white;
}
.box14 p {
    margin: 0; 
    padding: 0;
}

.box15{
    padding: 0.2em 0.5em;
    margin: 2em 0;
    background: #ffeaea;
    box-shadow: 0px 0px 0px 10px #ffeaea;
    border: dashed 2px white;
}
.box15 p {
    margin: 0; 
    padding: 0;
}

/* 吹き出しのCSS　*/
.entry-content .l-fuki,
.entry-content .r-fuki {
  position: relative;
  width: calc(100% - 82px);
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding: 20px;
  border-radius: 6px;
  border: 2px solid #ddd;
  box-shadow: 0 3px 8px -2px rgba(0,0,0,.16);
  background-color: #fff;
  z-index: 1;
  box-sizing: border-box;
}
.entry-content .l-fuki {
  margin: 30px auto 50px 0;
}
.entry-content .r-fuki {
  margin: 30px 0 50px auto;
}
.entry-content .l-fuki::before,
.entry-content .r-fuki::before {
  position: absolute;
  content: "";
  top: 16px;
  width: 10px;
  height: 10px;
  border-right: 2px solid #ddd;
  border-bottom: 2px solid #ddd;
  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: 65px;
  height: 65px;
  top: -6px;
  border-radius: 50%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  box-shadow: 1px 1px 5px #aaa;
  box-sizing: border-box;
}
.entry-content .l-fuki::after {
  right: -82px;
}
.entry-content .r-fuki::after {
  left: -82px;
}
@media screen and (min-width: 478px) {
  .entry-content .l-fuki::after,
  .entry-content .r-fuki::after {
    width: 80px;
    height: 80px;
  }
  .entry-content .l-fuki,
  .entry-content .r-fuki {
    width: calc(100% - 106px);
  }
  .entry-content .l-fuki::after {
    right: -106px;
  }
  .entry-content .r-fuki::after {
    left: -106px;
  }
}
.hatena::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/p/posiblo/20200710/20200710161938.png);}
.kaiketsu::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/p/posiblo/20200710/20200710161922.png);}
.setsumei::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/p/posiblo/20200816/20200816182131.png);}
.ko::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/p/posiblo/20200910/20200910151903.png);}
.jyosyu::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/p/posiblo/20200926/20200926232748.png);}
.neko::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/p/posiblo/20201014/20201014210036.png);}
.a::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/p/posiblo/20201230/20201230142036.png);}
.b::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/p/posiblo/20201230/20201230142121.png);}
.c::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/p/posiblo/20201230/20201230143404.png);}
.d::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/p/posiblo/20201230/20201230143502.png);}
.e::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/p/posiblo/20201230/20201230143559.png);}
.f::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/p/posiblo/20201230/20201230143640.png);}
.n-kyara::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/p/posiblo/20210124/20210124143241.png);}
.k-kyara::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/p/posiblo/20230308/20230308165843.png);}
.h-kyara::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/p/posiblo/20230309/20230309163939.png);}
.komatta-kyara::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/p/posiblo/20210129/20210129153601.png);}
.egao-kyara::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/p/posiblo/20230712/20230712020716.png);}
.rin::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/p/posiblo/20201029/20201029165037.png);}
.nayami::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/p/posiblo/20201029/20201029165105.png);}
.roujin::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/p/posiblo/20211010/20211010032441.jpg);}
.nayamu-syufu::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/p/posiblo/20230212/20230212161913.jpg);}
.yorokobu-syufu::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/p/posiblo/20230212/20230212161900.jpg);}

.list04 {
  padding: 0.5em 1em 0.5em 2.3em;
  position: relative;
  background: #f9fff5;
}

.list04 li {
  line-height: 1.5;
  padding: 0.5em 0;
  list-style-type: none!important;
}

.list04 li:before {

  font-family: "FontAwesome";
  content: "\f1b0";/*アイコンの種類*/
  position: absolute;
  left : 1em;/*左端からのアイコンまでの距離*/
  color: #ffcb8a;/*アイコン色*/
}

.list05 {
  padding: 0.5em 1em 0.5em 2.3em;
  position: relative;
  background: #f9fff5;
}

.list05 li {
  line-height: 1.5;
  padding: 0.5em 0;
  list-style-type: none!important;
}

.list05 li:before {

  font-family: "FontAwesome";
  content: "\f00c";/*アイコンの種類*/
  position: absolute;
  left : 1em;/*左端からのアイコンまでの距離*/
  color: #1d89b5;/*アイコン色*/
}

/*まとめ*/
.recommend-entry {
    position: relative;
    border: 1px solid #4abdac;
    padding: 15px;
}

.recommend_title {
    position: absolute;
    top: -20px;
    left: 20px;
    font-weight: bold;
    font-size: 120%;
    background: #fff;
    padding: 0 .5em;
    color: #4abdac;/*タイトル色*/
}

.recommend_title:before {
    margin-right: 10px;
    font-family: "FontAwesome";
    content: "\f00c";/*アイコンの種類*/
    color: #4abdac;/*アイコン色*/
    display: inline-block;   
}

/*アドセンスを関連記事の上にもってくる*/
.customized-footer{
display:-webkit-flex;
display:flex;
-webkit-flex-direction: column-reverse;
flex-direction: column-reverse;
}

.list01 {
   padding:0.5em;
   counter-reset:number; /*数字をリセット*/
}
.list01 li {
  position: relative;
  padding-left: 30px;
  line-height: 1.5em;
  padding: 0.5em 0.5em 0.5em 30px;
  list-style-type: none; /*数字を一旦消す*/
 }

.list01 li:before{
 /* 以下数字をつける */
  position: absolute;
  counter-increment: number;
  content: counter(number);
  /*以下数字のデザイン変える*/
  display:inline-block;
  color: white;
  background: #ffb6c1;
  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: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.affi-box {
 background-color: aliceblue;
 box-sizing: border-box;
 border-radius: 5px;
 padding: 5px 15px;
 text-align: center;
}
.affi-box .affi-box-title {
 font-weight: bold;
 margin-bottom: 0;
 padding-top: 8px;
}
.affi-box ul {
 display: inline-block;
 text-align: left;
 width: 60%;
 margin: .2em auto!important;
 padding: 0;
 border: none;
}
.affi-box ul li{
 font-weight: 500;
    list-style: none;
    font-size: .9em;
    position: relative;
 padding-left: 1.5em!important;
}
.affi-box ul li:before{
    font-family: "Font Awesome 5 Free";
    content: "\f00c" !important;
    font-weight:600;
    color:#1d89b5;
    position:absolute;
    left: 0!important;
    top: 0 !important;
    width: 0 !important;
    height: 0 !important;
}
.affi-box-button {
 background-color: #06d106;
 margin: -10px auto 16px auto;
 padding: 5px 0;
 width: 95%;
 text-align: center;
 border-radius: 5px;
 border-bottom: solid 3px #2e8b57;
 position: relative;
 overflow: hidden;
}
.affi-box-button:hover {
 opacity: 0.8;
}
.affi-box-button::before {
 content: '';
    position: absolute;
    top: -10px;
    left: -20%;
    width: 40px;
    height: 100%;
    transform: scale(2) rotate(20deg);
    background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, .8) 100%, rgba(255, 255, 255, 0) 0%);
    /* アニメーション */
    animation: shiny 5s ease-in-out infinite;
}
@keyframes shiny {
    0% { left: -20%; }
    10% { left: 120%; }
    100% { left: 120%; }
}
.affi-box-button a{
 color: #fff;
 text-decoration: none!important;
}
.affi-box .affi-box-text {
 font-size: 80%;
 margin-top: -10px; 
 margin-bottom: 5px;
}
@media only screen and (max-width: 415px) {
  .affi-box ul {
  width: 90%;
  text-align: left;
 }
}

/***ボトムナビゲーション***/
#bottom-editarea{margin-bottom:30px}#bottom-nav{list-style:none;display:flex;width:100%;height:50px;position:fixed;bottom:0;background:#fff;border-top:1px solid gray;border-bottom:1px solid gray;margin:0;padding:0;z-index:9998;padding-bottom:constant(safe-area-inset-bottom);padding-bottom:env(safe-area-inset-bottom)}.bottom-nav-close{display:block;padding:15px}#bottom-nav-open{display:flex;flex-direction:column;text-align:center}#bottom-nav-drawer{position:relative}#bottom-nav-content{overflow:auto;position:fixed;top:0;left:0;z-index:100001;width:85%;max-width:500px;height:100%;background:#fff;transition:.3s ease-in-out;-webkit-transform:translateX(-105%);transform:translateX(-105%)}.bottom-icon{display:block;font-size:25px;color:#000!important;padding-top:8px;font-weight:700}#bottom-nav li{margin:0;padding:0;text-align:center;font-size:10px;width:100%}.bottom-nav-icon{font-size:25px}.mini-text{font-size:10px;color:#000;font-weight:700}#bottom-nav a{text-decoration:none}#bottom-nav a,#bottom-nav li{font-size:1rem;display:flex;flex-direction:column;line-height:1}.bottom-nav-unshown{display:none}#bottom-nav-close{display:none;position:fixed;z-index:10000;top:0;left:0;width:100%;height:100%;background:#000;transition:.3s ease-in-out}.bottom-nav-close{text-align:center;display:flex;flex-direction:column;padding:1em;font-size:.85rem;font-weight:700;letter-spacing:.05em;line-height:1}.bottom-nav-close i{font-size:2rem}.bottom-nav{margin:0;padding:0}.bottom-nav li a{display:block;padding:.8em;color:#555;border-top:1px dashed #a9a9a9;font-weight:700;transition:.3s}#nav-share-content{overflow:auto;position:fixed;bottom:60px;left:0;z-index:9999;width:100%;height:50px;background:#fff;transition:.3s ease-in-out;-webkit-transform:translateX(100%);transform:translateX(100%);margin:0;padding:0;display:flex;list-style:none}#bottom-nav-input:checked~#bottom-nav-close,#bottom-category-input:checked~#bottom-nav-close{display:block;opacity:.5}#bottom-nav-input:checked~#bottom-nav-content,#bottom-category-input:checked~#bottom-nav-content{-webkit-transform:translateX(0);transform:translateX(0);box-shadow:6px 0 25px rgba(0,0,0,.15)}#bottom-nav-content-menu li a{line-height:1.5;display:block;font-weight:700;display:flex;padding:1em 0 .5em}#bottom-nav-content-menu li{font-size:15px;box-sizing:border-box}#bottom-nav #nav-content-category{margin:1em 0;background:linear-gradient(-45deg,transparent 25%,#aaa 25%,#aaa 50%,transparent 50%,transparent 75%,#aaa 75%) left top/7px 7px repeat-x;box-shadow:0 0 10px -5px rgba(0,0,0,.2),0 5px 10px -5px rgba(0,0,0,.2)}#bottom-nav-content-menu{list-style:none;margin:0;padding:0}#bottom-nav>li>a:hover,#bottom-nav-open:hover{cursor:pointer;color:#a9a9a9}#bottom-nav>li,#bottom-nav>li>a{color:gray}.bottom-nav-close:hover,.bottom-nav li:hover{cursor:pointer;background:#f5f5f5}
/*PC表示の際はボトムメニューは表示しない*/
@media(min-width: 768px){
    #bottom-nav{display:none; }
}

/***ステップバーデザイン3***/
.step-wrap3{counter-reset:count;margin:2em 0;position:relative}.step-content3{padding:1.3em 0 .3em 1em;margin:0 0 1em 1em;position:relative;border-top:solid 2px #ddd}.step-content3::before{content:"";display:block;position:absolute;bottom:0;left:-10px;border-style:solid;border-width:17px 8px 0 8px;border-color:#ddd transparent transparent transparent}.step-content3::after{content:"";display:block;height:calc(100% - 36px);border-left:dashed 4px #ddd;position:absolute;top:16px;left:-4px}.step-label3{padding:3px 20px 3px 15px;color:#fff;font-weight:700;position:absolute;top:-18px;left:-20px;background:#6ab5a5;border-radius:20px;z-index:1}.step-label3::after{counter-increment:count;content:counter(count);position:relative;left:.3em}.step-title3{font-weight:700;font-size:120%}.step-body3{margin-top:.5em;padding:0 0 1em}.step-wrap3>:last-child{box-shadow:5px 7px 0 -5px #ddd}.step-wrap3>:last-child::before,.step-wrap3>:last-of-type::after{display:none}

/* メモ　クリップ　Ａ */
.clip-box-a {
 position: relative;
 margin: 2em auto;
 padding: 15px 35px 15px 25px;
 width: auto; /* ボックス幅 */
 background-color: #fff; /* ボックス背景色 */
 color: #555555; /* 文章色 */
 border: 1px solid #ccc; /* 枠線 */
 box-shadow: 1px 1px 1px #acacac; /* 影の色 */
}
.clip-box-a::before {
 position: absolute;
 content: '';
 top: -15px;
 right: 10px;
 height: 55px;
 width: 15px;
 border: 3px solid #555555; /*クリップ色 */
 background-color: none;
 border-radius: 12px;
 box-shadow: 1px 1px 2px #999;
 transform: rotate(10deg);
 z-index: 1;
}
.clip-box-a::after {
 position: absolute;
 content: '';
 top: 0px;
 width: 10px; 
 right: 20px;
 border: solid 5px #fff; /*背景色と同じ色にする*/
 z-index: 2;
}

/*  メニューバー（最後まで続く） */
/*
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: 50px;/* PC用メニュー高さ */
    position: relative;
    top: auto;
    right: auto;
    z-index: 100;
    background-color: #555;/* 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: 14px;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 50px;/* PC用メニュー高さ */
    line-height: 50px;/* PC用メニュー高さ */
    background-color: #555;/* PC用メニューボタン背景色 */
    text-align: center;
    list-style-type: none;
}

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

.drawer_menu .drawer_nav li a {
    color: #fff;/* 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: 100px;/* ドロップダウンメニューボタン横幅 */
    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: #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;
  opacity: 0.6;
  color: #fff;
  border: none;
  padding: 5px;
  width: 50px;
  letter-spacing: 0.1em;
  cursor: pointer;
  position: fixed;
  top: 4px;
  right: 10px;
  z-index: 1001;
  text-align: center;
  outline: none;
 }
    
 .drawer_menu .drawer_button.active .drawer_bar {
        width: 49px;
    }
    .drawer_menu .drawer_button.active .drawer_bar1 {
        transform: rotate(30deg);
    }
    .drawer_menu .drawer_button.active .drawer_bar2 {
        opacity: 0;
    }
    .drawer_menu .drawer_button.active .drawer_bar3 {
        transform: rotate(-30deg);
    }
    .drawer_menu .drawer_button.active .drawer_menu_text {
        display: none;
    }
    .drawer_menu .drawer_button.active .drawer_close {
        display: block;
    }
    .drawer_menu .drawer_bar {
        display: block;
        height: 2px;
        margin: 10px 0;
        transition: all 0.2s;
        transform-origin: 0 0;
    }
    .drawer_menu .drawer_text {
        text-align: center;
        font-size: 10px;
    }
    .drawer_menu .drawer_close {
        letter-spacing: 0.08em;
        display: none;
    }
    .drawer_menu .drawer_menu_text {
        display: block;
    }
    .drawer_menu .drawer_nav_wrapper {
        width: 250px;
        height: 100%;
        transition: all 0.2s;
        transform: translate(250px);
        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;
        padding-left: 20px;
    }
    .drawer_menu .drawer_nav li {
        background-color: #fff;
        height: auto;
        line-height: 50px;/*  ドロワーメニューリスト項目高さ */
        position: relative;
    }
    .drawer_menu .drawer_nav li a {
        background-color: #fff;/* ドロワーメニューリスト背景色 */
        color: #555;/* ドロワーメニューリスト文字色 */
        display: block;
        text-align: left;
    }
    /* スマートフォン2階層目 */
    .drawer_menu .drawer_nav li:hover ul.second-level {
        display: block;
    }
    .drawer_menu .drawer_nav li ul.second-level {
        visibility: visible;
        position: relative;
        padding: 0;
        z-index: 1001;
    }
    .drawer_menu .drawer_nav li ul.second-level li {
        border-top: 1px solid #eee;
    }
    .drawer_menu .drawer_nav li ul.second-level li a {
        padding-left: 20px;
    }
    .drawer_menu .drawer_nav_wrapper.open {
        transform: translate(0);
    }
    .drawer_menu.left .drawer_button {
        right: auto;
        left: 32px;
    }
    .drawer_menu.left .drawer_nav_wrapper {
        transform: translate(-250px);
        right: auto;
        left: 0;
    }
    .drawer_menu.left .drawer_nav_wrapper.open {
        transform: translate(0);
    }
    .pc-hidden {
        text-align: center;
    }
}
/*  ウィジェットタイトル */
.drawer-title {
    text-align: center;
    width: 100%;
    height: 50px;
    line-height: 50px;
    background-color: #555;/* ドロワーメニュー内タイトルライン背景色 */
    color: #fff;
}
/*  メニューバー(終わり) */


/************************************
** アイコンつきリスト
************************************/
/* ボックス全体 */
.iconbox{
  margin: 0 auto 2em; /* 余白 */
  background: #fef9ed; /* 背景色 */
  border-radius:4px; /* 角丸 */
  max-width:600px; /* 横幅 */
  padding: 0; /* 余白 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2); /* 影 */
}
/* ボックスタイトル */
.iconbox .box-title {
  font-size: 18px; /* 文字サイズ */
  background: #fdc44f; /* 背景色 */
  text-align: center; /* 文字配置 */
  color: #fff; /* 文字色 */
  font-weight: bold; /* 文字太さ */
  letter-spacing: 0.05em; /* 文字間隔 */
  border-radius:4px 4px 0 0; /* 角丸 */
  line-height:1.5; /* 行間 */
  padding:1em 2em; /* 余白 */
}
/* 段落の余白リセット */
.iconbox p {
  margin: 0;/* 文字の余白リセット */
  padding: 0; /* 文字の内側余白リセット*/
}
/* ボックス 中 */
.iconbox .iconbox-wrap{
  display:-webkit-box; /* 配置 */
    display:-ms-flexbox; /* 配置 */
  display:flex; /* 配置 */
  padding:1.3em 2em; /* 余白 */
}
/* コンテンツ */
.iconbox .iconbox-wrap .box-content{
   width: 97%;/*横幅 */
   margin: 0 3% 0 0 !important;/* 余白 */
   line-height:1.8;/* 行間 */
  -ms-flex-item-align: center;/* 中央寄せ */
   align-self: center;/* 中央寄せ */
}
/* コンテンツ段落 */
.iconbox .iconbox-wrap .box-content p{
  margin-bottom:1em;/*余白 */
}
/* アイコン&吹き出し */
.iconballoon{
  -ms-flex-item-align: end; /* 下部に配置 */
  align-self: flex-end; /* 下部に配置 */
}
/* アイコン */
.iconballoon .icon{
  text-align:center;/* 位置を中央へ */
}
/* アイコン画像 */
.iconballoon .icon img{
  width: 120px; /* 横幅 */
  margin:0; /* 余白 */
}
/* アイコン画像 (amp)*/
.iconballoon amp-img{
  max-width: 120px !important; /* 横幅 */
  margin:0; /* 余白 */
}
/* 吹き出し文字 */
.iconballoon .balloon p{
  line-height:1.4; /* 行間 */
}
/* 吹き出し */
.iconballoon .balloon{
  position:relative; /* 配置 */
  width:140px; /* 横幅 */
  background:#fff; /* 背景色 */
  padding:10px; /* 余白 */
  text-align:center; /* 中央寄せ */
  border:2px solid #999;/* 線(太さ 種類　色) */
  color:#555555;/* 文字色 */
  font-size:14px;/* 文字サイズ */
  font-weight:bold;/* 文字太さ */
  border-radius:10px;/* 角丸 */
  margin-bottom:10px;/* 余白 */
  line-height:1.5; /* 行間 */
}
/* 吹き出し(三角) */
.iconballoon .balloon:after,.balloon:before{
  border: solid transparent;
  content:'';
  height:0;
  width:0;
  position:absolute;
  top:100%;
  left:50%;
}
.iconballoon .balloon:after{
    border-top-width:10px;
    border-bottom-width:10px;
    border-left-width:10px;
    border-right-width:10px;
    margin-left: -10px;
    border-top-color:#FFFFFF;
}
.iconballoon .balloon:before{
   border-color:"rgba(153, 153, 153, 0)";
    border-top-width:12px;
    border-bottom-width:12px;
    border-left-width:12px;
    border-right-width:12px;
    margin-left: -12px;
    margin-top: 1px;
    border-top-color:#999999;
}
/*スマホ*/
@media screen and (max-width: 480px){
/* ボックスタイトル */
.iconbox .box-title {
  font-size: 14px; /* 文字サイズ */
}
/* ボックス 中 */
.iconbox .iconbox-wrap {
    padding: 1em 1em 1em 1.5em;/* 余白 */
}
/* コンテンツ */
.iconbox .iconbox-wrap .box-content{
  font-size:12px;/*文字サイズ */
}
/* アイコン画像 */
.iconballoon .icon img{
  width:80px;/* 横幅 */
  margin-top:5px;/* 余白 */
}
/* アイコン画像(amp) */
.iconballoon amp-img{
  max-width:80px !important;/* 横幅 */
  margin-top:5px;/* 余白 */
}
/* 吹き出し */
.iconballoon .balloon{
  width:80px;/* 横幅 */
  font-size:10px;/* 文字サイズ */
  padding: 1em 0;/* 余白 */
  border: 1px solid #999;/* 線(太さ 種類 色) */
}
/* 吹き出し(三角) */
.iconballoon .balloon:after {
    border-top-width: 12px;
    border-bottom-width: 10px;
    border-left-width: 11px;
    border-right-width: 11px;
    margin-left: -11px;
    border-top-color: #FFFFFF;
}
}
/************************************
** 箇条書き(点)
************************************/
/* 箇条書き */
.iconbox .list {
  list-style: none;/* 行頭記号削除  */
  padding: 0 !important;/* 余白リセット */
  margin: 0 !important;/* 余白リセット */
  border:none;/* 線リセット */
}
/* 箇条書き 行 */
.iconbox .list li { 
  position: relative;/* 行頭記号の配置  */
  margin: 0 0 0.5em 0 !important;/* 余白  */
  padding: 0 0 0.5em 1.4em !important;/* 余白 */
  line-height:1.8;/* 行間 */
}
/* 箇条書き 行頭記号 */
.iconbox .list li:before {
  background-color: #ffa952; /* 記号色 */
  position: absolute; /* 行頭記号の配置 */
  content: ''; /* 空文字 */
  top:13px; /* 上からの距離 */
  left: 0; /* 左からの距離 */
  width: 7px; /* 横幅 */
  height: 7px; /* 縦幅 */
  border-radius: 4px; /*角丸 */
}
/* 箇条書き 行頭記号リセット */
.iconbox .list-number li:after{
  content:'';
}
/*スマホ*/
@media screen and (max-width: 480px){
  /* 箇条書き 行頭記号*/
   .iconbox .list li:before{
     top:8px;/* 上からの距離 */
   }
}
/************************************
** 箇条書き(番号)
************************************/
/* 箇条書き(番号) */
.iconbox .list-number{
   counter-reset:number; /* 番号リセット */
   list-style: none !important;/* 行頭番号削除) */
   padding:0 !important;/* 余白リセット */
   margin:0 !important;/* 余白リセット */
   border:none !important;/* 線リセット */
}
/* 箇条書き(番号) 行 */
.iconbox .list-number li {
   position: relative;/* 配置 */
   margin:0.5em 0 !important;/* 余白 */
   max-width:500px; /* 横幅 */
   padding: 0 0 0.5em 1.8em !important;/* 余白 */
   line-height:1.8;/* 行間 */
}
/* 箇条書き(番号) 行頭番号 */
.iconbox .list-number li:before {
   counter-increment: number;/* 番号 */
   content: counter(number);/* 番号 */
   background-color: #fdc44f; /* 背景色 */
   color: #fff; /* 番号色 */
   position: absolute;/* 配置 */
   font-weight:bold;/* 文字太さ */
   font-size: 14px;/* 文字大きさ */
   border-radius: 50%;/* 角丸 */
   left: 0;/* 左からの距離 */
   top:4px;/* 上からの距離 */
   width: 22px;/* 横幅 */
   height: 22px;/* 縦幅 */
   line-height: 22px;/* 行間 */
   text-align:center;/* 中央寄せ */
}
/*スマホ*/
@media screen and (max-width: 480px){
  /* 箇条書き(番号) 行 */
  .iconbox .list-number li{
     padding: 0 0 0.5em 2em !important;/* 余白 */
  }
  /* 箇条書き(番号) 行頭番号 */
  .iconbox .list-number li:before {
    font-size:10px;/* 文字大きさ */
    width: 18px;/* 横幅 */
    height: 18px;/* 縦幅 */
    line-height: 18px;/* 行間 */
    top:2px;/* 上からの距離 */
  }
}

/************************************
** アイコンフキダシボックス(グリーン)
************************************/
/* ボックス全体 */
.iconbox-pink{
  background: #eafaf7 !important; /* 背景色 */
}
/* ボックスタイトル */
.iconbox-pink .box-head-pink{
  background: #2fcdb4 !important; /* 背景色 */
}
/* 箇条書き(番号) 行頭番号 */
.iconbox .list-number li:before {
  background:#2fcdb4 !important; /* 背景色 */
}

.appreach{text-align:left;padding:10px;border:1px solid #7C7C7C;overflow:hidden}.appreach:after{content:"";display:block;clear:both}.appreach p{margin:0}.appreach a:after{display:none}.appreach__icon{float:left;border-radius:10%;overflow:hidden;margin:0 3% 0 0!important;width:25%!important;height:auto!important;max-width:120px!important}.appreach__detail{display:inline-block;font-size:20px;line-height:1.5;width:72%;max-width:72%}.appreach__detail:after{content:"";display:block;clear:both}.appreach__name{font-size:16px;line-height:1.5em!important;max-height:3em;overflow:hidden}.appreach__info{font-size:12px!important}.appreach__developper,.appreach__price{margin-right:.5em}.appreach__posted a{margin-left:.5em}.appreach__links{float:left;height:40px;margin-top:8px;white-space:nowrap}.appreach__aslink img{margin-right:10px;height:40px;width:135px}.appreach__gplink img{height:40px;width:134.5px}.appreach__star{position:relative;font-size:14px!important;height:1.5em;width:5em}.appreach__star__base{position:absolute;color:#737373}.appreach__star__evaluate{position:absolute;color:#ffc107;overflow:hidden;white-space:nowrap}


/* 
 * 全ボックス共通CSS 
 * 1つでもコピーすれば他のボックスではコピーする必要なし。
 */
.title-box {
    font-size: 20px;
}
.box-inside {
    font-size: 16px;
}
@media screen and (max-width: 480px){
    .title-box {
	font-size: 16px;
    }
    .box-inside {
	font-size: 14px;
    }
}
/*
 * 個別ボックスCSS
 */
.s_memo {
    margin-bottom: 1.5em;
    padding: 1em;
    background: #fff9e5; /* 背景色を変える場合はここを変更 */
    color: #545454;
}
.s_memo_ttl {
    margin-bottom: 5px;
    color: #ffb36b; /* タイトルの色を変える場合はここを変更 */
    font-weight: bold;
}
.s_memo_ttl:before {
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    margin: 0 6px 0 0;
    border-radius: 50%;
    color: #fff;
    font-family: FontAwesome;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
}
.s_memo .s_memo_ttl:before {
    background-color: #ffb36b; /* アイコンの色を変える場合はここを変更 */
    content: "\f040"; /* アイコンを変える場合はここを変更 */
}

/* リンクカード */
.pb-btn{
  margin: 3em auto;
  max-width:500px;
  width:80%;
  position:relative;
}
.pb-btn p{
  margin:0 !important;
  padding:0 !important;
}
.pb-btn a{
  display:block;
  padding:1.5em 2em 1.3em;
  color:#333 !important;
  background:#FAFAFA;
  border:2px solid #777;
  font-size:16px !important;
  font-weight:600;
  position:relative;
  transition:all 0.2s;
  text-decoration:none;
}
.pb-btn .pb-btn__text{
  max-width: 90%;
  display: block;
  line-height:1.8;
}
.pb-btn .pb-btn__label{
  background: #EE8F81;
  color: #fff;
  display: inline-block;
  padding: 0.5em 1em !important;
  font-size: 12px !important;
  line-height: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  position:absolute;
  top: -12px;
  left: 23px;
  z-index: 1;
}
.pb-btn .pb-btn__add{
  font-size:12px !important;
  letter-spacing:0.5px;
  margin: 7px auto 0 !important;
  max-width:90%;
  color: #EE8F81;
  font-weight:600;
  text-align:center;
}
.pb-btn a:after{
  position: absolute;
  content: "";
  display: inline-block;
  right: 7%;
  top: 50%;
  width: 9px;
  height: 9px;
  border-top: 3px solid #333;
  border-right: 3px solid #333;
  -webkit-transform: rotate(45deg) translateY(-50%);
  transform: rotate(45deg) translateY(-50%);
}
.pb-btn a:hover{
  border-color:#EE8F81;
  transition:0.2s;
  text-decoration:none;
  opacity:1;
}
@media screen and (max-width:600px) {
  .pb-btn{
    width:90%;
  }
  .pb-btn a {
    padding: 1.3em 1.3em 1.2em;
    font-size:14px !important;
  }
  .pb-btn .pb-btn__label{
    left:14px;
  }
  .pb-btn .pb-btn__add{
    text-align:left;
  }
}

.pb-btn__shadow a{
  box-shadow: 0px 4px 10px rgba(0,0,0,0.09);
  border:unset !important;
}
.pb-btn__shadow:hover{
  transform: translateY(2px);
}
.pb-btn__shadow:hover a{
  box-shadow: 0px 2px 5px rgba(0,0,0,0.09);
}
.pb-btn__shadow:hover .pb-btn__add{
  transform: translateY(-2px);
}

.pb-btn .pb-btn__label-2{
  color: #EE8F81;
  display: inline-block;
  font-size: 12px !important;
  line-height: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  position: absolute;
  top: -24px;
  left: -23px;
  z-index: 1;
  transform: rotate( -5deg);
}
.pb-btn .pb-btn__label-2:before,.pb-btn .pb-btn__label-2:after{
  display:inline-block;
}
.pb-btn .pb-btn__label-2:before{
  content:"＼";
  margin-right:3px;
}
.pb-btn .pb-btn__label-2:after{
  content:"／";
  margin-left:3px;
}


.pink-box {
position: relative;
margin: 40px 35px 25px 35px;
padding: 20px 25px 20px 50px;
box-sizing: border-box;
color: #464646;
background: #fff0f0;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}

.pink-box:before {
display: inline-block;
position: absolute;
top: -20px;
left: -15px;
width: 50px;
height: 50px;
text-align: center;
content: "\f12a";
font-family: "Font Awesome 5 Free";
font-weight: 900;
color: #eb4d4b;
font-size: 30px;
line-height: 50px;
background: #ff9d9d;
border-radius: 50%;
box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}

.pink-box p {
position: relative;
padding: 0;
margin: 10px 0;
line-height: 1.6;
}

.ao-box {
position: relative;
margin: 40px 35px 25px 35px;
padding: 20px 25px 20px 50px;
box-sizing: border-box;
color: #464646;
background: #dfe9fd;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}

.ao-box:before {
display: inline-block;
position: absolute;
top: -20px;
left: -15px;
width: 50px;
height: 50px;
text-align: center;
content: "\f12a";
font-family: "Font Awesome 5 Free";
font-weight: 900;
color: #4e8efc;
font-size: 30px;
line-height: 50px;
background: #acc7fc;
border-radius: 50%;
box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}

.ao-box p {
position: relative;
padding: 0;
margin: 10px 0;
line-height: 1.6;
}

/*影付き画像*/
.shadow {
margin-top: 5px; /* 画像の上の余白*/
display: inline-block;
box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.8); /*横方向　下方向　ぼかし　広がり　色 */
}

/*タブ切り替え*/
.tab-wrap {
  display: flex;
  flex-wrap: wrap;
  margin:20px 0;
}
.tab-wrap:after {
  content: '';
  width: 100%;
  height: 3px;
  background: #3b4675;
  display: block;
  order: -1;
}
.tab-label {
  color: White;
  background: LightGray;
  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;
  border-radius: 5px 5px 0 0;
  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: #3b4675;
}
.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;
}  

/*記事下ID消す*/
span.author.vcard {
display: none;
}

.hitokoto{background:rgba(255,229,178,.61);margin:2em 0;padding:25px;border-radius:10px}.hitokoto-circle1{font-size:16px;line-height:1.5;position:absolute;margin-top:-37px;font-weight:700;color:#fff;background-color:#ffa726;border-radius:50%;text-align:center;width:24px;height:24px}.hitokoto-circle1:after{content:"と";position:absolute;margin-top:.2em;font-weight:700;color:#fff;background-color:#ffa726;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 #ffa726;-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:700;color:#fff;background-color:#ffa726;border-radius:50%;text-align:center;width:24px;height:24px}.hitokoto-circle2:after{content:"と";position:absolute;margin-top:.2em;font-weight:700;color:#fff;background-color:#ffa726;border-radius:50%;text-align:center;width:24px;height:24px}.hitokoto p{margin:0;padding:0}

/* リンクボタン設置*/
.link-btn {
    border-radius: 3px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    max-width: 240px;
    padding: 10px 25px;
    text-decoration: none!important;
    color: #fff!important;
    font-weight: 600;
    border-radius: 50px;
    overflow: hidden;
    box-shadow: 0px 8px 10px -6px rgba(0,0,0,.3);
    transition: .2s;
}

.link-btn-copy {
  color: initial; /* コピー文字の色 */
 font-weight: 800;
  font-size: 0.9em; 
}

.link-btn:active {
  transform: translateY(4px);
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
  border-bottom: none;
}
.link-btn:before {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: -100%;
  background-image: linear-gradient( 130deg, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 55%);
  animation: shine 3s infinite;
}
@keyframes shine {
  33% {
    left: 100%;
  }
  100% {
    left: 100%;
  }
}
.link-btn:after {
    content: '';
    width: 5px;
    height: 5px;
    border-top: 3px solid #FFF;
    border-right: 3px solid #FFF;
    transform: rotate(45deg) translateY(-48%);
    position: absolute;
    top: 48%;
    right: 20px;
    border-radius: 1px;
    transition: 0.3s ease-in-out;
}

.link-btn:hover {
    box-shadow: none;
    transform: translateY(2px);
    opacity: .8;
}

/***ボタン背景色***/
.ao {
    background: #82a5ed;
}
.midori {
    background: #4DC1B7;
}
.pink {
    background: pink;
}

.daidai {
    background: #fca60d;
}

/*コピーライト*/
#footer{padding:45px;text-align:center;background:#ECE3E4;font-size:14px;color:#555!important}


/* 内部リンクのヘッダー被り対策 */
html {
  scroll-padding-top: 85px; /* 固定ヘッダの高さ分 */
}

#kotei > img {
height:100%;
}

#kotei {
background-color:rgb(231,225,228);
opacity: 1.0;
width:100%;
height:3.0em;
text-align:center;
position:fixed;
top:0;
z-index: 20;
}

/*グローバルナビ　メニュー*/
#global-nav {
    margin: 0 auto 1px;
    padding: 0;
    width: 100%;
    display: block;
    overflow-x: auto;
    background-color: #f7f5f6 ;/* 背景色を指定 */
    opacity: 1.0;
    border-top: solid 1.5px #e7e1e4;
    border-bottom: solid 1.5px #e7e1e4;
   }
.global-nav-text {
    display: table-cell;
    list-style-type: none;
    text-align: center;
}
.global-nav-text a {
    display: inline-block;
    white-space: nowrap;
    padding: 6px 10px;
    color: #555 ;/* 文字色 */
    text-decoration: none;
    font-size: 11px;
}
.global-nav-text a:hover {
    background-color: dimgray ;/* マウスがホバーした時の背景色 */
    color: white ;/* マウスがホバーした時の文字色 */
}

@media(min-width: 768px) {
#global-nav {
    display: table; /*PC表示時均等配置*/
}
.global-nav-text a {
    display: block;
    padding: 5px 0;
}
}

/*グローバルナビ　上に固定*/
.global-nav-fixed {
    position:fixed;
    top:45px;
    left:0;
    width: 100%;
    z-index: 20;
}

/*記事シェアボタン*/
.copy_btn {
	width: 100％;
	max-height: 200px;
	display: block;
	font-size: 14px;
	border: 1px solid #666;
	text-align: center;
	padding: 5px 15px;
	margin: .5em 75px 1.5em;
	transition: all 0.3s ease;
}
.copy_btn:hover {
	cursor: pointer;
	color: #fff;
	background: #303030;
}
.copy_btn.copied {
	pointer-events: none;
   	border: none;
	background:#A5C9EE;
	color:#fff;
  }
.copy_btn.copied:hover {
	cursor: auto;
}
.copy_btn { white-space: nowrap;
}

/*-- Font Awesomeを使用しない際は以下削除 --*/
.copy_btn.copied:before, .copy_btn:before {
	content: "\f00c";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	padding-right: 3px;
}
.copy_btn:before {
	content: "\f0c5";
}