/* 吹き出しのCSS　*/
.entry-content .l-fuki,
.entry-content .r-fuki {
  position: relative;
  width: calc(100% - 82px);
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding: 20px;
  border-radius: 6px;
  border: 2px solid #ddd;
  box-shadow: 0 3px 8px -2px rgba(0,0,0,.16);
  background-color: #fff;
  z-index: 1;
  box-sizing: border-box;
}
.entry-content .l-fuki {
  margin: 20px auto 36px 0;
}
.entry-content .r-fuki {
  margin: 20px 0 36px auto;
}
.entry-content .l-fuki::before,
.entry-content .r-fuki::before {
  position: absolute;
  content: "";
  top: 16px;
  width: 10px;
  height: 10px;
  border-right: 2px solid #ddd;
  border-bottom: 2px solid #ddd;
  background-color: #fff;
  z-index: 2;
}
.entry-content .l-fuki::before {
  right: -7px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
.entry-content .r-fuki::before {
  left: -7px;
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}
.entry-content .l-fuki::after,
.entry-content .r-fuki::after {
  position: absolute;
  content: "";
  width: 60px;
  height: 60px;
  top: -6px;
  border-radius: 50%;
  border: 3px solid #fff;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  box-shadow: 1px 1px 5px #aaa;
  box-sizing: border-box;
}
.entry-content .l-fuki::after {
  right: -82px;
}
.entry-content .r-fuki::after {
  left: -82px;
}
@media screen and (min-width: 478px) {
  .entry-content .l-fuki::after,
  .entry-content .r-fuki::after {
    width: 80px;
    height: 80px;
  }
  .entry-content .l-fuki,
  .entry-content .r-fuki {
    width: calc(100% - 106px);
  }
  .entry-content .l-fuki::after {
    right: -106px;
  }
  .entry-content .r-fuki::after {
    left: -106px;
  }
}
.usa-egao::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/u/usatantoushi/20231227/20231227065057.png);}
.usa-kirari::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/u/usatantoushi/20231227/20231227065308.png);}
.usa-kanashi::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/u/usatantoushi/20231227/20231227065319.png);}
.usa-gimon::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/u/usatantoushi/20250806/20250806183812.png);}
.inutan::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/u/usatantoushi/20231227/20231227065327.jpg);}



/* アンダーline */

/* アンダーline */

article em{
font-style: normal;font-weight:bold;
margin:0 0.1em;
padding:0.1em 0.2em;
background:#ff69b4 !important;
background:linear-gradient(to bottom, transparent 60%, #ff69b4 60%) !important;}article i{ font-style:oblique !important;}


/* --- テーマ本体（そのまま残す） --- */
/* <system section="theme" selected="26006613673444106"> */
/* <system section="theme" selected="26006613652605202"> */
@charset "UTF-8";
/*
  Theme: neumorphism
  Author: fujiguchi
  Responsive: yes
  Description: ニューモーフィズムデザインのはてなブログテーマです。
*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
:root {
  --theme-color: #e9edf0;
  --shadow-darkcolor: #c6c9cc;
  --shadow-brightcolor: #fff;
}
/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */
html {
    line-height: 1.15;
    /* 1 */
    -ms-text-size-adjust: 100%;
    /* 2 */
    -webkit-text-size-adjust: 100%;
    /* 2 */
    scroll-behavior: smooth;
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers (opinionated).
 */
body {
    margin: 0;
}

/**
 * Add the correct display in IE 9-.
 */
article,
aside,
footer,
header,
nav,
section {
    display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */
figcaption,
figure,
main {
    /* 1 */
    display: block;
}

/**
 * Add the correct margin in IE 8.
 */
figure {
    margin: 0;
}

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

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

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

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

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

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

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

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

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

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

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

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@media (min-width: 992px) {
    #content-inner {
        flex-direction: row;
    }
}

.entry-header {
    display: flex;
    flex-flow: column;
}

.entry-header .entry-title {
    order: 0;
}

.entry-header .date {
    order: 1;
}

.entry-header .categories {
    order: 2;
}

.entry-header .customized-header {
    order: 3;
}

.entry-header .social-buttons {
    order: 4;
}

.archive-entries {
    display: flex;
    flex-wrap: wrap;
}

.page-archive .archive-entry {
    display: flex;
    flex-flow: column;
}

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

.page-archive .archive-entry .archive-entry-header {
    order: 1;
}

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

.page-archive .archive-entry .categories {
    order: 3;
}

.archive-entry-header {
    display: flex;
    flex-flow: column;
}

.archive-entry-header .entry-title {
    order: 0;
}

.archive-entry-header .date {
    order: 1;
}

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

html,
body {
    font-family: 'Roboto', sans-serif, -apple-system, BlinkMacSystemFont, Segoe UI, 'Helvetica Neue', 'Helvetica', 'Arial', 'Hiragino Kaku Gothic Pro', 'Meiryo', sans-serif;
    color: #333;
    background: var(--theme-color);
    line-height: 1.7;
    letter-spacing: 0.05em;
}

a {
    color: #333;
    text-decoration: none;
    transition: .1s ease-out;
}

a:hover {
    color: #4ab7ea;
    text-decoration: none;
}

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

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: #333;
    text-decoration: none;
}

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

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

#content-inner {
    max-width: 1200px;
    margin: auto;
}

#blog-title {
    margin: auto;
    max-width: 1200px;
    padding: 3em 20px 2em;
    text-align: center;
}

@media (min-width: 992px) {
    #blog-title {
        margin: 0 auto;
        padding: 3em 40px;
        box-sizing: border-box;
        text-align: left;
    }
}

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

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

#title a {
    color: #555;
}

#blog-description {
    font-weight: normal;
    font-size: .8rem;
    margin: 1em 0 0;
}

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

@media (min-width: 768px) {
    .header-image-enable #blog-title {
        padding: 0 40px;
    }
}

.header-image-enable #blog-title-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 30px 0 0;
}

@media (min-width: 992px) {
    .header-image-enable #blog-title-inner {
        background-size: cover;
    }
}

.header-image-enable #blog-title-content {
    margin: auto;
    text-align: center;
}

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

@media (min-width:768px) {
#top-editarea {
    margin-bottom: 2.5em;
}
}

.breadcrumb {
    padding: 0 20px;
    font-size: .78rem;
}

@media (min-width: 768px) {
    .breadcrumb {
        padding: 0 40px;
    }
}

@media (min-width: 992px) {
    #wrapper {
        width: calc( 100% - 350px);
    }
}

#main {
    width: 100%;
}

#main-inner {
    max-width: 1140px;
    margin: auto;
    padding: 0 20px;
    box-sizing: border-box;
}

@media (min-width: 992px) {
    #main-inner {
        padding: 0 40px;
    }
}

.entry {
    position: relative;
    margin-bottom: 20px;
    padding: 20px;
    border-radius: 20px;
    box-shadow: inset 1px 1px 3px #e0e0e0, inset -1px -1px 3px var(--shadow-brightcolor), 5px 5px 10px var(--shadow-darkcolor), -5px -5px 10px var(--shadow-brightcolor);
}

@media (min-width: 768px) {
    .entry {
        padding: 30px 40px;
    }
}

.entry-header {
    position: relative;
    margin: 10px 0 30px;
}

.entry-header .social-buttons {
    margin: 1em 0 0;
    padding: 1em 0;
    border-top: 1px solid #ddd;
}

.date {
    font-size: .9rem;
}

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

.entry-title {
    margin: 0 0 .3em;
    font-size: 1.5rem;
}

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

.categories a {
    font-size: .86rem;
    display: inline-block;
    margin: 8px 4px 0 0;
    padding: .2em 1em;
    border-radius: 20px;
    text-decoration: none;
    box-shadow: 0 0 0 1px var(--shadow-darkcolor), 3px 3px 6px var(--shadow-darkcolor), -3px -3px 6px var(--shadow-brightcolor);
}

.categories a:hover {
    box-shadow: inset 0 0 0 1px var(--shadow-darkcolor), inset 2px 2px 4px var(--shadow-darkcolor), inset -2px -2px 4px var(--shadow-brightcolor);
}


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

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

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

.comment-box {
    margin: 2em 0 1em;
    padding: 2em 0 1em;
    border-top: 2px solid #555;
}

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

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

.entry-comment {
    margin: 0 0 1.2em 0;
    padding: 1.2em;
    border-radius: 10px;
    position: relative;
    box-shadow: inset 3px 3px 6px var(--shadow-darkcolor), inset -3px -3px 6px var(--shadow-brightcolor);
}

.read-more-comments a {
    margin: 1em 0;
    padding: .5em 1em;
    border-radius: 20px;
    box-shadow: 0 0 0 1px var(--shadow-darkcolor), 3px 3px 6px var(--shadow-darkcolor), -3px -3px 6px var(--shadow-brightcolor);
    display: inline-block;
}

.read-more-comments a:hover {
    box-shadow: inset 0 0 0 1px var(--shadow-darkcolor), inset 2px 2px 4px var(--shadow-darkcolor), inset -2px -2px 4px var(--shadow-brightcolor);
}

.entry-comment .hatena-id-icon {
    position: absolute;
    top: -5px;
    left: -5px;
    width: 50px !important;
    height: 50px !important;
    padding: 7px;
    background: var(--theme-color);
    border-radius: 50%;
    box-shadow: 3px 3px 6px 0 var(--shadow-darkcolor), -3px -3px 6px var(--shadow-brightcolor);
}

.entry-tag .entry-tag-link {
    background: none;
    border: none;
    border-radius: 20px;
    box-shadow: 3px 3px 6px var(--shadow-darkcolor), -3px -3px 6px var(--shadow-brightcolor);
}

.entry-tag .entry-tag-link:hover {
    background: var(--theme-color);
    box-shadow: inset 2px 2px 4px var(--shadow-darkcolor), inset -2px -2px 4px var(--shadow-brightcolor);
}

.comment-user-name {
    margin: 0 0 .4em 0;
    padding: 5px 0 0 55px;
    font-weight: bold;
}

.comment-content {
    margin: 2em 0 1em;
    word-wrap: break-word;
    color: #555;
    font-size: .85rem;
}

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

.comment-metadata {
    color: #999;
    margin: 0;
    font-size: .8rem;
}

.comment-metadata a {
    color: #999;
}

.leave-comment-title {
    padding: .6em 1em;
    font-size: .85rem;
    border-radius: 20px;
    box-shadow: 0 0 0 1px var(--shadow-darkcolor), 7px 7px 14px var(--shadow-darkcolor), -7px -7px 14px var(--shadow-brightcolor);
}

.leave-comment-title:hover {
    box-shadow: inset 0 0 0 1px var(--shadow-darkcolor), inset 2px 2px 4px var(--shadow-darkcolor), inset -2px -2px 4px var(--shadow-brightcolor);
}

@media (min-width: 992px) {
    #box2 {
        width: 377px;
    }
}

#box2-inner {
    padding: 0 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    #box2-inner {
        padding: 0;
    }
}

@media (min-width: 992px) {
    #box2-inner {
        padding-left: 0;
    }
}

.hatena-module {
    box-sizing: border-box;
    margin-bottom: 2em;
    font-size: .85rem;
}

.entry .hatena-module {
    padding: 0;
}

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

.hatena-module-title {
    margin: 0 0 1em;
    padding: 0;
    font-size: 1.2rem;
    font-weight: bold;
}

.hatena-module-title a {
    color: #555;
    text-decoration: none;
}

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

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

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

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

.urllist-category-link {
    display: inline-block;
    margin: .2em .2em .2em 0;
    padding: .2em 1em;
    color: #555;
    font-size: .7em;
    font-weight: bold;
    letter-spacing: 0;
    border-radius: 20px;
    box-shadow: 0 0 0 1px var(--shadow-darkcolor);
}

.urllist-date-link a {
    display: block;
    margin: 0 0 .4em;
    color: #555;
}

.urllist-entry-body {
    margin-top: .3em;
    color: #555;
}

.urllist-with-thumbnails li .urllist-image {
    margin: 0 1em 0 0;
    border-radius: 6px;
    box-shadow: 0 0 0 1px var(--shadow-darkcolor);
}

.urllist-categories {
    margin: .4em 0 0;
}

.hatena-module-profile .profile-icon {
    display: block;
    margin: 0 auto 1em;
    padding: .5em;
    border-radius: 50%;
    box-shadow: 4px 4px 8px var(--shadow-darkcolor), -4px -4px 8px var(--shadow-brightcolor), inset 3px 3px 6px var(--shadow-darkcolor), inset -3px -3px 6px var(--shadow-brightcolor), 4px 4px 8px var(--shadow-darkcolor), -4px -4px 8px var(--shadow-brightcolor);
    transition: .15s;
}

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

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

.search-form, .search-result-form {
    display: flex;
    align-items: center;
    border: 2px solid #ddd;
    border-radius: 3px;
    width: 100%;
    padding: 4px 0 2px 6px;
    box-sizing: border-box;
}

.search-module-input, .search-result-input {
    flex: 1 0;
    padding: 5px;
    color: #333;
    background: none;
    border: none;
    outline: none;
    height: 20px;
}

.search-module-button, .search-result-button {
    width: 24px;
    height: 24px;
    margin-right: 5px;
    background: transparent url("https://cdn.blog.st-hatena.com/images/theme/search@2x.png?version=4d776f2b7a248fe0227f52f5e9d786") no-repeat center;
    background-size: 20px 20px;
    border: none;
    outline: none;
    color: transparent;
    overflow: hidden;
    opacity: .5;
    cursor: pointer;
}

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

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

.archive-module-month-title::before {
    content: "\f006";
    font-family: blogicon;
    font-size: .8em;
    color: #555;
    margin-right: .2em;
    vertical-align: middle;
}

.archive-module-month-title:hover::before {
    color: #4ab7ea;
}

.archive-module-calendar .archive-module-calendar-selector {
    border: none;
    border-radius: 15px;
    background: var(--theme-color);
    box-shadow: 1px 1px 2px var(--shadow-darkcolor), -1px -1px 2px var(--shadow-brightcolor);
    padding: 0 1em;
    cursor: pointer;
}

.archive-module-calendar .archive-module-calendar-selector:hover {
    box-shadow: inset 1px 1px 2px var(--shadow-darkcolor), inset -1px -1px 2px var(--shadow-brightcolor);
}

.archive-module-calendar a {
    display: block;
    margin: .2em;
    padding: .2em 0 0;
    color: #79b4c5;
    font-weight: bold;
    border-radius: 1em;
    box-shadow: 1px 1px 2px var(--shadow-darkcolor), -1px -1px 2px var(--shadow-brightcolor);
}

.archive-module-calendar a:hover {
    box-shadow: inset 1px 1px 2px var(--shadow-darkcolor), inset -1px -1px 2px var(--shadow-brightcolor);
}

.hatena-module-category li {
    padding: 0!important;/***階層化対策***/
    display: inline-block;
}

.hatena-module-category a {
    display: inline-block;
    margin: .4em;
    padding: .3em .8em!important;/***階層化対策***/
    font-size: .8rem;
    border-radius: 20px;
    box-shadow: 0 0 0 1px var(--shadow-darkcolor), 3px 3px 5px var(--shadow-darkcolor), -3px -3px 5px var(--shadow-brightcolor);
}

.hatena-module-category a:hover {
    box-shadow: inset 0 0 0 1px var(--shadow-darkcolor), inset 2px 2px 4px var(--shadow-darkcolor), inset -2px -2px 4px var(--shadow-brightcolor);
}

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

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

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

.archive-entry {
    position: relative;
    width: 100%;
    margin-bottom: 20px;
    padding: 20px;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .page-archive #main-inner {
        padding: 0 40px;
    }
}


@media (min-width: 768px) {
    .page-archive .entry-thumb-link {
        margin: -20px 0 20px -20px;
    }
}

.page-archive .entry-thumb {
    width: 100%;
    height: 0;
    padding-top: 56.25%;
    background-position: center;
    transition: .4s;
}

.page-archive .archive-entry .categories {
    position: absolute;
    top: 8px;
    left: 25px;
}

.page-archive .categories a {
    margin: 0 5px 0.3em 0;
    display: inline-block;
    padding: .2em 1em;
    background: var(--theme-color);
    color: #555;
    font-size: .7em;
    font-weight: bold;
    letter-spacing: 0;
    border-radius: 20px;
    box-shadow: 0 0 0 1px var(--shadow-darkcolor), 3px 3px 5px var(--shadow-darkcolor), -3px -3px 5px var(--shadow-brightcolor);
}

.page-archive .categories a:hover {
    color: #4ab7ea;
    box-shadow: inset 0 0 0 1px var(--shadow-darkcolor), inset 2px 2px 4px var(--shadow-darkcolor), inset -2px -2px 4px var(--shadow-brightcolor);
}


.archive-entry-header .entry-title {
    font-size: 1rem;
}

.archive-entry-header .date {
    font-size: .8rem;
}

.archive-entry-body .entry-description {
    font-size: .7em;
    display: none;
}

.archive-entry-body .social-buttons {
    display: block;
    margin: .5em 0;
}

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

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

.page-entry .breadcrumb {
    margin-bottom: 1em;
}

#footer-inner {
    margin-top: 2em;
    padding: 10px 0;
    text-align: center;
    font-size: .8rem;
    color: #555;
}

#footer-inner a {
    color: #555;
}

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

@media (min-width: 768px) {
    #footer-inner {
        max-width: 1200px;
        margin: auto;
        padding: 20px 40px;
    }
}

.entry-content img,
.entry-content video {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

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

.entry-content h2 {
    padding-left: .5em;
    border-left: solid 5px;
}

.entry-content h3 {
    font-size: 1.5rem;
    border-bottom: solid 2px;
}

.entry-content h4 {
    margin: 2em 0 1em 0;
    font-size: 1.4rem;
    padding: .2em .5em;
    border-radius: 4px;
    box-shadow: inset 3px 3px 6px var(--shadow-darkcolor), inset -3px -3px 6px var(--shadow-brightcolor);
}

.entry-content h5 {
    margin: 1.6em 0 1em 0;
    font-size: 1.2rem;
}

.entry-content h6 {
    margin: 1em 0 1em 0;
    font-size: .9rem;
}

.entry-content a {
    color: #1487bd;
    text-decoration: underline;
}

.entry-content a:hover {
    color: #4ab7ea;
    text-decoration: none;
}

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

.entry-content .entry-see-more {
    display: inline-block;
    padding: .5em 1em;
    color: #333;
    text-decoration: none;
    border-radius: 4px;
    box-shadow: 0 0 0 1px var(--shadow-darkcolor), 7px 7px 14px var(--shadow-darkcolor), -7px -7px 14px var(--shadow-brightcolor);
    transition: .1s ease-out;
}

.entry-content .entry-see-more:hover {
    box-shadow: inset 0 0 0 1px var(--shadow-darkcolor), inset 2px 2px 4px var(--shadow-darkcolor), inset -2px -2px 4px var(--shadow-brightcolor);
}

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

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

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

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

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

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

.entry-content blockquote {
    margin: 2em 0 1.6em;
    padding: 1.5em;
    border-radius: 15px;
    box-shadow: inset 3px 3px 6px var(--shadow-darkcolor), inset -3px -3px 6px var(--shadow-brightcolor);
}

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

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

.entry-content blockquote::before {
    content: "\f704";
    font-family: 'blogicon';
    position: absolute;
    top: -44px;
    left: -12px;
    font-size: 4em;
    color: var(--theme-color);
    text-shadow: 2px 2px 4px #a8a8a8, -2px -2px 4px var(--shadow-brightcolor);
}

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

.entry-content pre {
    background: #000;
    white-space: pre;
    text-overflow: ellipsis;
    line-height: 1.3;
    font-size: .8rem;
    position: relative;
    padding: 1.5em 1em .5em;
    font-size: 1em;
    text-overflow: unset;
    border-radius: 4px;
    background: #e9edf0;
    box-shadow: inset 3px 3px 6px var(--shadow-darkcolor), inset -3px -3px 6px var(--shadow-brightcolor);
}

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

.entry-content pre.lang-css::before {
    content: " CSS ";
    position: absolute;
    top: 0;
    left: 0;
    background: #fff75e;
    border-radius: 4px 0 0 0;
    box-shadow: inset 3px 3px 6px var(--shadow-darkcolor);
}

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

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

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

.table-of-contents {
    margin: 0;
    padding: 1.2em;
    font-size: .9em;
    border-radius: 6px;
    box-shadow: inset 4px 4px 8px var(--shadow-darkcolor), inset -4px -4px 8px var(--shadow-brightcolor);
}

.table-of-contents::before {
    content: "目次";
    display: block;
    margin: 0 0 .8rem;
    padding: 0 0 .4rem;
    border-bottom: 2px solid #777;
    font-size: 1.2rem;
}

.table-of-contents a {
    color: #333;
}

.table-of-contents li {
    margin: 0 0 0 1.4em;
    list-style-type: decimal;
}

.table-of-contents li ul {
    margin: 0 0 1em .5em;
}

.table-of-contents li ul li {
    margin: 4px;
}

.pager {
    margin: 2em 0;
}

.pager-arrow {
    display: none;
}

.pager .pager-prev, .pager .pager-next {
    display: block;
    width: 50%;
}

.pager .pager-next {
    text-align: right;
}

.pager .pager-prev a, .pager .pager-next a {
    display: inline-block;
    width: 96%;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 10px;
}

.pager .pager-prev a::before, .pager .pager-next a::after {
    display: inline-block;
    font-family: 'blogicon';
    color: #555;
}

.pager .pager-prev a::before {
    content: "\f005";
    left: -10px;
}

.pager .pager-next a::after {
    content: "\f006";
    margin-left: .5em;
    vertical-align: middle;
}

.pager .pager-prev a:hover::before, .pager .pager-next a:hover::after {
    color: #4ab7ea;
}

div.footnote {
    padding: 1em 0;
    border-top: #ddd 1px solid;
}

#footer .guest-footer {
    margin: 20px;
    padding: 25px 30px 10px;
    max-width: 700px;
    background: #fff;
    border-radius: 6px;
}

@media (min-width: 768px) {
    #footer .guest-footer {
        margin: 30px auto;
    }
}

.page-index .pager, .page-archive .pager {
    margin: 2em 0;
}

.entry-header-menu a {
    position: absolute;
    top: 0;
    right: 0;
    padding: 6px 10px;
    border-radius: 6px;
    transition: .1s ease-out;
    box-shadow: 0 0 0 1px var(--shadow-darkcolor), 3px 3px 6px var(--shadow-darkcolor), -3px -3px 6px var(--shadow-brightcolor);
}

.entry-header-menu a:hover {
    box-shadow: inset 0 0 0 1px var(--shadow-darkcolor),inset 3px 3px 6px var(--shadow-darkcolor),inset -3px -3px 6px var(--shadow-brightcolor);
}

.entry-header-html a, .entry-footer-html a {
    color: #1487bd;
    text-decoration: underline;
}

.entry-header-html a:hover, .entry-footer-html a:hover {
    text-decoration: none;
    color: #0f668f;
}

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

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

.page-archive .date-day {
    order: 1;
}

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

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

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

.page-archive .date-month::before {
    font-size: 14px;
}

.page-archive .archive-entry .archive-date {
    top: 15px;
    right: 25px;
}

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

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

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

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

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

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

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

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

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

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

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

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

@media (min-width: 768px) {
.archive-entry {
    width: 48%;
}
.archive-entry:nth-child(even) {
    margin-left: 4%;
}
}

.archive-entry-tag .archive-entry-tag-link {
    background: none;
    margin: 0;
}

.archive-entry-tag .archive-entry-tag-link:hover {
    background: none;
    box-shadow: inset 2px 2px 4px var(--shadow-darkcolor), inset -2px -2px 4px var(--shadow-brightcolor);
}

.page-archive .entry-thumb-link {
    margin: 0 0 20px;
    padding: 0;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 3px 3px 5px var(--shadow-darkcolor), -3px -3px 5px var(--shadow-brightcolor);
}

.page-archive .entry-thumb:hover {
    transform: scale(1.05);
}

.archive-entry {
    padding: 45px 25px 0;
    margin-bottom: 25px;
    border-radius: 25px;
    box-shadow: 0 0 2px 2px var(--shadow-brightcolor), inset 2px 2px 4px var(--shadow-darkcolor), 0 0 9px var(--shadow-darkcolor), 4px 4px 6px var(--shadow-darkcolor), -4px -4px 6px var(--shadow-brightcolor), 5px 16px 14px var(--shadow-darkcolor), -8px -11px 13px var(--shadow-brightcolor);
}

.entry-title {
    padding: 0 0 1em;
    margin: 0;
}

span.social-buttons {
    margin-top: .8em;
}

archive-category-link {
    background: #f7f8f8;
    border-radius: 10px;
    box-shadow: 5px 7px 5px #e0e0e0, -7px -5px 7px var(--shadow-brightcolor);
    display: block;
}

@media (min-width: 768px) {
#box2-inner {
    display: flex;
    flex-wrap: wrap;
    margin: 0 40px;
    border-radius: 20px;
    box-shadow: inset 1px 1px 3px var(--shadow-darkcolor), inset -1px -1px 3px var(--shadow-brightcolor), 5px 5px 10px var(--shadow-darkcolor), -5px -5px 10px var(--shadow-brightcolor);
}
}

@media (min-width: 992px) {
    #box2-inner {
        margin: 0 0 40px;
        padding: 20px;
    }
    .hatena-module {
        width: 100%;
        padding: 0;
    }

}

.hatena-module-title {
    color: #555;
    border-bottom: solid 2px;
}

.star-container {
    padding-right: .5em;
}

.page-archive .archive-entry .archive-date a:hover {
    text-decoration: underline;
    color: #555;
}

.entry-title-link {
    color: #555;
    display: block;
}

.entry-title-link:hover {
    text-decoration: underline;
    color: #555;
}
.archive-entry-tag .archive-entry-tag-link {
    margin-bottom: .5em;
    padding: .2em 1em;
    color: #555;
    font-size: .75em;
    border-radius: 20px;
    box-shadow: 3px 3px 5px var(--shadow-darkcolor), -3px -3px 5px var(--shadow-brightcolor);
}

.page-archive .categories a:nth-child(n+2) {
    display: none;
}

/***グローバルナビゲーション***/
.g-nav {
    list-style: none;
    text-align: center;
    padding: 0;
    margin: 0;
}

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

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

.g-nav li a:hover {
  color: #4ab7ea;
  box-shadow: inset  5px 5px 10px var(--shadow-darkcolor),inset  -5px -5px 10px var(--shadow-brightcolor);
}

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

.nav-unshown {
  display:none;
}

#nav-open {
    display: flex;
    flex-direction: column;
    text-align: center;
    line-height: 1;
    background: var(--theme-color);
    padding: .5em;
    border-radius: 6px;
    color: #2a2922;
    font-weight: bold;
    box-shadow: 0 0 2px 2px var(--shadow-brightcolor), inset 2px 2px 4px var(--shadow-darkcolor), 0 0 9px var(--shadow-darkcolor), 4px 4px 6px var(--shadow-darkcolor), -4px -4px 6px var(--shadow-brightcolor), 3px 3px 6px var(--shadow-darkcolor), -3px -3px 6px var(--shadow-brightcolor);
}

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

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

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

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

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

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

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

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

@media (min-width: 768px) {
  #nav-input, .nav-close {
      display: none;
  }
  #nav-content {
      position: relative;
      box-shadow: 0 0 2px 2px var(--shadow-brightcolor), inset 0 2px 4px var(--shadow-darkcolor), 0 0 9px var(--shadow-darkcolor), 0 4px 6px var(--shadow-darkcolor), 0 -4px 6px var(--shadow-brightcolor), 0 10px 12px var(--shadow-darkcolor), 0 -8px 11px var(--shadow-brightcolor);
  }
  #nav-open {
    display: none;
  }
  .g-nav {
      display: flex;
      justify-content: space-around;
      margin: 0 auto;
      padding: 0;
      max-width: 1200px;
  }
  .g-nav li a {
      color: #555;
      font-size: .85rem;
      box-shadow: inset 0 0 0 1px var(--shadow-darkcolor);
  }
}
/***シェアボタン***/

.sharebtn {
    margin: 0 0 1em 0;
}

.sharebtn a {
    display: block;
    width: 48px;
    height: 48px;
    line-height: 48px;
    color: #fff;
    text-align: center;
    border-radius: 4px;
    box-sizing: border-box;
}

.sharebtn a i {
    margin: 0;
    font-size: 25px;
    line-height: 48px;
}

.sharebtn .btn_fb {
    background: #1877f2;
}

.sharebtn .btn_tw {
    background: #1da1f2;
}

.sharebtn .btn_po {
    background: #ee4056;
}

.sharebtn .btn_hb {
    background: #00a4de;
}

.sharebtn .btn_li {
    background: #06c755;
}

.sharebtn_item a:not(:hover) {
    box-shadow: 4px 4px 8px var(--shadow-darkcolor), -4px -4px 8px var(--shadow-brightcolor);
}

.sharebtn a:hover {
    color: #fff;
}

.sharebtn .blogicon-bookmark {
    font-size: 33px;
    line-height: 1.3em;
    vertical-align: -11%;
}

.sharebtn_list {
    padding: 0;
    list-style: none;
    display: flex;
    margin: 1em 0 2em;
}

.sharebtn_item:not(:last-child) {
    margin-right: 8px;
}


/***ボーダーボタン***/

.sharebtn .bd:not(:hover) {
    background: none;
    border: solid 1px;
    box-shadow: 3px 3px 6px var(--shadow-darkcolor), -3px -3px 6px var(--shadow-brightcolor);
}

.sharebtn a.bd:hover {
    color: #fff;
    opacity: 1;
}

.sharebtn .btn_fb.bd {
    color: #1877f2;
}

.sharebtn .btn_tw.bd {
    color: #1da1f2;
}

.sharebtn .btn_po.bd {
    color: #ee4056;
}

.sharebtn .btn_hb.bd {
    color: #00a4de;
}

.sharebtn .btn_li.bd {
    color: #06c755;
}

.sharebtn .btn_li:hover {
    box-shadow: inset 5px 5px 9px #05a948, inset -5px -5px 9px #07e562;
}

.sharebtn .btn_po:hover {
    box-shadow: inset 5px 5px 9px #ca3649, inset -5px -5px 9px #ff4a63;
}

.sharebtn .btn_tw:hover {
    box-shadow: inset 5px 5px 9px #1989ce, inset -5px -5px 9px #21b9ff;
}

.sharebtn .btn_fb:hover {
    box-shadow: inset 5px 5px 9px #1465ce, inset -5px -5px 9px #1c89ff;
}

.sharebtn .btn_hb:hover {
    box-shadow: inset 5px 5px 9px #008bbd, inset -5px -5px 9px #00bdff;
}

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

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

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

.hatena-module-html .c_recommend-item {
    width: 50%;
    padding-bottom: 1em;
}

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

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

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

/***おすすめ記事カード型***/
.c_recommend-thumb.card, .c_recommend-thumb .c_recommend-img {
    border-radius: 10px 10px 0 0;
    box-shadow: none;
}
.c_recommend-item-body.card {
    padding: 0 .5em .5em;
}
.c_recommend-item.card, .entry .c_recommend-item.card {
    padding: 0;
    width: 47%;
    margin: 0 1.5% 1.5em;
    box-shadow: 5px 5px 10px var(--shadow-darkcolor), -5px -5px 10px var(--shadow-brightcolor);
}
@media (min-width:768px) {
.c_recommend-item.card {
    margin: 0 1% 2em;
    width: 23%;
}
.entry .c_recommend-item.card {
    width: 30%;
    margin: 0 1.66% 2em;
}
#top-editarea .c_recommend-item {
    margin-bottom: 0;
}
}
.hatena-module-html .c_recommend {
    justify-content: space-between;
}
.hatena-module-html .c_recommend-item.card {
    width: 46%;
    margin-bottom: 1.5em;
}

.urllist-item.recent-entries-item, .urllist-item.entries-access-ranking-item, .urllist-item.related-entries-item {
    position: relative;
    margin-bottom: 1em;
    padding: 1em;
    border-radius: 8px;
    box-shadow: 3px 3px 6px var(--shadow-darkcolor), -3px -3px 6px var(--shadow-brightcolor);
    transition: .15s;
}

.urllist-see-more-link {
    display: inline-block;
    margin: .5em 0;
    padding: .3em 1em;
    border-radius: 20px;
    box-shadow: 0 0 0 1px var(--shadow-darkcolor), 4px 4px 8px var(--shadow-darkcolor), -4px -4px 8px var(--shadow-brightcolor);
}

.search-form {
    padding: 0 1em;
    border: none;
    border-radius: 20px;
    box-shadow: inset 3px 3px 6px var(--shadow-darkcolor), inset -3px -3px 6px var(--shadow-brightcolor);
}

.search-module-input {
    padding: .5em;
}

.hatena-module-profile .hatena-module-body {
    padding: 2em;
    border-radius: 6px;
    box-shadow: inset 4px 4px 8px var(--shadow-darkcolor), inset -4px -4px 8px var(--shadow-brightcolor);
}

.urllist-item.recent-entries-item:hover, .urllist-item.entries-access-ranking-item:hover, .urllist-item.related-entries-item:hover {
    box-shadow: inset -3px -3px 6px var(--shadow-brightcolor), inset 3px 3px 6px var(--shadow-darkcolor);
}

.urllist-item.recent-entries-item:hover .urllist-image, .urllist-item.entries-access-ranking-item:hover .urllist-image, .urllist-item.related-entries-item:hover .urllist-image {
    box-shadow: 0 0 0 1px var(--shadow-darkcolor), 3px 3px 6px var(--shadow-darkcolor), -3px -3px 6px var(--shadow-brightcolor);
}

.urllist-item.recent-entries-item .urllist-image:hover, .urllist-item.entries-access-ranking-item .urllist-image:hover, .urllist-item.related-entries-item .urllist-image:hover {
    box-shadow: none;
}

.urllist-item.recent-entries-item:hover .urllist-category-link, .urllist-item.entries-access-ranking-item:hover .urllist-category-link, .urllist-item.related-entries-item:hover .urllist-category-link {
    box-shadow: 0 0 0 1px var(--shadow-darkcolor), 3px 3px 6px var(--shadow-darkcolor), -3px -3px 6px var(--shadow-brightcolor);
}

.urllist-see-more-link:hover {
    box-shadow: inset 0 0 0 1px var(--shadow-darkcolor), inset 2px 2px 4px var(--shadow-darkcolor), inset -2px -2px 4px var(--shadow-brightcolor);
}

.hatena-module-profile .profile-icon:hover {
    box-shadow: 2px 2px 4px var(--shadow-darkcolor), -2px -2px 4px var(--shadow-brightcolor), inset 3px 3px 6px var(--shadow-darkcolor), inset -3px -3px 6px var(--shadow-brightcolor), 2px 2px 4px var(--shadow-darkcolor), -2px -2px 4px var(--shadow-brightcolor);
}

.hatena-urllist .urllist-item .urllist-category-link:hover {
    box-shadow: none;
}

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

/* ========== 共通: Neumorphism 変数 ========== */
:root{
  --neu-bg:#f2f2f7;    /* 背景（少し暗く→ #ececf1 で影くっきり） */
  --neu-dark:#d1d1d6;  /* 影(濃) */
  --neu-light:#ffffff; /* 影(明) */
  --neu-radius:14px;   /* 角丸 */
  --text-main:#333;
}
body{ background:var(--neu-bg); }

/* ========== グローバルナビ（ドロップダウン対応） ========== */
.gnav{
  margin:12px auto 20px; max-width:1080px; padding:10px 14px;
  background:var(--neu-bg); border-radius:var(--neu-radius);
  box-shadow:8px 8px 16px var(--neu-dark), -8px -8px 16px var(--neu-light);
}
.gnav ul{ display:flex; flex-wrap:wrap; gap:14px; list-style:none; margin:0; padding:0; }
.gnav > ul > li{ position:relative; }

.gnav a, .gnav summary{
  display:inline-block; padding:10px 14px; border-radius:12px; cursor:pointer;
  background:var(--neu-bg); color:inherit; text-decoration:none; outline:0; user-select:none;
  box-shadow:4px 4px 8px var(--neu-dark), -4px -4px 8px var(--neu-light);
  transition:transform .08s ease;
}
.gnav a:hover, .gnav summary:hover{ transform:translateY(-1px); }

/* details/summary の矢印削除 */
.gnav summary{ list-style:none; }
.gnav summary::-webkit-details-marker{ display:none; }

/* ▼ドロップダウン（PC=hover / SP=タップでopen） */
.has-sub details{ position:relative; }
.has-sub .submenu{
  position:absolute; top:48px; left:0; min-width:200px; z-index:1000;
  display:none; margin:0; padding:10px; list-style:none;
  background:var(--neu-bg); border-radius:var(--neu-radius);
  box-shadow:10px 10px 20px var(--neu-dark), -10px -10px 20px var(--neu-light);
}
.has-sub .submenu li a{
  display:block; padding:10px 12px; margin:4px 0; border-radius:10px;
  box-shadow:4px 4px 8px var(--neu-dark) inset, -4px -4px 8px var(--neu-light) inset;
}
.has-sub details[open] .submenu{ display:block; }  /* SP */
@media (hover:hover){ .has-sub:hover .submenu{ display:block; } }  /* PC */

@media (max-width:720px){
  .gnav ul{ gap:10px; }
  .gnav a, .gnav summary{ padding:8px 10px; }
  .has-sub .submenu{ top:44px; min-width:180px; }
}

/* ========== 記事一覧のカード化（トップ/アーカイブ/カテゴリ） ========== */
.page-index .entry,
.page-archive .entry,
.page-category .entry{
  background:var(--neu-bg); border-radius:var(--neu-radius); padding:18px; margin:16px 0;
  box-shadow:10px 10px 20px var(--neu-dark), -10px -10px 20px var(--neu-light);
}
.page-index #main, .page-archive #main, .page-category #main{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:18px;
}
.page-index .entry, .page-archive .entry, .page-category .entry{ margin:0; }
.page-index .entry img, .page-archive .entry img, .page-category .entry img{
  max-width:100%; border-radius:10px;
}
.page-index .entry-title a, .page-archive .entry-title a, .page-category .entry-title a{
  text-decoration:none;
}

/* ========== 記事末: プロフィール（箱） ========== */
.penguin-profile{
  max-width:900px; margin:24px auto 0; padding:18px 20px;
  display:grid; grid-template-columns:88px 1fr; gap:16px; align-items:center;
  background:var(--neu-bg); color:var(--text-main); border-radius:var(--neu-radius);
  box-shadow:12px 12px 24px var(--neu-dark), -12px -12px 24px var(--neu-light);
}
.penguin-profile img{
  width:88px; height:88px; object-fit:cover; border-radius:50%;
  box-shadow: inset 6px 6px 10px var(--neu-dark), inset -6px -6px 10px var(--neu-light);
}
.penguin-profile .pp-name{ margin:0 0 4px; font-weight:700; font-size:1.05rem; }
.penguin-profile .pp-desc{ margin:0; line-height:1.7; opacity:.9; }
.penguin-profile:hover{ transform:translateY(-1px); transition:transform .08s ease; }

@media (max-width:720px){
  .penguin-profile{ grid-template-columns:64px 1fr; padding:14px 16px; }
  .penguin-profile img{ width:64px; height:64px; }
}

/* ========== サイドバー: プロフィール（小） ========== */
.penta-profile{
  max-width:300px; background:var(--neu-bg); border-radius:16px; padding:15px; text-align:center;
  box-shadow:8px 8px 16px var(--neu-dark), -8px -8px 16px var(--neu-light);
  font-family: "Hiragino Sans", system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans JP", sans-serif;
}
.penta-profile .penta-img{
  width:100px; height:100px; object-fit:cover; border-radius:50%; margin-bottom:10px;
  box-shadow: inset 4px 4px 8px var(--neu-dark), inset -4px -4px 8px var(--neu-light);
}
.penta-profile .penta-name{ font-size:1.2em; font-weight:700; margin-bottom:8px; }
.penta-profile .penta-desc{ font-size:.9em; line-height:1.6; color:var(--text-main); }

/* サイドバーやプロフィールに表示されるユーザー名を非表示（任意） */
.hatena-module-profile .profile-name,
.penguin-profile .pp-name,
.penta-profile .penta-name{
  display:none;
}

/* === 記事カードの余白対策：auto-fit + 最小幅300px === */
.page-index #main,
.page-archive #main,
.page-category #main{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:18px;
}

/* 画面が少し狭い時の調整 */
@media (max-width:1024px){
  .page-index #main,
  .page-archive #main,
  .page-category #main{
    grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  }
}

/* スマホは1～2列で見やすく */
@media (max-width:720px){
  .page-index #main,
  .page-archive #main,
  .page-category #main{
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  }
}








/* ========== トップ限定「おすすめ記事」グリッド（Neumorphism） ========== */
/* デフォルト非表示 → トップ(.page-index)でだけ表示 */
.recommend{ display:none; }
.page-index .recommend{
  display:block;
  max-width:1080px; margin:0 auto 24px; padding:18px;
  background:var(--neu-bg);
  border-radius:var(--neu-radius);
  box-shadow: inset 6px 6px 12px var(--neu-dark), inset -6px -6px 12px var(--neu-light);
}
.recommend h2{
  margin:0 0 12px; font-size:1.15rem; line-height:1.4;
  font-weight:700;
}

/* 4列 → 3列 → 2列 → 1列のレスポンシブ */
.recommend-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:16px; list-style:none; margin:0; padding:0;
}
@media (max-width:1024px){ .recommend-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:720px){  .recommend-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){  .recommend-grid{ grid-template-columns:1fr; } }

/* カード本体 */
.rec-card a{
  display:block; text-decoration:none; color:inherit;
  background:var(--neu-bg); border-radius:14px; padding:12px;
  box-shadow:10px 10px 20px var(--neu-dark), -10px -10px 20px var(--neu-light);
  transition:transform .08s ease;
}
.rec-card a:hover{ transform:translateY(-2px); }

/* サムネイル（CLS対策に比率固定） */
.rec-card .thumb{ position:relative; border-radius:10px; overflow:hidden; }
.rec-card .thumb > img{
  width:100%; aspect-ratio:16/9; object-fit:cover; display:block;
}

/* 角丸の丸アイコン（任意：使わなければHTMLに入れない） */
.penta-badge{
  position:absolute; left:10px; bottom:10px; width:44px; height:44px;
  border-radius:50%; background:var(--neu-bg); padding:4px; object-fit:cover;
  box-shadow: 4px 4px 8px var(--neu-dark), -4px -4px 8px var(--neu-light);
}

/* タイトル */
.rec-card .title{
  display:block; margin-top:10px; font-weight:700; line-height:1.5;
}

/* （保険）おすすめ枠の中に自動広告が差し込まれたら非表示 or 全幅化したい場合 */
.recommend :is(ins.adsbygoogle,.google-auto-placed,[data-ad-client],[data-ad-slot]){
  display:none !important;         /* ←完全に消す。全幅で置きたいなら下の2行に変更
  /* grid-column: 1 / -1 !important;
     margin:0 !important; padding:0 !important; width:100% !important; */
}

/* ===== gnav 左右分割（ブランド左／メニュー右） ===== */
.gnav.gnav--split{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;                 /* ブランドとメニューの間 */
}

/* 左側：ブランド見た目はボタンと統一 */
.gnav-left .gnav-brand{
  display:inline-block;
  padding:10px 16px;
  border-radius:12px;
  text-decoration:none;
  color:inherit;
  background:var(--neu-bg);
  box-shadow:4px 4px 8px var(--neu-dark), -4px -4px 8px var(--neu-light);
  font-weight:700;
  letter-spacing:.02em;
  white-space:nowrap;
}

/* 右側：メニューULを右寄せ＆横並び */
.gnav-right{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  list-style:none;
  margin:0;
  padding:0;
  margin-left:auto;         /* 右側に寄せる決め手 */
}

/* 既存の「li position:relative」が ul直下限定だった場合に保険 */
.gnav.gnav--split > .gnav-right > li{ position:relative; }

/* モバイル（幅狭）で詰め気味に */
@media (max-width:720px){
  .gnav-left .gnav-brand{ padding:8px 12px; }
  .gnav-right{ gap:10px; }
}


/* ==== カテゴリ/アーカイブ一覧の固定幅・floatを無効化し、グリッドで伸長 ==== */
/* 親側：どのテーマ構造でも当たるように候補を網羅 */
:where(.page-category,.page-archive)
  :where(#main,.main,main,.entries,.archive-entries){
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important; /* 余白を残さず可変 */
  gap: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 子側：テーマの固定幅/floatを解除（width/max-width/float/margin を殺す） */
:where(.page-category,.page-archive)
  :where(#main,.main,main,.entries,.archive-entries)
  > :where(li,article,.entry,.archive-entry,.hentry){
  float: none !important;
  clear: none !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  display: block !important;
  box-sizing: border-box !important;
}

/* カードの見た目（ニューモーフィズム）—必要なら微調整 */
:where(.page-category,.page-archive)
  :where(#main,.main,main,.entries,.archive-entries)
  > :where(li,article,.entry,.archive-entry,.hentry){
  background: var(--neu-bg);
  border-radius: var(--neu-radius);
  padding: 18px;
  box-shadow: 10px 10px 20px var(--neu-dark), -10px -10px 20px var(--neu-light);
  overflow: hidden;
}

/* 画像のはみ出し防止 */
:where(.page-category,.page-archive)
  :where(#main,.main,main,.entries,.archive-entries) img{
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: 10px;
}

/* === 一覧（トップ/カテゴリ/アーカイブ）：PCは最大2列・スマホ1列 === */
/* カードの最低幅（お好みで 320～420px 程度） */
:root{ --card-min: 360px; }

/* 親：PCは「min幅を保ちながら最大2列」／余白・リセット */
:where(.page-index,.page-archive,.page-category)
  :where(#main,.main,main,.entries,.archive-entries){
  display: grid !important;
  grid-template-columns: repeat(2, minmax(var(--card-min), 1fr)) !important;
  gap: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* スマホは1列に */
@media (max-width: 720px){
  :where(.page-index,.page-archive,.page-category)
    :where(#main,.main,main,.entries,.archive-entries){
    grid-template-columns: 1fr !important;
  }
}

/* 子要素の固定幅/float/外余白を無効化（テーマ由来の縛りを解除） */
:where(.page-index,.page-archive,.page-category)
  :where(#main,.main,main,.entries,.archive-entries)
  > :where(li,article,.entry,.archive-entry,.hentry){
  float: none !important;
  clear: none !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  display: block !important;
  box-sizing: border-box !important;
}

/* 画像のはみ出し防止（安全策） */
:where(.page-index,.page-archive,.page-category)
  :where(#main,.main,main,.entries,.archive-entries) img{
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: 10px;
}


/* details 基本 */
.gnav-right .has-sub details { position: relative; }

/* サマリーのデフォルト三角を消す（必要なら） */
.gnav-right .has-sub summary {
  list-style: none;
  cursor: pointer;
}
.gnav-right .has-sub summary::-webkit-details-marker { display: none; }

/* サブメニュー表示制御：open のときだけ出す */
.gnav-right .has-sub details > .submenu { display: none; }
.gnav-right .has-sub details[open] > .submenu { display: block; }

/* 任意：メニューの見た目（お好みで調整） */
.gnav-right .submenu {
  position: absolute; top: 100%; left: 0;
  background: #fff; border: 1px solid #eee; border-radius: 10px;
  padding: .5rem 0; margin-top: .4rem; min-width: 220px;
  box-shadow: 0 12px 24px rgba(0,0,0,.08); z-index: 50;
}
.gnav-right .submenu a { display:block; padding:.6rem .9rem; text-decoration:none; color:#222; }
.gnav-right .submenu a:hover { background:#f6f7fb; }




/* ===== 可愛いトーン共通（色はお好みで） ===== */
:root {
  --kawaii-accent: #89a8ff;      /* アクセント */
  --kawaii-bg: #ffffff;          /* メニュー背景 */
  --kawaii-shadow: 0 12px 24px rgba(137,168,255,.20);
  --kawaii-radius: 14px;
}

/* ボタン（summary）をぷにっと */
.gnav-right .has-sub > details > summary {
  position: relative;
  padding: .4rem .9rem;
  border-radius: 999px;
  background: linear-gradient(#fff, #fff);
  box-shadow: 0 3px 0 rgba(0,0,0,.04);
  transition: transform .14s ease, box-shadow .14s ease, background-color .14s ease;
  list-style: none;
  cursor: pointer;
}
.gnav-right .has-sub > details > summary::-webkit-details-marker { display:none; }

.gnav-right .has-sub > details > summary:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 12px rgba(137,168,255,.18);
}
.gnav-right .has-sub > details[open] > summary {
  /* ふわっと強調 */
  box-shadow: 0 6px 16px rgba(137,168,255,.22);
}

/* ▽マーカーを丸ドロップ風に */
.gnav-right .has-sub > details > summary::after {
  content:"";
  position:absolute; right:.55rem; top:50%; translate:0 -50%;
  width:.55rem; height:.55rem; border-radius:50%;
  background: var(--kawaii-accent);
  box-shadow: 0 2px 0 rgba(0,0,0,.06) inset;
  transition: transform .18s ease, background-color .18s ease;
}
.gnav-right .has-sub > details[open] > summary::after {
  transform: rotate(180deg) scale(1.05);
}

/* 下線が“にゅっ”と伸びる（やさしい色） */
.gnav-right .has-sub > details > summary::before {
  content:"";
  position:absolute; left:.9rem; right:.9rem; bottom:-6px; height:2px;
  background: var(--kawaii-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s ease;
  border-radius: 1px;
}
.gnav-right .has-sub > details[open] > summary::before,
.gnav-right .has-sub > details > summary:hover::before {
  transform: scaleX(1);
}

/* ===== ドロップダウン 本体 ===== */
.gnav-right .has-sub details { position: relative; }
.gnav-right .has-sub details > .submenu {
  position:absolute; top: calc(100% + .4rem); left: 0;
  min-width: 240px;
  background: var(--kawaii-bg);
  border: 1px solid rgba(137,168,255,.15);
  border-radius: var(--kawaii-radius);
  box-shadow: var(--kawaii-shadow);
  padding: .5rem 0;
  /* ふわっと＋ちょいスケール */
  opacity: 0; transform: translateY(8px) scale(.98);
  transition: opacity .18s ease, transform .18s ease;
  z-index: 50;
  display: none; /* 初期は隠す */
}
.gnav-right .has-sub details[open] > .submenu {
  display: block;
  opacity: 1; transform: translateY(0) scale(1);
}

/* 子項目を段階表示（ステッガー） */
.gnav-right .submenu li {
  opacity: 0; transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease;
}
.gnav-right .has-sub details[open] .submenu li { opacity: 1; transform: translateY(0); }
.gnav-right .has-sub details[open] .submenu li:nth-child(1){ transition-delay: .02s; }
.gnav-right .has-sub details[open] .submenu li:nth-child(2){ transition-delay: .05s; }
.gnav-right .has-sub details[open] .submenu li:nth-child(3){ transition-delay: .08s; }
.gnav-right .has-sub details[open] .submenu li:nth-child(4){ transition-delay: .11s; }
.gnav-right .has-sub details[open] .submenu li:nth-child(5){ transition-delay: .14s; }
.gnav-right .has-sub details[open] .submenu li:nth-child(6){ transition-delay: .17s; }

.gnav-right .submenu a {
  display:block; padding:.62rem .9rem; margin:.14rem .34rem;
  border-radius: 12px;
  color:#222; text-decoration:none; white-space: nowrap;
  transition: background-color .14s ease, transform .08s ease;
}
.gnav-right .submenu a:hover,
.gnav-right .submenu a:focus {
  background: rgba(137,168,255,.12);
  transform: translateY(-1px);
}

/* ===== モーション配慮（reduce） ===== */
@media (prefers-reduced-motion: reduce) {
  .gnav-right .has-sub > details > summary,
  .gnav-right .has-sub > details > summary::after,
  .gnav-right .has-sub > details > summary::before,
  .gnav-right .has-sub details > .submenu,
  .gnav-right .submenu li,
  .gnav-right .submenu a {
    transition: none !important;
    transform: none !important;
  }
  /* reduce時は “色の変化だけ” に置き換え */
  .gnav-right .has-sub details > .submenu {
    display: none; opacity: 1;  /* 開閉はdetailsのopenで制御 */
  }
  .gnav-right .has-sub details[open] > .submenu {
    display: block;
  }
  .gnav-right .submenu a:hover,
  .gnav-right .submenu a:focus {
    background: rgba(137,168,255,.15);
  }
}


/* ========== 共通トークン（色はお好みで） ========== */
:root {
  --nav-accent: #ff8abf;   /* ピンク（お好きな色コードでOK） */
  --nav-text:   #222;
  --nav-bg:     #fff;
  --nav-shadow: 0 6px 20px rgba(0,0,0,.08);
  --nav-radius: 999px;
  --nav-gap:    .6rem;
}

/* リストの並び・余白 */
.gnav-right { display:flex; gap: var(--nav-gap); align-items:center; }

/* ===== “ピル型ボタン” を a と summary に共通適用 ===== */
.gnav-right > li > a,
.gnav-right .has-sub > details > summary{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.55rem 1rem;
  background: var(--nav-bg);
  color: var(--nav-text);
  border-radius: var(--nav-radius);
  text-decoration:none;
  line-height:1; font-weight:600; white-space:nowrap;
  box-shadow: 0 2px 0 rgba(0,0,0,.04);
  transition: transform .14s ease, box-shadow .14s ease, background-color .14s ease;
  position:relative; cursor:pointer;
}

/* ▼ “ピンクの下線アニメーション” を a と summary に共通で付与 */
.gnav-right > li > a::before,
.gnav-right .has-sub > details > summary::before{
  content:"";
  position:absolute; left:1rem; right:1rem; bottom:-6px;
  height:2px; border-radius:1px;
  background: var(--nav-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s ease;
}

/* hover / focus / open で線を出す（共通） */
.gnav-right > li > a:hover::before,
.gnav-right > li > a:focus-visible::before,
.gnav-right .has-sub > details > summary:hover::before,
.gnav-right .has-sub > details[open] > summary::before{
  transform: scaleX(1);
}

/* hover/active（両方共通） */
.gnav-right > li > a:hover,
.gnav-right .has-sub > details > summary:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(255,138,191,.18);
}
.gnav-right > li > a:active,
.gnav-right .has-sub > details > summary:active{
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(255,138,191,.14);
}

/* フォーカスリング（共通） */
.gnav-right > li > a:focus-visible,
.gnav-right .has-sub > details > summary:focus-visible{
  outline: 2px solid color-mix(in oklab, var(--nav-accent) 70%, white);
  outline-offset: 2px;
}

/* 開いている summary も通常リンクと同じ“押された強調”に */
.gnav-right .has-sub > details[open] > summary{
  box-shadow: 0 10px 22px rgba(255,138,191,.22);
}

/* ▼マーカー（summaryだけに追加。丸ドロップ） */
.gnav-right .has-sub > details > summary{ padding-right: 1.4rem; }
.gnav-right .has-sub > details > summary::after{
  content:""; position:absolute; right:.6rem; top:50%; translate:0 -50%;
  width:.5rem; height:.5rem; border-radius:50%;
  background: var(--nav-accent);
  transition: transform .18s ease;
}
.gnav-right .has-sub > details[open] > summary::after{ transform: rotate(180deg) scale(1.05); }

/* ===== ドロップダウン ===== */
.gnav-right .has-sub details{ position:relative; }
.gnav-right .has-sub details > .submenu{
  position:absolute; top: calc(100% + .5rem); left:0; min-width:240px;
  background:#fff; border:1px solid rgba(255,138,191,.15); border-radius:14px;
  box-shadow: var(--nav-shadow); padding:.5rem 0; z-index:50;
  opacity:0; transform: translateY(8px) scale(.98);
  transition: opacity .18s ease, transform .18s ease;
  display:none;
}
.gnav-right .has-sub details[open] > .submenu{
  display:block; opacity:1; transform: translateY(0) scale(1);
}

/* 子項目のステッガー（控えめ） */
.gnav-right .submenu li{
  opacity:0; transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease;
}
.gnav-right .has-sub details[open] .submenu li{ opacity:1; transform: translateY(0); }
.gnav-right .has-sub details[open] .submenu li:nth-child(1){ transition-delay:.02s; }
.gnav-right .has-sub details[open] .submenu li:nth-child(2){ transition-delay:.05s; }
.gnav-right .has-sub details[open] .submenu li:nth-child(3){ transition-delay:.08s; }

.gnav-right .submenu a{
  display:block; padding:.62rem .9rem; margin:.14rem .34rem; border-radius:12px;
  color:var(--nav-text); text-decoration:none; white-space:nowrap;
  transition: background-color .14s ease, transform .08s ease;
}
.gnav-right .submenu a:hover,
.gnav-right .submenu a:focus{
  background: rgba(255,138,191,.12);
  transform: translateY(-1px);
}

/* ===== モーション配慮（reduce） ===== */
@media (prefers-reduced-motion: reduce){
  .gnav-right > li > a,
  .gnav-right .has-sub > details > summary,
  .gnav-right .has-sub > details > summary::before,
  .gnav-right .has-sub > details > summary::after,
  .gnav-right .has-sub details > .submenu,
  .gnav-right .submenu li,
  .gnav-right .submenu a{
    transition: none !important; transform: none !important;
  }
  .gnav-right > li > a::before,
  .gnav-right .has-sub > details > summary::before{
    /* アニメ無効時でも“線は出る”ように */
    transform: none !important;
  }
  .gnav-right .has-sub details > .submenu{ display:none; opacity:1; }
  .gnav-right .has-sub details[open] > .submenu{ display:block; }
}



/* ====== 既存の「::before 下線」を無効化（この下で別方式に置換） ====== */
.gnav-right > li > a::before,
.gnav-right .has-sub > details > summary::before {
  content: none !important;
}

/* ====== 下線は background-size で再実装（色は既存の --nav-accent / ピンク） ====== */
.gnav-right > li > a,
.gnav-right .has-sub > details > summary {
  background-image: linear-gradient(var(--nav-accent, #ff8abf), var(--nav-accent, #ff8abf));
  background-repeat: no-repeat;
  background-position: left calc(100% - 4px);
  background-size: 0 2px;
  transition: background-size .22s ease; /* 既存のtransitionに追加でもOK */
}
.gnav-right > li > a:hover,
.gnav-right > li > a:focus-visible,
.gnav-right .has-sub > details > summary:hover,
.gnav-right .has-sub > details[open] > summary {
  background-size: 100% 2px;
}

/* ====== ☆ を出す（a は ::after、summary は ::before を使用） ====== */

/* a 用（星を中央から少し上へ跳ねさせる） */
.gnav-right > li > a {
  position: relative;
  overflow: visible;
}
.gnav-right > li > a::after {
  content: "⭐";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -40%) scale(0);
  opacity: 0;
  pointer-events: none;
  font-size: 0.9rem;
  color: gold;
}

/* summary 用（details内で summary の真上に星を出す） */
.gnav-right .has-sub > details { position: relative; }
.gnav-right .has-sub > details > summary { position: relative; }
.gnav-right .has-sub > details::before {
  content: "⭐";
  position: absolute;
  /* summary の中央付近を狙う */
  left: calc(50% + 0px);
  top: 0.9em; /* summary の中ほど */
  transform: translate(-50%, -40%) scale(0);
  opacity: 0;
  pointer-events: none;
  font-size: 0.9rem;
  color: gold;
}

/* hover でアニメ再生（a は ::after、summary は details::before） */
.gnav-right > li > a:hover::after,
.gnav-right > li > a:focus-visible::after {
  animation: star-pop .6s ease forwards var(--star-delay, 0s);
}
.gnav-right .has-sub > details:hover::before,
.gnav-right .has-sub > details:focus-within::before {
  animation: star-pop .6s ease forwards var(--star-delay, 0s);
}

/* ====== “ランダム風”に見せるためのバラつきパラメータ（liに付与） ====== */
.gnav-right > li {
  /* デフォルト（中央／中くらいの跳ね幅） */
  --dx: 0px;       /* 左右ズレ */
  --amp: 22px;     /* 跳ねる高さ */
  --rot: 12deg;    /* ひねり */
  --star-delay: 0s;
}
/* 5パターンを循環させて“ランダム風”に */
.gnav-right > li:nth-child(5n+1) { --dx: -8px; --amp: 26px; --rot: -16deg; --star-delay: 0.00s; }
.gnav-right > li:nth-child(5n+2) { --dx:  6px; --amp: 18px; --rot:  10deg; --star-delay: 0.03s; }
.gnav-right > li:nth-child(5n+3) { --dx: -4px; --amp: 20px; --rot:  18deg; --star-delay: 0.01s; }
.gnav-right > li:nth-child(5n+4) { --dx: 10px; --amp: 24px; --rot: -12deg; --star-delay: 0.02s; }
.gnav-right > li:nth-child(5n+5) { --dx:  0px; --amp: 28px; --rot:  14deg; --star-delay: 0.04s; }

/* ====== 星のアニメーション本体（CSS変数で軌道を変える） ====== */
@keyframes star-pop {
  0%   { transform: translate(calc(-50% + 0px), -40%) scale(0); opacity: 0; }
  25%  { transform: translate(calc(-50% + var(--dx)), calc(-40% - (var(--amp) * 0.2))) scale(1.2) rotate(var(--rot)); opacity: 1; }
  55%  { transform: translate(calc(-50% + var(--dx)), calc(-40% - (var(--amp) * 0.7))) scale(1.0) rotate(calc(var(--rot) * -0.3)); opacity: .9; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-40% - var(--amp))) scale(.85) rotate(0deg); opacity: 0; }
}

/* ====== モーション配慮 ====== */
@media (prefers-reduced-motion: reduce){
  .gnav-right > li > a::after,
  .gnav-right .has-sub > details::before {
    animation: none !important;
    opacity: 0 !important;
  }
  .gnav-right > li > a,
  .gnav-right .has-sub > details > summary {
    background-size: 100% 2px !important; /* 線は出すがアニメしない */
  }
}



/* =========================================
   うさたんの投資ブログだけ「ハート3つ」演出
   （既存の⭐演出や下線アニメとは干渉しません）
   ========================================= */
.gnav-left .gnav-brand.special-heart{
  position: relative;
  overflow: visible; /* ハートがはみ出せるように */
}

/* ハート共通の見た目 */
.gnav-left .gnav-brand.special-heart .heart{
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
  font-size: 1rem;
  /* ピンク色は既存のアクセントに合わせる（好みで #ff8abf 固定でもOK） */
  color: var(--nav-accent, #ff8abf);
  z-index: 2;
  /* 各ハートの“ばらつき”パラメータ（デフォルト） */
  --dx: 0px;          /* 左右ずらし */
  --lift1: 18px;      /* 中間上昇1 */
  --lift2: 36px;      /* 中間上昇2 */
  --lift3: 56px;      /* 最終到達点 */
  --rot: 12deg;       /* ひねり */
  --delay: 0s;        /* 再生ディレイ */
}

/* ホバー or キーボードフォーカスでアニメ再生 */
.gnav-left .gnav-brand.special-heart:hover .heart,
.gnav-left .gnav-brand.special-heart:focus-visible .heart{
  animation: heart-pop .7s cubic-bezier(.2,.7,.2,1) forwards var(--delay);
}

/* キーフレーム：中央→少し上へ“ぽん”→さらに上でフェードアウト */
@keyframes heart-pop{
  0%   { transform: translate(calc(-50% + 0px), calc(-50% - 0px)) scale(0) rotate(0deg); opacity: 0; }
  25%  { transform: translate(calc(-50% + var(--dx)), calc(-50% - var(--lift1))) scale(1.25) rotate(var(--rot)); opacity: 1; }
  60%  { transform: translate(calc(-50% + var(--dx)), calc(-50% - var(--lift2))) scale(1.0)  rotate(calc(var(--rot) * -0.4)); opacity: .9; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% - var(--lift3))) scale(.85)  rotate(0deg); opacity: 0; }
}

/* ===== パターン設定 ===== */
/* ▼ A) 同時に“ぱっ”と3つ（.heart-burst を付ける） */
.gnav-left .gnav-brand.special-heart.heart-burst .heart:nth-of-type(1){ --dx:-10px; --rot:-12deg; --delay:0s; }
.gnav-left .gnav-brand.special-heart.heart-burst .heart:nth-of-type(2){ --dx:  0px; --rot: 10deg; --delay:0s; }
.gnav-left .gnav-brand.special-heart.heart-burst .heart:nth-of-type(3){ --dx: 10px; --rot:-16deg; --delay:0s; }

/* ▼ B) ぽん→ぽん→ぽん と順番（.heart-seq を付ける） */
.gnav-left .gnav-brand.special-heart.heart-seq .heart:nth-of-type(1){ --dx:-10px; --rot:-12deg; --delay:0s;   }
.gnav-left .gnav-brand.special-heart.heart-seq .heart:nth-of-type(2){ --dx:  0px; --rot: 12deg; --delay:.08s; }
.gnav-left .gnav-brand.special-heart.heart-seq .heart:nth-of-type(3){ --dx: 10px; --rot:-10deg; --delay:.16s; }

/* （お好み）ほんの少しだけ高さを変える → 立体感UP */
.gnav-left .gnav-brand.special-heart .heart:nth-of-type(1){ --lift3: 54px; }
.gnav-left .gnav-brand.special-heart .heart:nth-of-type(2){ --lift3: 58px; }
.gnav-left .gnav-brand.special-heart .heart:nth-of-type(3){ --lift3: 62px; }

/* ===== モーション配慮（動きが苦手な方） ===== */
@media (prefers-reduced-motion: reduce){
  .gnav-left .gnav-brand.special-heart .heart{
    animation: none !important;
    opacity: 0 !important;
  }
}


/* うさたんの投資ブログだけ：ハート3つを“ぽんぽん” */
.gnav-left .gnav-brand.brand-heart{
  position: relative;
  overflow: visible; /* 飛び出す余白を許可 */
}

/* ハートの初期状態：中央に重ねて非表示（レイアウトに影響しない） */
.gnav-left .gnav-brand.brand-heart .heart{
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
  font-size: 1rem;               /* 大きさ調整 */
  color: var(--nav-accent, #ff8abf); /* 色。ピンク固定なら #ff8abf */
  z-index: 2;

  /* 個別パラメータ（デフォルト値） */
  --dx: 0px;     /* 左右ズレ */
  --lift1: 18px; /* 中間上昇1 */
  --lift2: 36px; /* 中間上昇2 */
  --lift3: 56px; /* 最終高さ */
  --rot: 12deg;  /* ひねり */
  --delay: 0s;   /* 再生ディレイ */
}

/* ホバー/フォーカスでアニメ再生 */
.gnav-left .gnav-brand.brand-heart:hover .heart,
.gnav-left .gnav-brand.brand-heart:focus-visible .heart{
  animation: heart-pop .7s cubic-bezier(.2,.7,.2,1) forwards var(--delay);
}

/* キーフレーム：中央→上へ→消える */
@keyframes heart-pop{
  0%   { transform: translate(-50%, -50%) scale(0) rotate(0deg); opacity: 0; }
  25%  { transform: translate(calc(-50% + var(--dx)), calc(-50% - var(--lift1)))
                   scale(1.25) rotate(var(--rot)); opacity: 1; }
  60%  { transform: translate(calc(-50% + var(--dx)), calc(-50% - var(--lift2)))
                   scale(1.0)  rotate(calc(var(--rot) * -0.4)); opacity: .9; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% - var(--lift3)))
                   scale(.85)  rotate(0deg); opacity: 0; }
}

/* 3つのハートに少しずつ違いを与えて“かわいいバラつき”を出す */
.gnav-left .gnav-brand.brand-heart .heart:nth-of-type(1){ --dx:-10px; --rot:-12deg; --delay:0s;   --lift3:54px; }
.gnav-left .gnav-brand.brand-heart .heart:nth-of-type(2){ --dx:  0px; --rot: 12deg; --delay:.08s; --lift3:58px; }
.gnav-left .gnav-brand.brand-heart .heart:nth-of-type(3){ --dx: 10px; --rot:-10deg; --delay:.16s; --lift3:62px; }

/* 動きが苦手な方への配慮 */
@media (prefers-reduced-motion: reduce){
  .gnav-left .gnav-brand.brand-heart .heart{
    animation: none !important;
    opacity: 0 !important;
  }
}



/* --- 控えめハートアニメーション --- */

/* 基本パラメータを少し弱めにする */
.gnav-left .gnav-brand.brand-heart .heart{
  font-size: 0.9rem;               /* 少し小さめ */
  color: var(--nav-accent, #ff8abf);
  --dx: 0px;
  --lift1: 10px;  /* 中間高さ：小さめ */
  --lift2: 18px;  /* さらに控えめ */
  --lift3: 26px;  /* 最終高さをかなり低めに */
  --rot: 6deg;    /* 回転も少なめ */
  --delay: 0s;
}

/* キーフレームも緩やかに */
@keyframes heart-pop{
  0%   { transform: translate(-50%, -50%) scale(0.2) rotate(0deg); opacity: 0; }
  30%  { transform: translate(calc(-50% + var(--dx)), calc(-50% - var(--lift1)))
                   scale(1.05) rotate(var(--rot)); opacity: 0.8; }
  70%  { transform: translate(calc(-50% + var(--dx)), calc(-50% - var(--lift2)))
                   scale(0.95) rotate(calc(var(--rot) * -0.3)); opacity: 0.6; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% - var(--lift3)))
                   scale(0.8)  rotate(0deg); opacity: 0; }
}

/* 3つのハートそれぞれ微調整 */
.gnav-left .gnav-brand.brand-heart .heart:nth-of-type(1){ --dx:-6px; --rot:-6deg; --delay:0s;   --lift3:24px; }
.gnav-left .gnav-brand.brand-heart .heart:nth-of-type(2){ --dx: 0px; --rot: 6deg;  --delay:.06s; --lift3:26px; }
.gnav-left .gnav-brand.brand-heart .heart:nth-of-type(3){ --dx: 6px; --rot:-5deg;  --delay:.12s; --lift3:28px; }




a:hover,
a:focus {
  color: #ff8abf !important; /* ピンクに上書き */
}