@charset "UTF-8";
/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.1.3
*/
/*
現状のめも：
- この css は記事のプレビューのみで使われているものではあるが、WordPress 自体からの状態でそのまま残っている
- 当然大半の css が必要ないのでコンテンツのプレビュー分以外（＋不要なものを dispaly: none するもの） 以外は不要であるが、
  メンテする必要もないししたくもないのでそのまま残してある
- ダークモードに関しては、自分の拡張機能（Dark Reader）で切り替わったときに「サイトのダークテーマを尊重する」によって自動的にダークモードのスタイルが適用されるようにするため、@prefers-color-schema を使用している
 */
#header-container {
  display: none;
}
.date-tags, .eye-catch-wrap, .notify-bar, .topBtn {
  display: none;
}
footer {
  display: none;
}

/* Nuxt の main.scss から mixin を削除して scss -> css convert して article にまとめたもの */
/* いまのところアイコンの SVG は非対応！ */
:root {
  --color-text: #4e4e4e;
  --color-text-title-heading: #554545;
  --color-gray: #bab9b9;
  --color-text-white: #f2f2f2;
  --color-text-white-hover: #e3e3e3;
  --color-background: #fffcf9;
  --color-footer: #f8f5f2;
  --color-primary: #816e68;
  --color-mi: #604134;
  --color-link: #c74f16;
  --color-media-border: #dfd1c6;
  --color-scrollbar-thumb: #c7bfba;
  --width-max-base: 1188px;
  --width-max-screen: calc(var(--width-max-base) - var(--width-scrollbar));
  --font-family: "Custom Noto Sans", helvetica, arial, verdana, sans-serif;
}
* {
  box-sizing: border-box;
  overflow-wrap: break-word;
  scrollbar-color: var(--color-scrollbar-thumb) var(--color-background);
}
body {
  margin: 0;
  padding: 0;
  font-size: 18px;
  font-family: var(--font-family);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--color-text);
  background-color: var(--color-background);
}
@media screen and (max-width: 768px) {
  body {
    font-size: 16px;
  }
}
p a,
span a,
li a,
table a,
#content a {
  color: var(--color-link);
  transition: 0.13s all ease;
}
ul, li {
  margin: 0;
  padding: 0;
  list-style: none;
}
img {
  vertical-align: middle;
}

/* Nuxt の content.scss から mixin を削除して scss -> css convert して article にまとめて #tinymce を追加したもの */
article, #tinymce {
  width: 785px;
  margin: 3em auto 10em;
  .entry-content {
    margin-top: 3.1em;
  }
  p {
    margin: 2.3em auto;
    line-height: 1.8;
  }
  p:has(> audio) {
    margin: 0;
  }
  h2, h3, h4, h5, h6 {
    margin-top: 1.8em;
    margin-bottom: 1.7em;
    padding-top: 0.7em;
    color: var(--color-text-title-heading);
    font-weight: bold;
    line-height: 1.25;
  }
  h2 {
    padding-left: 0.1em;
    padding-right: 0.1em;
    padding-bottom: 0.3em;
    font-size: 1.57em;
    border-bottom: solid 1.3px #e0e0e0;
  }
  h3 {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0.3em;
    font-size: 1.27em;
    border-bottom: solid 1px #e0e0e0;
  }
  h4 {
    display: inline-block;
    margin: 0;
    padding: 0.5em 0.3em 0.4em;
    font-size: 1.1em;
    border-bottom: solid 1.3px #d9d9d9;
  }
  h5 {
    font-size: 1.09em;
  }
  h6 {
    font-size: 1.05em;
  }
  ul, ol {
    padding-left: 2.222em;
  }
  ul li {
    list-style: disc;
  }
  ol li {
    list-style: decimal;
    padding-left: 0.7em;
  }
  li {
    margin: 0.2em;
  }
  img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: auto;
    border: solid 2.7px var(--color-media-border);
    border-radius: 7px;
  }
  img.win11_ss {
    border-radius: 8px !important;
  }
  img.mac_ss {
    border-radius: 13px !important;
  }
  img ~ em {
    display: block;
    margin: 3px auto;
    padding: 0.1em 0 0;
    color: #908e8d;
    font-size: 0.8em;
    line-height: 1.5;
    text-align: center;
  }
  code {
    margin: auto 0.37em;
    padding: 0.13em 0.5em;
    vertical-align: 0.05em;
    color: #54514f;
    font-size: 0.85em;
    line-height: 1;
    font-family: Consolas, Monaco, Menlo, monospace;
    border-radius: 5px;
    background-color: #ece8e6;
  }
  pre code {
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    background-color: initial;
  }
  pre:focus-visible {
    outline: none;
  }
  iframe {
    max-width: 100%;
  }
  sup {
    font-size: 0.7em;
  }
  div[id^="attachment_"] {
    width: auto !important;
  }
  .wp-caption {
    max-width: 100%;
  }
  .wp-caption .wp-caption-text {
    margin: auto 3.7em 3.5em;
    padding: 0.5em 0 0;
    font-size: 0.7em;
    line-height: 1.5;
    text-align: center;
  }
  .wp-video {
    max-width: 100%;
    height: auto;
  }
  .wp-video video {
    width: 100%;
    height: auto;
  }
  blockquote {
    margin: 2.7em auto;
    padding: 0.1em 0 0.5em 1.5em;
    color: #6d6d6d;
    border-left: 5px solid #c1bdb8;
  }
  blockquote.img {
    border: 0 !important;
    background-color: #f0f0f0 !important;
    padding: 0.5em 2.3em 0.1em !important;
  }
  blockquote.img > .wp-caption {
    margin: 1em 0;
  }
  blockquote.img > .wp-caption img {
    border: none !important;
    border-radius: 0 !important;
  }
  blockquote.img > .wp-caption .wp-caption-text {
    margin-bottom: 1.3em;
    color: #a4a4a4;
    font-size: 0.6em;
  }
  table {
    width: 99%;
    max-width: 100%;
    font-size: 0.87em;
    border: solid 2.3px #f0eae1;
    border-spacing: 0;
    border-radius: 7px;
    border-collapse: separate;
  }
  table th, table td {
    border: 1px solid #eee;
    padding: 6px;
  }
  table thead {
    background-color: #faf6f1;
  }
  table thead tr th {
    border: solid 1.7px #f0eae1;
  }
  table tbody tr td {
    border: 1.3px dashed #dadada;
  }
  table th > code, table td > code {
    word-break: break-all;
  }
  table tr:first-child td:first-child {
    border-top: none !important;
    border-left: none !important;
  }
  table tr:first-child td:last-child {
    border-top: none !important;
    border-right: none !important;
  }
  table tr:last-child td:first-child {
    border-bottom: none !important;
    border-left: none !important;
  }
  table tr:last-child td:last-child {
    border-bottom: none !important;
    border-right: none !important;
  }
  table tr:first-child td {
    border-top: none !important;
  }
  table tr:last-child td {
    border-bottom: none !important;
  }
  table td:first-child {
    border-left: none !important;
  }
  table td:last-child {
    border-right: none !important;
  }
  .toc {
    display: table;
    width: 80%;
    margin: 3em auto 1em;
    padding: 1em 1.6em 1.1em;
    font-size: 0.85em;
    line-height: 1.8;
    border: 1.3px solid #ded8d4;
    border-radius: 5px;
  }
  .toc .toc-checkbox {
    display: none;
  }
  .toc .toc-checkbox:checked ~ .toc-content {
    visibility: visible;
    padding-top: 0.6em;
    height: 100%;
    opacity: 1;
  }
  .toc .toc-checkbox:checked + .toc-title::after {
    content: "[みない]";
  }
  .toc .toc-title {
    display: block;
    padding: 2px 16px;
    font-size: 1.1em;
    text-align: center;
    cursor: pointer;
  }
  .toc .toc-title::after {
    content: "[みる]";
    margin-left: 0.5em;
    cursor: pointer;
    font-size: 0.8em;
  }
  .toc .toc-title:hover::after {
    text-decoration: underline;
  }
  .toc .toc-content {
    visibility: hidden;
    height: 0;
    opacity: 0;
    border-top: 1px solid #edecea;
    transition: all 0.37s ease;
  }
  .toc .toc-content .toc-list {
    margin: 1em auto;
    padding-left: 0;
  }
  .toc .toc-content .toc-list > li > a {
    font-weight: bold;
  }
  .toc .toc-content .toc-list a {
    color: var(--color-text);
    text-decoration: none;
  }
  .toc .toc-content .toc-list ul, .toc .toc-content .toc-list ol {
    margin: 0.3em auto 1em;
    padding-left: 1.3em;
  }
  .toc .toc-content .toc-list ul {
    list-style: none;
  }
  .toc .toc-content .toc-list li {
    margin: 0.2em;
    list-style: none;
  }
  .toc .toc-content .toc-list li li {
    line-height: 1.55;
  }
  .toc .toc-content .toc-list li li a {
    color: #9a9a9a;
    font-weight: bold;
    font-size: 0.95em;
  }
  .toc .toc-content .toc-list li li li {
    line-height: 1.4;
  }
  .toc .toc-content .toc-list li li li a {
    color: #878787;
    font-weight: normal;
    font-size: 0.93em;
  }
  .toc .toc-content .toc-list li li li ul {
    margin: 0.3em auto 1em;
  }
  .toc .toc-content .toc-list li li li li {
    line-height: 1.3;
  }
  .toc .toc-content .toc-list li li li li a {
    color: #959595;
    font-size: 0.9em;
  }
  .toc .toc-content .toc-list li li li li li a {
    color: #959595;
  }
  .toc .toc-content a {
    transition: 0.1s;
  }
  .toc .toc-content a:hover {
    color: #c27c3e;
    text-decoration: underline;
    transition: 0.1s;
  }
  .box-common {
    position: relative;
    padding: 3em 1.5em 0.6em;
    color: #666;
    font-size: 0.95em;
    border: solid 2.7px #f1f1f1;
    border-radius: 11px;
  }
  .box-common::before {
    position: absolute;
    display: inline-block;
    top: 0.777em;
    left: 0;
    right: 0;
    margin: auto;
    padding: 0;
    width: 27px;
    height: 27px;
    font-size: 27px;
    font-weight: 900;
    line-height: 27px;
    border-right: none;
  }
  .box-common > * {
    margin: 0.7em auto;
  }
  .box-common > p > img, .box-common > p > .wp-caption > img {
    margin: 1.5em auto;
  }
  .box-common .blogcard img {
    margin: 0;
  }
  .box-common > ul, .box-common > ol {
    padding-left: 1.3em;
  }
  .box-common blockquote {
    margin: 1.5em auto;
  }
  .box-common.box-info {
    background-color: #fffaf0;
  }
  .box-common.box-info::before {
    content: "";
    mask: url("@/assets/svgs/info.svg");
    mask-size: cover;
    background-color: #e5d187;
  }
  .box-common.box-alert {
    background-color: #fff7f6;
  }
  .box-common.box-alert::before {
    content: "";
    mask: url("@/assets/svgs/alert.svg");
    mask-size: cover;
    background-color: #f6a2a2;
  }
  .box-common.box-rewrite {
    background-color: #fafff6;
  }
  .box-common.box-rewrite::before {
    content: "";
    mask: url("@/assets/svgs/edit.svg");
    mask-size: cover;
    background-color: #9bbc7e;
    top: 1em;
    width: 23px;
    height: 23px;
    font-size: 23px;
    line-height: 23px;
  }
  .box-common.box-rewrite .rewrite-date {
    color: #9bbc7e;
    font-weight: bold;
  }
  .box-common .wp-caption img {
    margin: 1.5em auto 0;
  }
  .box-common .wp-caption-text {
    margin: auto 3.7em 2.5em;
  }
  .waku-common {
    padding: 0 1.53em 0.17em;
    background-color: #fffcf8;
    border: solid 3px #e6dacd;
    border-radius: 7px;
  }
  .waku-common > ul, .waku-common > ol {
    margin-top: 1.7em;
    margin-bottom: 1.87em;
    padding-left: 1.5em;
  }
  .waku-common > ul > li, .waku-common > ol > li {
    margin: 0.67em 0;
  }
  .waku-common img {
    border: none;
  }
  .num-ol {
    counter-reset: number;
    padding-left: 1em;
  }
  .num-ol li {
    position: relative;
    margin: 0;
    padding: 0.9em 0 1em 3em;
    line-height: 1.59;
    list-style: none;
  }
  .num-ol li::before {
    counter-increment: number;
    content: counter(number);
    position: absolute;
    left: 0;
    width: 1.7em;
    height: 1.7em;
    color: #fff;
    font-weight: bold;
    font-size: 0.9em;
    background-color: var(--color-primary);
    border-radius: 50%;
    line-height: 1.6em;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
  }
  .keyboard-key {
    position: relative;
    bottom: 2px;
    margin: auto 0.5em;
    padding: 0.27em 0.39em;
    border-radius: 5px;
    font-family: monospace;
    font-weight: bold;
    font-size: 0.7em;
    color: #555;
    background-color: #f9f9f9;
    border: solid 1.57px #bbb;
  }
  a.blogcard {
    display: block;
    width: 99%;
    text-decoration: none;
  }
  a.blogcard:hover {
    filter: none;
  }
  a.blogcard:hover .blogcard {
    background-color: #f9f6f2;
  }
  a.blogcard .blogcard {
    display: flex;
    height: 120px;
    padding: 0 1.7em;
    border: solid 1.7px #e6e0d7;
    border-radius: 8px;
    background-color: var(--color-background);
    transition: 0.09s all ease;
  }
  a.blogcard .blogcard.external {
    padding: 0 1em 0 0;
  }
  a.blogcard .blogcard .thumbnail {
    width: 228.5px;
    min-width: 228.5px;
  }
  a.blogcard .blogcard .thumbnail img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    border-radius: 8px 0 0 8px;
    border: none;
  }
  a.blogcard .blogcard .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  a.blogcard .blogcard .content .title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin-bottom: -0.1em;
    color: var(--color-text);
    font-size: 0.93em;
    font-weight: bold;
    line-height: 1.3;
  }
  a.blogcard .blogcard .content .snippet {
    display: -webkit-box;
    margin-top: 0.3em;
    max-height: 1.6em;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    color: #959595;
    font-size: 0.7em;
  }
  a.blogcard .blogcard .content .footer {
    display: flex;
    margin-top: 0.7em;
    font-size: 0.6em;
    color: var(--color-text);
  }
  a.blogcard .blogcard .content .footer .category {
    position: relative;
    padding-left: 1.7em;
  }
  a.blogcard .blogcard .content .footer .category::before {
    position: absolute;
    top: 0.5em;
    left: 1px;
    width: 0.9em;
    height: 0.9em;
    content: "";
    mask: url("@/assets/svgs/folder.svg");
    mask-size: cover;
    background-color: #828282;
  }
  a.blogcard .blogcard .content .footer .favicon {
    margin: 0 5px 0 0;
    line-height: 1.9;
  }
  a.blogcard .blogcard .content .footer .favicon img {
    display: inline-block;
    height: 1.1em;
    margin-bottom: 1px;
    border-radius: 0;
    border: none;
  }
  a.blogcard .blogcard.external .content {
    margin-left: 1.3em;
  }
  a.blogcard .blogcard.external .content .footer {
    font-size: 0.7em;
  }
  a.blogcard .blogcard.page .footer {
    display: none;
  }
  .static_tweet {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 525px;
    font-size: 0.95em;
  }
  .static_tweet > a {
    display: block;
    padding: 0.8em 1.3em 0.41em;
    border: solid 2px #d5d7d9;
    border-radius: 10px;
    background-color: #fff;
    color: var(--color-text);
    text-decoration: none;
    transition: 0.23s all ease;
  }
  .static_tweet > a .content_wrap .header {
    display: flex;
    align-items: center;
  }
  .static_tweet > a .content_wrap .header .icon img {
    border: none;
    border-radius: 50%;
  }
  .static_tweet > a .content_wrap .header .author {
    margin-left: 1.1em;
    margin-bottom: 1.3px;
    font-size: 0.9em;
    line-height: 1.3;
  }
  .static_tweet > a .content_wrap .header .author .name {
    font-weight: bold;
  }
  .static_tweet > a .content_wrap .header .author .name .badge {
    position: relative;
  }
  .static_tweet > a .content_wrap .header .author .name .badge::after {
    position: absolute;
    content: "";
    display: inline-block;
    top: 0.2em;
    left: 0.3em;
    width: 17px;
    height: 17px;
    background-image: url("@/assets/images/twitter-blue.png");
    background-size: cover;
  }
  .static_tweet > a .content_wrap .header .author .id {
    font-size: 0.87em;
    color: #86898b;
  }
  .static_tweet > a .content_wrap .header .twitter_icon {
    margin-left: auto;
  }
  .static_tweet > a .content_wrap .header .twitter_icon img {
    margin-bottom: 0.6em;
    border: none;
  }
  .static_tweet > a .content_wrap .body {
    margin: 1em auto 0.3em;
    padding-bottom: 1em;
    font-size: 0.95em;
    line-height: 1.5;
    border-bottom: solid 1px #d5d7d9;
  }
  .static_tweet > a .content_wrap .body .like_link {
    color: var(--color-link);
  }
  .static_tweet > a .content_wrap .body .link_card {
    margin: 0.7em auto auto;
    padding: 0 0 0.7em;
    border: solid 1px #d5d7d9;
    border-radius: 10px;
  }
  .static_tweet > a .content_wrap .body .link_card .thumbnail img {
    border-radius: 10px 10px 0 0;
    border: none;
  }
  .static_tweet > a .content_wrap .body .link_card .content {
    margin-top: 0.5em;
    padding-left: 0.5em;
    padding-right: 0.5em;
    line-height: 1.4;
  }
  .static_tweet > a .content_wrap .body .link_card .content .title {
    font-weight: bold;
    font-size: 0.9em;
  }
  .static_tweet > a .content_wrap .body .link_card .content .description {
    font-size: 0.82em;
    color: #86898b;
  }
  .static_tweet > a .content_wrap .body .link_card .ref_tweet {
    padding: 0.5em 0.9em 0;
    font-size: 0.9em;
    line-height: 1.4;
  }
  .static_tweet > a .content_wrap .body .link_card .ref_tweet .ref_header {
    display: flex;
    align-items: center;
    gap: 0.15em;
    font-size: 1.05em;
  }
  .static_tweet > a .content_wrap .body .link_card .ref_tweet .ref_header .ref_icon img {
    display: inline;
    border: none;
  }
  .static_tweet > a .content_wrap .body .link_card .ref_tweet .ref_header .ref_name {
    font-size: 0.97em;
    font-weight: bold;
  }
  .static_tweet > a .content_wrap .body .link_card .ref_tweet .ref_header .ref_badge {
    position: relative;
    width: 17px;
    margin-right: 3px;
  }
  .static_tweet > a .content_wrap .body .link_card .ref_tweet .ref_header .ref_badge::after {
    position: absolute;
    content: "";
    display: inline-block;
    top: 0.7px;
    bottom: 0;
    margin: auto;
    width: 17px;
    height: 17px;
    background-image: url("@/assets/images/twitter-blue.png");
    background-size: cover;
  }
  .static_tweet > a .content_wrap .body .link_card .ref_tweet .ref_header .ref_id {
    font-size: 0.87em;
    color: #86898b;
  }
  .static_tweet > a .content_wrap .body .link_card .ref_tweet .ref_body {
    margin-top: 0.3em;
  }
  .static_tweet > a .content_wrap .body .media_wrap {
    margin: 0.7em auto auto;
    border: solid 1px #d5d7d9;
    border-radius: 10px;
  }
  .static_tweet > a .content_wrap .body .media_wrap .thumbnails {
    display: grid;
  }
  .static_tweet > a .content_wrap .body .media_wrap .thumbnails img {
    object-fit: cover;
    border-radius: 10px;
    border: none;
    overflow: hidden;
  }
  .static_tweet > a .content_wrap .body .media_wrap .video_thumbnail {
    position: relative;
  }
  .static_tweet > a .content_wrap .body .media_wrap .video_thumbnail img {
    border-radius: 10px;
    border: none;
  }
  .static_tweet > a .content_wrap .body .media_wrap .video_thumbnail::after {
    position: absolute;
    content: "";
    display: inline-block;
    inset: 0;
    margin: auto;
    width: 50px;
    height: 50px;
    background-image: url("@/assets/images/circle-play.png");
    background-size: cover;
    border: solid 3px #fff;
    border-radius: 50%;
  }
  .static_tweet > a .content_wrap .meta {
    display: flex;
    font-size: 0.8em;
    color: #86898b;
  }
  .static_tweet > a .content_wrap .meta > * {
    position: relative;
    margin: auto 1.5em;
  }
  .static_tweet > a .content_wrap .meta > *::before {
    position: absolute;
    content: "";
    mask-size: cover;
    display: inline-block;
    background-color: #86898b;
    top: 1.7px;
    left: -1.4em;
    bottom: 0;
    margin: auto;
    padding: 0;
    width: 13px;
    height: 13px;
    font-size: 13px;
  }
  .static_tweet > a .content_wrap .meta .reply::before {
    mask: url("@/assets/svgs/comment.svg");
  }
  .static_tweet > a .content_wrap .meta .retweet {
    margin: auto 1.4em auto 1.6em;
  }
  .static_tweet > a .content_wrap .meta .retweet::before {
    top: 3.3px;
    left: -1.5em;
    width: 15px;
    height: 15px;
    mask: url("@/assets/svgs/retweet.svg");
  }
  .static_tweet > a .content_wrap .meta .like::before {
    mask: url("@/assets/svgs/heart.svg");
  }
  .static_tweet > a .content_wrap .meta .timestamp {
    margin-left: 0.3em;
  }
  .static_tweet > a .content_wrap .meta .timestamp::before {
    content: none;
  }
  .static_tweet > a:hover {
    background-color: #f3f5f7;
  }
  .product-item-box {
    position: relative;
    display: flex;
    align-items: center;
    margin: 2em 0;
    padding: 0;
    width: 100%;
  }
  .product-item-box a {
    transition: 0.13s all ease;
  }
  .product-item-box a:hover {
    filter: saturate(0.7);
  }
  .product-item-box .product-item-thumb {
    width: 48%;
    margin: 0;
    text-align: center;
  }
  .product-item-box .product-item-thumb .image-thumb img {
    border: 0;
    box-shadow: none;
  }
  .product-item-box .product-item-thumb .image-thumb .image-content {
    position: absolute;
    top: 0;
    right: 0;
    border: 1px solid #eee;
    border-radius: 2px;
    background-color: #f5f6f7;
    visibility: hidden;
    opacity: 0;
    z-index: 99;
    transition: all 0.3s ease;
  }
  .product-item-box .product-item-thumb .image-thumb .image-content img {
    display: block;
  }
  .product-item-box .product-item-thumb .image-thumb:hover > .image-content {
    visibility: visible;
    opacity: 1;
  }
  .product-item-box .product-item-thumb .image-thumb:hover > .image-content:hover {
    display: none;
  }
  .product-item-box .product-item-thumb * {
    display: block;
  }
  .product-item-box .product-item-thumb > a > img {
    margin: 0 auto;
  }
  .product-item-box .product-item-thumb .swatchimages {
    display: flex;
    flex-wrap: wrap;
    margin-top: 0.5em;
  }
  .product-item-box .product-item-thumb .swatchimages > div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    margin: 3px;
  }
  .product-item-box .product-item-thumb .swatchimages > div:hover {
    box-shadow: 0 0 3px 1px #d5a16e;
  }
  .product-item-box .product-item-thumb .swatchimages img {
    display: block;
  }
  .product-item-box .product-item-content {
    top: -31px;
    width: 52%;
    padding-left: 2em;
    border-radius: 5px;
    transition: all 0.43s cubic-bezier(0.55, -0.07, 0.17, 0.77);
  }
  .product-item-box .product-item-content .product-item-title a {
    display: inline-block;
    color: var(--color-link);
    font-weight: bold;
    line-height: 1.4;
  }
  .product-item-box .product-item-content .product-item-snippet .product-item-maker {
    margin-left: 0.7em;
    font-size: 0.7em;
  }
  .product-item-box .product-item-content .product-item-buttons {
    margin-top: 1.7em;
  }
  .product-item-box .product-item-content .product-item-buttons .shoplinkamazon, .product-item-box .product-item-content .product-item-buttons .shoplinkrakuten, .product-item-box .product-item-content .product-item-buttons .shoplinkyahoo, .product-item-box .product-item-content .product-item-buttons .shoplinkbtn1 {
    margin: 0 auto;
    line-height: 1.3;
  }
  .product-item-box .product-item-content .product-item-buttons .shoplinkamazon a, .product-item-box .product-item-content .product-item-buttons .shoplinkrakuten a, .product-item-box .product-item-content .product-item-buttons .shoplinkyahoo a, .product-item-box .product-item-content .product-item-buttons .shoplinkbtn1 a {
    position: relative;
    display: block;
    margin-bottom: 0.9em;
    padding-left: 2.5em;
    color: var(--color-link);
    font-size: 0.8em;
    font-weight: bold;
    text-decoration: none;
  }
  .product-item-box .product-item-content .product-item-buttons .shoplinkamazon a img, .product-item-box .product-item-content .product-item-buttons .shoplinkrakuten a img, .product-item-box .product-item-content .product-item-buttons .shoplinkyahoo a img, .product-item-box .product-item-content .product-item-buttons .shoplinkbtn1 a img {
    position: absolute;
    bottom: 0;
    right: 0;
  }
  .product-item-box .product-item-content .product-item-buttons .shoplinkamazon a::before, .product-item-box .product-item-content .product-item-buttons .shoplinkrakuten a::before, .product-item-box .product-item-content .product-item-buttons .shoplinkyahoo a::before, .product-item-box .product-item-content .product-item-buttons .shoplinkbtn1 a::before, .product-item-box .product-item-content .product-item-buttons .shoplinkamazon a::after, .product-item-box .product-item-content .product-item-buttons .shoplinkrakuten a::after, .product-item-box .product-item-content .product-item-buttons .shoplinkyahoo a::after, .product-item-box .product-item-content .product-item-buttons .shoplinkbtn1 a::after {
    position: absolute;
    top: 0;
    bottom: 0;
    content: "";
    mask-size: cover;
    background-color: var(--color-link);
  }
  .product-item-box .product-item-content .product-item-buttons .shoplinkamazon a::before, .product-item-box .product-item-content .product-item-buttons .shoplinkrakuten a::before, .product-item-box .product-item-content .product-item-buttons .shoplinkyahoo a::before, .product-item-box .product-item-content .product-item-buttons .shoplinkbtn1 a::before {
    left: -0.7em;
    mask-repeat: no-repeat;
  }
  .product-item-box .product-item-content .product-item-buttons .shoplinkamazon a::after, .product-item-box .product-item-content .product-item-buttons .shoplinkrakuten a::after, .product-item-box .product-item-content .product-item-buttons .shoplinkyahoo a::after, .product-item-box .product-item-content .product-item-buttons .shoplinkbtn1 a::after {
    top: 2.5px;
    width: 1em;
    height: 1em;
    margin-left: 0.5em;
    mask-image: url("@/assets/svgs/external-link.svg");
  }
  .product-item-box .product-item-content .product-item-buttons .shoplinkamazon a::before {
    mask-image: url("@/assets/svgs/amazon.svg");
    top: -1em;
    width: 3.5em;
    height: 3.5em;
    transform: scale(0.37);
  }
  .product-item-box .product-item-content .product-item-buttons .shoplinkrakuten a::before {
    mask-image: url("@/assets/svgs/rakuten.svg");
    top: -0.95em;
    left: -0.61em;
    width: 3.5em;
    height: 3.5em;
    transform: scale(0.4);
  }
  .product-item-box .product-item-content .product-item-buttons .shoplinkyahoo a::before {
    top: -0.8em;
    left: -0.61em;
    width: 3.5em;
    height: 2.8em;
    transform: scale(0.45);
    mask-image: url("@/assets/svgs/yahoo.svg");
  }
  .product-item-box .product-item-content .product-item-buttons .shoplinkbtn1 a {
    margin: 0 auto 9px;
  }
  .product-item-box .product-item-content .product-item-buttons .shoplinkbtn1 a::before {
    mask-image: url("@/assets/svgs/.svg");
  }
  .speech-wrap .speech-person {
    display: none;
  }
  .speech-wrap .speech-balloon {
    padding: 0.2em 1.5em 0.38em;
    font-size: 0.9em;
    line-height: 1.5;
    border-radius: 7px;
    background-color: #f1efec;
  }
  .appreach {
    margin: 2.3em auto;
    padding: 1.2em 1em 1.3em;
    width: 93%;
    border: solid 2.3px #f0efee;
    border-radius: 13px;
  }
  .appreach p {
    margin: 0;
  }
  .appreach img {
    box-shadow: none;
    border: none;
  }
  .appreach .appreach__icon {
    float: left;
    margin: 0 3% 0 0;
    width: 16%;
    max-width: 16%;
    height: auto;
    border-radius: 10%;
    overflow: hidden;
  }
  .appreach .appreach__detail {
    display: inline-block;
    width: 76%;
    max-width: 76%;
    line-height: 1.5;
  }
  .appreach .appreach__detail .appreach__name {
    font-size: 1em;
    line-height: 1.5em;
  }
  .appreach .appreach__detail .appreach__info {
    font-size: 0.7em;
  }
  .appreach .appreach__detail .appreach__info .appreach__developper, .appreach .appreach__detail .appreach__info .appreach__price {
    margin-right: 0.8em;
  }
  .appreach .appreach__detail .appreach__info .appreach__posted {
    display: none;
  }
  .appreach .appreach__detail::after {
    content: "";
    display: block;
    clear: both;
  }
  .appreach .appreach__links {
    float: left;
    margin-top: 13px;
    height: 40px;
    white-space: nowrap;
  }
  .appreach .appreach__links .appreach__aslink, .appreach .appreach__links .appreach__gplink {
    display: inline-block;
  }
  .appreach .appreach__links .appreach__aslink img, .appreach .appreach__links .appreach__gplink img {
    display: inline-block;
    width: 135px;
    height: 40px;
    margin-right: 0.7em;
    border-radius: 0;
  }
  .appreach::after {
    content: "";
    display: block;
    clear: both;
  }
  .voice_wrap {
    display: flex;
  }
  .voice_wrap figure .voice_icon {
    margin: 0;
    width: 87%;
    border: solid 1.1px #e6e6e6 !important;
    border-radius: 50% !important;
    object-fit: cover;
  }
  .voice_wrap .voice_main {
    position: relative;
    width: 78%;
    height: 100%;
    float: right;
    padding: 0.79em 0.91em;
    border: 1px solid #ddd;
    border-radius: 11px;
    z-index: 0;
  }
  .voice_wrap .voice_main::before {
    content: "";
    position: absolute;
    top: 1em;
    left: -8px;
    margin-top: -9px;
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 9px 9px 9px 0;
    border-color: transparent var(--color-background) transparent transparent;
    z-index: 0;
  }
  .voice_wrap .voice_main::after {
    content: "";
    position: absolute;
    top: 1em;
    left: -10px;
    margin-top: -10px;
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 10px 10px 0;
    border-color: transparent #ddd transparent transparent;
    z-index: -1;
  }
  .voice_wrap .voice_main .voice_title {
    font-size: 1.1em;
    border-bottom: 1px solid #ddd;
    padding-bottom: 7px;
    line-height: 1;
  }
  .voice_wrap .voice_main .voice_title .voice_title_p {
    line-height: 1.5;
  }
  .voice_wrap .voice_main .voice_title p {
    margin: 0;
    padding: 0;
  }
  .voice_wrap .voice_main .voice_title .rating-star {
    font-size: 0.79em;
  }
  .voice_wrap .voice_main .voice_content {
    line-height: 1.5;
    padding: 5px 0;
    font-size: 0.9em;
  }
  .voice_wrap .voice_main .voice_link {
    font-size: 0.9em;
    text-align: right;
    line-height: 1;
    margin-top: 7px;
  }
  .btn-wrap > a {
    position: relative;
    display: inline-block;
    padding: 0.7em 3.1em 0.79em 1.7em;
    color: #fff;
    font-size: 0.85em;
    font-weight: bold;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    border: 1.9px solid transparent;
    border-radius: 7px;
    box-shadow: 1.3px 1.7px 5px -2px #50494e 59;
    transition: all 0.13s ease-out;
    cursor: pointer;
    user-select: none;
  }
  .btn-wrap > a:hover {
    box-shadow: none;
  }
  .btn-wrap > a::after {
    position: absolute;
    top: 0;
    bottom: 0.3px;
    width: 0.5em;
    height: 1em;
    margin: auto auto auto 0.8em;
    content: "";
    mask: url("@/assets/svgs/angle-right.svg");
    mask-size: cover;
    background-color: #fff;
  }
  .btn-wrap.btn-wrap-brown > a {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
  }
  .btn-wrap.btn-wrap-orange > a {
    border-color: #edb067;
    background-color: #edb067;
  }
  .btn-wrap.btn-wrap-deep-orange > a {
    border-color: #ec8e5d;
    background-color: #ec8e5d;
  }
  .btn-wrap.btn-wrap-red > a {
    border-color: #f48282;
    background-color: #f48282;
  }
  .btn-wrap.btn-wrap-green > a {
    border-color: #6fc775;
    background-color: #6fc775;
  }
  .btn-wrap.btn-wrap-light-green > a {
    border-color: #8bc34a;
    background-color: #8bc34a;
  }
  .btn-wrap.btn-wrap-indigo > a {
    border-color: #5e83c1;
    background-color: #5e83c1;
  }
  .btn-wrap.btn-wrap-light-blue > a {
    border-color: #70b1c9;
    background-color: #70b1c9;
  }
  .btn-wrap.btn-wrap-cyan > a {
    border-color: #76c7cd;
    background-color: #76c7cd;
  }
  .btn-wrap.btn-wrap-purple > a {
    border-color: #a370af;
    background-color: #a370af;
  }
  .dot-line-brown {
    width: 97%;
    margin: 44px auto -33px;
    line-height: 1.8;
    border-color: #f5ebdc;
    border-top-width: 5px;
    border-top-style: dotted;
  }
  .micro-bottom {
    margin-top: -3.1em;
    margin-bottom: 1em;
    color: var(--color-text);
    font-size: 0.67em;
    text-align: center;
  }
  .micro-bottom .red::after {
    background-color: #f48282;
  }
  .color-red {
    color: #ff5151;
  }
  .sss {
    box-shadow: none !important;
    border: none !important;
  }
  .alignnone {
    display: inline-block;
    margin-left: 0;
  }
  .deep_shadow {
    box-shadow: 1px 1.3px 8.9px 0 rgba(0, 0, 0, 0.7);
  }
  .youtube {
    display: inline-block;
    margin: 0;
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 7px;
    background-color: #1e1e1e;
    cursor: pointer;
  }
  .youtube img {
    width: 100%;
    aspect-ratio: 1.7777777778;
    object-fit: cover;
    border: solid 37px #1e1e1e;
    border-left: none;
    border-right: none;
  }
  .youtube::before {
    position: absolute;
    top: 0.5em;
    left: 1.3em;
    width: 78px;
    height: 18px;
    content: "";
    mask: url("@/assets/svgs/youtube-logo.svg");
    mask-size: cover;
    background-color: #fff;
  }
  .youtube::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    display: inline-block;
    width: 65px;
    height: 46px;
    background-image: url("https://mirumi.media/YouTube-icon-full_color.png");
    background-repeat: no-repeat;
    transform: translate(-50%, -50%);
    background-size: contain;
    vertical-align: middle;
    opacity: 0.91;
    transition: all 0.3s;
  }
  .youtube:hover::after {
    cursor: pointer;
    opacity: 0.73;
    background-image: url("https://mirumi.media/YouTube-icon-dark_color.png");
  }
  img[width="1"][height="1"] {
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
  i.fa-hand-point-up, i.fa-hand-point-right, i.fa-hand-point-down, i.fa-hand-point-left, i.fa-check-circle {
    position: relative;
    margin-right: 1.5em;
  }
  i.fa-hand-point-up::after, i.fa-hand-point-right::after, i.fa-hand-point-down::after, i.fa-hand-point-left::after, i.fa-check-circle::after {
    position: absolute;
    top: 0.2em;
    bottom: 0;
    width: 1.15em;
    height: 1.15em;
    content: "";
    mask-size: cover;
    background-color: transparent;
  }
  i.fa-hand-point-up {
    margin-right: 1.1em;
  }
  i.fa-hand-point-up::after {
    top: 0.3em;
    width: 0.75em;
    height: 1em;
    mask: url("@/assets/svgs/hand-point-up.svg");
    background-color: var(--color-text);
  }
  i.fa-hand-point-right::after {
    mask: url("@/assets/svgs/hand-point-right.svg");
    background-color: var(--color-text);
  }
  i.fa-hand-point-down {
    margin-right: 1.1em;
  }
  i.fa-hand-point-down::after {
    top: 0.3em;
    width: 0.75em;
    height: 1em;
    mask: url("@/assets/svgs/hand-point-down.svg");
    background-color: var(--color-text);
  }
  i.fa-hand-point-left::after {
    mask: url("@/assets/svgs/hand-point-left.svg");
    background-color: var(--color-text);
  }
  i.fa-check-circle::after {
    mask: url("@/assets/svgs/circle-check.svg");
  }
  span.fas.fa-star, span.far.fa-star {
    position: relative;
    margin-right: 1.5em;
  }
  span.fas.fa-star::before, span.far.fa-star::before {
    position: absolute;
    top: 0.2em;
    bottom: 0;
    width: 1.15em;
    height: 0.98em;
    content: "";
    mask-size: cover;
    font-size: 1.1em;
    background-color: #f5bc55;
  }
  span.fas.fa-star::before {
    mask: url("@/assets/svgs/star.svg");
  }
  span.far.fa-star::before {
    mask: url("@/assets/svgs/star-line.svg");
  }
}

/* Nuxt の content-dark.scss を scss -> css convert して article にまとめて #tinymce を追加したもの (+ :root, html) */
@media (prefers-color-scheme: dark) {
  :root {
    --color-text: #d0cfcd;
    --color-text-title-heading: #cdccc9;
    --color-gray: #888683;
    --color-text-white: #5b5b5b;
    --color-text-white-hover: #4e4e4e;
    --color-background: #2e2e2f;
    --color-footer: #252424;
    --color-primary: #64544f;
    --color-mi: #c1b2ac;
    --color-link: #cfa277;
    --color-media-border: #474340;
    --color-input-border: #a4a09b;
    --color-input-focus-border: #a18775;
    --color-input-focus-shadow: 0 0 0 0.19rem rgba(180, 147, 125, 0.37);
    --color-scrollbar-thumb: var(--color-gray);
  }
  article, #tinymce {
    .toc {
      border-color: #565351;
    }
    .toc .toc-content {
      border-top-color: #454545;
    }
    h2, h3, h4 {
      border-bottom-color: #4f4f4f;
    }
    blockquote {
      color: #b2b2b2;
      border-left-color: #86827e;
    }
    code {
      color: var(--color-text);
      background: #4a4c4d;
    }
    table {
      border-color: #6c6a66;
    }
    table th, table td {
      border-color: #6c6a66;
    }
    table thead {
      background-color: #424141;
    }
    table thead tr th {
      border-color: #555;
    }
    table tbody tr td {
      border-color: #656565;
    }
    .wp-caption .wp-caption-text {
      color: #b8b7b6;
    }
    .box-common {
      color: var(--color-text);
      border: solid 2.7px #5d5d5d;
    }
    .box-common.box-info {
      background-color: #4a4742;
    }
    .box-common.box-info::before {
      background-color: #b9ab78;
    }
    .box-common.box-alert {
      background-color: #453e3d;
    }
    .box-common.box-alert::before {
      background-color: #af7474;
    }
    .box-common.box-rewrite {
      background-color: #42453f;
    }
    .box-common.box-rewrite::before {
      background-color: #7f946c;
    }
    .waku-common {
      border-color: #504f4e;
      background-color: #363636;
    }
    .keyboard-key {
      color: #d9d9d9;
      background-color: #535353;
      border: solid 1.57px #878787;
    }
    a.blogcard:hover .blogcard {
      background-color: #333334;
    }
    a.blogcard .blogcard {
      border-color: #686868;
    }
    a.blogcard .blogcard .thumbnail.github + .content .favicon img {
      mix-blend-mode: multiply;
    }
    a.blogcard .blogcard .footer {
      color: #aeadab;
    }
    a.blogcard .blogcard .footer .category::before {
      background-color: #aeadab;
    }
    .speech-balloon {
      background-color: #404040;
    }
    .appreach {
      border-color: #717171;
    }
    .btn-wrap > a {
      filter: saturate(0.5);
    }
    .btn-wrap > a:hover {
      filter: saturate(0.3);
    }
    .dot-line-brown {
      border-top-width: 4.3px;
      border-color: #595754;
    }
    .micro-bottom {
      color: #b8b7b6;
    }
    .color-red {
      color: #dd6262;
    }
  }
}

@font-face {
  font-family: "Noto Sans milmemo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("NotoSansCJKjp-Bold.otf"), local("NotoSansJP-Bold.otf"),
    url("webfonts/Noto_Sans_JP/NotoSansJP-Regular.woff2") format("woff2"),
    url("webfonts/Noto_Sans_JP/NotoSansJP-Regular.woff") format("woff");
}
@font-face {
  font-family: "Noto Sans milmemo";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local("NotoSansCJKjp-Bold.otf"), local("NotoSansJP-Bold.otf"),
    url("webfonts/Noto_Sans_JP/NotoSansJP-Bold.woff2") format("woff2"),
    url("webfonts/Noto_Sans_JP/NotoSansJP-Bold.woff") format("woff");
}
.display-none-related-post {
  /* 広告ブロック非表示などにも使っているので注意 */
  display: none;
}