/* <system section="theme" selected="17680117126993536840"> */
@charset "UTF-8";
/*
Hatena Material Theme
@cartman

Theme base on Material Design Component for Web

Responsive:no
*/
/* font */
/* font */
/*global nav*/
#globalheader-container {
    position: fixed;
    top: 0;
    background-color: #fff;
}

/** #container **/
#container {
    /* layout */
    /* blog-title */
    /* font */
    padding-top: 37px;
    margin: 0 auto;
    padding-bottom: 2rem;
    font-family: Roboto, "Helvetica Neue", Helvetica, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Arial, sans-serif;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

#container #content-inner {
    display: flex;
    width: 100%;
    height: 100vh;
    justify-content: space-between;
}

#container #wrapper {
    box-sizing: border-box;
    overflow: auto;
    height: 100%;
    padding: 2rem;
    margin-left: 2rem;
    margin-right: 2rem;
    width: 100%;
    background-color: #fff;
}

#container #wrapper::-webkit-scrollbar {
    width: 4px;
    /*スクロールバーの軌道*/
    /*スクロールバーの動く部分*/
}

#container #wrapper::-webkit-scrollbar-track {
    border-radius: 2px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
}

#container #wrapper::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 50, 0.5);
    border-radius: 10px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3);
}

#container *:not(#title):not(.entry-title):not(.entry-categories):not(.categories):not([itemtype="http://schema.org/Photograph"]):not(.hatena-star-star-container):not(.comment-box):not(.hatena-module-title):not(.hatena-module-body):not(.hatena-follow-button-box) > a:not(.entry-see-more) {
    font-family: Roboto, sans-serif;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-size: 0.875rem;
    line-height: 2.25rem;
    font-weight: 500;
    letter-spacing: 0.08929em;
    text-decoration: none;
    text-transform: uppercase;
    padding: 0 8px 0 8px;
    display: inline-flex;
    position: relative;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 64px;
    height: 36px;
    border: none;
    outline: none;
    /* @alternate */
    line-height: inherit;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    -webkit-appearance: none;
    overflow: hidden;
    vertical-align: middle;
    border-radius: 4px;
    --mdc-ripple-fg-size: 0;
    --mdc-ripple-left: 0;
    --mdc-ripple-top: 0;
    --mdc-ripple-fg-scale: 1;
    --mdc-ripple-fg-translate-end: 0;
    --mdc-ripple-fg-translate-start: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    will-change: transform, opacity;
    text-transform: none;
    height: auto;
    scroll-behavior: smooth;
}

#container *:not(#title):not(.entry-title):not(.entry-categories):not(.categories):not([itemtype="http://schema.org/Photograph"]):not(.hatena-star-star-container):not(.comment-box):not(.hatena-module-title):not(.hatena-module-body):not(.hatena-follow-button-box) > a:not(.entry-see-more)::-moz-focus-inner {
    padding: 0;
    border: 0;
}

#container *:not(#title):not(.entry-title):not(.entry-categories):not(.categories):not([itemtype="http://schema.org/Photograph"]):not(.hatena-star-star-container):not(.comment-box):not(.hatena-module-title):not(.hatena-module-body):not(.hatena-follow-button-box) > a:not(.entry-see-more):active {
    outline: none;
}

#container *:not(#title):not(.entry-title):not(.entry-categories):not(.categories):not([itemtype="http://schema.org/Photograph"]):not(.hatena-star-star-container):not(.comment-box):not(.hatena-module-title):not(.hatena-module-body):not(.hatena-follow-button-box) > a:not(.entry-see-more):hover {
    cursor: pointer;
}

#container *:not(#title):not(.entry-title):not(.entry-categories):not(.categories):not([itemtype="http://schema.org/Photograph"]):not(.hatena-star-star-container):not(.comment-box):not(.hatena-module-title):not(.hatena-module-body):not(.hatena-follow-button-box) > a:not(.entry-see-more):disabled {
    background-color: transparent;
    color: rgba(0, 0, 0, 0.37);
    cursor: default;
    pointer-events: none;
}

#container *:not(#title):not(.entry-title):not(.entry-categories):not(.categories):not([itemtype="http://schema.org/Photograph"]):not(.hatena-star-star-container):not(.comment-box):not(.hatena-module-title):not(.hatena-module-body):not(.hatena-follow-button-box) > a:not(.entry-see-more).mdc-button--dense {
    border-radius: 4px;
}

#container *:not(#title):not(.entry-title):not(.entry-categories):not(.categories):not([itemtype="http://schema.org/Photograph"]):not(.hatena-star-star-container):not(.comment-box):not(.hatena-module-title):not(.hatena-module-body):not(.hatena-follow-button-box) > a:not(.entry-see-more):not(:disabled) {
    background-color: transparent;
}

#container *:not(#title):not(.entry-title):not(.entry-categories):not(.categories):not([itemtype="http://schema.org/Photograph"]):not(.hatena-star-star-container):not(.comment-box):not(.hatena-module-title):not(.hatena-module-body):not(.hatena-follow-button-box) > a:not(.entry-see-more):not(:disabled) {
    color: #6200ee;
    /* @alternate */
    color: var(--mdc-theme-primary, #6200ee);
}

#container *:not(#title):not(.entry-title):not(.entry-categories):not(.categories):not([itemtype="http://schema.org/Photograph"]):not(.hatena-star-star-container):not(.comment-box):not(.hatena-module-title):not(.hatena-module-body):not(.hatena-follow-button-box) > a:not(.entry-see-more)::before, #container *:not(#title):not(.entry-title):not(.entry-categories):not(.categories):not([itemtype="http://schema.org/Photograph"]):not(.hatena-star-star-container):not(.comment-box):not(.hatena-module-title):not(.hatena-module-body):not(.hatena-follow-button-box) > a:not(.entry-see-more)::after {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    content: "";
}

#container *:not(#title):not(.entry-title):not(.entry-categories):not(.categories):not([itemtype="http://schema.org/Photograph"]):not(.hatena-star-star-container):not(.comment-box):not(.hatena-module-title):not(.hatena-module-body):not(.hatena-follow-button-box) > a:not(.entry-see-more)::before {
    transition: opacity 15ms linear, background-color 15ms linear;
    z-index: 1;
}

#container *:not(#title):not(.entry-title):not(.entry-categories):not(.categories):not([itemtype="http://schema.org/Photograph"]):not(.hatena-star-star-container):not(.comment-box):not(.hatena-module-title):not(.hatena-module-body):not(.hatena-follow-button-box) > a:not(.entry-see-more).mdc-ripple-upgraded::before {
    -webkit-transform: scale(var(--mdc-ripple-fg-scale, 1));
            transform: scale(var(--mdc-ripple-fg-scale, 1));
}

#container *:not(#title):not(.entry-title):not(.entry-categories):not(.categories):not([itemtype="http://schema.org/Photograph"]):not(.hatena-star-star-container):not(.comment-box):not(.hatena-module-title):not(.hatena-module-body):not(.hatena-follow-button-box) > a:not(.entry-see-more).mdc-ripple-upgraded::after {
    top: 0;
    /* @noflip */
    left: 0;
    -webkit-transform: scale(0);
            transform: scale(0);
    -webkit-transform-origin: center center;
            transform-origin: center center;
}

#container *:not(#title):not(.entry-title):not(.entry-categories):not(.categories):not([itemtype="http://schema.org/Photograph"]):not(.hatena-star-star-container):not(.comment-box):not(.hatena-module-title):not(.hatena-module-body):not(.hatena-follow-button-box) > a:not(.entry-see-more).mdc-ripple-upgraded--unbounded::after {
    top: var(--mdc-ripple-top, 0);
    /* @noflip */
    left: var(--mdc-ripple-left, 0);
}

#container *:not(#title):not(.entry-title):not(.entry-categories):not(.categories):not([itemtype="http://schema.org/Photograph"]):not(.hatena-star-star-container):not(.comment-box):not(.hatena-module-title):not(.hatena-module-body):not(.hatena-follow-button-box) > a:not(.entry-see-more).mdc-ripple-upgraded--foreground-activation::after {
    -webkit-animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
            animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
}

#container *:not(#title):not(.entry-title):not(.entry-categories):not(.categories):not([itemtype="http://schema.org/Photograph"]):not(.hatena-star-star-container):not(.comment-box):not(.hatena-module-title):not(.hatena-module-body):not(.hatena-follow-button-box) > a:not(.entry-see-more).mdc-ripple-upgraded--foreground-deactivation::after {
    -webkit-animation: mdc-ripple-fg-opacity-out 150ms;
            animation: mdc-ripple-fg-opacity-out 150ms;
    -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
            transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
}

#container *:not(#title):not(.entry-title):not(.entry-categories):not(.categories):not([itemtype="http://schema.org/Photograph"]):not(.hatena-star-star-container):not(.comment-box):not(.hatena-module-title):not(.hatena-module-body):not(.hatena-follow-button-box) > a:not(.entry-see-more)::before, #container *:not(#title):not(.entry-title):not(.entry-categories):not(.categories):not([itemtype="http://schema.org/Photograph"]):not(.hatena-star-star-container):not(.comment-box):not(.hatena-module-title):not(.hatena-module-body):not(.hatena-follow-button-box) > a:not(.entry-see-more)::after {
    top: calc(50% - 100%);
    /* @noflip */
    left: calc(50% - 100%);
    width: 200%;
    height: 200%;
}

#container *:not(#title):not(.entry-title):not(.entry-categories):not(.categories):not([itemtype="http://schema.org/Photograph"]):not(.hatena-star-star-container):not(.comment-box):not(.hatena-module-title):not(.hatena-module-body):not(.hatena-follow-button-box) > a:not(.entry-see-more).mdc-ripple-upgraded::after {
    width: var(--mdc-ripple-fg-size, 100%);
    height: var(--mdc-ripple-fg-size, 100%);
}

#container *:not(#title):not(.entry-title):not(.entry-categories):not(.categories):not([itemtype="http://schema.org/Photograph"]):not(.hatena-star-star-container):not(.comment-box):not(.hatena-module-title):not(.hatena-module-body):not(.hatena-follow-button-box) > a:not(.entry-see-more)::before, #container *:not(#title):not(.entry-title):not(.entry-categories):not(.categories):not([itemtype="http://schema.org/Photograph"]):not(.hatena-star-star-container):not(.comment-box):not(.hatena-module-title):not(.hatena-module-body):not(.hatena-follow-button-box) > a:not(.entry-see-more)::after {
    background-color: #6200ee;
}

@supports not (-ms-ime-align: auto) {
    #container *:not(#title):not(.entry-title):not(.entry-categories):not(.categories):not([itemtype="http://schema.org/Photograph"]):not(.hatena-star-star-container):not(.comment-box):not(.hatena-module-title):not(.hatena-module-body):not(.hatena-follow-button-box) > a:not(.entry-see-more)::before, #container *:not(#title):not(.entry-title):not(.entry-categories):not(.categories):not([itemtype="http://schema.org/Photograph"]):not(.hatena-star-star-container):not(.comment-box):not(.hatena-module-title):not(.hatena-module-body):not(.hatena-follow-button-box) > a:not(.entry-see-more)::after {
        /* @alternate */
        background-color: var(--mdc-theme-primary, #6200ee);
    }
}

#container *:not(#title):not(.entry-title):not(.entry-categories):not(.categories):not([itemtype="http://schema.org/Photograph"]):not(.hatena-star-star-container):not(.comment-box):not(.hatena-module-title):not(.hatena-module-body):not(.hatena-follow-button-box) > a:not(.entry-see-more):hover::before {
    opacity: 0.04;
}

#container *:not(#title):not(.entry-title):not(.entry-categories):not(.categories):not([itemtype="http://schema.org/Photograph"]):not(.hatena-star-star-container):not(.comment-box):not(.hatena-module-title):not(.hatena-module-body):not(.hatena-follow-button-box) > a:not(.entry-see-more):not(.mdc-ripple-upgraded):focus::before, #container *:not(#title):not(.entry-title):not(.entry-categories):not(.categories):not([itemtype="http://schema.org/Photograph"]):not(.hatena-star-star-container):not(.comment-box):not(.hatena-module-title):not(.hatena-module-body):not(.hatena-follow-button-box) > a:not(.entry-see-more).mdc-ripple-upgraded--background-focused::before {
    transition-duration: 75ms;
    opacity: 0.12;
}

#container *:not(#title):not(.entry-title):not(.entry-categories):not(.categories):not([itemtype="http://schema.org/Photograph"]):not(.hatena-star-star-container):not(.comment-box):not(.hatena-module-title):not(.hatena-module-body):not(.hatena-follow-button-box) > a:not(.entry-see-more):not(.mdc-ripple-upgraded)::after {
    transition: opacity 150ms linear;
}

#container *:not(#title):not(.entry-title):not(.entry-categories):not(.categories):not([itemtype="http://schema.org/Photograph"]):not(.hatena-star-star-container):not(.comment-box):not(.hatena-module-title):not(.hatena-module-body):not(.hatena-follow-button-box) > a:not(.entry-see-more):not(.mdc-ripple-upgraded):active::after {
    transition-duration: 75ms;
    opacity: 0.12;
}

#container *:not(#title):not(.entry-title):not(.entry-categories):not(.categories):not([itemtype="http://schema.org/Photograph"]):not(.hatena-star-star-container):not(.comment-box):not(.hatena-module-title):not(.hatena-module-body):not(.hatena-follow-button-box) > a:not(.entry-see-more).mdc-ripple-upgraded {
    --mdc-ripple-fg-opacity: 0.12;
}

#container .comment-box a.leave-comment-title {
    font-family: Roboto, sans-serif;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-size: 0.875rem;
    line-height: 2.25rem;
    font-weight: 500;
    letter-spacing: 0.08929em;
    text-decoration: none;
    text-transform: uppercase;
    padding: 0 8px 0 8px;
    display: inline-flex;
    position: relative;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 64px;
    height: 36px;
    border: none;
    outline: none;
    /* @alternate */
    line-height: inherit;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    -webkit-appearance: none;
    overflow: hidden;
    vertical-align: middle;
    border-radius: 4px;
    padding: 0 16px 0 16px;
    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
    transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

#container .comment-box a.leave-comment-title::-moz-focus-inner {
    padding: 0;
    border: 0;
}

#container .comment-box a.leave-comment-title:active {
    outline: none;
}

#container .comment-box a.leave-comment-title:hover {
    cursor: pointer;
}

#container .comment-box a.leave-comment-title:disabled {
    background-color: transparent;
    color: rgba(0, 0, 0, 0.37);
    cursor: default;
    pointer-events: none;
}

#container .comment-box a.leave-comment-title.mdc-button--dense {
    border-radius: 4px;
}

#container .comment-box a.leave-comment-title:disabled {
    background-color: rgba(0, 0, 0, 0.12);
    color: rgba(0, 0, 0, 0.37);
}

#container .comment-box a.leave-comment-title:not(:disabled) {
    background-color: #6200ee;
}

@supports not (-ms-ime-align: auto) {
    #container .comment-box a.leave-comment-title:not(:disabled) {
        /* @alternate */
        background-color: var(--mdc-theme-primary, #6200ee);
    }
}

#container .comment-box a.leave-comment-title:not(:disabled) {
    color: #fff;
    /* @alternate */
    color: var(--mdc-theme-on-primary, #fff);
}

#container .comment-box a.leave-comment-title:hover, #container .comment-box a.leave-comment-title:focus {
    box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}

#container .comment-box a.leave-comment-title:active {
    box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
}

#container .comment-box a.leave-comment-title:disabled {
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}

#container .entry-content a.entry-see-more {
    font-family: Roboto, sans-serif;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-size: 0.875rem;
    line-height: 2.25rem;
    font-weight: 500;
    letter-spacing: 0.08929em;
    text-decoration: none;
    text-transform: uppercase;
    padding: 0 8px 0 8px;
    display: inline-flex;
    position: relative;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 64px;
    height: 36px;
    border: none;
    outline: none;
    /* @alternate */
    line-height: inherit;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    -webkit-appearance: none;
    overflow: hidden;
    vertical-align: middle;
    border-radius: 4px;
    padding: 0 16px 0 16px;
    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
    transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
    float: right;
}

#container .entry-content a.entry-see-more::-moz-focus-inner {
    padding: 0;
    border: 0;
}

#container .entry-content a.entry-see-more:active {
    outline: none;
}

#container .entry-content a.entry-see-more:hover {
    cursor: pointer;
}

#container .entry-content a.entry-see-more:disabled {
    background-color: transparent;
    color: rgba(0, 0, 0, 0.37);
    cursor: default;
    pointer-events: none;
}

#container .entry-content a.entry-see-more.mdc-button--dense {
    border-radius: 4px;
}

#container .entry-content a.entry-see-more:disabled {
    background-color: rgba(0, 0, 0, 0.12);
    color: rgba(0, 0, 0, 0.37);
}

#container .entry-content a.entry-see-more:not(:disabled) {
    background-color: #6200ee;
}

@supports not (-ms-ime-align: auto) {
    #container .entry-content a.entry-see-more:not(:disabled) {
        /* @alternate */
        background-color: var(--mdc-theme-primary, #6200ee);
    }
}

#container .entry-content a.entry-see-more:not(:disabled) {
    color: #fff;
    /* @alternate */
    color: var(--mdc-theme-on-primary, #fff);
}

#container .entry-content a.entry-see-more:hover, #container .entry-content a.entry-see-more:focus {
    box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}

#container .entry-content a.entry-see-more:active {
    box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
}

#container .entry-content a.entry-see-more:disabled {
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}

#container .entry-content a.entry-see-more::after {
    clear: both;
}

#container #blog-title {
    padding: 1.5rem 0;
    margin-bottom: 0;
    background-color: #6200ee;
    background-color: var(--mdc-theme-primary, #6200ee);
    color: #fff;
}

#container #blog-title a {
    color: inherit;
}

#container #blog-title-content {
    margin-top: 0;
    margin-bottom: 0;
}

#container #title {
    font-family: Roboto, "Helvetica Neue", Helvetica, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Arial, sans-serif;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-size: 6rem;
    line-height: 6rem;
    font-weight: 300;
    letter-spacing: -0.01563em;
    text-decoration: inherit;
    text-transform: inherit;
    text-align: center;
    margin: 0;
}

#container #title > a {
    text-decoration: none;
    font-size: inherit;
}

#container #blog-description {
    font-family: Roboto, sans-serif;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 400;
    letter-spacing: normal;
    text-decoration: inherit;
    text-transform: inherit;
    text-align: center;
    margin: 0;
}

#container #box2 {
    border-color: rgba(0, 0, 0, 0.12);
    background-color: #fff;
    /* @noflip */
    border-radius: 0 0 0 0;
    z-index: 6;
    width: 256px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    box-sizing: border-box;
    height: 100%;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    border-left-style: solid;
    border-left-width: 1px;
    overflow: hidden;
    width: 256px;
}

#container #box2 .mdc-drawer__title {
    color: rgba(0, 0, 0, 0.87);
}

#container #box2 .mdc-list-group__subheader {
    color: rgba(0, 0, 0, 0.6);
}

#container #box2 .mdc-drawer__subtitle {
    color: rgba(0, 0, 0, 0.6);
}

#container #box2 .mdc-list-item__graphic {
    color: rgba(0, 0, 0, 0.6);
}

#container #box2 .mdc-list-item {
    color: rgba(0, 0, 0, 0.87);
}

#container #box2 .mdc-list-item--activated .mdc-list-item__graphic {
    color: #6200ee;
}

#container #box2 .mdc-list-item--activated {
    color: rgba(98, 0, 238, 0.87);
}

[dir="rtl"] #container #box2, #container #box2[dir="rtl"] {
    /* @noflip */
    border-radius: 0 0 0 0;
}

#container #box2 .mdc-list-item {
    border-radius: 4px;
}

#container #box2.mdc-drawer--open:not(.mdc-drawer--closing) + .mdc-drawer-app-content {
    /* @noflip */
    margin-left: 256px;
    /* @noflip */
    margin-right: 0;
}

[dir="rtl"] #container #box2.mdc-drawer--open:not(.mdc-drawer--closing) + .mdc-drawer-app-content, #container #box2.mdc-drawer--open:not(.mdc-drawer--closing) + .mdc-drawer-app-content[dir="rtl"] {
    /* @noflip */
    margin-left: 0;
    /* @noflip */
    margin-right: 256px;
}

#container #box2-inner {
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

#container #box2-inner::-webkit-scrollbar {
    width: 4px;
    /*スクロールバーの軌道*/
    /*スクロールバーの動く部分*/
}

#container #box2-inner::-webkit-scrollbar-track {
    border-radius: 2px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
}

#container #box2-inner::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 50, 0.5);
    border-radius: 10px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3);
}

#container #box2 .hatena-module > .hatena-module-title,
#container #box2 .hatena-module > .hatena-module-body {
    padding-left: 1rem;
    padding-right: 1rem;
}

#container #box2 .hatena-module > .hatena-module-title {
    font-family: Roboto, "Helvetica Neue", Helvetica, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Arial, sans-serif;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-size: 0.875rem;
    line-height: 1.375rem;
    font-weight: 500;
    letter-spacing: 0.00714em;
    text-decoration: inherit;
    text-transform: inherit;
    padding-top: 1rem;
    text-align: center;
}

#container #box2 .hatena-module > .hatena-module-title > a {
    text-decoration: none;
}

#container #box2 .hatena-module > .hatena-module-body {
    padding-bottom: 1rem;
}

#container #box2 .hatena-module::after {
    content: "";
    display: block;
    height: 0;
    margin: 0;
    border: none;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: rgba(0, 0, 0, 0.12);
    margin: 3px 0 4px 0;
    box-sizing: border-box;
}

#container #box2 .hatena-module .hatena-module-body > a.profile-icon-link {
    display: flex;
    width: 96px;
    height: 96px;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border: 4px solid #fff;
    box-shadow: 0 0 8px gray;
    margin: .5rem auto;
    box-sizing: border-box;
}

#container #box2 .hatena-module .id {
    display: flex;
    justify-content: center;
    margin-top: .5rem;
}

#container #box2 .hatena-module .profile-activities {
    display: flex;
    justify-content: flex-end;
}

#container #box2 .hatena-module .hatena-follow-button-box {
    display: flex;
    justify-content: center;
}

#container #box2 .hatena-module .hatena-follow-button-box a.hatena-follow-button {
    font-family: Roboto, sans-serif;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-size: 0.875rem;
    line-height: 2.25rem;
    font-weight: 500;
    letter-spacing: 0.08929em;
    text-decoration: none;
    text-transform: uppercase;
    padding: 0 8px 0 8px;
    display: inline-flex;
    position: relative;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 64px;
    height: 36px;
    border: none;
    outline: none;
    /* @alternate */
    line-height: inherit;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    -webkit-appearance: none;
    overflow: hidden;
    vertical-align: middle;
    border-radius: 4px;
    padding: 0 16px 0 16px;
    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
    transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
    color: #fff !important;
    height: 28px !important;
    line-height: 28px !important;
    width: auto;
    background-image: none !important;
    border: none !important;
    border-radius: 14px;
}

#container #box2 .hatena-module .hatena-follow-button-box a.hatena-follow-button::-moz-focus-inner {
    padding: 0;
    border: 0;
}

#container #box2 .hatena-module .hatena-follow-button-box a.hatena-follow-button:active {
    outline: none;
}

#container #box2 .hatena-module .hatena-follow-button-box a.hatena-follow-button:hover {
    cursor: pointer;
}

#container #box2 .hatena-module .hatena-follow-button-box a.hatena-follow-button:disabled {
    background-color: transparent;
    color: rgba(0, 0, 0, 0.37);
    cursor: default;
    pointer-events: none;
}

#container #box2 .hatena-module .hatena-follow-button-box a.hatena-follow-button.mdc-button--dense {
    border-radius: 4px;
}

#container #box2 .hatena-module .hatena-follow-button-box a.hatena-follow-button:disabled {
    background-color: rgba(0, 0, 0, 0.12);
    color: rgba(0, 0, 0, 0.37);
}

#container #box2 .hatena-module .hatena-follow-button-box a.hatena-follow-button:not(:disabled) {
    background-color: #6200ee;
}

@supports not (-ms-ime-align: auto) {
    #container #box2 .hatena-module .hatena-follow-button-box a.hatena-follow-button:not(:disabled) {
        /* @alternate */
        background-color: var(--mdc-theme-primary, #6200ee);
    }
}

#container #box2 .hatena-module .hatena-follow-button-box a.hatena-follow-button:not(:disabled) {
    color: #fff;
    /* @alternate */
    color: var(--mdc-theme-on-primary, #fff);
}

#container #box2 .hatena-module .hatena-follow-button-box a.hatena-follow-button:hover, #container #box2 .hatena-module .hatena-follow-button-box a.hatena-follow-button:focus {
    box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}

#container #box2 .hatena-module .hatena-follow-button-box a.hatena-follow-button:active {
    box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
}

#container #box2 .hatena-module .hatena-follow-button-box a.hatena-follow-button:disabled {
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}

#container #box2 .hatena-module .hatena-follow-button-box a.hatena-follow-button::before {
    font-family: "Material Icons";
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    /* @noflip */
    margin-left: 0;
    /* @noflip */
    margin-right: 8px;
    display: inline-block;
    width: 18px;
    height: 18px;
    font-size: 18px;
    vertical-align: top;
    height: auto;
}

[dir="rtl"] #container #box2 .hatena-module .hatena-follow-button-box a.hatena-follow-button::before, #container #box2 .hatena-module .hatena-follow-button-box a.hatena-follow-button::before[dir="rtl"] {
    /* @noflip */
    margin-left: 8px;
    /* @noflip */
    margin-right: 0;
}

#container #box2 .hatena-module .hatena-follow-button-box a.hatena-follow-button.unsubscribing::before {
    content: "\e148";
}

#container #box2 .hatena-module .hatena-follow-button-box a.hatena-follow-button.subscribing::before {
    content: '\e86c';
}

#container #box2 .hatena-module .hatena-follow-button-box a.hatena-follow-button.subscribing.hover::before {
    content: '\e909';
}

#container #box2 .hatena-module .mdc-floating-label {
    font-family: Roboto, sans-serif;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-size: 1rem;
    line-height: 1.75rem;
    font-weight: 400;
    letter-spacing: 0.00937em;
    text-decoration: inherit;
    text-transform: inherit;
    position: absolute;
    /* @noflip */
    left: 0;
    /* @noflip */
    -webkit-transform-origin: left top;
            transform-origin: left top;
    transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
    transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1);
    transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
    /* @alternate */
    line-height: 1.15rem;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: text;
    overflow: hidden;
    will-change: transform;
}

[dir="rtl"] #container #box2 .hatena-module .mdc-floating-label, #container #box2 .hatena-module .mdc-floating-label[dir="rtl"] {
    /* @noflip */
    right: 0;
    /* @noflip */
    left: auto;
    /* @noflip */
    -webkit-transform-origin: right top;
            transform-origin: right top;
    /* @noflip */
    text-align: right;
}

#container #box2 .hatena-module .mdc-floating-label--float-above {
    cursor: auto;
}

.mdc-floating-label--float-above {
    -webkit-transform: translateY(-50%) scale(0.75);
            transform: translateY(-50%) scale(0.75);
}

.mdc-floating-label--shake {
    -webkit-animation: mdc-floating-label-shake-float-above-standard 250ms 1;
            animation: mdc-floating-label-shake-float-above-standard 250ms 1;
}

@-webkit-keyframes mdc-floating-label-shake-float-above-standard {
    0% {
        -webkit-transform: translateX(calc(0 - 0%)) translateY(-50%) scale(0.75);
                transform: translateX(calc(0 - 0%)) translateY(-50%) scale(0.75);
    }
    33% {
        -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.70173, 0.49582);
                animation-timing-function: cubic-bezier(0.5, 0, 0.70173, 0.49582);
        -webkit-transform: translateX(calc(4% - 0%)) translateY(-50%) scale(0.75);
                transform: translateX(calc(4% - 0%)) translateY(-50%) scale(0.75);
    }
    66% {
        -webkit-animation-timing-function: cubic-bezier(0.30244, 0.38135, 0.55, 0.95635);
                animation-timing-function: cubic-bezier(0.30244, 0.38135, 0.55, 0.95635);
        -webkit-transform: translateX(calc(-4% - 0%)) translateY(-50%) scale(0.75);
                transform: translateX(calc(-4% - 0%)) translateY(-50%) scale(0.75);
    }
    100% {
        -webkit-transform: translateX(calc(0 - 0%)) translateY(-50%) scale(0.75);
                transform: translateX(calc(0 - 0%)) translateY(-50%) scale(0.75);
    }
}

@keyframes mdc-floating-label-shake-float-above-standard {
    0% {
        -webkit-transform: translateX(calc(0 - 0%)) translateY(-50%) scale(0.75);
                transform: translateX(calc(0 - 0%)) translateY(-50%) scale(0.75);
    }
    33% {
        -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.70173, 0.49582);
                animation-timing-function: cubic-bezier(0.5, 0, 0.70173, 0.49582);
        -webkit-transform: translateX(calc(4% - 0%)) translateY(-50%) scale(0.75);
                transform: translateX(calc(4% - 0%)) translateY(-50%) scale(0.75);
    }
    66% {
        -webkit-animation-timing-function: cubic-bezier(0.30244, 0.38135, 0.55, 0.95635);
                animation-timing-function: cubic-bezier(0.30244, 0.38135, 0.55, 0.95635);
        -webkit-transform: translateX(calc(-4% - 0%)) translateY(-50%) scale(0.75);
                transform: translateX(calc(-4% - 0%)) translateY(-50%) scale(0.75);
    }
    100% {
        -webkit-transform: translateX(calc(0 - 0%)) translateY(-50%) scale(0.75);
                transform: translateX(calc(0 - 0%)) translateY(-50%) scale(0.75);
    }
}

#container #box2 .hatena-module .mdc-line-ripple {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
    transition: opacity 180ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 180ms cubic-bezier(0.4, 0, 0.2, 1);
    transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1), opacity 180ms cubic-bezier(0.4, 0, 0.2, 1);
    transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1), opacity 180ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 180ms cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    z-index: 2;
}

#container #box2 .hatena-module .mdc-line-ripple--active {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
    opacity: 1;
}

#container #box2 .hatena-module .mdc-line-ripple--deactivating {
    opacity: 0;
}

#container #box2 .hatena-module .mdc-notched-outline {
    display: flex;
    position: absolute;
    right: 0;
    left: 0;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    height: 100%;
    /* @noflip */
    text-align: left;
    pointer-events: none;
}

[dir="rtl"] #container #box2 .hatena-module .mdc-notched-outline, #container #box2 .hatena-module .mdc-notched-outline[dir="rtl"] {
    /* @noflip */
    text-align: right;
}

#container #box2 .hatena-module .mdc-notched-outline__leading, #container #box2 .hatena-module .mdc-notched-outline__notch, #container #box2 .hatena-module .mdc-notched-outline__trailing {
    box-sizing: border-box;
    height: 100%;
    transition: border 150ms cubic-bezier(0.4, 0, 0.2, 1);
    border-top: 1px solid;
    border-bottom: 1px solid;
    pointer-events: none;
}

#container #box2 .hatena-module .mdc-notched-outline__leading {
    /* @noflip */
    border-left: 1px solid;
    /* @noflip */
    border-right: none;
    width: 12px;
}

[dir="rtl"] #container #box2 .hatena-module .mdc-notched-outline__leading, #container #box2 .hatena-module .mdc-notched-outline__leading[dir="rtl"] {
    /* @noflip */
    border-left: none;
    /* @noflip */
    border-right: 1px solid;
}

#container #box2 .hatena-module .mdc-notched-outline__trailing {
    /* @noflip */
    border-left: none;
    /* @noflip */
    border-right: 1px solid;
    flex-grow: 1;
}

[dir="rtl"] #container #box2 .hatena-module .mdc-notched-outline__trailing, #container #box2 .hatena-module .mdc-notched-outline__trailing[dir="rtl"] {
    /* @noflip */
    border-left: 1px solid;
    /* @noflip */
    border-right: none;
}

#container #box2 .hatena-module .mdc-notched-outline__notch {
    flex: 0 0 auto;
    width: auto;
    max-width: calc(100% - 12px * 2);
}

#container #box2 .hatena-module .mdc-notched-outline .mdc-floating-label {
    display: inline-block;
    position: relative;
    top: 17px;
    bottom: auto;
    max-width: 100%;
}

#container #box2 .hatena-module .mdc-notched-outline .mdc-floating-label--float-above {
    text-overflow: clip;
}

#container #box2 .hatena-module .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
    max-width: calc(100% / .75);
}

#container #box2 .hatena-module .mdc-notched-outline--notched .mdc-notched-outline__notch {
    /* @noflip */
    padding-left: 0;
    /* @noflip */
    padding-right: 8px;
    border-top: none;
}

[dir="rtl"] #container #box2 .hatena-module .mdc-notched-outline--notched .mdc-notched-outline__notch, #container #box2 .hatena-module .mdc-notched-outline--notched .mdc-notched-outline__notch[dir="rtl"] {
    /* @noflip */
    padding-left: 8px;
    /* @noflip */
    padding-right: 0;
}

#container #box2 .hatena-module .mdc-notched-outline--no-label .mdc-notched-outline__notch {
    padding: 0;
}

@-webkit-keyframes mdc-ripple-fg-radius-in {
    from {
        -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
                animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        -webkit-transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
                transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
    }
    to {
        -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
                transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
    }
}

@keyframes mdc-ripple-fg-radius-in {
    from {
        -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
                animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        -webkit-transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
                transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
    }
    to {
        -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
                transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
    }
}

@-webkit-keyframes mdc-ripple-fg-opacity-in {
    from {
        -webkit-animation-timing-function: linear;
                animation-timing-function: linear;
        opacity: 0;
    }
    to {
        opacity: var(--mdc-ripple-fg-opacity, 0);
    }
}

@keyframes mdc-ripple-fg-opacity-in {
    from {
        -webkit-animation-timing-function: linear;
                animation-timing-function: linear;
        opacity: 0;
    }
    to {
        opacity: var(--mdc-ripple-fg-opacity, 0);
    }
}

@-webkit-keyframes mdc-ripple-fg-opacity-out {
    from {
        -webkit-animation-timing-function: linear;
                animation-timing-function: linear;
        opacity: var(--mdc-ripple-fg-opacity, 0);
    }
    to {
        opacity: 0;
    }
}

@keyframes mdc-ripple-fg-opacity-out {
    from {
        -webkit-animation-timing-function: linear;
                animation-timing-function: linear;
        opacity: var(--mdc-ripple-fg-opacity, 0);
    }
    to {
        opacity: 0;
    }
}

#container #box2 .hatena-module .mdc-ripple-surface--test-edge-var-bug {
    --mdc-ripple-surface-test-edge-var: 1px solid #000;
    visibility: hidden;
}

#container #box2 .hatena-module .mdc-ripple-surface--test-edge-var-bug::before {
    border: var(--mdc-ripple-surface-test-edge-var);
}

#container #box2 .hatena-module .mdc-text-field-helper-text {
    font-family: Roboto, sans-serif;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-size: 0.75rem;
    line-height: 1.25rem;
    font-weight: 400;
    letter-spacing: 0.03333em;
    text-decoration: inherit;
    text-transform: inherit;
    display: block;
    margin-top: 0;
    /* @alternate */
    line-height: normal;
    margin: 0;
    transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    will-change: opacity;
}

#container #box2 .hatena-module .mdc-text-field-helper-text::before {
    display: inline-block;
    width: 0;
    height: 16px;
    content: "";
    vertical-align: 0;
}

#container #box2 .hatena-module .mdc-text-field-helper-text--persistent {
    transition: none;
    opacity: 1;
    will-change: initial;
}

#container #box2 .hatena-module .mdc-text-field-character-counter {
    font-family: Roboto, sans-serif;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-size: 0.75rem;
    line-height: 1.25rem;
    font-weight: 400;
    letter-spacing: 0.03333em;
    text-decoration: inherit;
    text-transform: inherit;
    display: block;
    margin-top: 0;
    /* @alternate */
    line-height: normal;
    /* @noflip */
    margin-left: auto;
    /* @noflip */
    margin-right: 0;
    /* @noflip */
    padding-left: 16px;
    /* @noflip */
    padding-right: 0;
    white-space: nowrap;
}

#container #box2 .hatena-module .mdc-text-field-character-counter::before {
    display: inline-block;
    width: 0;
    height: 16px;
    content: "";
    vertical-align: 0;
}

[dir="rtl"] #container #box2 .hatena-module .mdc-text-field-character-counter, #container #box2 .hatena-module .mdc-text-field-character-counter[dir="rtl"] {
    /* @noflip */
    margin-left: 0;
    /* @noflip */
    margin-right: auto;
}

[dir="rtl"] #container #box2 .hatena-module .mdc-text-field-character-counter, #container #box2 .hatena-module .mdc-text-field-character-counter[dir="rtl"] {
    /* @noflip */
    padding-left: 0;
    /* @noflip */
    padding-right: 16px;
}

#container #box2 .hatena-module .mdc-text-field--with-leading-icon .mdc-text-field__icon,
#container #box2 .hatena-module .mdc-text-field--with-trailing-icon .mdc-text-field__icon {
    position: absolute;
    bottom: 16px;
    cursor: pointer;
}

#container #box2 .hatena-module .mdc-text-field__icon:not([tabindex]),
#container #box2 .hatena-module .mdc-text-field__icon[tabindex="-1"] {
    cursor: default;
    pointer-events: none;
}

#container #box2 .hatena-module .search-form {
    --mdc-ripple-fg-size: 0;
    --mdc-ripple-left: 0;
    --mdc-ripple-top: 0;
    --mdc-ripple-fg-scale: 1;
    --mdc-ripple-fg-translate-end: 0;
    --mdc-ripple-fg-translate-start: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    will-change: transform, opacity;
    border-radius: 4px 4px 0 0;
    display: inline-flex;
    position: relative;
    box-sizing: border-box;
    height: 56px;
    overflow: hidden;
    /* @alternate */
    will-change: opacity, transform, color;
    align-items: center;
}

#container #box2 .hatena-module .search-form::before, #container #box2 .hatena-module .search-form::after {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    content: "";
}

#container #box2 .hatena-module .search-form::before {
    transition: opacity 15ms linear, background-color 15ms linear;
    z-index: 1;
}

#container #box2 .hatena-module .search-form.mdc-ripple-upgraded::before {
    -webkit-transform: scale(var(--mdc-ripple-fg-scale, 1));
            transform: scale(var(--mdc-ripple-fg-scale, 1));
}

#container #box2 .hatena-module .search-form.mdc-ripple-upgraded::after {
    top: 0;
    /* @noflip */
    left: 0;
    -webkit-transform: scale(0);
            transform: scale(0);
    -webkit-transform-origin: center center;
            transform-origin: center center;
}

#container #box2 .hatena-module .search-form.mdc-ripple-upgraded--unbounded::after {
    top: var(--mdc-ripple-top, 0);
    /* @noflip */
    left: var(--mdc-ripple-left, 0);
}

#container #box2 .hatena-module .search-form.mdc-ripple-upgraded--foreground-activation::after {
    -webkit-animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
            animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
}

#container #box2 .hatena-module .search-form.mdc-ripple-upgraded--foreground-deactivation::after {
    -webkit-animation: mdc-ripple-fg-opacity-out 150ms;
            animation: mdc-ripple-fg-opacity-out 150ms;
    -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
            transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
}

#container #box2 .hatena-module .search-form::before, #container #box2 .hatena-module .search-form::after {
    background-color: rgba(0, 0, 0, 0.87);
}

#container #box2 .hatena-module .search-form:hover::before {
    opacity: 0.04;
}

#container #box2 .hatena-module .search-form:not(.mdc-ripple-upgraded):focus::before, #container #box2 .hatena-module .search-form.mdc-ripple-upgraded--background-focused::before {
    transition-duration: 75ms;
    opacity: 0.12;
}

#container #box2 .hatena-module .search-form::before, #container #box2 .hatena-module .search-form::after {
    top: calc(50% - 100%);
    /* @noflip */
    left: calc(50% - 100%);
    width: 200%;
    height: 200%;
}

#container #box2 .hatena-module .search-form.mdc-ripple-upgraded::after {
    width: var(--mdc-ripple-fg-size, 100%);
    height: var(--mdc-ripple-fg-size, 100%);
}

#container #box2 .hatena-module .search-form:not(.mdc-text-field--disabled) .mdc-floating-label {
    color: rgba(0, 0, 0, 0.6);
}

#container #box2 .hatena-module .search-form:not(.mdc-text-field--disabled) .mdc-text-field__input {
    color: rgba(0, 0, 0, 0.87);
}

#container #box2 .hatena-module .search-form .mdc-text-field__input {
    caret-color: #6200ee;
    /* @alternate */
    caret-color: var(--mdc-theme-primary, #6200ee);
}

#container #box2 .hatena-module .search-form:not(.mdc-text-field--disabled):not(.mdc-text-field--outlined):not(.mdc-text-field--textarea) .mdc-text-field__input {
    border-bottom-color: rgba(0, 0, 0, 0.42);
}

#container #box2 .hatena-module .search-form:not(.mdc-text-field--disabled):not(.mdc-text-field--outlined):not(.mdc-text-field--textarea) .mdc-text-field__input:hover {
    border-bottom-color: rgba(0, 0, 0, 0.87);
}

#container #box2 .hatena-module .search-form .mdc-line-ripple {
    background-color: #6200ee;
    /* @alternate */
    background-color: var(--mdc-theme-primary, #6200ee);
}

#container #box2 .hatena-module .search-form:not(.mdc-text-field--disabled):not(.mdc-text-field--textarea) {
    border-bottom-color: rgba(0, 0, 0, 0.12);
}

#container #box2 .hatena-module .search-form:not(.mdc-text-field--disabled) + .mdc-text-field-helper-line .mdc-text-field-helper-text {
    color: rgba(0, 0, 0, 0.6);
}

#container #box2 .hatena-module .search-form:not(.mdc-text-field--disabled) .mdc-text-field-character-counter,
#container #box2 .hatena-module .search-form:not(.mdc-text-field--disabled) + .mdc-text-field-helper-line .mdc-text-field-character-counter {
    color: rgba(0, 0, 0, 0.6);
}

#container #box2 .hatena-module .search-form:not(.mdc-text-field--disabled) .mdc-text-field__icon {
    color: rgba(0, 0, 0, 0.54);
}

#container #box2 .hatena-module .search-form:not(.mdc-text-field--disabled) {
    background-color: whitesmoke;
}

#container #box2 .hatena-module .search-form .mdc-floating-label {
    /* @noflip */
    left: 16px;
    /* @noflip */
    right: initial;
    top: 18px;
    pointer-events: none;
}

[dir="rtl"] #container #box2 .hatena-module .search-form .mdc-floating-label, #container #box2 .hatena-module .search-form .mdc-floating-label[dir="rtl"] {
    /* @noflip */
    left: initial;
    /* @noflip */
    right: 16px;
}

#container #box2 .hatena-module .search-form--textarea .mdc-floating-label {
    /* @noflip */
    left: 4px;
    /* @noflip */
    right: initial;
}

[dir="rtl"] #container #box2 .hatena-module .search-form--textarea .mdc-floating-label, #container #box2 .hatena-module .search-form--textarea .mdc-floating-label[dir="rtl"] {
    /* @noflip */
    left: initial;
    /* @noflip */
    right: 4px;
}

#container #box2 .hatena-module .search-form--outlined .mdc-floating-label {
    /* @noflip */
    left: 4px;
    /* @noflip */
    right: initial;
    top: 17px;
}

[dir="rtl"] #container #box2 .hatena-module .search-form--outlined .mdc-floating-label, #container #box2 .hatena-module .search-form--outlined .mdc-floating-label[dir="rtl"] {
    /* @noflip */
    left: initial;
    /* @noflip */
    right: 4px;
}

#container #box2 .hatena-module .search-form--outlined--with-leading-icon .mdc-floating-label {
    /* @noflip */
    left: 36px;
    /* @noflip */
    right: initial;
}

[dir="rtl"] #container #box2 .hatena-module .search-form--outlined--with-leading-icon .mdc-floating-label, #container #box2 .hatena-module .search-form--outlined--with-leading-icon .mdc-floating-label[dir="rtl"] {
    /* @noflip */
    left: initial;
    /* @noflip */
    right: 36px;
}

#container #box2 .hatena-module .search-form--outlined--with-leading-icon .mdc-floating-label--float-above {
    /* @noflip */
    left: 40px;
    /* @noflip */
    right: initial;
}

[dir="rtl"] #container #box2 .hatena-module .search-form--outlined--with-leading-icon .mdc-floating-label--float-above, #container #box2 .hatena-module .search-form--outlined--with-leading-icon .mdc-floating-label--float-above[dir="rtl"] {
    /* @noflip */
    left: initial;
    /* @noflip */
    right: 40px;
}

#container #box2 .hatena-module .search-module-input {
    font-family: Roboto, "Helvetica Neue", Helvetica, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Arial, sans-serif;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-size: 1rem;
    line-height: 1.75rem;
    font-weight: 400;
    letter-spacing: 0.00937em;
    text-decoration: inherit;
    text-transform: inherit;
    align-self: flex-end;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 20px 16px 6px;
    transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    border-bottom: 1px solid;
    border-radius: 0;
    background: none;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}

#container #box2 .hatena-module .search-module-input::-webkit-input-placeholder {
    transition: opacity 67ms cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    color: rgba(0, 0, 0, 0.54);
}

#container #box2 .hatena-module .search-module-input:-ms-input-placeholder {
    transition: opacity 67ms cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    color: rgba(0, 0, 0, 0.54);
}

#container #box2 .hatena-module .search-module-input::-ms-input-placeholder {
    transition: opacity 67ms cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    color: rgba(0, 0, 0, 0.54);
}

#container #box2 .hatena-module .search-module-input::placeholder {
    transition: opacity 67ms cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    color: rgba(0, 0, 0, 0.54);
}

#container #box2 .hatena-module .search-module-input:-ms-input-placeholder {
    color: rgba(0, 0, 0, 0.54) !important;
}

#container #box2 .hatena-module .search-module-input::-webkit-input-placeholder {
    transition-delay: 40ms;
    transition-duration: 110ms;
    opacity: 1;
}

#container #box2 .hatena-module .search-module-input::-ms-input-placeholder {
    transition-delay: 40ms;
    transition-duration: 110ms;
    opacity: 1;
}

#container #box2 .hatena-module .search-module-input::placeholder {
    transition-delay: 40ms;
    transition-duration: 110ms;
    opacity: 1;
}

#container #box2 .hatena-module .search-module-input:focus {
    outline: none;
}

#container #box2 .hatena-module .search-module-input:invalid {
    box-shadow: none;
}

#container #box2 .hatena-module .search-module-input:-webkit-autofill {
    z-index: auto !important;
}

#container #box2 .hatena-module .search-module-button {
    display: inline-block;
    border-radius: 50%;
    width: 40px;
    min-width: 40px;
    height: 40px;
    line-height: 40px;
    -webkit-appearance: none;
    -moz-appearance: none;
         appearance: none;
    box-shadow: 1px 1px 4px gray;
    box-sizing: border-box;
    padding: 0;
    border: none;
    font-size: .725rem;
    margin-right: .3rem;
    cursor: pointer;
    outline: none;
}

#container #box2 .hatena-module .search-module-button:not(:disabled) {
    background-color: #6200ee;
}

@supports not (-ms-ime-align: auto) {
    #container #box2 .hatena-module .search-module-button:not(:disabled) {
        /* @alternate */
        background-color: var(--mdc-theme-primary, #6200ee);
    }
}

#container #box2 .hatena-module .search-module-button:not(:disabled) {
    color: #fff;
    /* @alternate */
    color: var(--mdc-theme-on-primary, #fff);
}

#container article.entry,
#container .archive-entry {
    border-radius: 4px;
    background-color: #fff;
    /* @alternate */
    background-color: var(--mdc-theme-surface, #fff);
    box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    margin-bottom: 1rem;
}

#container article.entry .entry-header,
#container article.entry .archive-entry-header,
#container .archive-entry .entry-header,
#container .archive-entry .archive-entry-header {
    padding: 1rem;
}

#container article.entry .entry-header > .entry-date,
#container article.entry .archive-entry-header > .entry-date,
#container .archive-entry .entry-header > .entry-date,
#container .archive-entry .archive-entry-header > .entry-date {
    font-family: Roboto, sans-serif;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-size: 1.25rem;
    line-height: 2rem;
    font-weight: 400;
    letter-spacing: 0.0125em;
    text-decoration: inherit;
    text-transform: inherit;
}

#container article.entry .entry-header > .entry-date > a,
#container article.entry .archive-entry-header > .entry-date > a,
#container .archive-entry .entry-header > .entry-date > a,
#container .archive-entry .archive-entry-header > .entry-date > a {
    font-size: inherit;
}

#container article.entry .entry-header > .entry-title,
#container article.entry .archive-entry-header > .entry-title,
#container .archive-entry .entry-header > .entry-title,
#container .archive-entry .archive-entry-header > .entry-title {
    font-family: Roboto, "Helvetica Neue", Helvetica, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Arial, sans-serif;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-size: 3.75rem;
    line-height: 3.75rem;
    font-weight: 300;
    letter-spacing: -0.00833em;
    text-decoration: inherit;
    text-transform: inherit;
    margin: 0;
}

#container article.entry .entry-header > .entry-title > a,
#container article.entry .archive-entry-header > .entry-title > a,
#container .archive-entry .entry-header > .entry-title > a,
#container .archive-entry .archive-entry-header > .entry-title > a {
    font-family: Roboto, sans-serif;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-size: 0.875rem;
    line-height: 2.25rem;
    font-weight: 500;
    letter-spacing: 0.08929em;
    text-decoration: none;
    text-transform: uppercase;
    padding: 0 8px 0 8px;
    display: inline-flex;
    position: relative;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 64px;
    height: 36px;
    border: none;
    outline: none;
    /* @alternate */
    line-height: inherit;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    -webkit-appearance: none;
    overflow: hidden;
    vertical-align: middle;
    border-radius: 4px;
    --mdc-ripple-fg-size: 0;
    --mdc-ripple-left: 0;
    --mdc-ripple-top: 0;
    --mdc-ripple-fg-scale: 1;
    --mdc-ripple-fg-translate-end: 0;
    --mdc-ripple-fg-translate-start: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    will-change: transform, opacity;
    text-transform: none;
    height: auto;
    font-size: inherit;
}

#container article.entry .entry-header > .entry-title > a::-moz-focus-inner,
#container article.entry .archive-entry-header > .entry-title > a::-moz-focus-inner,
#container .archive-entry .entry-header > .entry-title > a::-moz-focus-inner,
#container .archive-entry .archive-entry-header > .entry-title > a::-moz-focus-inner {
    padding: 0;
    border: 0;
}

#container article.entry .entry-header > .entry-title > a:active,
#container article.entry .archive-entry-header > .entry-title > a:active,
#container .archive-entry .entry-header > .entry-title > a:active,
#container .archive-entry .archive-entry-header > .entry-title > a:active {
    outline: none;
}

#container article.entry .entry-header > .entry-title > a:hover,
#container article.entry .archive-entry-header > .entry-title > a:hover,
#container .archive-entry .entry-header > .entry-title > a:hover,
#container .archive-entry .archive-entry-header > .entry-title > a:hover {
    cursor: pointer;
}

#container article.entry .entry-header > .entry-title > a:disabled,
#container article.entry .archive-entry-header > .entry-title > a:disabled,
#container .archive-entry .entry-header > .entry-title > a:disabled,
#container .archive-entry .archive-entry-header > .entry-title > a:disabled {
    background-color: transparent;
    color: rgba(0, 0, 0, 0.37);
    cursor: default;
    pointer-events: none;
}

#container article.entry .entry-header > .entry-title > a.mdc-button--dense,
#container article.entry .archive-entry-header > .entry-title > a.mdc-button--dense,
#container .archive-entry .entry-header > .entry-title > a.mdc-button--dense,
#container .archive-entry .archive-entry-header > .entry-title > a.mdc-button--dense {
    border-radius: 4px;
}

#container article.entry .entry-header > .entry-title > a:not(:disabled),
#container article.entry .archive-entry-header > .entry-title > a:not(:disabled),
#container .archive-entry .entry-header > .entry-title > a:not(:disabled),
#container .archive-entry .archive-entry-header > .entry-title > a:not(:disabled) {
    background-color: transparent;
}

#container article.entry .entry-header > .entry-title > a:not(:disabled),
#container article.entry .archive-entry-header > .entry-title > a:not(:disabled),
#container .archive-entry .entry-header > .entry-title > a:not(:disabled),
#container .archive-entry .archive-entry-header > .entry-title > a:not(:disabled) {
    color: #6200ee;
    /* @alternate */
    color: var(--mdc-theme-primary, #6200ee);
}

#container article.entry .entry-header > .entry-title > a::before, #container article.entry .entry-header > .entry-title > a::after,
#container article.entry .archive-entry-header > .entry-title > a::before,
#container article.entry .archive-entry-header > .entry-title > a::after,
#container .archive-entry .entry-header > .entry-title > a::before,
#container .archive-entry .entry-header > .entry-title > a::after,
#container .archive-entry .archive-entry-header > .entry-title > a::before,
#container .archive-entry .archive-entry-header > .entry-title > a::after {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    content: "";
}

#container article.entry .entry-header > .entry-title > a::before,
#container article.entry .archive-entry-header > .entry-title > a::before,
#container .archive-entry .entry-header > .entry-title > a::before,
#container .archive-entry .archive-entry-header > .entry-title > a::before {
    transition: opacity 15ms linear, background-color 15ms linear;
    z-index: 1;
}

#container article.entry .entry-header > .entry-title > a.mdc-ripple-upgraded::before,
#container article.entry .archive-entry-header > .entry-title > a.mdc-ripple-upgraded::before,
#container .archive-entry .entry-header > .entry-title > a.mdc-ripple-upgraded::before,
#container .archive-entry .archive-entry-header > .entry-title > a.mdc-ripple-upgraded::before {
    -webkit-transform: scale(var(--mdc-ripple-fg-scale, 1));
            transform: scale(var(--mdc-ripple-fg-scale, 1));
}

#container article.entry .entry-header > .entry-title > a.mdc-ripple-upgraded::after,
#container article.entry .archive-entry-header > .entry-title > a.mdc-ripple-upgraded::after,
#container .archive-entry .entry-header > .entry-title > a.mdc-ripple-upgraded::after,
#container .archive-entry .archive-entry-header > .entry-title > a.mdc-ripple-upgraded::after {
    top: 0;
    /* @noflip */
    left: 0;
    -webkit-transform: scale(0);
            transform: scale(0);
    -webkit-transform-origin: center center;
            transform-origin: center center;
}

#container article.entry .entry-header > .entry-title > a.mdc-ripple-upgraded--unbounded::after,
#container article.entry .archive-entry-header > .entry-title > a.mdc-ripple-upgraded--unbounded::after,
#container .archive-entry .entry-header > .entry-title > a.mdc-ripple-upgraded--unbounded::after,
#container .archive-entry .archive-entry-header > .entry-title > a.mdc-ripple-upgraded--unbounded::after {
    top: var(--mdc-ripple-top, 0);
    /* @noflip */
    left: var(--mdc-ripple-left, 0);
}

#container article.entry .entry-header > .entry-title > a.mdc-ripple-upgraded--foreground-activation::after,
#container article.entry .archive-entry-header > .entry-title > a.mdc-ripple-upgraded--foreground-activation::after,
#container .archive-entry .entry-header > .entry-title > a.mdc-ripple-upgraded--foreground-activation::after,
#container .archive-entry .archive-entry-header > .entry-title > a.mdc-ripple-upgraded--foreground-activation::after {
    -webkit-animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
            animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
}

#container article.entry .entry-header > .entry-title > a.mdc-ripple-upgraded--foreground-deactivation::after,
#container article.entry .archive-entry-header > .entry-title > a.mdc-ripple-upgraded--foreground-deactivation::after,
#container .archive-entry .entry-header > .entry-title > a.mdc-ripple-upgraded--foreground-deactivation::after,
#container .archive-entry .archive-entry-header > .entry-title > a.mdc-ripple-upgraded--foreground-deactivation::after {
    -webkit-animation: mdc-ripple-fg-opacity-out 150ms;
            animation: mdc-ripple-fg-opacity-out 150ms;
    -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
            transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
}

#container article.entry .entry-header > .entry-title > a::before, #container article.entry .entry-header > .entry-title > a::after,
#container article.entry .archive-entry-header > .entry-title > a::before,
#container article.entry .archive-entry-header > .entry-title > a::after,
#container .archive-entry .entry-header > .entry-title > a::before,
#container .archive-entry .entry-header > .entry-title > a::after,
#container .archive-entry .archive-entry-header > .entry-title > a::before,
#container .archive-entry .archive-entry-header > .entry-title > a::after {
    top: calc(50% - 100%);
    /* @noflip */
    left: calc(50% - 100%);
    width: 200%;
    height: 200%;
}

#container article.entry .entry-header > .entry-title > a.mdc-ripple-upgraded::after,
#container article.entry .archive-entry-header > .entry-title > a.mdc-ripple-upgraded::after,
#container .archive-entry .entry-header > .entry-title > a.mdc-ripple-upgraded::after,
#container .archive-entry .archive-entry-header > .entry-title > a.mdc-ripple-upgraded::after {
    width: var(--mdc-ripple-fg-size, 100%);
    height: var(--mdc-ripple-fg-size, 100%);
}

#container article.entry .entry-header > .entry-title > a::before, #container article.entry .entry-header > .entry-title > a::after,
#container article.entry .archive-entry-header > .entry-title > a::before,
#container article.entry .archive-entry-header > .entry-title > a::after,
#container .archive-entry .entry-header > .entry-title > a::before,
#container .archive-entry .entry-header > .entry-title > a::after,
#container .archive-entry .archive-entry-header > .entry-title > a::before,
#container .archive-entry .archive-entry-header > .entry-title > a::after {
    background-color: #6200ee;
}

@supports not (-ms-ime-align: auto) {
    #container article.entry .entry-header > .entry-title > a::before, #container article.entry .entry-header > .entry-title > a::after,
    #container article.entry .archive-entry-header > .entry-title > a::before,
    #container article.entry .archive-entry-header > .entry-title > a::after,
    #container .archive-entry .entry-header > .entry-title > a::before,
    #container .archive-entry .entry-header > .entry-title > a::after,
    #container .archive-entry .archive-entry-header > .entry-title > a::before,
    #container .archive-entry .archive-entry-header > .entry-title > a::after {
        /* @alternate */
        background-color: var(--mdc-theme-primary, #6200ee);
    }
}

#container article.entry .entry-header > .entry-title > a:hover::before,
#container article.entry .archive-entry-header > .entry-title > a:hover::before,
#container .archive-entry .entry-header > .entry-title > a:hover::before,
#container .archive-entry .archive-entry-header > .entry-title > a:hover::before {
    opacity: 0.04;
}

#container article.entry .entry-header > .entry-title > a:not(.mdc-ripple-upgraded):focus::before, #container article.entry .entry-header > .entry-title > a.mdc-ripple-upgraded--background-focused::before,
#container article.entry .archive-entry-header > .entry-title > a:not(.mdc-ripple-upgraded):focus::before,
#container article.entry .archive-entry-header > .entry-title > a.mdc-ripple-upgraded--background-focused::before,
#container .archive-entry .entry-header > .entry-title > a:not(.mdc-ripple-upgraded):focus::before,
#container .archive-entry .entry-header > .entry-title > a.mdc-ripple-upgraded--background-focused::before,
#container .archive-entry .archive-entry-header > .entry-title > a:not(.mdc-ripple-upgraded):focus::before,
#container .archive-entry .archive-entry-header > .entry-title > a.mdc-ripple-upgraded--background-focused::before {
    transition-duration: 75ms;
    opacity: 0.12;
}

#container article.entry .entry-header > .entry-title > a:not(.mdc-ripple-upgraded)::after,
#container article.entry .archive-entry-header > .entry-title > a:not(.mdc-ripple-upgraded)::after,
#container .archive-entry .entry-header > .entry-title > a:not(.mdc-ripple-upgraded)::after,
#container .archive-entry .archive-entry-header > .entry-title > a:not(.mdc-ripple-upgraded)::after {
    transition: opacity 150ms linear;
}

#container article.entry .entry-header > .entry-title > a:not(.mdc-ripple-upgraded):active::after,
#container article.entry .archive-entry-header > .entry-title > a:not(.mdc-ripple-upgraded):active::after,
#container .archive-entry .entry-header > .entry-title > a:not(.mdc-ripple-upgraded):active::after,
#container .archive-entry .archive-entry-header > .entry-title > a:not(.mdc-ripple-upgraded):active::after {
    transition-duration: 75ms;
    opacity: 0.12;
}

#container article.entry .entry-header > .entry-title > a.mdc-ripple-upgraded,
#container article.entry .archive-entry-header > .entry-title > a.mdc-ripple-upgraded,
#container .archive-entry .entry-header > .entry-title > a.mdc-ripple-upgraded,
#container .archive-entry .archive-entry-header > .entry-title > a.mdc-ripple-upgraded {
    --mdc-ripple-fg-opacity: 0.12;
}

@keyframes mdc-ripple-fg-radius-in {
    from {
        -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
                animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        -webkit-transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
                transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
    }
    to {
        -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
                transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
    }
}

@keyframes mdc-ripple-fg-opacity-in {
    from {
        -webkit-animation-timing-function: linear;
                animation-timing-function: linear;
        opacity: 0;
    }
    to {
        opacity: var(--mdc-ripple-fg-opacity, 0);
    }
}

@keyframes mdc-ripple-fg-opacity-out {
    from {
        -webkit-animation-timing-function: linear;
                animation-timing-function: linear;
        opacity: var(--mdc-ripple-fg-opacity, 0);
    }
    to {
        opacity: 0;
    }
}

#container article.entry .mdc-ripple-surface--test-edge-var-bug,
#container .archive-entry .mdc-ripple-surface--test-edge-var-bug {
    --mdc-ripple-surface-test-edge-var: 1px solid #000;
    visibility: hidden;
}

#container article.entry .mdc-ripple-surface--test-edge-var-bug::before,
#container .archive-entry .mdc-ripple-surface--test-edge-var-bug::before {
    border: var(--mdc-ripple-surface-test-edge-var);
}

#container article.entry .entry-categories,
#container article.entry .categories,
#container .archive-entry .entry-categories,
#container .archive-entry .categories {
    margin: .5rem 0;
    display: flex;
    justify-content: flex-end;
}

#container article.entry .entry-category-link,
#container article.entry .archive-category-link,
#container .archive-entry .entry-category-link,
#container .archive-entry .archive-category-link {
    --mdc-ripple-fg-size: 0;
    --mdc-ripple-left: 0;
    --mdc-ripple-top: 0;
    --mdc-ripple-fg-scale: 1;
    --mdc-ripple-fg-translate-end: 0;
    --mdc-ripple-fg-translate-start: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    will-change: transform, opacity;
    border-radius: 16px;
    background-color: #e0e0e0;
    color: rgba(0, 0, 0, 0.87);
    font-family: Roboto, sans-serif;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 400;
    letter-spacing: 0.01786em;
    text-decoration: inherit;
    text-transform: inherit;
    height: 32px;
    display: inline-flex;
    position: relative;
    align-items: center;
    box-sizing: border-box;
    padding: 7px 12px;
    outline: none;
    cursor: pointer;
    overflow: hidden;
}

#container article.entry .entry-category-link::before, #container article.entry .entry-category-link::after,
#container article.entry .archive-category-link::before,
#container article.entry .archive-category-link::after,
#container .archive-entry .entry-category-link::before,
#container .archive-entry .entry-category-link::after,
#container .archive-entry .archive-category-link::before,
#container .archive-entry .archive-category-link::after {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    content: "";
}

#container article.entry .entry-category-link::before,
#container article.entry .archive-category-link::before,
#container .archive-entry .entry-category-link::before,
#container .archive-entry .archive-category-link::before {
    transition: opacity 15ms linear, background-color 15ms linear;
    z-index: 1;
}

#container article.entry .entry-category-link.mdc-ripple-upgraded::before,
#container article.entry .archive-category-link.mdc-ripple-upgraded::before,
#container .archive-entry .entry-category-link.mdc-ripple-upgraded::before,
#container .archive-entry .archive-category-link.mdc-ripple-upgraded::before {
    -webkit-transform: scale(var(--mdc-ripple-fg-scale, 1));
            transform: scale(var(--mdc-ripple-fg-scale, 1));
}

#container article.entry .entry-category-link.mdc-ripple-upgraded::after,
#container article.entry .archive-category-link.mdc-ripple-upgraded::after,
#container .archive-entry .entry-category-link.mdc-ripple-upgraded::after,
#container .archive-entry .archive-category-link.mdc-ripple-upgraded::after {
    top: 0;
    /* @noflip */
    left: 0;
    -webkit-transform: scale(0);
            transform: scale(0);
    -webkit-transform-origin: center center;
            transform-origin: center center;
}

#container article.entry .entry-category-link.mdc-ripple-upgraded--unbounded::after,
#container article.entry .archive-category-link.mdc-ripple-upgraded--unbounded::after,
#container .archive-entry .entry-category-link.mdc-ripple-upgraded--unbounded::after,
#container .archive-entry .archive-category-link.mdc-ripple-upgraded--unbounded::after {
    top: var(--mdc-ripple-top, 0);
    /* @noflip */
    left: var(--mdc-ripple-left, 0);
}

#container article.entry .entry-category-link.mdc-ripple-upgraded--foreground-activation::after,
#container article.entry .archive-category-link.mdc-ripple-upgraded--foreground-activation::after,
#container .archive-entry .entry-category-link.mdc-ripple-upgraded--foreground-activation::after,
#container .archive-entry .archive-category-link.mdc-ripple-upgraded--foreground-activation::after {
    -webkit-animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
            animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
}

#container article.entry .entry-category-link.mdc-ripple-upgraded--foreground-deactivation::after,
#container article.entry .archive-category-link.mdc-ripple-upgraded--foreground-deactivation::after,
#container .archive-entry .entry-category-link.mdc-ripple-upgraded--foreground-deactivation::after,
#container .archive-entry .archive-category-link.mdc-ripple-upgraded--foreground-deactivation::after {
    -webkit-animation: mdc-ripple-fg-opacity-out 150ms;
            animation: mdc-ripple-fg-opacity-out 150ms;
    -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
            transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
}

#container article.entry .entry-category-link::before, #container article.entry .entry-category-link::after,
#container article.entry .archive-category-link::before,
#container article.entry .archive-category-link::after,
#container .archive-entry .entry-category-link::before,
#container .archive-entry .entry-category-link::after,
#container .archive-entry .archive-category-link::before,
#container .archive-entry .archive-category-link::after {
    top: calc(50% - 100%);
    /* @noflip */
    left: calc(50% - 100%);
    width: 200%;
    height: 200%;
}

#container article.entry .entry-category-link.mdc-ripple-upgraded::after,
#container article.entry .archive-category-link.mdc-ripple-upgraded::after,
#container .archive-entry .entry-category-link.mdc-ripple-upgraded::after,
#container .archive-entry .archive-category-link.mdc-ripple-upgraded::after {
    width: var(--mdc-ripple-fg-size, 100%);
    height: var(--mdc-ripple-fg-size, 100%);
}

#container article.entry .entry-category-link::before, #container article.entry .entry-category-link::after,
#container article.entry .archive-category-link::before,
#container article.entry .archive-category-link::after,
#container .archive-entry .entry-category-link::before,
#container .archive-entry .entry-category-link::after,
#container .archive-entry .archive-category-link::before,
#container .archive-entry .archive-category-link::after {
    background-color: rgba(0, 0, 0, 0.87);
}

#container article.entry .entry-category-link:hover::before,
#container article.entry .archive-category-link:hover::before,
#container .archive-entry .entry-category-link:hover::before,
#container .archive-entry .archive-category-link:hover::before {
    opacity: 0.04;
}

#container article.entry .entry-category-link:not(.mdc-ripple-upgraded):focus::before, #container article.entry .entry-category-link.mdc-ripple-upgraded--background-focused::before,
#container article.entry .archive-category-link:not(.mdc-ripple-upgraded):focus::before,
#container article.entry .archive-category-link.mdc-ripple-upgraded--background-focused::before,
#container .archive-entry .entry-category-link:not(.mdc-ripple-upgraded):focus::before,
#container .archive-entry .entry-category-link.mdc-ripple-upgraded--background-focused::before,
#container .archive-entry .archive-category-link:not(.mdc-ripple-upgraded):focus::before,
#container .archive-entry .archive-category-link.mdc-ripple-upgraded--background-focused::before {
    transition-duration: 75ms;
    opacity: 0.12;
}

#container article.entry .entry-category-link:not(.mdc-ripple-upgraded)::after,
#container article.entry .archive-category-link:not(.mdc-ripple-upgraded)::after,
#container .archive-entry .entry-category-link:not(.mdc-ripple-upgraded)::after,
#container .archive-entry .archive-category-link:not(.mdc-ripple-upgraded)::after {
    transition: opacity 150ms linear;
}

#container article.entry .entry-category-link:not(.mdc-ripple-upgraded):active::after,
#container article.entry .archive-category-link:not(.mdc-ripple-upgraded):active::after,
#container .archive-entry .entry-category-link:not(.mdc-ripple-upgraded):active::after,
#container .archive-entry .archive-category-link:not(.mdc-ripple-upgraded):active::after {
    transition-duration: 75ms;
    opacity: 0.12;
}

#container article.entry .entry-category-link.mdc-ripple-upgraded,
#container article.entry .archive-category-link.mdc-ripple-upgraded,
#container .archive-entry .entry-category-link.mdc-ripple-upgraded,
#container .archive-entry .archive-category-link.mdc-ripple-upgraded {
    --mdc-ripple-fg-opacity: 0.12;
}

#container article.entry .entry-category-link:hover,
#container article.entry .archive-category-link:hover,
#container .archive-entry .entry-category-link:hover,
#container .archive-entry .archive-category-link:hover {
    color: rgba(0, 0, 0, 0.87);
}

#container article.entry .entry-category-link.mdc-chip--selected .mdc-chip__checkmark,
#container article.entry .entry-category-link .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden),
#container article.entry .archive-category-link.mdc-chip--selected .mdc-chip__checkmark,
#container article.entry .archive-category-link .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden),
#container .archive-entry .entry-category-link.mdc-chip--selected .mdc-chip__checkmark,
#container .archive-entry .entry-category-link .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden),
#container .archive-entry .archive-category-link.mdc-chip--selected .mdc-chip__checkmark,
#container .archive-entry .archive-category-link .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden) {
    /* @noflip */
    margin-left: -4px;
    /* @noflip */
    margin-right: 4px;
    margin-top: -4px;
    margin-bottom: -4px;
}

[dir="rtl"] #container article.entry .entry-category-link.mdc-chip--selected .mdc-chip__checkmark, #container article.entry .entry-category-link.mdc-chip--selected .mdc-chip__checkmark[dir="rtl"], [dir="rtl"]
#container article.entry .entry-category-link .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden),
#container article.entry .entry-category-link .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden)[dir="rtl"], [dir="rtl"]
#container article.entry .archive-category-link.mdc-chip--selected .mdc-chip__checkmark,
#container article.entry .archive-category-link.mdc-chip--selected .mdc-chip__checkmark[dir="rtl"], [dir="rtl"]
#container article.entry .archive-category-link .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden),
#container article.entry .archive-category-link .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden)[dir="rtl"], [dir="rtl"]
#container .archive-entry .entry-category-link.mdc-chip--selected .mdc-chip__checkmark,
#container .archive-entry .entry-category-link.mdc-chip--selected .mdc-chip__checkmark[dir="rtl"], [dir="rtl"]
#container .archive-entry .entry-category-link .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden),
#container .archive-entry .entry-category-link .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden)[dir="rtl"], [dir="rtl"]
#container .archive-entry .archive-category-link.mdc-chip--selected .mdc-chip__checkmark,
#container .archive-entry .archive-category-link.mdc-chip--selected .mdc-chip__checkmark[dir="rtl"], [dir="rtl"]
#container .archive-entry .archive-category-link .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden),
#container .archive-entry .archive-category-link .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden)[dir="rtl"] {
    /* @noflip */
    margin-left: 4px;
    /* @noflip */
    margin-right: -4px;
}

#container article.entry .entry-category-link:hover,
#container article.entry .archive-category-link:hover,
#container .archive-entry .entry-category-link:hover,
#container .archive-entry .archive-category-link:hover {
    color: #000;
    /* @alternate */
    color: var(--mdc-theme-on-surface, #000);
}

#container article.entry .entry-category-link + .entry-category-link,
#container article.entry .archive-category-link + .entry-category-link,
#container .archive-entry .entry-category-link + .entry-category-link,
#container .archive-entry .archive-category-link + .entry-category-link {
    margin-left: .5rem;
}

#container article.entry .social-buttons,
#container .archive-entry .social-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

#container article.entry .social-buttons > *,
#container .archive-entry .social-buttons > * {
    margin-right: 1rem;
}

#container article.entry .entry-content,
#container article.entry .archive-entry-body,
#container .archive-entry .entry-content,
#container .archive-entry .archive-entry-body {
    padding: 0 1rem;
    color: rgba(0, 0, 0, 0.54);
    color: var(--mdc-theme-text-secondary-on-background, rgba(0, 0, 0, 0.54));
}

#container article.entry .entry-content h1,
#container article.entry .archive-entry-body h1,
#container .archive-entry .entry-content h1,
#container .archive-entry .archive-entry-body h1 {
    font-family: Roboto, "Helvetica Neue", Helvetica, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Arial, sans-serif;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-size: 3.75rem;
    line-height: 3.75rem;
    font-weight: 300;
    letter-spacing: -0.00833em;
    text-decoration: inherit;
    text-transform: inherit;
}

#container article.entry .entry-content h2,
#container article.entry .archive-entry-body h2,
#container .archive-entry .entry-content h2,
#container .archive-entry .archive-entry-body h2 {
    font-family: Roboto, "Helvetica Neue", Helvetica, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Arial, sans-serif;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-size: 3rem;
    line-height: 3.125rem;
    font-weight: 400;
    letter-spacing: normal;
    text-decoration: inherit;
    text-transform: inherit;
}

#container article.entry .entry-content h3,
#container article.entry .archive-entry-body h3,
#container .archive-entry .entry-content h3,
#container .archive-entry .archive-entry-body h3 {
    font-family: Roboto, "Helvetica Neue", Helvetica, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Arial, sans-serif;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-size: 2.125rem;
    line-height: 2.5rem;
    font-weight: 400;
    letter-spacing: 0.00735em;
    text-decoration: inherit;
    text-transform: inherit;
}

#container article.entry .entry-content h4,
#container article.entry .archive-entry-body h4,
#container .archive-entry .entry-content h4,
#container .archive-entry .archive-entry-body h4 {
    font-family: Roboto, "Helvetica Neue", Helvetica, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Arial, sans-serif;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 400;
    letter-spacing: normal;
    text-decoration: inherit;
    text-transform: inherit;
}

#container article.entry .entry-content h5,
#container article.entry .archive-entry-body h5,
#container .archive-entry .entry-content h5,
#container .archive-entry .archive-entry-body h5 {
    font-family: Roboto, "Helvetica Neue", Helvetica, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Arial, sans-serif;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-size: 1.25rem;
    line-height: 2rem;
    font-weight: 500;
    letter-spacing: 0.0125em;
    text-decoration: inherit;
    text-transform: inherit;
}

#container article.entry .entry-content h6,
#container article.entry .archive-entry-body h6,
#container .archive-entry .entry-content h6,
#container .archive-entry .archive-entry-body h6 {
    font-family: Roboto, "Helvetica Neue", Helvetica, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Arial, sans-serif;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-size: 1rem;
    line-height: 1.75rem;
    font-weight: 400;
    letter-spacing: 0.00937em;
    text-decoration: inherit;
    text-transform: inherit;
}

#container article.entry .entry-footer,
#container .archive-entry .entry-footer {
    padding: 1rem;
    color: rgba(0, 0, 0, 0.54);
    color: var(--mdc-theme-text-secondary-on-background, rgba(0, 0, 0, 0.54));
}

#container article.entry .entry-footer .entry-footer-section,
#container .archive-entry .entry-footer .entry-footer-section {
    display: flex;
    justify-content: flex-end;
    margin-top: 0;
    margin-bottom: .5rem;
}

#container article.entry .comment-box,
#container .archive-entry .comment-box {
    display: flex;
    flex-flow: column;
    justify-content: flex-end;
    align-items: center;
    padding: 1rem;
    background-color: rgba(0, 0, 0, 0.03);
    border-radius: 4px;
}

#container article.entry .comment-box .comment,
#container .archive-entry .comment-box .comment {
    width: 100%;
    padding: 0;
    margin: 0;
    list-style-type: none;
}

#container dl > dd + dt {
    margin-top: 1rem;
}

#footer {
    background-color: rgba(0, 0, 0, 0.03);
    padding: .5rem 1rem;
}

#footer #footer-inner {
    display: flex;
    justify-content: space-between;
}

body.page-entry #container #wrapper {
    padding: 0;
    background-color: transparent;
}

body.page-entry #container #blog-title {
    padding: .5rem;
}

body.page-entry #container #blog-title #blog-title-content {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0;
}

body.page-entry #container #blog-title #title {
    font-family: Roboto, "Helvetica Neue", Helvetica, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Arial, sans-serif;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-size: 1.25rem;
    line-height: 2rem;
    font-weight: 500;
    letter-spacing: 0.0125em;
    text-decoration: inherit;
    text-transform: inherit;
    margin-right: 1rem;
}

body.page-entry #container #blog-title #blog-description {
    font-family: Roboto, "Helvetica Neue", Helvetica, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Arial, sans-serif;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-size: 0.875rem;
    line-height: 1.375rem;
    font-weight: 500;
    letter-spacing: 0.00714em;
    text-decoration: inherit;
    text-transform: inherit;
}

body.page-entry #container .breadcrumb {
    background-color: #fff;
    margin-bottom: 1rem;
    padding: .5rem 1rem;
}

/* font */
/** #container **/
/** #container **/
body.page-archive #container .archive-entry .categories {
    padding: 0 1rem;
}

body.page-archive #container .archive-entry .social-buttons {
    display: flex;
    justify-content: flex-end;
    padding: 1rem;
}

/*
license:MIT

Copyright: 2019 @cartman

// 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.
***/
/* </system> */