img[data-action=zoom] {
    cursor: pointer;
    cursor: -moz-zoom-in
}

.zoom-img,
.zoom-img-wrap {
    position: relative;
    z-index: 666;
    transition: all .3s
}

img.zoom-img {
    cursor: pointer;
    cursor: -moz-zoom-out
}

.zoom-overlay {
    z-index: 420;
    background: #fff;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    filter: "alpha(opacity=0)";
    opacity: 0;
    transition: opacity .3s
}

.zoom-overlay-open .zoom-overlay {
    filter: "alpha(opacity=100)";
    opacity: 1
}

.zoom-overlay-open,
.zoom-overlay-transitioning {
    cursor: default
}

.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent
}

.slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0
}

.slick-list:focus {
    outline: none
}

.slick-list.dragging {
    cursor: pointer;
    cursor: hand
}

.slick-slider .slick-track,
.slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    margin-left: auto;
    margin-right: auto
}

.slick-track:before,
.slick-track:after {
    display: table;
    content: ''
}

.slick-track:after {
    clear: both
}

.slick-loading .slick-track {
    visibility: hidden
}

.slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px
}

[dir=rtl] .slick-slide {
    float: right
}

.slick-slide img {
    display: block
}

.slick-slide.slick-loading img {
    display: none
}

.slick-slide.dragging img {
    pointer-events: none
}

.slick-initialized .slick-slide {
    display: block
}

.slick-loading .slick-slide {
    visibility: hidden
}

.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent
}

.slick-arrow.slick-hidden {
    display: none
}

.slick-slider {
    position: relative
}

.slick-slide {
    margin: 0 8px
}

.slick-arrow {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: #555
}

.slick-arrow:hover {
    cursor: pointer
}

.slick-arrow:after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    width: 5px;
    height: 5px;
    border: solid #fafafa
}

@media(max-width:767px) {
    .slick-arrow {
        display: none!important
    }
}

.slick-prev {
    left: -32px
}

.slick-prev:after {
    left: 1px;
    border-width: 2px 0 0 2px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.slick-next {
    right: -32px
}

.slick-next:after {
    right: 1px;
    border-width: 2px 2px 0 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}


/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */

html {
    line-height: 1.15;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

article,
aside,
footer,
header,
nav,
section {
    display: block
}

h1 {
    font-size: 2em;
    margin: .67em 0
}

figcaption,
figure,
main {
    display: block
}

figure {
    margin: 1em 40px
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible
}

pre {
    font-family: monospace, monospace;
    font-size: 1em
}

a {
    background-color: transparent;
    -webkit-text-decoration-skip: objects
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted
}

b,
strong {
    font-weight: inherit
}

b,
strong {
    font-weight: bolder
}

code,
kbd,
samp {
    font-family: monospace, monospace;
    font-size: 1em
}

dfn {
    font-style: italic
}

mark {
    background-color: #ff0;
    color: #000
}

small {
    font-size: 80%
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

audio,
video {
    display: inline-block
}

audio:not([controls]) {
    display: none;
    height: 0
}

img {
    border-style: none
}

svg:not(:root) {
    overflow: hidden
}

button,
input,
optgroup,
select,
textarea {
    font-family: sans-serif;
    font-size: 100%;
    line-height: 1.15;
    margin: 0
}

button,
input {
    overflow: visible
}

button,
select {
    text-transform: none
}

button,
html [type=button],
[type=reset],
[type=submit] {
    -webkit-appearance: button
}

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
    border-style: none;
    padding: 0
}

button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
    outline: 1px dotted ButtonText
}

fieldset {
    padding: .35em .75em .625em
}

legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal
}

progress {
    display: inline-block;
    vertical-align: baseline
}

textarea {
    overflow: auto
}

[type=checkbox],
[type=radio] {
    box-sizing: border-box;
    padding: 0
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

[type=search]::-webkit-search-cancel-button,
[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

details,
menu {
    display: block
}

summary {
    display: list-item
}

canvas {
    display: inline-block
}

template {
    display: none
}

[hidden] {
    display: none
}

* {
    box-sizing: border-box
}

html {
    font-size: 62.5%
}

body {
    color: #555;
    font-size: 1.0rem;
    font-family: -apple-system, BlinkMacSystemFont, YakuHanJP, Hiragino Kaku Gothic ProN, Meiryo, sans-serif;
    line-height: 1.57
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 300;
    font-family: Open Sans, sans-serif
}

h1 {
    font-size: 3.2rem
}

h2 {
    font-size: 2.8rem
}

h3 {
    font-size: 2.4rem
}

h4 {
    font-size: 2.0rem
}

h5 {
    font-size: 1.8rem
}

h6 {
    font-size: 1.6rem
}

p {
    font-size: 1.6rem
}

a {
    color: #337ab7;
    text-decoration: none
}

a:hover {
    color: #175081
}

ul li {
    list-style: disc
}

ol li {
    list-style: decimal
}

li {
    font-size: 1.6rem
}

dt {
    margin-top: 16px;
    font-size: 1.6rem
}

dd {
    margin: 8px 0 0 20px;
    font-size: 1.6rem
}

pre {
    display: block;
    padding: 12px;
    border-radius: 3px;
    background-color: #f8f8f8;
    font-size: 1.2rem;
    word-wrap: break-word;
    overflow: auto
}

code {
    line-height: 1.8;
    font-size: 1.4rem
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 1.6rem
}

th,
td {
    padding: 8px;
    border: 1px solid #eee
}

th {
    background-color: #fafafa;
    font-weight: 400
}

del {
    color: #999
}

blockquote {
    margin: 0;
    padding: 8px 12px;
    border-left: 3px solid #ccc
}

blockquote * {
    margin: 0
}

img {
    max-width: 100%;
    height: auto
}

@font-face {
    font-family: OpenSans;
    font-weight: 300;
    src: local('OpenSans'), url(/static/fonts/OpenSans-Regular.ttf) format('truetype')
}

@font-face {
    font-family: OpenSans;
    src: local('OpenSans'), url(/static/fonts/OpenSans-Regular.ttf) format('truetype')
}

@font-face {
    font-family: OpenSans;
    font-weight: 600;
    src: local('OpenSans'), url(/static/fonts/OpenSans-Regular.ttf) format('truetype')
}

.l-header {
    display: block;
    padding: 20px 0;
    text-align: center
}

.l-nav {
    width: 96%;
    max-width: 900px;
    margin: 0 auto
}

.l-main {
    width: 96%;
    max-width: 900px;
    margin: 40px auto 0
}

.l-footer {
    padding: 24px 0
}

.c-title {
    font-weight: 300;
    font-family: Open Sans, sans-serif
}

.c-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 8px 0 0;
    padding: 0
}

.c-links a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid;
    border-color: #555;
    border-radius: 50%;
    color: #555;
    transition: .2s
}

.c-links a:hover {
    background: #555;
    color: #fff
}

.c-links__item {
    margin: 8px 8px 0;
    list-style: none
}

.c-links__icon {
    width: 16px;
    height: 16px;
    fill: currentColor
}

.c-article__title {
    font-size: 2.4rem
}

.c-article__title a {
    color: #555
}

.c-article__title a:hover {
    color: #175081
}

.c-article__meta {
    font-size: 1.6rem;
    line-height: 1
}

.c-article__summary {
    font-size: 1.4rem;
    color: #999;
    line-height: 1.57
}

.c-article__summary p {
    margin: 0
}

.c-article__btn {
    display: inline-block;
    padding-bottom: 4px;
    font-size: 1.6rem
}

.c-article__btn:after {
    content: "";
    display: inline-block;
    margin-left: 3px;
    width: 5px;
    height: 5px;
    border: solid currentColor;
    border-width: 1px 1px 0 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

.c-avatar {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden
}

.c-avatar img {
    max-width: 100%;
    height: auto
}

.c-time {
    display: block;
    font-size: 1.6rem
}

.c-tag {
    display: inline-block;
    margin: 8px 6px 0 0;
    padding: 4px;
    font-size: 1.6rem;
    color: #555
}

.c-tag:before {
    content: "#";
    display: inline-block;
    margin-right: 2px;
    color: currentColor
}

.c-tag:hover {
    background: #fafafa
}

.c-pagination {
    font-size: 1.6rem
}

.c-pagination a {
    display: inline-block;
    padding: 8px 16px;
    transition: .2s
}

.c-pagination a:hover {
    background: #fafafa
}

.c-pagination__ctrl {
    display: flex;
    justify-content: space-between
}

.c-pagination__newer,
.c-pagination__older {
    flex: 1 1
}

.c-pagination__newer a:before {
    content: "";
    display: inline-block;
    position: relative;
    top: -1px;
    width: 4px;
    height: 4px;
    margin-right: 4px;
    border: solid currentColor;
    border-width: 2px 0 0 2px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.c-pagination__older {
    text-align: right
}

.c-pagination__older a:after {
    content: "";
    display: inline-block;
    position: relative;
    top: -1px;
    width: 4px;
    height: 4px;
    margin-left: 4px;
    border: solid currentColor;
    border-width: 2px 2px 0 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

.c-pagination__count {
    display: block;
    text-align: center
}

.p-title {
    margin: 0;
    font-size: 4.4rem
}

.p-title__link {
    color: #555
}

.p-subtitle {
    margin: 12px 0 0;
    color: #555;
    font-size: 1.4rem;
    font-weight: 300;
    font-family: Open Sans, sans-serif
}

.p-tag-title {
    display: inline-block;
    margin: 0;
    padding-bottom: 8px;
    border-bottom: 1px solid currentColor;
    color: #555;
    font-size: 2.4rem
}

.p-tag-title:before {
    content: "#";
    display: inline-block;
    margin-right: 4px
}

.p-copyright {
    margin: 24px 0 0;
    text-align: center;
    font-size: 1.2rem
}

.p-list-article {
    margin-top: 40px
}

.p-list-article:first-child {
    margin-top: 0
}

.p-list-article__btn {
    margin-top: 16px
}

.p-menu {
    margin-top: 40px
}

.p-menu__lists {
    display: block;
    flex-wrap: wrap;
    margin: 0;
    padding: 0
}

@media(min-width:640px) {
    .p-menu__lists {
        display: flex
    }
}

.p-menu__listitem {
    margin: 12px 0 0;
    list-style: none
}

@media(min-width:640px) {
    .p-menu__listitem {
        margin: 24px 24px 0 0
    }
}

.p-menu__listitem a {
    padding-bottom: 4px
}

.p-menu__listitem a:hover {
    border-bottom: 1px solid currentColor
}

.p-menu__listitem ul {
    padding-left: 12px
}

.p-menu__listitem ul li {
    margin: 4px 0 0
}

.p-menu__listitem ul li:before {
    content: "-";
    margin-right: 4px
}

.p-menu__parent span {
    color: #337ab7
}

.p-author {
    display: block;
    position: relative;
    width: 100%;
    margin: 20px auto 0
}

@media(min-width:640px) {
    .p-author {
        display: flex;
        margin: 80px auto 0
    }
}

.p-author:before {
    content: "* * *";
    position: absolute;
    top: -30px;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    font-size: 1.4rem;
    color: #999
}

@media(min-width:640px) {
    .p-author:before {
        top: -50px
    }
}

.p-author__name {
    font-size: 2.8rem
}

.p-author__body {
    flex: 1 1
}

@media(min-width:640px) {
    .p-author__body {
        padding-left: 16px
    }
}

.p-author__body p {
    margin: 0
}

.p-pagination {
    margin: 30px 0
}

@media(min-width:640px) {
    .p-pagination {
        margin: 60px 0
    }
}

.p-pagination__count {
    margin-top: 24px
}

.p-article__thumbnail {
    margin-top: 24px
}

.p-article__body {
    margin: 40px 0 30px;
    word-wrap: break-word
}

@media(min-width:640px) {
    .p-article__body {
        margin: 40px 0 60px
    }
}

.p-article__body img[data-action^=zoom]:hover {
    cursor: zoom-in
}

.p-article__body .zoom-img-wrap img:hover {
    cursor: zoom-out
}

.p-notfound {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 300px
}

.p-notfound h1 {
    font-size: 10rem;
    font-weight: 700
}

.p-screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute!important;
    height: 1px;
    width: 1px;
    overflow: hidden
}

.p-screen-reader-text:hover,
.p-screen-reader-text:active,
.p-screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, .6);
    clip: auto!important;
    color: #337ab7;
    display: block;
    font-size: 14px;
    font-size: .875rem;
    font-weight: 700;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000
}

.p-related {
    margin-bottom: 100px
}

.p-related__list {
    padding: 0;
    font-size: 0
}

.p-related__item {
    display: inline-block;
    width: 230px;
    height: 150px;
    margin-right: 15px;
    list-style: none
}

.p-related__item:nth-child(3n) {
    margin-right: 0
}

.p-related__item:nth-child(n+4) {
    margin-top: 15px
}

.p-related__item a {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 8px;
    background-size: cover;
    background-color: #92c6f2;
    color: #fafafa;
    font-weight: 400;
    font-family: Open Sans, sans-serif
}

.p-related__item a:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .3);
    transition: .1s
}

.p-related__item a:hover:before {
    background: rgba(0, 0, 0, .6)
}

.p-related__item span {
    position: relative
}

.u-dn {
    display: none!important
}

.u-db {
    display: block!important
}

.u-di {
    display: inline!important
}

.u-dib {
    display: inline-block!important
}

.u-align-left {
    display: block!important;
    margin-left: 0!important;
    margin-right: auto!important
}

.u-align-center {
    display: block!important;
    margin-right: auto!important;
    margin-left: auto!important
}

.u-align-right {
    display: block!important;
    margin-left: auto!important;
    margin-right: 0!important
}

img[src$='#clip-ellipse'] {
    clip-path: ellipse(50% 50% at 50% 50%);
    -webkit-clip-path: ellipse(50% 50% at 50% 50%);
    float: right;
    /* OLD VALUE example: ellipse(245px, 80px, 75px, 30px); */
}

div.notices {
    margin: 2rem 0;
    position: relative;
}

div.notices p {
    padding: 15px;
    display: block;
    /*font-size: 1rem;*/
    margin-top: 0rem;
    margin-bottom: 0rem;
    color: #666;
}

div.notices p:first-child:before {
    position: absolute;
    top: 2px;
    color: rgb(255, 255, 255);
    /* font-family: "Font Awesome 5 Free"; */
    font-weight: 900;
    /*content: "\f06a";*/
    content: "\24D8";
    left: 10px;
}

div.notices p:first-child:after {
    position: absolute;
    top: 2px;
    color: rgb(255, 255, 255);
    left: 3rem;
}

div.notices.info p {
    border-top: 30px solid #F0B37E;
    background: #FFF2DB;
}

div.notices.info p:first-child:after {
    content: 'Info';
}

div.notices.warning p {
    border-top: 30px solid rgba(217, 83, 79, 0.8);
    background: #FAE2E2;
}

div.notices.warning p:first-child:after {
    content: 'Warning';
}

div.notices.note p {
    border-top: 30px solid #6AB0DE;
    background: #E7F2FA;
}

div.notices.note p:first-child:after {
    content: 'Note';
}

div.notices.tip p {
    border-top: 30px solid rgba(92, 184, 92, 0.8);
    background: #E6F9E6;
}

div.notices.tip p:first-child:after {
    content: 'Tip';
}