/*
Zarigani Design Office Drawer Menu
Copyright 2018 Zarigani Design Office
Customized by minimalgreen

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/

.drawer_menu a {
    color: inherit;
    text-decoration: none;
}

.drawer_menu a:visited {
    color: inherit;
}


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

.drawer_menu .drawer_nav_wrapper {
    transform: translate(0);
    width: 100%;
    height: 50px;/* PC用メニュー高さ */
    position: relative;
    top: auto;
    right: auto;
    z-index: 100;
    background-color: #20b2aa5;/* PC用メニュー背景色 */
}

.drawer_menu .drawer_nav {
    max-width: 1000px;/* コンテンツ幅に合わせる */
    padding: 0;
    margin: 0 auto;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    list-style-type: none;
}

.drawer_menu .drawer_nav li {
    font-size: 16px;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 50px;/* PC用メニュー高さ */
    line-height: 50px;/* PC用メニュー高さ */
    background-color: #20b2aa;/* PC用メニューボタン背景色 */
    text-align: center;
    list-style-type: none;
}

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

.drawer_menu .drawer_nav li a {
    color: #fff;/* PC用メニューボタン文字色 */
}


/* PC非表示 */

@media screen and (min-width:1001px) {
    .pc-hidden {
        display: none;
        text-align: center;
    }
}

@media screen and (min-width: 1001px) {
/* ドロップダウンメニュー2階層目 */
.drawer_menu .drawer_nav li ul.second-level {
    visibility: hidden;
    list-style-type: none;
    position: absolute;
    z-index: -1;
    top: 0;
    margin: 0;
    padding-left: 0;
}

.drawer_menu .drawer_nav li:hover ul.second-level {
    visibility: visible;
    z-index: 1;
    top: 50px;/* PC用メニューの高さに合わせる */
    transition: all .3s;
}

.drawer_menu .drawer_nav li:hover ul.second-level li {
    width: 200px;/* ドロップダウンメニューボタン横幅 */
    height: 50px;/* Pドロップダウンメニューボタン高さ */
    text-align: center;
}

.drawer_menu .drawer_nav li:hover ul.second-level li a {
    display: block;
    background-color: #555;/* ドロップダウンメニューの文字の背景色 */
    color: #FFF;/* ドロップダウンメニューの文字色 */
    font-size: 100%;
    text-decoration: none;
    line-height: 50px;/* Pドロップダウンメニューボタン高さ */
    text-align: center;
}

.drawer_menu .drawer_nav li:hover ul.second-level li a:hover {
    background-color: #999;/* ドロップダウンメニューマウスホバー背景色 */
}
}

/*+++ Default Button Color +++*/

.drawer_menu .drawer_button {
    color: #555;/* ハンバーガーメニュー文字色 */
    display: none;
}

.drawer_menu .drawer_button .drawer_bar {
    background-color: #555;/* ハンバーガーメニュー三本線の色 */
}


/* 1000px以下 */

@media screen and (max-width: 1000px) {
    .drawer_menu .drawer_bg {
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 999;
        background-color: rgba(51, 51, 51, 0.5);
        display: none;
        top: 0;
        left: 0;
    }
    .drawer_menu .drawer_button {
        display: block;
        background: none;
        border: none;
        padding: 0;
        width: 42px;
        letter-spacing: 0.1em;
        cursor: pointer;
        position: fixed;
        top: 10px;
        right: 20px;
        z-index: 1001;
        text-align: center;
        outline: none;
    }
    .drawer_menu .drawer_button.active .drawer_bar {
        width: 49px;
    }
    .drawer_menu .drawer_button.active .drawer_bar1 {
        transform: rotate(30deg);
    }
    .drawer_menu .drawer_button.active .drawer_bar2 {
        opacity: 0;
    }
    .drawer_menu .drawer_button.active .drawer_bar3 {
        transform: rotate(-30deg);
    }
    .drawer_menu .drawer_button.active .drawer_menu_text {
        display: none;
    }
    .drawer_menu .drawer_button.active .drawer_close {
        display: block;
    }
    .drawer_menu .drawer_bar {
        display: block;
        height: 2px;
        margin: 10px 0;
        transition: all 0.2s;
        transform-origin: 0 0;
    }
    .drawer_menu .drawer_text {
        text-align: center;
        font-size: 10px;
    }
    .drawer_menu .drawer_close {
        letter-spacing: 0.08em;
        display: none;
    }
    .drawer_menu .drawer_menu_text {
        display: block;
    }
    .drawer_menu .drawer_nav_wrapper {
        width: 250px;
        height: 100%;
        transition: all 0.2s;
        transform: translate(250px);
        position: fixed;
        top: 0;
        right: 0;
        z-index: 1000;
        background-color: #FFF;/* ドロワーメニュー内背景色 */
        overflow-x: hidden;
        overflow-y: auto;
    }
    .drawer_menu .drawer_nav {
        display: block;
        position: relative;
        margin-top: 40px;
        padding-left: 20px;
    }
    .drawer_menu .drawer_nav li {
        background-color: #fff;
        height: auto;
        line-height: 50px;/*  ドロワーメニューリスト項目高さ */
        position: relative;
    }
    .drawer_menu .drawer_nav li a {
        background-color: #fff;/* ドロワーメニューリスト背景色 */
        color: #555;/* ドロワーメニューリスト文字色 */
        display: block;
        text-align: left;
    }
    /* スマートフォン2階層目 */
    .drawer_menu .drawer_nav li:hover ul.second-level {
        display: block;
    }
    .drawer_menu .drawer_nav li ul.second-level {
        visibility: visible;
        position: relative;
        padding: 0;
        z-index: 1001;
    }
    .drawer_menu .drawer_nav li ul.second-level li {
        border-top: 1px solid #eee;
    }
    .drawer_menu .drawer_nav li ul.second-level li a {
        padding-left: 20px;
    }
    .drawer_menu .drawer_nav_wrapper.open {
        transform: translate(0);
    }
    .drawer_menu.left .drawer_button {
        right: auto;
        left: 32px;
    }
    .drawer_menu.left .drawer_nav_wrapper {
        transform: translate(-250px);
        right: auto;
        left: 0;
    }
    .drawer_menu.left .drawer_nav_wrapper.open {
        transform: translate(0);
    }
    .pc-hidden {
        text-align: center;
    }
}
/*  ウィジェットタイトル */
.drawer-title {
    text-align: center;
    width: 100%;
    height: 50px;
    line-height: 50px;
    background-color: #555;/* ドロワーメニュー内タイトルライン背景色 */
    color: #fff;
}
/* フォローボタン */

.follow-buttons {
    text-align: center;
    margin-top: 0;
    width: 100%;
}

.follow-buttons a {
    display: inline-block;
    width: 60px;
    text-align: center;
    text-decoration: none;
    margin: 5px;
}

.follow-buttons .inner-text {
    font-size: 10px;
    display: block;
}

.follow-buttons .lg, .content-inner-follow-buttons .fa {
    padding: 15px;
    border-radius: 5px;
    margin: 2px auto;
}

.follow-buttons .hatena {
    color: #38393C;
    background-color: transparent;
}

.follow-buttons .blogicon-hatenablog {
    background: #38393C;
    color: #ffffff;
}

.follow-buttons .blogicon-hatenablog:hover {
    background: #5F6063;
}

.follow-buttons .facebook {
    color: #305097;
    background-color: transparent;
}

.follow-buttons .blogicon-facebook {
    background: #305097;
    color: #ffffff;
}

.follow-buttons .blogicon-facebook:hover {
    background: #5A77B7;
}

.follow-buttons .twitter {
    color: #55acee;
    background-color: transparent;
}

.follow-buttons .blogicon-twitter {
    background: #55acee;
    color: #ffffff;
}

.follow-buttons .blogicon-twitter:hover {
    background: #89C7F7;
}

.follow-buttons .instagram {
    color: #D93177;
    background-color: transparent;
}

.follow-buttons .blogicon-instagram {
    background: #D93177;
    color: #ffffff;
}

.follow-buttons .blogicon-instagram:hover {
    background: #df528d;
}

.follow-buttons .feedly {
    color: #6cc655;
    background-color: transparent;
}

.follow-buttons .blogicon-rss {
    background: #6cc655;
    color: #ffffff;
}
.pc-hidden .profile-icon {
    float: none;
}








/* <system section="theme" selected="17680117126993484579"> */
@charset "UTF-8";
/*!
  Theme: Ocean
  Author: Askthewind's diary
  Responsive: yes
  Description: モバイルファースト最適化済みのはてなブログ用デザインテーマです。
  Breakpoint: Bootstrap compliant.
  License: Released under the GPL.
*/

/* ==========================================================================
/* ! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
/* Vendor Prefix and IE other than text-size-adjust CSS that removed
/* 備考: IE向け記述と不要なベンダープレフィックスを削除
/* Document ページ全体の基本的な設定
   ========================================================================== */
/**
 * 1. 全ブラウザで行の高さを統一。
 * 2. iOSで画面を回転させた際に、文字サイズが勝手に調整されるのを防ぐ。
 */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections 主要なセクション要素の設定
   ========================================================================== */
/**
 * body要素にデフォルトで設定されている余白（margin）を削除。
 */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
/* h1要素のフォントサイズと余白を、ブラウザ間で差異が出ないように調整。
/* 
 */
/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content グループ化される要素の設定
   ========================================================================== */
/**
 * 1. preタグ（整形済みテキスト）のフォントを等幅フォントに統一し、
 * 2. フォントサイズが他の要素から正しく継承されるように修正。
 */
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics テキスト関連の要素の設定
   ========================================================================== */
/**
 * title属性を持つabbrタグ（略語など）の下線を点線で表示するように統一。
 */
/**
 * Add the correct text decoration in Chrome, Edge, Opera, and Safari.
 */
abbr[title] {
  text-decoration: underline; 
  text-decoration: underline dotted; 
}

/**
 * bタグとstrongタグ（太字）のフォントの太さを、より太く表示するように統一。
 */
/**
 * Add the correct font weight in Chrome, Edge,and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. code, kbd, sampタグ（コードなど）のフォントを等幅フォントに統一し、
 * 2. フォントサイズが正しく継承されるように修正。
 */
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * smallタグ（小さい文字）のフォントサイズを親要素の80%に設定。
 */
/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * subタグ（下付き文字）とsupタグ（上付き文字）が、
 * 行の高さ（line-height）に影響を与えないように設定。
 */
/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}

/* Forms フォーム関連の要素の設定
   ========================================================================== */
/**
 * ボタンや入力フォームなどのフォント関連のスタイルを、
 * 親要素から継承するように設定し、表示を統一
 */
/**
 * Change the font styles in all browsers.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; 
  font-size: 100%; 
  line-height: 1.15;
}

/**
 * fieldsetを囲むlegend要素の余白（padding）を削除。
 */
/**
 * Remove the padding so developers are not caught out when they zero out
 * `fieldset` elements in all browsers.
 */
legend {
  padding: 0;
}

/**
 * progress要素（プログレスバー）の縦方向の表示位置を揃える。
 */
/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/* Interactive 操作可能な要素の設定
   ========================================================================== */
/**
 * details要素内で使用されるsummary要素を、
 * リストアイテムとして表示するように統一。
 */
/**
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* End normalize.css v8.0.1
   ========================================================================== */
/* HTML Structure 外枠行順 */
/* @container > container-inner >
====================================== */

/* blog-title */
/* top-editarea */
/* top-box */
/* content > content-inner( 2カラム wrapper - box2 ) */
/* bottom-editarea */

/* containerと同じ外枠 */
/* footer > footer-inner( address - p ) */

/* CSS Document */
/* @*,html,body
====================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: hsl(0 0% 95%);
    color: hsl(0 0% 27%);
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue",
                 Helvetica, "Inter", Roboto, Arial, "Noto Sans JP", 
                 "Hiragino Sans", Meiryo, "Nimbus Sans L", 
                 "Liberation Sans", "DejaVu Sans", ui-sans-serif, 
                 sans-serif, "Apple Color Emoji", "Segoe UI Variable", 
                 "Segoe UI Emoji", "Noto Color Emoji";
    font-feature-settings: "palt";
    font-size: 1rem;
    line-height: 1.6;
}

/* @img a h
====================================== */

img {
    vertical-align: top;
}

a {
    color: hsl(0 0% 27%);
    text-decoration: none;
}

h1, h2, h3, h4, h5, h6,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: hsl(0 0% 27%);
    line-height: 1.3;
}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
    transition: all .6s;
}

/* @strong em
====================================== */

/* ツールバー 太字 */

strong {
    background: linear-gradient(transparent 70%, hsl(25 100% 50% / .5) 70%);
}

/* ツールバー 斜体 */

em {
    background: linear-gradient(transparent 60%, hsl(0 100% 50% /.5) 60%);
}

/* @canvas,svg,select,textarea
====================================== */

canvas,picture,svg,select,textarea {
    max-width: 100%;
}

:where(svg:not([fill])) {
    fill: currentColor;
}

/* ヘッダー */
/* ブログタイトル ブログ説明文 */
/* @blog-title,title,blog-description
====================================== */

#blog-title {
    padding: 50px 0;
    text-align: center;
}

.page-entry #blog-title {
    margin-bottom: 0;
}

/* @blog-description
====================================== */

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

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

#title a {
    color: hsl(0 0% 53%);
}

#title a:hover {
    color: hsl(0 0% 67%);
}

/* @blog-description
====================================== */

#blog-description {
    font-size: .8rem;
    margin: 0;
}

@media (max-width: 767px) {
    #blog-description {
        display: none;
    }
}

/* @header-image-enable
====================================== */

/* ヘッダ画像を設定したとき */
/* 画像とテキストを表示 */
/* 画像だけ表示  */

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

@media (min-width: 1200px) {
    .header-image-enable #blog-title,
    .header-image-only #blog-title {
        margin: 0 auto 4em;
    }
    .page-entry.header-image-enable #blog-title,
    .page-entry.header-image-only #blog-title {
        margin: 0 auto 3em;
    }
}

.header-image-enable #blog-title #blog-title-inner,
.header-image-only #blog-title #blog-title-inner {
    background-size: cover;
    height: 20vw!important;
    max-height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.header-image-enable #blog-title-content,
.header-image-only #blog-title-content {
    margin: 0 .625em;
}

/* レイアウト 2カラム */
/* @container
====================================== */

#container {
    background-color: hsl(0 0% 100%);
    margin: 0 auto 1em;
    overflow-wrap: break-word;
    padding: 0 10px;
    width: 100%;
}


@media (min-width: 768px) {
    #container {
        border-radius: 10px;
        padding: 0 58px;
    }
}

@media (min-width: 1200px) {
    #container {
        max-width: 1140px;
    }
}

/* @content-inner
====================================== */

#content-inner {
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1200px) {
    #content-inner {
        grid-template-columns: minmax(0, 1fr) 336px;
        gap: 58px;
    }
}

/* @wrapper,box2,#box1
====================================== */

#wrapper {
    margin-bottom: 40px;
}

#box2 {
    overflow-wrap: anywhere;
}

#box1 {
    display: none;
}

/* ブログタイトル ブログ説明文下 */
/* content枠最下部 */
/* @top-editarea,bottom-editarea
====================================== */

#top-editarea,#bottom-editarea {
    font-size: .9rem;
}

#top-editarea {
    margin: 0 auto 1em;
}

#bottom-editarea {
    margin: 0 auto;
}

#top-editarea ul,#bottom-editarea ul {
    list-style: none;
    margin-block-start: 0;
    margin-block-end: 0;
    padding-inline-start: 0;
}

/* ブログタイトル ブログ説明文下 */
/* @top-box
====================================== */

#top-box {
    font-size: .9rem;
    margin: 0 auto;
}

.page-entry #top-box {
    margin-bottom: 50px;
}

@media(max-width: 767px) {
    #top-box {
        display: none;
    }
}

/* @breadcrumb
====================================== */

.breadcrumb {
    padding: 10px;
}

.page-entry .breadcrumb {
    border: 1px solid hsl(0 0% 87%);
    border-radius: 3px;
    margin-bottom: 0;
}

.breadcrumb-gt:nth-last-of-type(2),
.breadcrumb-child:last-of-type {
    display: none;
}

.breadcrumb-link span::before,
.breadcrumb-child span::before {
    font-family: "blogicon";
    vertical-align: 0; 
}

.breadcrumb-link span::before {
    content: "\f017";   
}

.breadcrumb-child span::before {
    content: "\f04a";
    letter-spacing: .3em;
}

/* ポスト メインカラム */
/* @entry
====================================== */

.entry {
    border-bottom: 2px solid hsl(0 0% 87%);
    margin-bottom: 4em;
    padding-bottom: 2em;
    position: relative;
}

/* @entry-header
====================================== */

.entry-header {
    min-height: 120px;
    padding: 0 0 .9375em;
    position: relative;
}

.entry-header::before {
    border-bottom: solid 2px hsl(0 100% 80%);
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    transition: .9s;
    width: 0;
}

.entry-header:hover::before {
    width: 100%;
}

/* @date entry-date
====================================== */

.date {  
    display: inline-block;
    font-size: .875rem;
    line-height: .875rem;
    margin-bottom: 1em;
}

.date a {
    background-color: hsl(0 100% 80%);
    box-shadow: 0 2px 2px hsl(0 0% 0% / .12);
    color: hsl(0 0% 100%);
    padding: .094em .25em;
}

.date-last-updated {
    background-color: hsl(0 100% 80%);
    box-shadow: 0 2px 2px hsl(0 0% 0% / .12);
    color: hsl(0 0% 100%);
    margin-left: 1em;
    padding: .094em .25em;
}

.date-last-updated .blogicon {
    vertical-align: -9%;
}

/* @entry-title
====================================== */

.entry-title {
    font-size: 1rem;
    line-height: 1.4;
    margin: 0 0 .5em;
    word-break: break-all;
}

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

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

/* @categories
====================================== */

.categories {
    margin: .5em 0;
}

.categories a {
    background-color: hsl(33 31% 50% / .95); 
    border-radius: 2px;
    color: hsl(0 0% 100%);
    display: inline-block;
    font-size: .625rem;
    line-height: 1.4;
    margin: .1875em 0; 
    padding: .0625em .25em;   
    position: relative;
}

.categories a::before {
    content: "\f04a";
    font-family: "blogicon";
    letter-spacing: .3em;
}

.categories a:hover {
    opacity: .87;
}

@media (min-width: 768px) {
    .categories a {
        font-size: .75rem;
    }
}

/* @entry-header-menu
====================================== */

/* 編集ボタン */

.entry-header-menu {
    position: absolute;
    top: 0;
    right: 0;
}

.entry-header-menu a {
    background-color: hsl(162 95% 40%);
    border-radius: 3px;
    color: hsl(0 0% 100%);
    display: inline-block;
    font-size: .75rem;
    line-height: 1;
    margin-bottom: 0;
    padding: .25em;
    text-align: center;
    width: 56px;
}

.entry-header-menu a:hover {
    background-color: hsl(0 0% 40%);
}

.entry-header-menu a::before {
    content: "\f010";
    font-family: "blogicon";
    font-size: 1em;
    letter-spacing: .3em;
}

/* @entry-header social-buttons
====================================== */

.entry-header .social-buttons {
    margin-top: 1.25em;
}

/* @entry-content a
====================================== */

.entry-content {
    line-height: 1.8;
}

@media (min-width: 768px) {
    .entry-content {
        line-height: 1.9;
    }
}

.entry-content a {
    overflow-wrap: anywhere;
}

/* @entry-content img,video
====================================== */

.entry-content img {
    border: 1px solid hsl(0 0% 82%);
    box-shadow: 0 6px 6px -6px hsl(0 0% 80%);
}

.entry-content video {
    height: auto;
    max-width: 100%;
}

/* @entry-content h*
====================================== */

.entry-content h1 {
    border-bottom: 5px solid hsl(170 100% 32% / .95);
    display: inline-block;
    font-size: 1.5rem;
    margin: 1.5em 0;
    padding: .1em 0 .2em 1.8em;
    position: relative;
}

.entry-content h1::before,
.entry-content h1::after {
    background-color: hsl(170 100% 32% / .95);
    border-radius: 100%;
    content: "";
    position: absolute;
}

.entry-content h1::before {
    height: 18px;
    top: .2em;
    left: .2em;
    width: 18px;
}

.entry-content h1::after {
    height: 13px;
    top: .7em;
    left: .9em;
    width: 13px;
}

.entry-content h2 {
    border-bottom: 3px solid hsl(13 90% 71%);
    font-size: 1.4rem;
    margin: 1.5em 0;
    padding: .4em 0 .8em 1.7em;
    position: relative;
}

.entry-content h2::before,
.entry-content h2::after {
    background-color: hsl(13 90% 71%);
    content: "";
    position: absolute;
}

.entry-content h2::before {
    height: 12px;
    top: .5em;
    left: .5em;
    transform: rotate(45deg);
    width: 12px;
}

.entry-content h2::after {
    height: 8px;
    top: 1.1em;
    left: .2em;
    transform: rotate(15deg); 
    width: 8px;
}

/* ツールバー */

.entry-content h3 {
    border-bottom: 3px solid hsl(185 100% 43%);
    font-size: 1.4rem;
    margin: 1.5em 0;
    padding: .4em 0 .8em 1.7em;
    position: relative;
}

.entry-content h3::before,
.entry-content h3::after {
    background-color: hsl(185 100% 43%);
    content: "";
    position: absolute;
}

.entry-content h3::before {
    height: 12px;
    top: .5em;
    left: .5em;
    transform: rotate(45deg);
    width: 12px;
}

.entry-content h3::after {
    height: 8px;
    top: 1.1em;
    left: .2em;
    transform: rotate(15deg); 
    width: 8px;
}

/* ツールバー 中見出し */

.entry-content h4 {
    border-bottom: double 5px hsl(0 100% 80%);
    font-size: 1.4rem;
    margin: 1.5em 0;
    padding-bottom: .8em;
}

/* ツールバー 小見出し */

.entry-content h5 {
    border-bottom: dashed 3px hsl(35 100% 74%);
    font-size: 1.4rem;
    margin: 1.5em 0;
    padding-bottom: .8em;
}

.entry-content h6 {
    border-bottom: dotted 3px hsl(150 100% 98%);
    font-size: 1.4rem;
    margin: 1.5em 0;
    padding-bottom: .8em;
}

/* @entry-see-more
====================================== */

/* ツールバー 続きを読む */

a.entry-see-more {
    background: hsl(162 95% 40%) 
        linear-gradient(hsl(162 95% 40%),hsl(162 95% 38%));
    border-radius: 4px;
    box-shadow: 0 3px 0 hsl(0 0% 0% / .01);
    color: hsl(0 0% 100%);
    display: inline-block;
    font-weight: 700;
    height: 40px;
    line-height: 40px;
    margin-top: 1em;
    text-align: center;
    text-shadow: 0 1px 1px hsl(0 0% 0% / .1);
    transition: all .4s;
    width: 200px;    
}

a.entry-see-more:hover {
    opacity: .87;
}

/* @entry-content table-of-contents
====================================== */

/* ツールバー 目次 */

.entry-content ul.table-of-contents {
    background-color: hsl(38 100% 98%);
    border: solid 3px hsl(13 90% 71%);
    border-radius: 10px;
    color: hsl(0 0% 60%);
    font-size: .9rem;
    margin: 2.25em 0 1.5em;
    padding: 1em 2.25em;
    position: relative;
}

.entry-content ul.table-of-contents::before {
    color: hsl(35 100% 74%);
    content: "Contents";
    font-size: 1rem;
    font-weight: 700;
    padding: .625em 0;
}

.entry-content ul.table-of-contents::after {
    color: hsl(0 100% 80%);
    content: "目次";
    font-size: 1rem;
    font-weight: 700;
    opacity: .75;
    position: absolute;
    top: 8px;
    right: 24px;
}

.entry-content .table-of-contents a::after {
    display: none;
}

.entry-content ul.table-of-contents li a,
.entry-content ul.table-of-contents li a:visited {
    color: hsl(0 0% 60%);
}

.entry-content ul.table-of-contents li a:hover {
    color: hsl(0 0% 53%);
}

.entry-content ul.table-of-contents li {
    line-height: 1.5;
    list-style-type: none;
    margin: .3125em 0 .625em .375em;
    padding: 0;
    position: relative;
}

.entry-content ul.table-of-contents li::before {
    color: hsl(197 59% 56%);
    content: "\f727";
    font-family: blogicon;
    position: absolute;
    left: -1.2em;
}

.entry-content ul.table-of-contents li ul li::before {
    color: hsl(0 100% 80%);
}

.entry-content ul.table-of-contents li ul li ul li::before {
    color: hsl(170 100% 32% / .95);
}

.entry-content ul.table-of-contents li ul li ul li ul li::before {
    color: hsl(35 100% 74%);
}

/* @entry-content blockquote
====================================== */

/* ツールバー 引用 */

.entry-content blockquote {
    margin: 1.5em 0;
    padding-inline: 1em;
    position: relative;
}

.entry-content blockquote::before {
    background-color: hsl(180 2% 88%);
    border-radius: 4px;
    content: "";
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
}

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

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

/* @entry-content ul,ol,dd
====================================== */

/* ツールバー 箇条書き 番号付きリスト */

.entry-content ul,
.entry-content ol,
.entry-content dd {
    margin-bottom: 1em;
    padding: 0;
}

@media (min-width: 1200px) {
    .entry-content ul,
    .entry-content ol,
    .entry-content dd {
        margin-left: 1.5em;
    }
}

.entry-content ul li ul, 
.entry-content ul li ol,
.entry-content ol li ul,
.entry-content ol li ol,
.entry-content dd li ul,
.entry-content dd li ol {
    margin-bottom: 0;
}

/* @entry-content pre code
====================================== */

/* コードブロック */

.entry-content pre, 
.entry-content code,
.entry-content pre > code,
.entry-content pre[class*=lang] {
    font-family: "Fira Code", ui-monospace, Consolas,
                 SFMono-Regular, "SF Mono", Menlo, 
                 "Ubuntu Mono", "Liberation Mono", monospace;
}

.entry-content pre, 
.entry-content code {
    background-color: hsl(0 0% 100% / .9);
    border: 1px solid hsl(0 0% 87%);
    border-radius: .375em;
    font-size: 1em;
    line-height: 1.5;
}

.entry-content pre {
    margin: .5em 0;
    padding: 1em;
    position: relative;
}

.entry-content :not(pre) > code {
    padding: .0625em .25em;
}

.entry-content pre.code {
    padding-top: 2em;
    white-space: pre;
}

.entry-content pre.code::before {
    background-color: hsl(180 8% 17%);
    color: hsl(0 0% 100%);
    content: "Plain text";
    font-size: .875rem;
    font-weight: 500;
    line-height: 1;
    padding: .25rem .5rem;
    position: absolute;
    top: 0;
    left: 0;
}

.entry-content pre.code[class*=lang]::before {
    content: attr(data-lang);
}

/* @entry-content table
====================================== */

.entry-content table {
    border-bottom: 1em;
    border-collapse: collapse;
    border-spacing: 0;
    display: block;
    font-size: .8rem;
    margin-bottom: 1em;
    overflow: auto;
}

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

.entry-content table th,
.entry-content table td {
    border: 1px solid hsl(0 0% 87%);
    padding: .3125em .625em;
}

.entry-content table th {
    background: hsl(213 71% 92% / .95) 
        linear-gradient(hsl(212 74% 95% / .95),hsl(213 71% 92% / .95));
    box-shadow: 0 1px 0 hsl(0 0% 100% / .8) inset;
}

.entry-content table th:first-child {
    border-radius: 6px 0 0 0;
}

.entry-content table th:last-child {
    border-radius: 0 6px 0 0;
}

.entry-content table th:only-child {
    border-radius: 6px 6px 0 0;
}

.entry-content table tr:last-child td:first-child {
    border-radius: 0 0 0 6px;
}

.entry-content table tr:last-child td:last-child {
    border-radius: 0 0 6px 0;
}

.entry-content table tr:last-child td:only-child {
    border-radius: 0 0 6px 6px;
}

/* @footnote footnote-number
====================================== */

/* ツールバー 脚注 */

.page-index .footnote { 
    display: none;
}

.footnote-number {
    scroll-margin-top: 3.5em;
}

/* @entry-content hr
====================================== */

.entry-content hr {
    border: 0;
    border-top: 8px dotted hsl(0 0% 0% / .1);
    margin: 4.375em auto;
    width: 50%;
}

/* @entry-content hatena-asin-detail
====================================== */

.hatena-asin-detail {
    background-color: hsl(213 28% 19% / .1);
    border: 3px solid hsl(213 28% 19%);
    border-radius: 4px;
    padding: .8em .6em;
    position: relative;
}

@media (min-width: 768px) {
    .hatena-asin-detail {
        padding: .8em 1.5em .8em .6em;
    }
}

.hatena-asin-detail a {
    color: hsl(36 100% 50%);
    
}

@media (min-width: 1200px) {
    .hatena-asin-detail::before {
        background-color: hsl(213 28% 19%);
        color: hsl(36 100% 50%);
        content: "\293b";
        font-size: 1.8rem;
        font-weight: 900;
        height: 1.5rem;
        line-height: 2rem;
        position: absolute;
        top: -2px;
        right: -2px;
        text-align: center;
        width: 1.5rem;
        z-index: 1;
    }
    .hatena-asin-detail::after {
        color: hsl(0 0% 100%);
        content: "a";
        font-family: Arial, "Liberation Sans", sans-serif;
        font-size: 1.2rem;
        font-weight: 900;
        height: 1.5rem;
        line-height: 1rem;
        position: absolute;
        top: -2px;
        right: -2px;
        text-align:center;
        width: 1.5rem;
        z-index: 2;
    }
}

.hatena-asin-detail.hatena-rakuten-detail {
    background-color: hsl(0 100% 37% / .1);
    border: 3px solid hsl(0 100% 37%);
}

.hatena-asin-detail.hatena-rakuten-detail a {
    color: hsl(0 100% 37%);
}

@media (min-width: 1200px) {
    .hatena-asin-detail.hatena-rakuten-detail::before {
        background-color: hsl(0 100% 37%);
        border-radius: 50%;
        color: hsl(0 0% 100%);
        content: "R";
        font-family: Arial, "Liberation Sans", sans-serif;
        font-size: .875rem;
        font-weight: 600;
        line-height: 1.5rem;
        position: absolute;
        top: 3px;
        right: 4px;
        text-align: center;
    }
    .hatena-asin-detail.hatena-rakuten-detail::after {
        content: none;
    }
}

/* @entry-content cite hatena-citation 
====================================== */

.entry-content cite.hatena-citation a::before {
    content: "\f009";
    font-family: "blogicon";
    letter-spacing: .3em;
    line-height: 1;
    vertical-align: middle;
}

/* ポスト下 */
/* @entry-footer social-buttons
====================================== */

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

.page-index .social-buttons { 
    display: none; 
}

/* @entry-footer-section
====================================== */

.entry-footer-section,
.entry-footer-section a {
    color: hsl(0 0% 60%);
    font-size: .8rem;
}

.page-index .entry-footer-section {
    display: none;
}

/*@entry-footer entry-footer-time
====================================== */

.entry-footer .entry-footer-time .updated  {
    display: none;
}

/*@entry-footer vcard
====================================== */

.entry-footer .author.vcard::before {
    content: "Author:\00a0";
}

/*@entry-tags-wrapper
====================================== */

.page-index .entry-tags-wrapper {
    display: none;
}

/* @hatena-star-container
====================================== */

.entry-footer .hatena-star-container {
    background-color: hsl(0 0% 99%);
    border-radius: 8px;
    margin: 1.5em 0;
    padding: 1em;
}

.entry-footer .hatena-star-container::before {
    content: "記事が面白かったら★をクリック！（連打できます）";
    display: block;
    font-size: .95rem;
    font-weight: 700;
    margin-bottom: .5em;
}

.page-index .entry-footer .hatena-star-container {
    display: none;
}

/* @ad-online-afc
====================================== */

.ad-online-afc .yads_ad .yads_ad_title,
.touch-afc-block .google_afc_blocklink .visible_url a {
    overflow-wrap: anywhere;
}

/* ポスト下 関連記事 */
/* @main entry-footer-modules
====================================== */

@media (min-width: 576px) {
    #main .entry-footer-modules .hatena-module {
        padding-top: 1em;
    }
    #main .entry-footer-modules .hatena-urllist {
        display: flex;
        flex-wrap: wrap;
        gap: .5em;
    }
    #main .entry-footer-modules .hatena-urllist li {
        border: 1px solid hsl(0 0% 93%);
        border-radius: 2px;
        margin: 0;
        padding: 1em;
        width: 100%;
    }
    #main .entry-footer-modules .hatena-urllist li:nth-of-type(n+2) {
        width: calc( 50% - ( .25em + 1px ) );
    }
    #main .entry-footer-modules .urllist-title-link {
        font-size: .875rem;
        padding-bottom: .5em;
    }
    #main .entry-footer-modules .urllist-entry-body {
        overflow: hidden;
    }
}

@media (min-width: 768px) {
    #main .entry-footer-modules .hatena-urllist {
        flex-direction: column;
    }
    #main .entry-footer-modules .hatena-urllist li:nth-of-type(n+2) {
        width: 100%;
    }
    #main .entry-footer-modules .urllist-title-link {
        font-size: .875rem;
    }
}

/* コメント欄 */
/* @comment-box
====================================== */

.comment-box {
    margin: 1em 0;
}

.page-index .comment-box {
    display: none;
}

/* @comment-box comment
====================================== */

.comment-box .comment {
    font-size: .875rem;
    line-height: 1.7;
    list-style: none;
    margin-block: 1.875rem;
    padding: 0;
}

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

/* @comment-box entry-comment
====================================== */

.comment-box .entry-comment {
    background: linear-gradient(-155deg,
        hsl(0 0% 0% / 0) 1.5em, hsl(0 0% 99%) 0%);
    border-radius: 6px;
    box-shadow: 10px 10px 32px -15px hsl(0 0% 0% / .25);
    margin-bottom: .75em;
    padding: .625em 1.25em .625em 3.75em;
    position: relative;
}

.comment-box .entry-comment::after {
    background: linear-gradient(to left bottom,
        hsl(0 0% 0% / 0) 50%,
        hsl(0 0% 0% / .1) 0%,
        hsl(0 0% 0% / .2)
    );
    border-bottom-left-radius: 6px;
    box-shadow: -.2em .2em .3em -.1em hsl(0 0% 0% / .15);
    content: "";
    height: 3.5493em;
    position: absolute;
    top: 0;
    right: 0;
    transform: translateY(-1.89424em) rotate(-40deg);
    transform-origin: bottom right;
    width: 1.65507em;
}

/* @comment-box read-more-comments
====================================== */

.comment-box .read-more-comments {
    padding: .625em 0;
}

/* @comment-box hatena-id-icon
====================================== */

.comment-box .hatena-id-icon {
    border-radius: 3px;
    height: 50px !important;
    position: absolute;
    top: 10px;
    left: 0;
    width: 50px !important;
}

/* @comment-user-name
====================================== */

.comment-user-name {
    font-weight: 700;
    margin: 0 0 .4em 0;
}

/* @comment-content p img
====================================== */

.comment-content {
    color: hsl(0 0% 25%);
    font-size: .85rem;
    margin: 0 0 .4em 0;
}

.comment-content p {
    margin: 0 0 .6em 0;
}

.comment-content img {
    height: auto;
}

/* @comment-metadata a
====================================== */

.comment-metadata {
    color: hsl(0 0% 53%);
    font-size: .8rem;
    margin: 0;
}

.comment-metadata a {
    color: hsl(0 0% 53%);
}

/* @leave-comment-title
====================================== */

.leave-comment-title {
    border: 1px solid hsl(0 0% 78%);
    border-radius: .5em;
    color: hsl(0 0% 46%);
    font-size: .85rem;
    font-weight: 700;
    margin-top: 1em;
    padding: .6em 1em;
}

.leave-comment-title::before { 
    content: "\f024";
    font-family: "blogicon";
    letter-spacing: .3em;
}

.leave-comment-title:hover {
    color: hsl(225 6% 13%); 
}

/* ページ送りナビ */
/* @pager 
====================================== */

.pager {
    margin: 2em 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

@media (min-width: 768px) {
    .pager {
        flex-direction: row;
    }
}

.pager>* {
    flex: 1;
}

.pager .pager-next a,.pager .pager-prev a {
    background-color: hsl(0 0% 99%);
    border: 1px solid hsl(0 0% 80%);
    border-radius: 4px;
    color: hsl(0 0% 50%);
    cursor: pointer;
    display: block;
    font-size: .975rem;
    font-weight: 500;
    line-height: 1.4;
    padding: .75em 1.25em;
    text-align: center;
    text-overflow: ellipsis;
    transition: all .25s;
    overflow: hidden;
    white-space: nowrap;
}

@media(min-width: 768px) {
    .pager .pager-next a,.pager .pager-prev a {
        font-size: .975rem;
        padding: 1em 1.25em;
    }
}

.pager .pager-next a:hover,.pager .pager-prev a:hover {
    background-color: hsl(0 0% 96%);
    border: 1px solid hsl(0 0% 89%);
    color: hsl(0 0% 48%);
}

/* サイドカラム */
/* @hatena-module
====================================== */

.hatena-module {
    border-bottom: 1px solid hsl(0 0% 95%);
    font-size: .85rem;
    margin-bottom: 3em;
    position: relative;
}

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

/* @hatena-module-title
====================================== */

.hatena-module-title {
    color: hsl(0 0% 53%);
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: .9375em;
    margin-left: 2.1875em;
    position: relative;
}

@media (min-width: 768px) and (max-width: 1199px) {
    .hatena-module-title {
        font-size: 1.1rem;
    }
}

.hatena-module-title::after {
    background: linear-gradient(to right,hsl(185 100% 43% / .95),transparent);
    content: "";
    display: block;
    height: 4px;
}

.hatena-module-title a {
    color: hsl(0 0% 53%);
}

/* @hatena-module-title::before
====================================== */

.hatena-module-title::before {
    background-color: hsl(185 100% 43% / .95);
    border-radius: 50%;
    color: hsl(0 0% 100%);
    display: inline-block;
    font-family: "blogicon"; 
    font-size: 1.25rem;
    height: 30px;
    line-height: 30px;
    position: absolute;
    top: 0;
    left: -35px;
    text-align: center;
    width: 30px;
}

.hatena-module-profile .hatena-module-title::before {
    content: "\f016";
}

.hatena-module-search-box .hatena-module-title::before {
    content: "\f01a";
}

.hatena-module-recent-entries .hatena-module-title::before {
    content: "\f031";
}

.hatena-module-archive .hatena-module-title::before {
    content: "\f039";
}

.hatena-module-links .hatena-module-title::before {
    content: "\f042";
}

.hatena-module-related-entries .hatena-module-title::before {
    content: "\f013";
}

.hatena-module-entries-access-ranking .hatena-module-title::before {
    content: "\f050";
}

.hatena-module-category .hatena-module-title::before {
    content: "\f022";
}

.hatena-module-recent-comments .hatena-module-title::before {
    content: "\f01d";
}

.hatena-module-html .hatena-module-title::before {
    content: "\f710";
}

.hatena-module-circles .hatena-module-title::before {
    content: "\f021";
}

.hatena-module-authors-list .hatena-module-title::before {   
    content: "\f00b";
}

/* @hatena-module-body
====================================== */

.hatena-module-body {
    padding: 0 .9375em;
}

/* @hatena-module-profile profile-icon
====================================== */

.hatena-module-profile .profile-icon {
    background-clip: padding-box;
    border-radius :5px;
}

@media (min-width: 768px) and (max-width: 1199px) {
    .hatena-module-profile .profile-icon {
         border-radius: 50%;
    }
}

/* @hatena-module-profile id
====================================== */

.hatena-module-profile .id {
    display: block;
    font-weight: 700;
    line-height: 2;
    margin-bottom: 1em;
}

/* @profile-description p 
====================================== */

.hatena-module-profile .profile-description p {
    font-size: .9rem;
    margin-top: 0;
}

/* @hatena-urllist
====================================== */

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

.hatena-urllist li {
    font-weight: 700;
    padding: .5em 0 .5em .25em;
}

.hatena-urllist li a {
    color: hsl(213 5% 39%);
}

.hatena-urllist li a:hover {
    color: hsl(0 100% 70%);
}

/* @#urllist-image
====================================== */

.hatena-urllist li .urllist-image {
    border-radius: .5em;
}

/* @urllist-title-link
====================================== */

.hatena-urllist li .urllist-title-link {
    font-size: .925rem; /* .8125rem; */
}

@media (min-width: 768px) and (max-width: 1199px) {
    .hatena-urllist li .urllist-title-link {
        font-size: .75rem;
    }
}

/* @urllist-category-link
====================================== */

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

.hatena-urllist .urllist-category-link:first-of-type,
.hatena-urllist .urllist-category-link:nth-of-type(5n+1) {
    color: hsl(185 99% 27%); 
}

.hatena-urllist .urllist-category-link:nth-of-type(2),
.hatena-urllist .urllist-category-link:nth-of-type(5n+2) {
    color: hsl(326 37% 44%); 
}

.hatena-urllist .urllist-category-link:nth-of-type(3),
.hatena-urllist .urllist-category-link:nth-of-type(5n+3) {
    color: hsl(49 89% 33%); 
}

.hatena-urllist .urllist-category-link:nth-of-type(4),
.hatena-urllist .urllist-category-link:nth-of-type(5n+4) {
    color: hsl(28 53% 39%);
}

.hatena-urllist .urllist-category-link:nth-of-type(5),
.hatena-urllist .urllist-category-link:nth-of-type(5n) {
    color: hsl(355 52% 60%);
}

.hatena-urllist .urllist-category-link::before {
    content: "\f04a";
    font-family: "blogicon";
    font-size: .85em;
    letter-spacing: .2em;
}

.hatena-urllist .urllist-category-link:hover {
    opacity: .7;
}

/* @urllist-date-link a
====================================== */

.urllist-date-link a {
    color: hsl(0 0% 60%);
    font-size: .7rem;
}

.hatena-urllist .urllist-date-link a::before {
    content: "\f043";
    font-family: "blogicon";
    font-size: .95em;
    letter-spacing: .1em;
}

/* @urllist-entry-body
====================================== */

.hatena-urllist .urllist-entry-body {
    margin-top: .3em;
}

.hatena-module .hatena-urllist li:nth-of-type(n+2) .urllist-entry-body {
    display: none;
}

/* @hatena-module-search-box
====================================== */

.search-form {
    background-color: hsl(0 0% 95%);
    border-radius: 4px;
    height: 40px;
    width: 100%;
    display: flex;
    align-items: center;
}

.search-form .search-module-input {
    background: none;
    border: none;
    height: 20px;
    opacity: .55;
    outline: none;
    text-indent: .5em;
    width: calc(100% - 45px);
}

.search-form .search-module-button {
    background: url(https://cdn.blog.st-hatena.com/images/theme/search@2x.png?version=e701c2122d339248daeceecd526ad4) 
                no-repeat center / 20px 20px;
    border: none;
    color: transparent;
    cursor: pointer;
    height: 100%;
    opacity: .55;
    width: 40px; 
}

.search-form .search-module-button:hover {
    opacity: .87;
}

/* @entries-access-ranking
====================================== */

.entries-access-ranking {
    counter-reset: rank;
}

.entries-access-ranking li {
    margin: .7em 0;
    padding: 0;
    position: relative;
}

.entries-access-ranking li::before {
    border-radius: 50%;
    color: hsl(0 0% 100%);
    content: counter(rank);
    counter-increment: rank;
    display: block;
    font-size: .8125rem;
    font-weight: 700;
    height: 20px;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    width: 20px;
}

.entries-access-ranking li:nth-of-type(1)::before {
    background-color: hsl(40 100% 55% / .95);
}

.entries-access-ranking li:nth-of-type(2)::before {
    background-color: hsl(0 0% 54% / .95);
}

.entries-access-ranking li:nth-of-type(3)::before {
    background-color: hsl(30 30% 50% / .95);
}

.entries-access-ranking li:nth-of-type(n+4)::before {
    background-color: hsl(120 100% 50% / .95);
}

.entries-access-ranking li:nth-of-type(n+9)::before {
    background-color: hsl(0 0% 25% / .95); 
}

.entries-access-ranking .urllist-date-link {
    margin-left: 2.75em;
}

.entries-access-ranking .urllist-title-link {
    display: inline-block;
    margin-left: 2.5em;
}

.entries-access-ranking .urllist-image-link+.urllist-date-link,
.entries-access-ranking .urllist-image-link+.urllist-title-link,
.entries-access-ranking .urllist-image-link+.urllist-date-link+.urllist-title-link {
    margin-left: 0;
}

.entries-access-ranking .urllist-image-link+.urllist-title-link,
.entries-access-ranking .urllist-image-link+.urllist-date-link+.urllist-title-link {
    display: inline;
}

/* @hatena-module-category
====================================== */

.hatena-module-category .hatena-urllist li a,
ul.archive-module-months li a {
    display: block;
    overflow: hidden;
    padding-left: 1.25em;
    position: relative;
}

.hatena-module-category .hatena-urllist li a::before,
ul.archive-module-months li a::before {
    border-color: transparent transparent transparent hsl(188 93% 43%);
    border-style: solid;
    border-width: 4.5px 0 4.5px 6px;
    content: "";
    display: block;
    height: 0;
    position: absolute;
    top: calc(-5px + 50%);
    left: -7px;
    transition: left .35s;
    width: 0;
}

.hatena-module-category .hatena-urllist li a:hover::before,
ul.archive-module-months li a:hover::before  {
    left: 8px;
}

/* @hatena-module-html
====================================== */

.hatena-module-html p {
    margin: 0;
}

.hatena-module-html ul {
    list-style: none;
    margin-block: 0;
    padding-inline-start: 0;
}

.hatena-module-html video,
.hatena-module-html iframe {
    max-width: 100%;
}

.hatena-module-html video {
    height: auto;
}

/* @hatena-module-circles
====================================== */

.hatena-module-circles .hatena-urllist li {
    border: 1px solid hsl(0 0% 87%);
    padding: 1em;
}

.hatena-module-circles .hatena-urllist li:nth-of-type(n+2) {
    border-top: none;
}

.hatena-module-circles .hatena-urllist li:hover {
    background-color: hsl(0 0% 97%);
}

.hatena-module-circles .hatena-urllist li:first-of-type a {
    color: hsl(349 53% 54%);
}

.hatena-module-circles .hatena-urllist li:nth-of-type(2) a {
    color: hsl(105 100% 20%);
}

.hatena-module-circles .hatena-urllist li:nth-of-type(3) a {
    color: hsl(195 100% 27%);
}

.hatena-module-circles .hatena-urllist li:nth-of-type(4) a {
    color: hsl(30 100% 22%); 
}

.hatena-module-circles .hatena-urllist li:nth-of-type(n+5) a {
    color: hsl(0 22% 58%); 
}

/* @circle-urllist circle-image
====================================== */

.hatena-module-body .circle-urllist .circle-image { 
    margin-left: .3125em;
}

.hatena-module-body .circle-urllist li .circle-image {
    outline: 2px solid transparent;
}

.hatena-module-body .circle-urllist li:hover .circle-image {
    outline: 2px solid hsl(0 0% 87%);
} 

/* @archive-module-button
====================================== */

.archive-module-button {
    color: hsl(35 84% 62%);
}

/* @archive-module-calendar
====================================== */

.hatena-module .archive-module-calendar,
.hatena-module .archive-module-calendar a {
    color: hsl(0 0% 46%);
}

.hatena-module .archive-module-calendar a {
    text-decoration: underline;
}

.hatena-module .calendar-sunday,
.hatena-module .archive-module-calendar-week td:first-of-type,
.hatena-module .archive-module-calendar-week td:first-of-type a {
    color: hsl(16 100% 50%);
}

.hatena-module .calendar-saturday,
.hatena-module .archive-module-calendar-week td:nth-of-type(7),
.hatena-module .archive-module-calendar-week td:nth-of-type(7) a {
    color: hsl(188 100% 50%);
}

.hatena-module .archive-module-calendar a:hover,
.hatena-module .archive-module-calendar-week td:first-of-type a:hover,
.hatena-module .archive-module-calendar-week td:nth-of-type(7) a:hover {
    opacity: .7;
}   

/* @recent-comments
====================================== */

.recent-comments,
.recent-comments .user-id img {
    overflow-wrap: anywhere;
}

/* aboutページ編集 */
/* @page-about entry-content dt dd
====================================== */

.page-about .entry-content dt {
    border-bottom: 1px solid hsl(0 0% 96%);
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: .3125em;
    padding-left: 1.25em;
}

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

/* アーカイブページ */
/* @page-archive breadcrumb
====================================== */

.page-archive .breadcrumb {
    display: none;
}

/* @archive-header-category
====================================== */

.archive-header-category {
    margin-bottom: 1.5rem;
}

/* @archive-heading
====================================== */

.archive-header-category .archive-heading {
    margin-bottom: 0;
}

.archive-header-category .archive-heading::before {
    content: "Category:";
    margin-right: .2em;
} 

/* @archive-entries
====================================== */

.page-archive .archive-entries {
    display: flex;
    flex-direction: column;
    gap: 1em 0;
}

@media (min-width: 576px) {
    .page-archive .archive-entries {
        flex-flow: row wrap;
        justify-content: space-between;
    }
}

/* @page-archive archive-entry
====================================== */

.page-archive .archive-entry {
    background-color: hsl(0 0% 100%);
    border: 1px solid hsl(0 0% 95%);
    padding: .625em;
    word-break: break-all;
    display: flex;
    flex-direction: column;
}

@media (min-width: 576px) {
    .page-archive .archive-entry {
        width: calc(50% - .5em);
    }
}

/* @page-archive entry-thumb-link
====================================== */

.page-archive .archive-entry .entry-thumb-link {
    order: 0;
    overflow: hidden;
}

/* @page-archive entry-thumb
====================================== */

.page-archive .archive-entry .entry-thumb {
    aspect-ratio: 16 / 9;
    border-radius: 5px;
    float: none;
    height: auto;
    margin-right: 0;
    object-fit: cover;
    transition: .4s ease-in-out;
    width: 100%; 
}

.page-archive .archive-entry .entry-thumb:hover {
    background-color: hsl(0 0% 0% / .08);
    opacity: .55;
    transform: scale(1.3);
}

/* @archive-entry-header
====================================== */

.archive-entry .archive-entry-header {
    margin-top: .4em;
    order: 1;
    display: flex;
    flex-direction: column-reverse;
}

/* @archive-entry-header entry-title
====================================== */

.archive-entry .archive-entry-header .entry-title {
    font-size: 1rem;
    margin-bottom: .2em;
}

/* @archive-entry-header date
====================================== */

.archive-entry .archive-entry-header .date {
    font-size: .625rem;
    line-height: .625rem;
    margin: .5em 0 .2em;
}

.archive-entry .archive-entry-header .date a {
    padding: .125rem .25rem;
}

/* @page-archive archive-entry-body
====================================== */

.page-archive .archive-entry .archive-entry-body {
    order: 2;
}

/* @page-archive date
====================================== */

.page-archive .date .hyphen { 
    display: none;
}

.page-archive .date .date-year::after,
.page-archive .date .date-month::after { 
    content: ".";
}

/* @page-archive categories
====================================== */

.page-archive .archive-entry .categories {
    display: none;
    /* order: 3; */
}

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

/* @page-archive entry-description
====================================== */

.archive-entry .archive-entry-body .entry-description {
    /* color: hsl(213 5% 39%); */
    display: none;
    /* font-weight: 600; */
    /* font-size: .8rem; */
    /* margin: 0; */
}

/* @page-archive social-buttons
====================================== */

.archive-entry .archive-entry-body .social-buttons {
    display: none;
    /* margin-top: .6em; */
}

/* @page-archive span highlight 
====================================== */

.page-archive span.highlight {
    background-color: hsl(41 100% 48% / .15);
    border: 1px solid hsl(41 100% 48% / .16);
    color: hsl(41 100% 48%);
    line-height: 1;
    padding: 0;
}

/* @archive-entry-tags-wrapper
====================================== */

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

/* @page-archive search-result-button
====================================== */

.search-result-form .search-result-button {
    top: 50%;
    transform: translateY(-50%);
}

/* フッター */
/* @footer
====================================== */

#footer {
    color: hsl(0 0% 53%);
    font-size: .8rem;
    padding: .625em 1.25em;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 1200px) {
    #footer {
        max-width: 1140px;
    }
}

#footer a {
    color: hsl(0 0% 53%);
}

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

#footer address img {
    display: inline-block;
}

/* @footer End
====================================== */

/* End system
   ========================================================================== */
/* </system> */

/*コピーライト*/
#copyright {
padding: 20px;
text-align: center;
background: #000000;/*背景色*/
font-size: 14px;
color:#cd853f;/*文字の色*/
}


/*--------------------------------------
  ヨメレバ・カエレバ（PC）
--------------------------------------*/
.booklink-box, .kaerebalink-box{
    padding:25px;
    margin-bottom: 10px;
    border:double #CCC;
    overflow: hidden;
    font-size:small;
}
.booklink-image, .kaerebalink-image{
    margin:0 15px 0 0;
    float:left;
    min-width: 160px;
    text-align: center;
}
.booklink-image img, .kaerebalink-image img{
    margin:0 auto;
    text-align:center;
}
.booklink-info, .kaerebalink-info{
    margin:0;
    line-height:120%;
    overflow: hidden;
}
.booklink-name, .kaerebalink-name{
    margin-bottom:24px;
    line-height:1.5em;
}
.booklink-powered-date, .kaerebalink-powered-date{
     font-size:8px;
     margin-top:10px;
     font-family:verdana;
     line-height:120%;
}
.booklink-detail, .kaerebalink-detail{font-size: 12px;}
.booklink-powered-date, .kaerebalink-detail{margin-bottom:15px;}
.booklink-link2, .kaerebalink-link1{margin-top:10px;}
.booklink-link2 a,
.kaerebalink-link1 a{
    width:30%;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    display:inline-block;
    margin:5px 2px 0 0;
    padding:10px 1px;
    text-align:center;
    float:left;
    text-decoration:none;
    font-weight:800;
    text-shadow:1px 1px 1px #dcdcdc;
    font-size:12px;
    color: #fff !important;
}
.booklink-link2 a:hover,
.kaerebalink-link1 a:hover{opacity: 0.6;}
.booklink-link2 a:active
.kaerebalink-link1 a:active{
    position:relative;
    top:1px;
}
/*ボタンを変えるときはここから*/
.shoplinkamazon a{color:#FF9901 !important;border: 1px solid #FF9901 !important;}
.shoplinkrakuten a{color:#c20004 !important;border: 1px solid #c20004 !important;}
.shoplinkkindle a{color:#007dcd !important;border: 1px solid #007dcd !important;}
.shoplinkkakakucom a{color:#314995 !important;border: 1px solid #314995;}
.shoplinkyahoo a{color:#7b0099 !important;border: 1px solid #7b0099 !important;}
/*ここまでを変更*/
.shoplinkyahoo img{display:none;}
.shoplinkyahoo a{font-size:10px;}
.booklink-footer{display: none;}


/*--------------------------------------
  ヨメレバ・カエレバ（レスポンシブ）
--------------------------------------*/
.booklink-box, .kaerebalink-box{
    padding:25px;
    margin-bottom: 10px;
    border:double #CCC;
    overflow: hidden;
    font-size:small;
}
.booklink-image, .kaerebalink-image{
    margin:0 15px 0 0;
    float:left;
    min-width: 160px;
    text-align: center;
}
.booklink-image img, .kaerebalink-image img{
    margin:0 auto;
    text-align:center;
}
.booklink-info, .kaerebalink-info{
    margin:0;
    line-height:120%;
    overflow: hidden;
}
.booklink-name, .kaerebalink-name{
    margin-bottom:24px;
    line-height:1.5em;
}
.booklink-powered-date, .kaerebalink-powered-date{
     font-size:8px;
     margin-top:10px;
     font-family:verdana;
     line-height:120%;
}
.booklink-detail, .kaerebalink-detail{font-size: 12px;}
.booklink-powered-date, .kaerebalink-detail{margin-bottom:15px;}
.booklink-link2, .kaerebalink-link1{margin-top:10px;}
.booklink-link2 a,
.kaerebalink-link1 a{
    width:30%;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    display:inline-block;
    margin:5px 2px 0 0;
    padding:10px 1px;
    text-align:center;
    float:left;
    text-decoration:none;
    font-weight:800;
    text-shadow:1px 1px 1px #dcdcdc;
    font-size:12px;
    color: #fff !important;
}
.booklink-link2 a:hover,
.kaerebalink-link1 a:hover{opacity: 0.6;}
.booklink-link2 a:active
.kaerebalink-link1 a:active{
    position:relative;
    top:1px;
}
/*ボタンを変えるときはここから*/
.shoplinkamazon a{color:#FF9901 !important;border: 1px solid #FF9901 !important;}
.shoplinkrakuten a{color:#c20004 !important;border: 1px solid #c20004 !important;}
.shoplinkkindle a{color:#007dcd !important;border: 1px solid #007dcd !important;}
.shoplinkkakakucom a{color:#314995 !important;border: 1px solid #314995;}
.shoplinkyahoo a{color:#7b0099 !important;border: 1px solid #7b0099 !important;}
/*ここまでを変更*/
.shoplinkyahoo img{display:none;}
.shoplinkyahoo a{font-size:10px;}
.booklink-footer{display: none;}

@media screen and (max-width: 680px) {
.booklink-box, .kaerebalink-box{padding:15px;}
.booklink-image, .kaerebalink-image{
    width: 100px !important;
    min-width: initial;
}
.booklink-name > a, .kaerebalink-name > a{
    font-size: 15px;
    font-weight: bold;
}
.booklink-name, .kaerebalink-name{margin-bottom:12px;}
.booklink-powered-date, .kaerebalink-powered-date{margin-top:5px;}
.booklink-link2 a,
.kaerebalink-link1 a{
    width:calc(100% - 4px);
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    margin: 2px 0px;
    padding:10px 0px;
}
}



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

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

.box ul li:before {/*疑似要素*/
  font-family: "FontAwesome";
  content: "\f138";/*アイコンの種類*/
  position: absolute;
  left : 2em;/*左端からのアイコンまでの距離*/
  color: #ffbb00;/*アイコン色*/
}


#blog-title-inner {
  height: 200px;
  background-size: cover;
  background-image: url("https://cdn-ak.f.st-hatena.com/images/fotolife/O/OSRcamper/20200202/20200202004936.pngURL");
  background-position: 50% 50%;
}



.entry-content h3,
.entry-content h3::before,
.entry-content h3::after {
  background: none;
  border: none;
  border-radius: 0;
}

.entry-content h3 {
  border-left: 6px solid #29b6b7;
  padding-left: 8px;
  position: relative;
  color: #333;
  line-height: 1.5;
}

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

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