@charset "UTF-8";

/*!
Theme Name: Retoro Cocoon
Description: Cocoonの機能を保ったまま、NARISUKEレトロサイトのトンマナを反映した子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら / NARISUKE
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.14.0
*/

:root {
  --retoro-black: #050010;
  --retoro-navy: #05005c;
  --retoro-purple: #18002f;
  --retoro-cyan: #00ffff;
  --retoro-yellow: #ffff66;
  --retoro-pink: #ff33cc;
  --retoro-red: #ff0033;
  --retoro-green: #00ff66;
  --retoro-panel: rgba(0, 0, 0, .78);
  --retoro-site-width: 940px;
  --retoro-main-width: 736px;
  --retoro-sidebar-width: 184px;
}

body.retoro-cocoon {
  color: #ffffff;
  cursor: crosshair;
  font-family: "MS PGothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  background:
    radial-gradient(circle at 10px 10px, rgba(255, 255, 0, .45) 0 2px, transparent 3px),
    radial-gradient(circle at 35px 28px, rgba(0, 255, 255, .35) 0 2px, transparent 3px),
    repeating-linear-gradient(45deg, var(--retoro-navy) 0 8px, var(--retoro-purple) 8px 16px, #001b35 16px 24px);
  background-attachment: fixed;
}

@keyframes retoro-blink {
  50% { visibility: hidden; }
}

@keyframes retoro-marquee {
  0%, 100% { transform: translateX(-12px); }
  50% { transform: translateX(12px); }
}

@keyframes retoro-bob {
  50% { transform: translateY(8px); }
}

@keyframes retoro-spin {
  to { transform: rotate(360deg); }
}

@keyframes retoro-flash {
  0%, 49% {
    filter: brightness(1);
    box-shadow: 0 0 8px #00ffff, 0 0 0 #ff33cc;
  }
  50%, 100% {
    filter: brightness(1.65) saturate(1.9);
    box-shadow: 0 0 18px #ffff00, 0 0 28px #ff33cc;
  }
}

@keyframes retoro-color-cycle {
  0%, 24% { color: #00ffff; }
  25%, 49% { color: #ffff00; }
  50%, 74% { color: #ff33cc; }
  75%, 100% { color: #00ff66; }
}

@keyframes retoro-border-cycle {
  0%, 24% { border-color: #ffff00; }
  25%, 49% { border-color: #00ffff; }
  50%, 74% { border-color: #ff33cc; }
  75%, 100% { border-color: #00ff66; }
}

@keyframes retoro-icon-shuttle {
  0%, 100% { transform: translateX(-14px); }
  50% { transform: translateX(14px); }
}

@keyframes retoro-hue {
  to { filter: hue-rotate(360deg) saturate(1.4); }
}

.retoro-cocoon::after {
  content: "AI活用・Web制作\A ご相談受付中";
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 20;
  width: 172px;
  padding: 8px;
  border: 3px solid #ff0000;
  background: var(--retoro-yellow);
  color: #000000;
  font-weight: bold;
  line-height: 1.35;
  text-align: center;
  white-space: pre;
  box-shadow: 4px 4px 0 #000000;
  animation: retoro-bob 1.3s steps(2) infinite, retoro-flash .55s steps(1) infinite;
}

.retoro-cocoon a {
  color: var(--retoro-yellow);
  text-decoration: none;
}

.retoro-cocoon a:hover {
  color: #0000ff;
  background: var(--retoro-cyan);
}

.retoro-cocoon .container,
.retoro-cocoon .header-container,
.retoro-cocoon .navi,
.retoro-cocoon .main,
.retoro-cocoon .sidebar,
.retoro-cocoon .footer {
  background: transparent;
}

.retoro-cocoon .header-container-in,
.retoro-cocoon .navi-in,
.retoro-cocoon .content-in,
.retoro-cocoon .footer-in {
  width: min(var(--retoro-site-width), calc(100vw - 20px)) !important;
  max-width: var(--retoro-site-width) !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

.retoro-cocoon .wrap {
  width: min(var(--retoro-site-width), calc(100vw - 20px)) !important;
  max-width: var(--retoro-site-width) !important;
}

.retoro-cocoon .header-container-in.hlt-top-menu {
  display: block !important;
}

.retoro-cocoon .header-container-in.hlt-top-menu .wrap,
.retoro-cocoon .header-container-in.hlt-top-menu .header,
.retoro-cocoon .header-container-in.hlt-top-menu .navi,
.retoro-cocoon .header-container-in .header,
.retoro-cocoon .header-container-in .navi {
  width: 100% !important;
  max-width: 100% !important;
}

.retoro-cocoon .header-container-in.hlt-top-menu .logo-text,
.retoro-cocoon .header-container-in.hlt-top-menu .logo-header {
  justify-content: center;
  min-height: 120px;
}

.retoro-cocoon .header-container-in.hlt-top-menu .tagline {
  display: block;
}

.retoro-cocoon .header-container::before {
  content: "◆最終更新日 2026/05/25　NARISUKE Direct Web Site Regular update";
  display: block;
  width: min(420px, calc(100vw - 32px));
  margin: 8px auto 4px;
  color: #33ffff;
  font-size: 12px;
  text-align: center;
}

.retoro-cocoon .header-container::after {
  content: "";
  display: block;
  width: min(420px, calc(100vw - 32px));
  height: 12px;
  margin: 4px auto 10px;
  border: 1px solid var(--retoro-cyan);
  background: repeating-linear-gradient(90deg, #ff0033 0 18px, #ffff00 18px 36px, #00ffff 36px 54px, #00ff66 54px 72px);
  box-shadow: 0 0 12px var(--retoro-cyan);
  animation: retoro-flash .38s steps(1) infinite;
}

.retoro-cocoon .header-container-in.hlt-top-menu,
.retoro-cocoon .header-container-in.hlt-center-logo,
.retoro-cocoon .header-container-in {
  border: 3px outset var(--retoro-yellow);
  background: #000000;
  box-shadow: 0 0 16px rgba(0, 255, 255, .75);
  animation: retoro-border-cycle .7s steps(1) infinite;
}

.retoro-cocoon .site-name-text,
.retoro-cocoon .logo-text {
  color: var(--retoro-cyan);
  letter-spacing: 0;
  text-shadow: 2px 2px 0 #ff0000, -2px -2px 0 #0000ff;
  animation: retoro-color-cycle .55s steps(1) infinite;
}

.retoro-cocoon .site-name-text::before,
.retoro-cocoon .logo-text::before {
  content: "◆ ";
  color: #ffff00;
  animation: retoro-spin 1.6s steps(8) infinite;
  display: inline-block;
}

.retoro-cocoon .site-name-text::after,
.retoro-cocoon .logo-text::after {
  content: " ◆";
  color: #ff33cc;
  animation: retoro-blink .8s steps(1) infinite;
}

.retoro-cocoon .tagline {
  color: #33ffff;
}

.retoro-cocoon .tagline::before {
  content: "≫ ";
  color: #ffffff;
}

.retoro-cocoon .tagline::after {
  content: " ◆ 平日夜と土日で高速稼働中 ◆";
  color: var(--retoro-yellow);
  font-weight: bold;
  animation: retoro-blink .8s steps(1) infinite;
}

.retoro-cocoon .navi-in > ul {
  border: 3px ridge var(--retoro-yellow);
  background: #000000;
  justify-content: center;
}

.retoro-cocoon .navi-in > ul .sub-menu {
  border: 3px ridge var(--retoro-yellow);
  background: #000000 !important;
}

.retoro-cocoon .navi-in > ul .sub-menu li {
  border-bottom: 1px solid #333333;
  background: #990000;
}

.retoro-cocoon .navi-in > ul .sub-menu li:nth-child(even) {
  background: #101060;
}

.retoro-cocoon .navi::after {
  content: "★ 中小企業の業務課題をAIとWebで解決します ★ 受託開発・AI導入相談・マイクロSaaS構想・note発信 ★";
  display: block;
  overflow: hidden;
  width: min(calc(var(--retoro-site-width) - 30px), calc(100vw - 30px));
  margin: 8px auto;
  padding: 2px 10px;
  border: 3px ridge var(--retoro-yellow);
  background: #000000;
  color: var(--retoro-pink);
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
  animation: retoro-marquee .9s steps(2) infinite, retoro-color-cycle .45s steps(1) infinite, retoro-flash .55s steps(1) infinite;
}

.retoro-cocoon .search-box {
  border: 2px solid #ffffff;
  background: #000000;
}

.retoro-cocoon .search-edit {
  min-height: 40px;
  border: 2px inset #ffffff;
  background: #000000 !important;
  color: #00ff00 !important;
}

.retoro-cocoon .search-edit::placeholder {
  color: #888888;
}

.retoro-cocoon .search-submit {
  top: 50%;
  right: 6px;
  width: 38px;
  height: 32px;
  padding: 0;
  border: 3px outset var(--retoro-yellow);
  background: #000000 !important;
  color: var(--retoro-yellow) !important;
  transform: translateY(-50%);
}

.retoro-cocoon .search-submit:hover {
  background: var(--retoro-cyan) !important;
  color: #0000ff !important;
}

.retoro-cocoon .navi-in a {
  color: var(--retoro-yellow);
  font-weight: bold;
  text-shadow: 1px 1px 0 #000000, -1px 1px 0 #000000, 1px -1px 0 #000000, -1px -1px 0 #000000;
}

.retoro-cocoon .navi-in a:hover,
.retoro-cocoon .navi-in li:hover > a,
.retoro-cocoon .navi-in > ul .sub-menu a:hover {
  color: var(--retoro-yellow) !important;
  background: var(--retoro-cyan) !important;
  text-shadow: 1px 1px 0 #000000, -1px 1px 0 #000000, 1px -1px 0 #000000, -1px -1px 0 #000000;
  transition: none;
}

.retoro-cocoon .content-in {
  align-items: flex-start;
  flex-wrap: wrap;
}

.retoro-cocoon .content-in::before {
  content: "ただいま独立準備中・AI導入相談・Webシステム開発・業務改善メモ公開中";
  display: block;
  flex: 0 0 100%;
  margin: 0 0 8px;
  padding: 8px;
  border: 3px double #ff0000;
  background: var(--retoro-yellow);
  color: #000000;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  animation: retoro-flash .6s steps(1) infinite;
}

.retoro-cocoon .main,
.retoro-cocoon .sidebar {
  color: #ffffff;
  background: var(--retoro-panel);
  border: 4px ridge var(--retoro-pink);
  box-shadow: 6px 6px 0 #000000;
  animation: none;
}

.retoro-cocoon .main::before {
  content: "▼ ▽ ▼ ▽";
  display: block;
  margin: -4px auto 10px;
  padding: 2px 8px;
  width: fit-content;
  border: 2px inset #ffffff;
  background: #000000;
  color: #ffff00;
  font-family: "Courier New", monospace;
  letter-spacing: 4px;
  animation: retoro-icon-shuttle .9s steps(2) infinite, retoro-color-cycle .55s steps(1) infinite;
}

.retoro-cocoon .sidebar::before {
  content: var(--retoro-access-count-sidebar, "あなたは 00000000 人目の訪問者です");
  display: block;
  margin: 0 0 12px;
  padding: 6px 8px;
  border: 3px inset #ffffff;
  background: #000000;
  color: #00ff00;
  font-family: "Courier New", monospace;
  font-size: 13px;
  font-weight: bold;
  line-height: 1.4;
  text-align: center;
  letter-spacing: 1px;
  box-shadow: 0 0 10px #00ff00;
}

.retoro-cocoon .main {
  width: var(--retoro-main-width);
  padding: 18px;
}

.retoro-cocoon .sidebar {
  width: var(--retoro-sidebar-width);
  padding: 10px;
  font-size: 12px;
}

.retoro-cocoon.no-sidebar .content .main {
  width: 100%;
}

.retoro-cocoon.sidebar-left .content-in {
  flex-direction: row-reverse;
}

.retoro-cocoon .article::before {
  content: "Welcome to NARISUKE Web Site";
  display: block;
  margin: 0 0 10px;
  color: #ffff00;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  text-shadow: 2px 2px 0 #ff0000;
  animation: retoro-blink 1.4s steps(1) infinite;
}

.retoro-cocoon .article::after {
  content: var(--retoro-access-count-footer, "ACCESS COUNTER 00000000 / Since 2026 / Produced by NARISUKE");
  display: block;
  width: fit-content;
  margin: 18px auto 0;
  padding: 3px 8px;
  border: 2px inset #ffffff;
  background: #000000;
  color: #00ff00;
  font-family: "Courier New", monospace;
  font-size: 14px;
  letter-spacing: 1px;
}

.retoro-cocoon .entry-title,
.retoro-cocoon .archive-title,
.retoro-cocoon .article h1,
.retoro-cocoon .article h2,
.retoro-cocoon .article h3 {
  color: #ffff00;
  letter-spacing: 0;
  text-shadow: 2px 2px 0 #ff0000;
  animation: none;
}

.retoro-cocoon .article h2 {
  padding: .45em .6em;
  border: 3px double #ff0000;
  background: var(--retoro-yellow);
  color: #000000;
  text-shadow: none;
}

.retoro-cocoon .article h2::before {
  content: "◆ ";
  color: #ff0033;
}

.retoro-cocoon .article h2::after {
  content: " ◆";
  color: #0000ff;
  animation: retoro-blink .8s steps(1) infinite;
}

.retoro-cocoon .article h3 {
  padding: .35em .55em;
  border-left: 12px solid var(--retoro-cyan);
  border-bottom: 2px solid var(--retoro-cyan);
  background: #101060;
}

.retoro-cocoon .article h3::before {
  content: "≫ ";
  color: var(--retoro-cyan);
}

.retoro-cocoon .entry-content,
.retoro-cocoon .article,
.retoro-cocoon .widget {
  color: #ffffff;
}

.retoro-cocoon .entry-content p,
.retoro-cocoon .entry-content li,
.retoro-cocoon .entry-content td,
.retoro-cocoon .entry-content dd,
.retoro-cocoon .entry-content blockquote,
.retoro-cocoon .comment-content,
.retoro-cocoon .comment-form,
.retoro-cocoon .widget {
  line-height: 1.75;
}

.retoro-cocoon :where(
  .author-box,
  .comment-body,
  .comment-respond,
  .related-entry-card,
  .entry-card,
  .blogcard,
  .blank-box,
  .information-box,
  .question-box,
  .alert-box,
  .memo-box,
  .comment-box,
  .common-icon-box,
  .wp-block-table,
  .wp-block-quote,
  .wp-block-code,
  .wp-block-preformatted,
  .search-box,
  .calendar_wrap,
  .ranking-item,
  .timeline-box,
  .profile-box
) {
  background: #101060;
  color: #ffffff;
}

.retoro-cocoon pre,
.retoro-cocoon code,
.retoro-cocoon kbd,
.retoro-cocoon samp,
.retoro-cocoon .wp-block-code,
.retoro-cocoon .wp-block-code code,
.retoro-cocoon .wp-block-preformatted,
.retoro-cocoon .wp-block-preformatted pre,
.retoro-cocoon .entry-content pre,
.retoro-cocoon .entry-content code,
.retoro-cocoon .code-block,
.retoro-cocoon .hljs,
.retoro-cocoon .highlight,
.retoro-cocoon .prism,
.retoro-cocoon .line-numbers,
.retoro-cocoon .wp-block-cocoon-blocks-code-block,
.retoro-cocoon .wp-block-cocoon-blocks-code-block pre,
.retoro-cocoon .wp-block-cocoon-blocks-code-block code {
  background: #101060 !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
  text-shadow: none !important;
}

.retoro-cocoon pre,
.retoro-cocoon .wp-block-code,
.retoro-cocoon .wp-block-preformatted,
.retoro-cocoon .entry-content pre {
  border: 3px double #ffffff;
  padding: 1em;
  overflow-x: auto;
}

.retoro-cocoon code,
.retoro-cocoon kbd,
.retoro-cocoon samp {
  padding: .1em .35em;
}

.retoro-cocoon :where(
  .has-white-background-color,
  .has-luminous-vivid-amber-background-color,
  .has-pale-pink-background-color,
  .has-light-green-cyan-background-color,
  .has-cyan-bluish-gray-background-color,
  .wp-block-cocoon-blocks-tab-caption-box-block,
  .wp-block-cocoon-blocks-tab-box-1,
  .wp-block-cocoon-blocks-tab-box-2,
  .wp-block-cocoon-blocks-tab-box-3,
  .wp-block-cocoon-blocks-tab-box-4,
  .wp-block-cocoon-blocks-tab-box-5,
  .wp-block-cocoon-blocks-label-box-1,
  .wp-block-cocoon-blocks-label-box-2,
  .wp-block-cocoon-blocks-label-box-3,
  .wp-block-cocoon-blocks-label-box-4,
  .wp-block-cocoon-blocks-label-box-5
) {
  color: #111111;
}

.retoro-cocoon :where(
  .has-white-background-color,
  .has-luminous-vivid-amber-background-color,
  .has-pale-pink-background-color,
  .has-light-green-cyan-background-color,
  .has-cyan-bluish-gray-background-color
) a {
  color: #0000aa;
  text-decoration: underline;
}

.retoro-cocoon table,
.retoro-cocoon th,
.retoro-cocoon td {
  border-color: #ffffff;
}

.retoro-cocoon th {
  background: var(--retoro-cyan);
  color: #000000;
}

.retoro-cocoon td {
  background: #101060;
  color: #ffffff;
}

.retoro-cocoon .date-tags,
.retoro-cocoon .post-date,
.retoro-cocoon .post-update,
.retoro-cocoon .breadcrumb,
.retoro-cocoon .entry-card-snippet,
.retoro-cocoon .related-entry-card-snippet {
  color: #33ffff;
}

.retoro-cocoon .entry-card-wrap,
.retoro-cocoon .related-entry-card-wrap,
.retoro-cocoon .popular-entry-card,
.retoro-cocoon .widget-entry-card,
.retoro-cocoon .blogcard {
  border: 2px solid #ffffff;
  background: #101060;
  color: #ffffff;
  animation: none;
}

.retoro-cocoon .entry-card-thumb img,
.retoro-cocoon .related-entry-card-thumb img,
.retoro-cocoon .widget-entry-card-thumb img,
.retoro-cocoon .eye-catch img,
.retoro-cocoon .blogcard-thumbnail img {
  animation: none;
}

.retoro-cocoon .entry-card-title::before,
.retoro-cocoon .related-entry-card-title::before,
.retoro-cocoon .widget-entry-card-title::before {
  content: "★ ";
  color: #ffff00;
}

.retoro-cocoon .entry-card-wrap:hover,
.retoro-cocoon .related-entry-card-wrap:hover,
.retoro-cocoon .popular-entry-card:hover,
.retoro-cocoon .widget-entry-card:hover {
  background: #000000;
  box-shadow: 0 0 12px var(--retoro-cyan);
}

.retoro-cocoon .cat-label,
.retoro-cocoon .cat-link,
.retoro-cocoon .tag-link,
.retoro-cocoon .label,
.retoro-cocoon .badge {
  border: 2px outset var(--retoro-yellow);
  background: #990000;
  color: #ffffff;
  font-weight: bold;
}

.retoro-cocoon .widget-title,
.retoro-cocoon .sidebar h2,
.retoro-cocoon .sidebar h3 {
  padding: 6px 8px;
  border: 3px ridge var(--retoro-yellow);
  background: #000000;
  color: #33ffff;
  text-align: center;
  animation: retoro-flash .6s steps(1) infinite;
}

.retoro-cocoon .widget-title::before,
.retoro-cocoon .sidebar h2::before,
.retoro-cocoon .sidebar h3::before {
  content: "※ ";
  color: #ff33cc;
}

.retoro-cocoon .widget-title::after,
.retoro-cocoon .sidebar h2::after,
.retoro-cocoon .sidebar h3::after {
  content: " ※";
  color: #00ffff;
  animation: retoro-blink .8s steps(1) infinite;
}

.retoro-cocoon .sidebar li,
.retoro-cocoon .sidebar .menu-item,
.retoro-cocoon .sidebar .cat-item {
  margin: 0;
  border-bottom: 1px solid #000000;
  background: #990000;
}

.retoro-cocoon .sidebar li:nth-child(even),
.retoro-cocoon .sidebar .menu-item:nth-child(even),
.retoro-cocoon .sidebar .cat-item:nth-child(even) {
  background: #ff6633;
}

.retoro-cocoon .sidebar li a,
.retoro-cocoon .sidebar .menu-item a,
.retoro-cocoon .sidebar .cat-item a {
  display: block;
  padding: 4px 3px;
}

.retoro-cocoon .sidebar li a::before,
.retoro-cocoon .sidebar .menu-item a::before,
.retoro-cocoon .sidebar .cat-item a::before {
  content: "≫ ";
  color: #ffffff;
}

.retoro-cocoon .toc,
.retoro-cocoon .information-box,
.retoro-cocoon .question-box,
.retoro-cocoon .alert-box,
.retoro-cocoon .memo-box,
.retoro-cocoon .comment-box {
  border: 3px double #ffffff;
  background: #101060;
  color: #ffffff;
}

.retoro-cocoon .toc-title,
.retoro-cocoon .sns-share-message,
.retoro-cocoon .sns-follow-message {
  color: var(--retoro-yellow);
  font-weight: bold;
}

.retoro-cocoon .pager-post-navi a,
.retoro-cocoon .pagination a,
.retoro-cocoon .pagination .current,
.retoro-cocoon .page-numbers,
.retoro-cocoon .pagination-next-link,
.retoro-cocoon .pager-links a,
.retoro-cocoon .pager-links span,
.retoro-cocoon .comment-reply-link,
.retoro-cocoon .submit,
.retoro-cocoon button,
.retoro-cocoon input[type="submit"] {
  border: 3px outset var(--retoro-yellow);
  background: #000000;
  color: var(--retoro-yellow);
  font-weight: bold;
  text-shadow: 1px 1px 0 #000000, -1px 1px 0 #000000, 1px -1px 0 #000000, -1px -1px 0 #000000;
}

.retoro-cocoon .pager-post-navi a:hover,
.retoro-cocoon .pagination a:hover,
.retoro-cocoon .pagination-next-link:hover,
.retoro-cocoon .pager-links a:hover,
.retoro-cocoon .comment-reply-link:hover,
.retoro-cocoon .submit:hover,
.retoro-cocoon button:hover,
.retoro-cocoon input[type="submit"]:hover {
  background: #ffffff !important;
  color: var(--retoro-yellow) !important;
  text-shadow: 1px 1px 0 #000000, -1px 1px 0 #000000, 1px -1px 0 #000000, -1px -1px 0 #000000;
  transition: none;
}

.retoro-cocoon input[type="text"],
.retoro-cocoon input[type="email"],
.retoro-cocoon input[type="url"],
.retoro-cocoon input[type="search"],
.retoro-cocoon textarea {
  border: 2px inset #ffffff;
  background: #000000;
  color: #00ff00;
}

.retoro-cocoon .footer {
  margin-top: 24px;
  border-top: 4px ridge var(--retoro-pink);
  color: #33ffff;
}

.retoro-cocoon .go-to-top-button {
  border: 3px outset var(--retoro-yellow);
  background: #000000;
  color: var(--retoro-yellow);
}

@media screen and (max-width: 834px) {
  .retoro-cocoon::after {
    position: static;
    display: block;
    width: min(300px, calc(100vw - 48px));
    margin: 10px auto 0;
  }

  .retoro-cocoon .content-in {
    display: block;
  }

  .retoro-cocoon .main,
  .retoro-cocoon .sidebar {
    width: auto;
  }

  .retoro-cocoon .main,
  .retoro-cocoon .sidebar {
    padding: 12px;
    box-shadow: 3px 3px 0 #000000;
  }
}

@media screen and (max-width: 480px) {
  .retoro-cocoon .main,
  .retoro-cocoon .sidebar {
    border-width: 3px;
  }
}